/* Sentra V2: the app's design language (build 114) on the website.
   Source of truth: sentra-wt-int lib/core/theme/app_tokens.dart, app_type.dart, app_radius.dart,
   app_spacing.dart (pill spec) and features/home_v2/v2_style.dart (V2Glass), 6 Oct 2026.
   Loaded AFTER each page's inline <style>, so it remaps tokens and restyles shared chrome only.
   Web deviations from the app, on purpose: display/title scale up past phone sizes on wide screens;
   prose keeps a 1.5 line height (the app's 1.35 is set for short UI strings); controls keep the
   site's --line-strong boundary, because WCAG 1.4.11 needs 3:1 and the app's 12% edge is ~1.3:1. */

/* The app's face, self-hosted (Legal 15 Oct 2026: no request to Google). Variable weight 200-800, Latin subset,
   from google/fonts ofl/plusjakartasans; licence in assets/fonts/OFL.txt. Name unchanged, as the OFL asks. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Italic-wght.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap; }

/* ---------- tokens: night (default) = AppTokenSet.night ---------- */
:root {
  --v2-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --v2-chrome: #2DF0CC;            /* chromeDark: fills and glyphs */
  --v2-chrome-text: #2DF0CC;       /* chromeText */
  --v2-accent: #00C9A7;            /* accent = sheet: primary control fill */
  --v2-on-accent: #00241E;         /* tealInk */
  --v2-label: #F2F6F5;             /* inkDark */
  --v2-label2: rgba(242, 246, 245, .816);
  --v2-muted: rgba(242, 246, 245, .70);
  --v2-glass: rgba(18, 24, 23, .816);
  --v2-edge: rgba(255, 255, 255, .12);
  --v2-hairline: rgba(255, 255, 255, .10);
  --v2-wash: rgba(255, 255, 255, .10);
  --v2-wash-edge: rgba(255, 255, 255, .28);
  --v2-danger: #FF6B6E;
  --v2-r-sm: 8px; --v2-r-md: 12px; --v2-r-lg: 16px; --v2-r-glass: 28px; --v2-r-pill: 999px;

  /* the site's own variables, remapped onto the app's roles */
  --ink: var(--v2-label);
  --body-ink: var(--v2-label2);
  --soft: var(--v2-muted);
  --accent: var(--v2-chrome-text);
  --mint: var(--v2-accent);
  --line: var(--v2-hairline);
  --card: var(--v2-glass);
  --panel: var(--v2-glass);
  --header-bg: var(--v2-glass);
}
/* ---------- tokens: day = AppTokenSet.day ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --v2-chrome: #00897A;          /* chromeLight: fills and glyphs only */
    --v2-chrome-text: #00695C;     /* tealText, 4.5:1 on white */
    --v2-accent: #00695C;
    --v2-on-accent: #FFFFFF;
    --v2-label: #10201D;           /* inkLight */
    --v2-label2: rgba(16, 32, 29, .80);
    --v2-muted: #53635F;
    --v2-glass: rgba(255, 255, 255, .816);
    --v2-edge: rgba(16, 32, 29, .10);    /* app day edge is white-on-map; on a pale page it vanishes */
    --v2-hairline: rgba(0, 0, 0, .08);
    --v2-wash: rgba(16, 32, 29, .08);
    --v2-wash-edge: rgba(16, 32, 29, .28);
    --v2-danger: #C62828;
    --mint: var(--v2-accent);
  }
}

/* ---------- type: AppType roles ---------- */
body, button, input, select, textarea { font-family: var(--v2-font); }
td, dd, .k, .key { font-variant-numeric: tabular-nums; }   /* figures in tables and labels; prose keeps proportional */
/* display / title: the app's weight, leading and tracking. SIZE stays with each page's layout: on the web
   the headline size is a layout decision, set by the chosen redesign direction (A or B), not by this layer. */
h1 { font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }   /* round 3 (AD): -.02em opened a gap before full stops in Jakarta */
h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
/* headline 18 / w700 / 1.2 */
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
/* body 16 / w500 */
p, li, dd, td, .lede { font-weight: 500; }
.lede { font-size: 1rem; line-height: 1.5; }
/* callout 15 / w600: controls and nav */
.btn, header nav a, .bar nav a, header .bar nav a { font-size: .9375rem; font-weight: 600; }   /* 15px; header .bar nav a outranks each page's small-screen .bar nav a ladder */
/* caption 13 / w600 */
.cta-note, .f-req, .f-field label, footer, footer p, footer a { font-size: .8125rem; font-weight: 600; }
/* micro 12 / w700 / +0.6px: eyebrows and labels. Also the 12px FLOOR for site chrome that sat at 9-11.8px:
   chips, card labels, definition terms, table heads, the contents heading, map credits. The drawn app
   screens inside the homepage illustrations are miniature on purpose and are left alone. */
.eyebrow, .kicker, .doc-kicker, .k, dt, th, .toc h2, .key, .mono, .chip, .sc-credit, .ap-credit,
.beat .k, .c .k, .meta-card dt, .entity dt { font-size: .75rem; font-weight: 700; letter-spacing: .05em; }
/* tracking is for UPPERCASE eyebrows only: on sentence-case chips it made the hero chips wrap */
.chip, .key, .mono { letter-spacing: 0; }

/* ---------- AppPill ---------- */
.btn {
  min-height: 44px;                 /* pillHitTarget; the app's 36 is a visual minimum on phone */
  padding: 0 20px; gap: 10px;       /* pillGap */
  border-radius: var(--v2-r-pill);
  background: var(--v2-accent); color: var(--v2-on-accent);
  line-height: 1.25;
}
.btn-ghost { background: var(--v2-wash); color: var(--v2-label); border: 1px solid var(--v2-wash-edge); }
/* work-with-us fine print: the paragraph after the lede ("Every role is 18+ ...") sat at caption size with no air above it */
.lede + .cta-note { font-size: .875rem; margin-top: 16px; max-width: 44rem; color: var(--v2-muted); }   /* 44rem = the lede's 44em at 1rem */
.lede + .cta-note + .cta-inline { margin-top: 16px; }   /* round 3 (AD): "Sound like you?" sat flush under the fine print */

/* ---------- V2Glass: tinted fill, blur 22, 1px edge ---------- */
/* Round 3 (AD): the header is SOLID. At .92 with blur a smudge of the scrolled heading still showed through.
   Same height on every page (index's 71px): the legal and contact pages had .8rem bar padding and no 44px
   wordmark floor, so the mark jumped between pages. */
header {
  background: rgb(18, 24, 23);           /* the night glass colour, opaque */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--v2-edge);
  padding-top: max(env(safe-area-inset-top, 0px), .55rem);
}
header .bar { padding: .3rem 0 .78rem; min-height: 0; }   /* home-b set .bar{min-height:64px}: 73.8px against 71 elsewhere */
header .wordmark { min-height: 44px; flex: none; }
/* Phones: the nav stays on ONE row and scrolls sideways, instead of wrapping and growing the sticky bar to ~98px */
@media (max-width: 599px) {
  header .bar { flex-wrap: nowrap; }
  header .bar nav { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; gap: 1rem; }
  header .bar nav::-webkit-scrollbar { display: none; }
  header .bar nav a { white-space: nowrap; }
}
/* ---------- one brand mark: the S mark + "Sentra" in every header (apply-v2.py swaps the legacy pin markup) ---------- */
.wordmark { font-family: var(--v2-font); font-weight: 800; letter-spacing: 0; }
.wordmark .logo-mark { display: inline-block; height: 28px; width: 22px; flex: none; background: currentColor;
  -webkit-mask: url("logo-mark.png") center / contain no-repeat; mask: url("logo-mark.png") center / contain no-repeat; }   /* url is relative to assets/v2.css; the legal pages' inline styles never defined the mask */
.wordmark .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@supports (not (mask-repeat: no-repeat)) and (not (-webkit-mask-repeat: no-repeat)) {
  .wordmark .logo-mark { display: none; }
  .wordmark .vh { position: static; width: auto; height: auto; clip-path: none; }
}

.c, .beat, .entity, .meta-card, .body .callout {
  background: var(--v2-glass);
  border: 1px solid var(--v2-edge);
  border-radius: var(--v2-r-lg);    /* AppRadius.lg: cards and panels */
}
.f-field input, .f-field select, .f-field textarea { border-radius: var(--v2-r-md); }

/* ---------- coral, in the V2 kit red means danger ---------- */
/* emphasis words take the teal text colour; the start-of-walk dot, illustration pips and legal
   notice bars keep coral on purpose (a map marker and a legal marker, not emphasis) */
h1 .yet, .hs-line .warm, .foot-close .yet { color: var(--v2-chrome-text); }
.f-field :user-invalid { border-color: var(--v2-danger); }

/* ---------- day overrides that must follow the base rules above ---------- */
@media (prefers-color-scheme: light) {
  header { background: #FFFFFF; }   /* solid, as in dark */
  /* the ghost button read as disabled on white: solid white fill, label-colour edge at 28% */
  .btn-ghost { background: #FFFFFF; border: 1px solid var(--v2-wash-edge); color: var(--v2-label); }
}