/* landing/brand-ktrd.css — The Corridor: the KTRD look.
 *
 * Loaded ONLY on the KTRD build (tools/brand.mjs injects the link), after landing.css.
 * Tab Truck never sees this file.
 *
 * WHY THIS IS MOSTLY TOKEN OVERRIDES RATHER THAN NEW COMPONENTS.
 *
 * design/tokens.css already routes every colour, radius, outline and shadow on the site
 * through custom properties, and landing.css consults them rather than hard-coding. So
 * redefining ~20 tokens re-skins the whole product — nav, cards, buttons, footer, the
 * viewer — instead of me writing a second stylesheet that duplicates and then fights the
 * first. Everything below the token block is the small amount that genuinely could not be
 * expressed as a token: the corridor mark and the nav tagline.
 *
 * THE DIRECTION. One address, many doors, and what you say picks which one opens. That is
 * not a slogan bolted onto the crypto — it IS the crypto: "the passcode selects the
 * message… it picks WHICH message" (CLAUDE.md). A single door would say the passcode is a
 * lock on it; the row says it is a choice between them.
 *
 * WHY THIS KEEPS THE HOUSE SHAPES. Unlike the Poste Restante direction it replaces, this
 * one does NOT go square-cornered and serif. Tab Truck and KTRD are siblings with a shared
 * crypto core, and four design-system versions of accumulated warmth are not worth
 * throwing away to prove a split happened. The rounded cards, the chunky offset shadows
 * and the two house typefaces all stay. What changes is the palette and the object.
 *
 * NOTHING HERE MAY BECOME A DOORMAN. A door implies someone behind it who hears you and
 * decides. Nobody is home: no server of ours ever sees a passcode. This was settled once
 * already — filing a portal under the minted passcode and checking the phrase in the UI
 * was rejected because it "would make the phrase a doorman rather than part of the key".
 * So the verb is "opens", never "verify", "check", "grant" or "let you in".
 */

:root {
  /* --- ground ------------------------------------------------------------- */
  --cream: #F4EADA;              /* the corridor wall */
  --white: #FFFBF2;              /* cards: warmer than white, never pure */
  --panel: #EADCC4;
  --hairline: #DCCDB2;
  --hairline-strong: #C0AD8C;
  --shadow-neutral: #D2C0A2;

  /* --- ink ---------------------------------------------------------------- */
  --ink: #2A2620;
  --ink-soft: #6B6357;
  --ink-muted: #8A8070;

  /* --- TEAL replaces orange, everywhere an action lives -------------------- */
  --orange: #2E6E6A;
  --orange-press: #1D4B48;
  --orange-press-bg: #245854;
  --orange-hover: #37817C;
  --orange-link: #235753;
  --orange-100: #D5E5E3;
  --orange-200: #AFCDCA;
  --orange-err-text: #1D4B48;

  /* --- LAMP GOLD replaces green: the affirming, "it opened" state -----------
   * The house rule is that green means SAFE — unlocking, encrypting, a confirmed
   * passphrase, the focus ring. Here that state is lamplight behind a door that just
   * opened, which is the same meaning wearing this brand's clothes.
   *
   * Gold also HAS to carry it, because the primary is now a blue-green: a teal action
   * beside a mint-green success reads as one colour used twice, and the whole point of the
   * house rule is that colour carries meaning rather than mood. Poste Restante hit the
   * same problem and solved it the same way, with postal red and airmail blue.
   *
   * The gold here is darkened from the illustration's #E8B44A: --green also has to sit
   * under body text and inside a focus ring, and lamplight is too pale to read on cream. */
  --green: #B4832A;
  --green-press: #8E6417;
  --green-100: #FBEBC8;
  --green-ok-text: #6E4C10;

  /* Lamplight itself — an illustration colour, never a text one. */
  --lamp: #E8B44A;

  --dark-bg: #221E19;
  --dark-raised: #332C24;
  --dark-muted: #B9A886;
  --dark-text: #F3EADA;
  --tire: #2A2620;
  --glass: #D5E5E3;
}

/* --- the wordmark: four letters, plus what they stand for -------------------
   KTRD alone means nothing to a first-time visitor, so the expansion rides beside it in
   the nav rather than replacing it — the short form is what people type, the long form is
   what makes it stick. Hidden at the breakpoint where the nav collapses, because there is
   no room and the hero is already saying it. */
.brand-tag {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-left: 9px;
  white-space: nowrap;
}

/* --- the headline ---------------------------------------------------------- */
.hero h1 .hl-accent { color: var(--orange); }

/* --- THE HERO, RECOMPOSED --------------------------------------------------
   landing.css lays the hero out as two columns — copy left, illustration right — which is
   Tab Truck's shape and is wrong here for a specific reason: the corridor is not an
   ornament beside the pitch, it IS the pitch. Parked in a right-hand column it floated in
   a half-empty panel while the headline it illustrates sat somewhere else entirely.

   So KTRD stacks: headline, then the doors, then the box you knock on. The picture lands
   between the claim and the act, which is the order someone reads them in.

   HOW, WITHOUT TOUCHING THE MARKUP. `display: contents` dissolves .hero-copy and
   .hero-scene so their children become grid items of .hero directly, and `order` then
   interleaves two columns' worth of elements into one. The alternative was moving nodes in
   index.html — but share-view.js binds this form by id and treats any page holding
   #shareOpen as a viewer, so the markup is worth leaving exactly where it is.

   tabs.html shares .hero, .hero-copy and .hero-scene, which is why none of this can live
   in landing.css. It is loaded only on the KTRD build. */
.hero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 900px;
  padding-top: 30px;
  gap: 0;
}
.hero-copy, .hero-scene { display: contents; }

.hero .pill        { order: 1; }
.hero h1           { order: 2; margin-bottom: 14px; }
.hero-sub          { order: 3; max-width: 42ch; margin-bottom: 0; }
.hero-mark         { order: 4; }
.hero-receive      { order: 5; }
.hero-or           { order: 6; }
.hero-send         { order: 7; }
.hero-note         { order: 8; }
.hero-more         { order: 9; }

/* The stacked items are centred but not stretched: a full-bleed form at 900px is a worse
   target than a 470px one, and the eye has nowhere to rest. */
.hero-receive, .hero-send, .hero-or, .hero-more { width: 100%; max-width: 470px; }
.hero-receive { background: var(--white); text-align: left; margin: 0 0 18px; }
.hero-send { text-align: left; }
.hero-more { margin-top: var(--s3); }

/* --- THE CORRIDOR MARK -----------------------------------------------------
   Five doors and a floor, drawn flat and head-on — no vanishing point, no depth haze, no
   gradient. A perspective corridor would be a picture of a place; this is a diagram of a
   mechanism, and the mechanism is the part worth showing.

   It is sized to the CONTENT COLUMN rather than to a column of its own, so the doors read
   as the width of the page instead of as a small drawing pushed to one side. */
/* display:block, NOT grid. As a grid with justify-items:center the SVG shrink-wrapped to
   its intrinsic size and the corridor rendered at half width — the exact "out of
   proportion" complaint. A block box lets width:100% mean the column. */
.hero-mark {
  height: auto; min-height: 0;
  display: block; text-align: center;
  width: 100%; max-width: 520px;
  margin: 16px auto 28px;
}
/* currentColor in the SVG resolves here. --ink is the outline colour and flips to cream
   in dark, which is what keeps the doors outlined and the floor visible at night. */
.ps-doors { width: 100%; height: auto; display: block; color: var(--ink); }

/* The address over the corridor: one name, five doors. Dashed and mono, so it reads as a
   label on the drawing rather than as another control. */
.mark-addr {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
  border: 2px dashed var(--hairline);
  border-radius: 8px;
  padding: 5px 14px;
  margin-bottom: 12px;
}

/* --- the knock box ---------------------------------------------------------
   Two fields side by side because they are asked for together and answered together —
   stacked, the passcode reads as an afterthought rather than as half the key. */
.share-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.share-field { display: grid; gap: 6px; min-width: 0; }
/* landing.css stacks consecutive .share-rows; inside the pair they are already spaced by
   the grid gap, so that margin would double up. */
.hero-receive .share-field .share-row + .share-row,
.hero-receive .share-pair + .share-go { margin-top: 0; }
.share-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* The product's own noun, kept beside the metaphor's. See the comment in index.html. */
.share-lab span { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .8; }
.share-go .btn { width: 100%; }
.hero-receive-foot {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); margin: 12px 0 0;
}

@media (max-width: 560px) {
  .share-pair { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   DARK. The corridor at night, not a grey inversion.

   This block is why the brand file is not tokens-and-nothing-else. design/tokens.css
   themes dark by flipping token VALUES under :root[data-theme="dark"], and those values
   are Tab Truck's — midnight navy with a pale egg accent. Without an override here, KTRD
   is only KTRD in light mode: the primary button is teal by day and egg-yellow by night,
   on a navy that belongs to the other product. That is the half-branded page
   tools/brands.test.js exists to catch, in the one form it cannot see.

   The pairing is kept, not inverted: teal still acts, gold still affirms. Both are lifted
   to read on a dark ground, and --ink goes warm cream because it carries the outlines too.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --ink: #EFE6D6;
  --ink-soft: #C3BAA6;
  --ink-muted: #918977;

  --cream: #0B1618;            /* page — a near-black with the teal still in it */
  --white: #122326;            /* cards */
  --panel: #182E32;
  --hairline: #234146;
  --hairline-strong: #33585E;
  --shadow-neutral: #050D0E;   /* the flat shadow must read darker than the card */

  --tire: #3E5A5E;
  --glass: #D5E5E3;

  --orange: #58ADA5;
  --orange-hover: #6BBDB5;
  --orange-press: #2E6E6A;
  --orange-press-bg: #4A9B94;
  --orange-link: #7FCCC4;
  --orange-100: #14312F;
  --orange-200: #1D423F;
  --orange-err-text: #F0A987;  /* errors stay warm coral — the house rule, unchanged */

  --green: #E8B44A;            /* lamplight, at full strength now that the ground is dark */
  --green-100: #33291A;
  --green-press: #B4832A;
  --green-ok-text: #F0CC85;

  --dark-bg: #071214;
  --dark-raised: #182E32;
  --dark-muted: #C3BAA6;
  --dark-text: #EFE6D6;

  --on-accent: #071214;        /* text ON the teal accent */
  --lamp: #E8B44A;
}

@media (max-width: 900px) {
  .brand-tag { display: none; }
  .hero-mark { max-width: 420px; margin-bottom: 20px; }
}

/* --- PHONES ----------------------------------------------------------------
   landing.css hides the hero illustration below 900px and reorders the hero so both
   actions sit above the pitch. That rule was learned the hard way and is RIGHT for Tab
   Truck: a ~500px truck above the receive box pushed the one thing people came to do below
   the fold. It is wrong here for one reason — KTRD's illustration is not decoration beside
   the pitch, it is the pitch, and at 260x96 it is a band rather than a tower. Roughly 130px
   of picture buys the whole idea; it does not cost the fold.

   So the corridor comes back and the stacked order is kept, at the same specificity
   landing.css uses (`.hero-copy .hero-receive`), because this file is loaded after it. */
@media (max-width: 900px) {
  .hero { padding-top: 14px; }
  .hero-copy, .hero-scene { display: contents; }

  .hero-copy h1              { order: 2; }
  .hero-copy .hero-receive   { order: 5; margin-top: 0; }
  .hero-copy .hero-or        { order: 6; }
  .hero-copy .hero-send      { order: 7; margin-bottom: 0; }
  .hero-or, .hero-send       { max-width: 470px; }
  .hero-scene .hero-more     { max-width: 470px; margin-top: var(--s3); }

  .hero-mark { display: block; max-width: 380px; margin: 10px auto 22px; }
  .hero-sub  { max-width: 34ch; }
}

/* Below 560 landing.css stacks .share-row vertically, which would put the two halves of
   the pair in a single column of four elements. The pair is already one column there. */
@media (max-width: 560px) {
  .hero { padding-left: 18px; padding-right: 18px; }
  .hero-mark { max-width: 320px; }
}