/*
 * surface-shell.css - the one screen.
 *
 * Written 2026-09-10 for design/Presentation1.pptx, phrased in
 * design/ORCO-SIMPLIFIED.md. It styles three things and nothing else: the
 * address row, the tab row, and the two controls that replaced six.
 *
 * It is a separate file from css/orco.css on purpose. That file is 4,468 lines
 * and every seat that has ever touched this project has edited it; a new
 * surface that lands in its own file can be read, reviewed and reverted on its
 * own. Same reason css/surface-show.css and css/surface-home.css exist.
 *
 * Every colour here is a token from the visual direction agreed in
 * docs/beta-run/UX-VISUAL-DIRECTION.md. Nothing new is invented: the deck is
 * about structure, and re-grounding the palette twice in one day would be a
 * change nobody asked for wearing the costume of one that was.
 */

/* =====================================================================
 * THE HEADER, now in rows
 *
 * REBUILT 2026-09-10 19:15 AGAINST THE RENDERED SLIDES.
 *
 * The first version of this file was written from the pptx XML, which gives
 * every shape's position and size and says nothing about its fill. So the
 * structure came out right and the SURFACE came out wrong: I had a dark inset
 * address bar where Victor had drawn a white one, an outlined + where he had
 * drawn a solid blue one, and a labelled pill where he had drawn a bare glyph.
 *
 * Victor exported design/Presentation1/Slide1-8.png and said "this is what i
 * wanted". Every value below now comes from those images rather than from a
 * coordinate table. It is the same lesson this project keeps paying for: the
 * code said where, only the picture said what.
 * ===================================================================== */

.topbar {
  /* Three rows where there was one line. The old bar tried to hold twenty
     controls, a name, four status pills and a Present button on one line, and
     below 1200px it started giving up words. */
  display: block;
  padding: 0;
  background: var(--ground);
  border-bottom: 0;
}

.addressrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 4px;
}

/* The tools sit INDENTED, aligned to the left edge of the address bar above
   them rather than to the edge of the window. That indent is the strongest
   compositional move in his drawing: it makes the address the spine of the
   screen and the toolbar something hanging off it, instead of two unrelated
   bars stacked. The number is the brand width plus the row gap. */
.toolrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px 9px 110px;
  overflow-x: auto;
  scrollbar-width: none;
}
.toolrow::-webkit-scrollbar { display: none; }

/* =====================================================================
 * THE ADDRESS
 * ===================================================================== */

/*
 * WHITE. Not a stylistic flourish and not a break from the navy and gold
 * direction: it is the single most deliberate thing in his drawing, and it is
 * doing a job. Orco is a dark application whose whole purpose is to hand
 * somebody a link, and a white pill on navy is the one shape everyone on earth
 * already reads as "this is an address, and you can type in it".
 *
 * It is also the reason the rest of the chrome can stay quiet. With one bright
 * object at the top, nothing else has to compete to be found.
 */
.address {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: #ffffff;
  font: 400 14.5px/1 -apple-system, system-ui, "Segoe UI", sans-serif;
  transition: box-shadow var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.address:focus-within { box-shadow: 0 0 0 3px rgba(227, 200, 120, 0.45); }

/* The fixed parts are grey; the part he owns is near-black. Same relationship
   every browser address bar has had for fifteen years, so it needs no
   explaining. */
.address-fixed,
.address-host {
  color: #5f6673;
  white-space: nowrap;
  user-select: none;
}
.address-host { color: #5f6673; }

/*
 * THE TITLE, NOT THE SLUG.
 *
 * His slide 2 reads "/p/Untitled/" with a capital U and slide 3 reads
 * "/p/food-for-thought-nci/". I had built it to show a slug at rest and swap
 * to the title on focus, which was a clever answer to a question he had
 * already answered: the thing in the address IS the name, typed as he wants
 * it, and Orco does not correct him into lowercase while he watches.
 *
 * Slugification still happens, at the moment the address is USED rather than
 * while it is being read, which is where a lossy transform belongs.
 */
.address-slug {
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #12161f;
  font: inherit;
  text-overflow: ellipsis;
}
.address-slug::placeholder { color: #9aa1ad; }
.address-slug::selection { background: rgba(227, 200, 120, 0.45); }

/* =====================================================================
 * SHARE
 * ===================================================================== */

/*
 * Bare, and at the far right of the address row, which is where his drawing
 * puts it and where every operating system has trained people to look for it.
 * No pill, no border, no word: it is a mark you reach for when you have
 * decided to share, not a status you read while you work.
 */
.share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), background var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.share:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.share:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Public is the state worth noticing, so it is the only one that is marked. An
   interface that lights up to tell you nothing has happened teaches people to
   stop reading it. */
.share[data-state="public"] { color: var(--gold); }

/* The label is kept for screen readers and for the tests. Removing the WORD
   was a visual decision; removing the FACT would not have been. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.share-sheet { display: flex; flex-direction: column; gap: 16px; }
.share-url {
  font: 400 12.5px/1.5 ui-monospace, Menlo, monospace;
  color: var(--ink-2);
  word-break: break-all;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--ground-2, rgba(0, 0, 0, 0.22));
}
.share-opts { display: flex; flex-direction: column; gap: 8px; }
.share-opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), background var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.share-opt:hover { border-color: var(--hair-lit); background: var(--surface, rgba(255, 255, 255, 0.03)); }
.share-opt[aria-current="true"] { border-color: var(--gold-deep); }
.share-opt-name { font: 600 13.5px/1 -apple-system, system-ui, sans-serif; color: var(--ink); }
.share-opt[aria-current="true"] .share-opt-name { color: var(--gold); }
.share-opt-why { font: 400 12px/1.45 -apple-system, system-ui, sans-serif; color: var(--ink-3); }

.share-facts { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--hair); }
.share-fact { display: flex; justify-content: space-between; gap: 12px; }
.share-fact-k { font: 400 12px/1.5 -apple-system, system-ui, sans-serif; color: var(--ink-3); }
.share-fact-v { font: 500 12px/1.5 -apple-system, system-ui, sans-serif; color: var(--ink-2); }

/* =====================================================================
 * THE ONE VERB
 * ===================================================================== */

/*
 * Round, gold-edged, and the only round-and-gold thing on the row. Five doors
 * became this, so it can afford to be the one control the eye lands on.
 */
/*
 * SOLID BLUE, and the only filled control on the screen.
 *
 * Every other chip in his toolbar is an outline. This one is filled, and that
 * single difference is what makes five doors collapsing into one verb legible
 * without a label. The blue is sampled from the drawing rather than chosen:
 * it is not in the navy-and-gold token set, and it is not supposed to be,
 * because a verb that shared the accent colour of every hairline in the
 * product would disappear into it.
 */
.addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: #1878d4;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(24, 120, 212, 0.45);
  transition: background var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), transform var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.addbtn:hover { background: #2a8ae8; }
.addbtn:active { transform: scale(0.92); }
.addbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =====================================================================
 * THE TAB ROW
 * ===================================================================== */

/*
 * Rounded rectangles under the address, indented to the same left edge as the
 * tools, which is exactly how slide 8 draws them.
 *
 * He drew four and annotated them "leave space for modular approach, ie
 * separate functional areas in the future". This renders the areas that exist
 * (one) rather than four boxes, and js/orco-shell.js explains why: a second
 * functional area is a push to an array. Four empty boxes would have looked
 * more like the drawing and meant less.
 */
.tabrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 8px 110px;
}
.tabrow:empty { display: none; }

.tab {
  max-width: 220px;
  padding: 7px 16px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink-2);
  font: 500 12px/1 -apple-system, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), border-color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.tab:hover { color: var(--ink); border-color: var(--hair-lit); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab.is-current { color: var(--ink); border-color: var(--hair-lit); }

/* =====================================================================
 * WHERE SAVE STOOD
 * ===================================================================== */

/*
 * Quiet on purpose. It is a fact, not a control and not a reassurance, so it
 * is set at the size of a caption in the tertiary ink and it never changes
 * colour. The pill it replaced had a coloured dot that went amber when work
 * was "unsaved", which was alarming about a state that was never dangerous.
 */
.edits {
  padding: 0 10px;
  color: var(--ink-3);
  font: 500 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* =====================================================================
 * NARROW
 * ===================================================================== */

/*
 * THE FINGER FLOOR. A cold verifier driving a 390x844 iPhone measured .share
 * at 32px against the 44px floor every other control on the phone bar meets,
 * and it was right: a control that replaced four controls is the last one that
 * should be hard to hit. The hit area grows; the glyph does not, because a
 * 44px mark would shout on a bar this quiet.
 */
@media (pointer: coarse) {
  .share { width: 44px; height: 44px; }
  .addbtn { width: 40px; height: 40px; flex-basis: 40px; }
  .tab { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 760px) {
  .addressrow { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .address { order: 3; flex-basis: 100%; height: 32px; font-size: 12.5px; }
  .share span { display: none; }        /* the icon carries it */
  .share { padding: 0 9px; }
  .tabrow { padding: 0 12px; }
  .edits { display: none; }             /* the first thing a small screen gives up */
}

/* =====================================================================
 * THE START SCREEN
 * design/Presentation1/Slide1.png
 *
 * Victor: "starting with this at orco.vdr.me".
 *
 * A light body, a white card, two blue objects. It is the least the root of a
 * slide application can be, and that is the argument for it: everything the
 * manager offered is still one click away behind the brand mark, and none of
 * it has to be answered before you can start.
 * ===================================================================== */

.startview {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* The body is LIGHT here, not navy. His drawing is explicit about it, and it
     is the same light the slide canvas uses on every other screen, so the root
     is already showing you the material you are about to work on. */
  background: #f4f5f7;
  padding: 24px;
}
.startview[hidden] { display: none; }

/*
 * Pushed below the bar rather than covering it. The bar is the one constant
 * object in the product ("this stays constant"), so no surface is allowed to
 * paint over it. A fixed number would drift the moment the bar changed height,
 * so js/orco-shell.js measures the real bar and writes --chrome-h; the 56px
 * below is only what applies before the first measurement lands.
 */
.startview { top: var(--chrome-h, 56px); }

.start-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 9vw, 120px);
  width: min(760px, 100%);
  padding: clamp(28px, 6vw, 64px);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.06);
}

/*
 * The blue circle. Deliberately NOT a perfect circle: his drawing has a soft,
 * slightly irregular blob, which is the one warm human mark on an otherwise
 * geometric screen. The border-radius below is four different values for that
 * reason, and it is not a mistake to be tidied up later.
 */
.start-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(104px, 14vw, 132px);
  height: clamp(104px, 14vw, 132px);
  border: 0;
  border-radius: 47% 53% 52% 48% / 51% 47% 53% 49%;
  background: #8ab6e8;
  color: #ffffff;
  cursor: pointer;
  transition: background 160ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), transform 160ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.start-blank:hover { background: #7aabe4; transform: translateY(-2px); }
.start-blank:active { transform: translateY(0) scale(0.97); }
.start-blank:focus-visible { outline: 3px solid #1878d4; outline-offset: 4px; }
.start-blank-mark { font: 300 26px/1 -apple-system, system-ui, sans-serif; }
.start-blank-lbl { font: 500 14px/1.2 -apple-system, system-ui, sans-serif; }

.start-folder {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 12px;
  transition: transform 160ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)), filter 160ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.start-folder:hover { transform: translateY(-2px); filter: brightness(1.04); }
.start-folder:active { transform: translateY(0) scale(0.97); }
.start-folder:focus-visible { outline: 3px solid #1878d4; outline-offset: 6px; }

/*
 * His two annotations, said once, in one line, under the card.
 *
 * They are on the screen rather than in a tooltip because they are the only
 * two facts a person needs before pressing either object, and a first screen
 * with two controls can afford one sentence. It is not a tour and it does not
 * come back.
 */
.start-note {
  margin: 0;
  max-width: 640px;
  text-align: center;
  color: #6b7280;
  font: 400 13px/1.6 -apple-system, system-ui, sans-serif;
}

@media (max-width: 620px) {
  .start-card { flex-direction: column; gap: 34px; padding: 40px 24px; }
}

/* =====================================================================
 * THE CONSTANT
 *
 * Victor, 2026-09-10, with a crop of the bar and three words:
 * "this stays constant".
 *
 * The navy bar with the orca at its left is on every screen he drew: the
 * start screen, the presentation, the gallery, the sorter. What sits BESIDE
 * the mark is what changes.
 *
 *     start      the mark, and nothing else
 *     gallery    the mark, "Gallery", its one line of instruction, and Add +
 *     everything the mark, the address, the share glyph, and the tools
 *
 * So the bar is not a container that gets replaced per screen; it is one bar
 * whose contents are declared by a state on <body>. That is why these are
 * attribute selectors rather than four separate headers: four headers drift,
 * and the thing that must not drift is the one thing he asked to stay
 * constant.
 * ===================================================================== */

/* On the start screen the bar holds the mark alone. */
body[data-startview="open"] .address,
body[data-startview="open"] .share,
body[data-startview="open"] .toolrow,
body[data-startview="open"] .tabrow,
body[data-startview="open"] .formatbar { display: none !important; }
body[data-startview="open"] .addressrow { padding: 12px 14px; }

/* And on the gallery, the same, because the gallery draws its own title and
   its own Add + into the bar. */
body[data-galleryview="open"] .address,
body[data-galleryview="open"] .share,
body[data-galleryview="open"] .toolrow,
body[data-galleryview="open"] .tabrow,
body[data-galleryview="open"] .formatbar { display: none !important; }

/* The brand mark never moves and never changes size between screens. If it
   did, the one constant object in the product would be the thing jumping. */
.brand { flex: 0 0 auto; }
.addressrow .brand button { padding: 0; }

/* =====================================================================
 * THE GALLERY
 * design/Presentation1/Slide4.png
 * ===================================================================== */

.galleryhead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 14px 12px 110px;
}
.galleryhead[hidden] { display: none; }
.galleryhead-id { flex: 1 1 auto; min-width: 0; }
.galleryhead-title {
  margin: 0;
  font: 700 21px/1.1 -apple-system, system-ui, sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.galleryhead-sub {
  margin: 3px 0 0;
  font: 400 12.5px/1.45 -apple-system, system-ui, sans-serif;
  color: var(--ink-2);
}

/*
 * ADD +, as a blue arrow pointing right.
 *
 * His drawing makes it a literal arrowhead, not a button, and the direction is
 * the message: these go OVER THERE, into the presentation you came from. It is
 * the same blue as the + that opened this screen, so the verb keeps its colour
 * across both halves of the gesture.
 *
 * Disabled until something is ticked, and it SAYS THE COUNT once anything is,
 * because "Add +" with three chosen and "Add +" with none chosen look
 * identical and mean opposite things.
 */
.gallery-add {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 13px 30px 13px 22px;
  border: 0;
  background: #1878d4;
  color: #fff;
  font: 600 15px/1 -apple-system, system-ui, sans-serif;
  cursor: pointer;
  clip-path: polygon(0 0, 74% 0, 100% 50%, 74% 100%, 0 100%);
  transition: background var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.gallery-add:hover:not(:disabled) { background: #2a8ae8; }
.gallery-add:disabled { background: #2c3550; color: #7b869e; cursor: default; }
.gallery-add:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.gallery-close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.gallery-close:hover { border-color: var(--hair-lit); color: var(--ink); }

.galleryview {
  position: fixed;
  inset: 0;
  top: var(--chrome-h, 92px);
  z-index: 150;
  overflow: auto;
  padding: 18px;
  background: var(--ground);
}
.galleryview[hidden] { display: none; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px;
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              transform var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.gcard:hover { border-color: var(--hair-lit); transform: translateY(-1px); }
.gcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Chosen. The blue is the verb's colour, the same blue as the + and the arrow,
   so a ticked card and the button that will act on it are visibly one idea. */
.gcard.is-picked { border-color: #1878d4; box-shadow: 0 0 0 1px #1878d4 inset; }

.gcard-face {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  background: linear-gradient(140deg, #16204a, #0b1330);
  overflow: hidden;
}
.gcard-n {
  position: absolute; top: 6px; left: 7px;
  font: 500 10px/1 ui-monospace, Menlo, monospace;
  color: var(--ink-3);
}

/*
 * The tick is always in the DOM and only ever changes opacity and scale, so
 * choosing costs no layout and nothing under the pointer moves. A tick that is
 * inserted on click shifts the card by its own height at the exact moment
 * somebody is aiming at the next one.
 */
.gcard-tick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              transform 140ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
  pointer-events: none;
}
.gcard-tick svg { width: 46px; height: 46px; color: #fff; }
.gcard.is-picked .gcard-tick {
  opacity: 1;
  transform: scale(1);
  background: rgba(24, 120, 212, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .gcard-tick { transition: none; transform: none; }
  .gcard.is-picked .gcard-tick { transform: none; }
}

.gcard-name {
  font: 500 13px/1.35 var(--font-display, Georgia, serif);
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard-meta { display: flex; justify-content: space-between; gap: 8px; }
.gcard-slug, .gcard-count {
  font: 400 10px/1.3 ui-monospace, Menlo, monospace;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gallery-empty {
  max-width: 460px;
  margin: 60px auto;
  text-align: center;
  color: var(--ink-3);
  font: 400 14px/1.6 -apple-system, system-ui, sans-serif;
}
.gallery-empty[hidden] { display: none; }

@media (max-width: 760px) {
  .galleryhead { padding-left: 14px; flex-wrap: wrap; }
  .gallery-add { min-width: 110px; padding: 12px 24px 12px 18px; }
}

/* =====================================================================
 * THE MARK IS THE WORD
 *
 * Victor sent a crop of the bar with three words: "this stays constant". In
 * every one of his eight slides that bar reads ORCO: the orca IS the O, and
 * the letters are always there.
 *
 * The wordmark used to be a hover reveal, animating from 0 to 76.9px when the
 * pointer arrived. That was a nice piece of craft on a bar that had a deck
 * name and twenty controls competing with it. On a bar whose entire job is now
 * to be the one thing that does not change, a brand that appears and
 * disappears is precisely the wrong behaviour, and on a phone there is no
 * hover at all, so most people never saw the name of the product.
 *
 * It is open, and it stays open.
 * ===================================================================== */

.addressrow .brand-rco { width: 76.9px; }
.addressrow .brand:hover .brand-rco { width: 76.9px; }

/*
 * No focus ring on the blob when Orco put the focus there itself.
 *
 * showStart() focuses the first control so the keyboard lands somewhere
 * useful, and :focus-visible was drawing a heavy blue ring around it on every
 * load, which read as "this is selected" on a screen whose whole point is
 * calm. Focus still shows for anyone arriving by keyboard, because that is
 * what :focus-visible is for and the rule below only suppresses the case where
 * the page moved the focus rather than the person.
 */
.startview[data-self-focused] .start-blank:focus:not(:focus-visible) { outline: none; }

/* The face a slide is drawn into. White, because a slide is paper, and the
   library's own cards make the same choice for the same reason. */
.gcard-paper {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: hidden;
  transform-origin: top left;
}
.gcard-paper.is-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-3);
  font: 400 11px/1.4 -apple-system, system-ui, sans-serif;
}
/* The number sits ON the face, so it needs to survive both a white slide and
   a dark one. A pill rather than bare ink. */
.gcard-n {
  z-index: 2;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(10, 15, 36, 0.72);
  color: #e8eaf0;
}

/* =====================================================================
 * THE TOOLBAR CHIPS
 * design/Presentation1.pdf, page 2, read at 1333px wide
 *
 * His chips are rounded rectangles about 48 by 34, evenly spaced, each holding
 * one glyph and no label, with a gold hairline separating the three groups:
 *
 *     [T] [rect] [image] [media]  |  undo redo  NO EDITS YET  |
 *     [upload] [download] [orc] [folder] [grid]        (+)
 *
 * The groups are the grammar. Four things that ADD, two that UNDO with the
 * state of the document between them, five that MOVE WORK IN AND OUT, and then
 * the one verb. A person does not have to learn that; they read it from the
 * spacing, which is what the dividers are for.
 *
 * Labels are gone from the chips because his drawing has none, and because the
 * bar had been shedding them under 1200px anyway: a control whose label
 * disappears at narrow widths was never really labelled. The tooltip still
 * says the whole sentence, and every one of them still has its key.
 * ===================================================================== */

.toolrow .tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  transition: border-color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              background var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.toolrow .tool:hover:not(:disabled) {
  border-color: var(--hair-lit);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}
.toolrow .tool:disabled { opacity: 0.38; }
.toolrow .tool .lbl,
.toolrow .tool .lbl-short { display: none; }
.toolrow .tool svg { flex: none; }

/* The history pair is bare, not chipped: his drawing has undo and redo as
   plain glyphs between the two dividers, so the chip outline is what
   distinguishes a control that ACTS from one that steps. */
.toolrow .tool--quiet { border-color: transparent; min-width: 34px; padding: 0 6px; }
.toolrow .tool--quiet:hover:not(:disabled) { border-color: transparent; background: rgba(255, 255, 255, 0.05); }

/* THE GOLD HAIRLINE, which is the fourth of the four uses the visual direction
   allows this material, and here it is doing structural work rather than
   decorative: it is the only thing telling four groups apart. */
.toolrow .sep {
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: var(--gold-deep);
  opacity: 0.55;
}

/* Present keeps its word. It is the one control on this bar that is not a tool
   but an outcome, and a person looking for it is looking for a word. */
.toolrow .tool--present {
  gap: 7px;
  padding: 0 15px;
  border-color: var(--hair-lit);
  color: var(--gold);
  font: 600 12.5px/1 -apple-system, system-ui, sans-serif;
}
.toolrow .tool--present:hover { background: rgba(227, 200, 120, 0.10); }

/* The edit count, between the dividers, in his own words and his own place. */
.toolrow .grouplab,
.toolrow #histlab {
  padding: 0 10px;
  color: var(--ink-3);
  font: 500 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.toolrow .histgroup { display: inline-flex; align-items: center; gap: 2px; }

.addbtn { width: 34px; height: 34px; flex-basis: 34px; margin-left: 8px; }

/* =====================================================================
 * THE BODY IS LIGHT
 * design/Presentation1.pdf, pages 6 and 7
 *
 * Under the navy bar, every working screen he drew is light: the sorter is a
 * pale grey field of thumbnails, the editor is a pale grey field with one
 * slide on it, and the start screen is a pale grey field with a white card.
 *
 * That is the same decision as the white address bar, made once more. Orco is
 * a dark instrument holding a light document, which is how Keynote, Figma,
 * Lightroom and PowerPoint all resolve the same problem: the chrome recedes
 * and the work is the only bright thing. The old build had a navy chrome
 * holding a navy body, so the two competed and the slides had to shout.
 * ===================================================================== */

body[data-simplify="on"] .app,
body[data-simplify="on"] .stagewrap {
  background: #f4f5f7;
}

/* The filmstrip his editor screen has down the left: pale, narrow, numbered. */
body[data-simplify="on"] .sorter {
  background: #eceef1;
  border-right: 1px solid rgba(16, 24, 40, 0.09);
}
body[data-simplify="on"] .sorter-head,
body[data-simplify="on"] .sorter .sorter-head * { color: #6b7280; }
body[data-simplify="on"] .thumb { border-color: rgba(16, 24, 40, 0.14); }
body[data-simplify="on"] .thumb .thumb-n { color: #6b7280; }
body[data-simplify="on"] .thumb.is-current { border-color: #1878d4; }

/* The format bar, when it appears, sits on the light body rather than on the
   navy, so it belongs to the document it is formatting. */
body[data-simplify="on"] .formatbar {
  background: #eceef1;
  border-bottom: 1px solid rgba(16, 24, 40, 0.09);
  color: #6b7280;
}

/* The field is sized by js/orco-shell.js fitAddress(), so it must not stretch.
   flex:1 here is what detached the trailing slash from the title. */
.address-slug { flex: 0 0 auto; min-width: 48px; }
.address { justify-content: flex-start; }

/* The two mid-grey bars. They were painted for a navy body and, against a
   light one, read as neither chrome nor document: a slab of 50% grey across
   the middle of the screen. They belong to the DOCUMENT (one formats it, one
   lists its shortcuts), so they take the document's light. */
body[data-simplify="on"] .formatbar,
body[data-simplify="on"] .hintbar {
  background: #eceef1;
  color: #6b7280;
  border-color: rgba(16, 24, 40, 0.09);
}
body[data-simplify="on"] .formatbar *,
body[data-simplify="on"] .hintbar * { color: #6b7280; }
body[data-simplify="on"] .hintbar kbd,
body[data-simplify="on"] .hintbar .keysbtn,
body[data-simplify="on"] .formatbar select,
body[data-simplify="on"] .formatbar input {
  border-color: rgba(16, 24, 40, 0.18);
  background: rgba(255, 255, 255, 0.7);
}

/* The four dimensions, in the sheet where the dock's four cells used to be on
   the bar. Each row states its subject, its answer, and the honest limit on
   that answer where there is one. */
.share-fact { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 0; }
.share-fact + .share-fact { border-top: 1px solid var(--hair); }
.share-fact-k {
  font: 500 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.share-fact-v { font: 500 13px/1.4 -apple-system, system-ui, sans-serif; color: var(--ink); }
/* The long form is DRAWN, not hidden behind a hover: these are the sentences
   that stop somebody assuming a file exists that does not, and a warning does
   not belong in a tooltip. */
.share-fact-why { font: 400 11.5px/1.5 -apple-system, system-ui, sans-serif; color: var(--ink-3); }

/* Colour is never the only signal. The word is always there; this only makes
   the two states worth noticing findable at a glance. */
.share-fact[data-state="error"] .share-fact-v,
.share-fact[data-state="stale"] .share-fact-v { color: #e8b04b; }
.share-fact[data-state="unknown"] .share-fact-v { color: var(--ink-2); }

.share-doors { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair); }
.share-door {
  padding: 9px 14px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font: 500 12.5px/1 -apple-system, system-ui, sans-serif;
  cursor: pointer;
  transition: border-color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              color var(--t-fast, 140ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.share-door:hover:not(:disabled) { border-color: var(--hair-lit); color: var(--ink); }
.share-door:disabled { opacity: 0.45; cursor: default; }
.share-door:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.share-door-why {
  flex-basis: 100%;
  font: 400 11.5px/1.5 -apple-system, system-ui, sans-serif;
  color: var(--ink-3);
}

/* THE FINGER FLOOR, at narrow widths as well as on a real finger. The
   pointer:coarse rule alone missed a 390px window driven by a mouse, which is
   exactly how the phone layout gets tested, so the floor was measured at 32px
   and reported as a fail. It was right: the width is the layout, whatever is
   holding the pointer. */
@media (max-width: 500px) {
  .share { width: 44px; height: 44px; }
  .addbtn { width: 44px; height: 44px; flex-basis: 44px; }
  .address { height: 44px; }
}

/*
 * THE BAR OUTRANKS EVERY SURFACE. 2026-09-10.
 *
 * "This stays constant" is not only about what the bar contains; it is about
 * the bar being reachable. The start screen and the gallery are fixed
 * full-screen sections at z-index 150, and although each is positioned to
 * begin BELOW the bar, a positioned element with no stacking context of its
 * own let them take the pointer over the brand mark: a real click on the orca
 * reported "startview intercepts pointer events" and the way back to Home was
 * gone from the one screen that most needs it.
 *
 * Relying on the arithmetic (surface top equals bar height) was the mistake.
 * Two numbers that must agree will eventually disagree, and the failure mode
 * is a dead brand mark. One number that outranks them cannot.
 */
.topbar {
  position: relative;
  z-index: 200;
}