/* ============================================================================
   pinda.place — the Pinda graphic standard, ported to the web.

   SOURCE OF TRUTH: constants/Theme.ts + docs/UI_LEXICON.md in the app repo.
   Every token below is a 1:1 copy of an app token; nothing is invented here and
   nothing is "adjusted for the web". If a value changes in Theme.ts, change it
   here — do not let the two drift.

   The standard, in short:
     • Colour   — Ink #4d4d4d · Pinda Orange #FF6A06 · Paper #e4e2d9 · Soft line #c4c4c4.
                  The orange is PINNED in both aspects; so is the paper laid ON the orange
                  (COLORS.white = #e4e2d9 — there is no pure white in the chrome palette).
     • Lines    — the TWO-WEIGHT system, both 1px: the Ink line (structure: borders, rules,
                  outlines) and the Soft line (de-emphasised: dividers, tracks). No third tone.
     • Type     — Mono (Courier New) for names, titles, field values and button labels;
                  UI Sans (Helvetica Neue) at 10px/300/uppercase for the Section label and
                  every small meta line.
     • Shape    — Module 25 (one button diameter) · Row module 53 · Fillet 12.5 · the
                  RADIUS + SPACING ladders.
     • Shadow   — the ONE app-wide drop shadow: -5px 5px 10px black, 0.15 light / 0.30 dark.
                  On buttons, labels, cards, panels — NEVER on map marks.
     • Motion   — FADE_DURATION 280ms, the one crossfade timing.

   DARK is the app's HAND-AUTHORED neutral grey ramp (Theme.ts → DARK), not the old
   photographic negative of the paper — that negative dragged the paper's complementary
   blue through every dark surface. The MAP still derives the old way (negative + lightness),
   which is exactly what the backdrop filter below reproduces.
   ========================================================================== */

/* ── 1 · Foundations — the light aspect is the source of truth ───────────── */
:root {
  color-scheme: light dark;

  /* Colour (Theme.ts → LIGHT) */
  --ink:            #4d4d4d; /* the brand line/text colour — replaces pure black everywhere */
  --orange:         #FF6A06; /* Pinda Orange — the one accent. PINNED in every aspect */
  --paper:          #e4e2d9; /* the app canvas */
  --surface:        #e4e2d9; /* card / panel fill — same paper, depth comes from the shadow */
  --soft:           #c4c4c4; /* the Soft line — dividers, tracks, muted marks */
  --muted:          #9CA3AF; /* muted text — one grey darker than the soft line */
  --on-orange:      #e4e2d9; /* COLORS.white — the paper laid on the orange CTAs */
  --map-ink:        #4d4d4d; /* ink for marks drawn straight on the map */

  --label-fill: rgba(228, 226, 217, 0.9); /* LABEL_FILL — translucent Paper behind labels */
  --veil-fill:  rgba(228, 226, 217, 0.8); /* VEIL_FILL — the scrim over the map */

  /* The ONE shadow (Theme.ts → buildShadow, light opacity 0.15) */
  --shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);

  /* Type (FONT_FAMILY / FONT_FAMILY_UI) */
  --mono: 'Courier New', Courier, ui-monospace, Menlo, monospace;
  --ui:   'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* FONT_SIZE */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-xxl: 28px; --fs-xxxl: 36px;
  --fs-meta: 10px;          /* the Section label / meta line size */
  --meta-weight: 300;       /* c.metaWeight — light & dark are 300 */

  /* SPACING */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px;

  /* RADIUS */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* Layout units */
  --module: 25px;      /* MODULE — one button diameter, the base unit */
  --row: 53px;         /* the Row module rhythm */
  --fillet: 12.5px;    /* FILLET — the signature radius */
  --gutter: var(--sp-xl); /* the screen side gutter = SPACING.xl */
  --outline: 1px;      /* c.outline — light & dark keep 1 */
  --icon-stroke: 2;    /* c.iconStroke — light & dark keep 2 */

  --fade: 280ms;       /* FADE_DURATION — the one crossfade timing */
}

/* ── 2 · Dark aspect — Theme.ts → DARK, the hand-authored neutral ramp ───── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #cccccc;
    --paper:     #1f1f1f;
    --surface:   #1f1f1f;
    --soft:      #3c3c3c;
    --muted:     #8b8b8b;
    --map-ink:   #ffffff;
    --label-fill: rgba(31, 31, 31, 0.9);
    --veil-fill:  rgba(31, 31, 31, 0.8);
    --shadow: -5px 5px 10px rgba(0, 0, 0, 0.30); /* still BLACK, doubled — never a white glow */
  }
}
/* The manual toggle wins over the OS setting, in both directions. */
:root[data-theme="dark"] {
  --ink: #cccccc; --paper: #1f1f1f; --surface: #1f1f1f; --soft: #3c3c3c; --muted: #8b8b8b;
  --map-ink: #ffffff;
  --label-fill: rgba(31, 31, 31, 0.9); --veil-fill: rgba(31, 31, 31, 0.8);
  --shadow: -5px 5px 10px rgba(0, 0, 0, 0.30);
}

/* First-paint transition suppression — app.js drops the class after a frame, so a saved
   manual aspect never cross-fades in from the OS one. */
.no-transition, .no-transition * { transition: none !important; }

/* ── 3 · Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--fade) ease, color var(--fade) ease;
}
[hidden] { display: none !important; }

/* The fixed map backdrop — the same still the app's auth screens sit on, held still while
   the content scrolls over it (docs: the auth screens share one fixed surface).
   DARK: the app derives its dark map as the photographic NEGATIVE of the light one with the
   lightness pulled down (Theme.ts → toDarkAspect). invert+grayscale+brightness reproduces
   that here and lands the paper exactly on the dark surface #1f1f1f, so map and chrome agree. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--paper) url('/assets/map.webp') center / cover no-repeat;
  transition: filter var(--fade) ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .backdrop { filter: invert(1) grayscale(1) brightness(1.08); }
}
:root[data-theme="dark"] .backdrop { filter: invert(1) grayscale(1) brightness(1.08); }

/* The veil over it — VEIL_FILL, the same scrim the app puts under a full-page overlay. */
.backdrop::after { content: ''; position: absolute; inset: 0; background: var(--veil-fill); }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) var(--sp-xxl);
  padding-top: max(var(--sp-lg), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-xxl), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

/* ── 4 · Brand primitives ───────────────────────────────────────────────── */

/* Paper — the raised panel: paper fill, 1px Ink outline, Fillet-family radius, the one shadow. */
.paper {
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
/* Mono — names, titles, field values, button labels. */
.name { font-family: var(--mono); font-weight: 500; color: var(--ink); }
/* The Section label / meta line — UI Sans, 10px, 300, uppercase. */
.label {
  font-family: var(--ui);
  font-weight: var(--meta-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: 0;
}
.label--ink { color: var(--ink); }
.label--orange { color: var(--orange); }
/* The Ink rule band — the Page header's top+bottom lines. */
.rule-band { border-top: var(--outline) solid var(--ink); border-bottom: var(--outline) solid var(--ink); }
/* The Soft line divider. */
.hr { height: 1px; background: var(--soft); border: 0; margin: 0; }
/* The Leader line — the 1px Ink rule that fills the gap from a name to its trailing circle. */
.leader { flex: 1; height: 1px; background: var(--ink); min-width: var(--sp-md); }

/* Tabler glyph — the app's icon renderer: 2px stroke, round caps, currentColor. */
.glyph {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.glyph--lg { width: 18px; height: 18px; }

/* Icon circle — 25x25, 1px Ink outline, Paper fill, glyph centred. The universal round control. */
.icon-circle {
  width: var(--module); height: var(--module);
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
}
.icon-circle--orange { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.icon-circle--soft { border-color: var(--soft); color: var(--soft); }

/* ── 5 · Masthead (the Page header's rule band) ─────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  min-height: 44px; /* the Page header's height */
  padding: var(--sp-sm) 0;
  background: var(--label-fill);
}
.masthead__right { display: flex; align-items: center; gap: var(--sp-md); }
.logo { display: block; height: auto; }
/* The lockup keeps its diagonal grey gradient verbatim in light (PindaLogo.tsx). In dark that
   ramp would sink into the surface, so the mark goes flat Ink — the same trick PindaMark uses
   when it needs to be tinted. */
.logo path { fill: url(#pinda-grad); transition: fill var(--fade) ease; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo path { fill: var(--ink); }
}
:root[data-theme="dark"] .logo path { fill: var(--ink); }

/* ── 6 · Buttons ────────────────────────────────────────────────────────────
   Three distinct controls, kept distinct (Lexicon §10):
     Button      — 52pt tall, full radius. Onboarding / primary page actions.
     Pill button — 25pt tall, Fillet corners. Inline actions, chips.
     Icon circle — 25pt round. Above.                                        */
.btn {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  width: 100%;
  min-height: 52px;
  padding: 15px var(--sp-lg);
  text-align: center; text-decoration: none; line-height: 1;
  font-family: var(--mono); font-weight: 400; font-size: var(--fs-md); letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--r-full);
  box-shadow: var(--shadow);
  transition: transform 120ms ease, opacity var(--fade) ease;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.btn:active { transform: translate(-1px, 1px); } /* press INTO the down-left shadow */
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.btn--ghost { background: transparent; box-shadow: none; border-color: var(--soft); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* Pill button — 25pt tall, Fillet corners, Mono label. */
.pill {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--module);
  padding: 0 var(--sp-md);
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--surface);
  border: var(--outline) solid var(--ink);
  border-radius: var(--fillet);
  box-shadow: var(--shadow);
  transition: background var(--fade) ease, color var(--fade) ease,
              border-color var(--fade) ease, transform 120ms ease;
}
/* Grow the touch target to 44x44 (HIG) without growing the visible pill. */
.pill::after { content: ''; position: absolute; inset: -10px -4px; }
.pill:active { transform: translate(-1px, 1px); }
.pill[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }

/* ── 7 · Cards & copy ───────────────────────────────────────────────────── */
.card { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
.card__head { display: flex; flex-direction: column; gap: var(--sp-xs); }
.title { margin: 0; font-family: var(--mono); font-weight: 500; font-size: var(--fs-xxl); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.title--sm { font-size: var(--fs-xl); }
.body { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); }
.fine { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.em { font-family: var(--mono); color: var(--orange); }

/* Section — a Section label over a group, the app's list grouping. */
.section { display: flex; flex-direction: column; gap: var(--sp-sm); }
.section > .label { padding-left: 2px; }

/* ── 8 · Row module — 53pt: glyph · name · Leader line · trailing circle ─── */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: var(--sp-sm);
  min-height: var(--row);
  padding: var(--sp-sm) 0;
}
.row + .row { border-top: 1px solid var(--soft); } /* Soft line divider between rows */
.row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__name { font-family: var(--mono); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.row__sub { font-family: var(--ui); font-weight: var(--meta-weight); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* A checkable test row: the trailing circle fills orange once ticked. */
.row--check { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.row--check .row__tick { transition: background var(--fade) ease, border-color var(--fade) ease, color var(--fade) ease; }
.row--check .row__tick .glyph { opacity: 0; transition: opacity var(--fade) ease; }
.row--check[aria-checked="true"] .row__tick { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.row--check[aria-checked="true"] .row__tick .glyph { opacity: 1; }
.row--check[aria-checked="true"] .row__name { color: var(--muted); }

/* A numbered step row (install instructions). */
.step { display: flex; align-items: baseline; gap: var(--sp-sm); padding: var(--sp-sm) 0; font-size: var(--fs-sm); line-height: 1.45; }
.step + .step { border-top: 1px solid var(--soft); }
.step__n { flex: none; font-family: var(--ui); font-weight: var(--meta-weight); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--orange); min-width: 18px; }
.step strong { font-family: var(--mono); font-weight: 500; }

/* ── 9 · Preview row — the 44pt field row: Mono label · Preview divider · input ── */
.field {
  display: flex; align-items: stretch; gap: var(--sp-md);
  min-height: 44px;
}
.field + .field { border-top: 1px solid var(--soft); }
.field__label {
  flex: none; width: 76px;
  display: flex; align-items: center;
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-sm); color: var(--ink);
}
/* The Preview divider — the vertical Ink line between label and input. */
.field__divider { flex: none; width: 1px; background: var(--ink); }
.input, .select, .textarea {
  flex: 1; min-width: 0;
  padding: var(--sp-sm) 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-md); /* >=16px so iOS doesn't zoom on focus */
  appearance: none; -webkit-appearance: none;
}
.input:focus, .select:focus, .textarea:focus { outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--muted); font-family: var(--mono); }
.select { cursor: pointer; }
.textarea { resize: none; line-height: 1.45; min-height: 96px; padding-top: var(--sp-sm); }

/* The Note field's character counter. */
.counter { align-self: flex-end; font-family: var(--ui); font-weight: var(--meta-weight); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--muted); }
.counter.is-full { color: var(--orange); }

/* The chip row (Pill buttons acting as a single-choice group). */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

/* The chevron closing a select row — Soft line, so it reads as affordance, not structure. */
.field__chevron { align-self: center; color: var(--soft); }

/* The notes form — one gap ladder instead of per-element margins. */
.say { display: flex; flex-direction: column; gap: var(--sp-md); }

/* The sent state — centred, the app's confirmation rhythm. */
.done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-md); }

/* The offscreen icon sprite. */
.sprite { position: absolute; width: 0; height: 0; }

.center { text-align: center; }

/* Honeypot — off-screen, never focusable by a human. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── 10 · Feedback / status ─────────────────────────────────────────────── */
.notice {
  margin: 0;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--label-fill);
  border: var(--outline) solid var(--orange);
  border-radius: var(--r-sm);
}
.notice strong { font-family: var(--mono); color: var(--orange); }

/* The Read-out — a Mono value reported on the right of a row (Settings row style). */
.readout { display: flex; align-items: center; gap: var(--sp-sm); }
.readout__value { font-family: var(--mono); font-weight: 400; font-size: var(--fs-sm); color: var(--ink); }

/* Spinner — soft-line ring, orange lead. No third tone. */
.spinner {
  width: var(--module); height: var(--module);
  border: 2px solid var(--soft); border-top-color: var(--orange);
  border-radius: var(--r-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 11 · Footer ────────────────────────────────────────────────────────── */
.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: 0 2px; }

/* ── 12 · Focus, motion, small screens ──────────────────────────────────── */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  body, .btn, .pill, .backdrop, .logo path, .row--check .row__tick, .row--check .row__tick .glyph { transition: none; }
}

@media (max-width: 400px) {
  :root { --gutter: var(--sp-md); }
  .title { font-size: var(--fs-xl); }
  .field__label { width: 64px; }
}