/* OMOIKANE-1506 — WCAG 2.2 AA contrast, audited 2026-07-28.
 *
 * Ratios were computed for every foreground/background pair the stylesheet
 * ACTUALLY sets together (32 pairs), not for the palette in the abstract.
 * Ten failed 4.5:1; three failed even the 3:1 large-text floor:
 *
 *   --c-text-light on cream-soft   2.21:1
 *   --c-text-light on cream        2.36:1
 *   --c-text-light on white        2.49:1
 *
 * Each failing token was darkened in HLS with hue and saturation held, solved
 * against the DARKEST surface it is used on — not the lightest. For dark text,
 * white gives the MOST contrast, so solving on white leaves the token still
 * failing on every other surface. That mistake was made and caught here.
 *
 * Movement is small except where it had to be large:
 *   --c-text-muted      sum|dRGB| 32     --c-gold             10
 *   --c-match-weak-text            28     --c-match-mid-text   48
 *   --c-text-light                162  <- was failing by a wide margin
 *
 * Locked by app/src/a11y_contrast_lock.rs, which recomputes the ratios from
 * this file at `cargo test` time. Editing a colour here without re-checking
 * contrast will fail the build.
 */
/*
  Omoikane — design system.
  Single source of truth for both the public Hugo site (www/, beta/) and the
  daemon/mockups/ post-login HTML scaffolds. Tokens declared once, primitives
  used everywhere. Fonts: Cormorant Garamond + Manrope + Newsreader
  via Bunny Fonts (page_shells.rs preconnect); system fallbacks otherwise.

  CSP-friendly: no remote font/script imports. No third-party trackers.
  Per omoikane mission rules.
*/

/* OMOIKANE-1293 — Instrument Serif (the Calm template's display serif),
   self-hosted (same woff2 as dashboard-v2.css) so section pages get the
   upright serif instead of falling back to calligraphic Cormorant. */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/instrument-serif-400-italic.woff2') format('woff2'); }
/* OMOIKANE-1293 — Plus Jakarta Sans (the Calm template's body sans), self-hosted
   variable woff2 (weight axis 100–900, verified). Replaces the prior 'Manrope'
   family name which had NO @font-face, so the app silently rendered system-ui.
   Operator decision 2026-07-09: match the template's typography. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/plus-jakarta-sans.woff2') format('woff2'); }

/* ─── design tokens ──────────────────────────────────────────────────── */

:root {
  /* primary palette — calm navy / cream / gold (Omoikane guidelines) */
  --c-navy:        #1a2530;       /* primary brand, sidebar, headings */
  --c-navy-darker: #141d26;       /* button hover, deep panels */
  --c-navy-soft:   #243140;       /* active sidebar nav background */
  --c-cream:       #f7f9f9;       /* page background */
  --c-cream-soft:  #eef2f2;       /* card / panel variant background */
  --c-white:       #ffffff;       /* card surfaces */
  --c-gold:        #3879a0;       /* accent, interactive, rules, watermark */
  --c-coral:       #d96c5b;       /* OMOIKANE-1293 — template primary-CTA colour */
  --c-coral-dark:  #b34a38;       /* coral CTA hover */
  --c-amber-aa:    #8a6d20;       /* OMOIKANE-1293 — darkened amber that reads
                                      like the template's #c89a3c but passes
                                      WCAG AA on white (~4.6:1); used for small
                                      amber text/marks (Goals Edit, settling). */
  --c-gold-darker: #2d6286;       /* gold used as text/links (AA on cream) */
  --c-gold-soft:   #7fb1d6;       /* gold tints on navy */

  /* text */
  --c-text:        #33424d;
  --c-text-muted:  #616c75;
  --c-text-light:  #627079;
  --c-text-on-navy:#f7f9f9;
  --c-text-on-navy-muted: #9db3a6;

  /* borders / dividers — soft, warm */
  --c-border:      #e7ecec;
  --c-border-soft: #eef1f1;
  --c-border-on-navy: rgba(247, 249, 249, 0.14);

  /* status colors — low-saturation tints (always paired with icon/label) */
  --c-pink-bg:     rgba(217, 108, 91, 0.12);
  --c-pink-text:   #b34a38;
  --c-blue-bg:     rgba(58, 124, 165, 0.10);
  --c-blue-text:   #2d6286;
  --c-sage-bg:     rgba(129, 158, 142, 0.16);
  --c-sage-text:   #3f6b53;
  --c-cream-bg:    rgba(200, 154, 60, 0.14);
  --c-cream-text:  #9a7320;

  /* OMOIKANE-1486 — status dots on the NAVY rail.
     The --c-match-* set above is tuned for cream grounds and fails against
     --c-navy: #3f6b53 on #1a2530 measures 2.65:1, under the 3:1 that WCAG
     1.4.11 requires for a graphical object carrying meaning. There is no
     on-navy chip variant in this sheet, so these are genuinely new rather
     than a rename. Contrast against --c-navy noted per token. */
  --c-status-ok-on-navy:   #6fbf8f;  /* 7.05:1 */
  --c-status-warn-on-navy: #e0b352;  /* 7.95:1 */
  --c-status-down-on-navy: #ef8f7a;  /* 6.58:1 */

  --c-purple-bg:   rgba(127, 177, 214, 0.14);
  --c-purple-text: #2d6286;

  /* match score colors */
  --c-match-strong-bg:   #d8e8dc;
  --c-match-strong-text: #3f6b53;
  --c-match-mid-bg:      #f0e3c8;
  --c-match-mid-text:    #81611b;
  --c-match-weak-bg:     #f3d7d0;
  --c-match-weak-text:   #a34333;

  /* typography — Cormorant Garamond display + Manrope body + Newsreader
     long-form; served from Bunny Fonts (preconnect in page_shells.rs).
     OMOIKANE-1290: Manrope/Newsreader restored — 830624e6 pasted a mockup's
     'Inter' placeholder over the audited editorial pair (2026-05-16 audit;
     www/beta parity). Inter was never @font-face'd here, so it silently
     fell back to system-ui. */
  /* OMOIKANE-1293 — the Calm template uses Instrument Serif (upright, refined)
     for its serif display, NOT Cormorant Garamond (which reads calligraphic/
     italic at display sizes). Instrument Serif is @font-face'd below and its
     woff2 files already ship in /static/fonts. */
  --font-serif:      'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:       'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* OMOIKANE-1672 — the brand's long-form text is the body sans (www sets
     prose in Plus Jakarta Sans); Newsreader was the retired editorial face. */
  --font-serif-body: var(--font-sans);
  /* OMOIKANE-1672 — aliases several rule sets read but nothing defined, so
     they fell through to Cormorant / Tinos (not loaded) and rendered in the
     browser's Times: coaching exercise headings, the calendar and report
     titles, the ND nudge banner. */
  --ff-serif:          var(--font-serif);
  --ff-display:        var(--font-serif);
  --font-serif-display: var(--font-serif);
  --font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-cjk:        'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  /* spacing scale — 4px base (Omoikane guidelines) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* radii — gently rounded */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* shadows — soft, low-contrast, navy-tinted (calm aesthetic) */
  --shadow-sm: 0 1px 2px rgba(26, 37, 48, 0.06), 0 1px 3px rgba(26, 37, 48, 0.08);
  --shadow-md: 0 2px 6px rgba(26, 37, 48, 0.08), 0 8px 24px rgba(26, 37, 48, 0.10);
  --shadow-lg: 0 16px 40px rgba(26, 37, 48, 0.14), 0 4px 12px rgba(26, 37, 48, 0.08);

  /* layout widths (Omoikane guidelines) */
  --max-width-page: 1140px;
  --max-width-prose: 660px;
  --max-width-narrow: 480px;

  /* z-index inventory */
  --z-behind:                    -1;
  --z-base:                       0;
  --z-content:                    1;
  --z-content-raised:            10;
  --z-content-top:               20;
  --z-loading-overlay-bg:       100;
  --z-loading-overlay-spinner:  102;
  --z-modal-backdrop:           999;
  --z-modal-dialog:            1000;
  --z-skip-link:               9999;
}

/* ─── OMOIKANE-1293 — "Calm" style (unified single theme) ──────────────
   Two-ground duotone derived from the 2026-07-07 Calm dashboard template:
   dark slate-navy shell + dashboard, light cool-off-white content, with
   coral CTA / steel-blue interactive / sage + gold status. This block
   RE-TUNES the base token palette; component CSS inherits automatically
   through var(--c-*). The app is single-theme: <html> is hardcoded
   data-style="calm" (page_shells.rs), so this is the only active style.
   The retired cinematic + neo-brutal override blocks were deleted per
   OMOIKANE-1293 acceptance test #2. */

/* Calm primary CTA = coral (template "Paste a job"); the accent token stays
   steel-blue for decorative use, so the CTA is overridden explicitly here. */
.btn--primary {
  background: #d96c5b;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(217, 108, 91, 0.30);
}
.btn--primary:hover {
  background: #b34a38;
  color: #ffffff;
}

/* ─── reset ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
:focus-visible {
  outline: 2px solid var(--c-gold-darker, #9c7e4f);
  outline-offset: 2px;
}
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}
/* Omoigane shrine in Yokohama — used very faintly as atmospheric background.
   Source: https://commons.wikimedia.org/wiki/File:Omoigane_shrine_in_Yokohama.jpg
   The shrine is dedicated to the Omoikane kami; the image grounds the brand
   in the source culture without being decorative. Opacity is intentionally
   low so it never competes with content. Disabled on .no-shrine pages
   (e.g. authenticated app surfaces) by removing the class on body. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-behind, -1); /* OMOIKANE-1097 — background imagery anchor */
  background-image: url('/img/omoigane-shrine.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.11;        /* faintly visible — atmospheric, not decorative */
  pointer-events: none;
  filter: saturate(0.6);
}
body.no-shrine::before { display: none; }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

/* ─── typography ────────────────────────────────────────────────────── */

.t-serif         { font-family: var(--font-serif); }
.t-cjk           { font-family: var(--font-cjk); letter-spacing: 0.1em; }
.t-mono          { font-family: var(--font-mono); }
.t-eyebrow {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-gold-darker);
  font-weight: 500;
}
.t-eyebrow-muted {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-text-muted);
  font-weight: 500;
}
.t-muted   { color: var(--c-text-muted); }
.t-light   { color: var(--c-text-light); }

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.25; font-weight: 500; }
.t-display {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  font-weight: 500;
  color: var(--c-navy);
  letter-spacing: -0.01em;
}
.t-h1 { font-size: 2rem; line-height: 1.2; font-weight: 500; }
.t-h2 { font-size: 1.5rem; font-weight: 500; }
.t-h3 { font-size: 1.15rem; font-weight: 500; }
.t-h4 { font-size: 1rem; font-weight: 500; }

.t-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: var(--max-width-prose);
  margin: var(--s-4) auto 0;
}

/* ─── layout primitives ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--narrow { max-width: 720px; }

.section { padding: var(--s-8) 0; }
.section--alt { background: var(--c-white); }
.section--cream { background: var(--c-cream); }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

.row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.row--center { justify-content: center; align-items: center; }
.row--between { justify-content: space-between; align-items: center; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ─── card primitive ────────────────────────────────────────────────── */

.card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-soft);
  transition: box-shadow 160ms ease;
}
a.card:hover,
button.card:hover {
  box-shadow: var(--shadow-md);
}
.card--soft       { background: var(--c-cream-soft); border: 1px solid var(--c-border); }
.card--navy       { background: var(--c-navy); color: var(--c-text-on-navy); border-color: transparent; }
.card--bordered   { box-shadow: none; border: 1px solid var(--c-border); }
.card--padded-lg  { padding: var(--s-6); }
/* Outcome-state variants for the match-gate verdict cards.
   `card--success` (above-50 gate) uses the sage palette; `card--warning`
   (below-50 gate) uses the muted-warm pink palette. Both keep the same
   shape as the base .card — only the left border + background tint
   differ, so layout stays consistent across verdict states. Added
   2026-05-11 as part of the views/match_gate.rs production UI port. */
.card--success {
  background: var(--c-sage-bg);
  border: 1px solid var(--c-sage-text);
  border-left: 4px solid var(--c-sage-text);
}
.card--warning {
  background: var(--c-pink-bg);
  border: 1px solid var(--c-pink-text);
  border-left: 4px solid var(--c-pink-text);
}

@media (prefers-contrast: more) {
  .card--success { border-left-width: 6px; }
  .card--warning { border-left-width: 6px; }
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.card__head a { color: var(--c-text-muted); font-size: 0.88rem; }
.card__head a:hover { color: var(--c-gold-darker); }

/* ─── button primitive ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--shadow-sm);
  transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  white-space: nowrap;
  letter-spacing: normal;
}
.btn:hover {
  box-shadow: var(--shadow-md);
}
.btn:active {
  box-shadow: var(--shadow-sm);
}
.btn--primary {
  background: var(--c-coral);
  color: #fff;
  border-color: transparent;
}
.btn--primary:hover { background: var(--c-coral-dark); color: #fff; }
.btn--secondary {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--secondary:hover { background: var(--c-cream-soft); }
.btn--ghost {
  background: transparent;
  color: var(--c-navy);
  box-shadow: none;
  border-color: transparent;
}
.btn--ghost:hover { 
  background: var(--c-cream-soft); 
  transform: none; 
  box-shadow: none; 
}
.btn--block { width: 100%; }
.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.btn--icon-only { padding: 0.5rem; }

/* ─── inline SVG icon classes (consumed by views/icons.rs helpers) ──── */
/*
   The SVG helpers in views/icons.rs already set width/height: 1em via
   inline style (so SVGs match the surrounding font-size). These classes
   layer ON TOP to control spacing + colour context. The class is
   optional — passing "" still renders a working icon.

   .inline-icon-sm — for icons paired with inline text (e.g. "✓ CV
   draft"). Adds a small trailing margin so the icon doesn't kiss the
   following text. Used in OMOIKANE-105 Phase 2 emoji sweep.
*/
.inline-icon-sm  { margin-right: 0.25em; vertical-align: -0.125em; }

/* ─── chip / tag primitive ──────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--c-border-soft);
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.chip--match-strong { background: var(--c-match-strong-bg); color: var(--c-match-strong-text); }
.chip--match-mid    { background: var(--c-match-mid-bg);    color: var(--c-match-mid-text); }
.chip--match-weak   { background: var(--c-match-weak-bg);   color: var(--c-match-weak-text); }
.chip--blue         { background: var(--c-blue-bg);    color: var(--c-blue-text); }
.chip--sage         { background: var(--c-sage-bg);    color: var(--c-sage-text); }
.chip--pink         { background: var(--c-pink-bg);    color: var(--c-pink-text); }
.chip--purple       { background: var(--c-purple-bg);  color: var(--c-purple-text); }
/* OMOIKANE-434: cream chip — was a near-white pill; now transparent
 * with cream-text accent + soft border so the chip reads without
 * the bright-pill silhouette. */
.chip--cream        { background: transparent; color: var(--c-cream-text); border: 1px solid var(--c-cream-text); }
.chip--neutral      { background: var(--c-border-soft); color: var(--c-text-muted); }
.chip--master       { background: #f0d8a0; color: #6f5d2f; }
.chip--cv           { background: #c8e4cc; color: #3a5e44; }
.chip--letter       { background: #d8d0e8; color: #5a4a78; }
.chip--snippet      { background: #e0e0e0; color: #555; }

/* Safety-flagged badge — used inline next to draft kind labels in the
   /library list + on each draft page when the safety chain rejected
   the output. Pink/warning theme matches the .chip--pink palette but
   stays a smaller inline pill so it doesn't dominate the row. */
.flag-pill {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--c-pink-bg);
  color: var(--c-pink-text);
  border: 1px solid var(--c-pink-text);
  vertical-align: middle;
  white-space: nowrap;
}

/* Inline language switcher — top-right of the public shell + bottom-left
   of the sidebar. Without explicit spacing the EN / NL / EL entries
   render concatenated ("ENNLEL"). Use flex+gap so the layout works for
   any number of locale entries without padding tweaks per item. */
.lang-switch-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
}
.lang-switch-inline > * { display: inline-block; }
.lang-switch-inline > a {
  color: var(--c-text-muted);
  text-decoration: none;
}
.lang-switch-inline > a:hover {
  color: var(--c-text);
}
.lang-switch-inline > .is-active {
  font-weight: 600;
  color: var(--c-text);
}
/* Dark-sidebar variant: switcher sits on navy → muted is too dim for
   contrast. The .side__foot wrapper already inherits a lighter colour;
   just unset the muted-grey override so links pick up the parent. */
.lang-switch-inline--side > a {
  color: var(--c-text-on-navy-muted);
}
.lang-switch-inline--side > a:hover {
  color: var(--c-white);
}
.lang-switch-inline--side > .is-active {
  color: var(--c-white);
}

/* ─── KPI card (dashboard) — editorial spec-sheet treatment ──────────
   2026-05-16 anti-slop refresh. Was: generic SaaS rounded-card 4-up.
   Now: cream paper-stock tile with serif numeral (Cormorant) and small
   ornamental italic index in the top-right corner. The accent tile (Applied)
   uses the navy stock as a "filled cover" tile to anchor the row, matching
   the editorial-shrine palette discipline (one strong color block per row). */

.kpi {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border-soft);
}
.kpi__label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  font-weight: 500;
}
.kpi__num {
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--c-text);
  margin-top: var(--s-2);
  line-height: 1;
}
.kpi__sub {
  font-size: 0.8rem;
  color: var(--c-text-light);
  margin-top: var(--s-2);
}
.kpi--accent {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-color: transparent;
}
.kpi--accent .kpi__label { color: var(--c-gold-soft); }
.kpi--accent .kpi__num   { color: var(--c-text-on-navy); }
.kpi--accent .kpi__sub   { color: var(--c-text-on-navy-muted); }

/* ─── feature tile (landing) ────────────────────────────────────────── */

.feature {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-sm);
}
.feature__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: var(--c-cream);
  font-size: 1rem;
}
.feature__icon--gold { background: var(--c-gold); color: var(--c-white); }
.feature__title { font-weight: 600; color: var(--c-text); margin-bottom: 0.2rem; font-size: 0.97rem; }
.feature__desc  { color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.45; }

.feature--wide {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-color: transparent;
  grid-column: 1 / -1;
}
.feature--wide .feature__title { color: var(--c-text-on-navy); }
.feature--wide .feature__desc  { color: var(--c-text-on-navy-muted); }
.feature--wide .feature__icon  { background: var(--c-gold); color: var(--c-white); }

/* ─── trust card (landing) ──────────────────────────────────────────── */

.trust {
  background: var(--c-white);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-gold);
}
.trust__title { font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-1); }
.trust__desc  { color: var(--c-text-muted); font-size: 0.85rem; line-height: 1.45; }

/* ─── sign-in card (landing) ────────────────────────────────────────── */

.signin {
  max-width: 380px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-md);
}
.signin__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: var(--s-2);
}
.signin__sub {
  color: var(--c-text-muted);
  font-size: 0.88rem;
  margin-bottom: var(--s-4);
}
.signin__or {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-light);
  font-size: 0.78rem;
  text-align: center;
  margin: var(--s-3) 0;
}
.signin__or::before, .signin__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.signin .input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  background: var(--c-white);
  color: var(--c-text);
  margin-bottom: var(--s-2);
}
.signin .input:focus { outline: none; border-color: var(--c-navy); }
.signin__forgot {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--c-gold-darker);
  margin-bottom: var(--s-3);
}
.signin__legal {
  text-align: center;
  font-size: 0.78rem;
  color: var(--c-text-light);
  margin-top: var(--s-3);
}

/* ─── header / footer ───────────────────────────────────────────────── */

.site-header {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  color: var(--c-navy);
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.site-header .brand img { width: 28px; height: 28px; border-radius: var(--r-pill); }
.site-header nav { display: flex; align-items: center; gap: var(--s-5); }
.site-header nav a {
  color: var(--c-text-muted);
  font-size: 0.9rem;
}
.site-header nav a:hover { color: var(--c-text); }

.site-footer {
  background: var(--c-navy);
  color: var(--c-text-on-navy-muted);
  padding: var(--s-5) 0;
  font-size: 0.85rem;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-serif);
  color: var(--c-cream);
}
.site-footer .footer-brand img { width: 24px; height: 24px; border-radius: var(--r-pill); opacity: 0.9; }
.site-footer .footer-links { display: flex; gap: var(--s-4); }
.site-footer .footer-links a:hover { color: var(--c-cream); }

/* ─── landing-specific ──────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: var(--s-9) 0 var(--s-7);
}
.hero__logo {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-border);
  background: var(--c-white);
  padding: 4px;
}
.hero__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-pill); }
.hero__brand {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--c-navy);
  letter-spacing: -0.01em;
  font-weight: 500;
  line-height: 1;
}
.hero__kanji {
  font-family: var(--font-cjk);
  color: var(--c-text-muted);
  letter-spacing: 0.4em;
  font-size: 1.05rem;
  margin: var(--s-2) 0 var(--s-1);
}
.hero__tagline {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--c-gold-darker);
  font-weight: 500;
  margin-bottom: var(--s-5);
}
.hero__line {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--c-text);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}
.hero__sub {
  color: var(--c-text-muted);
  font-size: 1.02rem;
  max-width: 560px;
  margin: var(--s-3) auto 0;
  line-height: 1.55;
}
.hero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ─── content (markdown) prose ──────────────────────────────────────── */

.prose {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: var(--s-7) 0;
}
.prose h1 { font-family: var(--font-serif); font-size: 2.2rem; color: var(--c-navy); margin-bottom: var(--s-4); line-height: 1.2; }
.prose h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--c-navy); margin: var(--s-6) 0 var(--s-3); }
.prose h3 { font-size: 1.1rem; color: var(--c-navy); margin: var(--s-5) 0 var(--s-2); }
.prose p  { margin: 0 0 var(--s-4); }
.prose a  { color: var(--c-gold-darker); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--c-navy); }
.prose ul, .prose ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose blockquote {
  border-left: 3px solid var(--c-gold);
  padding: var(--s-2) var(--s-4);
  color: var(--c-text-muted);
  margin: var(--s-4) 0;
  font-style: italic;
}
.prose hr { border: none; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-cream-soft); padding: 0.1em 0.4em; border-radius: var(--r-sm); border: 1px solid var(--c-border-soft); }

/* ─── tables (used in dashboard mockups) ────────────────────────────── */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: 1rem;
}
.table th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
.table td {
  border-top: 1px solid var(--c-border-soft);
  color: var(--c-text);
  font-weight: 400;
}
.table tr:first-child td { border-top: none; }

/* ─── lang switcher ─────────────────────────────────────────────────── */

.lang-switcher {
  display: inline-flex;
  gap: var(--s-2);
  font-size: 0.78rem;
  color: var(--c-text-light);
}
.lang-switcher a { color: var(--c-text-light); }
.lang-switcher a:hover { color: var(--c-cream); }
.lang-switcher .lang-current { color: var(--c-cream); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL — post-login mockup primitives.
   These extend the public-site design system. Same tokens, more components.
   When the daemon Rust+axum app is built (OMOIKANE-14), these become
   the basis for the askama / maud templates.
   ═══════════════════════════════════════════════════════════════════════ */

/* app shell layout */
.app {
  display: grid;
  grid-template-columns: 248px 1fr; /* OMOIKANE-1293 — template rail width */
  min-height: 100vh;
}
/* OMOIKANE-1293 (2026-07-15) — the "two white lines at the sidebar/footer
   junction" bug. `body > * { position:relative; z-index:1 }` (OMOIKANE-1097)
   puts .app AND every footer bar at the SAME z:1, so the footer (later in the
   DOM) painted OVER the fixed rail — its 1px `border-top` dividers showed as
   two light horizontal lines crossing the navy rail near the page bottom.
   Lift .app one level above the footer so the fixed rail covers the footer's
   left 248px. Desktop only: on mobile the sidebar is an off-canvas drawer (no
   persistent fixed rail overlapping the footer), and a stacking change there
   could disturb the burger drawer/backdrop (z 100–102). */
@media (min-width: 768px) {
  .app, .app--narrow-side, .app--two-side { z-index: 2; }
}
.app--narrow-side { grid-template-columns: 240px 1fr; }
.app--two-side    { grid-template-columns: 240px 240px 1fr; }

@media (max-width: 900px) {
  .app, .app--narrow-side, .app--two-side { grid-template-columns: 1fr; }
}

/* OMOIKANE-1293 — section sidebar cloned from the Calm design template
   (/tmp/20260707_Omoikane Dashboard.html). A dark navy #1a2530 rail with a
   cream serif wordmark + collapse chevron, sage (#9db3a6) nav icons,
   muted-sage small-caps group headers each led by their own glyph, and a
   soft filled slate pill (#303a44) for the active item. The home launcher
   (dv2 cosmic shell) hides its own sidebar by default (homeSidebar:false);
   THIS rail is the chrome for the section views. Colours sampled pixel-exact
   from the template screenshots. */
/* OMOIKANE-1293 — the navy rail is now the full-height COLUMN (align-self:stretch
   fills the grid row to the footer, killing the cream gap the user reported), and
   the NAV inside it (.side__scroll) is what's pinned to the viewport. Previously
   the rail itself was position:sticky, but the footer lives OUTSIDE .app, so the
   grid-item sticky ran out of grid-area and scrolled the rail up by the footer's
   height — leaving the rail "stopping" mid-page with cream below it. */
.side {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  /* OMOIKANE-1293 (2026-07-15) — NO border here. The visible fixed rail
     (.side__scroll) carries the single divider border-right; a border on the
     grid column too rendered as a SECOND parallel line at the rail/main edge
     (the reported "two white lines"). */
  align-self: stretch;
}
/* The pinned inner rail. It's position:FIXED (not sticky): the site footer is a
   body-level sibling AFTER .app, so the page is taller than .app and ANY sticky
   inside .app runs out by the footer's height near the bottom (the rail
   "stopped" and the footer took its place — the reported bug). Fixed is
   viewport-relative, immune to that. `.side` stays in the grid so `.main`
   doesn't reflow into column 1; the fixed rail overlays the reserved 248px
   column and carries the navy + border. */
.side__scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 248px;
  height: 100vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3) var(--s-4);
  background: var(--c-navy);
  border-right: 1px solid var(--c-border-on-navy);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* OMOIKANE-1293 (2026-07-15) — hide the nav scrollbar. Its light thumb sat
     right beside the border-right and read as a SECOND parallel white line
     when the nav overflowed a short window (the intermittent "two white lines"
     bug). The rail still scrolls via wheel / trackpad / touch. */
  scrollbar-width: none;
}
.side__scroll::-webkit-scrollbar { display: none; }
/* collapsed icon-rail — fixed rail width matches the 76px grid column */
html.nav-collapsed .side__scroll { width: 76px; }
.side__brand {
  font-family: var(--font-serif);
  /* OMOIKANE-1293 — match the Calm template wordmark: Instrument Serif
     24px at weight 400 (the face is 400-only; 500 synthesized faux-bold). */
  font-weight: 400;
  font-size: 24px; /* OMOIKANE-1293 — match the template wordmark size (Instrument Serif 24px, source-verified) */
  text-transform: none;
  color: var(--c-cream);
  padding: var(--s-1) var(--s-2) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  letter-spacing: 0;
}
.side__brand img { display: none; } /* Drop the soft rounded image */
.side__brand .cjk { display: none; } /* Drop the decorative kanji for starkness */
/* Collapse chevron — toggles `html.nav-collapsed` (persisted to
   localStorage 'omk_sidebar_collapsed_v1'); replicates the template's
   sidebarCollapsed 248px⇄76px icon-rail automation. */
.side__collapse {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border-on-navy);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-on-navy-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.side__collapse:hover { background: rgba(247, 249, 249, 0.06); color: var(--c-cream); }
.side__collapse svg { width: 16px; height: 16px; transition: transform 160ms ease; }

/* ── OMOIKANE-1486 — Omoikane Status row ─────────────────────────────────
   A tiny line under the wordmark: dot, label, state-in-words.

   Three hard constraints, all from Article XXXVI / WCAG:
   - min-height 44px (2.5.8). The rest of this rail is ~34px and does not
     comply; do not copy that here.
   - NO animation on the dot. Not a pulse, not a fade, not a keyframe.
     "No flashing badges" is absolute, and a status light that moves is a
     status light people learn to ignore.
   - Colour is never the sole channel (1.4.1). The dot is decorative; the
     state is also a visible word, also a screen-reader sentence, and also a
     ring shape so it survives greyscale and monochrome. */
/* OMOIKANE-1494: the label and the state are stacked, not side by side.
   Measured 2026-07-27 in the real font: the rail content box is 199px, so
   on one line the two strings shared a 167px budget. "Omoikane status" +
   "Minor delays" needed 178px and silently ellipsised, and EVERY Dutch and
   Greek combination overflowed. Greek has no natural rendering of "minor
   delays" short enough to share a line, so this is structural rather than a
   copy problem: row 2 gets the full 179px on its own. */
.side__status {
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: 1px;
  min-height: 44px;
  margin: calc(-1 * var(--s-2)) 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-on-navy-muted);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.side__status:hover { background: rgba(247, 249, 249, 0.06); color: var(--c-cream); }
.side__status:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.side__status-dot {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-text-on-navy-muted);
}
.side__status-label {
  grid-column: 2; grid-row: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Deliberately wrappable. The state word is the only non-colour carrier of
   the signal (WCAG 1.4.1), so a longer translation must wrap to a third
   line rather than be clipped away. */
.side__status-state { grid-column: 2; grid-row: 2; font-weight: 600; }

.side__status--ok   .side__status-dot   { background: var(--c-status-ok-on-navy); }
.side__status--ok   .side__status-state { color: var(--c-status-ok-on-navy); }
/* Ring thickness increases with severity, so the three states differ in
   SHAPE as well as hue and remain distinguishable in greyscale. */
.side__status--watch .side__status-dot {
  background: var(--c-status-warn-on-navy);
  box-shadow: 0 0 0 2px rgba(224, 179, 82, 0.28);
}
.side__status--watch .side__status-state { color: var(--c-status-warn-on-navy); }
.side__status--down .side__status-dot {
  background: var(--c-status-down-on-navy);
  box-shadow: 0 0 0 2px rgba(239, 143, 122, 0.32), 0 0 0 3px rgba(247, 249, 249, 0.22);
}
.side__status--down .side__status-state { color: var(--c-status-down-on-navy); }
.side__status--unknown .side__status-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c-text-on-navy-muted);
}
.side__status--unknown .side__status-state { color: var(--c-text-on-navy-muted); }


/* OMOIKANE-1293 — title-case, icon-led group header with a trailing collapse
   chevron (clone of the template's My Office / Coaching / Application rows). */
.side__section {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.86rem;
  letter-spacing: 0.005em;
  color: var(--c-text-on-navy-muted);
  padding: var(--s-4) var(--s-3) var(--s-2);
  font-weight: 600;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.side__section:hover { color: var(--c-cream); }
.side__section-ico { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }
.side__section-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.side__section-chev { flex: 0 0 auto; opacity: 0.7; transition: transform 160ms ease; }
.side__group.is-collapsed .side__section-chev { transform: rotate(-90deg); }
.side__group.is-collapsed .side__nav { display: none; }

.side__group { display: flex; flex-direction: column; }
.side__nav { list-style: none; padding: 0; margin: 0; }
.side__nav li a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  color: var(--c-text-on-navy-muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.side__ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-text-on-navy-muted); }
.side__label { white-space: nowrap; overflow: hidden; }
.side__nav li a:hover {
  background: rgba(247, 249, 249, 0.05);
  color: var(--c-cream);
}
.side__nav li a:hover .side__ico { color: var(--c-cream); }
.side__nav li a.is-active {
  background: #303a44;
  color: var(--c-cream);
  font-weight: 600;
}
.side__nav li a.is-active .side__ico { color: var(--c-cream); }
.side__nav li a .ico { display: none; } /* legacy dingbat slot — unused */

/* OMOIKANE-1293 — the template indents the items INSIDE a labelled group
   (Profile/CV/… under "My Office") ~30px and runs a faint vertical tree-rail
   down the group; header-less top-level items (Dashboard / Calendar / Network)
   stay flush. The indent also insets the active pill so it spans the item, not
   the full column — matching the template. Live previously rendered every item
   flush-left with a full-width active pill. */
.side__group:has(.side__section) .side__nav {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid rgba(247, 249, 249, 0.09);
}

/* Bottom foot — italic-serif quote card pinned to the sidebar base,
   matching the template's "Not your worth, just your fit." card. */
.side__foot {
  margin-top: auto;
  padding: var(--s-3) var(--s-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.side__quote {
  background: #2f3d4a;
  border-radius: 12px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-cream);
  line-height: 1.4;
}
/* OMOIKANE-1293 — user-profile pill at the sidebar foot (template clone). */
.side__userrow { display: flex; align-items: center; gap: var(--s-1); }
.side__user {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text-on-navy);
  transition: background 140ms ease;
}
.side__user:hover { background: rgba(247, 249, 249, 0.06); }
/* OMOIKANE-1293 — sign-out was an unlabelled 34px icon (invisible unless you
   knew it was there). Make it a full-width labelled row; collapse back to an
   icon-only button in the narrow icon-rail (still present, not hidden). */
.side__signout {
  flex: 0 0 auto;
  width: 100%;
  height: 34px;
  padding: 0 var(--s-2);
  gap: 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--c-text-on-navy-muted);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
.side__signout:hover { background: rgba(247, 249, 249, 0.06); color: var(--c-cream); }
.side__signout svg { width: 18px; height: 18px; flex: none; }
.side__signout-label { white-space: nowrap; }
html.nav-collapsed .side__signout { width: 34px; padding: 0; justify-content: center; }
html.nav-collapsed .side__signout-label { display: none; }
.side__user-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(247, 249, 249, 0.10);
  color: var(--c-text-on-navy-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.side__user-avatar svg { width: 20px; height: 20px; }
/* OMOIKANE-1293 — once /api/me/chrome fills the real identity, the avatar
   shows the user's initials on the accent (template "GZ" pill), not the
   placeholder person-glyph. (`--c-gold` is the azure accent post-redesign.) */
.side__user-avatar--initials { background: var(--c-gold); color: var(--c-cream); font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; }
.side__user-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.side__user-name { font-size: 0.9rem; font-weight: 600; color: var(--c-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__user-plan { font-size: 0.76rem; color: var(--c-text-on-navy-muted); white-space: nowrap; overflow: hidden; }
.side__user-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-text-on-navy-muted); }
html.nav-collapsed .side__user-meta,
html.nav-collapsed .side__user-chev { display: none; }
html.nav-collapsed .side__user { justify-content: center; }

/* OMOIKANE-1293 — collapsed 76px icon-rail (html.nav-collapsed). The
   collapse chevron toggles this; a head bootstrap restores it pre-paint. */
html.nav-collapsed .app { grid-template-columns: 76px 1fr; }
html.nav-collapsed .side__scroll { padding-left: var(--s-2); padding-right: var(--s-2); }
html.nav-collapsed .side__label,
html.nav-collapsed .side__section-label,
html.nav-collapsed .side__section-chev,
html.nav-collapsed .side__brand-wordmark,
html.nav-collapsed .side__quote,
html.nav-collapsed .side__lang { display: none; }
html.nav-collapsed .side__brand { justify-content: center; padding-left: 0; padding-right: 0; }
html.nav-collapsed .side__section { justify-content: center; padding-left: 0; padding-right: 0; }
html.nav-collapsed .side__nav li a { justify-content: center; padding-left: 0; padding-right: 0; }
html.nav-collapsed .side__status-label,
html.nav-collapsed .side__status-state { display: none; }
/* Collapse the text column too, or the empty 1fr track keeps its share of
   the row and the lone dot sits off-centre. */
html.nav-collapsed .side__status {
  grid-template-columns: 8px; justify-content: center;
  padding-left: 0; padding-right: 0;
}
html.nav-collapsed .side__collapse svg { transform: rotate(180deg); }

/* OMOIKANE-1293 — section app-bar header, cloned from the template. A light
   bar (matching the content ground) with a back-arrow circle, the section's
   icon in a rounded tile, a serif title + muted subtitle, and a coral
   "Paste a job" CTA pinned right. Colours pixel-sampled from the template. */
.app-bar {
  display: flex;
  align-items: center;
  /* OMOIKANE-1293 — match the template section header (secHeaderStyle):
     padding 24px 36px, gap 18px. Live was 16px/12px, rendering a ~14px-shorter
     bar. (Template also stickies the header, but the live layout's scroll
     container breaks position:sticky without layout surgery, and the acceptance
     screenshots are at the top viewport where sticky is invisible — so height +
     spacing is the parity-relevant fix.) */
  gap: 18px;
  padding: var(--s-5) 36px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-cream);
}
.app-bar__back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  /* OMOIKANE-1293 — template back button is a rounded-SQUARE (matches the icon
     tile), not a circle. */
  border-radius: 12px;
  background: #fff;
  color: #525a63;
  text-decoration: none;
  transition: background 140ms ease;
}
.app-bar__back:hover { background: var(--c-cream-soft); }
.app-bar__back svg { width: 18px; height: 18px; }
.app-bar__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e9edeb;
  color: #819e8e;
}
.app-bar__icon svg { width: 22px; height: 22px; }
.app-bar__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-bar__title {
  font-family: var(--font-serif);
  /* OMOIKANE-1293 — match the Calm template app-bar title exactly:
     Instrument Serif 25px, UPRIGHT, weight 400. (Instrument Serif is a
     400-only face; 500 synthesizes faux-bold, and the editorial content-h1
     rule above was forcing italic — both now corrected.) */
  font-size: 25px;
  font-weight: 400;
  font-style: normal;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.15;
}
.app-bar__sub { font-size: 0.85rem; color: var(--c-text-muted); }
.app-bar__cta {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-2) var(--s-4);
  border-radius: 10px;
  background: var(--c-coral, #d96c5b);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 140ms ease;
}
.app-bar__cta-plus { font-size: 1.05rem; font-weight: 500; line-height: 0; }
.app-bar__cta:hover { background: #b34a38; }
@media (max-width: 640px) {
  .app-bar { padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
  .app-bar__cta { font-size: 0.82rem; padding: var(--s-2) var(--s-3); }
}
/* When the shell injects an app-bar, the bar spans the full content column
   (main padding removed) and the body renders in a padded inner wrapper. */
.main:has(> .app-bar) { padding: 0; }
.main__inner { padding: var(--s-6); }
@media (max-width: 640px) { .main__inner { padding: var(--s-4); } }
/* OMOIKANE-1293 — a page body that opens with a `.wrap` (its own padding) sits
   inside `.main__inner` (which already pads the content column). Zero the
   wrap's top padding so the first card sits right under the app-bar header —
   the template has no empty band there. */
.main__inner > .wrap { padding-top: 0; }
/* OMOIKANE-1672 — on a phone the wrap's --s-7 sides stacked on the inner's
   --s-4: 64px gutters left /profile a 262px column on a 390px screen. */
@media (max-width: 640px) { .main__inner > .wrap { padding-left: 0; padding-right: 0; } }

/* sidebar — navy variant (calm: navy-soft highlights + quiet gold accent) */
.side--navy {
  background: var(--c-navy);
  border-right: 1px solid var(--c-border-on-navy);
}
.side--navy .side__brand { color: var(--c-cream); }
.side--navy .side__section { color: var(--c-text-on-navy-muted); border-bottom: none; }
.side--navy .side__nav li a { color: var(--c-text-on-navy); }
.side--navy .side__nav li a:hover {
  background: var(--c-navy-soft);
  color: var(--c-cream);
}
.side--navy .side__nav li a.is-active {
  background: var(--c-navy-soft);
  color: var(--c-cream);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-gold-soft);
}
.side--navy .side__foot { color: var(--c-cream); }

/* OMOIKANE-552 — mobile burger menu (2026-05-23).
 *
 * Default: button hidden, backdrop hidden, sidebar renders inline
 * via the .app grid (desktop UX untouched).
 *
 * <768px: sidebar position:fixed off-canvas (translateX(-100%));
 * burger button becomes a fixed top-left affordance; clicking sets
 * <html data-nav-open="true"> which slides the sidebar in and shows
 * the backdrop. Backdrop click / Escape / link-inside-nav click all
 * close the menu (JS in page_shells.rs sidebar_shell). */
.nav-burger { display: none; }
.nav-backdrop { display: none; }
@media (max-width: 767px) {
  .nav-burger {
    position: fixed;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 102;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: var(--c-navy);
    color: var(--c-cream);
    border: 1px solid var(--c-border-on-navy, rgba(255,255,255,0.16));
    border-radius: var(--r-md, 0.4rem);
    box-shadow: var(--shadow-md);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-burger:focus-visible {
    outline: 2px solid var(--c-gold, #B8965A);
    outline-offset: 2px;
  }
  .app, .app--narrow-side, .app--two-side { grid-template-columns: 1fr; }
  .side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px);
    z-index: 101;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
  }
  /* Mobile: the whole .side IS the fixed transform-slid overlay, so the inner
     rail is just its scrolling content — not a second fixed 248px column. */
  .side__scroll {
    position: static;
    width: auto;
    height: auto;
    min-height: 100%;
    z-index: auto;
    background: transparent;
    border-right: 0;
    overflow-y: visible;
  }
  html[data-nav-open="true"] .side { transform: translateX(0); }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.45);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease-out, visibility 220ms ease-out;
  }
  .nav-backdrop[data-nav-open="true"] {
    opacity: 1;
    visibility: visible;
  }
  .main { padding-top: calc(var(--s-2) + 3.2rem); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .side, .nav-backdrop { transition: none; }
}

/* OMOIKANE-1293 responsive audit (2026-07-15) — WCAG 2.2 AAA target size
   (SC 2.5.5, 44×44 CSS px) on TOUCH viewports. Desktop keeps its denser
   mouse-friendly sizing; on phones/tablets the persistent navigation
   controls grow to a comfortable tap size. Skip-links (keyboard-only) and
   inline prose links are exempt per the spec and left alone. */
@media (max-width: 767px) {
  .side__nav li a { min-height: 44px; }
  .side__collapse { width: 44px; height: 44px; }
  /* Coaching v2 tier navigation (near-unstyled inline anchors → give them a
     real tap box). main.css is loaded on those pages. */
  .t-tier-link,
  .t-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* main pane */
.main {
  padding: var(--s-6);
  overflow: auto;
}
.main--max  { max-width: 100%; }

/* page header (greeting + actions) */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
/* Editorial-aesthetic page heading: Cormorant Garamond serif, italic
   display weight, larger size — propagates the /workflow/posting/new
   look (operator's gold standard) to every dashboard/list/profile
   page that uses page_head(). No vermilion accent here — that stays
   reserved for state-change moments (button hover, match-gate verdict)
   so it remains meaningful when it does appear. */
.page-head__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0;
}
.page-head__sub {
  font-family: var(--font-sans);
  color: var(--c-text-muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  max-width: var(--max-width-prose);
}
.page-head__sub .accent { color: var(--c-vermilion); }
.page-head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* breadcrumb */
.crumb {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}
.crumb a { color: var(--c-text-muted); }
.crumb a:hover { color: var(--c-text); }
.crumb__sep { margin: 0 var(--s-2); color: var(--c-text-light); }

/* tabs (used in application detail, library) */
.tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-4);
}
.tabs a {
  display: inline-block;
  padding: var(--s-2) 0;
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.92rem;
}
.tabs a.is-active { color: var(--c-text); border-bottom-color: var(--c-navy); font-weight: 500; }
.tabs a:hover { color: var(--c-text); }

/* pipeline (right-side dashboard panel) */
.pipeline { list-style: none; margin: 0; padding: 0; }
.pipeline li {
  display: flex;
  justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-soft);
  align-items: center;
}
.pipeline li:last-child { border-bottom: none; }
.pipeline__label { display: flex; align-items: center; gap: var(--s-2); font-size: 0.92rem; }
.pipeline__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c-gold); }
.pipeline li.is-closed .pipeline__label { color: var(--c-text-light); }
.pipeline__count { font-weight: 500; color: var(--c-text); }
.pipeline li.is-closed .pipeline__count { color: var(--c-text-light); font-weight: 400; }

/* today/this-week list */
.events { list-style: none; margin: 0; padding: 0; }
.events li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  font-size: 0.9rem;
  border-left: 3px solid var(--c-gold);
}
.events li.tone-pink   { background: var(--c-pink-bg);   border-left-color: var(--c-pink-text); }
.events li.tone-blue   { background: var(--c-blue-bg);   border-left-color: var(--c-blue-text); }
.events li.tone-sage   { background: var(--c-sage-bg);   border-left-color: var(--c-sage-text); }
/* OMOIKANE-434: timeline cream event — transparent + accent left
 * border, no more bright pill silhouette. */
.events li.tone-cream  { background: transparent; border-left: 3px solid var(--c-cream-text); }
.events__when { font-weight: 500; color: var(--c-text); flex-shrink: 0; min-width: 100px; }
.events li.tone-pink .events__when { color: var(--c-pink-text); }
.events li.tone-blue .events__when { color: var(--c-blue-text); }
.events li.tone-sage .events__when { color: var(--c-sage-text); }

/* match donut (just a circle with %) */
.donut {
  width: 90px; height: 90px;
  border-radius: 999px;
  background: var(--c-match-strong-bg);
  color: var(--c-match-strong-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  flex-shrink: 0;
}
.donut__num   { font-size: 1.5rem; line-height: 1; }
.donut__label { font-size: 0.7rem; margin-top: 0.2rem; text-align: center; padding: 0 0.4rem; line-height: 1.2; }
.donut--mid  { background: var(--c-match-mid-bg);  color: var(--c-match-mid-text); }
.donut--weak { background: var(--c-match-weak-bg); color: var(--c-match-weak-text); }

/* match-criteria list (bullet + label + right-side outcome) */
.criteria { list-style: none; margin: 0; padding: 0; }
.criteria li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-2) 0;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--c-border-soft);
}
.criteria li:last-child { border-bottom: none; }
.criteria__label { display: flex; align-items: center; gap: var(--s-2); }
.criteria__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c-text-light); }
.criteria__dot--match   { background: var(--c-match-strong-text); }
.criteria__dot--partial { background: var(--c-match-mid-text); }
.criteria__dot--gap     { background: var(--c-match-weak-text); }
.criteria__outcome { color: var(--c-text-muted); font-size: 0.85rem; }

/* step wizard (used in match gate, email send) */
.steps {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border-soft);
}
.step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.92rem;
  color: var(--c-text-muted);
  flex: 0 0 auto;
}
.step + .step::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
  width: 60px;
  display: inline-block;
}
.step__num {
  width: 26px; height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-border);
  color: var(--c-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.step.is-done    .step__num { background: var(--c-sage-bg); color: var(--c-sage-text); }
.step.is-active  .step__num { background: var(--c-navy); color: var(--c-cream); }
.step.is-active           { color: var(--c-text); font-weight: 500; }

/* ND-friendly callouts (used heavily in screenshots 10, 11, 12) */
.callout {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  align-items: flex-start;
  line-height: 1.45;
}
.callout__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1; }
.callout__title {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
/* OMOIKANE-434: callouts no longer use pale `--c-*-bg` token fills
 * (operator rule: "NO white pills anywhere"). Replaced with
 * transparent bg + left-border emphasis in the variant's accent color
 * + accent text. Reads as a tinted callout without the bright-pill
 * silhouette. Each variant keeps its semantic accent so the
 * reduce/decide/steps/mask/prep/warn/insight set is still
 * distinguishable. */
.callout--reduce  { background: transparent; color: var(--c-cream-text); border-left: 3px solid var(--c-gold-soft); }
.callout--decide  { background: transparent; color: var(--c-cream-text); border-left: 3px solid var(--c-gold); }
.callout--steps   { background: transparent; color: var(--c-sage-text); border-left: 3px solid var(--c-sage-text); }
.callout--mask    { background: transparent; color: var(--c-purple-text); border-left: 3px solid var(--c-purple-text); }
.callout--prep    { background: transparent; color: var(--c-blue-text); border-left: 3px solid var(--c-blue-text); }
.callout--warn    { background: transparent; color: var(--c-text); border-left: 3px solid var(--c-vermilion); }
.callout--insight { background: transparent; color: var(--c-text); border-left: 3px solid var(--c-gold); }

/* feeling check (used in 10) */
.feeling { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.feeling button, .feeling .btn {
  /* OMOIKANE-434: mood-input pill — transparent inactive, vermilion-
   * tint when active. No more cream-bg "white pill" silhouette. */
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-cream-text);
  border: 1px solid var(--c-cream-text);
  font-size: 0.88rem;
  cursor: pointer;
}
.feeling .is-active { background: var(--c-vermilion); color: var(--c-cream); border-color: var(--c-vermilion); }

/* checklist (used in 10) */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-border-soft);
}
.checklist li:last-child { border-bottom: none; }
.checklist__box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--c-text);
}
.checklist li.is-done .checklist__box { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.checklist li.is-done .checklist__label { text-decoration: line-through; color: var(--c-text-muted); }
.checklist li.is-active { background: var(--c-cream-soft); border-radius: var(--r-md); border-bottom-color: transparent; }
.checklist__time { margin-left: auto; font-size: 0.78rem; color: var(--c-text-muted); }
.checklist__done { margin-left: auto; font-size: 0.78rem; color: var(--c-sage-text); font-weight: 500; }

/* timeline (used in 02 application detail) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 80px 16px 1fr;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 0.9rem;
  align-items: center;
}
.timeline__when { color: var(--c-text-muted); font-size: 0.85rem; }
.timeline__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c-text-light); justify-self: center; }
.timeline__dot--blue { background: var(--c-blue-text); }
.timeline__dot--sage { background: var(--c-sage-text); }
.timeline__dot--gold { background: var(--c-gold); }

/* contact list (used in 02, 05) */
.contacts { list-style: none; margin: 0; padding: 0; }
.contacts li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-soft);
  align-items: center;
}
.contacts li:last-child { border-bottom: none; }
.contacts__avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--c-border);
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  flex-shrink: 0;
}
.contacts__name { font-weight: 500; font-size: 0.93rem; }
.contacts__role { color: var(--c-text-muted); font-size: 0.83rem; }

/* file list (used in 02, 13) */
.files { list-style: none; margin: 0; padding: 0; }
.files li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  font-size: 0.9rem;
}
.files__name { font-weight: 500; }
.files__path { color: var(--c-text-muted); font-size: 0.8rem; }
.files li a { margin-left: auto; color: var(--c-gold-darker); font-size: 0.85rem; }

/* email preview (13) */
.email {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.email__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border-soft);
  align-items: baseline;
  font-size: 0.9rem;
}
.email__row .label { text-transform: uppercase; font-size: 0.72rem; color: var(--c-text-muted); letter-spacing: 0.1em; }
.email__row .edit { color: var(--c-gold-darker); font-size: 0.83rem; }
.email__body {
  padding: var(--s-4) 0 0;
  font-size: 0.93rem;
  white-space: pre-line;
}

/* calendar (08) — simple grid */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--c-border-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal__h, .cal__c {
  background: var(--c-white);
  padding: var(--s-2);
  min-height: 80px;
  font-size: 0.82rem;
}
.cal__h {
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--c-text-muted);
  letter-spacing: 0.12em;
  text-align: center;
  min-height: 0;
  padding: var(--s-2);
}
.cal__c.is-other { color: var(--c-text-light); background: var(--c-cream-soft); }
/* OMOIKANE-434: calendar today cell — gold accent ring instead of
 * cream fill so it reads as "today" without the bright-pill look. */
.cal__c.is-today { background: transparent; color: var(--c-cream-text); font-weight: 600; outline: 2px solid var(--c-gold); outline-offset: -2px; }
.cal__day { display: block; margin-bottom: var(--s-1); }
.cal__ev { display: block; padding: 2px 4px; border-radius: 3px; font-size: 0.72rem; margin-bottom: 1px; }
.cal__ev--blue  { background: var(--c-blue-bg);  color: var(--c-blue-text); }
.cal__ev--sage  { background: var(--c-sage-bg);  color: var(--c-sage-text); }
.cal__ev--pink  { background: var(--c-pink-bg);  color: var(--c-pink-text); }
/* OMOIKANE-434: calendar cream event tag — transparent + cream-text
 * with soft border. */
.cal__ev--cream { background: transparent; color: var(--c-cream-text); border: 1px solid var(--c-cream-text); }

/* settings — sub-nav (used in 09) */
.subnav { list-style: none; margin: 0; padding: 0; }
.subnav li a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 2px;
}
.subnav li a:hover     { background: var(--c-cream-soft); color: var(--c-text); }
.subnav li a.is-active { background: var(--c-cream-soft); color: var(--c-text); font-weight: 500; }

/* toggle (used in 09 calendars-to-include) */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.toggle:last-child { border-bottom: none; }
.toggle__label { display: flex; align-items: center; gap: var(--s-2); }
.toggle__dot { width: 10px; height: 10px; border-radius: 999px; }
.toggle__sw { width: 36px; height: 20px; background: var(--c-border); border-radius: 999px; position: relative; cursor: pointer; }
.toggle__sw::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--c-white); border-radius: 999px; transition: left 0.15s; box-shadow: var(--shadow-sm); }
.toggle__sw.is-on { background: var(--c-navy); }
.toggle__sw.is-on::before { left: 18px; }

/* mockup index (the daemon/mockups/index.html page) */
.mockup-index ul { list-style: none; padding: 0; margin: 0; }
.mockup-index li { padding: var(--s-3); border: 1px solid var(--c-border-soft); border-radius: var(--r-md); margin-bottom: var(--s-2); background: var(--c-white); }
.mockup-index li a { font-weight: 500; color: var(--c-navy); }
.mockup-index li .desc { color: var(--c-text-muted); font-size: 0.88rem; margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────────────
   Anonymous landing page — views/anon_landing.rs
   Production UI port (Sprint G4 / OMOIKANE-14): hero with kanji + tagline,
   CTA card, 4-step explainer, privacy trust block. All classes use
   token variables; responsive at 320 / 720 / 1024 / 1440; honors
   prefers-reduced-motion + prefers-color-scheme + prefers-contrast.
   ───────────────────────────────────────────────────────────────────── */

/* sr-only / visually-hidden — for screen-reader-only labels (kanji aria). */
.visually-hidden,
/* OMOIKANE-1501 — `.t-sr-only` was emitted 31 times across the app and defined
   NOWHERE. `grep -rn t-sr-only app/static/` returned nothing while
   `grep -rn t-sr-only app/src --include=*.rs` returned 31 hits, including
   `views/a11y.rs::sr_only()` — the codebase's own screen-reader-only helper.

   The effect was not "no styling". It was that every one of those 31 strings
   RENDERED VISIBLY in production: table captions on the admin email tables
   (`handlers/admin_email.rs:191`, `:223`), section headings meant only for
   assistive tech (`:157`), the sr-only label on the elevator-pitch textarea
   (`handlers/coaching_elevator_pitch_v2.rs:172`), and every `sr_only()` call.
   Text written specifically to be heard and not seen was being seen.

   Defined as an alias rather than rewriting 31 call sites: the `t-` prefix
   matches this codebase's token convention (`t-muted`, `t-h3`, `t-subtitle`),
   so the class name was never the mistake — only its absence. Aliased to
   `.visually-hidden` rather than to `.sr-only` (:11753) because that one lacks
   `clip`, `white-space: nowrap` and `!important`, so long strings can still
   reflow layout at `left: -10000px`. */
.t-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* skip-link — appears on focus, lets keyboard users skip past the hero
   to the main content. Per WCAG 2.2 SC 2.4.1 Bypass Blocks. */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--s-3);
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 500;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--s-3);
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* hero block — brand + kanji + tagline */
.anon-hero {
  padding: var(--s-7) 0 var(--s-6);
  text-align: center;
}
.anon-hero__h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--c-navy);
  margin: 0 0 var(--s-3);
  line-height: 1.2;
  font-weight: 400;
}
.anon-hero__kanji {
  font-family: var(--font-cjk);
  color: var(--c-gold-darker);
  font-size: 0.7em;
  margin-left: var(--s-2);
  font-weight: 400;
}
.anon-hero__tagline {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  color: var(--c-text-muted);
}

/* main content region after hero */
.anon-main {
  display: block;
  padding-bottom: var(--s-7);
}
.anon-main__intro {
  max-width: var(--max-width-prose);
  margin: 0 auto var(--s-6);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* CTA card */
.anon-cta {
  max-width: var(--max-width-prose);
  margin: 0 auto var(--s-7);
}
.anon-cta__row {
  margin-top: var(--s-4);
}

/* 4-step "How it works" grid */
.anon-steps {
  max-width: var(--max-width-page);
  margin: 0 auto var(--s-7);
}
.anon-steps__h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--c-navy);
  margin: 0 0 var(--s-5);
  text-align: center;
}
.anon-steps__list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.anon-steps__item {
  counter-increment: step;
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.anon-steps__item::before {
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--s-3));
  left: var(--s-4);
  width: var(--s-6);
  height: var(--s-6);
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-family: var(--font-serif);
  box-shadow: var(--shadow-sm);
}
.anon-steps__item:hover,
.anon-steps__item:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.anon-steps__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--c-navy);
  margin: 0 0 var(--s-2);
}
.anon-steps__body {
  margin: 0;
  color: var(--c-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* privacy / trust block */
.anon-trust {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: var(--s-5);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-gold);
  border-radius: var(--r-md);
}
.anon-trust__h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--c-navy);
  margin: 0 0 var(--s-2);
}
.anon-trust__body {
  margin: 0;
  color: var(--c-text);
  font-size: 0.95rem;
}

/* error-state card (rendered by render_error when session lookup fails) */
.anon-error {
  max-width: var(--max-width-prose);
  margin: var(--s-7) auto;
  border-left: 4px solid var(--c-pink-text);
}
.anon-error__h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--c-pink-text);
  margin: 0 0 var(--s-3);
}
.anon-error__body {
  margin: 0 0 var(--s-4);
  color: var(--c-text);
}
.anon-error__row {
  margin-top: var(--s-3);
}

/* ─── responsive breakpoints — 320 (mobile) / 720 (tablet) / 1024 (desktop) / 1440 (large) ─── */
@media (max-width: 720px) {
  .anon-hero { padding: var(--s-5) 0 var(--s-4); }
  .anon-hero__h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .anon-steps__list { grid-template-columns: 1fr; gap: var(--s-3); }
  .anon-steps__item { padding: var(--s-4) var(--s-3) var(--s-3); }
  .anon-trust { padding: var(--s-4); }
  .anon-cta__row { flex-direction: column; align-items: stretch; }
  .anon-cta__row .btn { width: 100%; }
}
@media (max-width: 360px) {
  .anon-hero__kanji { display: block; margin: var(--s-1) 0 0 0; font-size: 0.85em; }
}

/* ─── prefers-reduced-motion: disable hover transforms + transitions ─── */
@media (prefers-reduced-motion: reduce) {
  .anon-steps__item,
  .skip-link {
    transition: none !important;
  }
  .anon-steps__item:hover,
  .anon-steps__item:focus-within {
    transform: none;
  }
}

/* ─── prefers-color-scheme: dark — subtle dark variant (operators use it) ─── */

/* ─── prefers-contrast: more — sharper borders + bolder weights ─── */
@media (prefers-contrast: more) {
  .anon-steps__item { border-width: 2px; }
  .anon-trust { border-width: 2px; border-left-width: 6px; }
  .anon-error { border-width: 2px; border-left-width: 6px; }
  .anon-steps__title,
  .anon-trust__h2 { font-weight: 600; }
}

/* ─── print: simplify for paper (operators may print onboarding flow) ─── */
@media print {
  .skip-link,
  .anon-cta__row,
  .anon-error__row { display: none; }
  .anon-steps__item {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #999;
  }
  .anon-trust { background: transparent; }
}

/* ═════════════════════════════════════════════════════════════════════
   EDITORIAL pages — long-form workflow surfaces (posting/new, gate, cv,
   letter, email). The product's job is to be a *thoughtful advisor*, not
   a productivity app — these surfaces lean into the 思兼 (omoi-kane: kami
   of wisdom and forethought) etymology. Tone: editorial, deliberate, slow.

   Discipline:
   - Display serif (--font-serif) used for h1/h2 only; body stays sans
     for table-density legibility. Greek + Latin Extended supported.
   - Vermilion accent (--c-vermilion) used SPARINGLY: only for state-
     changes that mean something (match-gate refusal, primary commit
     button on a single-action page). Not decoration.
   - 思兼 kanji as architectural watermark — large, faint, anchored.
   - Spacing generous + asymmetric. Content has room to breathe.
   - Motion: slow ease-out, ~400ms. Reflective. Never bouncy.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --c-vermilion:       #c73e1d;
  --c-vermilion-soft:  #d96a4f;
  --c-vermilion-tint:  rgba(199, 62, 29, 0.08);
  --c-ink:             #1a1a1a;
  --c-ivory:           #f8f5f0;
  --c-ivory-deep:      #efe9dd;
  --c-rule:            #cdc7b8;
  /* slow, reflective motion — used everywhere on editorial surfaces */
  --ease-editorial: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.editorial {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-8);
  color: var(--c-ink);
  /* sit on the warm ivory tone for these surfaces — slightly warmer
     than the generic --c-cream so the editorial pages feel like a
     different surface, not a card on the dashboard */
  background:
    radial-gradient(900px 600px at 50% 0%, var(--c-ivory) 0%, transparent 70%),
    var(--c-cream);
  isolation: isolate;
}

/* Architectural kanji watermark — anchored to the trailing edge.
   Faint enough that it never fights with content, large enough that
   it asserts the brand identity. Set aria-hidden on the actual <span>
   in the markup. */
.editorial__kanji {
  position: absolute;
  font-family: var(--font-cjk);
  /* Audit Group F-2 fix: previous clamp(12rem, 28vw, 22rem) plus right:-3rem
     pushed the kanji into the textarea on mid-width viewports. Smaller
     glyphs + push further off-canvas + slightly lower opacity = stays
     architectural without fighting the form content. */
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 0.85;
  top: 50%;
  right: -7rem;
  transform: translateY(-50%);
  color: var(--c-navy);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-behind, -1); /* OMOIKANE-1097 — kanji watermark anchor */
  letter-spacing: -0.05em;
}
@media (max-width: 720px) {
  .editorial__kanji {
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9rem;
    opacity: 0.02;
  }
}

/* Eyebrow above the H1 — frames where we are in the 4-step workflow. */
.editorial__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-5) 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.editorial__eyebrow-rule {
  flex: 0 0 32px;
  height: 1px;
  background: var(--c-vermilion);
  display: inline-block;
  transform: translateY(-3px);
}
.editorial__eyebrow-step { color: var(--c-vermilion); font-weight: 500; }
.editorial__eyebrow-of   { color: var(--c-text-light); }

/* H1: display serif at editorial weight. The site already loads Cormorant
   Garamond as --font-serif — we just need to actually *use* it for the
   posting page, with proper size + line-height + tracking. */
.editorial__h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;            /* italic display — signals literary, not corporate */
  font-size: clamp(2.5rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin: 0 0 var(--s-4) 0;
}
.editorial__h1 .editorial__h1-accent {
  font-style: normal;
  color: var(--c-vermilion);
}

/* Lede paragraph immediately under H1. Reads like a magazine standfirst. */
.editorial__lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--c-text);
  max-width: 56ch;
  margin: 0 0 var(--s-8) 0;
}
.editorial__lede em { font-style: italic; color: var(--c-ink); }

/* Form structure: vertical, generous, asymmetric. Each field is its
   own section, separated by a typographic rule rather than card chrome.
   The form is the page; no card-on-card. */
.editorial__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.editorial__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.editorial__field-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 500;
}
.editorial__field-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin: -0.25rem 0 0 0;
}

/* The inputs themselves: borderless, just an underline. Generous padding.
   Focus state is a vermilion underline thickening — quiet, deliberate. */
.editorial__input,
.editorial__textarea {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-rule);
  border-radius: 0;
  padding: var(--s-3) 0;
  width: 100%;
  transition:
    border-color 0.32s var(--ease-editorial),
    box-shadow 0.32s var(--ease-editorial);
}
.editorial__input::placeholder,
.editorial__textarea::placeholder {
  font-style: italic;
  color: var(--c-text-light);
}
.editorial__input:focus,
.editorial__textarea:focus {
  outline: none;
  border-bottom-color: var(--c-vermilion);
  box-shadow: 0 1px 0 0 var(--c-vermilion);
}
.editorial__textarea {
  min-height: 14rem;
  resize: vertical;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* "or" divider between URL and pasted-text fields. Editorial: not a hard
   rule, just the word "or" in italic small caps centered between
   horizontal rules. */
.editorial__or {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-2) 0;
}
.editorial__or::before,
.editorial__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}
.editorial__or-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-light);
  letter-spacing: 0.04em;
}

/* Primary action row. Single primary action; secondary is a quiet link, 
   not a competing button. */
.editorial__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.editorial__submit {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-ink);
  color: var(--c-ivory);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  transition:
    background-color 0.32s var(--ease-editorial),
    transform 0.32s var(--ease-editorial),
    box-shadow 0.32s var(--ease-editorial);
}
.editorial__submit:hover {
  background: var(--c-vermilion);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(199, 62, 29, 0.18);
}
.editorial__submit-arrow {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  transition: transform 0.32s var(--ease-editorial);
}
.editorial__submit:hover .editorial__submit-arrow {
  transform: translateX(3px);
}
.editorial__cancel {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--c-rule);
  text-underline-offset: 4px;
  transition: color 0.32s var(--ease-editorial);
}
.editorial__cancel:hover {
  color: var(--c-vermilion);
  text-decoration-color: var(--c-vermilion);
}

/* Footnote under the actions row — privacy posture / state-of-play
   info, set in italic serif as if it were a magazine footer note. */
.editorial__footnote {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 56ch;
}

/* Page-load reveal: stagger the elements into view. Honors
   prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .editorial > * { animation: editorial-in 0.7s var(--ease-editorial) backwards; }
  .editorial > *:nth-child(1) { animation-delay: 0.00s; }
  .editorial > *:nth-child(2) { animation-delay: 0.08s; }
  .editorial > *:nth-child(3) { animation-delay: 0.16s; }
  .editorial > *:nth-child(4) { animation-delay: 0.24s; }
  .editorial > *:nth-child(5) { animation-delay: 0.32s; }
  @keyframes editorial-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Post-launch MR1 (2026-05-13) — UX polish: skeleton primitives +
   page-enter animations + micro-interactions.

   Replaces the existing "spinner-only" loading posture with proper
   skeleton-shaped placeholders. Skeletons accept the SAME shape as the
   content they replace so the page doesn't jump on swap. Used by:
     - dashboard.rs (postings list)
     - workflow.rs (posting card)
     - any view that opts in via Maud `skeleton_card` / `skeleton_lines`
       helpers in views::ui_loading.

   Animation tokens (--ms-*, --ease-soft) are exposed at :root so future
   views can reach for the same primitives without re-inventing them.

   All animation rules are gated under @media (prefers-reduced-motion:
   no-preference) so screen-reader / vestibular-disorder users see static
   final frames. Same posture as the .editorial stagger above.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* timing tokens — durations + soft ease curve. The "soft" ease lands
     UI elements with a brief overshoot-less settle, in keeping with the
     editorial-shrine aesthetic (calm, not bouncy). */
  --ms-instant:  80ms;    /* button press → focus ring */
  --ms-quick:    160ms;   /* hover transitions */
  --ms-medium:   320ms;   /* card reveals, modal fade */
  --ms-slow:     560ms;   /* page-level staggered reveals */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Skeleton primitives ─────────────────────────────────────────────
   Use as placeholder UI while data loads. Three shapes:
     .skeleton-card   — full posting/draft card placeholder
     .skeleton-line   — single line of text (height ≈ 1em)
     .skeleton-block  — generic block; pass inline style for width/height
   All three share the .skeleton mixin which provides the shimmer animation
   + the muted background color.

   Color: cream-soft → very light gold tint → cream-soft. Matches the
   warm palette; avoids the typical gray-on-gray skeleton aesthetic. */

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--c-border-soft) 0%,
    var(--c-cream-soft) 40%,
    var(--c-border-soft) 80%
  );
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  color: transparent;
  user-select: none;
  pointer-events: none;
  /* aria-busy="true" + role="presentation" expected on parent so AT
     announces loading state and skips decorative skeleton text. */
}

.skeleton-line {
  height: 1em;
  margin: var(--s-2) 0;
  border-radius: var(--r-sm);
}

.skeleton-line--short { width: 35%; }
.skeleton-line--medium { width: 60%; }
.skeleton-line--long { width: 90%; }

.skeleton-block {
  /* width/height set per-usage via inline style — block is a flex shape */
  min-height: 1.5rem;
  border-radius: var(--r-sm);
}

.skeleton-card {
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
}
.skeleton-card .skeleton-line:first-child { margin-top: 0; }
.skeleton-card .skeleton-line:last-child  { margin-bottom: 0; }

/* ─── Animations ───────────────────────────────────────────────────── */

@keyframes skeleton-shimmer {
  /* Moves the gradient highlight L→R. 1.4s loop pace ≈ industry standard
     (Facebook, Stripe, etc) — slow enough to feel calm, fast enough to
     signal "actively loading" not "stuck". */
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  /* Used on freshly-mounted cards. Subtle 8px lift — not jarring. */
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  /* Used on toasts / chips that appear after a user action. Slight
     overshoot for warmth. */
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Apply animations only when user hasn't opted out. */
@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
  }
  .anim-fade-in   { animation: fade-in   var(--ms-medium) var(--ease-soft) both; }
  .anim-slide-up  { animation: slide-up  var(--ms-medium) var(--ease-soft) both; }
  .anim-pop-in    { animation: pop-in    var(--ms-quick)  var(--ease-soft) both; }

  /* Stagger helper — applies to direct children. Up to 8 elements get a
     staggered delay; anything beyond animates simultaneously (correct
     UX for long lists — staggering 30 items takes 2.4s, too long). */
  .anim-stagger > *           { animation: slide-up var(--ms-medium) var(--ease-soft) backwards; }
  .anim-stagger > *:nth-child(1) { animation-delay: 0.00s; }
  .anim-stagger > *:nth-child(2) { animation-delay: 0.05s; }
  .anim-stagger > *:nth-child(3) { animation-delay: 0.10s; }
  .anim-stagger > *:nth-child(4) { animation-delay: 0.15s; }
  .anim-stagger > *:nth-child(5) { animation-delay: 0.20s; }
  .anim-stagger > *:nth-child(6) { animation-delay: 0.25s; }
  .anim-stagger > *:nth-child(7) { animation-delay: 0.30s; }
  .anim-stagger > *:nth-child(8) { animation-delay: 0.35s; }
}

/* ─── Micro-interactions ─────────────────────────────────────────────
   Hover/focus polish on the most-touched UI primitives. Existing .btn
   already has transitions; add the same calm posture to .card, .chip,
   .row (clickable containers), and form inputs.
   Static fallback: still functional + non-jarring when motion disabled. */

.card,
.chip {
  transition:
    transform var(--ms-quick) var(--ease-soft),
    box-shadow var(--ms-quick) var(--ease-soft);
}

/* Slight lift on interactive cards (must opt in with .card--interactive
   to avoid every static card lifting on hover — most cards are not
   clickable). */
.card--interactive { cursor: pointer; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card--interactive:hover,
  .card--interactive:focus-within {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

/* Focus ring polish — uses gold accent so it's visible on both cream
   and navy backgrounds. Outline only on :focus-visible (keyboard) so
   click users don't get the ring. */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Input focus polish — soft gold border on focus. */
input:focus,
textarea:focus,
select:focus {
  outline: none; /* replaced by border treatment below */
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.18);
  transition:
    border-color var(--ms-quick) var(--ease-soft),
    box-shadow var(--ms-quick) var(--ease-soft);
}

/* Page-load reveal for authenticated app pages. Pages opt in by
   adding `class="anim-page"` to the main element. Stagger applies
   automatically (≤ 8 children). */
@media (prefers-reduced-motion: no-preference) {
  .anim-page > * { animation: slide-up var(--ms-medium) var(--ease-soft) backwards; }
  .anim-page > *:nth-child(1) { animation-delay: 0.00s; }
  .anim-page > *:nth-child(2) { animation-delay: 0.06s; }
  .anim-page > *:nth-child(3) { animation-delay: 0.12s; }
  .anim-page > *:nth-child(4) { animation-delay: 0.18s; }
  .anim-page > *:nth-child(5) { animation-delay: 0.24s; }
  .anim-page > *:nth-child(6) { animation-delay: 0.30s; }
  .anim-page > *:nth-child(7) { animation-delay: 0.36s; }
  .anim-page > *:nth-child(8) { animation-delay: 0.42s; }
}

/* prefers-reduced-motion: explicitly null out the animations + transitions
   we just added so screen-reader / vestibular-disorder users see static
   final frames. This is in addition to the gated rules above — paranoid
   coverage for any future rule that forgets the gate. */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none !important;
    /* Static gradient — still indicates "this is a placeholder", just
       doesn't move. The user knows from context (page is loading). */
  }
  .anim-fade-in,
  .anim-slide-up,
  .anim-pop-in,
  .anim-stagger > *,
  .anim-page > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .card,
  .chip,
  .card--interactive:hover,
  .card--interactive:focus-within,
  input:focus,
  textarea:focus,
  select:focus {
    transition: none !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   AIACT-202 — confidence indicators
   Namespaced t-conf-* so the whole surface re-skins from one place.
   ───────────────────────────────────────────────────────────── */

.t-conf {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: 0.82em;
  line-height: 1.4;
  font-family: inherit;
}

/* Type A — numeric+band badge */
.t-conf-band {
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: #f4f1ea;
  border: 1px solid #d8d0bf;
  color: #2a2a2a;
  cursor: help;
}
.t-conf-band__score {
  font-weight: 600;
  color: #0f2444;
}
.t-conf-band__label {
  color: #555;
  font-size: 0.92em;
}

/* Type C — qualitative match-strength chip */
.t-conf-strength {
  padding: 0.18em 0.65em;
  border-radius: 4px;
  font-weight: 500;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.t-conf-strength--strong   { background: #e6f4ea; color: #1a7a35; border: 1px solid #b6dbc2; }
.t-conf-strength--moderate { background: #fff4e6; color: #aa6a14; border: 1px solid #f1cfa1; }
.t-conf-strength--weak     { background: #fceaea; color: #b83838; border: 1px solid #f0b8b8; }
.t-conf-strength--none     { background: #f4f4f5; color: #6a6a6a; border: 1px solid #d8d8da; }

/* Voice-match chip */
.t-conf-voice {
  padding: 0.18em 0.65em;
  border-radius: 4px;
  font-weight: 500;
}
.t-conf-voice--high     { background: #e6f4ea; color: #1a7a35; border: 1px solid #b6dbc2; }
.t-conf-voice--moderate { background: #fff4e6; color: #aa6a14; border: 1px solid #f1cfa1; }
.t-conf-voice--low      { background: #fceaea; color: #b83838; border: 1px solid #f0b8b8; }
.t-conf-voice--thin     { background: #fff8db; color: #7a5a14; border: 1px solid #e6d7a0;
                          display: inline-flex; flex-direction: column; align-items: flex-start;
                          padding: 0.4em 0.8em; }
.t-conf-voice__hint     { font-size: 0.85em; color: #7a5a14; font-style: italic;
                          font-weight: 400; margin-top: 0.2em; }

/* Type D — "Not sure" panel */
.t-conf-not-sure {
  display: block;
  background: #fff8db;
  border-left: 4px solid #aa6a14;
  border-radius: 4px;
  padding: 0.9em 1.2em;
  margin: 1em 0;
  font-size: 0.94em;
  line-height: 1.5;
}
.t-conf-not-sure__headline {
  margin: 0 0 0.4em 0;
  font-weight: 600;
  color: #2a2a2a;
}
.t-conf-not-sure__body {
  margin: 0;
  color: #555;
  white-space: pre-line;
}

/* Type B — citation chips */
.t-conf-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0.5em 0;
}
.t-conf-citations__chip {
  padding: 0.18em 0.6em;
  border-radius: 4px;
  background: #eef4f9;
  color: #0f2444;
  border: 1px solid #c8d6e4;
  font-size: 0.85em;
  font-family: ui-monospace, monospace;
}
.t-conf-citations__id    { font-weight: 500; }
.t-conf-citations__count { color: #555; font-size: 0.88em; margin-left: 0.2em; }
.t-conf-citations--empty {
  margin: 0.6em 0;
  font-style: italic;
  font-size: 0.9em;
}

/* ─── OMOIKANE-100 Phase 7 — /cv daemon-rendered hub ─────────────────── */

.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3, 1rem);
  padding: 0;
  margin: var(--s-3, 1rem) 0;
  list-style: none;
}
.cv-card {
  padding: var(--s-3, 1rem);
  border: 1px solid #d8d3c4;
  border-radius: 0.5rem;
  background: #fbf8f1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cv-card h2 { font-size: 1.1rem; margin: 0; }
.cv-card h2 a { color: inherit; text-decoration: none; }
.cv-card h2 a:hover { text-decoration: underline; }
.cv-card .pills { margin: 0; }
.cv-card .pill {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
  border-radius: 0.3rem;
  margin-right: 0.3rem;
}
.cv-card .pill.public { background: #e8f0e2; color: #2a4a18; }
.cv-card .pill.locked { background: #f0e8e2; color: #5a3010; }
.cv-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.cv-disconnect {
  margin-top: var(--s-5, 2rem);
  padding-top: var(--s-3, 1rem);
  border-top: 1px dashed #d8d3c4;
}
.cv-basics { margin: var(--s-3, 1rem) 0; }
.cv-basics .headline { font-style: italic; margin: 0.2rem 0; }
.cv-basics .contact { font-size: 0.92rem; color: #555; }
.cv-section { margin: var(--s-4, 1.5rem) 0; }
.cv-section h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cv-items { list-style: none; padding: 0; }
.cv-item {
  margin: var(--s-3, 1rem) 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #ece7d8;
}
.cv-item-title { font-size: 1.02rem; }
.cv-item-subtitle { color: #444; }
.cv-item-meta { font-size: 0.85rem; }
.cv-item-summary p, .cv-item-description p { margin: 0.3rem 0; }
.cv-key-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 420px;
  margin-top: var(--s-3, 1rem);
}
.cv-key-form label { font-size: 0.9rem; font-weight: 600; }
.cv-key-form input {
  padding: 0.5rem 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid #c2bba6;
  border-radius: 0.3rem;
}
.steps { padding-left: 0; list-style: none; }
.steps li { margin: 0.5rem 0; }
.steps .step-num { font-weight: 600; color: #6a3410; }
.toast {
  padding: 0.5rem 0.7rem;
  border-radius: 0.3rem;
  margin: var(--s-3, 1rem) 0;
  border: 1px solid #d8d3c4;
  background: #fbf8f1;
}
.toast.success { background: #e8f0e2; border-color: #b7c8a8; }
.toast.error { background: #f5e2dc; border-color: #c69a8c; }
.btn.ghost.danger:hover { background: #f5e2dc; }

/* OMOIKANE-100 Phase 8 — in-page iframe edit view.
   Escapes the .main pane's padding so the iframe fills the entire
   available area (omoikane sidebar to the left, full viewport height
   below the toolbar). Operator feedback: "ULTRA TINY; make it feel
   full window". The negative-margin trick neutralises .main's
   var(--s-6) padding on all four sides; height: 100vh covers from
   the top of the viewport down. */
.cv-edit-section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6));
  padding: 0;
  /* Re-add a tiny safety margin so the iframe doesn't bleed under any
     fixed-position elements the page shell injects (loading overlay
     etc.). */
  box-sizing: border-box;
  /* Defeat the .main pane's overflow:auto so the iframe scrolls itself,
     not the surrounding container. */
  overflow: hidden;
}
/* OMOIKANE-1672 — the escape has to match `.main__inner`'s padding and the
   box has to grow by it: `width: 100%` left the section 2 × padding short on
   the right at every width, and on phones (padding --s-4) the --s-6 margin
   pushed the toolbar 16px off-screen ("ew resume", "Back to" cut). */
.cv-edit-section { width: auto; }
@media (max-width: 640px) {
  .cv-edit-section { margin: calc(-1 * var(--s-4)); }
}
/* toolbar in the calm palette; the serif has one weight (600 was faux bold) */
.cv-edit-section .cv-edit-toolbar { background: var(--c-cream-soft); border-bottom-color: var(--c-border); }
.cv-edit-section .cv-edit-toolbar h1 { font-weight: 400; }
.cv-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem var(--s-3, 1rem);
  border-bottom: 1px solid #d8d3c4;
  background: #fbf8f1;
  flex-shrink: 0;
}
.cv-edit-toolbar h1 {
  font-size: 1rem;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.cv-edit-toolbar .crumbs { font-size: 0.9rem; }
/* OMOIKANE-1361 — at phone widths the toolbar row crushed/clipped the
   back-crumb mid-word ("– Back to / esumes"); let it wrap and keep the
   crumb intact. */
@media (max-width: 560px) {
  .cv-edit-toolbar { flex-wrap: wrap; gap: 0.4rem 1rem; }
  .cv-edit-toolbar .crumbs { flex: none; white-space: nowrap; }
  .cv-edit-toolbar h1 { flex: 1 1 100%; }
}
.cv-edit-toolbar .crumbs a { color: inherit; text-decoration: none; }
.cv-edit-toolbar .crumbs a:hover { text-decoration: underline; }
.cv-edit-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  min-height: 0;
}

/* ──────────────────────────────────────────────────────────────────
   editorial-coaching (OMOIKANE-AUDIT-2026-05-16)
   "Quiet shrine" pattern — extends the existing editorial aesthetic
   into the 30 V2 coaching surfaces. Single-column focus, paper-stock
   cards, vermilion accent, serif H1, generous whitespace.
   ────────────────────────────────────────────────────────────────── */

.coaching-section {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-7, 3rem) var(--s-4, 1.5rem) var(--s-9, 5rem);
  color: var(--c-ink, #1a1612);
  background: linear-gradient(180deg, transparent 0%, transparent 90%, rgba(199, 81, 53, 0.03) 100%);
}

.coaching-section header[role="banner"] {
  text-align: left;
  margin-bottom: var(--s-6, 2.5rem);
  border-bottom: 1px solid rgba(199, 81, 53, 0.15);
  padding-bottom: var(--s-3, 1rem);
}

.coaching-section header[role="banner"] h1 {
  font-family: var(--ff-serif, "Tinos", "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-2, 0.6rem) 0;
  line-height: 1.15;
  color: var(--c-navy, #1a1f3a);
}

.coaching-section header[role="banner"] .t-subtitle,
.coaching-section header[role="banner"] p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-muted, #6a6056);
  margin: 0;
  max-width: 60ch;
}

.coaching-section main,
.coaching-section main#main {
  display: block;
}

/* Card-like list rows — used by motivators / wheel / values / etc.
   Each row becomes a paper-stock tile with a left vermilion accent that
   intensifies on hover. The user feels each item as an object to
   react to, not a form field to fill in. */
.coaching-section ul[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2, 0.5rem);
}

.coaching-section ul[role="list"] > li,
.coaching-section .t-motivators-card,
.coaching-section .coaching-card {
  background: #fbf8f1;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid rgba(199, 81, 53, 0.5);
  border-radius: 6px;
  padding: var(--s-3, 1rem) var(--s-4, 1.4rem);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  gap: var(--s-3, 1rem);
  flex-wrap: wrap;
}

.coaching-section ul[role="list"] > li:hover,
.coaching-section .t-motivators-card:hover,
.coaching-section .coaching-card:hover {
  border-left-color: rgba(199, 81, 53, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(199, 81, 53, 0.06);
}

.coaching-section label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--c-ink, #1a1612);
  cursor: pointer;
}

.coaching-section label > select,
.coaching-section label > input[type="text"],
.coaching-section label > input[type="number"],
.coaching-section input[type="text"],
.coaching-section input[type="number"],
.coaching-section input[type="email"],
.coaching-section select,
.coaching-section textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  min-height: 38px;
}

.coaching-section select {
  cursor: pointer;
  padding-right: 1.8rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-vermilion, #c75135) 50%),
                    linear-gradient(135deg, var(--c-vermilion, #c75135) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
}

.coaching-section textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
}

.coaching-section input:focus-visible,
.coaching-section select:focus-visible,
.coaching-section textarea:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 1px;
  border-color: transparent;
}

.coaching-section fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-5, 2rem) 0;
}

.coaching-section legend {
  font-family: var(--ff-serif, "Tinos", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: var(--s-2, 0.5rem);
  color: var(--c-navy, #1a1f3a);
}

.coaching-section button[type="submit"],
.coaching-section .btn--primary,
.coaching-section a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-navy, #1a1f3a);
  color: #fff;
  border: 1px solid var(--c-navy, #1a1f3a);
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.1s ease;
  margin-top: var(--s-4, 1.5rem);
  letter-spacing: 0.01em;
}

.coaching-section button[type="submit"]:hover,
.coaching-section .btn--primary:hover {
  background: #2a325a;
  transform: translateY(-1px);
}

.coaching-section button[type="submit"]:active {
  transform: translateY(0);
}

/* Save-state hint — replaces the loud "Save what I have so far" CTA
   with a quieter "Drafts saved" pulse the user can trust. */
.coaching-section .save-hint,
.coaching-section .t-save-hint {
  display: block;
  margin-top: var(--s-3, 1rem);
  font-size: 0.85rem;
  color: var(--c-muted, #6a6056);
  font-style: italic;
  opacity: 0.85;
}

/* Skip-link inside the coaching surface (the page shell has the canonical
   one; this overrides only when the inner content uses .t-skip-link). */
.coaching-section .t-skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.coaching-section .t-skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--c-navy, #1a1f3a);
  color: #fff;
  padding: var(--s-3, 1rem);
  z-index: var(--z-skip-link, 9999); /* OMOIKANE-1097 — always on top so keyboard escape works */
  width: auto;
  height: auto;
}

/* Entrance stagger — when the page loads, list items fade-in with a
   small upward translate. Cap at 30 items to bound the stagger duration. */
@keyframes coaching-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .coaching-section ul[role="list"] > li {
    opacity: 0;
    animation: coaching-card-in 0.4s ease-out forwards;
  }
  .coaching-section ul[role="list"] > li:nth-child(1)  { animation-delay: 0.02s; }
  .coaching-section ul[role="list"] > li:nth-child(2)  { animation-delay: 0.04s; }
  .coaching-section ul[role="list"] > li:nth-child(3)  { animation-delay: 0.06s; }
  .coaching-section ul[role="list"] > li:nth-child(4)  { animation-delay: 0.08s; }
  .coaching-section ul[role="list"] > li:nth-child(5)  { animation-delay: 0.10s; }
  .coaching-section ul[role="list"] > li:nth-child(6)  { animation-delay: 0.12s; }
  .coaching-section ul[role="list"] > li:nth-child(7)  { animation-delay: 0.14s; }
  .coaching-section ul[role="list"] > li:nth-child(8)  { animation-delay: 0.16s; }
  .coaching-section ul[role="list"] > li:nth-child(9)  { animation-delay: 0.18s; }
  .coaching-section ul[role="list"] > li:nth-child(10) { animation-delay: 0.20s; }
  /* items 11+ all reveal together at 0.22s — bounded stagger */
  .coaching-section ul[role="list"] > li:nth-child(n+11) { animation-delay: 0.22s; }
}

/* Nudge banner (ND-support soft-cap reminder, already used) — needs the
   editorial palette inside the new coaching shell. */
.coaching-section .nd-nudge,
.coaching-section [class*="soft-cap"] {
  background: rgba(199, 81, 53, 0.06);
  border-left: 3px solid var(--c-vermilion, #c75135);
  padding: var(--s-3, 1rem) var(--s-4, 1.4rem);
  margin: 0 0 var(--s-4, 1.5rem) 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.95rem;
  color: var(--c-ink, #1a1612);
}

/* Workflow stepper polish + posting-summary card (audit Group B). */
.step__label {
  color: inherit;
  text-decoration: none;
}
.step__label:hover,
.step__label:focus-visible {
  text-decoration: underline;
}
.step.is-active .step__label {
  font-weight: 600;
}
@media (max-width: 640px) {
  .steps {
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .step + .step::before {
    width: 24px;
  }
}
.posting-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.posting-summary__link {
  margin: 0;
}
.posting-summary__view {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.88rem;
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.posting-summary__view:hover,
.posting-summary__view:focus-visible {
  background: var(--c-cream);
  border-color: var(--c-border);
  color: var(--c-text);
  text-decoration: none;
}
.posting-text {
  color: var(--c-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL DESIGN SYSTEM — propagation across the whole product.
   Adopted 2026-05-16. Per frontend-design skill: distinctive typography,
   atmospheric depth, asymmetric composition, one accent (vermilion) used
   sparingly, calm motion. No generic SaaS chrome.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Body type stack — Plus Jakarta Sans (Calm template body sans) ── */
body {
  font-family: var(--font-sans);
  /* OMOIKANE-1293 — dropped the Manrope-specific ss01/cv11 stylistic sets
     (alt-a); Plus Jakarta Sans reads best with its default feature set. */
  letter-spacing: -0.005em;
}

/* ── 2. Sidebar masthead — magazine TOC, not SaaS dashboard nav ───── */
.side--navy {
  position: relative;
  padding: var(--s-6) var(--s-3) var(--s-4);
  background:
    /* faint vermilion top-bleed for editorial gravity */
    linear-gradient(180deg, rgba(199, 81, 53, 0.10) 0%, transparent 14%),
    var(--c-navy);
  /* gold rule on the trailing edge — replaces generic border */
  border-right: 1px solid transparent;
}
.side--navy::after {
  content: '';
  position: absolute;
  top: var(--s-6);
  right: 0;
  bottom: var(--s-6);
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--c-gold) 12%,
    var(--c-gold-soft) 50%,
    var(--c-gold) 88%,
    transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}
.side--navy .side__brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.005em;
  padding: 0 var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  position: relative;
}
.side--navy .side__brand::after {
  /* hairline rule under the brand block */
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold-soft) 0%, transparent 100%);
  opacity: 0.3;
}
.side--navy .side__brand img {
  width: 30px;
  height: 30px;
  filter: brightness(1.05);
}
.side--navy .side__brand .cjk {
  font-family: var(--font-cjk);
  font-style: normal;
  font-size: 0.78em;
  color: var(--c-gold-soft);
  letter-spacing: 0.18em;
  opacity: 0.75;
  margin-left: 0.25em;
}
.side--navy .side__section {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;          /* abandon all-caps SaaS chrome */
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  color: var(--c-gold-soft);
  padding: var(--s-4) var(--s-3) var(--s-1);
  opacity: 1;
  position: relative;
}
.side--navy .side__section::before {
  /* tiny ornamental rule before the section label */
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--c-gold-soft);
  vertical-align: middle;
  margin-right: 0.6em;
  opacity: 0.5;
}
.side--navy .side__nav { padding: 0 var(--s-1); }
.side--navy .side__nav li a {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  color: var(--c-text-on-navy-muted);
  padding: 0.42rem var(--s-3) 0.42rem calc(var(--s-3) + 6px);
  border-radius: 0;
  position: relative;
  transition: transform 180ms var(--ease-editorial, cubic-bezier(0.2, 0.7, 0.2, 1)),
              color 180ms var(--ease-editorial, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.side--navy .side__nav li a:hover {
  background: transparent;
  color: var(--c-cream);
  transform: translateX(2px);
}
.side--navy .side__nav li a:focus-visible {
  outline: 1px solid var(--c-gold-soft);
  outline-offset: -2px;
}
.side--navy .side__nav li a.is-active {
  background: transparent;
  color: var(--c-cream);
  font-weight: 500;
  border-left: 0;
  padding-left: calc(var(--s-3) + 6px);
  box-shadow: none;
}
.side--navy .side__nav li a.is-active::before {
  /* vermilion left-rule replaces gold-block — one accent on the page */
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: var(--c-vermilion, #c75135);
  border-radius: 0 1px 1px 0;
}
.side--navy .side__foot {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.015em;
  padding-top: var(--s-4);
  margin-top: auto;
  border-top: 1px solid rgba(216, 200, 168, 0.12);
}
.side--navy .side__foot .lang-switch-inline a,
.side--navy .side__foot .lang-switch-inline span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-text-on-navy-muted);
  margin-right: var(--s-2);
  text-decoration: none;
  transition: color 180ms ease;
}
.side--navy .side__foot .lang-switch-inline a:hover {
  color: var(--c-gold-soft);
}
.side--navy .side__foot .lang-switch-inline .is-active {
  color: var(--c-cream);
  border-bottom: 1px solid var(--c-vermilion, #c75135);
  padding-bottom: 1px;
}
.side--navy .side__foot a[href="/auth/logout"] {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-on-navy-muted) !important;
  text-decoration: none;
  font-size: 0.88rem;
}
.side--navy .side__foot a[href="/auth/logout"]:hover {
  color: var(--c-gold-soft) !important;
  text-decoration: underline;
  text-decoration-color: rgba(216, 200, 168, 0.4);
}

/* ── 3. Atmospheric grain on body — subtle depth, not texture noise ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-base, 0); /* OMOIKANE-1097 — explicit ground anchor */
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.42;
}
/* ensure normal stacking — content above the grain */
body > * { position: relative; z-index: 1; }

/* ── 4. Page-head treatment — replace SaaS `Hello, Name` with editorial ── */
.page-head {
  margin-bottom: var(--s-5);
}
.page-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--c-navy);
}
.page-head__title em,
.page-head__title .accent {
  font-style: italic;
  color: var(--c-vermilion, #c75135);
}
.page-head__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--c-text-muted);
  margin-top: var(--s-1);
  max-width: 60ch;
}

/* ── 5. Card refinement — paper-stock, vermilion left-edge on focus ── */
.card {
  position: relative;
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-radius: 3px;                       /* sharper than SaaS-default 8-12 */
  box-shadow:
    0 1px 0 rgba(26, 22, 18, 0.02),
    0 18px 32px -28px rgba(26, 22, 18, 0.15);
  padding: var(--s-4) var(--s-5);
}
.card--accent {
  border-left: 3px solid var(--c-vermilion, #c75135);
}
.card h2 {
  font-family: var(--font-serif);
  font-weight: 500;
}

/* ── 6. KPI tile reset — was generic 4-up SaaS slop ─────────────────── */
.kpi-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-5);
}
.kpi-tile {
  position: relative;
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kpi-tile::before {
  /* serial number-style index on the upper right corner */
  content: attr(data-index);
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text-light);
}
.kpi-tile__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.kpi-tile__value {
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 300;
  color: var(--c-text);
  margin: var(--s-2) 0;
}
.kpi-tile__sub {
  font-size: 0.8rem;
  color: var(--c-text-light);
  margin-top: var(--s-2);
}
.kpi-tile--anchor {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-color: transparent;
}
.kpi-tile--anchor .kpi-tile__label { color: var(--c-gold-soft); }
.kpi-tile--anchor .kpi-tile__sub   { color: var(--c-text-on-navy-muted); }
.kpi-tile--anchor .kpi-tile__value { color: var(--c-text-on-navy); }
.kpi-tile--anchor::before {
  color: var(--c-text-on-navy-muted);
}

/* ── 7. Button refinement — quieter, more editorial ────────────────── */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.015em;
}
.btn--primary {
  background: var(--c-navy);
  color: var(--c-cream);
  border: 1px solid var(--c-navy);
}
.btn--primary:hover {
  background: var(--c-navy-darker);
  border-color: var(--c-navy-darker);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
}
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn--ghost:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
}

/* ── 8. Stagger reveal — one CSS-only animation, prefers-reduced safe ── */
@keyframes editorial-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.editorial__stagger > * {
  animation: editorial-reveal 480ms var(--ease-editorial, cubic-bezier(0.2, 0.7, 0.2, 1)) both;
}
.editorial__stagger > *:nth-child(1) { animation-delay: 0ms; }
.editorial__stagger > *:nth-child(2) { animation-delay: 60ms; }
.editorial__stagger > *:nth-child(3) { animation-delay: 120ms; }
.editorial__stagger > *:nth-child(4) { animation-delay: 180ms; }
.editorial__stagger > *:nth-child(5) { animation-delay: 240ms; }
.editorial__stagger > *:nth-child(6) { animation-delay: 300ms; }
.editorial__stagger > *:nth-child(n+7) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .editorial__stagger > * { animation: none; }
  .side--navy .side__nav li a { transition: none; }
}

/* ── 9. Decision-moment block (editorial::editorial_decision_moment) ── */
.editorial__decision {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
.editorial__decision-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-border) 50%, transparent 100%);
}
.editorial__decision-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--c-text);
  text-align: center;
  max-width: 32ch;
}

/* ── 10. Footnote (editorial::editorial_footnote) ──────────────────── */
.editorial__footnote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  margin-top: var(--s-4);
  max-width: 56ch;
  line-height: 1.55;
}

/* ── 11. Main pane refinement — paper-stock background + indent ───── */
.main {
  background:
    radial-gradient(1100px 700px at 80% 0%, var(--c-cream-soft) 0%, transparent 60%),
    var(--c-cream);
}

/* ════════════════════════════════════════════════════════════════════
   RESIDUAL ANTI-SLOP PASS — audit findings the system overlay
   couldn't catch from CSS alone. Surface-specific tweaks; same vocab.
   ════════════════════════════════════════════════════════════════════ */

/* Audit A-2 — motivator card label rendered as "CCuriosity" because
   the .t-motivators-card__letter span had no dedicated styling. Now
   a properly-styled circular badge with editorial Cormorant 500. */
.coaching-section .t-motivators-card label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2, 0.5rem);
}
.coaching-section .t-motivators-card__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-navy, #1e2d4f);
  color: var(--c-cream, #f5f1e8);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  flex-shrink: 0;
  letter-spacing: 0;
}
.coaching-section .t-motivators-card__label {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-navy, #1e2d4f);
}
.coaching-section .t-motivators-card__definition {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted, #6a6a6a);
  font-weight: 400;
  font-size: 0.95rem;
  flex-basis: 100%;
  margin-top: var(--s-1, 0.25rem);
}
.coaching-section .t-motivators-card select {
  margin-left: auto;
}

/* Values card variant — similar slop risk if a future feature adds a
   letter glyph; pre-emptively style the same way. */
.coaching-section .coaching-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-vermilion, #c75135);
  color: var(--c-cream, #f5f1e8);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Editorial tier-gate hint banner — when /coaching/<slug>/v2/tier2 or
   tier3 silently redirects to tier1 because tier1 is incomplete, the
   handler appends ?need_tier_1=1 to the redirect (future work); when
   that query param is present, this banner renders at the top of the
   tier1 page explaining the redirect.  CSS-ready for that feature. */
.coaching-section .tier-gate-hint {
  background: rgba(199, 81, 53, 0.05);
  border-left: 3px solid var(--c-vermilion, #c75135);
  padding: var(--s-3, 1rem) var(--s-4, 1.4rem);
  margin: 0 0 var(--s-4, 1.5rem) 0;
  border-radius: 0 2px 2px 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-ink, #1a1612);
  font-size: 0.95rem;
}
.coaching-section .tier-gate-hint strong {
  font-style: normal;
  font-weight: 500;
}

/* Prose pages — legal, FAQ, AI disclosure, diary read view. Apply the
   Newsreader long-form serif body for proper screen-reading typography.
   The .prose namespace is already used by the markdown-rendered pages. */
.prose {
  font-family: var(--font-serif-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-ink, #1a1612);
  max-width: 64ch;
}
.prose p {
  margin-bottom: 1em;
}
.prose h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.012em;
  margin-bottom: var(--s-4, 1.5rem);
  color: var(--c-navy);
}
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.008em;
  margin-top: var(--s-6, 2rem);
  margin-bottom: var(--s-2, 0.5rem);
  color: var(--c-navy);
}
.prose h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--c-navy);
  margin-top: var(--s-5, 1.75rem);
}
.prose blockquote {
  border-left: 3px solid var(--c-vermilion, #c75135);
  padding: var(--s-2, 0.5rem) var(--s-4, 1.4rem);
  font-style: italic;
  color: var(--c-text-muted);
  margin: var(--s-4, 1.5rem) 0;
  background: rgba(199, 81, 53, 0.03);
}
.prose a {
  color: var(--c-navy);
  text-decoration-color: var(--c-gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  text-decoration-color: var(--c-vermilion, #c75135);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--c-cream-soft);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  border: 1px solid var(--c-border-soft);
}

/* Form refinement — inputs/textareas across the app got generic
   styling. Editorialise: underline-only inputs (no boxed chrome on
   editorial surfaces; cards keep the boxed form). */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="tel"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0.6rem 0.9rem;
  box-shadow: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-gold-darker);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.18);
}
::placeholder {
  font-style: italic;
  color: var(--c-text-light);
  opacity: 1;
}

/* Editorial-section in views/editorial.rs — section.editorial reuses
   the same paper-stock cream + kanji-watermark vocabulary. */
.editorial {
  /* (Already declared earlier in this file; refinement here.) */
  position: relative;
  isolation: isolate;
}
.editorial__h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--c-navy);
  margin-bottom: var(--s-3, 1rem);
}
.editorial__h1-accent {
  font-style: italic;
  color: var(--c-vermilion, #c75135);
}
.editorial__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2, 0.5rem);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2, 0.5rem);
}
.editorial__eyebrow-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
}
.editorial__eyebrow-step {
  color: var(--c-vermilion, #c75135);
}
.editorial__eyebrow-of {
  color: var(--c-text-light);
}
.editorial__eyebrow-tag {
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0.005em;
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
   ANON LANDING + DASHBOARD PIPELINE + TABLE + CHIP REFINEMENT
   ════════════════════════════════════════════════════════════════════ */

.anon-hero {
  padding: var(--s-8, 3rem) 0 var(--s-7, 2.5rem);
  position: relative;
}
.anon-hero::after {
  content: '';
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(199, 81, 53, 0.06) 0%, transparent 100%);
  pointer-events: none;
  z-index: var(--z-behind, -1); /* OMOIKANE-1097 — gradient background anchor */
}
.anon-hero__h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4rem);
  letter-spacing: -0.015em;
  line-height: 1.04;
}
.anon-hero__kanji {
  font-family: var(--font-cjk);
  color: var(--c-gold-darker);
  font-size: 0.55em;
  font-style: normal;
  margin-left: 0.4em;
  letter-spacing: 0.15em;
  vertical-align: 0.18em;
  opacity: 0.75;
}
.anon-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-text-muted);
  max-width: 38rem;
}
.anon-main__intro {
  font-family: var(--font-serif-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-text);
}

.anon-cta {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-vermilion, #c75135);
  border-radius: 3px;
}
.anon-cta h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.anon-steps__h2 {
  text-align: left;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: -0.012em;
  position: relative;
  padding-bottom: var(--s-3, 1rem);
  margin-bottom: var(--s-5, 1.75rem);
}
.anon-steps__h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
}
.anon-steps__list {
  grid-template-columns: 1fr;
  gap: var(--s-4, 1.5rem);
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .anon-steps__list { grid-template-columns: repeat(2, 1fr); }
}
.anon-steps__item {
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(26, 22, 18, 0.02);
  padding: var(--s-5, 1.75rem);
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.anon-steps__item::before {
  content: 'Step ' counter(step);
  position: absolute;
  top: var(--s-4, 1.5rem);
  left: var(--s-5, 1.75rem);
  width: auto;
  height: auto;
  background: transparent;
  color: var(--c-vermilion, #c75135);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: none;
  border-radius: 0;
  display: block;
}
.anon-steps__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--c-navy);
  letter-spacing: -0.008em;
  margin-top: var(--s-4, 1.5rem);
}
.anon-steps__body {
  font-family: var(--font-serif-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  margin-top: var(--s-2, 0.5rem);
}
.anon-steps__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px rgba(26, 22, 18, 0.15);
  border-color: var(--c-gold-soft);
}

.anon-trust {
  max-width: 56rem;
  margin: var(--s-7, 2.5rem) auto;
  padding: var(--s-5, 1.75rem) var(--s-6, 2rem);
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  position: relative;
}
.anon-trust::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
  opacity: 0.55;
}
.anon-trust__h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: var(--s-2, 0.5rem);
  color: var(--c-navy);
}
.anon-trust__body {
  font-family: var(--font-serif-body);
  color: var(--c-text);
  line-height: 1.65;
}

.anon-error {
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-vermilion, #c75135);
}
.anon-error__h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Pipeline list (dashboard) */
.pipeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pipeline > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2, 0.5rem) 0;
  border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.pipeline > li:last-child { border-bottom: 0; }
.pipeline > li.is-closed { color: var(--c-text-light); opacity: 0.65; }
.pipeline__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 0.5rem);
}
.pipeline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  display: inline-block;
}
.pipeline > li.is-closed .pipeline__dot { background: var(--c-text-light); }
.pipeline__count {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--c-navy);
}

/* Tables (admin overview, audit log, users) — spec-sheet treatment */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
/* OMOIKANE-1293 responsive audit (2026-07-14) — reliable horizontal-scroll
   wrapper for wide data tables on narrow screens. The site-wide mobile
   `table { display:block; overflow-x:auto }` rule below (in the 720px media
   block) does not win against the base `table{width:100%}` in some render
   contexts (raw-string content viewers under a bare <main>), so wrap those
   tables in this container: a block box that fills its parent (≤ viewport)
   and scrolls the table inside it. Verified to drive /ai-act-compliance
   overflow at 360px from +19px to 0. */
.table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: var(--s-2, 0.5rem) var(--s-3, 1rem);
  border-bottom: 1px solid var(--c-border);
}
td {
  padding: var(--s-3, 1rem);
  border-bottom: 1px solid var(--c-border-soft);
  font-size: 0.95rem;
}
tr:hover td { background: rgba(184, 153, 104, 0.04); }

/* Status pills / chips */
.chip,
.pill,
.status-chip {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.18em 0.55em;
  border-radius: 2px;
  background: var(--c-cream);
  color: var(--c-text);
  border: 1px solid var(--c-border-soft);
  display: inline-block;
}
.chip--gold,
.pill--gold {
  background: var(--c-gold-soft);
  color: var(--c-text);
  border-color: var(--c-gold);
}
.chip--vermilion,
.pill--vermilion {
  background: rgba(199, 81, 53, 0.08);
  color: var(--c-vermilion, #c75135);
  border-color: rgba(199, 81, 53, 0.35);
}
.chip--navy,
.pill--navy {
  background: var(--c-navy);
  color: var(--c-cream);
  border-color: var(--c-navy);
}
/* OMOIKANE — restore the canonical design-system soft-pill treatment for the
   blue + neutral chips. The cream square "status pill" base above is intended
   only for the gold/vermilion/navy status chips; without these rules it
   flattens the profile-page "Searching" pill (blue) and the language pills
   (neutral) into cream squares. Values mirror the Omoikane design system. */
.chip--blue {
  background: var(--c-blue-bg);
  color: var(--c-blue-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--neutral {
  background: var(--c-border-soft);
  color: var(--c-text-muted);
  border-color: transparent;
  border-radius: var(--r-pill);
}
/* OMOIKANE — same restore for the remaining design-palette chips that the
   cream status-pill base would otherwise flatten to cream squares in light
   mode: the sage/pink/purple tone chips and the match-strength score chips.
   Values mirror the Omoikane design system tokens. (Dark mode keeps its own
   deliberate treatment defined further down.) */
.chip--sage {
  background: var(--c-sage-bg);
  color: var(--c-sage-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--pink {
  background: var(--c-pink-bg);
  color: var(--c-pink-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--purple {
  background: var(--c-purple-bg);
  color: var(--c-purple-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--match-strong {
  background: var(--c-match-strong-bg);
  color: var(--c-match-strong-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--match-mid {
  background: var(--c-match-mid-bg);
  color: var(--c-match-mid-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
.chip--match-weak {
  background: var(--c-match-weak-bg);
  color: var(--c-match-weak-text);
  border-color: transparent;
  border-radius: var(--r-pill);
}
/* cream chip stays the OMOIKANE-434 thin-outline treatment (not a cream
   fill) — just re-assert it over the square status-pill base + restore the
   pill radius. */
.chip--cream {
  background: transparent;
  color: var(--c-cream-text);
  border: 1px solid var(--c-cream-text);
  border-radius: var(--r-pill);
}

/* ════════════════════════════════════════════════════════════════════
   .t-prose alias — many handlers use the `t-`-prefixed variant for
   prose blocks (profile_audit, legal_changes, voice samples). Mirror
   the editorial .prose treatment so those pages pick up the Newsreader
   serif body without per-handler markup churn.
   ════════════════════════════════════════════════════════════════════ */
.t-prose {
  font-family: var(--font-serif-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-ink, #1a1612);
}
.t-prose h1,
.t-prose .t-h1,
.t-prose .t-h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  letter-spacing: -0.012em;
  color: var(--c-navy);
  margin-bottom: var(--s-3, 1rem);
  line-height: 1.12;
}
.t-prose h2,
.t-prose .t-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.008em;
  color: var(--c-navy);
  margin: var(--s-5, 1.75rem) 0 var(--s-2, 0.5rem);
}
.t-prose p {
  margin: 0 0 var(--s-3, 1rem);
}
.t-prose p.t-muted {
  font-family: var(--font-serif-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}
.t-prose a {
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: 0;
}
.t-prose a:hover {
  text-decoration-color: var(--c-vermilion, #c75135);
}
.t-prose blockquote {
  border-left: 3px solid var(--c-vermilion, #c75135);
  padding: var(--s-2, 0.5rem) var(--s-4, 1.4rem);
  background: rgba(199, 81, 53, 0.03);
  margin: var(--s-4, 1.5rem) 0;
  font-style: italic;
  color: var(--c-text-muted);
}
.t-prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold-soft) 50%, transparent 100%);
  opacity: 0.6;
  margin: var(--s-6, 2rem) 0;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD MAGAZINE FRONT-PAGE — radical layout break.
   Operator flag 2026-05-16: 'dashboard still looks the same / full
   slop-saas-ai-llm-product'. Editorial typography alone wasn't enough
   — the LAYOUT was still vanilla SaaS (greeting + 4-up KPI grid + 2-up
   cards + table). This block re-skins the dashboard into a magazine
   front-page layout via CSS-only — no handler markup changes needed.

   Frontend-design skill compliance:
   - Asymmetric flow (sidebar metrics column, anchor card on left)
   - Grid-breaking (eyebrow datestamp, serif sentence-style numbers)
   - Generous negative space (extra leading on the H1, wider gutters)
   - One accent: vermilion on the anchor card + date eyebrow
   ════════════════════════════════════════════════════════════════════ */

/* Eyebrow datestamp printed above the H1 — handler renders a real
   <p.dash-datestamp> element with today's date in micro-caps; rule
   below styles it. The pseudo-element variant remains as a fallback
   for any handler that doesn't emit the dash-datestamp element — the
   page still reads as a bulletin in either case. */
.main .page-head {
  position: relative;
  padding-top: var(--s-4, 1.5rem);
  margin-top: var(--s-2, 0.5rem);
}
.main .dash-datestamp {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
  margin: var(--s-4, 1.5rem) 0 var(--s-1, 0.25rem);
  padding-top: var(--s-4, 1.5rem);
  border-top: 1px solid var(--c-border-soft);
}
/* Fallback for pages that don't (yet) emit dash-datestamp */
.main .page-head:not(:has(+ * + *)) ~ .page-head::before,
.main > .page-head:first-child::before {
  content: "TODAY'S BULLETIN · OMOIKANE";
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
  padding-top: var(--s-4, 1.5rem);
  border-top: 1px solid var(--c-border-soft);
  margin-bottom: var(--s-1, 0.25rem);
}
/* Suppress the pseudo-fallback if a real dash-datestamp is rendered */
.main .dash-datestamp + .page-head::before,
.main .dash-datestamp ~ .page-head::before {
  display: none;
}
.main .page-head__title {
  /* Smaller, italic, off-center — not the SaaS "BIG GREETING" pattern */
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin-top: var(--s-2, 0.5rem);
  max-width: 28ch;
}
.main .page-head__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-text-muted);
  max-width: 48ch;
  margin-top: var(--s-2, 0.5rem);
}

/* KPI band — transform from 4-up SaaS tile grid into a SINGLE LINE
   serif-numeral spec sheet. Reads like "Five postings in flight,
   none considering, five drafting, none applied." */
.main .grid.grid--4 {
  /* Override the generic grid-4 — this is the KPI band only.
     The .grid--4 utility is also used elsewhere for non-KPI 4-up grids;
     this selector specifically targets the KPI usage on /dashboard
     via the wrapping `.main` + the direct `.kpi` children pattern. */
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  background: transparent;
  margin: var(--s-5, 1.75rem) 0 var(--s-6, 2rem) 0;
  padding: var(--s-4, 1.5rem) 0;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
}
.main .grid.grid--4 > .kpi {
  flex: 1 1 25%;
  min-width: 160px;
  background: transparent !important;
  border: 0;
  padding: 0 var(--s-4, 1.5rem);
  position: relative;
  overflow: visible;
}
.main .grid.grid--4 > .kpi::after {
  /* hairline vertical divider between KPIs */
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 0;
  width: 1px;
  background: var(--c-border);
}
.main .grid.grid--4 > .kpi:last-child::after { display: none; }
.main .grid.grid--4 > .kpi .kpi__label {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-1, 0.25rem);
}
.main .grid.grid--4 > .kpi .kpi__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--c-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.main .grid.grid--4 > .kpi .kpi__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-top: var(--s-1, 0.25rem);
}
.main .grid.grid--4 > .kpi--accent {
  background: transparent !important;
  border: 0;
}
.main .grid.grid--4 > .kpi--accent::before {
  /* tiny vermilion seal in the corner — replaces the full-fill anchor */
  content: '';
  position: absolute;
  top: 0;
  left: var(--s-4, 1.5rem);
  width: 18px;
  height: 2px;
  background: var(--c-vermilion, #c75135);
}
.main .grid.grid--4 > .kpi--accent .kpi__num {
  color: var(--c-vermilion, #c75135);
}

/* Asymmetric 2-up — Pipeline gets emphasis, "What's next" is supporting
   margin. Operator wanted grid-breaking. */
.main .grid.grid--2 {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-5, 1.75rem);
  align-items: start;
}
.main .grid.grid--2 > .card:first-child {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-vermilion, #c75135);
  border-radius: 3px;
  padding: var(--s-5, 1.75rem);
  position: relative;
}
.main .grid.grid--2 > .card:first-child::before {
  /* "DRAFT" stamp — magazine annotation feel */
  content: 'PIPELINE';
  position: absolute;
  top: var(--s-3, 1rem);
  right: var(--s-4, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-gold-darker);
}
.main .grid.grid--2 > .card:nth-child(2) {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-4, 1.5rem) 0;
}

/* Recent postings — pull-quote style heading + cleaner table density */
.main section[aria-labelledby] h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.008em;
  color: var(--c-navy);
  position: relative;
  padding-left: var(--s-4, 1.5rem);
  margin-bottom: var(--s-3, 1rem);
}
.main section[aria-labelledby] h2.t-h3::before {
  content: '';
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
}

/* Page-head actions — pull them OUT of the SaaS top-right CTA cluster
   and into a quiet inline link group below the H1 + sub. */
.main .page-head__actions {
  margin-top: var(--s-3, 1rem);
  display: flex;
  gap: var(--s-3, 1rem);
  align-items: center;
}
.main .page-head__actions .btn--secondary,
.main .page-head__actions .btn--primary {
  font-family: var(--font-sans);
  font-weight: 600;            /* bump from 500 — operator-flagged "fonts too white" 2026-05-17 */
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.1rem;
  border-radius: 2px;
}
.main .page-head__actions .btn--primary {
  /* Operator-flagged 2026-05-17: navy + cream gave a "washed-out white
     fonts" feel. Invert: cream-soft background + navy-ink text with a
     navy hairline border. Reads stronger + matches the editorial
     magazine-style chrome instead of the SaaS-default colored fill. */
  background: var(--c-cream-soft);
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
}
.main .page-head__actions .btn--primary:hover {
  background: var(--c-cream);
  border-color: var(--c-vermilion);
  color: var(--c-navy);
}

/* "Workspace →" link inside .card__head links — italic Cormorant
   nav-link feel (magazine "see also"). */
.main .card__head a {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-gold-darker);
  text-decoration: none;
  border-bottom: 0;
}
.main .card__head a:hover {
  color: var(--c-vermilion, #c75135);
}

/* Sub-section: empty-state "What's next" copy — italic serif */
.main .grid.grid--2 > .card:nth-child(2) p,
.main .grid.grid--2 > .card:nth-child(2) p.muted {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   MAGAZINE PROPAGATION — same anti-SaaS-slop treatment for /profile,
   /coaching landing, /workflow, /jobsearch/daily.

   Operator: 1 BIG MR per group. This is the propagation MR — the
   dashboard pattern (eyebrow datestamp + asymmetric layout + serif
   spec-sheet numerals + vermilion accent discipline) extended to
   every major hub surface.
   ════════════════════════════════════════════════════════════════════ */

/* /profile hub — the 4-col card grid was the obvious slop. Re-skin:
   - max 3-col grid (was auto-fit 280px → easily 4-5 cols on wide)
   - more breathing room between cards
   - eyebrow micro-caps subtitle inside each card
   - vermilion underline-grow on hover (no transform churn) */

.main div[role="list"][aria-label*="profile"],
.main div[role="list"][aria-label*="Profile"],
.main div[role="list"][style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: var(--s-4, 1.5rem) !important;
  max-width: 72rem;
}

.main div[role="list"] > section.card[role="listitem"] {
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  padding: var(--s-5, 1.75rem) !important;
  position: relative;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  overflow: hidden;
}
.main div[role="list"] > section.card[role="listitem"]::before {
  /* magazine "section index" micro-caps — derived from the heading ID */
  content: '';
  position: absolute;
  top: 0;
  left: var(--s-4, 1.5rem);
  width: 24px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
  opacity: 0.5;
  transition: width 220ms ease, opacity 220ms ease;
}
.main div[role="list"] > section.card[role="listitem"]:hover {
  border-color: var(--c-gold-soft);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -20px rgba(26, 22, 18, 0.18);
}
.main div[role="list"] > section.card[role="listitem"]:hover::before {
  width: 48px;
  opacity: 1;
}
.main div[role="list"] > section.card[role="listitem"] > h3.t-h3,
.main div[role="list"] > section.card[role="listitem"] > h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.32rem;
  color: var(--c-navy);
  letter-spacing: -0.008em;
  line-height: 1.18;
  margin: 0;
}
.main div[role="list"] > section.card[role="listitem"] > p.t-muted {
  font-family: var(--font-serif-body);
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
}
.main div[role="list"] > section.card[role="listitem"] .btn--ghost {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  border: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  color: var(--c-navy);
  align-self: flex-start;
  transition: border-color 220ms ease, color 220ms ease;
}
.main div[role="list"] > section.card[role="listitem"] .btn--ghost:hover {
  border-color: var(--c-vermilion, #c75135);
  color: var(--c-vermilion, #c75135);
  background: transparent;
}

/* Profile header card — was a generic intro card. Make it the masthead
   of the hub page: italic serif H2 + serif body + plan badge */
.main section.card[aria-labelledby="prof-header-h"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: 0;
  padding: var(--s-3, 1rem) 0 var(--s-4, 1.5rem);
  box-shadow: none;
  margin-bottom: var(--s-5, 1.75rem) !important;
  position: relative;
}
.main section.card[aria-labelledby="prof-header-h"]::before {
  content: 'YOUR ACCOUNT · OMOIKANE';
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
  margin-bottom: var(--s-2, 0.5rem);
}
.main section.card[aria-labelledby="prof-header-h"] h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: -0.008em;
  color: var(--c-navy);
  margin: 0;
}
.main section.card[aria-labelledby="prof-header-h"] p {
  font-family: var(--font-serif-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  margin-top: var(--s-2, 0.5rem);
}
.main section.card[aria-labelledby="prof-header-h"] strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-navy);
}

/* /coaching landing — the long form-list page. Apply the same magazine
   section anatomy: eyebrow on every section, vermilion rule, italic
   serif H2. The handler renders multiple .card sections — give them
   each a magazine "section №" feel. */
.main section.card[id="values"],
.main section.card[id="motivators"],
.main section.card[id="qualities"],
.main section.card[id="stars"],
.main section.card[id="challenges"] {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  padding: var(--s-5, 1.75rem) var(--s-6, 2rem) !important;
  position: relative;
  margin-bottom: var(--s-5, 1.75rem);
}
.main section.card[id="values"] h2.t-h3,
.main section.card[id="motivators"] h2.t-h3,
.main section.card[id="qualities"] h2.t-h3,
.main section.card[id="stars"] h2.t-h3,
.main section.card[id="challenges"] h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  padding-left: var(--s-5, 1.75rem);
  position: relative;
}
.main section.card[id="values"] h2.t-h3::before,
.main section.card[id="motivators"] h2.t-h3::before,
.main section.card[id="qualities"] h2.t-h3::before,
.main section.card[id="stars"] h2.t-h3::before,
.main section.card[id="challenges"] h2.t-h3::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
}

/* /workflow — overview page that lists postings. Refine the "Today"
   focus block + posting cards so they read as magazine "lead story". */
.main section.card[aria-labelledby="ws-focus-h"] {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-vermilion, #c75135);
  border-radius: 2px;
  padding: var(--s-5, 1.75rem) var(--s-6, 2rem) !important;
  position: relative;
  margin-top: var(--s-5, 1.75rem);
}
.main section.card[aria-labelledby="ws-focus-h"]::before {
  /* magazine "lead story" label in top-right */
  content: 'LEAD';
  position: absolute;
  top: var(--s-3, 1rem);
  right: var(--s-4, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-gold-darker);
}
.main section.card[aria-labelledby="ws-focus-h"] h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}
.main section.card[aria-labelledby="ws-focus-h"] .t-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
}

/* /jobsearch/daily widget on the dashboard + the /jobsearch/daily page
   itself — magazine "new this morning" feel */
.main section.card[aria-labelledby="dash-daily-h"] {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-vermilion, #c75135) !important;
  border-radius: 2px;
  padding: var(--s-5, 1.75rem) !important;
  position: relative;
}
.main section.card[aria-labelledby="dash-daily-h"]::before {
  content: 'NEW THIS MORNING';
  position: absolute;
  top: var(--s-3, 1rem);
  right: var(--s-4, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-vermilion, #c75135);
}
.main section.card[aria-labelledby="dash-daily-h"] h2.t-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
}

/* Status chips inside the daily-matches preview list */
.main section.card[aria-labelledby="dash-daily-h"] .chip {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  background: var(--c-gold-soft);
  color: var(--c-navy);
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  padding: 0.15em 0.5em;
}

/* Welcome wizard card — keep prominence on first-visit but shed
   SaaS-cliche chrome. */
.main section.card[aria-labelledby="welcome-h"] {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-gold, #b89968);
  border-radius: 2px;
  padding: var(--s-5, 1.75rem) var(--s-6, 2rem) !important;
  position: relative;
}
.main section.card[aria-labelledby="welcome-h"]::before {
  content: 'TO BEGIN';
  position: absolute;
  top: var(--s-3, 1rem);
  right: var(--s-4, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-gold-darker);
}

/* Universal `.card` polish for any remaining .card across the app —
   sharper corners, cream paper-stock, italic-serif H3 titles */
.main .card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  color: var(--c-navy);
}
.main .card .t-muted,
.main .card p.t-muted {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Editorial "section heading" used in workflow overview + jobsearch
   daily + others (e.g. "Postings (5)") */
.main h2.t-h3,
.main h2.t-h2,
/* OMOIKANE-1293 — the Calm template renders every content heading UPRIGHT
   (Instrument Serif, a 400-only face). The prior port's editorial-italic
   direction (font-style:italic; weight 500 → faux-bold) fought the template
   on every page. Neutralised to upright/400 app-wide. Easily reverted if the
   editorial italic is wanted back. (Per-page rules may still opt into italic
   for specific accents, e.g. .page-head__sub, .goal quotes.) */
.main section h2 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.008em;
  color: var(--c-navy);
}

/* ════════════════════════════════════════════════════════════════════
   4-STEP WORKFLOW PAGES — gate / cv / letter / email.
   The core product UX. Currently the H1 ("Match gate", "Tailored CV",
   "Cover letter", "Application email") renders in sans-500 with a
   tight stepper below. Editorial-ise so this surface (where users
   spend most of their time) reads as the product's flagship.
   ════════════════════════════════════════════════════════════════════ */

/* Bare <h1> in main — most step-pages render `h1 { "Tailored CV" }`
   directly without a .page-head wrapper. Catch those and apply the
   editorial Cormorant treatment. Skip if there IS a .page-head sibling
   (the dashboard, etc, already have explicit treatment). */
.main > h1,
.main > section > h1,
.main > div > h1,
/* OMOIKANE-1293 — this greedy "content h1 two levels into .main" rule was
   bleeding onto the persistent app-bar CHROME title (.app-bar__title, which
   nests as .main > .app-bar > .app-bar__titles > h1), rendering every page's
   header title as oversized editorial italic instead of the Calm template's
   upright 25px. Exclude the chrome title; it is styled by .app-bar__title. */
.main > div > div > h1:not(.app-bar__title),
.main > div > section > h1:not(.app-bar__title) {
  font-family: var(--font-serif);
  /* OMOIKANE-1293 — upright + capped to the template's ~34px content-title
     size (was up to 2.6rem/41.6px; the Calm template tops out at 32-34px). */
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--c-navy);
  margin: 0 0 var(--s-3, 1rem) 0;
}

/* Step bar above the title — restructure: the .steps nav was a
   horizontal stepper but the H1 sat above it. Make it feel like a
   magazine "section breadcrumb" — eyebrow micro-caps below the H1,
   not above. */
.main .steps {
  border-bottom: 1px solid var(--c-border-soft);
  border-top: 0;
  padding-bottom: var(--s-4, 1.5rem);
  margin-bottom: var(--s-5, 1.75rem);
}
.main .steps .step__label {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}
.main .steps .step.is-active .step__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-navy);
  letter-spacing: -0.005em;
}

/* AIACT condensed banner on cv/letter/email pages — italic serif
   tone, vermilion accent, narrower */
.main .banner.banner--warning,
.main .banner.banner--info,
.main div[class*="aiact-condensed"],
.main aside[class*="aiact"] {
  background: rgba(199, 81, 53, 0.04) !important;
  border: 0 !important;
  border-left: 3px solid var(--c-vermilion, #c75135) !important;
  border-radius: 0 2px 2px 0 !important;
  padding: var(--s-3, 1rem) var(--s-4, 1.4rem) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--c-ink, #1a1612);
}
.main .banner strong,
.main aside[class*="aiact"] strong {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--c-navy);
}

/* The "muted" introduction paragraph on every step page — italic
   serif Cormorant 1.05rem, max 60ch reading width */
.main p.muted {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 60ch;
  margin-bottom: var(--s-4, 1.5rem);
}

/* The Draft card on step_cv / step_letter / step_email — editorial
   anchor block with vermilion ▎ and Cormorant H2 */
.main section.card:has(> h2:first-child) {
  position: relative;
}

/* "Draft" heading inside the .card on step pages */
.main .card > h2:only-of-type {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.008em;
  margin: 0 0 var(--s-3, 1rem);
  color: var(--c-navy);
}

/* Score / Below-the-gate / Above-the-gate callouts on step_gate */
.main section h2.t-h3:has(+ p) {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Score display — "Score: 15%" big number; render as a magazine
   pull-figure: italic Cormorant 3.6rem with vermilion if below gate */
.main .score-display,
.main h2.t-h3 + p.t-large,
.main section[aria-labelledby*="score"] {
  font-family: var(--font-serif);
}

/* Posting-summary card — already tweaked in !1826, refine further:
   compact "View original posting →" button rendered as ghost-link */
.main .posting-summary {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--s-3, 1rem) 0;
  margin-bottom: var(--s-4, 1.5rem);
}
.main .posting-summary .posting-summary__view {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--c-gold-soft);
  text-underline-offset: 3px;
}
.main .posting-summary .posting-summary__view:hover {
  background: transparent;
  border: 0;
  text-decoration-color: var(--c-vermilion, #c75135);
  color: var(--c-navy);
}
.main .posting-summary .posting-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* btn-row on step pages — tidy spacing */
.main .btn-row {
  display: flex;
  gap: var(--s-2, 0.5rem);
  flex-wrap: wrap;
  margin-top: var(--s-3, 1rem);
}

/* Quiet "Back" affordance — italic Cormorant, not a button */
.main a.btn--ghost[href*="workspace"],
.main a.btn--ghost[href*="/workflow"]:not([href*="posting"]) {
  background: transparent;
  border: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
}
.main a.btn--ghost[href*="workspace"]:hover,
.main a.btn--ghost[href*="/workflow"]:not([href*="posting"]):hover {
  color: var(--c-vermilion, #c75135);
  border-bottom-color: var(--c-vermilion, #c75135);
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS + MOBILE + RESIDUAL ANTI-SLOP POLISH
   - Consistent vermilion focus-visible across every interactive
   - Mobile-friendly sidebar collapse (< 720px)
   - Radio + checkbox restyle to magazine pip toggles
   - Selection chip hover/active states
   ════════════════════════════════════════════════════════════════════ */

/* Universal vermilion focus-visible — replaces browser-default blue
   rings that don't match the editorial palette. Skip-link, side-nav,
   buttons, inputs all converge on the same vermilion micro-ring. */
:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
  border-radius: 2px;
}
.side--navy a:focus-visible {
  outline: 1px solid var(--c-gold-soft);
  outline-offset: -2px;
}

/* Radio inputs — replace browser-default circles with editorial pips */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-cream-soft, #fbf9f4);
  cursor: pointer;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease;
  flex-shrink: 0;
  vertical-align: -0.18em;
}
input[type="radio"]:hover {
  border-color: var(--c-navy);
}
input[type="radio"]:checked {
  border-color: var(--c-vermilion, #c75135);
  background: var(--c-cream-soft, #fbf9f4);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-vermilion, #c75135);
  transform: translate(-50%, -50%);
}
input[type="radio"]:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
}

/* Checkbox — same treatment but square */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-cream-soft, #fbf9f4);
  cursor: pointer;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease;
  flex-shrink: 0;
  vertical-align: -0.2em;
}
input[type="checkbox"]:hover {
  border-color: var(--c-navy);
}
input[type="checkbox"]:checked {
  border-color: var(--c-navy);
  background: var(--c-navy);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--c-cream, #f5f1e8);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
}

/* Labels next to radio/checkbox — serif body, generous spacing */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-family: var(--font-sans);
  user-select: none;
}

/* Range slider (used in wheel-of-life if ever switched from select) —
   editorial track with vermilion thumb */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(90deg, var(--c-vermilion, #c75135) 0%, var(--c-gold) 100%);
  border-radius: 2px;
  outline: none;
  width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-navy);
  border: 2px solid var(--c-cream);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-navy);
  border: 2px solid var(--c-cream);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Selection chips (filter chips on /workflow + /jobsearch/daily +
   /network) — micro-spec uppercase Manrope, cream-on-cream toggle */
button.chip,
a.chip,
label.chip,
input[type="radio"] + label.chip {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.35em 0.85em;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-cream-soft);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
}
button.chip:hover,
a.chip:hover,
label.chip:hover {
  border-color: var(--c-navy);
}
button.chip[aria-pressed="true"],
button.chip.is-active,
a.chip.is-active,
.chip.is-selected {
  background: var(--c-navy);
  color: var(--c-cream);
  border-color: var(--c-navy);
}

/* Mobile layout tweaks < 720px (typography, KPI stacking, grids).
   OMOIKANE-1334 — this block used to ALSO restyle the sidebar into a
   pre-OMOIKANE-552 "sticky top bar" (.app display:block + .side
   position:sticky + .side__* overrides). Because it sits LATER in the
   file than the 552 burger block (max-width:767px), it overrode
   `.side { position: fixed }` back to sticky WITHOUT resetting the
   burger's `transform: translateX(-100%)` — a translated element stays
   in normal flow, so every authenticated page at <=720px reserved a
   full blank viewport (~835-960px) above its content. The super-audit
   found ~40 of 43 pages opening blank on phones; the OMOIKANE-667
   dashboard fix was bounding this very symptom without the cause.
   The legacy sidebar rules are deleted — the 552 off-canvas burger is
   THE mobile nav. The old `.main` padding override is also gone: it
   clobbered 552's padding-top burger clearance (the other half of the
   667 symptom). Keep only the non-sidebar mobile rules below. */
@media (max-width: 720px) {
  .main {
    /* Preserve 552's burger clearance; tighten the sides + bottom. */
    padding: calc(var(--s-2) + 3.2rem) var(--s-3, 1rem) var(--s-6, 2rem);
  }
  /* Tighten typography on mobile */
  .page-head__title,
  .editorial__h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
  /* KPI row — stack 2 per row on tablet, 1 per row on phone */
  .main .grid.grid--4 {
    flex-direction: column;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
    margin: var(--s-4, 1.5rem) 0;
    gap: var(--s-2, 0.5rem);
  }
  .main .grid.grid--4 > .kpi {
    flex: 1;
    padding: var(--s-3, 1rem) var(--s-4, 1.5rem);
    background: var(--c-cream-soft) !important;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 2px;
  }
  .main .grid.grid--4 > .kpi::after {
    display: none;
  }
  .main .grid.grid--2 {
    grid-template-columns: 1fr;
    gap: var(--s-3, 1rem);
  }
  /* Site-wide tables — let them scroll horizontally on mobile.
     OMOIKANE-1343 — the scroll worked but was invisible: rows clipped their
     actions off-screen with no hint more content existed. Add CSS scrolling
     shadows (Lea Verou technique): two opaque edge "covers" attached `local`
     (they ride with the content and sit over the shadow at each scroll end),
     plus two soft shadows attached `scroll` (pinned to the box edges). Net
     effect: a soft shadow appears on whichever side has hidden content and
     disappears once you've scrolled to that end — a self-explaining affordance
     with no wrapper markup needed. */
  /* OMOIKANE-1501 — the scroll treatment moved OFF `table` and onto the
     wrapper. It used to read:

         table { display: block; overflow-x: auto; white-space: nowrap; … }

     `display: block` is the problem. Changing a table's computed display away
     from `table` makes Chrome, Firefox and Safari drop the implicit
     `role="table"` and the whole row / cell / columnheader mapping with it. So
     below 720px EVERY table in the app stopped being a table to a screen
     reader — including the ones authored correctly with `<caption>` and
     `th scope=`. Nothing restored the roles: there are 3 explicit
     `role="table"`-family attributes in the entire tree. WCAG 1.3.1.

     The affordance is kept, just attached to `.table-scroll` — the wrapper
     OMOIKANE-1293 already built for exactly this, where `display: block` is
     correct because the WRAPPER is not the table. Only 2 sites adopt it today
     (`handlers/aiact_compliance_viewer.rs:185`,
     `handlers/methodology_countries_index.rs:205`); the rest can adopt
     incrementally, and a11y no longer waits on that.

     Unwrapped tables now FIT by wrapping their cell text instead of
     overflowing — `white-space: nowrap` was what forced the overflow that the
     scrolling was invented to solve. Denser than a scroll on wide admin
     tables, but semantic, and semantics are not the part to trade away. */
  .table-scroll {
    background:
      linear-gradient(to right, var(--c-white, #fff), rgba(255, 255, 255, 0)) 0 0,
      linear-gradient(to left, var(--c-white, #fff), rgba(255, 255, 255, 0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(20, 30, 40, 0.16), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(20, 30, 40, 0.16), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  table {
    max-width: 100%;
  }
  th, td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Hero on www */
  .anon-hero {
    padding: var(--s-6, 2rem) 0 var(--s-4, 1.5rem);
  }
}

/* Reduce-motion — kill all the slide/transform animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print — clean editorial print stylesheet for diary entries, prose
   pages, application emails. Strip sidebar; render single-column. */
@media print {
  .side, .side--navy, .crisis-pause-link, .ai-disclosure-footer,
  .site-header nav, .footer-links, body::before {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body::before {
    display: none;
  }
  .main {
    background: #fff !important;
    padding: 0 !important;
  }
  .card, .editorial, .anon-steps__item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    page-break-inside: avoid;
  }
  h1, h2, h3 {
    font-family: var(--font-serif) !important;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WHEEL OF LIFE — slider visualisation (audit Group A-5).
   Each axis renders as a horizontal slider card with the current rating
   displayed in italic serif. Replaces the prior <select> dropdowns.
   ════════════════════════════════════════════════════════════════════ */

.coaching-section ul.t-wheel-axes {
  list-style: none;
  padding: 0;
  margin: var(--s-4, 1.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 1rem);
}
.coaching-section li.t-wheel-axis {
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid rgba(199, 81, 53, 0.5);
  border-radius: 2px;
  padding: var(--s-4, 1.5rem);
  position: relative;
}
.coaching-section li.t-wheel-axis:hover {
  border-left-color: var(--c-vermilion, #c75135);
}
.t-wheel-axis__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3, 1rem);
}
.t-wheel-axis__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--c-navy);
  cursor: pointer;
}
.t-wheel-axis__current {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--c-vermilion, #c75135);
  letter-spacing: -0.02em;
  min-width: 2ch;
  text-align: right;
}
.t-wheel-axis__description {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-muted);
  margin: var(--s-1, 0.25rem) 0 var(--s-3, 1rem);
}
.t-wheel-axis__row {
  display: flex;
  align-items: center;
  gap: var(--s-4, 1.5rem);
}
.t-wheel-axis__row input[type="range"] {
  flex: 1;
}
.t-wheel-axis__row input[type="range"]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.t-wheel-axis__skip {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
}
.t-wheel-axis__skip span {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   HOLLAND CODE — card pick visualisation (audit Group A-5).
   6 RIASEC cards with per-slot 1st/2nd/3rd radio strip. Replaces the
   prior text-input ("type SEC for Social/Enterprising/Conventional").
   ════════════════════════════════════════════════════════════════════ */

.coaching-section ul.t-riasec-cards {
  list-style: none;
  padding: 0;
  margin: var(--s-4, 1.5rem) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3, 1rem);
}
.coaching-section li.t-riasec-card {
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid rgba(199, 81, 53, 0.5);
  border-radius: 2px;
  padding: var(--s-4, 1.5rem);
  transition: border-left-color 220ms ease, transform 220ms ease;
}
.coaching-section li.t-riasec-card:hover {
  border-left-color: var(--c-vermilion, #c75135);
  transform: translateY(-1px);
}
.coaching-section li.t-riasec-card h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--c-navy);
  margin: 0 0 var(--s-2, 0.5rem);
  display: flex;
  align-items: center;
  gap: var(--s-2, 0.5rem);
}
.t-riasec-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-cream);
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1rem;
  flex-shrink: 0;
}
.t-riasec-likes {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0 0 var(--s-2, 0.5rem);
}
.t-riasec-card .t-tiny {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-3, 1rem);
}
.t-riasec-pick {
  border: 0;
  padding: 0;
  margin: var(--s-2, 0.5rem) 0 0;
  display: flex;
  gap: var(--s-2, 0.5rem);
  border-top: 1px solid var(--c-border-soft);
  padding-top: var(--s-3, 1rem);
}
.t-riasec-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 0.25rem 0;
}
.t-riasec-slot span {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.t-riasec-slot input[type="radio"]:checked + span {
  color: var(--c-vermilion, #c75135);
  font-weight: 500;
}
.t-riasec-current {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-text);
  margin: var(--s-4, 1.5rem) 0 var(--s-3, 1rem);
  padding: var(--s-3, 1rem) var(--s-4, 1.5rem);
  background: rgba(199, 81, 53, 0.04);
  border-left: 3px solid var(--c-vermilion, #c75135);
  border-radius: 0 2px 2px 0;
}
.t-riasec-current strong {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--c-vermilion, #c75135);
  letter-spacing: 0.05em;
  margin-left: 0.5em;
}

/* ════════════════════════════════════════════════════════════════════
   IKIGAI — 2×2 quadrant Venn-matrix layout (audit Group A-5).
   The 4 circles render as a 2×2 grid that visually echoes the classic
   ikigai Venn. Each quadrant has its own accent colour pulled from the
   editorial palette. Centre carries a decorative kanji + 'ikigai' label
   so the geometry reads as the spec's '4-circle overlap' diagram.
   ════════════════════════════════════════════════════════════════════ */

.coaching-section .t-ikigai-venn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4, 1.5rem);
  margin: var(--s-4, 1.5rem) 0 var(--s-5, 1.75rem);
  position: relative;
  isolation: isolate;
}
@media (max-width: 720px) {
  .coaching-section .t-ikigai-venn {
    grid-template-columns: 1fr;
  }
}
.coaching-section .t-ikigai-quadrant {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 3px;
  padding: var(--s-4, 1.5rem);
  position: relative;
  isolation: isolate;
}
/* Per-quadrant accent colour — pulled from the editorial palette so
   the 4 circles read as distinct without breaking the palette discipline. */
.t-ikigai-quadrant--love {
  border-top: 3px solid var(--c-vermilion, #c75135);
}
.t-ikigai-quadrant--good_at {
  border-top: 3px solid var(--c-gold, #b89968);
}
.t-ikigai-quadrant--world_needs {
  border-top: 3px solid var(--c-navy, #1e2d4f);
}
.t-ikigai-quadrant--paid_for {
  border-top: 3px solid var(--c-gold-darker, #9c7e4f);
}
.t-ikigai-quadrant__head {
  margin-bottom: var(--s-3, 1rem);
  padding-bottom: var(--s-2, 0.5rem);
  border-bottom: 1px solid var(--c-border-soft);
}
.t-ikigai-quadrant__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--c-navy);
  letter-spacing: -0.008em;
  margin: 0;
}
.t-ikigai-quadrant__q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--c-text-muted);
  margin: var(--s-1, 0.25rem) 0 0;
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions li {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions li label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.35rem 0.5rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--c-text);
  transition: background 180ms ease;
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions li label:hover {
  background: rgba(184, 153, 104, 0.06);
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions li
  input[type="checkbox"]:checked + * {
  /* The text node after the checkbox is what we want to emphasise.
     Adjacent-sibling can't see the inline `" " + suggestion` text,
     so instead we colour the whole label when its first child input is checked. */
}
.coaching-section .t-ikigai-quadrant ul.t-ikigai-suggestions li label:has(input[type="checkbox"]:checked) {
  background: rgba(199, 81, 53, 0.06);
  font-weight: 500;
  color: var(--c-navy);
}

/* Centre annotation — sits in the gap between the 4 quadrants */
.t-ikigai-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-behind, -1); /* OMOIKANE-1097 — decorative anchor */
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.t-ikigai-centre__kanji {
  font-family: var(--font-cjk);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--c-vermilion, #c75135);
  opacity: 0.18;
  letter-spacing: 0.1em;
}
.t-ikigai-centre__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  opacity: 0.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .t-ikigai-centre { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   CAREER GRAPH — 6-node timeline (audit Group A-5).
   The 6 fieldsets were 6 stacked forms. Now they render as 6 cards
   threaded on a horizontal vermilion timeline rule. Satisfaction
   switched from <select> to range slider (matches wheel-of-life pattern).
   ════════════════════════════════════════════════════════════════════ */

.coaching-section .t-career-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3, 1rem);
  margin: var(--s-5, 1.75rem) 0;
}
@media (min-width: 960px) {
  .coaching-section .t-career-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 540px) {
  .coaching-section .t-career-timeline {
    grid-template-columns: 1fr;
  }
}
.coaching-section .t-career-timeline::before {
  /* horizontal timeline rule weaving through the cards */
  content: '';
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-gold-soft) 8%,
    var(--c-gold) 50%,
    var(--c-gold-soft) 92%,
    transparent 100%);
  opacity: 0.4;
  pointer-events: none;
  z-index: var(--z-behind, -1); /* OMOIKANE-1097 — timeline decoration anchor */
}
@media (max-width: 540px) {
  .coaching-section .t-career-timeline::before { display: none; }
}
.coaching-section fieldset.t-career-node {
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  padding: var(--s-3, 1rem) var(--s-4, 1.5rem);
  position: relative;
  overflow: visible;
}
.t-career-node__legend {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 0 var(--s-2, 0.5rem);
  margin-left: var(--s-2, 0.5rem);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.t-career-node__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1px solid var(--c-vermilion, #c75135);
  color: var(--c-vermilion, #c75135);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
}
.t-career-node__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: var(--s-3, 1rem);
}
.t-career-node__label > span {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.t-career-node__label input[type="text"] {
  width: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  background: var(--c-cream);
}
.t-career-node__sat {
  margin: var(--s-3, 1rem) 0;
  padding-top: var(--s-2, 0.5rem);
  border-top: 1px solid var(--c-border-soft);
}
.t-career-node__sat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.t-career-node__sat-head label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.t-career-node__sat-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--c-vermilion, #c75135);
}
.t-career-node__sat-row {
  display: flex;
  align-items: center;
  gap: var(--s-3, 1rem);
  margin-top: var(--s-1, 0.25rem);
}
.t-career-node__sat-row input[type="range"] {
  flex: 1;
}
.t-career-node__skip {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
}
.t-career-node__skip span {
  font-family: var(--font-serif);
  font-style: italic;
}
.coaching-section fieldset.t-career-tags {
  border: 0;
  padding: 0;
  margin: var(--s-2, 0.5rem) 0 0;
}
.coaching-section fieldset.t-career-tags legend {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-1, 0.25rem);
}
.coaching-section fieldset.t-career-tags label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  padding: 0.2rem 0.4rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER + OVERLAY + AI-DISCLOSURE BADGE — final residual editorial.
   These surfaces had inline styles with generic chrome. CSS rules below
   override them via the stable data-* attribute hooks.
   ════════════════════════════════════════════════════════════════════ */

/* Crisis-pause link footer — "Not coping today? Pause everything →" */
[data-crisis-pause="true"] {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--c-text-muted) !important;
  padding: var(--s-3, 1rem) var(--s-4, 1.5rem) !important;
  margin-top: var(--s-4, 1.5rem) !important;
  border-top: 1px solid var(--c-border-soft);
  background: transparent;
}
[data-crisis-pause="true"] a {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--c-navy) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--c-vermilion, #c75135) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 180ms ease;
}
[data-crisis-pause="true"] a:hover {
  text-decoration-thickness: 2px;
}

/* AI-disclosure footer — "Omoikane uses AI. About our AI →" */
div[data-ai-disclosure="true"][role="contentinfo"] {
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
  color: var(--c-text-muted) !important;
  padding: var(--s-3, 1rem) var(--s-4, 1.5rem) !important;
  margin-top: var(--s-3, 1rem) !important;
  border-top: 1px solid var(--c-border-soft) !important;
  background: transparent;
  text-align: center;
}
div[data-ai-disclosure="true"][role="contentinfo"] a {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--c-navy) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--c-gold-soft) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
div[data-ai-disclosure="true"][role="contentinfo"] a:hover {
  text-decoration-color: var(--c-vermilion, #c75135) !important;
}

/* AI-assisted inline badge — editorial pill (uppercase micro-spec) */
span[data-ai-disclosure="true"] {
  background: var(--c-cream-soft, #fbf9f4) !important;
  color: var(--c-navy) !important;
  border: 1px solid var(--c-gold-soft) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  padding: 0.2em 0.55em !important;
}

/* Sitewide loading overlay — magazine paper-stock dialog */
#omk-loading-overlay {
  background: rgba(26, 22, 18, 0.55) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#omk-loading-overlay > div {
  background: var(--c-cream-soft, #fbf9f4) !important;
  color: var(--c-navy) !important;
  border-radius: 2px !important;
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-vermilion, #c75135);
  box-shadow: 0 24px 60px -20px rgba(26, 22, 18, 0.35) !important;
  font-family: var(--font-sans);
  padding: var(--s-5, 1.75rem) var(--s-6, 2rem) !important;
  max-width: 28rem !important;
}
#omk-loading-title {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  color: var(--c-navy) !important;
  letter-spacing: -0.008em;
}
#omk-loading-desc {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  color: var(--c-text-muted) !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}
#omk-loading-overlay svg circle {
  stroke: var(--c-vermilion, #c75135) !important;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD CREATIVE REDESIGN (operator-requested 2026-05-16):
   - Hanko-style vermilion 思兼 seal beside the wordmark
   - "editor's desk" italic Cormorant subtitle
   - Drop-cap H on the dashboard greeting
   - Magazine table-of-contents on the KPI band (Vol. I §1 §2 §3 §4)
   - Decorative ornament at the top of the side-nav
   ════════════════════════════════════════════════════════════════════ */

/* Brand block — overrides the inherited .side__brand */
.side--navy .side__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3, 1rem);
  padding: var(--s-2, 0.5rem) var(--s-3, 1rem) var(--s-4, 1.5rem);
  margin-bottom: var(--s-3, 1rem);
  position: relative;
}
.side--navy .side__brand img { display: none; }  /* image replaced by seal */

/* Hanko (Japanese personal-stamp) seal — solid vermilion square with
   the kanji in cream, slightly skewed like a wet ink-stamp impression.
   Sized so it reads as a brand glyph, not decoration. */
.side__brand-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.side__brand-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-vermilion, #c75135);
  color: var(--c-cream, #f5f1e8);
  font-family: var(--font-cjk);
  font-size: 0.95rem;
  font-style: normal;
  letter-spacing: -0.05em;
  border-radius: 2px;
  position: relative;
  /* skew + corner-clip for the "rubber stamp" feel */
  transform: rotate(-2deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.15),
    inset 0 0 0 2px var(--c-vermilion, #c75135),
    inset 0 0 0 3px rgba(245, 241, 232, 0.15);
  /* slight grain texture overlay so the stamp doesn't read as a button */
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(245, 241, 232, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.10) 0%, transparent 50%);
}
.side__brand-seal::before,
.side__brand-seal::after {
  /* tiny vermilion ink-bleed marks at the corners */
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--c-vermilion, #c75135);
  border-radius: 50%;
}
.side__brand-seal::before { top: -2px; left: -2px; }
.side__brand-seal::after  { bottom: -2px; right: -2px; }

/* Wordmark stack */
.side__brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.side__brand-name {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.45rem;
  /* OMOIKANE-1293 — cream on the dark navy rail (was navy = invisible after
     the relight; the section sidebar is dark, matching the template). */
  color: var(--c-cream);
  letter-spacing: -0.012em;
}
.side__brand-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--c-gold-soft, #d8c8a8);
  opacity: 0.75;
  letter-spacing: 0.04em;
}

/* Decorative ornament — three vermilion dots above the brand for the
   "pressmark" feel.  Pseudo-element, no markup change. */
.side--navy::before {
  content: '· · ·';
  position: absolute;
  top: var(--s-3, 1rem);
  left: var(--s-3, 1rem);
  font-family: var(--font-serif);
  color: var(--c-vermilion, #c75135);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  opacity: 0.45;
  pointer-events: none;
}

/* Drop-cap — magazine article opener. OMOIKANE-585 (QA pass 3 P2-1):
   the universal selector targeting EVERY .page-head__title broke
   acronym / product-name titles ("STAR-R story drafts" rendered as
   "S | TAR-R story drafts" because the vermilion drop-cap S floated
   away from the rest of the word). Switched to opt-in via the
   `.page-head__title--magazine` modifier — only sentence-shaped
   titles like "Hello, Kyriakos" should opt in. */
.main .page-head__title--magazine::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 0.85;
  color: var(--c-vermilion, #c75135);
  float: left;
  padding: 0.1em 0.18em 0 0;
  margin-right: 0.06em;
  letter-spacing: -0.04em;
}
@media (max-width: 720px) {
  .main .page-head__title--magazine::first-letter {
    font-size: 3rem;
  }
}

/* Magazine TOC on the KPI band — replace the spec-sheet line with a
   "VOL. I · CONTENTS" treatment. Each KPI tile gets a small "§n" roman
   numeral and an italic-serif sub-label, dot leader rule between. */
.main .grid.grid--4 {
  position: relative;
  padding-top: var(--s-5, 1.75rem);
}
.main .grid.grid--4::before {
  content: 'VOL. I · CONTENTS';
  position: absolute;
  top: var(--s-2, 0.5rem);
  left: var(--s-4, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold-darker, #9c7e4f);
  font-weight: 500;
}
.main .grid.grid--4 > .kpi {
  counter-increment: kpi-counter;
}
.main .grid.grid--4 > .kpi .kpi__label::before {
  content: '§' counter(kpi-counter) ' · ';
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-gold-darker, #9c7e4f);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-right: 0.3em;
}
.main .grid.grid--4 {
  counter-reset: kpi-counter;
}

/* Editor's annotation under the H1 — italic Cormorant signature line */
.main .page-head__sub::before {
  content: 'From the editor — ';
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-vermilion, #c75135);
}

/* Slight rotation-on-hover for the hanko seal — adds personality */
.side__brand:hover .side__brand-seal {
  transform: rotate(0deg) scale(1.04);
  transition: transform 280ms var(--ease-editorial, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.side__brand .side__brand-seal {
  transition: transform 280ms var(--ease-editorial, cubic-bezier(0.2, 0.7, 0.2, 1));
}
@media (prefers-reduced-motion: reduce) {
  .side__brand:hover .side__brand-seal { transform: rotate(-2deg); }
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — auto-honors prefers-color-scheme.
   Operator-asked 2026-05-16: light + dark on both www + daemon,
   default to user's system preference, no manual toggle (per the
   privacy posture — no per-user pref stored, no JS, no cookie).
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   DARK-MODE WHITE-BOX FIX (operator-flagged 2026-05-16):
   Many surfaces still rendered with cream/white backgrounds in dark
   mode because they used `var(--c-cream)` / `var(--c-cream-soft)` /
   `var(--c-white)` for `background:` — but those tokens stay stable
   across modes (they double as text-on-dark colors). This block
   FORCES dark surface bg on every offending selector via the
   prefers-color-scheme: dark @media context.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   INLINE-STYLE DARK-MODE OVERRIDE (operator-flagged 2026-05-16):
   Some legacy views (discover.rs, parts of workflow.rs) hardcode
   `style="background: var(--c-cream...); ..."` or `background: white`
   inline. Inline styles beat CSS rules unless we use attribute selectors
   with !important. Catch those inline-cream/white surfaces and flip
   them to dark slate in dark mode.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   PASTEL CALLOUT-BANNER DARK-MODE SWEEP (operator-flagged 2026-05-17):
   Many in-app banners use literal pastel hex backgrounds via inline
   styles (#fef3c7 amber, #ecfeff cyan, #fdecea pink, #e8f3e8 mint,
   #fff8f0 / #fff4d0 cream variants, #fff / #ffffff plain white).
   In dark mode these become "white islands" that break the editorial
   flow. Catch them with attribute-substring selectors + flip to
   dark slate.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   CHIP-RADIO ACTIVE-STATE DARK OVERRIDE (operator-flagged 2026-05-17):
   /postings/discover filter pills use inline `background: var(--c-navy)`
   for the active (selected) state. In dark mode `--c-navy` flips to
   ivory (#e8e1d0) per the editorial design system, so the active chip
   becomes ivory-on-dark with light cream text — the operator's bug:
   "filter-pills when selected become white during dark-theme".
   Fix: explicit override of active-state chip-radios + .chip aria-pressed
   to a dark slate with bright vermilion border so the selection still
   reads. Uses attribute-substring selectors because the active styling
   is inline (high-specificity).
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-438 — `@media (prefers-color-scheme: dark)` mirror of the
 * OMOIKANE-436 universal inline-navy-bg override. The site sets
 * `<html data-theme="auto|light|dark">` via JS post-load; the default
 * for users who haven't toggled is "auto", which DOESN'T match
 * `:root[data-theme="dark"]`. For those users, only the @media rule
 * fires — and the previous @media rule (a) used a `label.chip-radio`
 * prefix so it missed `<a>` chips like the discover Active-filters,
 * and (b) painted cream text on vermilion = the operator's "still
 * white" complaint.
 *
 * Element-type-agnostic `[style*="…"]` matches every tag (a / div /
 * button / span / label / aside) carrying the inline navy bg —
 * active-filter chips + skip-link + coaching-timeline + post_placement
 * + rationale_modal + esco-chips + 8+ other sites identified in the
 * OMOIKANE-436 audit. Same dark-friendly slate + vermilion accent.
 * ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   GATE REASONING BLOCK (operator-flagged 2026-05-17 E2E walk):
   The AI's gate-reasoning is markdown. The view at views/match_gate.rs
   now passes it through pulldown-cmark, producing real <p>, <strong>,
   <em>, <a> tags. These rules give the rendered block proper
   paragraph spacing and emphasis weight so it reads as editorial
   prose, not a SaaS monoblock.
   ════════════════════════════════════════════════════════════════════ */

.gate-reasoning {
  font-family: var(--font-serif-body, var(--font-serif));
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
}
.gate-reasoning p {
  margin: 0 0 var(--s-3) 0;
}
.gate-reasoning p:last-child {
  margin-bottom: 0;
}
.gate-reasoning strong {
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0.01em;
}
.gate-reasoning em {
  font-style: italic;
  color: var(--c-text);
}
.gate-reasoning a {
  color: var(--c-vermilion);
  text-decoration: underline;
  text-decoration-color: rgba(199, 81, 53, 0.35);
  text-underline-offset: 2px;
}
.gate-reasoning a:hover {
  text-decoration-color: var(--c-vermilion);
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL FEATURE SYSTEM — 2026-05-17 comprehensive elevation
   ════════════════════════════════════════════════════════════════════

   Operator-flagged 2026-05-17 (frontend-design skill pass): elevate
   the post-login surfaces from "decent editorial chrome" to
   "magazine-feature unforgettable". Builds on the editorial-shrine
   foundation (Cormorant + Manrope + Newsreader, vermilion accent,
   hanko seal, kanji watermark) and adds the next layer of primitives:

   * `.feature__lead` — drop-cap first letter + first paragraph
   * `.feature__pull-quote` — italic Cormorant 1.6rem with em-dash flourish
   * `.feature__dateline` — city · date · byline in small-caps Manrope
   * `.feature__marginalia` — side-note column for citations + footnotes
   * `.feature__rule--gold` — ornamental gold-soft hairline
   * `.feature__numerals` — italic Cormorant numerals for KPIs
   * `.feature__hanko-stamp` — vermilion-square seal callout
   * `.feature__correspondence` — letterpress Q&A timeline for ask-coach

   Per-stage accent system: every step of the workflow gets a distinct
   accent so the user feels progression as they walk gate → cv → letter
   → email. Vermilion stays the singular accent for *decisive* moments
   inside any step; the per-stage accent recolours the step indicator
   and the second word of each step's H1.
   ════════════════════════════════════════════════════════════════════ */

.feature__lead > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-vermilion);
  float: left;
  font-size: 4rem;
  line-height: 0.85;
  margin: 0.2rem 0.45rem 0 0;
  padding-right: 0.05em;
}

.feature__pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--c-navy);
  margin: var(--s-5) auto;
  padding: 0 var(--s-5);
  max-width: 38em;
  position: relative;
  text-align: center;
}
.feature__pull-quote::before,
.feature__pull-quote::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--c-gold);
  margin: var(--s-3) auto;
}

.feature__dateline {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
}
.feature__dateline > span:not(:last-child)::after {
  content: " ·";
  color: var(--c-gold-soft);
  margin-left: 0.4em;
}

.feature__marginalia {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}
@media (min-width: 1100px) {
  .feature__marginalia {
    float: right;
    width: 13em;
    margin: 0.4em -14.5em 0.4em var(--s-3);
    padding-left: var(--s-3);
    border-left: 1px solid var(--c-gold-soft);
  }
}

.feature__rule--gold {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--c-gold-soft) 20%,
              var(--c-gold) 50%,
              var(--c-gold-soft) 80%,
              transparent 100%);
  margin: var(--s-5) auto;
  max-width: 12em;
}

.feature__numerals {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: -0.01em;
}

.feature__hanko-stamp {
  display: inline-block;
  width: 2.2em;
  height: 2.2em;
  background: var(--c-vermilion);
  color: var(--c-cream);
  font-family: var(--font-cjk);
  font-size: 1rem;
  line-height: 2.2;
  text-align: center;
  border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow: 0 0 0 2px rgba(199, 81, 53, 0.18),
              0 2px 4px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
  margin-right: 0.6em;
}

.feature__footnote-marker {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: var(--c-vermilion);
  text-decoration: none;
  margin-left: 0.05em;
}
.feature__footnote-marker:hover {
  color: var(--c-vermilion);
  text-decoration: underline;
}
.feature__footnotes {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-gold-soft);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}
.feature__footnotes ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: footnote;
}
.feature__footnotes li {
  counter-increment: footnote;
  position: relative;
  padding-left: 2em;
  margin-bottom: var(--s-2);
}
.feature__footnotes li::before {
  content: counter(footnote);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--c-vermilion);
  font-size: 0.9em;
}
/* OMOIKANE-257 (2026-05-19): the back-link inside each footnote item
 * lets the reader jump back to where the citation was first used.
 * Standard footnote pattern (Wikipedia / academic-papers style).
 * One ↩ per in-line occurrence so a citation cited 3× has 3 jump-
 * back targets. Subdued styling so the body remains the focal point. */
.feature__footnote-back {
  color: var(--c-gold-soft);
  text-decoration: none;
  font-size: 0.95em;
  margin-left: 0.25em;
  padding: 0 0.15em;
}
.feature__footnote-back:hover,
.feature__footnote-back:focus {
  color: var(--c-vermilion);
  text-decoration: none;
}
.feature__footnote-body {
  /* Slightly differentiated from the back-link, so the eye lands on
   * the citation label first then notices the jump-back affordance. */
  font-weight: 500;
  color: var(--c-text, #2a2a2a);
}
/* OMOIKANE-263 (2026-05-19): the footnote body becomes an `<a>` link
 * to /profile/evidence/<id> whenever a `§<hex>` chunk-id is present.
 * Vermilion underline-on-hover so the user reads it as actionable. */
.feature__footnote-evidence-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.5px dotted var(--c-gold-soft);
}
.feature__footnote-evidence-link:hover,
.feature__footnote-evidence-link:focus {
  color: var(--c-vermilion);
  border-bottom-color: var(--c-vermilion);
  text-decoration: none;
}

/* Per-stage accent colour system */
.stage--gate   { --stage-accent: var(--c-vermilion); }
.stage--cv     { --stage-accent: var(--c-gold); }
.stage--letter { --stage-accent: var(--c-navy); }
.stage--email  { --stage-accent: #3a3a3a; }

.stage-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.stage-heading__accent {
  color: var(--stage-accent, var(--c-vermilion));
}

/* Letterpress Q&A timeline (ask-coach surface) */
.feature__correspondence {
  margin-top: var(--s-5);
}
.feature__correspondence-entry {
  margin-bottom: var(--s-5);
  position: relative;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-gold-soft);
}
.feature__correspondence-entry:last-child {
  margin-bottom: 0;
}
.feature__correspondence-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
  font-size: 0.92rem;
  margin: 0 0 var(--s-1) 0;
  letter-spacing: 0.01em;
}
.feature__correspondence-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-navy);
  margin: 0 0 var(--s-3) 0;
  line-height: 1.35;
}
.feature__correspondence-answer {
  font-family: var(--font-serif-body, var(--font-serif));
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
}
.feature__correspondence-answer p {
  margin: 0 0 var(--s-3) 0;
}
.feature__correspondence-answer p:last-child {
  margin-bottom: 0;
}

/* Proactive ND-Support nudge banner — soft inline callout above the
   dashboard welcome wizard when the user's recent mood entries match
   a known trigger (currently 3-consecutive-tired). Vermilion accent
   to read as "pause, breathe" rather than "alarm". */
.nd-nudge-banner {
  background: rgba(215, 101, 73, 0.06);
  border-left: 3px solid var(--c-accent, #d76549);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  border-radius: 4px;
}
.nd-nudge-banner__heading {
  font-family: var(--ff-display, "Cormorant Garamond", serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.nd-nudge-banner__body {
  margin: 0;
  line-height: 1.5;
}
.nd-nudge-banner__source {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}
.nd-nudge-banner__source a {
  color: var(--c-accent, #d76549);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Network Agent — "Due for follow-up" section on /network. Vermilion
   left rule reads as "pay attention" without screaming. Rows pack
   dense; one row per overdue contact with an inline "Mark contacted"
   button that hits the existing POST /network/:id/mark_contacted. */
.network-due-section {
  border-left: 3px solid var(--c-accent, #d76549);
  background: rgba(215, 101, 73, 0.04);
}
.network-due-list .network-due-row:last-child {
  border-bottom: none !important;
}
.network-due-overdue {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Posting-body structured formatter — operator-flagged 2026-05-18
   "wall of text" complaint. Replaces the white-space:pre-wrap render
   on the discover detail page with semantic h3 / ul / p elements.
   Drives both the heuristic fallback (when the LLM structured
   extractor hasn't run yet) AND the "Show full posting (source-of-
   truth verify)" accordion under the structured render. */
.posting-body {
  line-height: 1.6;
}
.posting-body__paragraph {
  margin: 0 0 var(--s-3, 0.875rem) 0;
}
.posting-body__heading {
  margin: var(--s-4, 1.25rem) 0 var(--s-2, 0.5rem) 0;
  font-family: var(--f-display, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-text, #1a1a1a);
}
.posting-body__heading:first-child {
  /* First heading at top of body should NOT carry extra top-margin
     above what the section's own padding already gives — would look
     like a gap above the section title. */
  margin-top: 0;
}
.posting-body__list {
  margin: 0 0 var(--s-3, 0.875rem) var(--s-2, 0.5rem);
  padding-left: var(--s-4, 1.25rem);
  list-style: disc outside;
}
.posting-body__item {
  margin: 0 0 0.35rem 0;
  /* Tighter than paragraphs, looser than dense list — readability
     when the list runs ~8-10 items for a typical role's responsibilities. */
}
.posting-body__item:last-child {
  margin-bottom: 0;
}

/* =============================================================
   OMOIKANE-339 — /postings/discover editorial redesign.
   Each result is a "classifieds entry" with a hanging margin
   numeral, source marginalia, italic Cormorant title, and a
   paper-shift hover. Hero re-orchestrated as "Issue №X" framing.
   ============================================================= */

/* -- Hero masthead -------------------------------------------- */
.discover-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(30, 45, 79, 0.18);
}
.discover-masthead__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vermilion, #d44d2a);
  margin: 0 0 var(--s-1) 0;
}
.discover-masthead__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--c-navy, #1e2d4f);
  margin: 0;
}
.discover-masthead__title em {
  font-style: normal;
  color: var(--c-vermilion, #d44d2a);
}
.discover-masthead__meta {
  font-family: var(--font-serif-body);
  font-size: 0.92em;
  color: var(--c-muted, #6a6a6a);
  text-align: right;
  line-height: 1.5;
  margin: 0;
}
.discover-masthead__meta strong {
  color: var(--c-navy, #1e2d4f);
  font-weight: 600;
}

/* -- Active-filter inline strip (TOC-style) ------------------- */
.discover-toc {
  font-family: var(--font-serif-body);
  font-size: 0.96em;
  color: var(--c-navy, #1e2d4f);
  margin: 0 0 var(--s-4) 0;
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(184, 150, 90, 0.4);
  border-bottom: 1px solid rgba(184, 150, 90, 0.4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.discover-toc__label {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-vermilion, #d44d2a);
}
.discover-toc__item { font-style: italic; }
.discover-toc__item strong {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-navy, #1e2d4f);
}
.discover-toc__sep { color: rgba(184, 150, 90, 0.6); font-style: normal; }

/* -- Editorial entry list (replaces .discover-card) ----------- */
.editorial-entries {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: editorial-entry;
}
.editorial-entry {
  counter-increment: editorial-entry;
  display: grid;
  grid-template-columns:
    [numeral] 4.5rem
    [marginalia] 7.5rem
    [body] minmax(0, 1fr)
    [signals] 14rem;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4) var(--s-2);
  border-top: 1px solid rgba(184, 150, 90, 0.45);
  position: relative;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              background-color 200ms ease;
  opacity: 0;
  transform: translateY(8px);
  animation: editorial-entry-rise 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--idx, 0) * 40ms);
}
.editorial-entry:last-child {
  border-bottom: 1px solid rgba(184, 150, 90, 0.45);
}
.editorial-entry:hover {
  background-color: var(--c-cream-soft, #fbf9f4);
  transform: translateY(-2px) rotate(-0.25deg);
  box-shadow: 0 14px 32px -20px rgba(30, 45, 79, 0.28),
              0 4px 10px -6px rgba(212, 77, 42, 0.18);
}
@keyframes editorial-entry-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-entry {
    animation: none;
    opacity: 1;
    transform: none;
    transition: background-color 100ms ease;
  }
  .editorial-entry:hover { transform: none; box-shadow: none; }
}

/* -- Margin numeral (hanging "01" classifieds tag) ------------ */
.editorial-entry__numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 0.9;
  color: var(--c-vermilion, #d44d2a);
  text-align: right;
  padding-top: 0.1em;
  letter-spacing: -0.03em;
}
.editorial-entry__numeral::before {
  content: counter(editorial-entry, decimal-leading-zero);
}

/* -- Marginalia (source + date stacked, small-caps) ----------- */
.editorial-entry__marginalia {
  font-family: var(--font-sans);
  font-size: 0.74em;
  line-height: 1.55;
  color: var(--c-muted, #6a6a6a);
  padding-top: 0.35em;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.editorial-entry__source-kind {
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-navy, #1e2d4f);
}
.editorial-entry__date {
  font-family: var(--font-serif-body);
  font-size: 1.05em;
  font-style: italic;
  color: var(--c-muted, #6a6a6a);
}
.editorial-entry__location {
  font-family: var(--font-serif-body);
  font-size: 1.05em;
  color: var(--c-muted, #6a6a6a);
}

/* -- Body (title / company / dek / tags) ---------------------- */
.editorial-entry__body { min-width: 0; }
.editorial-entry__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--c-navy, #1e2d4f);
  margin: 0 0 0.25em 0;
}
.editorial-entry__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 200ms ease;
}
.editorial-entry__title a:hover,
.editorial-entry__title a:focus-visible { background-size: 100% 1px; }
.editorial-entry__byline {
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-navy, #1e2d4f);
  margin: 0 0 var(--s-2) 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  flex-wrap: wrap;
}
/* OMOIKANE-449 — company logo + monogram fallback to the left of byline. */
.editorial-entry__logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(0,0,0,0.04);
  flex: 0 0 auto;
}
.editorial-entry__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--c-cream, #f5f1e8);
  color: var(--c-navy, #1e2d4f);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0;
  flex: 0 0 auto;
  border: 1px solid var(--c-gold-soft, #d4c7a6);
}

.editorial-entry__byline-anon {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-muted, #6a6a6a);
}
.editorial-entry__dek {
  font-family: var(--font-serif-body);
  font-size: 1.02em;
  line-height: 1.5;
  color: var(--c-text, #2a2a2a);
  margin: 0 0 var(--s-3) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.editorial-entry__tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 0.78em;
}
.editorial-entry__tag {
  padding: 0.15em 0.6em;
  border: 1px solid rgba(184, 150, 90, 0.55);
  border-radius: 999px;
  letter-spacing: 0.06em;
  color: var(--c-navy, #1e2d4f);
  background: transparent;
}
.editorial-entry__tag--seniority {
  background: var(--c-navy, #1e2d4f);
  color: var(--c-cream, #f5f1e8);
  border-color: var(--c-navy, #1e2d4f);
  font-weight: 600;
}
.editorial-entry__tag--remote {
  color: var(--c-vermilion, #d44d2a);
  border-color: rgba(212, 77, 42, 0.45);
  font-weight: 600;
}
.editorial-entry__tag--salary {
  color: #1d6f33;
  border-color: rgba(42, 157, 74, 0.45);
  font-weight: 600;
}
.editorial-entry__tag--esco {
  color: var(--c-gold-soft, #8a7438);
  border-color: rgba(184, 150, 90, 0.5);
  background: rgba(184, 150, 90, 0.08);
}

/* OMOIKANE-390 fair-pay pill — three bands keyed off the local-corpus
   salary aggregate from OMOIKANE-388. Hover surfaces the tooltip with
   p25/p50/p75 + optional Eurostat reference. */
.editorial-entry__tag--fairpay {
  font-weight: 600;
  font-size: 0.85em;
}
.editorial-entry__tag--fairpay-below {
  color: #8a4a1d;
  border-color: rgba(190, 110, 40, 0.5);
  background: rgba(190, 110, 40, 0.08);
}
.editorial-entry__tag--fairpay-in_band {
  color: #1d6f33;
  border-color: rgba(42, 157, 74, 0.45);
  background: rgba(42, 157, 74, 0.06);
}
.editorial-entry__tag--fairpay-above {
  color: #1f4d8a;
  border-color: rgba(46, 90, 158, 0.45);
  background: rgba(46, 90, 158, 0.07);
}

/* -- Signals + CTA rail (right column) ------------------------ */
.editorial-entry__signals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  text-align: right;
  font-family: var(--font-sans);
}
.editorial-entry__match {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.editorial-entry__match small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.32em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.35em;
  color: var(--c-muted, #6a6a6a);
}
.editorial-entry__match--strong { color: #1d6f33; }
.editorial-entry__match--mid    { color: var(--c-amber, #c98a00); }
.editorial-entry__match--weak   { color: var(--c-vermilion, #d44d2a); }
.editorial-entry__confidence {
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.18em 0.7em;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.editorial-entry__confidence--high { color: #1d6f33; }
.editorial-entry__confidence--mid  { color: var(--c-amber, #c98a00); }
.editorial-entry__confidence--low  { color: var(--c-vermilion, #d44d2a); }
.editorial-entry__cta {
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.5em 1em;
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-cream, #f5f1e8);
  background: var(--c-navy, #1e2d4f);
  border: 1px solid var(--c-navy, #1e2d4f);
  border-radius: 2px;
  transition: background 180ms ease, transform 180ms ease;
}
.editorial-entry__cta:hover,
.editorial-entry__cta:focus-visible {
  background: var(--c-vermilion, #d44d2a);
  border-color: var(--c-vermilion, #d44d2a);
  transform: translateX(2px);
}
.editorial-entry__cta::after { content: "→"; }
.editorial-entry__alt-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  font-size: 0.78em;
  font-family: var(--font-serif-body);
  font-style: italic;
  margin-top: 0.25em;
}
.editorial-entry__alt-links a {
  color: var(--c-muted, #6a6a6a);
  text-decoration: underline;
  text-decoration-color: rgba(184, 150, 90, 0.5);
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.editorial-entry__alt-links a:hover {
  color: var(--c-vermilion, #d44d2a);
  text-decoration-color: currentColor;
}

/* -- Empty state (editorial-voice) ---------------------------- */
.discover-empty {
  margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-4);
  border-left: 4px solid var(--c-vermilion, #d44d2a);
  background: var(--c-cream-soft, #fbf9f4);
  display: grid;
  gap: var(--s-2);
}
.discover-empty__kicker {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vermilion, #d44d2a);
  margin: 0;
}
.discover-empty__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--c-navy, #1e2d4f);
  margin: 0;
}
.discover-empty__body {
  font-family: var(--font-serif-body);
  font-size: 1.02em;
  line-height: 1.55;
  color: var(--c-text, #2a2a2a);
  margin: 0;
  max-width: 60ch;
}

/* -- Mobile: collapse 4-col grid ------------------------------ */
@media (max-width: 880px) {
  .editorial-entry {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "numeral marginalia"
      "numeral body"
      "numeral signals";
  }
  .editorial-entry__numeral    { grid-area: numeral; font-size: 1.8rem; }
  .editorial-entry__marginalia { grid-area: marginalia; flex-direction: row; gap: var(--s-2); flex-wrap: wrap; }
  .editorial-entry__body       { grid-area: body; }
  .editorial-entry__signals    { grid-area: signals; align-items: flex-start; text-align: left; }
  .editorial-entry__alt-links  { justify-content: flex-start; }
  .editorial-entry__match { font-size: 1.8rem; }
}

/* -- OMOIKANE-343 dark-theme overrides ------------------------
   The OMOIKANE-339 redesign hard-coded `var(--c-cream-soft)` for
   the hover-bg of .editorial-entry and the empty-state bg.
   `--c-cream-soft` is intentionally NOT overridden in dark mode
   (it's a dual-use token — see the dark @media block comment near
   line 5482 of this file), so on dark theme the hover flashed to
   bright cream — an obvious theme violation.
   Override with a translucent ivory tint that works on any
   background, plus dial the shadow back so the lift doesn't blow
   out against the dark page. */

/* =============================================================
   OMOIKANE-348 — sidebar restructure.
   Adds the .side__star glyph prefix (vermilion, decorative) for
   the 3 operator-spec starred items (Profile / Goals / Daily
   Matches), a .side__lang chip-row for the inline language
   switcher inside the Settings group, and minor refinements to
   the section-label / item-label spacing for the new 9-group
   density.
   ============================================================= */
.side__star {
  display: inline-block;
  width: 1.1em;
  margin-right: 0.4em;
  color: var(--c-vermilion, #d44d2a);
  font-size: 0.95em;
  line-height: 1;
  text-align: center;
  transform: translateY(-0.05em);
  /* Pentagram is decorative — its visual weight is the
     way-finder. We do NOT add ::after content so screen readers
     don't read "pentagram star pentagram" — the aria-hidden on
     the span already mutes it; this keeps the layout clean. */
}
.side__nav li a.is-starred {
  /* Hairline left-accent for the starred items — pairs with the
     glyph to give 2-channel redundancy (color + position) for
     low-vision users who might not perceive the vermilion.
     ND-friendly per Article XXXVI: way-finders never rely on
     colour alone. */
  position: relative;
}
.side__nav li a.is-starred::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: var(--c-vermilion, #d44d2a);
  border-radius: 1px;
  opacity: 0.55;
}
.side__nav li a.is-starred.is-active::before {
  opacity: 1;
}
.side__label {
  /* Span wrapper around the i18n'd label text — needed so the
     star glyph + label can have independent baseline + colour
     without flexbox restructuring of the parent <a>. */
  flex: 1;
  min-width: 0;
}

/* -- Inline language switcher (lives in the Settings group) --- */
.side__lang {
  display: inline-flex;
  gap: 0.4em;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
}
.side__lang > a,
.side__lang > span {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 2px;
  text-decoration: none;
  color: var(--c-text-muted);
}
.side__lang > a:hover {
  color: var(--c-text);
  background: rgba(0, 0, 0, 0.04);
}
.side__lang > span.is-active {
  color: var(--c-cream, #f5f1e8);
  background: var(--c-vermilion, #d44d2a);
}

/* =============================================================
   OMOIKANE-348 — /dashboard editorial reframe.
   Drops the LinkedIn-KPI counters (Article XXXVI no-pressure) in
   favour of five quiet content blocks (In Motion / Today's Matches
   / Coach / Recent / Up Next) plus a header strip with the
   Article-XII Pause CTA. Same editorial vocabulary as
   /postings/discover — hanging numeral, italic Cormorant titles,
   gold-rule separators, vermilion accents.
   ============================================================= */

/* -- Header strip --------------------------------------------- */
.dash-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(30, 45, 79, 0.18);
}
.dash-header__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vermilion, #d44d2a);
  margin: 0 0 var(--s-1) 0;
}
.dash-header__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--c-navy, #1e2d4f);
  margin: 0;
}
.dash-header__name {
  font-style: normal;
  color: var(--c-vermilion, #d44d2a);
}
.dash-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.dash-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-navy, #1e2d4f);
  border: 1px solid var(--c-vermilion, #d44d2a);
  border-radius: 2px;
  background: transparent;
  transition: background 180ms ease, color 180ms ease;
}
.dash-pause:hover,
.dash-pause:focus-visible {
  background: var(--c-vermilion, #d44d2a);
  color: var(--c-cream, #f5f1e8);
}
.dash-pause__icon {
  font-size: 0.9em;
  letter-spacing: 0;
}
.dash-stage-glyph {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-vermilion, #d44d2a);
}

/* -- Block scaffold ------------------------------------------- */
.dash-block {
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(184, 150, 90, 0.45);
  position: relative;
}
.dash-block:last-of-type {
  border-bottom: 1px solid rgba(184, 150, 90, 0.45);
}
.dash-block__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.dash-block__numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-vermilion, #d44d2a);
  background: linear-gradient(135deg, var(--c-vermilion, #c73e1d) 0%, var(--c-gold, #b89968) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  min-width: 2.2em;
  letter-spacing: -0.02em;
}
.dash-block__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--c-navy, #1e2d4f);
  margin: 0;
}
.dash-block__more {
  margin-left: auto;
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 0.92em;
  color: var(--c-vermilion, #d44d2a);
  text-decoration: underline;
  text-decoration-color: rgba(212, 77, 42, 0.4);
  text-underline-offset: 3px;
}
.dash-block__more:hover { text-decoration-color: currentColor; }
.dash-block__empty,
.dash-block__suggest,
.dash-block__summary {
  font-family: var(--font-serif-body);
  font-size: 1.02em;
  line-height: 1.55;
  color: var(--c-text, #2a2a2a);
  margin: 0;
  max-width: 60ch;
}
.dash-block__empty a,
.dash-block__suggest a,
.dash-block__summary a {
  color: var(--c-vermilion, #d44d2a);
  text-decoration: underline;
  text-decoration-color: rgba(212, 77, 42, 0.4);
  text-underline-offset: 2px;
}
.dash-block__empty a:hover,
.dash-block__suggest a:hover { text-decoration-color: currentColor; }
.dash-block__cta-row { margin-top: var(--s-3); }
.dash-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.5em 1em;
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-cream, #f5f1e8);
  background: var(--c-navy, #1e2d4f);
  border: 1px solid var(--c-navy, #1e2d4f);
  border-radius: 2px;
  transition: background 180ms ease, transform 180ms ease;
}
.dash-cta:hover,
.dash-cta:focus-visible {
  background: var(--c-vermilion, #d44d2a);
  border-color: var(--c-vermilion, #d44d2a);
  transform: translateX(2px);
}
.dash-cta::after { content: "→"; }
.dash-arrow {
  font-family: var(--font-sans);
  color: var(--c-vermilion, #d44d2a);
}

/* -- 01 In Motion list ---------------------------------------- */
.dash-motion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.dash-motion {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  margin: 0 calc(var(--s-2) * -1);
  border-top: 1px dotted rgba(184, 150, 90, 0.35);
  border-radius: var(--r-md);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dash-motion:first-child { border-top: 0; }
.dash-motion:hover {
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
  border-top-color: transparent;
}
.dash-motion__main { flex: 1; min-width: 0; }
.dash-motion__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--c-navy, #1e2d4f);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 180ms ease;
}
.dash-motion__title:hover,
.dash-motion__title:focus-visible { background-size: 100% 1px; }
.dash-motion__company {
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted, #6a6a6a);
  margin: 0.15em 0 0 0;
}
.dash-motion__signals {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 0.82em;
  flex-shrink: 0;
}
.dash-motion__stage {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy, #1e2d4f);
  font-size: 0.72em;
  padding: 0.18em 0.55em;
  border: 1px solid rgba(184, 150, 90, 0.45);
  border-radius: 999px;
}
.dash-motion__score {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
}
.dash-motion__score--strong { color: #1d6f33; }
.dash-motion__score--mid    { color: var(--c-amber, #c98a00); }
.dash-motion__score--weak   { color: var(--c-vermilion, #d44d2a); }

/* -- 03 Coach corner badge ------------------------------------ */
.dash-coach-tier-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-navy, #1e2d4f);
  background: rgba(184, 150, 90, 0.18);
  border: 1px solid rgba(184, 150, 90, 0.45);
}

/* -- Quick access strip --------------------------------------- */
.dash-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(184, 150, 90, 0.45);
  font-family: var(--font-sans);
  font-size: 0.82em;
}
.dash-quick a {
  color: var(--c-navy, #1e2d4f);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 0.15em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, color 180ms ease;
}
.dash-quick a:hover,
.dash-quick a:focus-visible {
  color: var(--c-vermilion, #d44d2a);
  border-bottom-color: currentColor;
}
.dash-quick__sep {
  color: rgba(184, 150, 90, 0.6);
  font-style: normal;
}

/* -- Dark-theme overrides for the dashboard ------------------- */

/* -- Mobile fallback ------------------------------------------ */
@media (max-width: 720px) {
  .dash-header {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .dash-header__title { font-size: 2rem; }
  .dash-motion {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .dash-motion__signals {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-351 (2026-05-20) — menu reshape additions
   - Inline theme selector (replaces nav.theme menu item)
   - LinkedIn-style /profile summary
   - /onboarding landing, /self-motivation-letter, /paste-vacancy,
     /settling-in/{first-months,the-job,job-offers}
   - Forced-theme attribute selectors that beat the OS @media
   ════════════════════════════════════════════════════════════════════ */

/* -- Forced-theme via data-theme attribute ----------------------------
   When the user explicitly picks Light or Dark, the bootstrap script
   sets `<html data-theme="light|dark">`. Attribute selectors have
   higher specificity (0,1,1) than the @media (prefers-color-scheme)
   :root rule (0,0,1) — so these blocks win the cascade regardless of
   OS preference. Auto mode leaves data-theme="auto" which doesn't
   match either selector, so the @media falls through as before.
   -------------------------------------------------------------------- */

/* -- Inline theme selector (in the Settings group of the sidebar) ---- */
.side__theme {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem 0.7rem;
}
.side__theme-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-on-navy-muted, #b6c0d4);
  opacity: 0.7;
}
.side__theme-row {
  display: flex;
  gap: 0.3rem;
}
.side__theme-row button {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.22);
  color: var(--c-text-on-navy, #f5f1e8);
  border-radius: var(--r-sm, 4px);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.4rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.side__theme-row button:hover,
.side__theme-row button:focus-visible {
  background: rgba(245, 241, 232, 0.08);
  border-color: rgba(245, 241, 232, 0.45);
  outline: none;
}
.side__theme-row button.is-active {
  background: var(--c-vermilion, #c73e1d);
  border-color: var(--c-vermilion, #c73e1d);
  color: var(--c-cream, #f5f1e8);
}

/* -- LinkedIn-style /profile summary --------------------------------- */
.ps-shell {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
}
.ps-head {
  border-bottom: 1px solid var(--c-rule, var(--c-border));
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
}
.ps-head__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.ps-head__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 var(--s-2);
}
.ps-head__tagline {
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.ps-head__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--c-text-muted);
}
.ps-cols {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--s-6);
}
@media (max-width: 880px) {
  .ps-cols { grid-template-columns: 1fr; }
}
.ps-block {
  margin-bottom: var(--s-6);
}
.ps-block__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
}
.ps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.ps-item {
  border-left: 2px solid var(--c-border-soft, #efece4);
  padding-left: var(--s-4);
}
.ps-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.ps-item__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
}
.ps-item__period {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}
.ps-item__body {
  font-family: var(--font-serif-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
}
.ps-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ps-tag {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill, 999px);
  background: var(--c-cream-soft, #fbf9f4);
  color: var(--c-text);
}
.ps-mini { margin-bottom: var(--s-4); }
.ps-mini h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin: 0 0 0.4rem;
}
.ps-empty {
  font-family: var(--font-serif-body);
  font-style: italic;
  color: var(--c-text-muted);
  font-size: 0.95rem;
  margin: 0;
}
.ps-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule, var(--c-border));
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

/* -- /onboarding landing -------------------------------------------- */
.onb-shell {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
}
.onb-head { margin-bottom: var(--s-5); }
.onb-head__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.onb-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  margin: 0 0 var(--s-3);
}
.onb-head__title em {
  font-style: italic;
  color: var(--c-vermilion, #c73e1d);
}
.onb-head__lede {
  font-family: var(--font-serif-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0 0 var(--s-4);
  max-width: 36em;
}
.onb-head__cta {
  display: inline-block;
  margin-top: var(--s-2);
}
.onb-head__done {
  font-family: var(--font-serif-body);
  font-size: 1.0rem;
  color: var(--c-text);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-gold, #b89968);
  background: var(--c-cream-soft, #fbf9f4);
}
.onb-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-rule, var(--c-border));
}
.onb-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-rule, var(--c-border));
}
.onb-row__mark {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--c-vermilion, #c73e1d);
}
.onb-row__body { min-width: 0; }
.onb-row__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0rem;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.onb-row__title:hover,
.onb-row__title:focus-visible { border-bottom-color: var(--c-vermilion, #c73e1d); }
.onb-row__title.is-done { color: var(--c-text-muted); }
.onb-row__helper {
  font-family: var(--font-serif-body);
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin: 0.25rem 0 0;
  line-height: 1.45;
}
.onb-row__state {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  text-transform: lowercase;
  padding-top: 0.15rem;
}
.onb-foot {
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

/* -- /self-motivation-letter ---------------------------------------- */
.sml-shell {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--s-6);
}
@media (max-width: 880px) {
  .sml-shell { grid-template-columns: 1fr; }
}
.sml-head { grid-column: 1 / -1; }
.sml-head__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.sml-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 var(--s-3);
}
.sml-head__title em { font-style: italic; }
.sml-head__lede {
  font-family: var(--font-serif-body);
  font-size: 1.0rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
  max-width: 38em;
}
.sml-banner {
  grid-column: 1 / -1;
  background: var(--c-sage-bg, #d8e8dc);
  color: var(--c-sage-text, #4a6f55);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm, 4px);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  margin: 0;
}
.sml-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.sml-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.sml-body {
  width: 100%;
  min-height: 22rem;
  font-family: var(--font-serif-body);
  font-size: 1.05rem;
  line-height: 1.55;
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  background: var(--c-cream-soft, #fbf9f4);
  color: var(--c-text);
  border-radius: var(--r-md, 8px);
  resize: vertical;
}
.sml-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.sml-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--c-text-muted);
}
.sml-aside {
  font-family: var(--font-serif-body);
  font-size: 0.92rem;
  color: var(--c-text);
  border-left: 2px solid var(--c-border-soft, #efece4);
  padding-left: var(--s-4);
}
.sml-aside h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.sml-aside ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
}
.sml-aside li { margin-bottom: 0.45rem; line-height: 1.45; }

/* -- /paste-vacancy ------------------------------------------------- */
.paste-shell {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--s-6);
}
@media (max-width: 880px) {
  .paste-shell { grid-template-columns: 1fr; }
}
.paste-head { grid-column: 1 / -1; }
.paste-head__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.paste-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 var(--s-3);
}
.paste-head__title em { font-style: italic; }
.paste-head__lede {
  font-family: var(--font-serif-body);
  font-size: 1.0rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
  max-width: 38em;
}
.paste-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.paste-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.paste-field label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.paste-input,
.paste-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  background: var(--c-cream-soft, #fbf9f4);
  color: var(--c-text);
  border-radius: var(--r-md, 8px);
}
.paste-textarea {
  font-family: var(--font-serif-body);
  min-height: 12rem;
  resize: vertical;
  line-height: 1.55;
}
.paste-hint {
  font-family: var(--font-serif-body);
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.45;
}
.paste-or {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-muted);
  text-align: center;
  margin: 0;
  letter-spacing: 0.05em;
}
.paste-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.btn-link {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.paste-aside {
  font-family: var(--font-serif-body);
  font-size: 0.92rem;
  border-left: 2px solid var(--c-border-soft, #efece4);
  padding-left: var(--s-4);
}
.paste-aside h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.paste-aside ol { padding-left: 1.2rem; margin: 0 0 var(--s-3); }
.paste-aside li { margin-bottom: 0.45rem; line-height: 1.45; }
.paste-aside__note {
  font-style: italic;
  color: var(--c-text-muted);
  margin: 0;
}

/* -- /settling-in/* ------------------------------------------------ */
.settling-shell {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
}
.settling-head { margin-bottom: var(--s-5); }
.settling-head__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}
.settling-head__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 var(--s-3);
}
.settling-head__title em { font-style: italic; }
.settling-head__lede {
  font-family: var(--font-serif-body);
  font-size: 1.0rem;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
  max-width: 38em;
}
.settling-prompts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.settling-prompts li {
  border-left: 2px solid var(--c-vermilion, #c73e1d);
  padding-left: var(--s-4);
}
.settling-prompts h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
}
.settling-prompts p {
  font-family: var(--font-serif-body);
  font-size: 0.95rem;
  color: var(--c-text);
  line-height: 1.5;
  margin: 0;
}
.settling-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
@media (max-width: 720px) { .settling-grid { grid-template-columns: 1fr; } }
.settling-card {
  border: 1px solid var(--c-border);
  background: var(--c-cream-soft, #fbf9f4);
  padding: var(--s-4);
  border-radius: var(--r-md, 8px);
}
.settling-card h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 var(--s-2);
  color: var(--c-text);
}
.settling-card p {
  font-family: var(--font-serif-body);
  font-size: 0.9rem;
  margin: 0;
  color: var(--c-text);
  line-height: 1.5;
}
.settling-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
@media (max-width: 720px) { .settling-offers { grid-template-columns: 1fr; } }
.settling-offer h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  margin: 0 0 var(--s-3);
}
.settling-offer ul { padding-left: 1.1rem; margin: 0; }
.settling-offer li {
  font-family: var(--font-serif-body);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.45rem;
  color: var(--c-text);
}
.settling-cta {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-rule, var(--c-border));
  padding-top: var(--s-4);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-354 (2026-05-20) — discover prominent count banner +
   top pagination strip (operator-asked tweaks)
   ════════════════════════════════════════════════════════════════════ */

.discover-count-banner {
  margin: var(--s-4) 0 var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 2px solid var(--c-gold, #b89968);
  border-bottom: 1px solid var(--c-rule, var(--c-border));
  background: var(--c-cream-soft, #fbf9f4);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.discover-count-banner__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1;
}
.discover-count-banner__figure {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1;
  margin: 0;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.discover-count-banner__number {
  font-style: normal;
  color: var(--c-vermilion, #c73e1d);
  font-weight: 600;
}
.discover-count-banner__noun {
  font-style: italic;
  font-weight: 400;
}
.discover-count-banner__qualifier {
  font-family: var(--font-serif-body);
  font-style: italic;
  font-size: 0.5em;
  color: var(--c-text-muted);
  margin-left: 0.25em;
  vertical-align: middle;
}

/* Forced-theme parity for the banner (mirrors the OMOIKANE-351
   data-theme attribute selectors). */

/* Mobile: collapse banner into a single line */
@media (max-width: 540px) {
  .discover-count-banner {
    padding: var(--s-3) var(--s-3);
    gap: var(--s-2);
  }
  .discover-count-banner__figure {
    font-size: 1.8rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-356 (2026-05-20) — forced-dark component overrides
   Audit (Playwright on 6 prod pages with omk_theme=dark cookie) found
   that OMOIKANE-351's :root[data-theme="dark"] block only flipped the
   CSS variables — the component-level rules in @media (prefers-color-
   scheme: dark) didn't fire when OS=light. This block mirrors the
   load-bearing component overrides under the attribute selector so
   the explicit "Dark" choice paints the same surfaces as OS=dark.
   ════════════════════════════════════════════════════════════════════ */

/* Primary CTA — inverted on dark: dark fill + cream text */

/* Secondary + Ghost — transparent on dark, text + border in vars */

/* Filter shell + chip-radio + form inputs */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-427 — INLINE-STYLED chip-radio active state under manual
 * dark toggle (`[data-theme="dark"]`). The discover.rs filter UI emits
 * `label.chip-radio` with INLINE `background: var(--c-navy)` for the
 * active state. In dark mode `--c-navy` flips to ivory per the
 * editorial design system, so the inline style takes precedence over
 * the class-based override above and the chip renders as an intense
 * ivory box.
 *
 * The matching @media (prefers-color-scheme: dark) rules at lines
 * ~6133-6157 already handle this for OS-level dark mode. These rules
 * mirror them for the manual toggle. Attribute-substring selectors +
 * `!important` are the only override path because inline styles have
 * the highest specificity in CSS.
 *
 * Active fill: slate (#2a3142) NOT vermilion — vermilion-on-cream is
 * still bright; vermilion as the TEXT + BORDER on slate reads
 * accent-strong without an intense fill.
 * ════════════════════════════════════════════════════════════════════ */
/* OMOIKANE-436 — UNIVERSAL inline-styled navy-bg override (not just
 * label.chip-radio). The operator-flagged active-filter chip on
 * /postings/discover uses `<a style="… background: var(--c-navy);
 * color: var(--c-text-on-navy);">`, plus ~14 other inline sites
 * across the views (skip-link, coaching_timeline, post_placement,
 * rationale_modal, discover esco-chip, etc.). Element-type-agnostic
 * `[style*=…]` catches them all without per-class enumeration. */

/* Class-based chip active state on other discover surfaces — same
 * dark-friendly accent as the inline-styled chip-radios above. */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-430 — comprehensive dark-theme sweep
 *
 * Operator-flagged: any rule that hard-codes `background: var(--c-navy)`
 * or `background: var(--c-cream)` and lacks a `:root[data-theme="dark"]`
 * override renders as an INTENSE WHITE BOX in dark mode (because
 * `--c-navy` flips to ivory `#e8e1d0` and `--c-cream` stays `#f5f1e8`).
 * The audit (OMOIKANE-430 YT description) listed 12 selectors missing
 * dark overrides. This block flips each to a dark-friendly fill.
 * ════════════════════════════════════════════════════════════════════ */

/* Site footer — on every page, was an ivory stripe at the bottom */

/* OMOIKANE-1069 — Auto + OS-dark mirror.
 *
 * The explicit-dark-cookie rule above only fires when the user picked
 * Theme: Dark. For `Theme: Auto` (the default), the body's data-theme
 * stays "auto" and the user's OS preference is what determines the
 * paint via `@media (prefers-color-scheme: dark)`. Without this block,
 * the @media (L5595) flips `--c-navy: #1e2d4f` → `#e8e1d0` (cream) to
 * darken cream-backed components — but the side-effect on
 * `.site-footer { background: var(--c-navy); }` (L618) turned the
 * footer into an intense cream/white stripe instead of dark.
 *
 * Restrict to `[data-theme="auto"]` so `[data-theme="light"]` users on
 * OS-dark keep their explicit light styling, per the architecture
 * comment at L7677-7681. Drift-locked in
 * `app/src/views/page_shells.rs::dark_mode_site_footer_has_auto_os_dark_mirror`. */

/* Dashboard CTA */

/* Feature cards (front-page) */

/* Dashboard KPI tile anchor */

/* Pill--navy (legacy from Hugo design system) */

/* Coaching RIASEC letter chip */

/* Card--navy (generic navy card) */

/* Checklist done-state tick */

/* Skip-link (accessibility) — visible only on focus; ensure
 * focused-state bg reads on dark surface */

/* Checked checkbox + range sliders */

/* OMOIKANE-434: the `.callout--warn` dark-mode override from
 * OMOIKANE-430 is retired here — the base `.callout--warn` rule
 * (line ~1055) now uses transparent bg + vermilion left-border in
 * BOTH themes per the operator's no-white-pills rule, so a separate
 * dark fill is unnecessary. The base ivory text token already flips
 * to ivory under :root[data-theme="dark"] .callout so the prose
 * reads on the dark surface. */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-430 — hide the per-result `editorial-entry__confidence`
 * pill (operator: "what's the low confidence medium confidence doing
 * there in every result?"). The per-row pill is noise; provenance
 * is conveyed by the AI-Act disclosure note further down the detail
 * page. Hide on both list AND detail surfaces; if a future use-case
 * needs it back, restore selectively.
 * ════════════════════════════════════════════════════════════════════ */
.editorial-entry__confidence {
  display: none !important;
}

/* Form inputs — solid dark surface w/ light text */

/* The card-tile "open" / "read" link — uses var(--c-navy) which
   flips to ivory under data-theme=dark, but the LINK should keep a
   dark frame in this context. */

/* ===========================================================
 * OMOIKANE-424 — editorial-entry pills + body text on dark
 * ===========================================================
 *
 * Operator-flagged 2026-05-21: the editorial vacancy card's pills
 * ship without dark-theme overrides. `__tag--seniority` used
 * cream-on-navy (the "intense white" rule violation), other __tag*
 * variants used `color: var(--c-navy)` directly → dark text on dark
 * background → invisible. These overrides keep the discriminator
 * colors (vermilion=remote, green=salary, amber=mid-confidence) but
 * swap any bright cream/navy fills for muted dark-friendly tones.
 *
 * The non-cream `--c-text` token already flips to ivory under the
 * dark root so plain unmodified text-color descendants of the card
 * inherit the right value without per-class overrides.
 * --------------------------------------------------------- */

/* Base tag: dark text would be invisible on dark bg; flip to ivory. */

/* Seniority pill: was cream-on-navy. Soften to muted gold on
 * charcoal so the "intense white" reads as a calmer accent in
 * dark mode without losing the high-emphasis weight. */

/* Remote / salary / esco / fairpay variants: text colors already
 * read fine on dark bg (vermilion, green, gold-soft); ensure the
 * borders + any transparent backgrounds carry enough contrast. */

/* Confidence pill: high/mid/low keep their semantic hue but the
 * "high" green needs a slight lift on dark for contrast. */

/* Match-score numeral colors mirror the confidence pill — same
 * semantic hues, same dark-mode lifts. */

/* The posting-body section's prose surfaces (heading + paragraph
 * + list items) inherit `color: var(--c-text)` which flips to
 * ivory under dark; nothing more is needed there. List/heading
 * weights stay as the light-mode rules dictate. */

/* Discover empty state + filter shell hover/focus */

/* Loading overlay — paper-stock dialog on dark */

/* OMOIKANE-356 — also mirror for force-light when OS=dark: a small
   set of explicit-light overrides so the Light button visibly resets
   the editorial palette even if OS prefers dark. The cream tokens are
   already restated under :root[data-theme="light"] {}; these are the
   component-level pieces that bypass the cascade. */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-360 (2026-05-20) — complete dark-theme sweep
   Beyond the OMOIKANE-356 component-level overrides + the @media (dark)
   --c-cream-soft flip, this block hand-picks every remaining surface
   that uses `var(--c-cream)` (genuinely dual-use, cannot flip the var)
   or a literal `#fff` background and lacks a dark override.

   Static grep evidence: every selector in this block was found in
   main.css with a light-color background and NO entry in either the
   @media (prefers-color-scheme: dark) block or :root[data-theme="dark"]
   prior to this commit. Each pair (media + attribute) covers both
   the OS=dark Auto path and the explicit force-Dark path.
   ════════════════════════════════════════════════════════════════════ */

/* --- .site-header ----------------------------------------------- */

/* --- .main .page-head__actions .btn--primary:hover -------------- */

/* --- .posting-summary__view (hover / focus) --------------------- */

/* --- .status-chip ------------------------------------------------ */

/* --- Career graph nodes ----------------------------------------- */

/* --- Literal #fff form inputs ------------------------------------ */
/* Line 2388 (coaching select) + line 3170 (input:focus) write a
   literal #fff bg that stays white in dark mode regardless of
   the var() cascade. Replace with the dark surface. */

/* --- Discover paste / textarea / inputs already covered upstream */

/* --- Generic catchall for any element that still bleeds cream ---
   Last-resort safety net: every element on a NON-skin class that
   declared a literal cream/cream-soft background AND isn't already
   styled gets repainted to the dark surface in dark mode. Scoped to
   data-theme to keep the OS=auto / OS=light paths untouched.
   This catches drift in views/* files that emit inline styles.       */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-360 — remaining literal-color light-bg gaps (per agent
   static audit `/tmp/dark-static-audit/gaps.md`). The --c-cream-soft
   flip above caught ~10 selectors. These remaining 18 use literal
   hex values OR var(--c-white) and need explicit dark sibling rules.
   ════════════════════════════════════════════════════════════════════ */

/* --- .cv-card (literal #fbf8f1) --- */

/* --- .toast + variants (literal pastel hex) --- */

/* --- .btn.ghost.danger:hover (literal #f5e2dc) --- */

/* --- typography confidence bands (.t-conf-*) — literal pastel hex - */

/* --- .email + .trust + .hero__logo + .toggle__sw::before (var(--c-white)) - */
/* Marketing surfaces only; --c-white is genuinely white in light mode +
   does NOT flip in dark (also dual-use as text on gold etc). These
   four uses are backgrounds in dark surfaces, repaint each.            */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-361 (2026-05-20) — "The Editor's Desk" dashboard
   Magazine front-page rhythm: narrative lede + asymmetric 2-col
   body (active work + context sidebar) + closing line. Replaces the
   LinkedIn-KPI band / Pipeline card / What's-next / Recent-postings-
   table block from the legacy dashboard. ND-friendly contract
   preserved (no streaks, no %, no days-since, no falling-behind).
   ════════════════════════════════════════════════════════════════════ */

.dash-desk {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: var(--s-3);
}

/* Lede — narrative paragraph, Newsreader italic body, generous
   line-height. Sits between the spec/024 cards above and the
   editorial body below. */
.dash-desk__lede {
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--c-text, #2a2a2a);
  max-width: 38em;
  margin: var(--s-4) 0 var(--s-6);
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-vermilion, #c73e1d);
  font-style: italic;
}

/* 2-col body — main wider, aside narrower. Stacks on small screens. */
.dash-desk__cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 960px) {
  .dash-desk__cols { grid-template-columns: 1fr; gap: var(--s-5); }
}
.dash-desk__main { min-width: 0; }
.dash-desk__aside { min-width: 0; }

/* Section — each block in the main column. Hairline gold rule above,
   editorial heading, then content. The rule is what makes the page
   read like a magazine front-page rather than a SaaS card stack. */
.dash-desk__section {
  margin-bottom: var(--s-7);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-gold, #b89968);
}
.dash-desk__section:first-of-type { border-top: 0; padding-top: 0; }

.dash-desk__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.dash-desk__title {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--c-text, #2a2a2a);
}
.dash-desk__more {
  font-family: var(--font-sans, system-ui);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted, #6a6a6a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.dash-desk__more:hover,
.dash-desk__more:focus-visible {
  color: var(--c-vermilion, #c73e1d);
  border-bottom-color: var(--c-vermilion, #c73e1d);
}

/* Empty-state copy — italic Cormorant. Conversational, not nagging. */
.dash-desk__empty {
  font-family: var(--font-serif-body, Georgia, serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-text-muted, #6a6a6a);
  margin: 0;
}
.dash-desk__empty a {
  color: var(--c-vermilion, #c73e1d);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-style: normal;
}

/* In-flight entries — numbered classifieds with CSS counter +
   hanging margin numerals (matches the OMOIKANE-339 discover entry
   vocabulary so the dashboard feels of-a-piece with the rest of
   the editorial chrome). */
.dash-desk__entries {
  counter-reset: dash-desk-entry;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dash-desk__entry {
  counter-increment: dash-desk-entry;
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 3.2rem;
  border-bottom: 1px dotted var(--c-border-soft, #efece4);
  transition: padding 200ms ease;
}
.dash-desk__entry:last-of-type { border-bottom: 0; }
.dash-desk__entry::before {
  content: counter(dash-desk-entry, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-3);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--c-gold, #b89968);
  letter-spacing: -0.01em;
  line-height: 1;
  width: 2.6rem;
}
.dash-desk__entry:hover { padding-left: 3.6rem; }
.dash-desk__entry-title {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.25;
  color: var(--c-text, #2a2a2a);
  text-decoration: none;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.dash-desk__entry-title:hover,
.dash-desk__entry-title:focus-visible {
  border-bottom-color: var(--c-vermilion, #c73e1d);
}
.dash-desk__entry-meta {
  font-family: var(--font-sans, system-ui);
  font-size: 0.85rem;
  color: var(--c-text-muted, #6a6a6a);
  margin: 0;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  align-items: baseline;
}
.dash-desk__entry-company {
  font-weight: 600;
  color: var(--c-text, #2a2a2a);
}
.dash-desk__entry-stage {
  font-style: italic;
  text-transform: lowercase;
}
.dash-desk__entry-match {
  font-family: var(--font-mono, ui-monospace);
  font-size: 0.78rem;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  letter-spacing: 0;
}
.dash-desk__entry-match--strong {
  background: rgba(74, 142, 96, 0.16);
  color: var(--c-sage-text, #2f5d3a);
}
.dash-desk__entry-match--mid {
  background: rgba(196, 163, 107, 0.22);
  color: var(--c-cream-text, #6f5e3f);
}
.dash-desk__entry-match--weak {
  background: rgba(199, 81, 53, 0.18);
  color: var(--c-vermilion, #c73e1d);
}

/* Today's reading — narrative paragraph with em for top pick */
.dash-desk__reading {
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-text, #2a2a2a);
  margin: 0;
}
.dash-desk__reading strong {
  font-weight: 600;
  color: var(--c-vermilion, #c73e1d);
}
.dash-desk__reading em {
  font-style: italic;
  color: var(--c-text, #2a2a2a);
}

/* Recent notes — date · activity, dotted leaders */
.dash-desk__notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dash-desk__note {
  font-family: var(--font-serif-body, Georgia, serif);
  font-size: 0.95rem;
  color: var(--c-text, #2a2a2a);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}
.dash-desk__note-day {
  font-family: var(--font-mono, ui-monospace);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--c-text-muted, #6a6a6a);
  text-transform: lowercase;
  min-width: 4.5em;
}
.dash-desk__note-text {
  color: var(--c-text, #2a2a2a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.dash-desk__note-text:hover,
.dash-desk__note-text:focus-visible {
  border-bottom-color: var(--c-vermilion, #c73e1d);
}

/* ─── ASIDE COLUMN ──────────────────────────────────────────────── */

.dash-desk__sidemod {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-4) var(--s-4);
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: 2px;
  position: relative;
}
.dash-desk__sidemod::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--c-gold, #b89968);
}
.dash-desk__sidemod--coach::before {
  background: var(--c-vermilion, #c73e1d);
}
.dash-desk__sidetitle {
  font-family: var(--font-sans, system-ui);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 var(--s-3);
  color: var(--c-text-muted, #6a6a6a);
}
.dash-desk__sidelink {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans, system-ui);
  font-size: 0.85rem;
}
.dash-desk__sidelink a {
  color: var(--c-text, #2a2a2a);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border, #e8e3d8);
  padding-bottom: 1px;
  transition: border-color 120ms ease, color 120ms ease;
}
.dash-desk__sidelink a:hover,
.dash-desk__sidelink a:focus-visible {
  color: var(--c-vermilion, #c73e1d);
  border-bottom-color: var(--c-vermilion, #c73e1d);
}

/* Week strip — 7 days of movement. Bars use a CSS var so the bar
   width animates in JS-free (transition-when-visible). */
.dash-desk__week {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  display: grid;
  grid-template-columns: 2em 1fr 2em;
  row-gap: 0.4rem;
  column-gap: 0.6rem;
  align-items: center;
}
.dash-desk__day {
  display: contents;
}
.dash-desk__day-label {
  font-family: var(--font-mono, ui-monospace);
  font-size: 0.78rem;
  color: var(--c-text-muted, #6a6a6a);
  letter-spacing: 0.05em;
  text-align: center;
}
.dash-desk__day-bar {
  --w: 0;
  display: block;
  height: 0.42rem;
  width: calc(var(--w) * 9%);
  min-width: 2px;
  background: var(--c-gold, #b89968);
  border-radius: 1px;
  transition: width 360ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dash-desk__day-count {
  font-family: var(--font-mono, ui-monospace);
  font-size: 0.78rem;
  color: var(--c-text, #2a2a2a);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dash-desk__day.is-today .dash-desk__day-label {
  color: var(--c-vermilion, #c73e1d);
  font-weight: 700;
}
.dash-desk__day.is-today .dash-desk__day-bar {
  background: var(--c-vermilion, #c73e1d);
}
.dash-desk__weekfoot {
  font-family: var(--font-serif-body, Georgia, serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-text-muted, #6a6a6a);
  margin: 0;
}

/* From the Coach pull-quote — Cormorant italic, large initial */
.dash-desk__quote {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--c-text, #2a2a2a);
  margin: 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-vermilion, #c73e1d);
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.dash-desk__quote::before {
  content: open-quote;
  font-size: 1.4rem;
  color: var(--c-vermilion, #c73e1d);
  margin-right: 0.1em;
  line-height: 0;
  vertical-align: -0.1em;
}
.dash-desk__quote::after {
  content: close-quote;
  font-size: 1.4rem;
  color: var(--c-vermilion, #c73e1d);
  margin-left: 0.05em;
  line-height: 0;
  vertical-align: -0.1em;
}

/* Honest numbers in the aside — never percentages, never streaks */
.dash-desk__numbers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
}
.dash-desk__numbers li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.dash-desk__numbers strong {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--c-text, #2a2a2a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
  text-align: right;
}
.dash-desk__numbers span {
  font-family: var(--font-sans, system-ui);
  font-size: 0.82rem;
  color: var(--c-text-muted, #6a6a6a);
  letter-spacing: 0.02em;
}

/* ─── CLOSING ────────────────────────────────────────────────────── */

.dash-desk__close {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-gold, #b89968);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.dash-desk__signoff {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-muted, #6a6a6a);
  margin: 0;
}
.dash-desk__nav {
  font-family: var(--font-sans, system-ui);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
.dash-desk__nav a {
  color: var(--c-text, #2a2a2a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.dash-desk__nav a:hover,
.dash-desk__nav a:focus-visible {
  color: var(--c-vermilion, #c73e1d);
  border-bottom-color: var(--c-vermilion, #c73e1d);
}
.dash-desk__sep {
  color: var(--c-text-muted, #6a6a6a);
  opacity: 0.6;
}

/* ─── ANIMATION — staggered reveal on page load ─────────────────── */

@keyframes dash-desk-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-desk__lede,
.dash-desk__section,
.dash-desk__sidemod,
.dash-desk__close {
  animation: dash-desk-rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.dash-desk__section:nth-of-type(1) { animation-delay: 60ms; }
.dash-desk__section:nth-of-type(2) { animation-delay: 120ms; }
.dash-desk__section:nth-of-type(3) { animation-delay: 180ms; }
.dash-desk__sidemod:nth-of-type(1) { animation-delay: 80ms; }
.dash-desk__sidemod:nth-of-type(2) { animation-delay: 140ms; }
.dash-desk__sidemod:nth-of-type(3) { animation-delay: 200ms; }
.dash-desk__sidemod:nth-of-type(4) { animation-delay: 260ms; }
.dash-desk__close                  { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .dash-desk__lede,
  .dash-desk__section,
  .dash-desk__sidemod,
  .dash-desk__close {
    animation: none;
  }
}

/* ─── DARK THEME — flip the editorial palette ───────────────────── */

/* OMOIKANE-364 — "This week" zero-day placeholder. Quiet days now
   emit a centered subdued dot in the count cell so the 3-col grid
   stays aligned (was: cell skipped → next day's label flowed in).
   Pairs with the markup change in handlers/dashboard.rs. */
.dash-desk__day-zero {
  color: var(--c-text-muted, #6a6a6a);
  opacity: 0.45;
  font-family: var(--font-mono, ui-monospace);
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-373 (2026-05-20) — /account/recordings in-browser recorder
   UX rework. Audit found three operator-flagged problems:
     1. Recorder bled into the file-upload card (no own card/heading).
     2. Active state was indistinguishable from idle (same button class,
        no dot, no timer).
     3. Stop status string smushed 4 concepts.
   Markup fix: views/recording.rs now renders a peer .recorder-card.
   JS fix: recording-recorder.js maintains data-state on the button +
   ticks a 1Hz timer.
   This block: visual state-swap rules driven by data-state.
   ════════════════════════════════════════════════════════════════════ */

.recorder-card { position: relative; }

.recorder-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md, 8px);
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border, #e8e3d8);
}

/* Pulsing red dot — hidden in idle, revealed in recording, hidden in
   uploading. CSS-only animation; honors prefers-reduced-motion. */
.rec-dot {
  display: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #d34a3d;
  box-shadow: 0 0 0 0 rgba(211, 74, 61, 0.55);
  margin-right: 0.5em;
  vertical-align: -0.06em;
  animation: rec-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(211, 74, 61, 0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(211, 74, 61, 0);    transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0   rgba(211, 74, 61, 0);    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}

/* Idle state — keep the ghost styling but make sure the button text
   is the only visible content (dot hidden). */
#omoikane-record[data-state="idle"] .rec-dot { display: none; }

/* Recording state — button flips to vermilion fill + cream text;
   dot reveals + pulses; button border gets a slightly heavier weight. */
#omoikane-record[data-state="recording"] {
  background: var(--c-vermilion, #c73e1d);
  color: var(--c-cream, #f5f1e8);
  border-color: var(--c-vermilion, #c73e1d);
  font-weight: 600;
}
#omoikane-record[data-state="recording"]:hover,
#omoikane-record[data-state="recording"]:focus-visible {
  background: #b03517;
  border-color: #b03517;
  color: var(--c-cream, #f5f1e8);
}
#omoikane-record[data-state="recording"] .rec-dot {
  display: inline-block;
  background: var(--c-cream, #f5f1e8);
  box-shadow: 0 0 0 0 rgba(245, 241, 232, 0.55);
}
@keyframes rec-dot-pulse-on-vermilion {
  0%   { box-shadow: 0 0 0 0   rgba(245, 241, 232, 0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(245, 241, 232, 0);    transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0   rgba(245, 241, 232, 0);    transform: scale(1); }
}
#omoikane-record[data-state="recording"] .rec-dot {
  animation-name: rec-dot-pulse-on-vermilion;
}

/* Uploading state — disabled ghost; spinner-feel is just the cursor
   + opacity. No new asset; the "Uploading…" label carries the state. */
#omoikane-record[data-state="uploading"] {
  opacity: 0.6;
  cursor: progress;
}
#omoikane-record[data-state="uploading"] .rec-dot { display: none; }

/* Live timer — visible at all times so the cap (6:00) is anchored
   even before the user clicks. Monospace, tabular numerals to keep
   the colon from jumping when seconds wrap. */
.rec-timer {
  font-family: var(--font-mono, ui-monospace);
  font-size: 1.0rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted, #6a6a6a);
  letter-spacing: 0.02em;
  font-weight: 500;
  min-width: 5.5em;
  text-align: center;
}
#omoikane-record[data-state="recording"] + .rec-timer,
.recorder-controls:has(#omoikane-record[data-state="recording"]) .rec-timer {
  color: var(--c-vermilion, #c73e1d);
  font-weight: 600;
}

.rec-status {
  font-size: var(--fs-sm, 0.88rem);
  color: var(--c-text-muted, #6a6a6a);
  font-style: italic;
}

/* Dark-theme parity */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-377 — Goal Match Gate panel + modal styles.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-444 — /goals MANIFESTO redesign v2 (2026-05-22 evening).
   Operator critique on OMOIKANE-442: aesthetic too modest, still
   form-page, chip language weak, hero underwhelming, misaligned
   forms, shit logical organization. This is the bolder pass.

   New language:
     .goals-manifesto         — the goal as prose, full-bleed editorial
     .goals-manifesto-blank   — inline highlighted span = a form value
     .goals-verdict-card      — POSTER-style score cards (filled, big
                                numbers, sage/vermilion/dashed); replaces
                                the OMOIKANE-442 .goals-verdict-chip
                                bordered approach
     .goals-form-cluster      — single editing surface, 4 clusters that
                                map 1:1 to the manifesto's prose phrases
   ════════════════════════════════════════════════════════════════════ */

/* ── Manifesto — the user's goal as a poster sentence ───────────── */
.goals-manifesto {
  padding: var(--s-5) 0 var(--s-5) 0;
  margin: 0 0 var(--s-5) 0;
  border-bottom: 2px solid var(--c-divider, var(--c-border, #e0dccf));
}
.goals-manifesto__kicker {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-text-muted, #8a8275);
  margin: 0 0 var(--s-4) 0;
}
.goals-manifesto__sentence {
  font-family: var(--font-serif, Georgia);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  /* OMOIKANE-530 — bumped 1.32 → 1.55 so the pill's vertical padding
     no longer pushes the next line of text into overlapping the pill.
     Pills inherit this line-height (display: inline) so the rendered
     box adds breathing room above + below. */
  line-height: 1.55;
  color: var(--c-text);
  margin: 0;
  max-width: 70ch;
}
.goals-manifesto-blank {
  display: inline;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92em;
  /* OMOIKANE-530 — vertical padding halved (0.12em → 0.06em) so each
     wrapped line fragment of a pill costs less line-height. Combined
     with the 1.55 sentence line-height above, neighbour lines stop
     overlapping the pill. Horizontal padding unchanged. */
  padding: 0.06em 0.46em;
  margin: 0 0.04em;
  border-radius: 4px;
  background: var(--c-cream-soft, #f1ebda);
  color: var(--c-navy, #1e2d4f);
  border-bottom: 2px solid var(--c-vermilion, #c73e1d);
  text-decoration: none;
  transition: background 120ms ease, transform 80ms ease;
  /* OMOIKANE-447 — Bug 3: when a long blank ("Information and
     communication") wraps mid-pill, repeat the background + bottom
     border on each line fragment so the pill reads as a continuous
     highlighted unit instead of two disconnected rectangles. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.goals-manifesto-blank:hover,
.goals-manifesto-blank:focus-visible {
  background: var(--c-vermilion, #c73e1d);
  color: var(--c-cream, #f5f1e8);
  outline: none;
}
.goals-manifesto-blank--placeholder {
  font-style: italic;
  font-weight: 400;
  color: var(--c-text-muted, #8a8275);
  background: transparent;
  border-bottom-style: dashed;
  border-bottom-color: var(--c-text-muted, #8a8275);
}

/* The big OVERALL match number — magazine pull-quote rail */
.goals-manifesto__match {
  margin-top: var(--s-4);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.goals-manifesto__match-num {
  font-family: var(--font-serif, Georgia);
  font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  line-height: 0.95;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.goals-manifesto__match[data-tone="sage"] .goals-manifesto__match-num { color: var(--c-sage-text, #4a6f55); }
.goals-manifesto__match[data-tone="vermilion"] .goals-manifesto__match-num { color: var(--c-vermilion, #c73e1d); }
.goals-manifesto__match-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-muted, #8a8275);
}
.goals-manifesto__match-lede {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text-muted, #8a8275);
  margin: 0;
  max-width: 28rem;
}

/* ── Verdict cards — POSTER style (filled, big numbers, color-coded) ── */
.goals-verdict-cards {
  list-style: none;
  margin: 0 0 var(--s-5) 0;
  padding: 0;
  display: grid;
  /* OMOIKANE-447 — Bug 6: tighten the desktop grid from 6×2 down to
     4×3 by bumping the minimum track width. Reality-check cards
     remain in their own .goals-verdict-cards__row below the gate
     scores via the same template, so the editorial cadence stays
     consistent. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* OMOIKANE-447 — Bug 1: row-stretching so cards on the same visual
     row share a bottom edge even when one card's headline wraps. The
     `<details>` reality-check cards used to balloon to 200px while
     gate cards stayed at 120px; equal-height rows kill the stairstep. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--s-2);
}
/* Stretch each direct child (li wrapping a button or details) so the
   inner card fills the equalised row. */
.goals-verdict-cards > li {
  display: flex;
}
.goals-verdict-cards > li > button,
.goals-verdict-cards > li > details {
  flex: 1 1 auto;
}
.goals-verdict-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-bg-soft, transparent);
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 7.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 100ms ease, box-shadow 120ms ease;
  width: 100%;
}
.goals-verdict-card:hover,
.goals-verdict-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  outline: none;
}
.goals-verdict-card__field {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  line-height: 1.15;
}
.goals-verdict-card__score {
  font-family: var(--font-serif, Georgia);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.goals-verdict-card__lede {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.85;
}

/* Filled state variants — strong color blocks, no timid borders */
.goals-verdict-card--pass {
  background: var(--c-sage-bg, rgba(74, 142, 96, 0.16));
  color: var(--c-sage-text, #2f5d3a);
}
.goals-verdict-card--pass .goals-verdict-card__field   { color: var(--c-sage-text, #2f5d3a); }
.goals-verdict-card--pass .goals-verdict-card__score   { color: var(--c-sage-text, #2f5d3a); }

.goals-verdict-card--warn {
  background: rgba(199, 81, 53, 0.16);
  color: var(--c-vermilion-text, #8e3019);
}
.goals-verdict-card--warn .goals-verdict-card__field   { color: var(--c-vermilion-text, #8e3019); }
.goals-verdict-card--warn .goals-verdict-card__score   { color: var(--c-vermilion, #c73e1d); }

.goals-verdict-card--empty {
  background: transparent;
  border: 1px dashed var(--c-divider, var(--c-border, #e0dccf));
  color: var(--c-text-muted, #8a8275);
}
.goals-verdict-card--empty .goals-verdict-card__field { color: var(--c-text-muted, #8a8275); }
.goals-verdict-card--empty .goals-verdict-card__score {
  font-style: italic;
  font-weight: 400;
  color: var(--c-text-muted, #8a8275);
  font-size: 1.8rem;
}
.goals-verdict-card--empty:hover,
.goals-verdict-card--empty:focus-visible {
  border-style: solid;
  border-color: var(--c-text-muted, #8a8275);
}

/* ── Per-dimension rationale popover (OMOIKANE-1293) ──────────────
   The gate /goals tiles are <button popovertarget>; this is the
   light-dismiss panel they open. Native `popover` renders in the top
   layer (no z-index) and closes on Esc / click-away for free. */
.dim-rationale[popover] {
  max-width: min(30rem, 92vw);
  margin: auto;                 /* centre in the viewport */
  border: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  border-radius: 10px;
  padding: var(--s-4);
  background: var(--c-bg, #fffdf8);
  color: var(--c-text, #2a2a2a);
  box-shadow: 0 14px 44px rgba(20, 18, 14, 0.28);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
}
.dim-rationale[popover]::backdrop {
  background: rgba(20, 18, 14, 0.34);
}
.dim-rationale__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-divider, var(--c-border, #e0dccf));
}
.dim-rationale__field {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--c-text-muted, #8a8275);
}
.dim-rationale__score {
  font-family: var(--font-serif, Georgia);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dim-rationale__factors {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--s-2);
}
.dim-rationale__cites {
  margin: var(--s-3) 0 0;
  font-size: 0.78rem;
  color: var(--c-text-muted, #8a8275);
}
.dim-rationale__prov {
  margin: var(--s-3) 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--c-text-muted, #8a8275);
}
.dim-rationale__close {
  margin-top: var(--s-3);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  background: var(--c-navy, #1a2b4a);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: var(--s-2) var(--s-4);
}

/* ── Form clusters — 4 logical groups that mirror the manifesto ─── */
.goals-form {
  padding: var(--s-5) 0 var(--s-3) 0;
  margin: 0 0 var(--s-5) 0;
  border-top: 2px solid var(--c-divider, var(--c-border, #e0dccf));
}
.goals-form__kicker {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-muted, #8a8275);
  margin: 0 0 var(--s-4) 0;
}
.goals-form__clusters {
  /* OMOIKANE-447 — Bug 2: switch from auto-fit to a deterministic
     3-col grid + give the 4th "Timing + in your own words" cluster
     `grid-column: 1 / -1` so it stretches across the full row instead
     of orphaning into the leftmost track with 773 px of dead white
     space to its right. */
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .goals-form__clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .goals-form__clusters { grid-template-columns: 1fr; }
}
.goals-form-cluster {
  padding: 0;
}
/* OMOIKANE-447 — Bug 2: the 4th cluster (Timing + free-text textarea)
   naturally needs the most horizontal real estate; stretch it across
   the remaining tracks. `:last-child` works because the markup always
   emits exactly 4 clusters in this order. */
.goals-form-cluster:last-child {
  grid-column: 1 / -1;
}
.goals-form-cluster__title {
  font-family: var(--font-serif, Georgia);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 var(--s-3) 0;
  color: var(--c-text);
}
.goals-form-cluster__field {
  margin: 0 0 var(--s-3) 0;
}
.goals-form-cluster__field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--c-text);
  margin: 0 0 var(--s-1) 0;
}
.goals-form-cluster__field p.t-muted.tiny {
  margin: 0 0 var(--s-1) 0;
  font-size: 0.74rem;
  line-height: 1.4;
}
.goals-form-cluster__field input[type="text"],
.goals-form-cluster__field input[type="number"],
.goals-form-cluster__field select,
.goals-form-cluster__field textarea {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  border-radius: 4px;
  background: var(--c-bg, transparent);
  color: var(--c-text);
  font-family: inherit;
  font-size: 0.95rem;
}
.goals-form-cluster__field input[type="text"]:focus,
.goals-form-cluster__field input[type="number"]:focus,
.goals-form-cluster__field select:focus,
.goals-form-cluster__field textarea:focus {
  outline: 2px solid var(--c-vermilion, #c73e1d);
  outline-offset: 1px;
}
/* OMOIKANE-447 — Bug 5: dark-mode parity for form inputs. The cream
   default background of the form inputs renders as bright cream-on-
   navy in dark mode (violates the sitewide no-white-pills rule). The
   sibling card surfaces in the manifesto + verdict areas already
   carry dark-mode overrides; bring the form clusters in line. */

.goals-form__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin: var(--s-5) 0 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  flex-wrap: wrap;
}
.goals-form__actions .btn--primary {
  margin-left: auto;
  font-size: 1.05em;
  padding: var(--s-3) var(--s-5);
}

@media (max-width: 720px) {
  .goals-manifesto__sentence { font-size: 1.4rem; }
  .goals-manifesto__match-num { font-size: 2.8rem; }
  .goals-verdict-card { min-height: 6rem; padding: var(--s-3); }
  .goals-verdict-card__score { font-size: 2rem; }
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-442 — /goals editorial-folio redesign (2026-05-22).
   Hero + verdicts strip + state-aware chips + Refine card zones.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero block ──────────────────────────────────────────────────── */
.goals-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3) var(--s-5);
  align-items: end;
  padding: var(--s-5) 0 var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-divider, var(--c-border, #e0dccf));
}
.goals-hero__kicker {
  grid-column: 1;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-muted, #8a8275);
  margin: 0 0 var(--s-2) 0;
}
.goals-hero__quote {
  grid-column: 1;
  font-family: var(--font-serif, Georgia);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--c-text);
  margin: 0;
  max-width: 56ch;
}
.goals-hero__quote--empty {
  color: var(--c-text-muted, #8a8275);
  font-weight: 400;
}
.goals-hero__meta {
  grid-column: 1;
  display: flex;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--c-text-muted, #8a8275);
  margin: var(--s-3) 0 0 0;
  flex-wrap: wrap;
}
.goals-hero__meta a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }

.goals-hero__match {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--s-1);
  padding-left: var(--s-4);
  border-left: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  min-width: 9rem;
  text-align: right;
}
.goals-hero__match-num {
  font-family: var(--font-serif, Georgia);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.goals-hero__match[data-tone="sage"] .goals-hero__match-num { color: var(--c-sage-text, #4a6f55); }
.goals-hero__match[data-tone="vermilion"] .goals-hero__match-num { color: var(--c-vermilion, #c73e1d); }
.goals-hero__match-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted, #8a8275);
}
.goals-hero__match-lede {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--c-text-muted, #8a8275);
  max-width: 14rem;
  line-height: 1.4;
  margin-top: var(--s-2);
}
@media (max-width: 720px) {
  .goals-hero { grid-template-columns: 1fr; }
  .goals-hero__match { grid-column: 1; grid-row: auto;
    border-left: 0; border-top: 1px solid var(--c-divider, var(--c-border, #e0dccf));
    padding: var(--s-3) 0 0 0;
    align-items: flex-start; text-align: left; min-width: 0;
  }
  .goals-hero__match-lede { max-width: none; }
}

/* ── Verdicts strip — 8 gate chips with PASS / WARN / EMPTY language ── */
.goals-verdicts {
  margin: 0 0 var(--s-5) 0;
}
.goals-verdicts__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--s-3) 0;
}
.goals-verdicts__kicker {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-muted, #8a8275);
}
.goals-verdicts__thresh {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--c-text-muted, #8a8275);
}
.goals-verdicts__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-2);
}
.goals-verdict-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-3);
  background: var(--c-bg-soft, transparent);
  border: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  border-left: 4px solid var(--c-divider, var(--c-border, #e0dccf));
  border-radius: 4px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 120ms ease, transform 80ms ease, background 120ms ease;
}
.goals-verdict-chip:hover,
.goals-verdict-chip:focus-visible {
  transform: translateY(-1px);
  outline: none;
}
.goals-verdict-chip__field {
  grid-column: 1;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--c-text-muted, #8a8275);
}
.goals-verdict-chip__score {
  grid-column: 2;
  font-family: var(--font-serif, Georgia);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.goals-verdict-chip__lede {
  grid-column: 1 / span 2;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--c-text-muted, #8a8275);
  margin-top: var(--s-1);
  line-height: 1.4;
}

/* State variants — encode PASS / WARN / EMPTY without relying on the
   number alone (audit observation #2). */
.goals-verdict-chip--pass {
  border-left-color: var(--c-sage-text, #4a6f55);
}
.goals-verdict-chip--pass:hover,
.goals-verdict-chip--pass:focus-visible {
  border-color: var(--c-sage-text, #4a6f55);
  background: rgba(74, 142, 96, 0.06);
}
.goals-verdict-chip--pass .goals-verdict-chip__score { color: var(--c-sage-text, #4a6f55); }

.goals-verdict-chip--warn {
  border-left-color: var(--c-vermilion, #c73e1d);
}
.goals-verdict-chip--warn:hover,
.goals-verdict-chip--warn:focus-visible {
  border-color: var(--c-vermilion, #c73e1d);
  background: rgba(199, 81, 53, 0.06);
}
.goals-verdict-chip--warn .goals-verdict-chip__score { color: var(--c-vermilion, #c73e1d); }

.goals-verdict-chip--empty {
  border: 1px dashed var(--c-divider, var(--c-border, #e0dccf));
  border-left-width: 1px;
  background: transparent;
}
.goals-verdict-chip--empty:hover,
.goals-verdict-chip--empty:focus-visible {
  border-style: solid;
  border-color: var(--c-text-muted, #8a8275);
}
.goals-verdict-chip--empty .goals-verdict-chip__score {
  font-style: italic;
  font-weight: 400;
  color: var(--c-text-muted, #8a8275);
}

/* ── Refine card — 3 horizontal-rule zones ──────────────────────── */
.goals-refine {
  padding: var(--s-5) var(--s-5);
  background: var(--c-bg-soft, transparent);
  border: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  border-radius: 12px;
  margin-bottom: var(--s-4);
}
.goals-refine__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--s-4) 0;
}
.goals-refine__head h2 {
  font-family: var(--font-serif, Georgia);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0;
}
.goals-refine__head .goals-refine__kicker {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted, #8a8275);
}
.goals-zone {
  padding: var(--s-3) 0 var(--s-4) 0;
}
.goals-zone + .goals-zone {
  border-top: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  margin-top: var(--s-2);
  padding-top: var(--s-4);
}
.goals-zone__title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted, #8a8275);
  margin: 0 0 var(--s-3) 0;
}
.goals-zone__grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.goals-refine__actions {
  display: flex; gap: var(--s-3); align-items: center;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--c-divider, var(--c-border, #e0dccf));
  flex-wrap: wrap;
}
.goals-refine__actions .btn--primary {
  margin-left: auto;
}

/* Dark theme parity for the new components. */

.goal-match-card { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); }
.goal-match-card .t-h3 { font-family: var(--font-serif); font-style: italic; }

.goal-match-banner {
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-gold, #b89968);
  background: var(--c-cream-soft, #fbf9f4);
}
.goal-match-banner[data-tone="sage"]      { border-left-color: var(--c-sage-text, #4a6f55); background: var(--c-sage-bg, #d8e8dc); }
.goal-match-banner[data-tone="vermilion"] { border-left-color: var(--c-vermilion, #c73e1d); background: rgba(199, 81, 53, 0.06); }
.goal-match-banner[data-tone="neutral"]   { border-left-color: var(--c-gold, #b89968); }

.goal-match-banner__head { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.goal-match-overall-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: baseline; gap: 0.4em;
}
.goal-match-overall-trigger:hover .goal-match-overall-num,
.goal-match-overall-trigger:focus-visible .goal-match-overall-num {
  text-decoration: underline; text-underline-offset: 4px;
}
.goal-match-overall-num {
  font-family: var(--font-serif, Georgia);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  color: var(--c-vermilion, #c73e1d);
}
.goal-match-overall-label {
  font-family: var(--font-sans);
  font-size: 1.0rem;
  color: var(--c-text);
}
.goal-match-banner[data-tone="sage"] .goal-match-overall-num { color: var(--c-sage-text, #2f5d3a); }
.goal-match-banner__lede {
  font-family: var(--font-serif-body, Georgia, serif);
  margin: var(--s-2) 0 0;
  flex: 1 1 100%;
  line-height: 1.5;
}
.goal-match-banner__actions { margin-top: var(--s-3); }

.goal-match-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
}
.goal-match-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em;
  width: 100%;
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border, #e8e3d8);
  border-radius: var(--r-md, 8px);
  padding: var(--s-3);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.goal-match-chip:hover,
.goal-match-chip:focus-visible {
  border-color: var(--c-vermilion, #c73e1d);
  box-shadow: 0 2px 6px rgba(199, 81, 53, 0.12);
  outline: none;
}
.goal-match-chip__field {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted, #6a6a6a);
}
.goal-match-chip__score {
  font-family: var(--font-serif, Georgia);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--c-text);
}
.goal-match-chip[data-data-present="false"] .goal-match-chip__score {
  color: var(--c-text-muted, #6a6a6a);
  font-style: italic;
}

.goal-match-threshold-note { font-size: 0.78rem; }

/* Modal — dialog element with backdrop */
#goal-match-dialog::backdrop {
  background: rgba(20, 20, 28, 0.45);
  backdrop-filter: blur(2px);
}
#goal-match-dialog {
  margin: auto;
  font-family: var(--font-sans);
}
#goal-match-dialog h2 { font-size: 1.4rem; }
#goal-match-dialog h3 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted, #6a6a6a);
  margin: var(--s-3) 0 var(--s-2);
}
#goal-match-coach-thread textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  resize: vertical;
}

/* Dark-theme parity */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-380 — ESCO occupation typeahead on /goals.
   ════════════════════════════════════════════════════════════════════ */

.esco-role-field { position: relative; }
.esco-search-wrap { position: relative; }
.esco-suggestions-box {
  position: absolute;
  inset: calc(100% + 2px) 0 auto 0;
  z-index: var(--z-content-top, 20); /* OMOIKANE-1097 — autosuggest above content */
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border, #e8e3d8);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  max-height: 280px;
  overflow-y: auto;
}
.esco-suggestions-box:empty { display: none; }
.esco-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.esco-suggestion-btn {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-soft, #efece4);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
}
.esco-suggestion-btn:hover,
.esco-suggestion-btn:focus-visible {
  background: var(--c-vermilion, #c73e1d);
  color: var(--c-cream, #f5f1e8);
  outline: none;
}
.esco-suggestions li:last-child .esco-suggestion-btn {
  border-bottom: 0;
}

.esco-role-chips {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.esco-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border, #e8e3d8);
  border-radius: var(--r-pill, 999px);
  font-size: 0.88rem;
  font-family: var(--font-sans);
  color: var(--c-text);
}
.esco-role-chip__label { line-height: 1; }
.esco-role-chip__rm {
  background: transparent;
  border: 0;
  font-size: 1.0rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
  color: var(--c-text-muted, #6a6a6a);
  border-radius: 50%;
}
.esco-role-chip__rm:hover,
.esco-role-chip__rm:focus-visible {
  color: var(--c-vermilion, #c73e1d);
  outline: none;
}

/* Dark-theme parity */

/* ─────────────────────────────────────────────────────────────────
   OMOIKANE-419 — commute widget (car + transit chips).
   Used on /goals Geography modal, /postings/discover/view/* detail,
   /postings/discover list rows, /jobsearch/daily rows.
   Theme-aware: inline styles previously fell back to `#f4f0eb`
   (cream) when `--c-surface-alt` was undefined, leaving chips
   bright-white on dark theme.
   ──────────────────────────────────────────────────────────────── */
.commute-widget {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9em;
  margin: var(--s-2) 0;
}
.commute-widget--placeholder {
  font-size: 0.85em;
  color: var(--c-text-muted, #6a6a6a);
}
.commute-widget__target {
  font-size: 0.85em;
  color: var(--c-text-muted, #6a6a6a);
}
.commute-chip {
  display: inline-flex;
  gap: .4ch;
  align-items: baseline;
  padding: 0 .5em;
  border-radius: 999px;
  background: var(--c-cream-soft, #f5f1e8);
  border: 1px solid var(--c-border, #ddd);
  color: var(--c-text, #1d1c1a);
  white-space: nowrap;
}
.commute-chip strong { font-weight: 600; }
.commute-chip[data-tone="ok"]       { background: rgba(42, 157, 74, 0.12); border-color: rgba(42, 157, 74, 0.45); }
.commute-chip[data-tone="ok-soft"]  { background: rgba(196, 163, 107, 0.14); border-color: rgba(196, 163, 107, 0.45); }
.commute-chip[data-tone="warn"]     { background: rgba(201, 138, 0, 0.12); border-color: rgba(201, 138, 0, 0.45); }
.commute-chip[data-tone="warn-hot"] { background: rgba(215, 101, 73, 0.14); border-color: rgba(215, 101, 73, 0.45); }
.commute-chip[data-tone="fade"]     { opacity: 0.65; }

/* Dark-theme parity */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-441 — /workflow magazine table-of-contents
 *
 * Replaces the unstyled `<ul.posting-list>` with an editorial TOC:
 * hanging arabic numeral (Cormorant italic, gold-darker) · serif title
 * (Newsreader body) or italic mono URL-host fallback · status chip-row ·
 * Cormorant italic % · vermilion "Open →". Postings are grouped by
 * workflow status into Manrope small-caps bucket headings so a 33-row
 * inventory reads as a magazine front page, not a flat scroll.
 *
 * Visual rules:
 *   - Single CSS counter `workflow-row` increments across all buckets
 *     so the user reads "01, 02, … 33" as one sequence.
 *   - Buckets emit as a full-width `<li>` with `grid-column: 1 / -1`;
 *     they don't increment the counter.
 *   - Fallback URL-host renders in italic monospace + muted color so
 *     it's visibly distinguishable from a real parsed title (the
 *     editorial vocabulary doesn't promote a domain as if it were a
 *     headline — anti-slop discipline).
 *   - Below 640px the meta + percentage + CTA wrap below the title.
 * ════════════════════════════════════════════════════════════════════ */

/* OMOIKANE-444: TOC restructure — operator-flagged "title is faaaar
 * away from chips/buttons, applications not clearly separated".
 *
 * Before: parent `<ol.workflow-toc>` was a single grid, every row
 * used `display: contents` to splay across `3.5ch / minmax(0,1fr) /
 * auto / auto / auto` columns. The `1fr` title column flex-grew on
 * wide screens, pushing chips + score + CTA to the far right edge
 * with hundreds of pixels of dead space between title and meta. The
 * `display: contents` also made per-row borders impossible — rows
 * blended together visually.
 *
 * After: parent is a flat `<ol>`. Each `<li.workflow-toc__row>` is
 * its OWN grid with auto-sized columns (numeral + title + chips +
 * score + CTA) plus a thin gold-soft `border-bottom` for separation.
 * Title flows wide on a second `body` line so the chip-row sits
 * RIGHT NEXT to the right edge of the title instead of drifting.
 *
 * Result: title + body cluster on row line 1 (left-anchored); chips
 * + score + CTA on the right of line 1 (no gap-drift); each row
 * separated by a thin rule. */
.workflow-toc {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: workflow-row;
}

/* Bucket eyebrow — Manrope small-caps + count + gold-soft top rule
 * (except the first one which sits flush). Spans the full width
 * since the parent is no longer a grid. */
.workflow-toc__bucket {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-top: var(--s-4, 1.5rem);
  margin: var(--s-2, 0.5rem) 0 var(--s-2, 0.5rem) 0;
  border-top: 1px solid var(--c-rule);
}
.workflow-toc__bucket:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.workflow-toc__bucket-count {
  color: var(--c-gold-darker, #a78a3e);
  margin-left: 0.4em;
  font-style: italic;
  letter-spacing: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: none;
}

/* Row — its own grid. Columns size to content (no 1fr flex-grow);
 * extra horizontal space goes to the right-edge whitespace after
 * the CTA, NOT between title and chips. Border-bottom separates
 * rows; the LAST row in a bucket drops its border (collapsed by
 * the next bucket's top border). */
.workflow-toc__row {
  /* All cols `auto` so each row's chips/score/CTA cluster IMMEDIATELY
   * after the title body. No 1fr filler in the middle — slack ends
   * up on the right edge of the row, NOT between title and chips
   * (operator-flagged: "title is faaaaar away from chips"). Each row
   * is its own grid so independent rows compute their own column
   * widths — a short URL host doesn't make every row's title col
   * wide. */
  display: grid;
  grid-template-columns: 3ch auto auto auto auto;
  column-gap: var(--s-4, 1.5rem);
  align-items: baseline;
  padding: var(--s-3, 1rem) 0;
  border-bottom: 1px solid var(--c-rule-soft, rgba(184, 150, 90, 0.18));
  counter-increment: workflow-row;
  transition: background 180ms ease;
}
.workflow-toc__row:hover {
  background: rgba(184, 150, 90, 0.04);
}
.workflow-toc__row:last-child {
  border-bottom: 0;
}

.workflow-toc__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--c-gold-darker, #a78a3e);
  line-height: 1;
  text-align: right;
  padding-top: 0.15em;
  user-select: none;
}
.workflow-toc__num::before {
  content: counter(workflow-row, decimal-leading-zero);
}

.workflow-toc__body {
  min-width: 0;
}
.workflow-toc__title {
  font-family: var(--font-serif-body, var(--font-serif));
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.3;
  word-break: break-word;
}
.workflow-toc__title-fallback {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--c-text-muted);
  word-break: break-word;
}
.workflow-toc__company {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.workflow-toc__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  /* chips sit immediately after the title body via the auto
   * column track + the spacer cell pushing residual width to the
   * left of chips — chips end up near the title, far from the
   * right edge */
}

.workflow-toc__pct {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
  color: var(--c-text-muted);
  min-width: 3.5ch;
}
.workflow-toc__pct--low  { color: var(--c-vermilion, #c75135); }
.workflow-toc__pct--mid  { color: var(--c-amber, #c98a00); }
.workflow-toc__pct--high { color: #1d6f33; }

.workflow-toc__cta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
  white-space: nowrap;
  transition: color 180ms ease, transform 180ms ease;
}
.workflow-toc__cta:hover,
.workflow-toc__cta:focus-visible {
  color: var(--c-vermilion-darker, #b53d20);
  transform: translateX(2px);
}

@media (max-width: 640px) {
  /* Stack the secondary cells under the title on narrow viewports. */
  .workflow-toc__row {
    grid-template-columns: 3ch 1fr;
    row-gap: var(--s-2);
  }
  .workflow-toc__meta,
  .workflow-toc__pct,
  .workflow-toc__cta {
    grid-column: 2 / -1;
  }
  .workflow-toc__pct { text-align: left; }
}

/* OMOIKANE-441 — real .chip--done / .chip--todo CSS. Previously
 * unstyled (the audit found ZERO rules), so the 4-step funnel progress
 * indicator was silently broken (done = todo visually). Done = gold-
 * soft tinted pill; todo = transparent + dashed border. */
.chip--done {
  background: rgba(184, 150, 90, 0.18);
  color: var(--c-gold-darker, #a78a3e);
  border: 1px solid rgba(184, 150, 90, 0.5);
}
.chip--todo {
  background: transparent;
  color: var(--c-text-muted, #767066);
  border: 1px dashed var(--c-border, #cbb);
}
.chip-meta {
  margin-left: 0.4em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-muted);
}

/* OMOIKANE-441 — outcome-pill (rendered when posting.outcome is
 * set). Previously unstyled. Vermilion accent for "applied", muted
 * neutral for "closed", sage-tinted for "interview". */
.outcome-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.7em;
  margin-left: 0.5em;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  background: rgba(215, 101, 73, 0.12);
  color: var(--c-vermilion, #c75135);
  border-left: 2px solid var(--c-vermilion, #c75135);
}

/* OMOIKANE-441 — empty-state: editorial 4-step funnel diagram so
 * first-time users see the workflow shape, not a one-line "no
 * postings yet" with a CTA. */
.workflow-empty {
  padding: var(--s-4, 1.5rem) 0;
  max-width: 56ch;
  margin: 0 auto;
  text-align: left;
}
.workflow-empty__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-4, 1.5rem) 0;
}
.workflow-empty__funnel {
  display: grid;
  grid-template-columns: 3.5ch 1fr;
  column-gap: var(--s-3, 1rem);
  row-gap: var(--s-3, 1rem);
  margin: 0 0 var(--s-5, 2rem) 0;
  padding: 0;
  list-style: none;
  counter-reset: funnel-step;
}
.workflow-empty__step {
  display: contents;
  counter-increment: funnel-step;
}
.workflow-empty__step-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--c-gold-darker, #a78a3e);
  line-height: 1;
  text-align: right;
}
.workflow-empty__step-num::before { content: counter(funnel-step) "."; }
.workflow-empty__step-body { color: var(--c-text); }
.workflow-empty__step-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  color: var(--c-text);
}
.workflow-empty__step-prose {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text-muted);
  margin: 0.2em 0 0 0;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-441 — dark `.btn--primary` carries the vermilion accent
 *
 * Audit found the dark-mode primary CTA at `#2a2d34` on `.card` bg
 * `#1c1f26` — charcoal-on-charcoal ghost indistinguishable from
 * secondary buttons. Per anti-slop rules, the single decisive CTA is
 * the hero of every page. Restore vermilion fill in BOTH dark
 * triggers (@media + :root[data-theme="dark"]).
 * ════════════════════════════════════════════════════════════════════ */

/* OMOIKANE-441 — workflow magazine TOC + chips dark-mode mirrors */

/* OMOIKANE-443: chip-row spacing. Without `gap` the 4 step pills
 * (G / CV / L / E) touched edges and read as one elongated pill
 * ("GCVLE"). Inline-flex + gap restores the per-step boundary. */
.chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-448 — crawl-health modal: card grid instead of 5-column
 * wide table that overflowed the dialog width with horizontal scroll
 * (operator-flagged 2026-05-22).
 *
 * Per-source data renders as a card; cards are grouped by health
 * bucket (BROKEN / DEGRADED / IDLE / HEALTHY). Bucket eyebrow carries
 * a LED-style indicator + count. Inside each bucket cards lay out
 * via `grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))`
 * so they reflow without horizontal scroll regardless of viewport.
 * ════════════════════════════════════════════════════════════════════ */
.crawl-health-bucket__head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--s-2, 0.5rem) 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-text-muted, #767066);
  padding-bottom: var(--s-1, 0.25rem);
  border-bottom: 1px solid var(--c-rule-soft, rgba(184, 150, 90, 0.18));
}
.crawl-health-bucket__count {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
  color: var(--c-gold-darker, #a78a3e);
  margin-left: 0.3em;
}

.crawl-health-led {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--c-text-muted, #767066);
  flex: 0 0 auto;
}
.crawl-health-led--broken   { background: radial-gradient(circle at 30% 30%, #f48a6a, #c63d2f 60%, #8a2010); box-shadow: 0 0 6px rgba(198, 61, 47, 0.55); }
.crawl-health-led--degraded { background: radial-gradient(circle at 30% 30%, #f0c870, #c98a00 60%, #8a5a00); box-shadow: 0 0 6px rgba(201, 138, 0, 0.55); }
.crawl-health-led--idle     { background: radial-gradient(circle at 30% 30%, #b0a896, #767066 60%, #4a443a); }
.crawl-health-led--healthy  { background: radial-gradient(circle at 30% 30%, #6fbf87, #1d6f33 60%, #0f4720); box-shadow: 0 0 6px rgba(29, 111, 51, 0.45); }
/* OMOIKANE-1612 — DRY: the source runs and does not fail but returns zero rows. Slate-blue, distinct from idle-grey and degraded-amber. */
.crawl-health-led--dry      { background: radial-gradient(circle at 30% 30%, #8fb0c8, #4a6f8a 60%, #2c4457); box-shadow: 0 0 6px rgba(74, 111, 138, 0.5); }

.crawl-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-3, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crawl-health-card {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--c-border, #cbb);
  border-radius: 4px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.crawl-health-card--broken   { border-left: 3px solid var(--c-vermilion, #c63d2f); }
.crawl-health-card--degraded { border-left: 3px solid var(--c-amber, #c98a00); }
.crawl-health-card--idle     { border-left: 3px solid var(--c-text-muted, #767066); opacity: 0.85; }
.crawl-health-card--healthy  { border-left: 3px solid #1d6f33; }
.crawl-health-card--dry      { border-left: 3px solid #4a6f8a; }

.crawl-health-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
}
.crawl-health-card__name code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-text);
}
.crawl-health-card__pct {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-text);
}
.crawl-health-card--broken   .crawl-health-card__pct { color: var(--c-vermilion, #c63d2f); }
.crawl-health-card--degraded .crawl-health-card__pct { color: var(--c-amber, #c98a00); }
.crawl-health-card--healthy  .crawl-health-card__pct { color: #1d6f33; }
.crawl-health-card--idle     .crawl-health-card__pct { color: var(--c-text-muted, #767066); }
.crawl-health-card--dry      .crawl-health-card__pct { color: #4a6f8a; }

.crawl-health-card__meta {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted, #767066);
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}
.crawl-health-card__error {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--c-vermilion, #c63d2f);
}
.crawl-health-card__stale {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--c-text-muted, #767066);
  font-style: italic;
}
.crawl-health-card__idle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--c-text-muted, #767066);
  font-style: italic;
}

/* dark-theme mirrors */

/* Widen the dialog so the card grid has room to breathe — 5 cols of
 * 15rem each + gaps + padding = ~58rem comfortable. Stays responsive
 * via the existing `width: calc(100vw - 2rem)` clamp. */
#crawl-health-dialog { max-width: 60rem !important; }

/* ============================================================
   OMOIKANE-474 — Calendar surface (/calendar)
   ============================================================
   Month grid + upcoming list + iCal subscription panel.
   Server-rendered Maud (no JS). CSS Grid for the month;
   flex for the upcoming list. Editorial chrome on the H1
   (vermilion accent rule); chip palette inherits from the
   existing chip--sage / chip--pink / chip--blue tokens.
*/

.calendar-page__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 2px solid var(--c-vermilion);
}
.calendar-page__title {
  margin: 0;
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
}
.calendar-page__month-label {
  margin: var(--s-1) 0 0 0;
  font-size: 1.15rem;
  color: var(--c-text-muted);
}
.calendar-page__monthnav {
  display: inline-flex;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* Two-column at wide viewports: grid | upcoming aside.
   Single column on mobile (stacks naturally via grid-template-columns). */
.calendar-page__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
@media (min-width: 980px) {
  .calendar-page__cols {
    grid-template-columns: minmax(0, 2.6fr) minmax(15rem, 1fr);
  }
}

/* ── Month grid ── */
.cal-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-border-soft, #efece4);
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-grid__weekrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--c-border-soft, #efece4);
}
.cal-grid__weekhead {
  background: var(--c-cream-soft, #fbf9f4);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cal-grid__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(5.5rem, auto);
  gap: 1px;
  background: var(--c-border-soft, #efece4);
}
.cal-grid__day {
  background: var(--c-cream-soft, #fbf9f4);
  padding: var(--s-2);
  min-height: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.85rem;
}
.cal-grid__day--out {
  background: var(--c-cream, #f5f1e8);
}
.cal-grid__day--out .cal-grid__day-num {
  opacity: 0.35;
}
.cal-grid__day--today {
  box-shadow: inset 0 0 0 2px var(--c-vermilion);
  position: relative;
}
.cal-grid__day--today .cal-grid__day-num {
  color: var(--c-vermilion);
  font-weight: 600;
}
.cal-grid__day-num {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 0.85rem;
  align-self: flex-start;
}
.cal-grid__events {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

/* ── Event chip (used in grid + upcoming list) ── */
.cal-event {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm, 4px);
  font-size: 0.78rem;
  line-height: 1.25;
  text-decoration: none;
  border-left: 3px solid currentColor;
  transition: transform 0.08s ease;
}
.cal-event:hover {
  transform: translateX(1px);
  filter: brightness(0.97);
}
.cal-event:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: 2px;
}
.cal-event__time {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.cal-event__title {
  font-weight: 500;
}
.cal-event__subtitle {
  font-size: 0.72rem;
  opacity: 0.85;
}
.cal-event--cancelled .cal-event__title {
  text-decoration: line-through;
}
.cal-event--cancelled {
  opacity: 0.55;
}
.cal-event--dispatch-error {
  border-left-color: var(--c-vermilion);
}
.cal-event__warn {
  display: inline-block;
  align-self: flex-end;
  background: var(--c-vermilion);
  color: white;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 0.65rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  border-radius: 50%;
}

/* ── Upcoming list ── */
.cal-upcoming {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cal-upcoming__item .cal-event {
  font-size: 0.88rem;
  padding: var(--s-2) var(--s-3);
}

/* ── Empty state ── */
.cal-empty {
  padding: var(--s-4);
  background: var(--c-cream-soft, #fbf9f4);
  border-radius: var(--r-md);
  border: 1px dashed var(--c-border-soft, #efece4);
}
.cal-empty__title {
  font-family: var(--font-serif-body, 'Newsreader', serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--c-text);
}

/* ── Subscription panel ── */
.cal-subscribe__field input {
  background: var(--c-cream, #f5f1e8);
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: var(--r-sm, 4px);
  color: var(--c-text);
}
.cal-subscribe__field input:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: 2px;
  border-color: var(--c-vermilion);
}

/* ── Dark theme mirrors ── */

/* ============================================================
   OMOIKANE-495 — Print Report modal on /workflow + report styling
   ============================================================
   Modal: <dialog> with the form. Report body: the same Maud output
   is used for the inline preview, the PDF (wrapped + inlined-CSS),
   and the shareable-link public read.
*/

.workflow-report-modal {
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: var(--r-md, 8px);
  padding: 0;
  max-width: 36rem;
  width: calc(100vw - 2rem);
  background: var(--c-cream-soft, #fbf9f4);
  color: var(--c-text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.workflow-report-modal::backdrop {
  background: rgba(30, 45, 79, 0.4);
}
.workflow-report-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--c-vermilion);
  background: var(--c-cream-soft);
}
.workflow-report-modal__head h2 {
  margin: 0;
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
}
.workflow-report-form {
  padding: var(--s-4);
}
.workflow-report-form__field {
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: var(--r-sm, 4px);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: var(--c-cream, #f5f1e8);
}
.workflow-report-form__field legend {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6f5e3f);
  padding: 0 var(--s-2);
}
.radio-pill, .checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  margin: 0.15rem 0.2rem 0.15rem 0;
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft, #efece4);
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease;
}
.radio-pill:has(input:checked),
.checkbox-pill:has(input:checked) {
  background: var(--c-vermilion-tint, rgba(199, 62, 29, 0.08));
  border-color: var(--c-vermilion);
}
.radio-pill input, .checkbox-pill input {
  margin: 0;
}
.workflow-report-form__custom-range {
  display: none;  /* JS toggles to flex when Custom radio is picked */
}
.workflow-report-form__actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-soft, #efece4);
}

/* ── Report body — used by HTML preview + shared-link landing.
   The PDF path inlines its own stylesheet via wrap_html_for_pdf().
*/
.workflow-report {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-serif-body, 'Newsreader', serif);
  color: var(--c-text);
  line-height: 1.5;
}
.workflow-report__cover {
  border-bottom: 2px solid var(--c-vermilion);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
}
.workflow-report__eyebrow {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6f5e3f);
  margin: 0 0 var(--s-1) 0;
}
.workflow-report__title {
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
  font-size: 2.4rem;
  margin: 0;
  color: var(--c-navy, #1e2d4f);
}
.workflow-report__period {
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-text-muted);
  margin: var(--s-2) 0;
}
.workflow-report__note {
  padding: var(--s-3);
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-gold, #b89968);
  margin-top: var(--s-3);
}
.workflow-report__section {
  margin: var(--s-5) 0;
}
.workflow-report__section h2 {
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  margin: 0 0 var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-soft, #efece4);
  padding-bottom: var(--s-1);
}

.workflow-report__funnel, .workflow-report__topn {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.workflow-report__funnel-row, .workflow-report__topn-row {
  display: grid;
  grid-template-columns: 14ch 4ch 1fr auto;
  gap: var(--s-2);
  align-items: center;
}
.workflow-report__funnel-bar, .workflow-report__topn-bar {
  background: var(--c-gold-soft, #d1b884);
  height: 0.5rem;
  border-radius: 2px;
  opacity: 0.7;
}

.workflow-report__chart {
  margin: 0;
}
.workflow-report__chart-svg {
  width: 100%;
  height: 8rem;
  color: var(--c-vermilion);
}

.workflow-report__postings {
  list-style: none;
  padding: 0;
  margin: 0;
}
.workflow-report__posting {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border-soft, #efece4);
}
.workflow-report__posting-head {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
}
.workflow-report__posting-num {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  color: var(--c-text-muted);
}
.workflow-report__posting-title {
  font-family: var(--font-serif-display, 'Cormorant Garamond', serif);
  font-size: 1.2rem;
  margin: 0;
}
.workflow-report__posting-meta {
  font-size: 0.88rem;
  margin: var(--s-1) 0 0 0;
}
.workflow-report__excerpt {
  margin: var(--s-2) 0 0 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-border-soft, #efece4);
}
.workflow-report__excerpt summary {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-muted, #6f5e3f);
  cursor: pointer;
}
.workflow-report__outcome--applied   { background: var(--c-blue-bg);  color: var(--c-blue-text); }
.workflow-report__outcome--replied   { background: var(--c-cream-bg); color: var(--c-cream-text); }
.workflow-report__outcome--interview { background: var(--c-purple-bg);color: var(--c-purple-text); }
.workflow-report__outcome--offer     { background: var(--c-sage-bg);  color: var(--c-sage-text); }
.workflow-report__outcome--rejected  { background: #f0d0d0;           color: #7a3838; }
.workflow-report__footer {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-soft, #efece4);
}

/* Share-success page */
.workflow-report-share-success {
  max-width: 36rem;
  margin: var(--s-5) auto;
}
.workflow-report-share-success__url {
  padding: var(--s-2) var(--s-3);
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-vermilion);
  font-family: monospace;
  word-break: break-all;
  margin: var(--s-3) 0;
}

/* @media print ensures the report still looks good on the
   browser's File→Print path (in addition to Gotenberg's PDF). */
@media print {
  .workflow-report__section { page-break-inside: avoid; }
  .workflow-report__posting { page-break-inside: avoid; }
  body > nav,
  body > header,
  .sidebar,
  .workflow-report-modal,
  .btn-row,
  .skip-link { display: none !important; }
}

/* Dark-theme mirrors */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-522 — chip-radio.is-active default (light theme).
   /profile/goals's Remote acceptance group used to drive selection
   state via server-rendered inline `background: var(--c-navy, ...)`.
   Clicking a chip toggled the radio internally but produced NO
   visual change (the inline style stayed locked to the server value;
   the form has many fields so we can't auto-submit on change).
   The view now adds class `is-active` server-side AND flips it
   client-side via a tiny onchange handler. This rule supplies the
   matching visual style for the light theme. Dark theme already has
   `:root[data-theme="dark"] .chip-radio.is-active { ... }` further up.
   ════════════════════════════════════════════════════════════════════ */
.chip-radio.is-active {
  background: var(--c-navy, #1e2d4f);
  color: var(--c-text-on-navy, #f5f1e8);
  border-color: var(--c-navy, #1e2d4f);
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-530 — /profile/goals dark-mode contrast fixes.
   Operator-flagged 2026-05-23: the "VERDICTS · 13 DIMENSIONS" kicker
   AND the form-field labels (e.g. "Remote acceptance") rendered too
   bright on the auto-dark theme — both used colors near the body text
   (#e0dbcd / #9c9588) which on a dark background read as "too white".
   These overrides drop them to the dimmer `--c-text-light` (#6b6557)
   in dark mode so they read as secondary/eyebrow copy, not body. The
   light-mode treatment is preserved by NOT touching the base rule.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-546 — /coaching/values/v2 Tier 1 cards dark-mode parity.
   Operator-flagged 2026-05-22: each of the 30 value-cards rendered
   with a cream/off-white background in dark mode (the implicit body
   surface), reading as 30 light-mode rectangles floating on the dark
   stage. The values page wraps each card in `li.t-values-card` with
   a child `fieldset`; neither has an explicit dark-theme override.
   Adopt the same `coaching-card` dark token (#1c1f26 + dark border)
   so the cards visually integrate with the dark surface instead of
   floating as light islands.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
 * OMOIKANE-663 — /workflow/posting/<id> command-center layout.
 *
 * Two-column grid (CONVERSATION big + CONTACTS/CALENDAR rail) on
 * desktop; mobile (≤1024px) drops the rail under the conversation
 * widget. Activity remains a horizontal step strip until ≤640px where
 * it wraps to two rows.
 * ════════════════════════════════════════════════════════════════════ */
.cmd-center__hero {
  margin-bottom: var(--s-4);
}
.cmd-center__hero .page-head {
  margin-bottom: var(--s-2);
}
.cmd-center__hero .chip-row.cmd-center__status {
  margin-top: var(--s-3);
}
.cmd-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.cmd-center__main {
  min-width: 0;
}
.cmd-center__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.cmd-center__rail-row {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-divider, var(--c-border-soft, #e0dccf));
}
.cmd-center__rail-row:last-child {
  border-bottom: 0;
}
.cmd-center__rail .card h2 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin-bottom: var(--s-2);
}

/* Mobile breakpoint — single column. */
@media (max-width: 1024px) {
  .cmd-center-grid {
    grid-template-columns: 1fr;
  }
}

/* Chip - strong variant (vermilion-tinted background) for the hero
   status strip. Visible against dark mode (the existing chip--neutral
   washes out on dark backgrounds). */
.chip--strong {
  background: var(--c-vermilion-tint, rgba(199, 62, 29, 0.12));
  color: var(--c-vermilion, #c73e1d);
  font-weight: 500;
  border: 1px solid transparent;
}

/* OMOIKANE-667 — chip--pink is the "safety-flagged" colour in the hero
   status strip (drafts_safety_flagged); the light-mode token is a soft
   cream pink with darker text. On the dark theme the pink-bg becomes
   barely distinguishable from the dark page background — the chip
   becomes effectively invisible. Override with a warmer rust-tone
   background + brighter text so the badge remains readable. */

/* Activity horizontal step strip. */
.activity-strip__list {
  flex-wrap: wrap;
}
.activity-strip__step {
  min-width: 6rem;
}
.activity-strip__msg {
  font-size: 0.85em;
  text-align: center;
  max-width: 9rem;
}
@media (max-width: 640px) {
  .activity-strip__list {
    flex-direction: column;
    align-items: flex-start;
  }
  .activity-strip__step {
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0;
  }
  .activity-strip__divider {
    display: none;
  }
}

/* Artifacts disclosure rows — collapsed by default, row separators
   between siblings. */
.artifacts__row {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-divider, var(--c-border-soft, #e0dccf));
}
.artifacts__row:last-child {
  border-bottom: 0;
}
.artifacts__row summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
}
.artifacts__row summary::-webkit-details-marker {
  display: none;
}
.artifacts__row summary::before {
  content: "▸ ";
  color: var(--c-vermilion, #c73e1d);
  font-size: 0.85em;
  margin-right: 0.3em;
}
.artifacts__row[open] summary::before {
  content: "▾ ";
}

/* OMOIKANE-663 — mobile fix: on /workflow/posting/<id> the
   .no-shrine body + .main .page-head fallback inserted a generic
   "TODAY'S BULLETIN" pseudo-eyebrow with a padding-top: var(--s-4)
   block. Because the command-center hero now emits a real
   .dash-datestamp the fallback is suppressed by an existing rule
   (.main .dash-datestamp ~ .page-head::before { display: none; }).
   We also drop the .main .page-head padding-top when the hero is
   the first child so the screen doesn't get a ~580px empty band
   above the H1 on mobile.

   Audit screenshot 13 (OMOIKANE-663) captured the empty-band bug
   on iPhone-12 viewport (375 × 812). The fix: when the .cmd-center__hero
   wraps the page-head, the leading margin/padding collapses to the
   hero's own spacing budget. */
.cmd-center__hero .page-head {
  padding-top: 0;
  margin-top: 0;
}
.cmd-center__hero .dash-datestamp {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* OMOIKANE-667 — the OMOIKANE-663 mobile fix above only zeros the
   margin/padding budget INSIDE the cmd-center__hero. On 414px viewport
   the audit found ~690px of empty cream BEFORE the hero — the .main
   container itself was carrying a tall padding-top + the side rail was
   reserving vertical space even though `position: fixed` should keep
   it out of flow. Defensive fix: on mobile + .no-shrine bodies, cap
   .main padding-top to just enough room for the fixed burger button
   (4.5rem ≈ 72px) and force the hero to flush to the top of .main.
   This works regardless of which upstream rule was actually padding
   the band — it explicitly bounds the gap at the point we render. */
@media (max-width: 767px) {
  body.no-shrine .main {
    padding-top: 4.5rem;
  }
  body.no-shrine .cmd-center__hero {
    margin-top: 0;
  }
  body.no-shrine .cmd-center__hero .dash-datestamp {
    margin-top: 0;
    padding-top: 0;
  }
}

/* -- 2026-06-03 Refactored Components (Match Gate & Coaching) -- */

/* Match Gate Components */
.gate-score-row {
  display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-3); flex-wrap: wrap;
}

.donut-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 150ms ease, opacity 150ms ease;
}
.donut-btn:hover, .donut-btn:focus-visible {
  transform: scale(1.04);
}
.donut-btn:active {
  transform: scale(0.98);
}

.btn-link {
  background: transparent; border: 0; color: var(--c-text-muted, #767066);
  font-size: 0.85em; text-decoration: underline; cursor: pointer; padding: 0; align-self: center;
  transition: color 150ms ease;
}
.btn-link:hover, .btn-link:focus-visible {
  color: var(--c-text);
}

/* Coaching Stage Nav */
.coaching-stage-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border, #ddd); flex-wrap: wrap;
}
.coaching-stage-nav__prev { min-width: 10rem; }
.coaching-stage-nav__current { text-align: center; font-size: 0.88em; flex: 1; }
.coaching-stage-nav__next { min-width: 10rem; text-align: right; }

/* Foundation Map */
.card--foundation {
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--c-vermilion, #B8965A);
}
.foundation-map__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
}
.foundation-map__eyebrow {
  font-size: 0.75em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-vermilion, #B8965A); font-weight: 500; margin-bottom: 0.2em;
}

.progress-bar {
  margin-top: var(--s-3); height: 6px; background: var(--c-border, #e8ecf3);
  border-radius: 3px; overflow: hidden;
}
.progress-bar__fill {
  height: 100%; background: var(--c-navy, #0f2444); border-radius: 3px; transition: width 240ms ease-out;
}

.foundation-map__stages {
  list-style: none; padding: 0; margin: var(--s-4) 0 0 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}

/* Foundation Stage Rows */
.foundation-stage {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-2) var(--s-3); border-radius: 8px;
  background: transparent; opacity: 1;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.foundation-stage--done { background: transparent; }
.foundation-stage--next { background: var(--c-cream, #f5f1e8); }
.foundation-stage--upcoming { opacity: 0.72; }

/* Micro-animations for stage rows */
.foundation-stage:hover {
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.foundation-stage__badge {
  flex: 0 0 auto; min-width: 2.2em; height: 2.2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.88em;
  background: var(--c-border, #e8ecf3); color: var(--c-text, #2a2a2a);
}
.foundation-stage--done .foundation-stage__badge { background: var(--c-sage, #c8e6c9); }
.foundation-stage--next .foundation-stage__badge { background: var(--c-vermilion, #B8965A); color: #fff; }

.foundation-stage__body { flex: 1; min-width: 0; }
.foundation-stage__header { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.foundation-stage__link { font-weight: 600; color: var(--c-text, #2a2a2a); text-decoration: none; }
.foundation-stage__next-chip { font-size: 0.72em; padding: 0.1em 0.5em; }
.foundation-stage__desc { font-size: 0.85em; color: var(--c-text-muted, #555); margin-top: 0.15em; line-height: 1.5; }

/* Methodology Hub */
.card--method-hub {
  margin: var(--s-3) 0 var(--s-4) 0; padding: var(--s-3) var(--s-4);
  background: var(--c-cream-soft); color: var(--c-text);
  border-left: 4px solid var(--c-vermilion, #B8965A); border-radius: 8px;
}
.method-hub__eyebrow {
  font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-vermilion, #B8965A); font-weight: 500; margin-bottom: 0.4em;
}
.method-hub__title {
  font-family: var(--font-serif-body); font-size: 1.05em; font-weight: 600; margin: 0 0 var(--s-2) 0;
}
.method-hub__list {
  margin: 0 0 var(--s-2) 0; padding-left: var(--s-4); line-height: 1.6; font-size: 0.95em;
}

/* Goals Profile View Components */
.goal-section {
  margin-bottom: var(--s-3);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms ease;
  will-change: transform, box-shadow;
}
.goal-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.goal-section--mb4 { margin-bottom: var(--s-4); }
.goal-section--success { border-left: 4px solid #2a9d4a; }
.goal-section--error { border-left: 4px solid var(--c-vermilion, #d44d2a); }
.goal-section--warning { border-left: 4px solid var(--c-amber, #c98a00); }

.goal-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.goal-grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.goal-grid-split {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr 1fr;
}
.goal-grid-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
}

.goal-fieldset {
  margin-top: var(--s-4);
  border: 1px solid var(--c-border);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.4), transparent);
  transition: border-color 300ms ease, background 300ms ease;
}
.goal-fieldset:focus-within {
  border-color: var(--c-vermilion, #d44d2a);
  background: linear-gradient(145deg, rgba(255,255,255,0.7), transparent);
}
.goal-legend {
  padding: 0 var(--s-2);
  font-weight: 600;
  color: var(--c-text);
}

.goal-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

.goal-input {
  width: 100%;
  padding: var(--s-2);
  transition: box-shadow 300ms ease, border-color 300ms ease;
}
.goal-input:focus {
  box-shadow: 0 0 0 3px rgba(212, 77, 42, 0.15);
}

/* Legacy Dashboard KPI classes */
.card--legacy-match {
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--c-vermilion, #d44d2a);
}
.card--legacy-snapshot {
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--c-navy, #0f2444);
  background: var(--c-cream, #f5f1e8);
}
.legacy-head {
  display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap;
}
.legacy-mt-3 { margin-top: var(--s-3); }
.legacy-mb-5 { margin-bottom: var(--s-5); }
.legacy-gap-4-mb-5 { gap: var(--s-4); margin-bottom: var(--s-5); }
.legacy-mt-4-text { margin-top: var(--s-4); font-size: .9em; }
.legacy-mt-2-text { margin-top: var(--s-2); font-size: .9em; }
.legacy-link-vermilion { color: var(--c-vermilion, #d44d2a); }
/* NEO-BRUTALIST (OMOIKANE-1254) + CINEMATIC/SHADCN theme (OMOIKANE-1293)
   fully removed. The app is single-theme (Calm): the server hardcodes
   data-style="calm" and forces it over any stale omk_style cookie
   (see views/page_shells.rs), so every [data-style="cinematic"] override
   here was dead. Deleted per OMOIKANE-1293 acceptance test #2 (retire
   cinematic + neo-brutal + the toggle fully). */
/* ═══════════════════════════════════════════════════════════════════════
   OMOIKANE MOCKUP COMPONENT LAYER (OMOIKANE-1257)
   Authored design-bundle classes (design/app.css + Dashboard page CSS),
   folded in verbatim so live views can be re-ported to match the mockups
   1:1. All-new class names (none collide with existing app classes), so
   this is purely additive — it styles nothing until a view adopts a class.
   ═══════════════════════════════════════════════════════════════════════ */

/* page frame + header */
.wrap { max-width: 920px; margin: 0 auto; padding: var(--s-7) var(--s-7) var(--s-9); }
.wrap--narrow { max-width: 760px; }
.page-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--c-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.pace-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-sans);
  text-transform: none; letter-spacing: 0;
  font-size: 0.7rem;
  background: var(--c-sage-bg); color: var(--c-sage-text);
  padding: 0.16rem 0.55rem; border-radius: var(--r-pill);
  font-weight: 500;
}
.pace-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.greeting {
  font-family: var(--font-serif);
  /* OMOIKANE-1293 — the Calm template renders .greeting-style titles at
     ~30-34px, upright, weight 400 (Instrument Serif, 400-only). Was 600 /
     up-to-2.7rem which read bold + oversized against the template. */
  font-size: clamp(1.75rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--c-navy);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.greeting-sub {
  font-size: 1.02rem; color: var(--c-text-muted);
  margin-top: var(--s-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* panels */
.panel {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.panel--soft { background: var(--c-cream-soft); }
.panel--navy { background: var(--c-navy); color: var(--c-text-on-navy); border-color: transparent; }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.panel__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; color: var(--c-navy); }
.panel--navy .panel__title { color: var(--c-cream); }
.panel__link { font-size: 0.8rem; color: var(--c-gold-darker); text-decoration: none; font-weight: 500; }
.panel__link:hover { text-decoration: underline; }
.duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.sec-head { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.sec-head__title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; color: var(--c-navy); white-space: nowrap; flex: none; }
.sec-head__rule { flex: 1; height: 1px; background: var(--c-border); }

/* mockup buttons (gold primary / ghost-light / navy / outline / quiet) */
.btn-gold {
  display: inline-flex; align-items: center; gap: 0.5em;
  /* OMOIKANE-1293 — primary CTA is coral in the Calm template (matches the
     app-bar "Paste a job"); azure --c-gold stays for links/interactive. */
  background: var(--c-coral); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem;
  border: none; border-radius: var(--r-md);
  padding: 0.72rem 1.3rem; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s ease;
}
.btn-gold:hover { background: var(--c-coral-dark); color: #fff; }
.btn-gold:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.btn-ghost-light {
  background: transparent; color: var(--c-cream);
  border: 1px solid var(--c-border-on-navy);
  border-radius: var(--r-md); padding: 0.72rem 1.1rem;
  font-family: var(--font-sans); font-size: 0.9rem; cursor: pointer; white-space: nowrap;
}
.btn-ghost-light:hover { background: var(--c-navy-soft); }
.btn-navy {
  background: var(--c-navy); color: var(--c-cream); border: none; border-radius: var(--r-md);
  padding: 0.6rem 1.1rem; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none;
}
.btn-navy:hover { background: var(--c-navy-darker); }
.btn-outline {
  background: var(--c-white); color: var(--c-navy);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 0.55rem 1rem; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none;
}
.btn-outline:hover { border-color: var(--c-text-muted); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.btn-quiet { background: none; border: none; color: var(--c-text-muted); font-size: 0.88rem; cursor: pointer; text-decoration: underline; }

/* action button row (contact detail header, application detail, etc.) */
.head-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* definition rows + tag row */
.deflist { display: grid; gap: 0; }
.defrow { display: grid; grid-template-columns: 168px 1fr auto; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--c-border-soft); }
.defrow:first-child { border-top: none; }
.defrow__label { font-size: 0.82rem; color: var(--c-text-muted); padding-top: 0.1rem; }
.defrow__value { font-size: 0.95rem; color: var(--c-text); }
.defrow__value .sub { display: block; font-size: 0.82rem; color: var(--c-text-muted); margin-top: 0.15rem; }
.defrow__edit { font-size: 0.8rem; color: var(--c-gold-darker); text-decoration: none; white-space: nowrap; }
.defrow__edit:hover { text-decoration: underline; }
@media (max-width: 620px) { .defrow { grid-template-columns: 1fr; gap: var(--s-1); } }
.tagrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* multi-select toggle chips + segmented control */
.chips-toggle { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.toggle-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-sans); font-size: 0.88rem; color: var(--c-text);
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); padding: 0.42rem 0.9rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.toggle-chip:hover { border-color: var(--c-text-muted); }
.toggle-chip__tick { color: var(--c-text-light); font-weight: 700; }
.toggle-chip.on { background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy); }
.toggle-chip.on .toggle-chip__tick { color: var(--c-gold-soft); }
.seg { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-white); }
.seg button { padding: 0.55rem 1.1rem; font-size: 0.88rem; color: var(--c-text-muted); border: none; border-right: 1px solid var(--c-border); background: none; cursor: pointer; font-family: var(--font-sans); }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--c-navy); color: var(--c-cream); font-weight: 500; }

/* form fields */
.field { margin-bottom: var(--s-3); }
.field__label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--c-text); margin-bottom: var(--s-1); }
.field__hint { font-size: 0.78rem; color: var(--c-text-muted); margin-top: 0.3rem; }
.field__input {
  width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: var(--c-text);
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 0.6rem 0.8rem;
}
.field__input::placeholder { color: var(--c-text-light); }
.field__input:focus { outline: none; border-color: var(--c-gold-darker); box-shadow: 0 0 0 3px rgba(184,153,104,0.18); }

/* primary focus card (navy, the single most important action) */
.next-card {
  margin-top: var(--s-6);
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.next-card .kanji-bg { position: absolute; right: -0.1em; bottom: -0.36em; font-family: var(--font-cjk); font-size: 9rem; color: rgba(255,255,255,0.04); pointer-events: none; line-height: 1; }
.next-card__body { flex: 1; min-width: 0; z-index: 1; }
.next-card__eyebrow { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-gold-soft); margin-bottom: var(--s-2); }
.next-card__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; color: var(--c-cream); line-height: 1.2; }
.next-card__meta { font-size: 0.86rem; color: var(--c-text-on-navy-muted); margin-top: var(--s-2); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.next-card__meta .sep { opacity: 0.4; }

/* progress bar */
.prog { height: 7px; border-radius: var(--r-pill); background: var(--c-border-soft); overflow: hidden; }
.prog span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-gold); transition: width .3s ease; }

/* callouts (mockup scoped helpers) */
.note { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md); background: var(--c-cream-bg); color: var(--c-cream-text); font-size: 0.9rem; line-height: 1.55; }
.note--sage { background: var(--c-sage-bg); color: var(--c-sage-text); }
.note--insight { background: #f0e8d8; color: #6f5d2f; border-left: 3px solid var(--c-gold); }
.note--warn { background: var(--c-pink-bg); color: var(--c-pink-text); }
.note__icon { flex: none; font-size: 1rem; line-height: 1.4; }
.note__title { display: block; font-weight: 600; margin-bottom: 0.2rem; }

/* OMOIKANE-1293 — "New job onboarding" (settling first-months) page, cloned
   from the Calm template: dark hero, four phase cards (coloured pill + title +
   check-circle checklist), a question-chip row, and a sage permission-slip. */
.settle-hero { position: relative; overflow: hidden; }
.settle-hero__eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-text-on-navy-muted); }
/* OMOIKANE-1293 — template settling hero title is 25px (fixed), matching the
   coaching hero; live's clamp maxed at 1.9rem (30.4px @1440), rendering ~5px too
   large and inconsistent with the other section heros. Fixed to 25px. */
.settle-hero__title { font-family: var(--font-serif); font-weight: 400; font-style: normal; font-size: 1.5625rem; line-height: 1.15; color: var(--c-text-on-navy); margin-top: var(--s-2); max-width: 42ch; }
.settle-hero__sub { font-family: var(--font-sans); font-size: 0.95rem; color: var(--c-text-on-navy-muted); margin-top: var(--s-3); max-width: 62ch; }
.settle-sec-head { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; color: var(--c-navy); margin: var(--s-6) 0 var(--s-4); display: flex; align-items: center; gap: var(--s-4); }
.settle-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.settle-phases { display: flex; flex-direction: column; gap: var(--s-4); }
.settle-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); }
.settle-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.settle-card__pill { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.22em 0.7em; border-radius: 999px; white-space: nowrap; }
.settle-card__title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--c-navy); }
.settle-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.settle-card__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-family: var(--font-sans); font-size: 0.92rem; color: var(--c-text); line-height: 1.5; }
.settle-check { flex: none; margin-top: 0.1em; }
.settle-card--day1  .settle-card__pill { background: rgba(217,108,91,0.14); color: var(--c-coral-dark); }
.settle-card--day1  .settle-check { color: var(--c-coral); }
.settle-card--week1 .settle-card__pill { background: var(--c-cream-bg); color: var(--c-cream-text); }
.settle-card--week1 .settle-check { color: var(--c-amber-aa); }
.settle-card--weeks .settle-card__pill { background: rgba(58,124,165,0.14); color: var(--c-gold-darker); }
.settle-card--weeks .settle-check { color: var(--c-gold); }
.settle-card--month .settle-card__pill { background: var(--c-sage-bg); color: var(--c-sage-text); }
.settle-card--month .settle-check { color: var(--c-sage-text); }
.settle-questions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.settle-q { font-family: var(--font-sans); font-size: 0.88rem; color: var(--c-text); background: var(--c-white); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.5em 1em; }
.note--permission { background: var(--c-sage-bg); color: var(--c-sage-text); border-left: 3px solid var(--c-sage-text); flex-direction: column; gap: 0.2rem; margin-top: var(--s-5); }

/* OMOIKANE-1293 — single-page "Evaluate a job" flow (views/evaluate.rs), cloned
   from the Calm template: hero + Standard/Calm toggle, deadline banner, gentle
   guidance notes, score card + per-requirement criteria, decide actions,
   materials task checklist, and CV/cover-letter draft previews. */
.eval { display: flex; flex-direction: column; gap: var(--s-4); }
.eval-head { display: flex; flex-direction: column; gap: var(--s-2); }
.eval-modes { display: inline-flex; gap: var(--s-2); align-self: flex-start; background: var(--c-cream-soft); border-radius: 999px; padding: 0.25rem; margin-top: var(--s-2); }
.eval-mode { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; color: var(--c-text-muted); background: transparent; border: none; border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; white-space: nowrap; }
.eval-mode.is-active { background: var(--c-white); color: var(--c-navy); box-shadow: 0 1px 2px rgba(26,37,48,0.08); }
.eval-mode__icon { color: var(--c-amber-aa); }
.eval-deadline { display: flex; align-items: center; gap: var(--s-3); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); }
.eval-deadline__icon { color: var(--c-gold-darker); flex: none; display: inline-flex; }
.eval-deadline__text { font-family: var(--font-sans); font-size: 0.9rem; color: var(--c-text); }
.eval-deadline__cta { margin-left: auto; white-space: nowrap; }
.eval-guide { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.eval-guide--tip { background: rgba(58,124,165,0.10); color: var(--c-gold-darker); }
.eval-guide--soft { background: var(--c-cream-soft); color: var(--c-text); }
.eval-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.eval-card__head { display: flex; align-items: center; gap: var(--s-3); }
.eval-card__step { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--c-navy); color: var(--c-text-on-navy); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; flex: none; }
.eval-card__title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--c-navy); }
.eval-url-row { display: flex; gap: var(--s-2); }
.eval-url-row .field__input { flex: 1; }
.eval-result__head { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.eval-score { display: flex; flex-direction: column; gap: 0.1rem; flex: none; }
.eval-score__num { font-family: var(--font-serif); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--c-sage-text); }
.eval-score--gap .eval-score__num { color: var(--c-coral-dark); }
.eval-score__pct { font-size: 1.4rem; }
.eval-score__label { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--c-sage-text); }
.eval-score--gap .eval-score__label { color: var(--c-coral-dark); }
.eval-result__title { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: var(--c-navy); line-height: 1.1; }
.eval-result__sub { font-family: var(--font-sans); font-size: 0.88rem; color: var(--c-text-muted); margin-top: 0.2rem; }
/* OMOIKANE-1293 — job attributes as chip pills (template: #F1F4F4 chip, 11.5px,
   radius 20px, padding 4px 11px) instead of a middot text line. */
.eval-result__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.eval-metapill { font-family: var(--font-sans); font-size: 11.5px; color: #46555f; background: #f1f4f4; border-radius: 20px; padding: 4px 11px; white-space: nowrap; }
.eval-crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eval-crit__row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); }
.eval-crit__row:first-child { border-top: none; }
.eval-crit__dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: none; }
.eval-crit__row--match .eval-crit__dot { background: var(--c-sage-text); }
.eval-crit__row--partial .eval-crit__dot { background: var(--c-amber-aa); }
.eval-crit__row--gap .eval-crit__dot { background: var(--c-coral-dark); }
.eval-crit__label { font-family: var(--font-sans); font-size: 0.9rem; color: var(--c-text); flex: 1; }
.eval-crit__verdict { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.2em 0.7em; border-radius: 999px; }
.eval-crit__verdict--match { background: var(--c-sage-bg); color: var(--c-sage-text); }
.eval-crit__verdict--partial { background: var(--c-cream-bg); color: var(--c-amber-aa); }
.eval-crit__verdict--gap { background: rgba(217,108,91,0.14); color: var(--c-coral-dark); }
.eval-reasoning { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; color: var(--c-text); }
.eval-decide { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.eval-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.eval-task { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-sans); font-size: 0.9rem; color: var(--c-text); }
.eval-task__box { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 1.5px solid var(--c-border); font-size: 0.75rem; flex: none; }
.eval-task--done .eval-task__box { background: var(--c-sage-text); border-color: var(--c-sage-text); color: var(--c-white); }
.eval-task--done .eval-task__label { color: var(--c-text-muted); text-decoration: line-through; }
.eval-task--current .eval-task__box { border-color: var(--c-coral); }
.eval-task__label { flex: 1; }
.eval-task__eta { font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap; }
.eval-draft__body { font-family: var(--font-serif-body); font-size: 0.95rem; line-height: 1.65; color: var(--c-text); border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
/* Coral primary CTA within Evaluate — the bare `.btn--primary` is navy app-wide
   (a later rule overrides the coral one), so scope-override to match the
   template's coral "Apply / Run the match gate" buttons. */
.eval .btn--primary { background: var(--c-coral); color: #fff; border-color: transparent; }
.eval .btn--primary:hover { background: var(--c-coral-dark); color: #fff; }
@media (max-width: 720px) { .eval-result__head { gap: var(--s-3); } .eval-url-row { flex-direction: column; } }

/* loading skeleton (mockup uses .sk; app's own .skeleton is untouched) */
@keyframes om-sk-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.sk { background: linear-gradient(90deg, #ece7db 0px, #f3efe6 120px, #ece7db 240px); background-size: 600px 100%; animation: om-sk-shimmer 1.4s infinite linear; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* error box */
.errbox { margin-top: var(--s-6); background: var(--c-white); border: 1px solid var(--c-border); border-left: 4px solid var(--c-pink-text); border-radius: var(--r-lg); padding: var(--s-6); display: flex; gap: var(--s-4); align-items: flex-start; }
.errbox__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-pink-bg); color: var(--c-pink-text); display: grid; place-items: center; flex: none; font-size: 1.2rem; }
.errbox__title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--c-navy); font-weight: 500; }
.errbox__body { color: var(--c-text-muted); margin-top: var(--s-1); font-size: 0.92rem; max-width: 52ch; }
.errbox__actions { margin-top: var(--s-4); display: flex; gap: var(--s-3); }

/* empty state */
.empty { margin-top: var(--s-6); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--s-8) var(--s-7); text-align: center; }
.empty__kanji { font-family: var(--font-cjk); font-size: 2.6rem; color: var(--c-gold); letter-spacing: 0.2em; }
.empty__title { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; color: var(--c-navy); margin-top: var(--s-3); }
.empty__body { color: var(--c-text-muted); margin: var(--s-3) auto 0; max-width: 46ch; text-wrap: pretty; }
.empty__cta { margin-top: var(--s-5); }

/* ── Dashboard page-specific (from Dashboard mockup <style>) ───────────── */
.om-row { cursor: pointer; transition: background 0.12s ease; }
.pipe { display: flex; flex-direction: column; gap: var(--s-1); }
.pipe__row { display: flex; align-items: center; gap: var(--s-3); padding: 0.4rem 0; cursor: pointer; border-radius: var(--r-sm); }
.pipe__row:hover .pipe__label { color: var(--c-navy); }
.pipe__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pipe__label { flex: 1; font-size: 0.9rem; color: var(--c-text); }
.pipe__count { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--c-navy); min-width: 1.4em; text-align: right; }
.pipe__bar { flex: none; width: 90px; height: 5px; border-radius: 3px; background: var(--c-border-soft); overflow: hidden; }
.pipe__bar span { display: block; height: 100%; border-radius: 3px; }
.matches-num { font-family: var(--font-serif); font-size: 3.2rem; font-weight: 600; color: var(--c-navy); line-height: 1; }
.matches-cap { font-size: 0.9rem; color: var(--c-text-muted); margin-top: var(--s-2); }
.matches-foot { margin-top: var(--s-4); }
.duo__col { display: flex; flex-direction: column; gap: var(--s-4); }
.nudge { margin-top: var(--s-4); background: var(--c-cream-soft); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); display: flex; gap: var(--s-4); align-items: flex-start; }
.nudge__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--c-sage-bg); color: var(--c-sage-text); display: grid; place-items: center; flex: none; font-size: 0.95rem; }
.nudge__main { flex: 1; min-width: 0; }
.nudge__title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-navy); font-weight: 500; }
.nudge__count { font-family: var(--font-sans); font-size: 0.82rem; color: var(--c-text-muted); font-weight: 400; }
.nudge__sub { font-size: 0.9rem; color: var(--c-text-muted); margin-top: 0.3rem; max-width: 64ch; text-wrap: pretty; line-height: 1.5; }
.nudge__items { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.nudge__item { display: flex; align-items: center; gap: var(--s-2); padding: 0.5rem 0.85rem; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-pill); text-decoration: none; transition: border-color 0.12s ease; }
.nudge__item:hover { border-color: var(--c-text-muted); }
.nudge__item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold-soft); flex: none; }
.nudge__label { font-size: 0.88rem; color: var(--c-navy); font-weight: 500; }
.nudge__meta { font-size: 0.74rem; color: var(--c-text-light); }
.nudge__later { flex: none; background: none; border: none; color: var(--c-text-muted); font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0.2rem; align-self: flex-start; white-space: nowrap; }
.nudge__later:hover { color: var(--c-text); }
.nudge--slim { align-items: center; padding: var(--s-3) var(--s-5); }
.nudge__slimtext { font-size: 0.9rem; color: var(--c-text-muted); }
.nudge__slimtext strong { color: var(--c-navy); font-weight: 500; }
.nudge__resume { margin-left: auto; background: none; border: none; color: var(--c-gold-darker); text-decoration: none; font-size: 0.85rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.nudge__resume:hover { text-decoration: underline; }
@media (max-width: 620px) { .nudge { flex-wrap: wrap; } }
.today__date { font-size: 0.82rem; color: var(--c-text-muted); margin-top: -0.4rem; margin-bottom: var(--s-3); }
.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: var(--s-4); }
.weekstrip__d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; border-radius: var(--r-md); }
.weekstrip__d.is-today { background: var(--c-navy); }
.weekstrip__dow { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-light); }
.weekstrip__d.is-today .weekstrip__dow { color: var(--c-gold-soft); }
.weekstrip__num { font-size: 0.82rem; color: var(--c-text); font-weight: 500; }
.weekstrip__d.is-today .weekstrip__num { color: var(--c-cream); }
.weekstrip__dots { display: flex; gap: 2px; height: 5px; align-items: center; }
.weekstrip__dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.agenda li { display: flex; align-items: center; gap: var(--s-3); font-size: 0.86rem; }
.agenda__time { font-family: var(--font-mono); font-size: 0.74rem; color: var(--c-text-muted); min-width: 3em; }
.agenda__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.agenda__label { color: var(--c-text); flex: 1; line-height: 1.3; }
.agenda__tag { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em; background: var(--c-pink-bg); color: var(--c-pink-text); border-radius: var(--r-pill); padding: 0.06rem 0.42rem; font-weight: 700; }
.today__more { display: inline-block; margin-top: var(--s-3); font-size: 0.8rem; color: var(--c-gold-darker); text-decoration: none; }
.today__more:hover { text-decoration: underline; }
.rtable { width: 100%; border-collapse: collapse; }
.rtable th { text-align: left; font-family: var(--font-sans); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-light); font-weight: 600; padding: 0 var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-border); }
.rtable td { padding: var(--s-3); border-bottom: 1px solid var(--c-border-soft); font-size: 0.9rem; vertical-align: middle; }
.rtable tr:last-child td { border-bottom: none; }
.rtable tr.om-row:hover td { background: var(--c-cream-soft); }
.rtable .role { font-weight: 500; color: var(--c-navy); }
.rtable .co { color: var(--c-text-muted); font-size: 0.82rem; }
.stage-cell { display: flex; align-items: center; gap: 0.45em; font-size: 0.85rem; color: var(--c-text); }
.stage-cell .d { width: 7px; height: 7px; border-radius: 50%; }
.empty__steps { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.ministep { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: 150px; padding: var(--s-4); border-radius: var(--r-md); background: var(--c-cream-soft); border: 1px solid var(--c-border-soft); }
.ministep .n { width: 26px; height: 26px; border-radius: 50%; background: var(--c-navy); color: var(--c-cream); display: grid; place-items: center; font-size: 0.78rem; font-weight: 600; font-family: var(--font-serif); }
.ministep .t { font-size: 0.82rem; font-weight: 500; color: var(--c-navy); }
.ministep .s { font-size: 0.72rem; color: var(--c-text-muted); }

/* ─── /profile identity card + strength bar + experience (OMOIKANE-1266) ───
   Ported from the approved mockup (design-reference profile.jsx). Uses design
   tokens so it follows the existing light/dark palette automatically. */
.pf-id { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: start; }
.pf-id__av { width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--c-gold-soft); color: var(--c-navy); display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; flex: none; }
.pf-id__name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: var(--c-navy); line-height: 1.1; margin: 0; }
.pf-id__headline { font-size: 0.95rem; color: var(--c-text); margin-top: 0.15rem; }
.pf-id__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: 0.85rem; color: var(--c-text-muted); margin-top: var(--s-2); }
.pf-id__meta .sep { opacity: 0.4; }
.pf-id__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pf-id__edit { align-self: start; }

.pf-strength { background: var(--c-cream-soft); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); margin-top: var(--s-4); }
.pf-strength__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.pf-strength__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-muted); font-weight: 600; white-space: nowrap; }
.pf-strength__verdict { font-size: 0.9rem; font-weight: 500; }
.pf-strength.is-strong .pf-strength__verdict { color: var(--c-sage-text); }
.pf-strength.is-partial .pf-strength__verdict { color: var(--c-gold-darker); }

.pf-sub { font-size: 0.82rem; color: var(--c-text-muted); }
.pf-subhead { font-family: var(--font-serif); font-size: 1.08rem; color: var(--c-navy); font-weight: 500; margin-bottom: var(--s-3); }
.pf-divider { height: 1px; background: var(--c-border-soft); margin: var(--s-5) 0; }
.pf-skills { display: flex; flex-direction: column; gap: var(--s-4); }
.pf-skillgroup__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); font-weight: 600; margin-bottom: var(--s-2); }
.skill { display: inline-flex; align-items: center; font-size: 0.85rem; color: var(--c-text); background: var(--c-cream-soft); border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 0.28rem 0.7rem; }
/* OMOIKANE-1293 — Profile About card + Target-roles facts (template clone) */
.pf-about__note { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-light); white-space: nowrap; }
.pf-about__text { margin: var(--s-3) 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--c-text); }
.pf-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border-soft); }
.pf-fact { display: flex; flex-direction: column; gap: 3px; }
.pf-fact__label { font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-text-light); }
.pf-fact__value { font-size: 0.9rem; color: var(--c-text); }
.pf-langs { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.pf-lang { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--s-3); }
.pf-lang__name { font-size: 0.9rem; color: var(--c-text); }
.pf-lang__track { height: 8px; background: var(--c-cream-soft); border-radius: var(--r-pill); overflow: hidden; }
.pf-lang__fill { height: 100%; background: var(--c-gold); border-radius: var(--r-pill); }
.pf-lang__fill--mid { background: #819e8e; }
.pf-lang__lvl { font-size: 0.8rem; color: var(--c-text-muted); white-space: nowrap; min-width: 46px; text-align: right; }
/* OMOIKANE-1293 — Top-skills Match (green) / Partial (gold) chips (template) */
.skill--match { color: #3f6b53; border-color: #cfe0d5; background: #eef5f0; }
.skill--partial { color: #9a7320; border-color: #ece0c5; background: #f7f0e0; }
.skill__tag { font-size: 0.78rem; opacity: 0.9; margin-left: 1px; }
.pf-skill-note { margin: var(--s-4) 0 0; font-size: 0.82rem; color: var(--c-text-muted); }
.pf-skill-note__hi { color: #3f6b53; font-weight: 600; }

/* OMOIKANE-1306 — curated skills + credentials (kill the LinkedIn wall of text) */
.pf-skillgroup__count { margin-left: var(--s-2); font-size: 0.72rem; font-weight: 600;
  color: var(--c-text-light); vertical-align: middle; }
.pf-skill-eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 var(--s-2);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-text-muted); font-weight: 600; }
.pf-skill-eyebrow__dot { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #3f6b53; }
/* Native <details> reveal, styled as a quiet inline toggle (no JS → CSP-safe). */
.pf-more { margin-top: var(--s-3); }
.pf-more__toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--c-gold-darker, #2d6286);
  list-style: none; user-select: none; }
.pf-more__toggle::-webkit-details-marker { display: none; }
.pf-more__toggle::before { content: "+"; font-weight: 400; font-size: 1rem; line-height: 1; }
.pf-more[open] > .pf-more__toggle::before { content: "\2212"; } /* minus sign */
.pf-more__toggle:focus-visible { outline: 2px solid var(--c-gold, #3a7ca5);
  outline-offset: 2px; border-radius: 2px; }
.pf-more__body { margin-top: var(--s-2); }
.pf-creds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 0.4rem; }
.pf-creds__item { position: relative; padding-left: 1rem; font-size: 0.9rem; color: var(--c-text); }
.pf-creds__item::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold, #3a7ca5); }

.xp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.xp li { display: flex; align-items: center; gap: var(--s-3); }
.xp li > div { flex: 1; min-width: 0; }
.xp__org { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--c-navy); color: var(--c-cream); display: grid; place-items: center; font-size: 0.74rem; font-weight: 600; font-family: var(--font-serif); flex: none; }
.xp__role { font-weight: 500; color: var(--c-navy); font-size: 0.92rem; }

/* outlined "ghost" chip — thin-outline pill used for language tags in the
   identity card header (matches the mockup's <Chip tone="ghost">). */
.chip--ghost { background: transparent; color: var(--c-text-muted); border: 1px solid var(--c-border); }

@media (max-width: 620px) {
  .pf-id { grid-template-columns: auto 1fr; }
  .pf-id__edit { grid-column: 2; }
}
.xp__dates { margin-left: auto; font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap; }

/* ─── /network design port (OMOIKANE-1268) ───────────────────────────────
   Ported from the approved mockup (design-reference network.jsx + app.css).
   Brings the contact-tracker page onto the shared list-page design system:
   a colour legend, a filter toolbar, the reusable .dtable with avatar/who
   cells, and a warm .note--warn for overdue follow-ups. Values lifted from
   design-reference/design/app.css; all colours use design tokens so the
   light/dark palette follows automatically. */

/* sr-only — visually hidden, still announced to screen readers (used by the
   contacts <caption>). */
.sr-only {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* page header actions row (greeting + the + Add a person button) */
.head-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* colour legend mapping each kind to its dot colour */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-4) 0; }
.legend__item { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.8rem; color: var(--c-text-muted); }
.legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* filter / toolbar row */
.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-4) 0; }

/* reusable data table (shared across list pages) */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left; font-family: var(--font-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-text-light); font-weight: 600;
  padding: 0 var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-border);
}
.dtable td { padding: var(--s-3); border-bottom: 1px solid var(--c-border-soft); font-size: 0.9rem; vertical-align: middle; }
.dtable tr:last-child td { border-bottom: none; }
.dtable tbody tr.om-row:hover td { background: var(--c-cream-soft); }
.t-role { font-weight: 500; color: var(--c-navy); }
.t-sub { color: var(--c-text-muted); font-size: 0.8rem; margin-top: 0.1rem; }

/* name + avatar cell */
.who-cell { display: flex; align-items: center; gap: var(--s-3); }

/* filter chips (kind filter) — active chip reads as pressed */
.network-filter { text-decoration: none; cursor: pointer; }
.network-filter[data-active="true"] {
  background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy);
}

/* add-a-person form: two-column grid, full-width final rows */
.network-addform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.network-addform__wide { grid-column: 1 / span 2; }

/* the per-row kind picker (dot + inline select) sits compact */
.network-kind-cell { display: flex; align-items: center; gap: var(--s-2); }
.network-kind-cell .field__input { width: auto; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.network-table td form { margin: 0; display: inline; }

/* overdue list inside the warm note */
.note .network-due-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.note .network-due-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
@media (max-width: 640px) {
  .network-addform { grid-template-columns: 1fr; }
  .network-addform__wide { grid-column: 1; }
}

/* ─── calendar design port (OMOIKANE-1267) — page-specific grid + agenda ───
   Additive to OMOIKANE-474 .cal-grid*; .head-actions/.legend already defined
   by the /network port. Mockup-style in-grid event lines + agenda detail. */
.cal__dow { text-align: center; }
.cal-grid__day .cal__num { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 0.82rem; }
.cal-grid__day--today .cal__num { background: var(--c-navy); color: var(--c-cream); }
.cal__lines { display: flex; flex-direction: column; gap: 2px; flex: 1; list-style: none; padding: 0; margin: 0; }
.cal__lines li { display: block; }
.cal__line { display: flex; align-items: center; gap: 0.3em; font-size: 0.64rem; line-height: 1.3; padding: 0.1rem 0.3rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: none; background: color-mix(in srgb, currentColor 12%, transparent); }
.cal__line .cal-event__time { display: none; }
.cal__line .cal-event__time::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.cal__line .cal-event__title { font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.agenda-list li { display: flex; align-items: center; gap: var(--s-3); font-size: 0.88rem; }
.agl-when { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-text-muted); min-width: 3.4em; }
.agl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.agl-l { color: var(--c-text); flex: 1; line-height: 1.3; text-decoration: none; }
.agl-l:hover { text-decoration: underline; }
.agenda-list .cal-event__subtitle { color: var(--c-text-muted); }
.empty-row { text-align: center; padding: var(--s-7) var(--s-5); color: var(--c-text-muted); }
.empty-row__t { font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-navy); }
.empty-row__s { font-size: 0.88rem; margin-top: var(--s-1); max-width: 40ch; margin-inline: auto; text-wrap: pretty; }

/* ─── discover design port (OMOIKANE-1271) ─── */
/* Flow strip from discover.jsx Head(): a static 5-step orientation rail
   (Pre-screen → Match gate → Tailored CV → Cover letter → Send). Step 0
   (.on) is highlighted. Values copied verbatim from the mockup app.css. */
.flowstrip { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; background: var(--c-cream-soft); border: 1px solid var(--c-border-soft); border-radius: var(--r-pill); padding: 0.4rem 0.5rem; margin-top: var(--s-5); }
.flowstrip__step { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.78rem; color: var(--c-text-muted); padding: 0.25rem 0.6rem; border-radius: var(--r-pill); }
.flowstrip__step.on { background: var(--c-navy); color: var(--c-cream); font-weight: 500; }
.flowstrip__step .n { font-family: var(--font-mono); font-size: 0.66rem; opacity: 0.7; }
.flowstrip__arr { color: var(--c-text-light); font-size: 0.7rem; }

/* ─── library design port (OMOIKANE-1273) ─── */
/* Document-row icon (mockup .doc-row__icon) — small rounded tile in the
   library drafts table's who-cell. Values copied verbatim from the
   approved mockup design-reference/design/app.css. */
.doc-row__icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--c-cream-bg); color: var(--c-cream-text); display: grid; place-items: center; flex: none; font-size: 1rem; }
/* Keep the doc-title link reading as a navy heading (not a default-blue
   anchor) when .t-role is applied to an <a>; matches the mockup's
   non-underlined title treatment until hover. */
.who-cell a.t-role { text-decoration: none; }
.who-cell a.t-role:hover { text-decoration: underline; }
/* Table footer caption row (mockup .tbl-foot). */
.tbl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-4); font-size: 0.8rem; color: var(--c-text-light); }

/* ─── onboarding design port (OMOIKANE-1275) ─── */

/* Progress line — a count, a bar, and a plain percentage (mockup .progline). */
.progline { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.progline__label { font-size: 0.9rem; color: var(--c-text-muted); white-space: nowrap; }
.progline__label strong { color: var(--c-navy); font-weight: 600; }
.progline__pct { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--c-navy); min-width: 2.6em; text-align: right; }

/* Journey list — the setup steps as round-marked rows (mockup .jrny). */
.jrny { display: flex; flex-direction: column; }
.jrny__row { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s-3); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--c-border-soft); }
.jrny__row:first-child { border-top: none; }
.jrny__row.is-dim { opacity: 0.62; }
.jrny__mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; flex: none; }
.jrny__mark.is-done { background: var(--c-sage-bg); color: var(--c-sage-text); }
.jrny__mark.is-active { background: var(--c-navy); color: var(--c-cream); box-shadow: 0 0 0 3px var(--c-gold-soft); }
.jrny__mark.is-todo { background: var(--c-cream-soft); color: var(--c-text-muted); border: 1px solid var(--c-border); }
.jrny__mark.is-locked { background: transparent; color: var(--c-text-light); border: 1px dashed var(--c-border); }
.jrny__title { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 500; color: var(--c-navy); text-decoration: none; }
.jrny__title:hover { text-decoration: underline; }
.jrny__desc { font-size: 0.9rem; color: var(--c-text-muted); margin-top: 0.2rem; max-width: 56ch; text-wrap: pretty; }
.jrny__meta { padding-top: 0.3rem; white-space: nowrap; }
.jrny__time { font-size: 0.8rem; color: var(--c-text-light); }

/* ─── paste-vacancy design port (OMOIKANE-1276) ─── */
/* The mockup's horizontal step pills (paste-vacancy.jsx <Steps>). The base
   .flowstrip / .page-eyebrow / .pace-pill / .greeting / .panel / .field /
   .btn-* / .note classes already exist above and are reused as-is. These
   .steps-* classes are new — the container is named .steps-rail to avoid
   colliding with the older, unrelated .steps component already defined. */
.steps-rail { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-5) 0; }
.steps__s { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.85rem; color: var(--c-text-muted); }
.steps__s .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.74rem; font-weight: 600; background: var(--c-border-soft); color: var(--c-text-muted); font-family: var(--font-serif); }
.steps__s.is-active { color: var(--c-navy); font-weight: 500; }
.steps__s.is-active .num { background: var(--c-navy); color: var(--c-cream); }
.steps__s.is-done .num { background: var(--c-sage-text); color: var(--c-white); }
.steps__arr { color: var(--c-border); }

/* ─── first-months design port (OMOIKANE-1279) ─── */
/* (.chip--ghost, .t-sub, .doc-row__icon already exist above from earlier
   ports — not redefined here.) */

/* Tight stack variant (mockup .stack--sm). */
.stack--sm { gap: var(--s-2); }

/* 30/60/90 phase grid (mockup .phasegrid / .phase). */
.phasegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.phase { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); }
.phase.is-now { border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(30, 45, 79, 0.06); }
.phase__tag { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-gold-darker); }
.phase__title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-navy); font-weight: 500; margin-top: 0.2rem; }
.phase ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.phase li { font-size: 0.86rem; color: var(--c-text); display: flex; gap: var(--s-2); line-height: 1.45; }
.phase li::before { content: "—"; color: var(--c-gold); flex: none; }
@media (max-width: 720px) { .phasegrid { grid-template-columns: 1fr; } }

/* Gentle-check list rows (mockup .checklist .box / .ck-label / .ck-sub).
   The base .checklist / .checklist li rules already exist above; these
   only add the mockup's box + label children, which production lacked. */
.checklist .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--c-border); flex: none; display: grid; place-items: center; font-size: 0.72rem; color: var(--c-white); margin-top: 0.05rem; }
.checklist li.done .box { background: var(--c-sage-text); border-color: var(--c-sage-text); }
.checklist li.done .ck-label { color: var(--c-text-muted); text-decoration: line-through; }
.ck-label { font-size: 0.9rem; color: var(--c-text); }
.ck-sub { font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1rem; }

/* Other-modes link rows (mockup .doc-row). .doc-row__icon already exists
   above; only the row container + body/name children are added here. */
.doc-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--c-border-soft); border-radius: var(--r-md); background: var(--c-white); }
.doc-row__body { flex: 1; min-width: 0; }
.doc-row__name { font-size: 0.92rem; font-weight: 500; color: var(--c-navy); }

/* ── Discover sub-tabs (.tabline) ─────────────────────────────────────────
   OMOIKANE — underline tab bar for /postings/discover (This week /
   Saved searches / Pre-screen / My knockouts). Values lifted verbatim
   from design-reference/design/app.css. The live tab bar uses <a> links
   (plain navigation, no JS) rather than the mockup's <button>s, so the
   selectors cover both element types. */
.tabline { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-border); margin-top: var(--s-5); overflow-x: auto; }
.tabline a,
.tabline button {
  background: none; border: none; cursor: pointer; font-family: var(--font-sans);
  font-size: 0.9rem; color: var(--c-text-muted); padding: 0.6rem 0.85rem 0.7rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.45em; transition: color .12s ease;
  text-decoration: none;
}
.tabline a:hover,
.tabline button:hover { color: var(--c-navy); }
.tabline a.on,
.tabline button.on { color: var(--c-navy); font-weight: 500; border-bottom-color: var(--c-gold); }
.tabline .n { font-size: 0.72rem; color: var(--c-text-light); background: var(--c-cream-soft); border-radius: var(--r-pill); padding: 0.04rem 0.42rem; }
.tabline a.on .n,
.tabline button.on .n { background: #f0e0c0; color: var(--c-gold-darker); }

/* OMOIKANE-1293 — page-body component styles (consolidated from the
   parallel body-rebuild agents). */

/* OMOIKANE-1293 — Calm template: azure eyebrow, sans, 700, wide tracking. */
.lens-eyebrow { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; color: var(--c-gold); text-transform: uppercase; margin-bottom: var(--s-3); }
.lens-eyebrow .pace-pill .dot { display: none; }
.lens-eyebrow ~ .greeting { font-size: 34px; line-height: 1.05; font-weight: 400; letter-spacing: 0; }
.lens-eyebrow ~ .greeting-sub { font-size: 0.9rem; line-height: 1.65; color: #46555f; max-width: 640px; }
.wrap--wide { max-width: 1120px; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
.pf-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pf-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pf-id__role { font-family: var(--font-sans); font-size: 0.98rem; color: var(--c-gold); font-weight: 500; margin-top: 0.2rem; }
.pf-id__contact { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; font-size: 0.85rem; color: var(--c-text-muted); margin-top: var(--s-2); }
.pf-ic { display: inline-block; vertical-align: -0.12em; margin-right: 0.3em; flex: none; }
.pf-ring { display: grid; place-items: center; text-align: center; gap: var(--s-4); padding: var(--s-2) 0; }
.pf-ring__dial { width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--c-gold) calc(var(--pct, 0) * 1%), var(--c-border-soft) 0); display: grid; place-items: center; position: relative; }
.pf-ring__dial::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--c-white); }
.pf-ring__inner { position: relative; text-align: center; }
.pf-ring__num { display: block; font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--c-navy); line-height: 1; }
.pf-ring__lbl { display: block; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-muted); margin-top: 0.25rem; }
.pf-ring__cap { font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.5; max-width: 26ch; margin: 0 auto; }
.pf-check { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pf-check__item { display: flex; align-items: center; gap: var(--s-3); font-size: 0.9rem; color: var(--c-text); }
.pf-check__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--c-border); flex: none; display: grid; place-items: center; font-size: 0.7rem; line-height: 1; color: transparent; }
.pf-check__item.is-done .pf-check__mark { background: var(--c-sage-text); border-color: var(--c-sage-text); color: var(--c-white); }
.pf-check__link { margin-left: auto; font-size: 0.8rem; color: #d96c5b; text-decoration: none; font-weight: 500; }
.pf-check__link:hover { text-decoration: underline; }
.cv-workspace { display:flex; flex-direction:column; gap:18px; margin-top:var(--s-5); }
.cv-master { position:relative; background:var(--c-navy); color:var(--c-cream); border-radius:16px; padding:24px 26px; overflow:hidden; }
.cv-master__glow { position:absolute; right:-30px; top:-30px; width:180px; height:180px; background:radial-gradient(circle, rgba(58,124,165,.4), rgba(58,124,165,0) 68%); pointer-events:none; }
.cv-master__body { position:relative; display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.cv-master__icon { flex:none; width:46px; height:46px; border-radius:11px; background:rgba(127,177,214,.2); display:flex; align-items:center; justify-content:center; }
.cv-master__main { flex:1; min-width:0; }
.cv-master__eyebrow { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#86aec9; margin-bottom:6px; }
.cv-master__title { font-family:var(--font-serif); font-size:1.6rem; font-weight:500; line-height:1.05; color:var(--c-cream); }
.cv-master__sub { margin-top:5px; font-size:.85rem; line-height:1.5; color:#afc0b8; text-wrap:pretty; }
.cv-master__meta { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:14px; font-size:.78rem; color:#9db3a6; }
.cv-master__actions { flex:none; display:flex; gap:9px; }
.cv-master__btn { display:inline-flex; align-items:center; gap:7px; border-radius:10px; padding:10px 15px; font-family:inherit; font-size:.8rem; font-weight:600; text-decoration:none; cursor:pointer; transition:background 150ms ease; }
.cv-master__btn--ghost { border:1px solid rgba(247,249,249,.28); background:rgba(247,249,249,.06); color:var(--c-cream); }
.cv-master__btn--ghost:hover { background:rgba(247,249,249,.12); }
.cv-master__btn--solid { border:0; background:var(--c-cream); color:var(--c-navy); font-weight:700; }
.cv-master__btn--solid:hover { background:#fff; }
.cv-panel { background:var(--c-white); border:1px solid var(--c-border); border-radius:16px; padding:6px 6px 8px; }
.cv-panel__head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; }
.cv-panel__title { font-size:1rem; font-weight:700; color:var(--c-navy); }
.cv-panel__new { display:inline-flex; align-items:center; gap:6px; border:1px solid #d7dede; border-radius:9px; padding:7px 13px; background:var(--c-cream); color:var(--c-navy); font-size:.78rem; font-weight:600; text-decoration:none; cursor:pointer; transition:background 150ms ease; }
.cv-panel__new:hover { background:var(--c-cream-soft); }
.cv-panel__new svg { width:14px; height:14px; }
.cv-panel__list { display:flex; flex-direction:column; }
.cv-panel__empty { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:16px 20px 18px; border-top:1px solid var(--c-border-soft); }
.cv-panel__empty-lede { margin:0; max-width:52ch; font-size:.9rem; line-height:1.5; color:var(--c-text-muted); }
.cv-row { display:flex; align-items:center; gap:13px; padding:14px 20px; border-top:1px solid var(--c-border-soft); }
.cv-row:hover { background:var(--c-cream); }
.cv-row__avatar { flex:none; width:36px; height:36px; border-radius:9px; background:var(--c-gold); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; }
.cv-row__main { flex:1; min-width:0; text-decoration:none; color:inherit; }
.cv-row__role { font-size:.85rem; font-weight:700; color:var(--c-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-row__main:hover .cv-row__role { color:var(--c-gold-darker); }
.cv-row__company { font-size:.75rem; color:var(--c-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-row__date { flex:none; min-width:96px; text-align:right; font-size:.75rem; color:#9aa6ad; }
.cv-row__go { flex:none; display:inline-flex; align-items:center; justify-content:center; color:#9aa6ad; text-decoration:none; transition:color 150ms ease; }
.cv-row__go:hover { color:var(--c-navy); }
.cv-row__go svg { width:16px; height:16px; }
.lib-docs { display:block; }
.lib-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin-bottom:var(--s-5); }
.lib-tab { font-family:var(--font-sans); font-size:0.85rem; font-weight:500; color:var(--c-text-muted); background:transparent; border:1px solid transparent; border-radius:999px; padding:0.4rem 0.9rem; white-space:nowrap; }
.lib-tab.is-active { background:var(--c-navy); color:var(--c-text-on-navy); }
.lib-tab__count { opacity:0.75; font-weight:400; }
.lib-badge-row { display:flex; justify-content:flex-end; margin-bottom:var(--s-3); }
/* OMOIKANE-1293 — /library card grid mirrors the Calm template: a <ul>
   of equal-height cards, each with an icon tile + kind chip on the top
   row and the title + meta line pinned to the bottom (justify-content:
   space-between). Whole card is the link; no visible "Open" button. */
.doc-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:stretch; list-style:none; margin:0; padding:0; }
.doc-grid > li { display:flex; }
.doc-card { flex:1; background:var(--c-white); border:1px solid var(--c-border); border-radius:14px; padding:18px; transition:border-color 0.12s ease, box-shadow 0.12s ease; }
.doc-card:hover { border-color:#c7d2d2; box-shadow:0 2px 12px rgba(26,37,48,0.05); }
.doc-card--upload { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:148px; text-align:center; text-decoration:none; color:var(--c-text-muted); background:var(--c-cream); border:1.5px dashed #c7d2d2; }
.doc-card--upload:hover { border-color:var(--c-gold); background:var(--c-white); color:var(--c-gold); }
.doc-card__upicon { color:inherit; }
.doc-card__uptitle { font-family:var(--font-sans); font-weight:600; font-size:0.9rem; color:var(--c-text); }
.doc-card--upload:hover .doc-card__uptitle { color:inherit; }
.doc-card__upmeta { font-size:0.72rem; letter-spacing:0.04em; color:var(--c-text-light); }
.doc-card--item { display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:148px; text-decoration:none; cursor:pointer; }
.dc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-2); }
.dc-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.dc-body { display:flex; flex-direction:column; gap:4px; }
.dc-sep { color:var(--c-text-light); }
.doc-card__icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(58,124,165,0.12); color:var(--c-gold); }
.doc-card__title { font-family:var(--font-sans); font-weight:700; font-size:0.86rem; line-height:1.3; color:var(--c-text); overflow-wrap:anywhere; }
.doc-card--item:hover .doc-card__title { color:var(--c-gold-darker); }
.dc-meta { display:flex; align-items:center; flex-wrap:wrap; gap:0.4em; color:var(--c-text-light); font-size:0.72rem; }
.dc-meta code { font-family:var(--font-sans); font-size:0.72rem; color:var(--c-text-light); background:none; padding:0; }
.dc-tags .pill { font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; border-radius:999px; padding:4px 9px; background:var(--c-cream-soft); border:1px solid var(--c-border); color:var(--c-text-muted); }
.dc-tags .flag-pill { font-size:0.58rem; font-weight:700; letter-spacing:0.03em; border-radius:999px; padding:3px 8px; }
.lib-note { display:flex; align-items:flex-start; gap:var(--s-3); margin-top:var(--s-5); padding:var(--s-4) var(--s-5); background:var(--c-cream-soft); border:1px solid var(--c-border); border-radius:var(--r-lg); color:var(--c-text); font-size:0.9rem; line-height:1.5; }
.lib-note__icon { flex:none; margin-top:1px; color:var(--c-navy); }
.lib-editor { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-5); }
.voice-hero { background: var(--c-navy); color: var(--c-text-on-navy); border-radius: 16px; padding: 24px 26px; position: relative; overflow: hidden; }
.voice-hero > * { position: relative; z-index: 1; }
.voice-hero::after { content: ""; position: absolute; top: -45%; right: -8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(217,108,91,0.30), transparent 68%); pointer-events: none; }
/* OMOIKANE-1293 — this dark-hero eyebrow must carry the section's own accent
   (My Voice = coral), not the default azure `--c-gold-soft` (the "gold" tokens
   are actually azure post-redesign). Template eyebrow = #e48f7d ≈ voice accent. */
.voice-hero__eyebrow { margin: 0; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #e8927f; }
/* OMOIKANE-1293 — Calm template: Instrument Serif ~23px, upright, weight 400. */
.voice-hero__title { margin: var(--s-3) 0 0; font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.44rem); line-height: 1.14; color: var(--c-cream); max-width: 520px; }
/* OMOIKANE-1293 — a dark hero card's serif title was computing to navy
   (invisible) because a higher-specificity ancestor heading rule overrode
   the class. Force the cream on-navy colour on the dark hero titles with an
   ancestor-scoped selector so it always wins. */
.voice-hero .voice-hero__title { color: var(--c-cream); }
.sm-hero .sm-hero__title { color: var(--c-text-on-navy); }
.onb-hero .onb-hero__title { color: var(--c-text-on-navy); }
.voice-hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.voice-chip { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 20px; background: rgba(247,249,249,0.10); color: var(--c-cream); border: 1px solid rgba(247,249,249,0.16); font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.voice-hero__meta { margin-top: 14px; font-family: var(--font-sans); font-size: 0.78rem; color: var(--c-text-on-navy-muted); }
.voice-hero__meta strong { color: var(--c-cream); font-weight: 700; }
.voice-hero__bar { height: 10px; max-width: 520px; margin-top: var(--s-3); background: rgba(247, 249, 249, 0.16); border-radius: var(--r-pill); overflow: hidden; }
/* OMOIKANE-1293 fuse — the add-sample header/form default to [hidden]; force
   display:none over their own display:flex/block until a card reveals them. */
.voice-add-hidden[hidden] { display: none !important; }
.voice-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: var(--s-5); }
.voice-action { display: block; text-decoration: none; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: var(--s-4) var(--s-5); transition: border-color 160ms ease; }
.voice-action:hover { border-color: var(--c-gold); }
.voice-action:focus-visible { outline: 2px solid var(--c-gold-darker); outline-offset: 2px; }
/* OMOIKANE-1353 — the three intake cards (paste / upload / capture) sit in a
   fixed 3-column grid that clips to one-word-per-line at phone widths. Stack to
   a single column on narrow screens so each card can breathe. */
@media (max-width: 720px) {
  .voice-actions { grid-template-columns: 1fr; }
}
.voice-action__icon { display: inline-flex; align-items: center; color: var(--c-gold); margin-bottom: var(--s-3); }
.voice-action__title { margin: 0; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 700; color: var(--c-navy); }
.voice-action__sub { margin: var(--s-1) 0 0; font-family: var(--font-sans); font-size: 0.83rem; color: var(--c-text-muted); }
.voice-privacy { display: flex; align-items: flex-start; gap: 11px; margin-top: var(--s-6); padding: 15px 18px; background: rgba(217,108,91,0.06); border: 1px solid rgba(217,108,91,0.18); border-radius: var(--r-lg); }
.voice-privacy__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--c-gold); margin-top: 0.1rem; }
.voice-privacy p { margin: 0; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.5; color: var(--c-text); }
/* OMOIKANE-1293 — My Voice samples as the template's editorial list
   (doc-icon + name + source·chars + delete ×), replacing the old data table. */
.voice-samples { margin-top: var(--s-6); background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; }
.voice-samples__head { margin: 0; padding: 18px 20px 14px; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--c-navy); border-bottom: 0; }
.voice-samples__empty { padding: var(--s-4) var(--s-5); margin: 0; }
.voice-samples__list { list-style: none; margin: 0; padding: 0; }
.voice-sample { display: flex; align-items: center; gap: var(--s-3); padding: 14px 20px; border-top: 1px solid var(--c-border-soft); }
.voice-sample:first-child { border-top: 0; }
.voice-sample__icon { flex: none; width: 36px; height: 36px; border-radius: 9px; background: #f1f4f4; color: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; }
.voice-sample__body { flex: 1 1 auto; min-width: 0; }
.voice-sample__name { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--c-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-sample__preview { font-weight: 400; color: var(--c-text-muted); }
.voice-sample__meta { margin: 2px 0 0; font-family: var(--font-sans); font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-sample__dot { display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); margin-right: 6px; }
.voice-sample__dot[data-src="file"] { background: #819e8e; }
.voice-sample__del { flex: none; margin: 0; display: inline-flex; }
.voice-sample__del-btn { background: none; border: 0; padding: 0 var(--s-2); font-size: 1.35rem; line-height: 1; color: var(--c-text-light); cursor: pointer; border-radius: 6px; transition: color 140ms ease, background 140ms ease; }
.voice-sample__del-btn:hover { color: var(--c-vermilion, #c75135); background: var(--c-cream-soft); }
.onb-hero { position: relative; overflow: hidden; background: var(--c-navy); color: var(--c-text-on-navy); border-radius: 16px; padding: var(--s-6) var(--s-6) var(--s-5); margin-bottom: var(--s-5); }
.onb-hero::after { content: ""; position: absolute; top: -35%; right: -4%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 162, 187, 0.30) 0%, rgba(122, 162, 187, 0) 70%); pointer-events: none; }
.onb-hero__eyebrow { position: relative; z-index: 1; font-family: var(--font-sans); text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; color: var(--c-text-on-navy-muted); margin: 0 0 var(--s-3); }
.onb-hero__title { position: relative; z-index: 1; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.22; color: var(--c-text-on-navy); margin: 0 0 var(--s-3); max-width: 34ch; }
.onb-hero__lede { position: relative; z-index: 1; font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.55; color: var(--c-text-on-navy-muted); margin: 0; max-width: 62ch; }
.onb-cards { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
.onb-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: var(--s-5); }
.onb-card.is-active { border-color: #d96c5b; box-shadow: 0 0 0 1px rgba(217, 108, 91, 0.22); }
.onb-card__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.onb-card__phase { flex: none; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: #9c5647; background: #f6e0da; padding: 0.2rem 0.62rem; border-radius: 20px; white-space: nowrap; }
.onb-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--c-navy); text-decoration: none; border-bottom: 1px solid transparent; }
.onb-card__title:hover, .onb-card__title:focus-visible { border-bottom-color: var(--c-gold); }
.onb-card__title.is-done { color: var(--c-text-muted); }
.onb-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.onb-card__item { display: flex; align-items: flex-start; gap: var(--s-3); }
.onb-card__item-text { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.5; color: var(--c-text); }
.onb-card__mark { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--c-border); background: transparent; color: transparent; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; line-height: 1; margin-top: 0.14rem; }
.onb-card__mark.is-done { background: #d96c5b; border-color: #d96c5b; color: #fff; }
.onb-card__mark.is-active { border-color: #d96c5b; }
.onb-card__foot { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.goals-eyebrow-row { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4) 0; }
/* OMOIKANE-1293 — Calm template: upright ~34px title, sans resonance body. */
.goals-editorial__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.125rem); line-height: 1.05; color: var(--c-navy); margin: 0 0 var(--s-3) 0; }
.goals-editorial__lede { max-width: 640px; margin: 0 0 var(--s-5) 0; color: #46555f; font-size: 0.9rem; line-height: 1.65; }
.goals-editorial__quote { max-width: 60ch; margin: 0 0 var(--s-5) 0; font-family: var(--font-serif-body); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--c-text); }
.goals-section-head { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-6) 0 var(--s-4) 0; }
/* OMOIKANE-1293 — template section headings are 20px Instrument Serif ("The
   essentials" / "How your goals resonate" match "Your first weeks" / "Steps to keep
   momentum" at 20px); live goals heading was 1.5rem (24px), ~4px too large. */
.goals-section-head__title { flex: 0 0 auto; margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; color: var(--c-navy); }
.goals-section-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-border); }
.goals-essentials { list-style: none; margin: 0; padding: 0; background: var(--c-white, #fff); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.goals-essentials__row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; grid-template-areas: "label cell edit"; align-items: baseline; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border-soft); }
.goals-essentials__row:first-child { border-top: 0; }
.goals-essentials__row:hover { background: var(--c-cream-soft); }
.goals-essentials__label { grid-area: label; color: var(--c-text-muted); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; }
.goals-essentials__cell { grid-area: cell; min-width: 0; }
.goals-essentials__value { color: var(--c-text); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.goals-essentials__value--empty { color: var(--c-text-muted); font-weight: 400; font-style: italic; }
.goals-essentials__sub { display: block; margin-top: var(--s-1); color: var(--c-text-muted); font-weight: 400; font-size: 0.85rem; line-height: 1.4; }
/* OMOIKANE-1293 — template renders the essentials "Edit" links in amber. The
   template's #c89a3c fails WCAG AA on white (~2.4:1), so use --c-amber-aa
   (#8a6d20, ~4.6:1) — reads amber, passes AA (operator call 2026-07-09). */
.goals-essentials__edit { grid-area: edit; justify-self: end; align-self: baseline; color: var(--c-amber-aa); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.goals-essentials__edit:hover { text-decoration: underline; }
.goals-resonance { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); background: var(--c-white, #fff); border: 1px solid var(--c-border); border-radius: 16px; padding: var(--s-6); }
.goals-resonance__text { margin: 0; max-width: 52ch; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.65; color: #46555f; }
.goals-venn { flex: 0 0 auto; }
.goals-venn__svg { display: block; width: 200px; height: 222px; }
.goals-venn__label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--c-navy); }
/* OMOIKANE-1304 — live score caption under each ikigai lobe label. */
.goals-venn__value { font-family: var(--font-serif, serif); font-size: 13px; font-weight: 600; fill: var(--c-navy); }
/* OMOIKANE-1304 — fused match tile: the live Venn beside the overall %,
   then the verdict chips. One card, muted, matches the essentials/resonance
   card language. */
.goals-match-tile__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin: 0 0 var(--s-4) 0; padding: var(--s-5) var(--s-6); background: var(--c-white, #fff); border: 1px solid var(--c-border); border-radius: 16px; }
.goals-match-tile__head .goals-venn { flex: 0 0 auto; }
.goals-match-tile__overall { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
/* the framed overall panel now sits inside the tile — drop its own frame */
.goals-match-tile__overall .goals-match { margin: 0; padding: 0; background: none; border: 0; border-left: 3px solid var(--c-border); padding-left: var(--s-4); border-radius: 0; }
.goals-match-tile__overall .goals-match--pass { border-left-color: var(--c-match-strong-text); }
.goals-match-tile__overall .goals-match--warn { border-left-color: var(--c-match-weak-text); }
.goals-match-tile__resonance { margin: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.6; color: #46555f; }
.goals-manifesto__quote { margin-top: var(--s-3); font-family: var(--font-serif-body, inherit); font-style: italic; font-size: 1.05rem; color: var(--c-text); }
@media (max-width: 560px) { .goals-match-tile__head { flex-direction: column; align-items: flex-start; } }

/* OMOIKANE-1303 — goal-match scoring surface, fused into Calm (restores
   what OMOIKANE-1293 dropped). Restrained on purpose: white framed cards,
   hairline borders, serif navy numbers; match-tone appears only as a left
   accent rule on the overall panel and a small dot per verdict — never the
   old cinematic poster fills. Tone vars reuse the design-system match set
   (sage / amber / vermilion) already defined at :root. */
.goals-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin: 0 0 var(--s-4) 0; padding: var(--s-5) var(--s-6); background: var(--c-white, #fff); border: 1px solid var(--c-border); border-left: 3px solid var(--c-border); border-radius: 14px; }
.goals-match--pass  { border-left-color: var(--c-match-strong-text); }
.goals-match--warn  { border-left-color: var(--c-match-weak-text); }
.goals-match--empty { border-left-color: var(--c-border); }
.goals-match__headline { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; min-width: 0; }
.goals-match__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; color: var(--c-navy); background: none; border: 0; padding: 0; cursor: pointer; }
.goals-match__num:hover { color: var(--c-gold-darker); }
.goals-match__pct { font-size: 0.5em; color: var(--c-text-muted); margin-left: 0.08em; }
.goals-match__num--pending { color: var(--c-text-light); font-style: italic; cursor: default; }
.goals-match__meta { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.goals-match__label { margin: 0; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.goals-match__lede { margin: 0; max-width: 46ch; font-size: 0.9rem; line-height: 1.5; color: #46555f; }
.goals-match__override { margin: 0; flex: 0 0 auto; }

.goals-verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.goals-verdict { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; padding: var(--s-4); text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--c-white, #fff); border: 1px solid var(--c-border); border-radius: 12px; transition: border-color 0.15s ease, transform 0.15s ease; }
.goals-verdict:hover { border-color: var(--c-gold-soft); transform: translateY(-1px); }
.goals-verdict__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-border); }
.goals-verdict--pass  .goals-verdict__dot { background: var(--c-match-strong-text); }
.goals-verdict--warn  .goals-verdict__dot { background: var(--c-match-weak-text); }
.goals-verdict--empty .goals-verdict__dot { background: var(--c-text-light); }
.goals-verdict__label { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-muted); }
.goals-verdict__score { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--c-navy); }
.goals-verdict__score--text { font-family: var(--font-serif-body, inherit); font-size: 0.95rem; line-height: 1.35; color: var(--c-text); }
.goals-verdict--empty .goals-verdict__score { color: var(--c-text-light); }
@media (prefers-reduced-motion: reduce) { .goals-verdict { transition: none; } .goals-verdict:hover { transform: none; } }
@media (max-width: 560px) { .goals-match { flex-direction: column; align-items: flex-start; } .goals-verdicts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

.sm-page > * + * { margin-top: var(--s-5); }
.sm-hero { position: relative; overflow: hidden; background: var(--c-navy); color: var(--c-text-on-navy); padding: var(--s-6); border-radius: var(--r-xl); }
.sm-hero__inner { position: relative; z-index: 1; max-width: 35rem; }
/* OMOIKANE-1293 — Stay-motivated's dark-hero eyebrow carries its gold accent
   (template eyebrow = #e3c067), not the default azure `--c-gold-soft`. */
.sm-hero__eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #e3c067; margin-bottom: var(--s-3); }
/* OMOIKANE-1293 — Calm template: 25px/400 upright hero, 35rem measure. */
.sm-hero__title { font-family: var(--font-serif); font-size: 1.5625rem; line-height: 1.14; font-weight: 400; color: var(--c-text-on-navy); margin: 0 0 var(--s-3); }
.sm-hero__sub { font-family: var(--font-sans); font-size: 0.84rem; line-height: 1.55; color: #afc0b8; margin: 0; max-width: 35rem; }
/* OMOIKANE-1293 — coaching's section accent is amber (its eyebrow is #e3c067);
   template hero glow + focus star are amber, not azure. */
.sm-hero__glow { position: absolute; top: -34%; right: -4%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(200,154,60,0.34), rgba(200,154,60,0) 68%); filter: blur(6px); pointer-events: none; }
.sm-focus__eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-darker); margin-bottom: var(--s-4); }
.sm-focus__row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.sm-focus__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); background: rgba(200,154,60,0.12); color: #c89a3c; }
.sm-focus__icon svg { width: 1.4rem; height: 1.4rem; }
.sm-focus__text { flex: 1 1 14rem; min-width: 0; }
.sm-focus__title { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 700; color: var(--c-navy); margin: 0 0 0.15rem; line-height: 1.35; }
.sm-focus__sub { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--c-text-muted); margin: 0; line-height: 1.5; }
.sm-focus__cta { flex: 0 0 auto; white-space: nowrap; }
.sm-steps__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); }
.sm-steps__title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; color: var(--c-navy); margin: 0; white-space: nowrap; }
.sm-steps__rule { flex: 1 1 auto; height: 1px; background: var(--c-border); }
.sm-steps__progress { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.sm-steps__meta { flex: 0 0 auto; font-family: var(--font-sans); font-size: 0.8rem; color: var(--c-text-muted); white-space: nowrap; }
.sm-steps__progress .progress-bar { flex: 1 1 auto; margin: 0; }
.sm-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.sm-step { display: flex; align-items: flex-start; gap: 14px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 18px; transition: border-color 160ms ease, background 160ms ease; }
.sm-step--next { border-color: var(--c-gold-soft); background: rgba(58, 124, 165, 0.055); }
.sm-step--done { opacity: 0.92; }
/* OMOIKANE-1293 — template step marker is a filled navy circle badge. */
.sm-step__num { flex: 0 0 auto; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--c-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; line-height: 1; }
.sm-step--done .sm-step__num { color: var(--c-sage-text); }
.sm-step__body { flex: 1 1 auto; min-width: 0; }
.sm-step__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sm-step__link { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; color: var(--c-navy); text-decoration: none; line-height: 1.35; }
.sm-step__link:hover { color: var(--c-gold-darker); text-decoration: underline; }
.sm-step__desc { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--c-text-muted); margin: 0.2rem 0 0; line-height: 1.5; }
.sm-step__next-chip { background: var(--c-gold); color: var(--c-white); }
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-5); }
.kpi-card { background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); }
/* OMOIKANE-1293 — base KPI numbers use --c-navy (#1a2530), matching the
   template + the Network map's stat numbers; the prior --c-text (#33424d)
   read a shade too light beside the template. */
.kpi-card__num { font-family:var(--font-serif); font-size:2.4rem; font-weight:500; line-height:1; color:var(--c-navy); }
/* OMOIKANE-1293 — template semantic KPI colours: avg-match number in brand
   azure, due-this-week number in coral (the attention/deadline hue). */
.kpi-card__num--match { color:var(--c-gold); }
.kpi-card__num--accent { color:var(--c-coral); }
.kpi-card__unit { font-family:var(--font-serif); font-size:1.1rem; font-weight:500; color:var(--c-text-muted); margin-left:0.08em; }
.kpi-card__label { font-family:var(--font-sans); font-size:0.82rem; color:var(--c-text-muted); letter-spacing:0.01em; }
.applist { background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--s-2) var(--s-5) var(--s-4); }
.applist__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; padding:var(--s-4) 0 var(--s-3); border-bottom:1px solid var(--c-border-soft); }
.applist__title { font-family:var(--font-serif); font-size:1.25rem; font-weight:500; color:var(--c-text); margin:0; }
.applist__empty { padding:var(--s-6) 0; text-align:center; color:var(--c-text-muted); font-family:var(--font-sans); }
.tab-strip { display:inline-flex; gap:2px; padding:3px; background:var(--c-cream-soft); border-radius:var(--r-pill); }
.tab-strip__tab { font-family:var(--font-sans); font-size:0.82rem; font-weight:500; color:var(--c-text-muted); padding:0.35rem 0.9rem; border-radius:var(--r-pill); line-height:1.2; cursor:default; }
.tab-strip__tab.is-active { background:var(--c-white); color:var(--c-text); box-shadow:0 1px 2px rgba(26,37,48,0.08); }
.applist__row { display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--c-border-soft); }
.applist__row:last-child { border-bottom:0; }
.applist__avatar { flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:0.85rem; font-weight:600; letter-spacing:0.02em; }
.applist__avatar--navy { background:var(--c-navy); color:var(--c-text-on-navy); }
.applist__avatar--sage { background:var(--c-sage-bg); color:var(--c-sage-text); }
.applist__avatar--azure { background:var(--c-gold); color:#fff; } /* OMOIKANE-1293 — azure hue */
.applist__body { flex:1 1 auto; min-width:0; }
.applist__role { font-family:var(--font-sans); font-size:0.95rem; font-weight:600; color:var(--c-text); line-height:1.3; }
.applist__co { font-family:var(--font-sans); font-size:0.82rem; color:var(--c-text-muted); margin-top:1px; }
.applist__pill { display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-3); }
.applist__dot { width:9px; height:9px; border-radius:50%; background:var(--c-border); flex:0 0 auto; }
.applist__dot.is-done { background:var(--c-navy); }
.applist__dot.is-current { background:transparent; border:2px solid var(--c-gold-darker); width:10px; height:10px; }
.applist__step { font-family:var(--font-sans); font-size:0.76rem; color:var(--c-text-muted); margin-left:var(--s-1); }
.applist__side { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-3); text-align:right; }
.applist__meta { display:flex; align-items:center; gap:var(--s-3); }
.applist__due { font-family:var(--font-sans); font-size:0.78rem; color:var(--c-text-muted); }
/* OMOIKANE-1293 — template row action links read as muted slate ink (not the
   saturated azure link colour); the "→" + hover-underline carry affordance. */
.applist__action { font-family:var(--font-sans); font-size:0.82rem; font-weight:500; color:var(--c-text); text-decoration:none; white-space:nowrap; }
.applist__action:hover { text-decoration:underline; }
/* OMOIKANE-1293 — Calm-template values: 18px column rhythm, Instrument
   Serif month label at 21px/400 (the face is 400-only), 10px week gap. */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: 18px; }
.cal-head__title-block { min-width: 0; }
.cal-month-title { margin: 0; font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--c-navy); }
.cal-head__connect { white-space: nowrap; background: #F7F9F9; border-color: #D7DEDE; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; }
.cal-head__ico { flex: none; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 0; padding: var(--s-3) var(--s-2); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); min-height: 4.8rem; }
.week-day__dow { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); }
.week-day__num { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--c-navy); }
.week-day--today { background: var(--c-navy); border-color: var(--c-navy); }
.week-day--today .week-day__dow { color: rgba(255, 255, 255, 0.72); }
.week-day--today .week-day__num { color: #fff; }
.week-day__dots { display: flex; gap: 3px; align-items: center; min-height: 6px; margin-top: 0.1rem; }
.week-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cal-upcoming.agenda-list { gap: 0; }
.agenda-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--c-border-soft); }
.agenda-row:first-child { border-top: none; }
/* OMOIKANE-1293 — Calm-template Upcoming rows: 15px gap, 14/20px inset,
   a divider on EVERY row (incl. the first, separating it from the header),
   108px when-column (navy-bold primary line), 4×38px accent, 14px/700 title
   (kept multi-line — ND-friendly wrap preserved, not template's ellipsis),
   and the tiny uppercase-weight kind chip. */
.cal-upcoming .agenda-row { gap: 15px; padding: 14px 20px; }
.cal-upcoming .agenda-row:first-child { border-top: 1px solid var(--c-border-soft); }
.agenda-row__when { flex: 0 0 auto; width: 108px; display: flex; flex-direction: column; gap: 0.1rem; }
.agenda-row__date { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--c-navy); }
.agenda-row__time { font-family: var(--font-sans); font-size: 11.5px; color: var(--c-text-light); }
.agenda-row__accent { flex: 0 0 auto; align-self: center; width: 4px; height: 38px; border-radius: 3px; }
.agenda-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; text-decoration: none; }
.agenda-row__title { font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--c-navy); }
.cal-upcoming .agenda-row > .chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 20px; }
.agenda-row__body:hover .agenda-row__title { color: var(--c-gold-darker); }
.agenda-row__sub { font-size: 0.82rem; line-height: 1.3; color: var(--c-text-muted); }
.agenda-row__title.cal-event--cancelled { text-decoration: line-through; color: var(--c-text-muted); }
.agenda-row > .chip { flex: 0 0 auto; white-space: nowrap; }
.calendar-page__hooks { display: none; }
/* OMOIKANE-1293 — Upcoming card shell matches the Calm template: tight card
   edges (16px radius, 6/6/10 padding) so the header + rows own their inset,
   and a SANS-bold 16px header (not the shared serif .panel__title). Scoped
   to the calendar page so the shared .panel class is untouched elsewhere. */
.calendar-page__upcoming-col { border-radius: 16px; padding: 6px 6px 10px; }
.calendar-page__upcoming-col .panel__head { margin: 0; padding: 18px 20px 12px; }
.calendar-page__upcoming-col .panel__title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--c-navy); }
.network-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin: var(--s-4) 0 var(--s-5); }
/* OMOIKANE-1293 — Network KPI cards + proximity chrome to the Calm template. */
.network-stat { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; padding: 18px; }
.network-stat__num { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--c-navy); }
.network-stat__label { margin-top: 6px; font-size: 0.75rem; color: var(--c-text-muted); }
.network-stat--intro .network-stat__num { color: var(--c-gold); }
.network-stat--due .network-stat__num { color: #d96c5b; }
/* OMOIKANE-1293 — Network proximity map + Map/List toggle (template clone).
   Map is the default; .nv-list on the section swaps the map for the list. */
.netmap-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-5) 0 var(--s-3); }
.netmap-eyebrow { margin: 0; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); }
.netmap-toggle { display: inline-flex; gap: 4px; background: #F1F4F4; border: 0; border-radius: 9px; padding: 4px; }
.netmap-toggle__btn { appearance: none; border: 0; background: none; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); padding: 5px 16px; border-radius: 6px; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.netmap-toggle__btn.is-on { background: var(--c-white); color: var(--c-navy); box-shadow: var(--shadow-sm); }
.netmap { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; padding: 22px 24px; }
.netmap__desc { margin: 0 0 8px; max-width: 580px; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.55; color: var(--c-text-muted); }
.netmap__svg { display: block; width: 100%; height: auto; max-width: 620px; margin: 0 auto; }
.netmap__empty { margin: var(--s-2) 0 0; text-align: center; color: var(--c-text-muted); font-size: 0.9rem; }
.netmap__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--c-border-soft); }
.netmap__lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 0.75rem; color: #46555f; }
.netmap__d { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.network-view.nv-list > .netmap { display: none; }
/* OMOIKANE-1349 — keep the "+ Add a person" action (in .page-head) visible in
   BOTH map and list view. Previously .page-head was hidden in the default map
   view, leaving a new user with a map and a Map/List toggle but no visible way
   to add a contact (the only add affordance lived in the list-only page-head).
   The list-only content (kind legend, toolbar, notes, contact cards) stays
   map-hidden — only the header action is now shared. */
.network-view:not(.nv-list) > .legend,
.network-view:not(.nv-list) > .toolbar,
.network-view:not(.nv-list) > .note,
.network-view:not(.nv-list) > .card { display: none; }

/* responsive */
@media (max-width: 900px) {
  .pf-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cv-row__date { display:none; } .cv-master__body { gap:14px; } .cv-master__actions { width:100%; }
  .goals-essentials__row { grid-template-columns: 1fr auto; grid-template-areas: "label edit" "cell edit"; row-gap: var(--s-1); } .goals-essentials__edit { align-self: center; } .goals-resonance { grid-template-columns: 1fr; justify-items: center; } .goals-resonance__text { text-align: center; }
  .week-day { padding: var(--s-2) 4px; } .week-day__num { font-size: 1.2rem; } .agenda-row__when { width: 4.5rem; }
}
@media (max-width:1024px) {
  .doc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .doc-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .kpi-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .applist__side { align-items:flex-start; }
  .applist__row { flex-wrap:wrap; }
}
@media (max-width: 720px) {
  .network-kpis { grid-template-columns: 1fr; }
}

/* ── OMOIKANE-1486 — Omoikane Status modal + page ────────────────────────
   The modal sits on the CREAM content ground, not the navy rail, so it uses
   the cream-tuned --c-match-* tokens rather than the on-navy trio above.
   That divergence is deliberate: the same three states, two different
   grounds, two different contrast requirements. */
.omk-status { max-width: 32rem; }
.omk-status__title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
}
.omk-status__lede { margin: 0 0 var(--s-3); color: var(--c-text-muted); }
.omk-status__affected {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-match-weak-text);
}
.omk-status__affected-head { margin: 0 0 var(--s-2); }
.omk-status__affected-detail { margin: 0; }
.omk-status__reassure { margin: 0 0 var(--s-2); }
.omk-status__rest-fine { margin: var(--s-3) 0; font-weight: 600; }
.omk-status__list { list-style: none; margin: var(--s-3) 0; padding: 0; }
.omk-status__row {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.omk-status__row:last-child { border-bottom: 0; }
.omk-status__row-name { flex: 1 1 auto; }
.omk-status__row-state { flex: 0 0 auto; font-size: 0.9em; }
.omk-status__dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-text-light);
}
.omk-status__dot[data-tone="ok"]    { background: var(--c-match-strong-text); }
.omk-status__dot[data-tone="watch"] { background: var(--c-amber-aa); }
.omk-status__dot[data-tone="down"]  { background: var(--c-match-weak-text); }
.omk-status__row-state[data-tone="ok"]    { color: var(--c-match-strong-text); }
.omk-status__row-state[data-tone="watch"] { color: var(--c-amber-aa); }
.omk-status__row-state[data-tone="down"]  { color: var(--c-match-weak-text); }
.omk-status__checked { margin: var(--s-3) 0 var(--s-2); color: var(--c-text-muted); font-size: 0.9em; }
.omk-status__concern { margin: 0 0 var(--s-2); font-size: 0.92em; }
.omk-status__concern-lede { color: var(--c-text-muted); font-style: italic; }
.omk-status__operator { margin: 0; font-size: 0.92em; }
#omk-status-dialog {
  max-width: 34rem; padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-cream-soft);
  color: var(--c-text);
}
.omk-status__head { display: flex; justify-content: flex-end; padding: var(--s-2) var(--s-3) 0; }
.omk-status__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  color: var(--c-text-muted);
}
.omk-status__close:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.omk-status__body { padding: 0 var(--s-4) var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  .side__status { transition: none; }
  #omk-status-dialog { transition: none; animation: none; }
}

/* ============================================================
   OMOIKANE-730 — contract legality findings + TPWC disclosures
   ============================================================

   Follows the existing .callout language: a left tone-border on a
   transparent ground. Quiet by construction, which is what Article XXXVI
   asks for on a surface someone reads while deciding whether to sign
   something.

   NOTE ON COLOUR AND THE CONTRAST LOCK: every rule below sets `color`
   OR `background`, never both from palette tokens in the same rule.
   a11y_contrast_lock derives its pairs from rules that set both, so
   these introduce no new pairs — and none is needed, because the tone
   here lives in a 3px border rather than in text or fill. Border colour
   carries no WCAG text-contrast obligation; the words stay --c-text.

   The verdict tone deliberately covers only Legal and Illegal. The two
   unknown states share --c-border, the same neutral as an unstyled
   divider, because they are the ABSENCE of a finding and must not read
   as a mild version of one. See views/legality_findings.rs. */

.legality { margin-top: var(--s-6); }
.legality__h { margin: 0 0 var(--s-2) 0; }
.legality__lede {
  margin: 0 0 var(--s-4) 0;
  font-size: 0.9rem;
  color: var(--c-text-muted);
  max-width: 62ch;
}
.legality__juris { font-weight: 600; }

.legality__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.legality-finding {
  border-left: 3px solid var(--c-border);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
}
.legality-finding--illegal { border-left-color: var(--c-vermilion); }
.legality-finding--legal   { border-left-color: var(--c-sage-text); }
/* Explicit rather than inherited from the base rule: an unknown verdict
   sharing the default border is a decision, and a future edit to the base
   should not silently change what "we could not check" looks like. */
.legality-finding--unknown { border-left-color: var(--c-border); }

.legality-finding__status {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}
/* <cite> is italic by default. A statute reference is not emphasis — it is
   a name, and an italic serif makes "Art. 7:610 BW" measurably harder to
   scan than the roman it is quoted as in the source it points to. Same
   reasoning as OMOIKANE-1080 on company names. */
.legality-finding__statute {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
}
.legality-finding__headline {
  margin: var(--s-2) 0 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 62ch;
}
.legality-finding__detail {
  margin: var(--s-2) 0 0 0;
  padding-left: var(--s-4);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 62ch;
}
.legality-finding__detail li { margin-bottom: 0.2rem; }
.legality-finding__hint {
  margin: var(--s-2) 0 0 0;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  max-width: 62ch;
}

.legality-tpwc { margin-bottom: var(--s-5); }
.legality-tpwc__chip { font-variant-numeric: tabular-nums; }
.legality-tpwc__chip--complete { background: var(--c-match-strong-bg); }
.legality-tpwc__note {
  margin: var(--s-2) 0 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 62ch;
}
.legality-tpwc__missing {
  margin: var(--s-2) 0 0 0;
  padding-left: var(--s-4);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 62ch;
}
.legality-tpwc__hint {
  margin: var(--s-2) 0 0 0;
  font-size: 0.88rem;
  color: var(--c-text-muted);
  max-width: 62ch;
}
.legality-offer + .legality-offer { margin-top: var(--s-6); }
.legality-offer__label {
  margin: 0 0 var(--s-2) 0;
  font-size: 0.95rem;
  color: var(--c-text-muted);
}

/* ── OMOIKANE-78: self-disclosed accommodations (html[data-*] stamped
   pre-paint by the page-shell bootstrap from the omk_accom cookie;
   source of truth is users.accommodations_jsonb). Each block mirrors
   the OS-preference media query where one exists, so the in-app toggle
   works regardless of OS settings. ───────────────────────────────── */

/* Reduce motion — the toggle equivalent of prefers-reduced-motion. */
:root[data-motion="reduce"] * {
  animation: none !important;
  transition: none !important;
}
:root[data-motion="reduce"] .anon-steps__item:hover,
:root[data-motion="reduce"] .anon-steps__item:focus-within {
  transform: none;
}

/* Information density — rescales the spacing rhythm tokens. */
:root[data-density="compact"] {
  --s-1: 3px; --s-2: 6px; --s-3: 10px; --s-4: 14px; --s-5: 20px;
}
:root[data-density="spacious"] {
  --s-1: 6px; --s-2: 12px; --s-3: 20px; --s-4: 30px; --s-5: 44px;
}

/* Sensory-quiet — attention-pulling accents become plain text
   (REQ-920: text markers, not color alarms). */
:root[data-sq] .chip--danger,
:root[data-sq] .chip--warning,
:root[data-sq] .chip--caution {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-divider, #e0dccf);
  box-shadow: none;
}
:root[data-sq] .callout {
  box-shadow: none;
}

/* High contrast — the in-app toggle for what prefers-contrast:more
   provides at OS level, plus a darker text floor. */
:root[data-contrast="more"] {
  --c-text: #0a0a0a;
  --c-text-muted: #2e2e2e;
}
:root[data-contrast="more"] .card--success,
:root[data-contrast="more"] .card--warning {
  border-left-width: 6px;
}

/* No time pressure — pacing nudges disappear entirely. */
:root[data-ntp] .t-pacing-nudge {
  display: none !important;
}

/* Concise pages — hide blocks explicitly marked as preamble. */
:root[data-concise] .omk-preamble {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   OMOIKANE-1672 — retire the editorial / magazine layer.
   The Calm brand (OMOIKANE-1293; same tokens as www.omoikane.coach)
   replaced the 2026-05 magazine look on the sidebar and on the newer
   components, but the older blocks above ("EDITORIAL DESIGN SYSTEM",
   "DASHBOARD MAGAZINE FRONT-PAGE", "MAGAZINE PROPAGATION") still restyle
   the generic classes most pages use (.page-head, .card, .t-h3,
   .grid--4): injected micro-caps eyebrows ("TODAY'S BULLETIN ·
   OMOIKANE", "VOL. I · CONTENTS", "From the editor —"), italic titles,
   vermilion ticks, a drop cap. This block neutralises that typography
   and decoration app-wide. Layout rules above are left as they are.
   ════════════════════════════════════════════════════════════════════ */
.main > .page-head:first-child::before,
.main .page-head:not(:has(+ * + *)) ~ .page-head::before,
.main .grid.grid--2 > .card:first-child::before,
.main section.card[aria-labelledby="prof-header-h"]::before,
.main section.card[aria-labelledby="ws-focus-h"]::before,
.main section.card[aria-labelledby="dash-daily-h"]::before,
.main section.card[aria-labelledby="welcome-h"]::before,
.main section[aria-labelledby] h2.t-h3::before,
.main div[role="list"] > section.card[role="listitem"]::before,
.main .grid.grid--4::before,
.main .grid.grid--4 > .kpi .kpi__label::before,
.main .grid.grid--4 > .kpi--accent::before,
.main .page-head__sub::before,
.side--navy::before {
  content: none;
  display: none;
}
.page-head__title,
.main .page-head__title,
.main .page-head__title--magazine {
  font-style: normal;
  font-weight: 400;
}
.main .page-head__title--magazine::first-letter {
  float: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  line-height: inherit;
  letter-spacing: inherit;
}
.page-head__sub,
.main .page-head__sub {
  font-family: var(--font-sans);
  font-style: normal;
}
/* The Calm template renders every content heading upright (Instrument
   Serif is a 400-only face; italic + 500 was faux-bold). Italic stays for
   an accent INSIDE a heading (<em>), as on www. !important because the
   retired layers reach headings through long attribute selectors. */
main :is(h1, h2, h3, h4) {
  font-style: normal !important;
}
main :is(h1, h2, h3, h4) em {
  font-style: italic;
}
.main section[aria-labelledby] h2.t-h3,
.main .card h2,
.main .card h3,
.main .card .t-h3 {
  font-weight: 400;
  padding-left: 0;
}
[data-crisis-pause="true"],
[data-crisis-pause="true"] a,
div[data-ai-disclosure="true"][role="contentinfo"] a {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* OMOIKANE-1672 — a floating modal lives inside <main>, and
   `body > * { position: relative; z-index: 1 }` makes <main> its own
   stacking context, so the strips rendered after it (pause link, AI
   notice, concerns link) painted OVER the dialog and its backdrop on
   /auth/age-gate and /ai-disclosure. Lift the body child that holds an
   open modal above its siblings. The report export panel is a plain
   `<dialog open>` taller than a phone screen: the strips painted across
   its options too, so any open dialog lifts its body child. */
body > *:has(dialog[open]) {
  z-index: var(--z-modal-dialog);
}

/* OMOIKANE-1672 — skip link hidden until focused (it showed over the
   landing wordmark: `top: -40px` inside a positioned container is still
   on screen). */
.skip-link:not(:focus):not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip-link, 9999);
}

/* OMOIKANE-1672 — pre-sign-in header wordmark, same as the sidebar and
   www: the word "Omoikane" in the display serif, no lockup image or seal. */
.site-header .brand__name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-navy);
}

/* OMOIKANE-1672 — signed-out landing hero, as on www.omoikane.coach:
   small tracked eyebrow, upright display headline with an italic accent,
   the promise in the body sans. Retires the italic wordmark + seal and
   the vermilion wash. */
.anon-hero::after { content: none; display: none; }
.anon-hero__eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-darker);
}
.anon-hero__h1 {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  color: var(--c-navy);
}
.anon-hero__h1 em { font-style: italic; }
.anon-hero__tagline,
.anon-main__intro {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.1rem;
  color: var(--c-text-muted);
}



/* OMOIKANE-1672 — transparency registers re-homed in the plain shell
   (views::page_shells::branded_document). Their markup is bare HTML. */
.document-page { max-width: 72rem; margin: 0 auto; line-height: 1.6; }
.document-page h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.4rem); color: var(--c-navy); margin: 0 0 var(--s-4); }
.document-page h2, .document-page h3 { font-family: var(--font-serif); font-weight: 400; color: var(--c-navy); margin: var(--s-5) 0 var(--s-2); }
.document-page a { color: var(--c-gold-darker); }
.document-page table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0 var(--s-5); font-size: 0.95rem; }
.document-page th, .document-page td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border); }
.document-page th { font-weight: 600; color: var(--c-navy); }
.document-page code { font-size: 0.9em; }

/* OMOIKANE-1672 — pre-sign-in pages: the footer sits at the bottom of the
   window, not mid-screen under a short page (the gates' modal backdrop
   showed a navy band floating halfway down). */
body:has(> header.site-header) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(> header.site-header) > main {
  flex: 1 0 auto;
  width: 100%;
}

/* OMOIKANE-1672 — coaching exercise titles and option labels: the brand
   serif at its one real weight (500 rendered faux-bold), like the
   onboarding card titles. */
.coaching-section header[role="banner"] h1,
.coaching-section legend {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* OMOIKANE-1672 — muted notes inside cards (settings, account, coaching)
   were italic display serif from the magazine layer; the Calm style sets
   them in the body sans. */
.main .card .t-muted,
.main .card p.t-muted {
  font-family: var(--font-sans);
  font-style: normal;
}

/* OMOIKANE-1672 (operator decision 2026-10-16) — 'Lora' was never loaded
   (no @font-face, no font load), so any inline style naming it rendered in
   the browser's Times. The remaining reference sits on the crisis-gated ND
   support page, which cannot be edited without a clinician attestation; the
   family is aliased to the brand serif here instead. */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/instrument-serif-400-italic.woff2') format('woff2'); }

/* OMOIKANE-1672 audit — muted notes (`p.muted`) were italic display serif
   from the retired "4-step workflow" editorial block on ~15 pages (AI budget,
   providers, calendar, email, recordings, usage, negotiation, diary...). */
.main p.muted,
.main .grid.grid--2 > .card:nth-child(2) p,
.main .grid.grid--2 > .card:nth-child(2) p.muted {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.95rem;
}

/* OMOIKANE-1672 audit — a button inside prose took the prose LINK colour
   (navy on the navy primary button: contrast 1.00): "Raise a concern",
   "Open the report form", "Upload a CV". Buttons keep their own colours. */
.prose a.btn,
.t-prose a.btn {
  text-decoration: none;
  border-bottom: 0;
}
.prose a.btn--primary,
.t-prose a.btn--primary,
.prose a.btn--primary:hover,
.t-prose a.btn--primary:hover {
  color: var(--c-cream);
}

/* OMOIKANE-1672 audit — phone widths: long identifiers and fixed-width form
   controls pushed the page sideways (/help/whistleblow, onboarding levels 3-4). */
main code { overflow-wrap: anywhere; }
main :is(input, select, textarea, label) { max-width: 100%; }

/* OMOIKANE-1672 audit — on the gate modals the header (wordmark + language
   switch) sat under the backdrop, so a visitor could not switch language
   before confirming. Keep the header above the dimmed page. */
body:has(dialog[open][aria-modal="true"]) > header.site-header {
  z-index: calc(var(--z-modal-dialog) + 1);
}

/* OMOIKANE-1672 audit — the system card's per-section permalink "#" read as
   stray markup; quiet it to an anchor affordance. */
.document-page a.anchor {
  color: var(--c-text-muted);
  text-decoration: none;
  opacity: 0.45;
  margin-right: 0.15em;
}
.document-page a.anchor:hover,
.document-page a.anchor:focus-visible { opacity: 1; }

/* OMOIKANE-1672 audit — a fieldset defaults to `min-width: min-content`, so a
   select with a long option widened the whole form past a 390px screen
   (/onboarding/level4). */
main fieldset { min-width: 0; }
/* The real culprits there: an inline single-column grid form sized its one
   track to the select's longest option, and `.btn` never wraps, so a long
   button label ("Continue — where you are and where you're going") forced
   the form wider than the screen. */
main form[style*="display: grid"]:not([style*="grid-template-columns"]) {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; }
}

/* OMOIKANE-1672 audit (390px contact sheets) — layouts that never collapse
   on a phone. Inline `style` beats any selector, hence the !important on the
   inline-grid override; it applies to phones only. */
@media (max-width: 600px) {
  /* two/three-column inline grids (Limitations, BFI tiers, …) stack */
  main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* inline flex rows (diary search, accommodations toggles) wrap */
  main [style*="display: flex"],
  main [style*="display:flex"] {
    flex-wrap: wrap;
  }
  /* wide data tables scroll instead of squeezing columns to one letter per
     line (Transferable Skills, AI providers, AI Act). The box AROUND the
     table scrolls: the table keeps `display: table`, since a table restyled
     as a block can lose its row/cell semantics (OMOIKANE-1501). */
  main :has(> table):not(main, .table-scroll) {
    max-width: 100%;
    overflow-x: auto;
  }
  /* not table cells: a word split there ("man age ment") is worse than the
     table scrolling */
  main :is(p, li, label, a, span, h1, h2, h3):not(td *, th *) {
    overflow-wrap: break-word;
  }
  /* headers and in-table buttons keep their words whole ("ART ICL E",
     one letter per line, "Del ete"); the table scrolls instead */
  main table th,
  main table td :is(a, button, .btn) {
    white-space: nowrap;
  }
  /* class-based side-by-side rows that should stack on a phone */
  .t-bfi10-reflections > li,
  .card--method-hub,
  main .card__head {
    flex-direction: column;
    align-items: stretch;
  }
  main .tabline {
    display: flex;
    overflow-x: auto;
  }
  main .companies-filter-form .field { min-width: 0; max-width: 100%; }
  .voice-sample__preview {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* OMOIKANE-1672 — the last italic-display-serif remnants on controls and
   data, found by scanning every signed-in page for italic serif outside
   headings. The brand keeps italic serif for headings, ledes and quotes;
   buttons, links, step names, labels, hints and scores are upright. */
.main .steps .step.is-active .step__label {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
}
.main .posting-summary .posting-summary__view,
.main .posting-summary .posting-text,
.main section.card[aria-labelledby="prof-header-h"] strong {
  font-family: var(--font-sans);
  font-style: normal;
}
/* The retired "quiet back link" rule also caught "Save as Considering",
   which the gate's decision grid means as a ghost button of equal weight
   to "Ask the coach". Ghost links read as ghost buttons again. */
.main a.btn--ghost[href*="workspace"],
.main a.btn--ghost[href*="/workflow"]:not([href*="posting"]) {
  font-family: var(--font-sans);
  font-style: normal;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.main a.btn--ghost[href*="workspace"]:hover,
.main a.btn--ghost[href*="/workflow"]:not([href*="posting"]):hover {
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.editorial-entry__match {
  font-style: normal;
}
.t-wheel-axis__label,
.t-wheel-axis__current,
.t-wheel-axis__description,
.t-wheel-axis__skip span,
.t-career-node__skip span,
.t-riasec-likes,
.t-riasec-slot span,
.t-riasec-current,
.t-ikigai-quadrant__q,
.coaching-section .t-motivators-card__definition {
  font-family: var(--font-sans);
  font-style: normal;
}
/* "Evaluate a job" and the drafting-prerequisites page still used the
   2026-05 editorial component: kanji watermark, vermilion rule and step,
   a vermilion word in the H1, a serif standfirst and italic hints. */
.editorial {
  background: transparent;
}
.editorial__kanji,
.editorial__eyebrow-rule {
  display: none;
}
.editorial__eyebrow-step,
.editorial__h1 .editorial__h1-accent {
  color: inherit;
}
.editorial__h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.1;
}
.editorial__lede {
  font-family: var(--font-sans);
  font-size: 1.05rem;
}
.editorial__field-hint,
.editorial__or-text,
.editorial__cancel,
.editorial__footnote {
  font-family: var(--font-sans);
  font-style: normal;
}
/* `input[type=url]` already outranks .editorial__input, so the URL field
   was the brand's boxed input while the textarea beside it stayed an
   underlined serif line; the submit was an uppercase tracked pill. Both
   now match the app's form controls and primary button. */
.editorial__textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0.6rem 0.9rem;
}
.editorial__input:focus,
.editorial__textarea:focus {
  border-color: var(--c-gold-darker);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.18);
}
.editorial__or::before,
.editorial__or::after {
  background: var(--c-border-soft);
}
.editorial__submit {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  background: var(--c-navy);
  color: var(--c-cream);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-md);
}
.editorial__submit:hover {
  background: var(--c-navy);
  transform: none;
  box-shadow: var(--shadow-sm);
}
/* Daily matches + Discover cards (.editorial-entry): the ranks were 2.8rem
   italic vermilion numerals, the action an uppercase tracked slab with a
   vermilion hover, each card rose in on a staggered animation and tilted
   on hover. Ranks stay (the list is ordered) in the quiet heading style. */
.editorial-entry {
  animation: none;
  opacity: 1;
  transform: none;
}
.editorial-entry:hover {
  transform: none;
  box-shadow: none;
}
.editorial-entry__numeral {
  font-style: normal;
  font-size: 1.6rem;
  color: var(--c-text-muted);
}
.editorial-entry__source-kind {
  overflow-wrap: anywhere;
}
.editorial-entry__date,
.editorial-entry__alt-links {
  font-style: normal;
}
.editorial-entry__cta {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  border-radius: var(--r-md);
}
.editorial-entry__cta:hover,
.editorial-entry__cta:focus-visible {
  background: var(--c-navy);
  border-color: var(--c-navy);
  transform: none;
}
/* OMOIKANE-1672 live phone check. An older phone rule set
   `overflow-wrap: anywhere` on every cell, which lets a column shrink to
   one letter ("Risk man age ment", "DeepSe ek") although the table already
   scrolls. Cells keep whole words; the table scrolls. */
@media (max-width: 600px) {
  main table :is(th, td) {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  main table tbody th {
    white-space: normal;
  }
  /* dates and identifiers inside a cell stay on one line ("2026- / 05- /
     20", "cbs_pow_ / 2024"); `main code` breaks anywhere for prose only */
  main table :is(time, code) {
    overflow-wrap: normal !important;
    white-space: nowrap;
  }
}
/* A row header (<th scope="row">) names its row; it reads as body text,
   not as a tracked-caps column label (Transferable Skills). */
main tbody th {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-text);
}
/* Card-head links ("Manage", "/profile/ai-budget") and the recorder's
   status line were italic display serif from the magazine layer. */
.main .card__head a:not(.btn) {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--c-navy);
  text-decoration: underline;
}
.main .card__head a.btn {
  font-family: var(--font-sans);
  font-style: normal;
}
.rec-status {
  font-family: var(--font-sans);
  font-style: normal;
}
/* Graph labels (dashboard + Market lenses) were italic serif set as SVG
   attributes; a CSS declaration outranks a presentation attribute. Empty
   calendar title and crawl-health numbers likewise upright. */
#dash-graph-frame svg text,
.dash-graph-zoom__panel svg text {
  font-style: normal;
}
.cal-empty__title {
  font-style: normal;
}
.crawl-health-bucket__count,
.crawl-health-card__pct {
  font-family: var(--font-sans);
  font-style: normal;
}
/* OMOIKANE-1672 final pass. The workflow H1s still coloured their second
   word per step (gate vermilion, CV blue, email grey: the magazine layer's
   per-stage accent). One colour, like the rest of the app's headings. */
.stage-heading__accent {
  color: inherit;
}
/* Draft previews (CV step, evaluation panel): a role line is an h3 with the
   job title in <strong>; in the display serif that rendered faux-bold
   (Instrument Serif has one weight). Role lines use the body sans, title
   in real semibold, as on a printed CV. */
.main .draft-md h3,
.main .eval-draft__body h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}
.main .draft-md h3 strong,
.main .eval-draft__body h3 strong {
  font-weight: 600;
}
/* Phone: coaching rows that put a label beside a text box left the box
   ~140px wide (Motivators tier 2 "why this matters") or squeezed a CV-bullet
   box to 24px (Transferable Skills tier 3). Stack them. */
@media (max-width: 600px) {
  main li.t-motivators-narrow-row,
  main ul.t-skills-bullets > li {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  main li.t-motivators-narrow-row textarea,
  main ul.t-skills-bullets > li textarea {
    width: 100%;
    min-width: 0;
  }
}
/* Inline-styled serif headings asked for weight 500; Instrument Serif has
   one weight, so the browser drew a faux bold. */
main :is(h1, h2, h3, h4)[style*="--font-serif"] {
  font-weight: 400 !important;
}
/* A bare <h1> (no class, no inline style) fell through to the body sans at
   weight 500 on 13 pages (methodology register, badges, RIASEC profiler,
   Europass import) while every other page heading is the brand serif.
   Draft previews keep their own document styling. */
main h1:not([class], [style], .draft-md *, .eval-draft__body *) {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* OMOIKANE-1672 phone re-check.
   `.t-block` (the prompt label on 18 tier-2/3 coaching pages) was never
   defined: inside a coaching card row (flex, `label { flex: 1; min-width: 0 }`)
   the label shrank beside the dimension name to one letter per line. */
.t-block { display: block; }
/* `flex: none; width: 100%` rather than `flex-basis: 100%`: in the phone
   column rows (Motivators tier 2) a 100% basis is a HEIGHT, and with wrap
   the label became a second column off the card's right edge */
.coaching-section .t-block { flex: none; width: 100%; }
/* a status pill is one token ("review needed"), never two lines */
.pill { white-space: nowrap; }
/* recordings: the transcript preview is three lines wide enough to read,
   not 240 characters in a 90px column */
.rec-snippet { min-width: 14rem; }
.rec-snippet__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* a text field inside its label fills the line on a phone (Level 1's role
   and company fields cut "Independent Projects & Pr…" at their 233px
   default width while the textareas below ran full width) */
@media (max-width: 600px) {
  main form label > :is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"]) {
    width: 100%;
  }
}
/* Values cards: the value names a card (serif); its definition is body text,
   in the body sans like the Motivators cards (OMOIKANE-1672) */
.coaching-section legend .t-values-card__definition {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text-muted);
}
/* a definition's default 40px indent left a ~200px text column on a phone
   (STAR-R "Your stories": Situation / Task / Action / Result) */
@media (max-width: 600px) {
  main dd { margin-inline-start: var(--s-3); }
}