/* surface-show.css
   Scoped styling for the show surface, loaded after css/orco.css so it inherits
   the material defined there: the gold hairline, gold focus, Georgia on his
   names, and the one primary action. Direction and reasoning:
   docs/beta-run/UX-VISUAL-DIRECTION.md

   This file exists so that four surfaces can be worked on at once without
   four seats editing one 4,250 line stylesheet. Everything here is scoped to
   this surface's own classes. Nothing here redefines a token.

   =====================================================================
   WHAT THIS SCREEN IS FOR, because every rule below answers to it
   =====================================================================

   On 29 September 2026 Victor stands in front of a room at National College
   of Ireland and drives 197 screens from this grid. It is the screen he
   opens first and looks at most, and it is the only screen in Orco where his
   actual work is on display inside Orco's chrome.

   So the composition has exactly one job: make the cards read as the subject
   and make everything else recede. The direction states it as "the
   application is the gallery, not the exhibit", and this surface is where
   that is either true or it is not.

   THE FOUR MOVES, in the order the eye meets them:

     1. ONE GROUND. The five-hue aurora that bled through this surface is
        replaced with navy and a single warm whisper. Nothing behind the
        cards has a hue of its own.
     2. ONE HERO NUMBER. 197 SCREENS is what he is presenting. It is set in
        the serif his slides are set in, at 46px, over a gold rule. The other
        three counts become a supporting line. They are all still there and
        all still computed.
     3. ONE SHELF. Every card is the same height, so seventy-one of them read
        as a shelf rather than as a ragged pile. Two lines of name, one line
        of address, one reserved line for the state that is exceptional.
     4. GOLD SPENT ON PURPOSE. At rest this screen shows gold in three
        places: the rule under the hero number, the rule under the header,
        and the primary action. It was showing it in seventy-two.

   =====================================================================
   A NOTE ON TOKENS, RESOLVED DURING THIS PASS
   =====================================================================

   Measured in Chrome on the built page at the start of this pass: twenty
   tokens that css/orco.css referenced were undefined, six of them in both
   themes (--blur, --r-card, --radius, --radius-sm, --t-fast, --t-med). Every
   rule using one was being dropped by the parser, which on this surface meant
   .rocard had no radius, .rocard:focus-visible had no ring at all, and every
   transition written against var(--t-fast) never ran. It also meant .thumb
   drew a lilac hairline around all sixty-eight of his slides.

   Both were repaired in css/orco.css by another seat while this pass was
   running, verified here by re-reading the computed styles rather than the
   file. The splint that used to live in this block has been removed: nothing
   in this file defines a token any more, and the surface now inherits the
   real ones. */

/* =====================================================================
   1. THE GROUND
   =====================================================================
   orco.css paints this surface with a three-blob bloom in violet, orange and
   blue. On every other screen that is atmosphere. Here it sits directly
   behind seventy-one navy-and-gold slides, and in a render at 1440 the
   violet is visible between the cards. So the bloom is re-aimed rather than
   removed: one very soft warm rise from the top left, which is where the
   masthead is, and a cool settle at the foot. No second hue.

   The vertical band behind the grid is a hair darker than the header, which
   is what makes the header read as a lid on the page rather than a stripe
   painted across it. */

.showview::before {
  background:
    radial-gradient(58% 48% at 6% -6%, rgba(227, 200, 120, 0.075), transparent 68%),
    radial-gradient(64% 52% at 92% 4%, rgba(143, 179, 239, 0.055), transparent 70%),
    radial-gradient(90% 48% at 50% 104%, rgba(6, 10, 26, 0.55), transparent 72%);
}
html[data-theme="light"] .showview::before {
  background:
    radial-gradient(58% 48% at 6% -6%, rgba(180, 83, 9, 0.055), transparent 68%),
    radial-gradient(64% 52% at 92% 4%, rgba(47, 95, 224, 0.045), transparent 70%);
}

/* =====================================================================
   2. THE MASTHEAD
   ===================================================================== */

.showview .show-head {
  align-items: stretch;
  gap: 30px;
  padding: 22px 32px 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface, #101838) 72%, transparent),
    color-mix(in srgb, var(--surface, #101838) 46%, transparent));
}

/* The rule along the top edge. In dark it was already a gold fade; in light
   it was still a five-stop rainbow, which is the one object the direction
   names as belonging to nothing. One material, both themes. */
.showview .show-head::before {
  height: 1px;
  opacity: 1;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--gold) 55%, transparent) 18%,
    color-mix(in srgb, var(--gold) 55%, transparent) 82%,
    transparent);
}

.showview .show-head-id {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}

/* The brand mark had 12px of nothing under it and the eyebrow sat on the
   name. Tightened into a lockup: mark, label, name, place. */
.showview .show-head-id > :first-child { margin-bottom: 8px; }

.showview .eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--gold) 62%, var(--ink-4));
}

.showview .show-name {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing: -0.012em;
  line-height: 1.04;
  margin-top: 4px;
}

.showview .show-sub {
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  color: var(--ink-3);
}

/* Provenance. True, quiet, and the first thing to leave when it is tight.
   It is in mono because it names a file, and every filename, URL and count
   on this surface is in mono so a person can compare them character by
   character. */
.showview .show-prov {
  margin-top: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: var(--ink-4);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}

/* ---- the counts, ranked --------------------------------------------- */

.showview .show-metrics {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding-bottom: 2px;
  flex-wrap: nowrap;
}

/* THE HERO. One number, in the face his slides are set in, over the gold
   rule. It is the largest thing on the screen after the show's own name, and
   that is the whole point: it is what he is about to perform. */
.showview .show-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  min-width: 96px;
}
.showview .show-hero-n {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  min-height: 42px;
}
.showview .show-hero-l {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 70%, var(--ink-3));
}

/* HONEST WAITING. For about 1.6 seconds from a cold load Orco does not know
   the screen count, and it used to print 130 as though it did. The slot now
   holds its size and shows a gold hairline travelling under an empty numeral
   until the real one arrives, so the header never jumps and never lies. */
.showview .show-hero[data-counting="true"] .show-hero-n::after {
  content: "";
  display: block;
  width: 74px;
  height: 10px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 16%, transparent),
    color-mix(in srgb, var(--gold) 62%, transparent),
    color-mix(in srgb, var(--gold) 16%, transparent));
  background-size: 220% 100%;
  animation: showCounting 1400ms linear infinite;
}
.showview .show-hero[data-counting="true"] .show-hero-l {
  color: color-mix(in srgb, var(--gold) 44%, var(--ink-4));
}
@keyframes showCounting {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* THE SUPPORTING LINE. Not boxes. Boxes made four unequal facts look equal;
   a stacked list of small figures reads as what it is, a footnote to the
   number beside it. Numerals are tabular so the column has one optical edge. */
.showview .show-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 4px;
}
.showview .show-facts .show-metric {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  min-width: 0;
}
.showview .show-facts .show-metric-n {
  font-size: 13px;
  font-weight: 620;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  min-width: 2.2ch;
  text-align: right;
}
.showview .show-facts .show-metric-l {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-4);
}
/* Semantic ink, used for state and for nothing else. Where Orco holds every
   deck, "in Orco" is not news and stays quiet; the tone is applied by the
   drawing code only when the fact is worth reading. */
.showview .show-facts .show-metric--good .show-metric-n { color: var(--ink-2); }
.showview .show-facts .show-metric--warn .show-metric-n { color: var(--warn); }
.showview .show-facts .show-metric--muted .show-metric-n { color: var(--ink-4); }
.showview .show-facts .show-metric--muted .show-metric-l { opacity: 0.85; }

/* ---- the actions ----------------------------------------------------- */

.showview .show-acts {
  align-items: flex-end;
  padding-bottom: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.showview .show-acts .tool { min-height: 36px; }

/* =====================================================================
   3. THE SHELF
   =====================================================================
   Seventy-one cards of the same height read as a shelf. Cards that end
   where their own words end read as a pile, which is what this grid was:
   one card in a row carrying a "Custom order" pill made that row ragged,
   and a two-line name beside a one-line name did the same.

   The cost is one reserved line on the cards that have nothing exceptional
   to say. Rendered both ways and looked at: the reserved line disappears and
   the flush bottom edge does not. */

.showview .show-grid {
  /* The floating "Present the show" button lives at bottom right of this
     surface and was sitting on top of the last row of cards. It is another
     seat's element; the room for it is this grid's business. */
  padding-bottom: 104px;
  /* A card moved by the keyboard is scrolled into view by the drawing code.
     Without this it lands flush under the header. */
  scroll-padding-top: 18px;
  scroll-padding-bottom: 24px;
}

.showview .rocard {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--gold) 11%, transparent);
  background: color-mix(in srgb, var(--surface, #101838) 52%, transparent);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
html[data-theme="light"] .showview .rocard {
  border-color: var(--hair-2);
  background: var(--panel-2);
}

/* THE CAPTION, ON A FIXED GRID.
   Two lines of name, one line of address, one line reserved for state. The
   name clamps at two lines with an ellipsis rather than pushing the card
   taller; the whole name is on the card's own tooltip and in its aria-label,
   so nothing is lost, it is only folded. */
.showview .rocard-meta {
  padding: 11px 8px 11px;
  gap: 0;
}
.showview .rocard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16.5px;
  line-height: 1.28;
  min-height: calc(2 * 1.28em);
}
.showview .rocard[data-typed="false"] .rocard-title {
  font-size: 12.5px;
  line-height: 1.34;
  /* Matched to the serif box above so a hand-built deck's card is exactly
     as tall as a deck Orco holds. Measured, not guessed: 2 x 1.28 x 16.5px
     is 42.2px, and 42.2 / 12.5 / 1.34 is a shade over two and a half lines,
     so the box is set rather than the line count. */
  min-height: 42px;
  -webkit-line-clamp: 3;
}
.showview .rocard-line {
  min-height: 15px;
  margin-top: 6px;
}
.showview .rocard-slug {
  font-size: 10px;
  color: var(--ink-4);
  opacity: 0.82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The exceptions, on the picture, bottom left. See cardEl() in
   js/orco-show.js for why they left the caption. Bottom LEFT because the
   count already owns bottom right and the position owns top left, and
   because an exception is read before a count. */
.showview .rocard-pills {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 3;
  margin: 0;
  gap: 5px;
  /* Upward, not sideways. Two exceptions on one card ("Not yet in Orco" and
     "Custom order" both land on cant-fly during the first second of a cold
     load) do not fit on one line beside the count, and clipping them gave
     "NOT YET IN OR" and "CUSTOM ORD", which is worse than saying nothing.
     wrap-reverse against a fixed bottom edge grows the block upward over the
     picture instead. */
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  max-width: calc(100% - 96px);
}
/* A deck Orco does not hold carries no count chip, so its exception row is
   not competing with one. Before this, "Not yet in Orco" and "Custom order"
   were clipped into each other on the one card in his show that has both. */
.showview .rocard[data-typed="false"] .rocard-pills { max-width: calc(100% - 52px); }
.showview .rocard-pills:empty { display: none; }

/* "From HTML" was on forty-four of seventy-one cards in the quiet slot, and
   a label that appears on most of a grid describes none of it. It stays,
   because it is true, and it stops being a label: it becomes the tail of the
   address line, in the same mono and the same ink as the slug it follows. */
.showview .rocard-quiet .ropill--ghost {
  border: 0;
  background: none;
  box-shadow: none;
  height: auto;
  padding: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink-4);
  opacity: 0.5;
}

/* The pills that remain are the ones that mark an exception, and now they
   look like one system rather than three separate decisions. Same height,
   same geometry, one hairline, ink carrying the meaning. */
.showview .rocard-pills .ropill {
  height: 22px;
  padding: 0 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ground, #0a0f24) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(2, 5, 18, 0.45);
  border-style: solid;
  border-color: color-mix(in srgb, var(--ink-3) 34%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showview .rocard-pills .ropill--muted {
  border-color: color-mix(in srgb, var(--ink-3) 30%, transparent);
  color: var(--ink-3);
}
/* One deck plays its slides in an order he set. That is a real exception on
   a running order and it is the one pill that earns the accent. */
.showview .rocard-pills .ropill--info {
  border-color: color-mix(in srgb, var(--gold) 46%, transparent);
  color: color-mix(in srgb, var(--gold) 86%, var(--ink));
}
.showview .rocard-pills .ropill--warn {
  border-color: color-mix(in srgb, var(--warn) 52%, transparent);
  color: var(--warn);
}

/* ---- the two plates on the picture ---------------------------------- *
 * The position and the count. They are the only two things Orco writes on
 * top of his artwork, so they are one material: the ground colour of the
 * app, a gold hairline, mono numerals. Made opaque rather than translucent
 * because a translucent plate is a different plate on every slide, and this
 * grid runs from a white newspaper scan to a near black photograph. Rendered
 * across all seventy-one and read: the old blurred plate vanished on the
 * dark slides.
 */

.showview .rocard-num,
.showview .rocard-chip {
  background: color-mix(in srgb, var(--ground, #0a0f24) 88%, transparent);
  border-color: color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--ink);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(2, 5, 18, 0.45);
}
.showview .rocard-num {
  border-radius: 7px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--gold) 55%, var(--ink));
}
.showview .rocard-chip {
  border-radius: 7px;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.showview .rocard-chip[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn);
}

/* The dot. Filled only where the colour is one Victor chose for that deck;
   neutral where Orco has nothing true to say. See colourOf() in
   js/orco-show.js for why the invented hue was retired. */
.showview .rocard-chip-dot {
  width: 5px; height: 5px;
  background: var(--dot, color-mix(in srgb, var(--ink-3) 70%, transparent));
  box-shadow: none;
}

/* ---- the mark -------------------------------------------------------- *
 * It was gold, on every one of the sixty-eight decks Orco holds. The
 * direction allows gold roughly three times per screen and this was
 * spending it sixty-eight times, which is how a signal becomes wallpaper:
 * a mark on almost every card answers no question about any card.
 *
 * At rest it is now the card's own quiet ink and it recedes into the plate
 * family. It goes gold on approach, where it means something again, and
 * where the card is also offering to open. */

.showview .rocard-mark {
  border-radius: 7px;
  background: color-mix(in srgb, var(--ground, #0a0f24) 76%, transparent);
  border-color: color-mix(in srgb, var(--ink-3) 26%, transparent);
  color: color-mix(in srgb, var(--ink-2) 72%, transparent);
  box-shadow: 0 2px 8px rgba(2, 5, 18, 0.4);
  /* Sixty-eight of these, one per deck Orco holds. At full strength they
     were a second grid laid over his. */
  opacity: 0.62;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.showview .rocard[data-typed="true"]:hover .rocard-mark,
.showview .rocard[data-typed="true"]:focus-visible .rocard-mark {
  background: color-mix(in srgb, var(--gold) 18%, var(--ground, #0a0f24));
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  color: var(--gold);
  transform: none;
  opacity: 1;
}

/* ---- the hand-built decks Orco does not hold ------------------------- *
 * Their artwork is a field whose hue is derived from the slug, which meant
 * forty-four fields in brown, olive, green, plum and rust on the cold load.
 * Orco knows nothing about these decks, and a saturated colour is a claim.
 * The hue survives at a chroma low enough to tell two cards apart and low
 * enough to be navy, which is the honest amount of colour to spend on a
 * fact Orco derived from a string. */

.showview .rocard-art {
  background:
    linear-gradient(158deg,
      color-mix(in srgb, hsl(var(--h, 220) 55% 42%) 13%, var(--ground, #0a0f24)),
      color-mix(in srgb, hsl(var(--h, 220) 55% 42%) 5%, var(--ground-2, #060a1a)));
}
html[data-theme="light"] .showview .rocard-art {
  background:
    linear-gradient(158deg,
      color-mix(in srgb, hsl(var(--h, 220) 55% 52%) 11%, #ffffff),
      color-mix(in srgb, hsl(var(--h, 220) 55% 52%) 5%, #f2f5fb));
}
.showview .rocard-art-slug { color: color-mix(in srgb, var(--ink-2) 74%, transparent); }
.showview .rocard-art-kind { color: color-mix(in srgb, var(--gold) 44%, transparent); }

/* ---- the affordance --------------------------------------------------- */

/* THE OPEN PLATE IS FOR THE POINTER, NOT FOR FOCUS.
 *
 * The grid focuses its first card the moment it opens, and the plate is
 * pinned to the middle of the picture, so the first thing on screen was a
 * gold slab across the opening slide of his talk. A ring around the card
 * already says which one is focused, and the keyboard hint below already
 * says Enter opens it, so the plate has nothing left to add and the picture
 * gets to be the picture. On hover it stays, because a pointer has no ring. */
.showview .rocard[data-typed="true"]:focus-visible .rocard-go { opacity: 0; }
.showview .rocard[data-typed="true"]:focus-visible:hover .rocard-go { opacity: 1; }

.showview .rocard-go {
  background: var(--grad-primary);
  color: #0a0f24;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  box-shadow: 0 12px 30px rgba(2, 5, 18, 0.55);
}

/* ---- hover and focus -------------------------------------------------- *
 * Focus was a border colour change and nothing else, because the ring it
 * asked for, var(--glow-ring), is undefined in the dark theme and the whole
 * declaration was being thrown away. Checked in the browser, not read off
 * the file. It is a real ring now, in gold, and it brings the keyboard hint
 * with it. */

.showview .rocard[data-typed="true"]:hover {
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
}
.showview .rocard:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--gold) 46%, transparent);
  box-shadow: 0 0 0 6px rgba(227, 200, 120, 0.14), var(--shadow-2);
}
html[data-theme="light"] .showview .rocard:focus-visible {
  box-shadow: 0 0 0 6px rgba(180, 83, 9, 0.14), var(--shadow-2);
}

/* THE KEYBOARD HINT. Only for the card that has keyboard focus, and only on
   a device that has a keyboard to hint about. It overlays the state line
   rather than adding a row, so a focused card is exactly as tall as it was a
   moment ago and the shelf does not shift under the person using it. */
.showview .rocard-key {
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--gold) 78%, var(--ink-2));
  background: linear-gradient(90deg,
    var(--ground, #0a0f24) 0%,
    var(--ground, #0a0f24) 90%,
    color-mix(in srgb, var(--ground, #0a0f24) 0%, transparent) 100%);
  pointer-events: none;
}
.showview .rocard-key kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  color: inherit;
}
.showview .rocard-key span { opacity: 0.72; }
.showview .rocard-key .rocard-key-sep { opacity: 0.38; margin: 0 1px; }
.showview .rocard:focus-visible .rocard-key { display: flex; }
@media (hover: none) {
  /* A finger has no Command key. */
  .showview .rocard-key { display: none !important; }
}
@media (max-width: 640px) {
  /* Nor does it fit. Rendered at 390 with his show: the card is 158px wide
     and the hint runs "Enter open · Cmd ← →" with "move" clipped off the
     end, which is a hint that needs a hint. A screen this narrow is a phone,
     and a phone is not being driven from a keyboard. */
  .showview .rocard-key { display: none !important; }
}

/* THE LANDING. A card moved by the keyboard used to be redrawn identical to
   its seventy neighbours, so the only feedback was a live-region line. It
   now flares its hairline and settles. */
.showview .rocard.is-landed {
  border-color: var(--gold);
  animation: showLanded 460ms var(--ease);
}
@keyframes showLanded {
  0%   { box-shadow: 0 0 0 0 rgba(227, 200, 120, 0.55); }
  35%  { box-shadow: 0 0 0 7px rgba(227, 200, 120, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(227, 200, 120, 0); }
}

/* ---- reordering ------------------------------------------------------- *
 * The drop marker was a rainbow spine with a hardcoded violet glow, which is
 * the one colour the direction bans by name, drawn at the exact moment he is
 * concentrating hardest. One gold spine instead. */

.showview .rocard.drop-before::before,
.showview .rocard.drop-after::after {
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 30%, transparent),
    var(--gold) 30%,
    var(--gold) 70%,
    color-mix(in srgb, var(--gold) 30%, transparent));
  box-shadow: 0 0 12px rgba(227, 200, 120, 0.5);
}
.showview .rocard.drop-before,
.showview .rocard.drop-after { border-color: var(--gold); }
.showview .rocard--ghost {
  border-color: var(--gold);
  box-shadow: 0 26px 60px rgba(2, 5, 18, 0.6), 0 0 0 1px rgba(227, 200, 120, 0.4);
  transform: rotate(-1.2deg) scale(1.02);
}

/* ---- off ------------------------------------------------------------- *
 * Three signals already, and all three stay: dimmed, greyed, struck through.
 * The dim was 0.62 and, with the picture also desaturated, an off card read
 * as a rendering failure rather than as a decision. Lifted, so it reads as
 * present and set aside, which is what it is. */

.showview .rocard[data-off="true"] { opacity: 0.72; }
.showview .rocard[data-off="true"]:hover,
.showview .rocard[data-off="true"]:focus-visible { opacity: 1; }
.showview .rocard[data-off="true"] .rocard-paper,
.showview .rocard[data-off="true"] .rocard-art {
  filter: grayscale(1) brightness(0.62);
}

/* =====================================================================
   4. THE EMPTY STATES
   =====================================================================
   A dashed rectangle with a ▦ in it, floating in a very large dark field.
   Dashes are the universal sign for "drop a file here" and this is not a
   drop target, so they are gone. What is left is a drawn mark, the headline
   in the serif, one paragraph at a readable measure, and the single action.
   Left-aligned, because a left edge is what makes a short column of text
   look composed rather than adrift. */

/* Left-aligned text in a centred column. A left edge is what makes a short
   column of words look composed rather than adrift, and centring the column
   itself is what keeps it from looking like it fell to one side of a very
   large dark field. The gold on this screen is carried by the mark and the
   one action, which is two of the three the direction allows. */
.showview .show-empty {
  max-width: 460px;
  margin-top: 15vh;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.showview .show-empty-mark {
  font-size: 0;
  color: var(--gold);
  opacity: 1;
}
.showview .show-empty-art { width: 56px; height: 42px; display: block; }
.showview .show-empty strong {
  margin-top: 16px;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.showview .show-empty p {
  margin: 10px 0 20px;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--ink-3);
}
.showview .show-empty-note {
  margin: 14px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-4);
  opacity: 0.85;
}

/* "Present the show" is another seat's button, pinned to this surface. Over
   an empty state it offers to present nothing, which is the one thing the
   empty state exists to say is not possible. */
.showview:has(.show-empty) [data-testid="btn-present-show"] { display: none; }

/* =====================================================================
   5. NARROWER
   =====================================================================
   Measured at 1024 and 390 with his real show. At 390 the action row ran off
   the right edge and "Back to the editor" was cut in half by the viewport,
   which on the one control that gets him out of this screen is not a
   cosmetic problem. */

@media (max-width: 1100px) {
  .showview .show-head { padding: 18px 22px 16px; gap: 20px; }
  .showview .show-metrics { gap: 20px; }
  .showview .show-hero-n { font-size: 38px; min-height: 35px; }
  .showview .show-hero { min-width: 78px; padding-bottom: 7px; }
  .showview .rocard-title { font-size: 15.5px; }
  .showview .show-prov { display: none; }
}

@media (max-width: 860px) {
  /* The masthead stacks: name over numbers over actions. The numbers stay
     beside each other, because the hero and its footnote are one object. */
  .showview .show-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
    padding: 16px 18px 14px;
  }
  .showview .show-head-id { flex: 1 1 100%; }
  .showview .show-metrics { flex: 1 1 auto; gap: 18px; }
  .showview .show-acts { flex: 1 1 auto; justify-content: flex-end; }
  .showview .show-name { font-size: clamp(22px, 5.4vw, 30px); white-space: normal; }
}

@media (max-width: 640px) {
  .showview .show-head { padding: 14px 16px 12px; }
  .showview .show-grid { padding-bottom: 96px; }

  .showview .show-hero-n { font-size: 34px; min-height: 31px; }
  .showview .show-facts { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .showview .show-facts .show-metric-n { min-width: 0; }

  /* Every control a finger has to hit clears 44px, and none of them runs off
     the edge: at 390 "Back to the editor", the one control that gets him out
     of this screen, was cut in half by the viewport.

     Two even columns rather than a wrapping row. A wrapping row left the
     fourth button alone on its own line with a hand's width of nothing
     beside it, which reads as a mistake; a two by two block reads as a
     decision. Buttons centre their own label so the block has four equal
     tiles rather than four different shapes. */
  .showview .show-acts {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .showview .show-acts .tool {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* The exceptions stack ABOVE the count rather than beside it. On a 158px
     card there is no room for "CUSTOM ORDER" and "3 SLIDES" on one line and
     the first was clipped to "CUSTO", which is worse than saying nothing.
     One line up, it has the whole width of the picture and reads. */
  .showview .rocard-pills,
  .showview .rocard[data-typed="false"] .rocard-pills {
    bottom: 33px;
    max-width: calc(100% - 14px);
    flex-wrap: nowrap;
    gap: 4px;
  }
  .showview .rocard-pills .ropill {
    height: 19px;
    padding: 0 7px;
    letter-spacing: 0.07em;
  }

  .showview .rocard-meta { padding: 10px 6px 8px; }
  .showview .rocard-title { font-size: 14.5px; min-height: calc(2 * 1.28em); }
  .showview .rocard[data-typed="false"] .rocard-title { font-size: 11.5px; min-height: 37px; }
  .showview .rocard-num { font-size: 10px; }
  .showview .rocard-chip { font-size: 8.5px; }

  .showview .show-empty { margin-top: 7vh; padding-left: 18px; max-width: none; }
  .showview .show-empty strong { font-size: 21px; }
}

/* Nothing in this surface may cause a sideways scroll at any width. The grid
   is the only element wide enough to try. */
.showview,
.showview .show-head,
.showview .show-grid { max-width: 100vw; }
.showview .show-head { overflow: hidden; }

/* =====================================================================
   6. STILLNESS
   =====================================================================
   Every moving thing this file adds stops. The counting shimmer becomes a
   steady bar, which still says "not yet" without animating, and the landing
   flare becomes a ring that is simply there for the same 460ms. */

@media (prefers-reduced-motion: reduce) {
  .showview .show-hero[data-counting="true"] .show-hero-n::after {
    animation: none;
    background: color-mix(in srgb, var(--gold) 40%, transparent);
  }
  .showview .rocard.is-landed {
    animation: none;
    box-shadow: 0 0 0 4px rgba(227, 200, 120, 0.22);
  }
  .showview .rocard,
  .showview .rocard-mark,
  .showview .rocard-go { transition: none; }
}