/* ============================================================================
   CASE/onboard/site/tokens.css · LANE DESIGN · 2026-09-16 · A CANDIDATE
   The design system for the site around the world: cream, white, grey, black,
   like the icon. One look, light only. Nothing here fetches from the network.

   THE PALETTE IS THE ICON. `icon-512.png` sampled: ground #fbfaf7 (SITE8; was #f6f1e2), the figure's
   terracotta #ca6157, the line a warm near-black. The world is drawn in the
   same key (STYLE.md: near-white cream walls, warm light), so these pages sit
   beside it instead of fighting it — today's shell is #0e1014 on #e9e7e2,
   which is the thing he said is wrong.

   THE ACCENT IS FOR ONE THING ONLY: the connect mark's FAILED state — the dot
   that says "your last sitting did not reach your link". Never a surface,
   never a button, never a heading. A page with no colour on it needs exactly
   one place where colour means "look here", and that is the place.

   TYPE. Headings in PT Serif (bundled, open licence, subset to Latin + Polish
   — fonts/LICENCE.txt), so the serif is the same on an iPhone and a cheap
   Android and never falls back to Droid Serif. Body in the system sans, so it
   reads as the phone's own voice: -apple-system on iOS, Roboto on Android.
   ============================================================================ */

@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/PTSerif-Regular.woff") format("woff"); }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/PTSerif-Italic.woff") format("woff"); }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/PTSerif-Bold.woff") format("woff"); }

:root {
  color-scheme: light only;             /* one look; the palette is the icon's and the icon has one */

  /* surfaces */
  --cream:   #fbfaf7;                   /* the ground — the front page's paper (SITE8, the founder: 'keep the background color in whole app'); the icon sits on it too */
  --paper:   #ffffff;                   /* cards, inputs */
  --cream-2: #f3f1ea;                   /* a pressed row, a well — derived: the ground dropped ~8 (L) toward the warm greys, as #efe8d6 was to #f6f1e2 */

  /* greys — warm, so they belong to the cream */
  --grey-1:  #e6dfd0;                   /* hairlines, edges, disabled surface */
  --grey-2:  #b3ab9d;                   /* placeholders, disabled text, off marks */
  --grey-3:  #6e675d;                   /* secondary text, secondary links */

  /* ink */
  --ink:     #221b16;                   /* the icon's line: warm near-black */
  --ink-on:  var(--cream);              /* text on an ink surface */

  /* the one accent */
  --clay:    #ca6157;                   /* the figure's terracotta — the failed dot, nothing else */

  /* type */
  --serif: "PT Serif", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Roboto Mono, monospace;

  --fs-display: 30px;  --lh-display: 1.15;   /* h1 — one idea per screen */
  --fs-title:   22px;  --lh-title:   1.2;    /* h2 — a card's name */
  --fs-body:    16px;  --lh-body:    1.5;
  --fs-small:   14px;  --lh-small:   1.45;
  --fs-fine:    13px;  --lh-fine:    1.4;

  /* space — a 4 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --gutter: 24px;                        /* the page's side margin on a phone */
  --measure: 34em;                       /* body text never runs wider than this */

  /* shape */
  --r-card: 14px; --r-input: 12px; --r-button: 14px;
  --hairline: 1px solid var(--grey-1);
  --tap: 52px;                           /* every control at least this tall */

  --shadow-card: 0 1px 0 rgba(34,27,22,.04), 0 6px 20px rgba(34,27,22,.05);
}

/* ---- ground ---------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--cream); color: var(--ink);
  font: var(--fs-body)/var(--lh-body) var(--sans); -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

/* ---- the screen: one column, the button pinned to the bottom -------------------------- */
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(var(--s6) + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; }
.screen > header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.screen > .body { flex: 1 1 auto; padding-top: var(--s8); }
.screen > footer { padding-top: var(--s6); display: grid; gap: var(--s3); }
@media (min-width: 720px) { .screen { padding-top: var(--s12); } .screen > .body { padding-top: var(--s12); } }

/* ---- type ------------------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: var(--s4); max-width: var(--measure); }
h2 { font-size: var(--fs-title); line-height: var(--lh-title); }
h3 { font-family: var(--sans); font-size: var(--fs-fine); line-height: var(--lh-fine); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey-3); margin: var(--s6) 0 var(--s2); }
p { margin: 0 0 var(--s3); max-width: var(--measure); }
p.lead { font-size: 17px; }
.muted { color: var(--grey-3); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.fine { font-size: var(--fs-fine); line-height: var(--lh-fine); color: var(--grey-3); }
b, strong { font-weight: 600; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grey-2); }
ul { margin: 0 0 var(--s3); padding-left: 1.2em; } li { margin: 0 0 var(--s1); }
code, .mono { font-family: var(--mono); font-size: 14px; }

/* the wordmark: the serif at small size, nothing else. It is a word, not a logo. */
.wordmark { font-family: var(--serif); font-size: 18px; letter-spacing: .01em; text-decoration: none; }
.wordmark img { width: 28px; height: 28px; border-radius: 8px; vertical-align: -8px; margin-right: 8px; }

/* the step dots: which of the four screens before the worlds you are on. */
.steps { display: flex; gap: 6px; } .steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-1); }
.steps i.on { background: var(--ink); }

/* ---- the one button, the secondary link ---------------------------------------------- */
.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap);
  padding: 0 var(--s6); border: 0; border-radius: var(--r-button); background: var(--ink); color: var(--ink-on);
  font: 500 var(--fs-body)/1 var(--sans); text-decoration: none; cursor: pointer; transition: opacity .12s; }
.button:active { opacity: .82; }
.button:disabled, .button[aria-disabled="true"] { background: var(--grey-1); color: var(--grey-2); cursor: default; }
.button.quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.link { display: block; text-align: center; padding: var(--s3); color: var(--grey-3); font-size: 15px;
  text-decoration: none; background: none; border: 0; font-family: var(--sans); cursor: pointer; width: 100%; }
.link:active { color: var(--ink); }

/* ---- the field ------------------------------------------------------------------------- */
.field { display: block; margin: var(--s4) 0; }
.field > span { display: block; font-size: var(--fs-small); color: var(--grey-3); margin-bottom: var(--s2); }
.input { display: block; width: 100%; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--grey-1);
  border-radius: var(--r-input); background: var(--paper); color: var(--ink); font: var(--fs-body)/1 var(--sans);
  outline: none; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: var(--grey-2); }
.input:focus { border-color: var(--ink); }
.input.code { font: 500 28px/1 var(--mono); letter-spacing: .32em; text-align: center; min-height: 64px; }

/* ---- the card and the row ---------------------------------------------------------------- */
.card { background: var(--paper); border: var(--hairline); border-radius: var(--r-card); padding: var(--s4);
  box-shadow: var(--shadow-card); margin-bottom: var(--s3); }
.card.empty { background: transparent; box-shadow: none; border-style: dashed; color: var(--grey-3); }
.row { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) 0;
  text-decoration: none; color: inherit; border: 0; background: none; width: 100%; font: inherit; text-align: left;
  cursor: pointer; }
.row + .row { border-top: var(--hairline); }
.row .ic { flex: none; width: 24px; height: 24px; color: var(--ink); }
.row .t { flex: 1 1 auto; min-width: 0; } .row .t small { display: block; color: var(--grey-3); font-size: var(--fs-fine); }
.row .n { color: var(--grey-3); font-size: var(--fs-small); white-space: nowrap; flex: none; }
.row .chev { flex: none; width: 20px; height: 20px; color: var(--grey-2); }

/* ---- icons: 1.5 px line, rounded, monochrome, currentColor ------------------------------ */
.ic { display: inline-block; width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---- the connect mark: four states, one glyph ----------------------------------------------
   The link glyph never changes. The STATE is a dot at the lower right of the ring:
     sent    · a filled ink dot            "your sittings are on your link"
     sending · a short arc turning          "on its way"
     unsent  · a hollow ring                "something here has not gone yet"
     failed  · a filled CLAY dot (the one accent) "the last send did not arrive" */
.mark { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--paper);
  border: 1px solid var(--grey-1); box-shadow: var(--shadow-card); display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); }
.mark .ic { width: 20px; height: 20px; }
.mark::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; box-sizing: border-box; border: 2px solid var(--cream); background: var(--ink); }
.mark[data-state="unsent"]::after { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 0 0 2px var(--cream); }
.mark[data-state="failed"]::after { background: var(--clay); }
.mark[data-state="sending"]::after { background: var(--paper); border: 1.5px solid var(--grey-1);
  border-top-color: var(--ink); box-shadow: 0 0 0 2px var(--cream); animation: mark-turn .9s linear infinite; }
@keyframes mark-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mark[data-state="sending"]::after { animation: none; border-color: var(--ink); border-top-color: var(--grey-1); } }

/* ---- the world tile: the icon on the cream, a two-line name ---------------------------- */
.world { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: center; }
.world img { width: 72px; height: 72px; border-radius: 18px; border: var(--hairline); display: block; }
.world h2 { margin-bottom: 2px; } .world p { margin: 0; color: var(--grey-3); font-size: var(--fs-small); }

/* ---- the paste well (the one link) --------------------------------------------------------- */
.well { background: var(--cream-2); border: var(--hairline); border-radius: var(--r-input); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5; word-break: break-all; -webkit-user-select: all; user-select: all; }

/* ---- the scrollable consent text ------------------------------------------------------------ */
.scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--paper); border: var(--hairline); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s6);
  min-height: 0; }
.scroll h2 { font-size: 19px; margin: var(--s6) 0 var(--s2); } .scroll h2:first-child { margin-top: 0; }
.scroll p, .scroll li { font-size: 15px; line-height: 1.5; }
.scroll .end { text-align: center; color: var(--grey-3); font-size: var(--fs-fine); padding-top: var(--s4); border-top: var(--hairline); margin-top: var(--s6); }

/* ---- a wider screen: the same column, centred, with air ----------------------------------- */
@media (min-width: 720px) { :root { --gutter: 40px; --fs-display: 36px; } }