/* ══ direction.css — everything this fork adds ═══════════════════════════════
 *
 * Loaded LAST, after css/app.css and css/show.css, and it only ever overrides:
 * nothing here is a new layout. Four things, in order —
 *
 *   1 the direction switcher   (the presets pill, holding words instead of digits)
 *   2 the empty plates         (the shape of artwork that does not exist yet)
 *   3 the block copy           (one written line under each caption)
 *   4 the prose lead           (a paragraph where the cycling subhead was)
 *
 * Keeping it in its own file is what makes the fork legible: app.css is ../meet's,
 * unedited except for one rule, so a fix that lands there can still be carried
 * across in both directions.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · the direction switcher ──────────────────────────────────────────────
 * The pill is `.presets` from app.css — same glass, same shadow, same behaviour
 * when the orb stage opens, and (this is the reason it was reused) the same rules
 * that were already measured against a 390px phone. All that changes is that a
 * button holds a WORD, so it cannot be a 32px circle. */
.presets.is-dirs { gap:3px; padding:5px; }
.presets.is-dirs button {
  width:auto; height:34px;
  padding:0 15px;
  font-size:14.5px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
/* ⚠ THE CAPTION IS A READOUT, not a heading — it carries the current direction's
   full name (see markDir), so it is as long as "The answer is an app" and has to be
   allowed to be. Right-aligned onto the pill's own right edge, and capped so a long
   name wraps rather than pushing the group off a narrow screen. */
.presets-cap {
  max-width:min(240px, calc(100vw - 40px));
  text-align:right;
  text-wrap:balance;
}

@media (max-width:520px) {
  /* ⚠ 44, NOT 38. The one measurement on this page that must not scale is the one
     about a thumb: the words let a button be as narrow as it likes, but a 38px-tall
     control is under the floor on the device the pill exists to be used on. The pill
     comes to 192px at 320 wide, which still leaves the Settings pill its corner. */
  .presets.is-dirs button { width:auto; height:44px; padding:0 11px; font-size:13.5px; }
  /* ⚠ AND THE READOUT COMES BACK ON A PHONE, where app.css hides the presets'
     caption. It hid a word ("Presets") that the digits already implied; this one is
     the only place the direction's actual TITLE appears, which is the thing somebody
     looking at the page on a phone is trying to judge.
     ⚠ AND IT NEEDS ITS OWN GLASS. On a desktop it sits over the page's paper; on a
     phone the pill is in the middle of the hero's phone mockup, and 12px grey over a
     photograph of a bezel is not type. Same material as the pill under it, so the two
     read as one control rather than as a label that wandered onto the artwork. */
  .presets-cap {
    display:block;
    font-size:12px;
    max-width:calc(100vw - 24px);
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    backdrop-filter:blur(22px) saturate(160%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.05);
  }
  /* the dark stage's override has to keep the chip readable too — a light ink on
     light glass is the one combination that would be worse than the original */
  body.stage-open .presets-cap { color:#4a4a4a; }
  .presets-wrap { gap:5px; }
}


/* ── 2 · the empty plates ────────────────────────────────────────────────────
 * ⚠ THE BOX IS UNCHANGED. Every number in show.css's chapter — how many blocks a
 * screen shows, where the caption sits, how the rail snaps — is measured off the
 * plate's ratio, so an empty plate has to be exactly the box the artwork was.
 * What changes is only how it READS: a white card with a shadow and nothing in it
 * looks like an image that failed to load, so it is a faint dashed field instead,
 * which reads as a space reserved on purpose. */
.plate.is-empty {
  background:#fbfbfa;
  box-shadow:inset 0 0 0 1px rgba(25, 25, 25, .07);
}
/* the hairline cross-hatch is the one thing that says "nothing here yet" without a
   word on it — and it is a gradient, so it costs no request and scales with the box */
.plate.is-empty::after {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(25, 25, 25, .028) 0 1px,
      transparent 1px 11px
    );
}
/* ⚠ AND THE PHONE INSIDE THE HERO DECK IS LEFT ALONE. `.dcard .screen` already
   fills pale, so an empty card is a phone that is switched off — which is the right
   reading, and a dashed field behind real glass would read as a broken screen. */
.dcard.is-empty .screen { background:#f1efec; }


/* ── 3 · the line under each block caption ───────────────────────────────────
 * New to this fork: with the artwork gone a headline alone IS the block, and four
 * headlines are not enough to judge a positioning on. Set at reading size, because
 * on this page the copy is the only thing being tested. */
.sec .sec-copy {
  margin:14px 0 0;
  font-size:clamp(15px, 1.12vw, 17.5px);
  line-height:1.5;
  letter-spacing:-.008em;
  color:var(--ink-2);
  max-width:34ch;
  text-wrap:pretty;
}
/* In the Blocks layout the section is `column-reverse` — artwork first, caption
   under it — so the copy lines up with the caption's own left edge and stops well
   short of the block's width. */
html[data-layout="blocks"] .sec .sec-copy { max-width:30ch; }
/* Stacked and side-by-side both centre the caption, so the copy follows it. */
html[data-layout="stack"] .sec .sec-copy { margin-inline:auto; text-align:center; }


/* ── 4 · the prose lead ──────────────────────────────────────────────────────
 * wabi.ai's subhead is three `.ps-line` blocks with a cycling word and a facepile;
 * this is one written paragraph, so it wants a measure and a balance rather than a
 * fixed set of breaks. It keeps the size app.css gives the subhead — it is doing
 * the subhead's job, which is being the second thing anybody reads. */
.hero .lead.is-prose {
  max-width:30ch;
  text-wrap:pretty;
  letter-spacing:-.012em;
}
/* ⚠ 30ch AT THE SUBHEAD'S OWN SIZE, not app.css's 52. That number was set for three
   short lines with a big cycling word in them; a 200-character paragraph at the same
   size across 52ch is four lines of 60 characters, which is a measure nobody reads.
   The size comes down a little too — a lead is copy, and the headline above it is
   already the loud thing. */
html[data-hero="huge"] .hero .lead.is-prose {
  font-size:calc(clamp(15.5px, 1.18vw, 20px) * var(--sub-scale, 1));
  /* ⚠ 38ch, measured against the LONGEST of the three leads (direction 3's, at 232
     characters). At 34 it came out as five lines, which under a three-line headline
     is a second block of type rather than a lead; at 38 it is four. The number is
     set by the worst case on purpose — three leads that break into different numbers
     of lines make the switch read as a layout change. */
  max-width:38ch;
}
@media (max-width:899px) {
  html[data-hero="huge"] .hero .lead.is-prose {
    font-size:calc(clamp(15.5px, 3.9vw, 19px) * var(--sub-scale, 1));
    max-width:30ch;
  }
}


/* ── 5 · the cards' empty art ────────────────────────────────────────────────
 * The three cards used to hold little built diagrams — a chat exchange, a remix
 * row, a pit of app orbs — and all three were pictures of the old argument. Same
 * box, nothing in it, same treatment as the plates so the page has ONE way of
 * saying "artwork pending" rather than two. */
.card-item .ca-art.is-empty {
  position:relative;
  border-radius:inherit;
  overflow:hidden;
}
.card-item .ca-art.is-empty::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(25, 25, 25, .03) 0 1px,
      transparent 1px 11px
    );
}
/* on the dark cards the hatch has to be light or it is invisible */
.card-item.is-dark .ca-art.is-empty::after {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .05) 0 1px,
      transparent 1px 11px
    );
}


/* ── 6 · the cards rail's snap ────────────────────────────────────────────────
 * ⚠ A `start` SNAP IGNORES `padding-inline` AND CANCELS IT. `.cards` is a full-bleed
 * scroller inset by the page gutter, and its items snap to `start` — which aligns a
 * card's left edge with the SCROLLPORT's left edge, not with the padding edge. So the
 * browser quietly scrolled the rail to 43px (the gutter, less a rounding pixel) and
 * the first card sat flush against the window while the heading above it kept its
 * gutter: the row read as cropped rather than as a rail.
 *
 * Inherited from ../meet, where it does the same thing — fixed here because the cards
 * are one of the four places a direction gets to speak and a section that opens
 * mid-card is a section nobody reads first. `scroll-padding` is what moves the
 * snapport, which is the same number show.css already carries for the block rail. */
.cards { scroll-padding-left:var(--gut); }


/* ── 7 · the readout over the dark stage ──────────────────────────────────────
 * Past the footer the page opens onto the orb stage, which is near-black, and the
 * pill deliberately STAYS there on a desktop (app.css only stands it down on a
 * narrow screen, where it would sit on the scene nav). The pill is glass and reads
 * fine; the caption above it is #8a8a8a on the page's paper and simply disappears.
 *
 * It mattered less on ../meet, where that caption was the throwaway word "Presets".
 * Here it is the direction's own name — the one place the argument's title appears —
 * so it has to survive the ground going dark. */
body.stage-open .presets-cap { color:rgba(240, 240, 240, .78); }