/* Positioned — design system per "UI Modernization · Design Direction &
   Implementation Guide" v1.0. Three token layers; only layer 2 flips for dark
   mode. Any literal hex outside the token blocks is a bug. The green ramp is
   anchored on the logo's green (--green-700 = #3b7d23). */

/* Self-hosted fonts (Google Fonts latin subsets). Outfit and Source Sans 3
   are VARIABLE fonts: one file carries the whole weight axis, so the three
   "weight" files that used to sit here were byte-identical copies, each
   downloaded once. Declared inline rather than via @import so the stylesheet
   does not chain a second request before the fonts can start. */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/Outfit-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/SourceSans3-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/static/fonts/SourceSans3-400i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/IBMPlexMono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── layer 1 · primitives ─────────────────────────────────────────────── */
:root {
  --green-900:#13280b; --green-800:#244c15; --green-700:#3b7d23; --green-600:#4a992e;
  --green-500:#61b941; --green-300:#92c87e; --green-100:#d2e7ca; --green-50:#f0f7ed;

  --slate-900:#101a20; --slate-800:#1b262d; --slate-700:#2b3944; --slate-600:#3d4a54;
  --slate-500:#66727c; --slate-400:#8d979f; --slate-300:#b8c0c6; --slate-200:#e3e8ea;
  --slate-100:#eef1f2; --slate-50:#f7f8f8;

  --red-600:#a13429; --red-50:#fbeceb;
  --amber-600:#8a5a11; --amber-50:#fdf3e3;
  --moss-600:#1f6b46; --moss-50:#eaf4ee;
  --steel-600:#4a6b8a;

  /* gauge: under-qualified → over-qualified */
  --gauge: linear-gradient(90deg, #b4462f 0%, #c9862b 30%, #4a992e 62%, #4a6b8a 100%);
  --gauge-window: rgb(255 255 255 / .62);
}

/* ── layer 2 · semantic · light ───────────────────────────────────────── */
:root {
  color-scheme: light;
  --surface-page:var(--slate-50); --surface-card:#fff;
  --surface-sunken:var(--slate-100); --surface-brand-subtle:var(--green-50);
  --border-subtle:var(--slate-100); --border-default:var(--slate-200);
  --border-strong:var(--slate-300);
  --text-primary:var(--slate-900); --text-body:var(--slate-600);
  --text-muted:var(--slate-500); --text-faint:var(--slate-400);
  --text-on-brand:#fff;
  --brand:var(--green-700); --brand-hover:var(--green-800);
  --brand-active:var(--green-900); --brand-text:var(--green-700);
  --brand-border:var(--green-100);
  --focus-ring:var(--green-600);
  --danger:var(--red-600); --danger-bg:var(--red-50);
  --warn:var(--amber-600); --warn-bg:var(--amber-50);
  --ok:var(--moss-600); --ok-bg:var(--moss-50);
  --scrim:rgb(16 26 32/.45);
}

/* ── layer 2 · semantic · dark ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --surface-page:#0f1416; --surface-card:#161d21;
  --surface-sunken:#1c2429; --surface-brand-subtle:#1c2c16;
  --border-subtle:#222c31; --border-default:#2a343a; --border-strong:#3c484f;
  --text-primary:#eef2f3; --text-body:#c3cdd2;
  --text-muted:#98a3a9; --text-faint:#6f7b82;
  --text-on-brand:#0c1708;
  --brand:#66af4b; --brand-hover:#7ec365; --brand-active:#95d27f; --brand-text:#95d27f;
  --brand-border:#2a4620;
  --focus-ring:#95d27f;
  --danger:#e88b7d; --danger-bg:#2c1a18;
  --warn:#d9a54a; --warn-bg:#2a2115;
  --ok:#6ac08e; --ok-bg:#12261c;
  --scrim:rgb(0 0 0/.6);
  --gauge: linear-gradient(90deg, #a34c38 0%, #b3823a 30%, #498532 62%, #4a6b8a 100%);
  --gauge-window: rgb(16 20 16 / .62);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page:#0f1416; --surface-card:#161d21;
  --surface-sunken:#1c2429; --surface-brand-subtle:#1c2c16;
  --border-subtle:#222c31; --border-default:#2a343a; --border-strong:#3c484f;
  --text-primary:#eef2f3; --text-body:#c3cdd2;
  --text-muted:#98a3a9; --text-faint:#6f7b82;
  --text-on-brand:#0c1708;
  --brand:#66af4b; --brand-hover:#7ec365; --brand-active:#95d27f; --brand-text:#95d27f;
  --brand-border:#2a4620;
  --focus-ring:#95d27f;
  --danger:#e88b7d; --danger-bg:#2c1a18;
  --warn:#d9a54a; --warn-bg:#2a2115;
  --ok:#6ac08e; --ok-bg:#12261c;
  --scrim:rgb(0 0 0/.6);
  --gauge: linear-gradient(90deg, #a34c38 0%, #b3823a 30%, #498532 62%, #4a6b8a 100%);
  --gauge-window: rgb(16 20 16 / .62);
}

/* ── type · space · shape · motion ───────────────────────────────────── */
:root {
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Source Sans 3", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-display:600 34px/1.1 var(--font-display);
  --t-h1:600 26px/1.15 var(--font-display);
  --t-h2:600 19px/1.25 var(--font-display);
  --t-h3:500 15px/1.3 var(--font-display);
  --t-body:400 16px/1.6 var(--font-body);
  --t-label:600 14px/1.4 var(--font-body);
  --t-small:400 13.5px/1.5 var(--font-body);
  --t-overline:600 11px/1.2 var(--font-display);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;
  --e-1:0 1px 2px rgb(16 26 32/.05);
  --e-2:0 4px 12px rgb(16 26 32/.08);
  --e-3:0 16px 40px rgb(16 26 32/.16);
  --dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.2,.6,.2,1);
  --w-prose:720px; --w-app:1080px; --w-wide:1360px;
  --tap:40px; /* 44px below 768 */
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin:0; font:var(--t-body); color:var(--text-body);
  background:var(--surface-page); }
h1 { font:var(--t-h1); letter-spacing:-.02em; color:var(--text-primary); margin:0 0 var(--sp-2); }
h2 { font:var(--t-h2); letter-spacing:-.01em; color:var(--text-primary); margin:0 0 var(--sp-3); }
h3 { font:var(--t-h3); color:var(--text-primary); margin:var(--sp-5) 0 var(--sp-2); }
.t-display { font:var(--t-display); letter-spacing:-.025em; color:var(--text-primary); margin:0 0 var(--sp-3); }
.overline { font:var(--t-overline); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); }
p { margin:0 0 var(--sp-3); }
.lead { color:var(--text-muted); margin:0 0 var(--sp-4); max-width:64ch; }
.hint { color:var(--text-muted); font:var(--t-small); font-weight:400; }
.muted { color:var(--text-muted); }
.small { font:var(--t-small); }
.ok { color:var(--ok); }
.err { color:var(--danger); }
a { color:var(--brand-text); }
code { background:var(--surface-sunken); padding:.05em .35em; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:.85em; }
.mono, textarea.mono { font-family:var(--font-mono); font-size:13.5px; line-height:1.7; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; }
.icon { vertical-align:-.22em; flex:none; }

/* Focus — the one rule that fixes keyboard use app-wide. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm);
}
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline:none; }

.skip-link { position:absolute; left:-9999px; top:var(--sp-2); z-index:200;
  background:var(--surface-card); color:var(--text-primary); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-md); box-shadow:var(--e-2); }
.skip-link:focus { left:var(--sp-2); }

/* ── shell ────────────────────────────────────────────────────────────── */
.topbar { display:flex; align-items:center; gap:var(--sp-5);
  padding:0 var(--sp-5); height:56px; background:var(--surface-card);
  border-bottom:1px solid var(--border-default); position:relative; }
/* Wordmark: the logo art is used as a mask so it takes --brand and so stays
   legible in dark mode. Topbar carries the "Positioned" lockup only — the
   strapline is unreadable at 19px; the full two-tone logo with it is at
   /static/img/positioned-logo.png. */
.brand { display:inline-flex; align-items:center; text-decoration:none;
  border-radius:var(--r-sm); }
.brand .brand-mark { display:block; width:132px; height:19px;
  background:var(--brand);
  -webkit-mask:url("/static/img/positioned-wordmark.png") no-repeat left center/contain;
  mask:url("/static/img/positioned-wordmark.png") no-repeat left center/contain; }
.brand:hover .brand-mark { background:var(--brand-hover); }
.brand:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.topbar nav { display:flex; gap:var(--sp-2); flex:1; }
.topbar nav a { display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:var(--text-muted); font:var(--t-label); padding:0 var(--sp-3);
  min-height:var(--tap); border-radius:var(--r-md); }
.topbar nav a:hover { color:var(--text-primary); background:var(--surface-sunken); }
.topbar nav a[aria-current="page"] { color:var(--brand-text); background:var(--surface-brand-subtle); }
.nav-count { font:var(--t-small); background:var(--surface-sunken); color:var(--text-muted);
  border-radius:var(--r-full); padding:0 8px; line-height:20px; min-width:20px; text-align:center; }
a[aria-current="page"] .nav-count { background:var(--brand); color:var(--text-on-brand); }

.activity { position:relative; display:none; align-items:center; }
.activity[data-on] { display:inline-flex; }
.activity-pill { display:inline-flex; align-items:center; gap:8px; font:var(--t-small);
  color:var(--brand-text); background:var(--surface-brand-subtle);
  border:1px solid var(--brand-border); border-radius:var(--r-full);
  padding:4px 12px; min-height:28px; cursor:pointer; }
.activity-line { position:absolute; left:0; right:0; bottom:-14px; height:2px;
  overflow:hidden; border-radius:2px; }
.activity-line::after { content:""; display:block; height:100%; width:40%;
  background:var(--brand); border-radius:2px;
  animation:task-indeterminate 1.4s var(--ease) infinite; }
@keyframes task-indeterminate { from { transform:translateX(-100%); } to { transform:translateX(350%); } }
.activity-list { position:absolute; right:0; top:calc(100% + 10px); z-index:60;
  width:320px; background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-md); box-shadow:var(--e-2); padding:var(--sp-3); }

/* avatar / account menu (native details) */
.menu { position:relative; }
.menu > summary { list-style:none; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:var(--r-full); background:var(--surface-sunken);
  color:var(--text-muted); font:var(--t-label); border:1px solid var(--border-default); }
.menu > summary::-webkit-details-marker { display:none; }
.menu[open] > summary { border-color:var(--border-strong); color:var(--text-primary); }
.menu-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  min-width:230px; background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-md); box-shadow:var(--e-2); padding:var(--sp-2); }
.menu-panel a, .menu-panel .menu-row { display:flex; align-items:center; gap:10px;
  padding:10px var(--sp-3); border-radius:var(--r-sm); text-decoration:none;
  color:var(--text-body); font:var(--t-label); }
.menu-panel a:hover { background:var(--surface-sunken); color:var(--text-primary); }
/* The sign-out button renders like the menu links (it must POST, not GET). */
.menu-form { display:contents; }
.menu-form button { display:flex; align-items:center; gap:10px; width:100%;
  padding:10px var(--sp-3); border:0; border-radius:var(--r-sm); cursor:pointer;
  background:none; text-align:left; color:var(--text-body); font:var(--t-label); }
.menu-form button:hover { background:var(--surface-sunken); color:var(--text-primary); }
.menu-sep { border-top:1px solid var(--border-subtle); margin:var(--sp-2) 0; }
.theme-row { display:flex; gap:4px; padding:6px var(--sp-3) 8px; }
.theme-row button { flex:1; font:var(--t-small); padding:6px 4px; border-radius:var(--r-sm);
  border:1px solid var(--border-default); background:var(--surface-card);
  color:var(--text-muted); cursor:pointer; }
.theme-row button[aria-pressed="true"] { background:var(--surface-brand-subtle);
  color:var(--brand-text); border-color:var(--brand-border); }

.crumbs { max-width:var(--w-wide); margin:0 auto; padding:10px var(--sp-6) 0;
  font:var(--t-small); color:var(--text-muted); }
.crumbs a { color:var(--text-muted); text-decoration:none; }
.crumbs a:hover { color:var(--brand-text); }
.crumbs .sep { margin:0 6px; color:var(--text-faint); }
.crumbs .here { color:var(--text-body); font-weight:600; }

.container { max-width:var(--w-app); margin:0 auto; padding:var(--sp-6) var(--sp-6) 96px; }
.container.w-prose { max-width:var(--w-prose); }
.container.w-wide { max-width:var(--w-wide); }
.footer { text-align:center; color:var(--text-faint); font:var(--t-small);
  padding:var(--sp-5); }

/* mobile bottom tab bar */
.tabbar { display:none; }

/* ── cards ────────────────────────────────────────────────────────────── */
.card, .panel { background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-5); margin:0 0 var(--sp-5); }
.card--action { box-shadow:var(--e-1); }
.card--sunken { background:var(--surface-sunken); border:0; }
.card--brand { background:var(--surface-brand-subtle); border-color:var(--brand-border); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.card-head > :first-child { flex:1 1 240px; min-width:0; }
.card-head h2 { margin:0; }
.card-head .actions { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--sp-4); margin:var(--sp-5) 0; }
.cards .card { margin:0; }

.stat-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--sp-4); margin:var(--sp-4) 0; }
.stat-tiles .tile { background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); }
.tile b { font:600 28px/1.2 var(--font-display); color:var(--text-primary); }
.tile b small { font:var(--t-small); color:var(--text-muted); margin-left:4px; }
.tile .sub { font:var(--t-small); color:var(--text-muted); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn, .btn-sm { display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font:var(--t-label); min-height:var(--tap); padding:0 var(--sp-4);
  border-radius:var(--r-md); border:1px solid var(--border-default);
  background:var(--surface-card); color:var(--text-body); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease); }
.btn:hover, .btn-sm:hover { background:var(--surface-sunken); border-color:var(--border-strong); }
.btn:active, .btn-sm:active { transform:translateY(1px); }
.btn-sm { min-height:32px; padding:0 var(--sp-3); font:600 13.5px/1.4 var(--font-body);
  border-radius:var(--r-sm); }
.btn--primary { background:var(--brand); border-color:transparent;
  color:var(--text-on-brand); box-shadow:var(--e-1); }
.btn--primary:hover { background:var(--brand-hover); border-color:transparent; }
.btn--primary:active { background:var(--brand-active); }
.btn--ai { background:var(--surface-brand-subtle); color:var(--brand-text);
  border-color:var(--brand-border); }
.btn--ai:hover { background:var(--surface-brand-subtle); border-color:var(--brand);
  filter:none; }
.btn--quiet { border-color:transparent; background:transparent; color:var(--text-muted); }
.btn--quiet:hover { background:var(--surface-sunken); color:var(--text-primary); }
.btn--danger, .btn.danger, .btn-sm.danger { color:var(--danger); border-color:var(--border-default); background:var(--surface-card); }
.btn--danger:hover, .btn.danger:hover, .btn-sm.danger:hover { background:var(--danger-bg); border-color:var(--danger); }
.btn:disabled, .btn-sm:disabled, button:disabled { background:var(--surface-sunken);
  color:var(--text-faint); border-color:transparent; box-shadow:none; cursor:not-allowed;
  transform:none; }
.btn[aria-busy="true"], .btn-sm[aria-busy="true"] { pointer-events:none; color:transparent; position:relative; }
.btn[aria-busy="true"]::after, .btn-sm[aria-busy="true"]::after { content:"";
  position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border-radius:50%; border:2px solid var(--border-strong);
  border-top-color:var(--brand); animation:spin .9s linear infinite; }
.btn--primary[aria-busy="true"]::after { border-color:rgb(255 255 255/.35); border-top-color:#fff; }
@keyframes spin { to { transform:rotate(360deg); } }
.linkbtn { background:none; border:none; color:var(--brand-text); cursor:pointer;
  font:inherit; padding:0; text-decoration:underline; }
.btn-lg { min-height:48px; padding:0 var(--sp-5); font-size:15px; }

/* icon-only buttons: 40px hit area, 20px glyph */
.iconbtn { display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); padding:0; border:1px solid transparent;
  border-radius:var(--r-sm); background:transparent; color:var(--text-muted); cursor:pointer; }
.iconbtn:hover { background:var(--surface-sunken); color:var(--text-primary); }

/* row overflow menu */
.rowmenu { position:relative; display:inline-block; }
.rowmenu > summary { list-style:none; }
.rowmenu > summary::-webkit-details-marker { display:none; }
.rowmenu .menu-panel { min-width:200px; }

/* ── forms ────────────────────────────────────────────────────────────── */
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
label { font:var(--t-label); color:var(--text-primary); }
.stack label, form label { display:flex; flex-direction:column; gap:6px; }
label .hint { order:9; } /* hints render below the field */
input, select, textarea { font:var(--t-body); font-size:16px; padding:9px 11px;
  min-height:var(--tap); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background:var(--surface-card); color:var(--text-primary); width:100%; }
textarea { min-height:0; field-sizing:content; max-height:420px; }
/* Long-prose fields (summary, notes, voice, samples) get a taller
   ceiling — 420px turned a 2,400-character summary into a scroll box.
   Past this the expand button (fieldmodal.js) is the way in. */
textarea[data-long] { max-height:min(70vh, 900px); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--surface-brand-subtle); }
input::placeholder, textarea::placeholder { color:var(--text-faint); }
.field--error input, .field--error textarea { border-color:var(--danger); }
.field-error { font:var(--t-small); color:var(--danger); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:start; }
.grid2.tight { gap:var(--sp-2); }
.field { margin-bottom:var(--sp-4); }
.field-label { font:var(--t-label); color:var(--text-primary); margin-bottom:6px; }
fieldset { border:1px solid var(--border-default); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-4) var(--sp-3); margin:0; }
legend { font:var(--t-h3); color:var(--text-primary); padding:0 var(--sp-2); }
.inline-check, .stack .inline-check { display:flex; flex-direction:row; align-items:center;
  gap:10px; font-weight:400; color:var(--text-body); margin-bottom:var(--sp-2); }
.inline-check input { width:auto; min-height:0; flex:none; }
.inline { display:inline; margin:0; }
.inline select { width:auto; min-width:190px; }
.save-note { font:var(--t-small); color:var(--text-muted); }
.save-note.err { color:var(--danger); }

/* sticky save bar */
.save-bar { position:sticky; bottom:0; z-index:30; display:flex; align-items:center;
  gap:var(--sp-4); background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-md); box-shadow:var(--e-2); padding:var(--sp-3) var(--sp-4);
  margin-top:var(--sp-5); }
.save-bar .save-note { flex:1; }

/* ── banners (synchronous validation only) & toasts ───────────────────── */
.banner { padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); margin:0 0 var(--sp-4);
  font:var(--t-small); }
.banner.err { background:var(--danger-bg); color:var(--danger); }
.banner.ok { background:var(--ok-bg); color:var(--ok); }

.toast-region { position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:120;
  display:flex; flex-direction:column; gap:var(--sp-2); max-width:380px; }
.toast { display:flex; align-items:flex-start; gap:var(--sp-3);
  background:var(--slate-800); color:var(--slate-100);
  border-radius:var(--r-md); box-shadow:var(--e-3); padding:var(--sp-3) var(--sp-4);
  font:var(--t-small); animation:toast-in var(--dur-2) var(--ease); }
:root[data-theme="dark"] .toast { background:var(--surface-sunken); color:var(--text-primary);
  border:1px solid var(--border-default); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast {
  background:var(--surface-sunken); color:var(--text-primary);
  border:1px solid var(--border-default); } }
@keyframes toast-in { from { opacity:0; transform:translateY(6px); } }
.toast b { display:block; font-weight:600; }
.toast .toast-act { margin-left:auto; flex:none; font:var(--t-label);
  color:var(--green-300); background:none; border:none; cursor:pointer; padding:2px 4px; }
.toast--error { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger); }
.toast--error .toast-act { color:var(--danger); }

/* ── background-task card ─────────────────────────────────────────────── */
.task-card { display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--surface-brand-subtle); border:1px solid var(--brand-border);
  border-left:4px solid var(--brand); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-5); }
.task-card .task-msg { font:var(--t-label); color:var(--text-primary); }
.task-card .task-sub { font:var(--t-small); color:var(--text-muted); }
.task-track { height:6px; border-radius:3px; background:var(--surface-card); overflow:hidden; }
.task-bar { height:100%; width:0; border-radius:3px; background:var(--brand);
  transition:width .4s var(--ease); }
.task-bar.task-bar-indeterminate { width:40%;
  animation:task-indeterminate 1.4s var(--ease) infinite; }
.task-card .task-actions { display:flex; gap:var(--sp-2); }

/* skeleton pulse (jobs being analysed) */
.skeleton { animation:skel 1.2s var(--ease) infinite alternate; }
@keyframes skel { from { opacity:1; } to { opacity:.55; } }

/* ── pills · tags · chips ─────────────────────────────────────────────── */
.pill { display:inline-block; font:var(--t-small); font-weight:600;
  background:var(--surface-sunken); color:var(--text-muted);
  border-radius:var(--r-full); padding:1px 10px; vertical-align:middle; }
.tag { display:inline-block; font:600 12px/1.6 var(--font-body); padding:1px 10px;
  border-radius:var(--r-full); text-transform:capitalize; vertical-align:middle; }
.tag-target { background:var(--warn-bg); color:var(--warn); }
.status-new { background:var(--surface-brand-subtle); color:var(--brand-text); }
.status-seen { background:var(--surface-sunken); color:var(--text-muted); }
.status-saved { background:var(--warn-bg); color:var(--warn); }
.status-applied { background:var(--brand); color:var(--text-on-brand); }
.status-dismissed { background:transparent; color:var(--text-faint);
  box-shadow:inset 0 0 0 1px var(--border-default); }
.status-expired { background:var(--danger-bg); color:var(--danger); }

.chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2);
  min-height:1.5rem; }
.chip { display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-sunken); border:1px solid var(--border-default);
  border-radius:var(--r-sm); padding:4px 6px 4px 10px; font:var(--t-small);
  color:var(--text-body); }
.chip-x { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin:-6px -4px; border:none; background:none;
  cursor:pointer; color:var(--text-muted); border-radius:var(--r-sm); }
.chip-x:hover { color:var(--danger); background:var(--surface-card); }
.chip-add { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.chip-add input { flex:1; min-width:200px; }

/* ── tables ───────────────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; margin-top:var(--sp-2); }
.tbl th, .tbl td { text-align:left; padding:var(--sp-3) var(--sp-3);
  border-bottom:1px solid var(--border-subtle); vertical-align:top; }
.tbl thead th { font:var(--t-overline); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); background:var(--surface-sunken);
  position:sticky; top:0; z-index:5; }
.tbl thead th:first-child { border-top-left-radius:var(--r-sm); }
.tbl thead th:last-child { border-top-right-radius:var(--r-sm); }
.tbl tbody tr:hover { background:var(--surface-sunken); }
.tbl tr.dim .cell-sub, .tbl tr.dim .cell-main a { color:var(--text-faint); }
.cell-main { font:var(--t-label); color:var(--text-primary); }
.cell-main a { color:var(--text-primary); text-decoration:none; }
.cell-main a:hover { color:var(--brand-text); }
.cell-sub { font:var(--t-small); color:var(--text-muted); }
.tbl-scroll { overflow-x:auto; }
th.th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
th.th-sort:hover { color:var(--brand-text); }
th.th-sort[data-dir] { color:var(--brand-text); }
th.th-sort::after { content:" ↕"; opacity:.35; }
th.th-sort[data-dir="asc"]::after { content:" ↑"; opacity:1; }
th.th-sort[data-dir="desc"]::after { content:" ↓"; opacity:1; }
.table-tools { display:flex; gap:var(--sp-3); align-items:center; margin:var(--sp-3) 0; flex-wrap:wrap; }
.table-tools input[type="search"] { max-width:380px; }
/* keep Mark applied one hover/focus away, not 24 always-on buttons */
.tbl .hover-act { opacity:0; transition:opacity var(--dur-1) var(--ease); }
.tbl tr:hover .hover-act, .tbl tr:focus-within .hover-act { opacity:1; }
@media (max-width: 767px), (hover: none) { .tbl .hover-act { opacity:1; } }
.row-expand { background:var(--surface-sunken); }
.row-expand td { padding:var(--sp-3) var(--sp-5); font:var(--t-small); color:var(--text-muted); }
.rowlink { cursor:pointer; }

/* ── filter bar (segmented groups) ───────────────────────────────────── */
.filterbar { display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap;
  margin:var(--sp-3) 0 var(--sp-4); }
.seg-group { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.seg-label { font:var(--t-overline); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-right:2px; }
.seg { display:inline-flex; align-items:center; gap:6px; font:var(--t-label);
  color:var(--text-body); text-decoration:none; padding:6px var(--sp-3);
  border:1px solid var(--border-default); border-radius:var(--r-full);
  background:var(--surface-card); min-height:32px; }
.seg:hover { background:var(--surface-sunken); }
.seg[aria-current="true"] { background:var(--brand); border-color:var(--brand);
  color:var(--text-on-brand); }
.seg .n { font-weight:400; opacity:.75; }

/* ── fit gauge ────────────────────────────────────────────────────────── */
.minigauge { position:relative; display:block; width:104px; height:8px;
  border-radius:5px; background:var(--gauge); }
/* The marker is a WINDOW, not a hairline. The score moves by about 2 of its
   16 steps between runs, so a point would render that drift as a finding -
   which is why this column was words only for a while. The window is that
   uncertainty drawn to scale, with a notch at the reading itself, so the
   column shows position and distance without overclaiming precision. */
.minirange { position:absolute; top:-3px; height:14px; border-radius:3px;
  background:var(--gauge-window); border:1.5px solid var(--text-primary);
  box-sizing:border-box; }
.fit-cell { min-width:112px; }
.fit-cell .fit-band { margin-top:5px; }

/* The word beside the gauge: four bands wide enough that run-to-run noise
   cannot move a job from one to the next on its own. */
.fit-band { display:inline-block; padding:2px 8px; border-radius:11px;
  font-size:.82rem; font-weight:500; white-space:nowrap;
  border:1px solid var(--border); color:var(--text-body); }
/* A job whose posting we could not read: not a verdict, a to-do. It links
   straight to the box where the user can hand the posting over. */
.fit-band--action { border-style:dashed; text-decoration:none;
  border-color:var(--brand, currentColor); }
.fit-band--action:hover { text-decoration:underline; }

/* ── hand the posting over ────────────────────────────────────────────── */
/* Numbered steps for the one flow that needs the user to do something in
   another tab and come back. */
.steps { margin:.75rem 0 1rem; padding-left:1.35rem; }
.steps li { margin:.4rem 0; line-height:1.55; }
.steps li strong { font-weight:600; }
/* A file input styled as a button next to the submit, so paste and attach
   read as two ways to do the same thing rather than two separate forms. */
.file-pick { display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border:1px dashed var(--border); border-radius:8px;
  cursor:pointer; color:var(--text-body); font-size:.9rem; }
.file-pick:hover { border-color:var(--brand); }
.file-pick input[type=file] { max-width:11rem; font-size:.82rem; }
.card--action .row { display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem; justify-content:space-between; }
.fit-gauge { max-width:520px; margin:var(--sp-2) 0; }
.gauge-track { position:relative; height:12px; border-radius:7px; background:var(--gauge); }
.gauge-marker { position:absolute; top:-5px; width:6px; height:22px; border-radius:3px;
  background:var(--text-primary); transform:translateX(-50%);
  box-shadow:0 0 0 2px var(--surface-card); }
.gauge-marker::after { content:""; position:absolute; left:50%; top:5px; width:1px;
  height:12px; background:var(--surface-card); }
.gauge-legend { display:flex; justify-content:space-between; font:var(--t-overline);
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  margin-top:6px; }
.gauge-sentence { font:var(--t-label); color:var(--text-primary); margin-top:var(--sp-2); }
.gauge-sentence .rest { font-weight:400; color:var(--text-muted); }

/* header (compact) gauge on job detail */
.gauge-compact { width:180px; }
.gauge-compact .gauge-track { height:8px; }
.gauge-compact .gauge-marker { top:-4px; height:16px; width:5px; }

/* ── drop zone & file rows ────────────────────────────────────────────── */
.dropzone { border:2px dashed var(--border-strong); border-radius:var(--r-md);
  background:var(--surface-sunken); padding:var(--sp-6) var(--sp-4); text-align:center;
  cursor:pointer; transition:border-color var(--dur-1), background var(--dur-1); }
.dropzone.drag { border-color:var(--brand); background:var(--surface-brand-subtle); }
.dz-inner { display:flex; flex-direction:column; gap:6px; align-items:center; }
.dz-inner strong { font:var(--t-h3); font-size:16px; color:var(--text-primary); }
.dz-inner .hint { font-family:var(--font-mono); font-size:12.5px; }
.staging { list-style:none; padding:0; margin:var(--sp-3) 0 0; }
.staging li { display:flex; align-items:center; gap:var(--sp-3); padding:8px 0;
  border-bottom:1px solid var(--border-subtle); font:var(--t-small); }
.staging .fname { flex:1; color:var(--text-body); }
.upload-actions { display:flex; gap:var(--sp-2); align-items:center; margin-top:var(--sp-3); }

.filelist { list-style:none; padding:0; margin:0; }
.filerow { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-2);
  border-bottom:1px solid var(--border-subtle); }
.filerow:last-child { border-bottom:0; }
.filerow .fmain { flex:1; min-width:0; }
.filerow .fname { font:var(--t-label); color:var(--text-primary); overflow-wrap:anywhere; }
.filerow .fsub { font:var(--t-small); color:var(--text-muted); }
.filerow .fsub.err { color:var(--danger); }
.filerow select { width:auto; min-height:32px; padding:4px 8px; font:var(--t-small); }
.group-head { position:sticky; top:0; z-index:4; display:flex; align-items:center;
  gap:var(--sp-2); background:var(--surface-card); padding:var(--sp-3) var(--sp-2) var(--sp-2);
  border-bottom:1px solid var(--border-default); }
.group-head h2 { margin:0; font-size:16px; }
.src-link { font:var(--t-small); word-break:break-all; text-decoration:none; }

/* ── AI chat surface ─────────────────────────────────────────────────── */
.chat { margin-top:var(--sp-3); border:0; border-radius:var(--r-md);
  background:var(--surface-sunken); padding:var(--sp-4); }
.chat-context { font:var(--t-small); color:var(--text-muted); margin-bottom:var(--sp-2);
  display:flex; align-items:center; gap:8px; }
.chat-log { display:flex; flex-direction:column; gap:var(--sp-2); max-height:340px;
  overflow-y:auto; margin-bottom:var(--sp-3); }
.msg { padding:10px 14px; border-radius:12px; max-width:85%; white-space:pre-wrap;
  line-height:1.5; font-size:15px; }
.msg.coach { background:var(--surface-card); color:var(--text-body);
  align-self:flex-start; border-bottom-left-radius:4px; position:relative;
  margin-left:26px; }
.msg.coach::before { content:""; position:absolute; left:-26px; top:4px; width:18px;
  height:18px; border-radius:5px; background:var(--brand); }
.msg.me { background:var(--brand); color:var(--text-on-brand); align-self:flex-end;
  border-bottom-right-radius:4px; }
.msg.typing { display:inline-flex; gap:5px; align-items:center; min-height:20px; }
.msg.typing i { width:6px; height:6px; border-radius:50%; background:var(--text-faint);
  animation:skel 1s var(--ease) infinite alternate; }
.msg.typing i:nth-child(2) { animation-delay:.2s; } .msg.typing i:nth-child(3) { animation-delay:.4s; }
.chat-log:empty { margin-bottom:0; }
.chat-input textarea { width:100%; background:var(--surface-card); }

/* the long-form opener: the user's own text starts the conversation */
.chat-seed label { display:block; font:var(--t-small); color:var(--text-muted);
  margin-bottom:var(--sp-2); }
.chat-seed textarea { width:100%; background:var(--surface-card); resize:vertical;
  min-height:180px; line-height:1.6; }
.chat-seed .chat-actions { align-items:center; }
/* a brain-dump thread gets long fast - give its transcript more room */
.chat:has(.chat-seed) .chat-log { max-height:min(60vh, 560px); }
.chat-actions { display:flex; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap; }
.chat-status { min-height:1.1em; margin:var(--sp-2) 0 0; font:var(--t-small);
  color:var(--text-muted); }
.chat-status.err { color:var(--danger); }
.chat-status.ok { color:var(--ok); }

/* the job-detail AI dock */
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
/* The dock column exists only while the dock is open; a closed dock must not
   hold 380px of dead space beside the reading pane. */
.detail-grid.has-dock { align-items:start; }
.detail-grid.has-dock:has(.ai-dock:not([hidden])) {
  grid-template-columns:minmax(0,1fr) 380px; }
/* With the dock closed the pane spans the page, so cap the measure. */
.tabpane { max-width:920px; }
.ai-dock { position:sticky; top:var(--sp-4); }
.ai-dock .chat { margin-top:0; }

/* ── repeatable blocks ────────────────────────────────────────────────── */
.repeat-list { display:flex; flex-direction:column; gap:var(--sp-2); }
details.repeat-item { border:1px solid var(--border-default); border-radius:var(--r-md);
  background:var(--surface-card); }
details.repeat-item > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); min-height:var(--tap); }
details.repeat-item > summary::-webkit-details-marker { display:none; }
details.repeat-item > summary:hover { background:var(--surface-sunken); border-radius:var(--r-md); }
details.repeat-item[open] > summary { border-bottom:1px solid var(--border-subtle); }
.ri-title { flex:1; min-width:0; overflow-wrap:anywhere;
  font:var(--t-label); color:var(--text-primary); }
.ri-title .rest { font-weight:400; color:var(--text-muted); }
.ri-when { font:var(--t-small); color:var(--text-muted); white-space:nowrap;
  flex:0 0 auto; text-align:right; }
details.repeat-item .ri-body { padding:var(--sp-4); }
details.repeat-item summary .chev { transition:transform var(--dur-2) var(--ease); color:var(--text-faint); }
details.repeat-item[open] summary .chev { transform:rotate(180deg); }
.add-row { border-style:dashed; width:100%; justify-content:center; color:var(--text-muted); }
.add-row:hover { border-color:var(--brand); color:var(--brand-text); background:var(--surface-card); }

/* ── profile: modes, rail ────────────────────────────────────────────── */
.mode-tabs { display:flex; gap:var(--sp-1); border-bottom:1px solid var(--border-default);
  margin:0 0 var(--sp-5); }
.mode-tabs a { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font:var(--t-label); color:var(--text-muted); padding:10px var(--sp-4);
  border-bottom:2px solid transparent; margin-bottom:-1px; min-height:var(--tap); }
.mode-tabs a:hover { color:var(--text-primary); }
.mode-tabs a[aria-current="true"] { color:var(--brand-text); border-bottom-color:var(--brand); }
.mode-tabs .n { font:var(--t-small); background:var(--surface-sunken);
  border-radius:var(--r-full); padding:0 8px; }

.profile-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--sp-6);
  align-items:start; }
.rail { position:sticky; top:var(--sp-4); display:flex; flex-direction:column; gap:2px; }
.rail a { display:flex; align-items:center; gap:8px; text-decoration:none;
  font:var(--t-small); color:var(--text-muted); padding:8px var(--sp-3);
  border-radius:var(--r-sm); }
.rail a:hover { background:var(--surface-sunken); color:var(--text-primary); }
.rail a .dot { width:7px; height:7px; border-radius:50%; background:var(--warn);
  margin-left:auto; visibility:hidden; }
.rail a[data-dirty] .dot { visibility:visible; }

/* Profile-wide actions (Rebuild, Tell the AI more) sit above the cards. */
/* Sits above the profile grid, so it is indented past the rail to line up with
   the content column. Un-indented it floated in the gutter, attached to
   nothing, with its buttons hanging over empty space. */
.profile-toolbar { display:flex; align-items:center; justify-content:flex-end;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4);
  padding-left:calc(220px + var(--sp-6)); }
.profile-toolbar .hint { margin:0; flex:1 1 24ch; }
.profile-toolbar .actions { display:flex; align-items:center; gap:var(--sp-2);
  margin-left:auto; }
.profile-toolbar .actions form { display:flex; }

.review-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.review-head h2 { margin:0 0 var(--sp-2); }
/* Review mode mirrors Edit's sectioning, so both modes read the same way. */
.banner.warn { background:var(--warn-bg, var(--surface-sunken));
  border:1px solid var(--warn); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); }
.banner.issues p { margin:0 0 var(--sp-2); }
.banner.issues ul { margin:0; padding-left:var(--sp-4); }
.banner.issues li { font:var(--t-small); color:var(--text-body); margin-bottom:3px; }
.cv-skill-groups { display:flex; flex-direction:column; gap:var(--sp-3);
  margin-bottom:var(--sp-4); }
.cv-skill-head { font:var(--t-small); color:var(--text-muted); }
.cv-skill-group { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--sp-3); align-items:start; border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); }
@media (max-width:720px) { .cv-skill-group { grid-template-columns:minmax(0,1fr); } }
.thin-tag { margin:0 0 var(--sp-2); padding:5px 10px; border-radius:var(--r-sm);
  background:var(--warn-bg); color:var(--warn); font:var(--t-small); }
.review-prose { margin:0; }
.review-group { margin-top:var(--sp-4); }
.review-group:first-of-type { margin-top:var(--sp-2); }
.review-group h3 { margin:0 0 var(--sp-2); font:600 13px/1.4 var(--font-body);
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.review-list { list-style:none; padding:0; margin:0; display:flex;
  flex-direction:column; gap:2px; }
.review-list li { padding:4px 0 4px var(--sp-3); border-left:2px solid var(--border-default);
  line-height:1.5; }
.review-contact { display:flex; gap:var(--sp-4); align-items:flex-start; flex-wrap:wrap; }
.review-contact .kv { flex:1 1 260px; }
.empty { color:var(--text-faint); font-style:italic; }
.verbatim.prose { white-space:normal; font-size:15px; }
.verbatim { white-space:pre-wrap; background:var(--surface-sunken);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); line-height:1.6;
  font-size:14.5px; max-height:320px; overflow-y:auto; }
.link-list { list-style:none; padding:0; margin:0; display:flex;
  flex-direction:column; gap:var(--sp-2); }
.link-list li { display:flex; flex-direction:column; gap:1px;
  padding:6px 0 6px var(--sp-3); border-left:2px solid var(--border-default); }
.link-list li a { font:var(--t-small); word-break:break-all; }
.link-row { border:1px solid var(--border-default); border-radius:var(--r-md);
  background:var(--surface-card); padding:var(--sp-3) var(--sp-4); }
.link-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--sp-3); align-items:end; }
.link-row .remove-row { margin-top:var(--sp-2); }
@media (max-width:720px) { .link-grid { grid-template-columns:minmax(0,1fr); } }

.kv { list-style:none; padding:0; margin:0; }
.kv li { margin-bottom:4px; }
.kv li span { display:inline-block; width:110px; color:var(--text-muted); font:var(--t-small); }

/* improve queue */
.queue-card .q-count { font:var(--t-overline); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted); }

/* photo */
.photo-row { display:flex; gap:var(--sp-4); align-items:flex-start; margin-bottom:var(--sp-4); }
.photo-thumb { width:96px; height:120px; flex-shrink:0; border:1px solid var(--border-default);
  border-radius:var(--r-sm); background:var(--surface-sunken); display:flex;
  align-items:center; justify-content:center; overflow:hidden; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-controls { flex:1; }
.photo-actions { display:flex; gap:var(--sp-2); align-items:center; margin-top:var(--sp-2); }
.photo-pick { cursor:pointer; }

/* ── job detail: header, tabs ────────────────────────────────────────── */
.job-header { position:sticky; top:0; z-index:40; background:var(--surface-page);
  padding:var(--sp-3) 0 0; margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--border-default); }
.job-header-row { display:flex; align-items:flex-start; gap:var(--sp-5); flex-wrap:wrap; }
.job-header-row .titles { flex:1; min-width:260px; }
.job-header-row h1 { margin-bottom:2px; }
.job-header-row .meta { font:var(--t-small); color:var(--text-muted); }
.job-header-row .gaugebox { padding-top:6px; }
.job-header-row .head-actions { display:flex; gap:var(--sp-2); align-items:center; padding-top:4px; }
.job-tabs { display:flex; gap:var(--sp-1); margin-top:var(--sp-3); overflow-x:auto; }
.job-tabs a { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font:var(--t-label); color:var(--text-muted); padding:10px var(--sp-4);
  border-bottom:2px solid transparent; white-space:nowrap; min-height:var(--tap); }
.job-tabs a:hover { color:var(--text-primary); }
.job-tabs a[aria-current="true"] { color:var(--brand-text); border-bottom-color:var(--brand); }
.job-actions { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
/* In the jobs table the actions stay on one line, right-aligned, so rows keep
   a single-line rhythm instead of stacking a second row of icons. */
.tbl td.job-actions { flex-wrap:nowrap; justify-content:flex-end; }
.job-desc { white-space:pre-wrap; line-height:1.6; }
.weakness-list li { margin-bottom:var(--sp-2); }
.weakness-address { margin-left:var(--sp-2); vertical-align:baseline; }
.dl-form { display:flex; align-items:end; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border-subtle); }
.dl-form select { min-width:220px; }
.dl-form .hint { flex-basis:100%; }
.diffmark { background:var(--warn-bg); border-radius:2px; }

/* voice check: the second-pass account, collapsed by default */
.voice-check { margin-top:var(--sp-4); border:1px solid var(--border-default);
  border-radius:var(--r-md); background:var(--surface-sunken); }
.voice-check > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  font:var(--t-small); color:var(--text-muted); min-height:var(--tap); }
.voice-check > summary::-webkit-details-marker { display:none; }
.voice-check > summary:hover { color:var(--text-primary); }
.voice-check > summary > span { flex:1; }
.voice-check > summary svg:last-child { color:var(--text-faint);
  transition:transform var(--dur-2) var(--ease); }
.voice-check[open] > summary svg:last-child { transform:rotate(180deg); }
.voice-check[open] > summary { border-bottom:1px solid var(--border-subtle); }
.vc-body { padding:var(--sp-4); font:var(--t-small); color:var(--text-body); }
.vc-body p { margin:0 0 var(--sp-2); }
.vc-body .overline { margin-top:var(--sp-3); color:var(--text-muted); }
.vc-body ul { margin:0 0 var(--sp-2) var(--sp-4); }
.vc-body li { margin-bottom:4px; }

/* ── search form ─────────────────────────────────────────────────────── */
.ai-suggest { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin:0 0 var(--sp-2); }
.search-summary { margin-top:var(--sp-4); }
.search-summary .overline { display:block; margin-bottom:6px; }
.search-summary p { font-size:15px; color:var(--text-primary); margin:0; }
.search-summary .hint { display:block; margin-top:6px; }

/* ── misc ─────────────────────────────────────────────────────────────── */
.advanced { margin-top:var(--sp-4); border-top:1px solid var(--border-subtle);
  padding-top:var(--sp-3); }
.advanced > summary { cursor:pointer; color:var(--text-muted); font:var(--t-label);
  display:flex; align-items:center; gap:8px; min-height:var(--tap); }
.advanced > summary:hover { color:var(--text-primary); }
.advanced > summary .chev { transition:transform var(--dur-2) var(--ease); }
.advanced[open] > summary .chev { transform:rotate(180deg); }
.empty-state { text-align:center; padding:var(--sp-7) var(--sp-5); }
.empty-state h2 { margin-bottom:var(--sp-2); }
.empty-state p { color:var(--text-muted); margin-bottom:var(--sp-4); }
.note { color:var(--text-muted); font:var(--t-small); max-width:260px; }
.next { margin-top:var(--sp-5); }

/* legacy aliases kept while templates migrate */
.material-group { margin:var(--sp-5) 0; }
.advice-list { padding-left: 1.2rem; }
.advice-item { margin-bottom: var(--sp-4); }
.advice-head { display:flex; gap:var(--sp-4); align-items:flex-start;
  justify-content:space-between; flex-wrap:wrap; }
.advice-head > div { flex:1; min-width:240px; }
.chat-toggle { white-space:nowrap; flex-shrink:0; }
.qa { border-bottom:1px solid var(--border-subtle); padding-bottom:var(--sp-3); }

/* ── expand-to-dialog for long text fields ───────────────────────────── */
.ta-wrap { position:relative; display:block; }
.ta-expand { position:absolute; top:2px; right:2px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--text-faint); cursor:pointer; opacity:.6; }
.ta-wrap:hover .ta-expand, .ta-expand:focus { opacity:1; color:var(--brand-text);
  background:var(--surface-sunken); }
.ta-wrap textarea { padding-right:40px; }

dialog.fm { width:min(1000px, 96vw); max-height:92vh; border:0;
  border-radius:var(--r-lg); box-shadow:var(--e-3); padding:var(--sp-5);
  background:var(--surface-card); color:var(--text-body);
  display:flex; flex-direction:column; gap:var(--sp-3); }
dialog.fm:not([open]) { display:none; }
dialog.fm::backdrop { background:var(--scrim); backdrop-filter:blur(2px); }
.fm-head { display:flex; justify-content:space-between; align-items:flex-start; }
.fm-title { font:var(--t-h2); color:var(--text-primary); }
.fm-crumb { font:var(--t-small); color:var(--text-muted); margin-top:2px; }
.fm-text { flex:1; width:100%; min-height:50vh; max-height:none; resize:none;
  font-size:16px; line-height:1.6; field-sizing:initial; }
.fm-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); }

dialog.confirm { border:0; border-radius:var(--r-lg); box-shadow:var(--e-3);
  padding:var(--sp-5); background:var(--surface-card); color:var(--text-body);
  max-width:420px; }
dialog.confirm::backdrop { background:var(--scrim); }
dialog.confirm h2 { font-size:17px; }
dialog.confirm .confirm-actions { display:flex; gap:var(--sp-2); justify-content:flex-end;
  margin-top:var(--sp-4); }

/* ── shared row grammar (Review + Edit) ───────────────────────────────── */
/* Per-row edit affordance: quiet until the row is hovered or focused, always
   visible where there is no hover (same idiom as .tbl .hover-act). */
.ri-edit { font:var(--t-small); color:var(--text-muted); text-decoration:none;
  padding:2px 8px; border-radius:var(--r-sm); flex:0 0 auto; opacity:0;
  transition:opacity var(--dur-2) var(--ease); }
.ri-edit:hover { color:var(--brand-text); background:var(--surface-sunken); }
details.repeat-item > summary:hover .ri-edit,
details.repeat-item > summary:focus-within .ri-edit,
.ri-edit:focus-visible { opacity:1; }
@media (max-width: 767px), (hover: none) { .ri-edit { opacity:1; } }

/* Read-only row body: prose and bullets at a comfortable measure. */
.ri-read { padding:0 var(--sp-4) var(--sp-4); }
.ri-read > .ri-loc { margin:var(--sp-2) 0 0; }
.ri-read > p { margin:var(--sp-2) 0 0; }
.ri-read > ul { margin:var(--sp-2) 0 0; padding-left:var(--sp-4); line-height:1.55; }
.ri-read > ul > li { margin-bottom:4px; }
.ri-read > .ri-tech { margin:var(--sp-3) 0 0; }

/* Chips: short list values read as a wrapped set, not one row each. */
.chips { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap;
  gap:6px; }
.chips li { font:var(--t-small); color:var(--text-primary);
  background:var(--surface-sunken); border:1px solid var(--border-subtle);
  border-radius:999px; padding:3px 10px; max-width:100%; }

/* Edit · Contact: fields beside the photo instead of stacked under it. */
.contact-edit { display:grid; grid-template-columns:minmax(0,1fr) 200px;
  gap:var(--sp-5); align-items:start; }
.contact-edit .photo-controls { margin-top:var(--sp-2); }
.contact-edit .photo-actions { flex-wrap:wrap; }
@media (max-width: 900px) {
  .contact-edit { grid-template-columns:minmax(0,1fr); }
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  /* Below 1280 the dock floats, so the grid never grows its column. */
  .detail-grid.has-dock,
  .detail-grid.has-dock:has(.ai-dock:not([hidden])) {
    grid-template-columns:minmax(0,1fr); }
  .ai-dock { position:fixed; right:var(--sp-4); bottom:var(--sp-4); top:auto;
    width:min(420px, calc(100vw - 2*var(--sp-4))); z-index:90;
    box-shadow:var(--e-3); border-radius:var(--r-lg); }
  .ai-dock .chat { border:1px solid var(--border-default); }
  .profile-grid { grid-template-columns:180px minmax(0,1fr); }
  .profile-toolbar { padding-left:calc(180px + var(--sp-6)); }
}
@media (max-width: 1023px) {
  .profile-grid { grid-template-columns:minmax(0,1fr); }
  .profile-toolbar { padding-left:0; }
  .rail { position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:var(--sp-4); }
}
@media (max-width: 767px) {
  :root { --tap:44px; }
  .container { padding:var(--sp-4) var(--sp-4) 120px; }
  .topbar { padding:0 var(--sp-4); gap:var(--sp-3); }
  .topbar nav { display:none; }
  .brand .brand-mark { width:118px; height:17px; }
  .crumbs { padding:8px var(--sp-4) 0; }
  .grid2 { grid-template-columns:1fr; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100;
    background:var(--surface-card); border-top:1px solid var(--border-default);
    padding:4px max(var(--sp-2), env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom)); }
  .tabbar a { flex:1; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:6px 0; text-decoration:none; color:var(--text-muted);
    font:var(--t-small); border-radius:var(--r-sm); min-height:var(--tap); }
  .tabbar a[aria-current="page"] { color:var(--brand-text); }
  .toast-region { left:var(--sp-4); right:var(--sp-4); bottom:76px; max-width:none; }
  .save-bar { position:fixed; left:var(--sp-2); right:var(--sp-2); bottom:64px;
    margin:0; border-radius:var(--r-md); }
  .ai-dock { left:0; right:0; bottom:0; width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0;
    max-height:90dvh; }
  .job-header { position:static; }
  .mono, textarea.mono { font-size:15px; line-height:1.7; }
  /* Row summaries stack rather than squeeze the title to nothing: the
     nowrap date column plus the always-visible edit link don't fit at 390px. */
  details.repeat-item > summary { flex-wrap:wrap; row-gap:4px; }
  .ri-title { flex:1 1 100%; }
  .ri-when { flex:1 1 auto; text-align:left; }
  /* tables become card lists */
  .tbl.cardable, .tbl.cardable tbody, .tbl.cardable tr, .tbl.cardable td { display:block; }
  .tbl.cardable thead { display:none; }
  .tbl.cardable tbody tr { background:var(--surface-card);
    border:1px solid var(--border-default); border-radius:var(--r-md);
    padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); }
  .tbl.cardable td { border:0; padding:4px 0; }
  .dz-inner strong { font-size:15px; }
}

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .task-bar-indeterminate, .activity-line::after { animation:none;
    background:var(--brand); width:100%; opacity:.35; }
}


/* ── template gallery (Settings › Document style) ─────────────────────── */
.tpl-gallery { display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); }
.tpl-card { position:relative; display:flex; flex-direction:column;
  gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--border-default);
  border-radius:var(--r-md); background:var(--surface-card); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease; }
.tpl-card:hover { border-color:var(--border-strong); }
.tpl-card:has(input:checked) { border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand); }
.tpl-card > input { position:absolute; opacity:0; pointer-events:none; }
.tpl-card:has(input:focus-visible) { outline:2px solid var(--brand);
  outline-offset:2px; }
.tpl-meta { display:flex; flex-direction:column; gap:5px; }
.tpl-meta strong { font-size:14px; }
/* label .hint carries order:9 so field hints sit last; not here */
.tpl-meta .hint { order:0; }
.tpl-tags { display:flex; flex-wrap:wrap; gap:4px; }
.tpl-tags .tag { font-size:11px; padding:0 8px; }

/* the drawn page preview: A4 proportions, bars standing in for content */
.tpl-page { display:flex; gap:0; aspect-ratio:1 / 1.414; padding:8px;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:4px; overflow:hidden; }
/* every group inside the preview stacks its bars, at any nesting depth */
.tpl-page > span, .tpl-rail, .tpl-band-full, .tpl-headtext {
  display:flex; flex-direction:column; gap:5px; }
.tpl-gut { flex:0 0 26%; padding-right:6px; }
.tpl-band { flex:0 0 32%; margin:-8px 0 -8px -8px; padding:8px 6px;
  background:var(--surface-brand-subtle); }
.tpl-main { flex:1 1 auto; }
.tpl-main.centred { align-items:center; }
/* the timeline heading is a row: photo, then the name block beside it */
.tpl-head { display:flex; flex-direction:row; gap:6px; align-items:flex-start; }
.tpl-headtext { flex:1 1 auto; }
.tpl-bar { height:3px; border-radius:2px; background:var(--border-strong);
  opacity:.75; }
.tpl-bar.name { height:8px; opacity:1; background:var(--text-faint); }
.tpl-bar.accent { background:var(--border-strong); opacity:1; width:45%; }
.tpl-bar.label { background:var(--text-faint); opacity:.9; }
.tpl-photo { display:block; aspect-ratio:3 / 3.7; width:72%;
  background:var(--border-strong); border-radius:2px; }
.tpl-photo.sm { width:24%; }
.tpl-rule { height:1px; background:var(--border-default); }
.tpl-rule.half { width:45%; }
.tpl-rail { border-left:2px solid var(--border-strong); padding-left:7px; }
.tpl-band-full { background:var(--surface-sunken); padding:5px 6px;
  margin:2px 0; border-radius:2px; }
.tpl-gap { flex:0 0 4px; }
.tpl-page .w30 { width:30%; } .tpl-page .w40 { width:40%; }
.tpl-page .w45 { width:45%; } .tpl-page .w50 { width:50%; }
.tpl-page .w55 { width:55%; } .tpl-page .w60 { width:60%; }
.tpl-page .w65 { width:65%; } .tpl-page .w70 { width:70%; }
.tpl-page .w75 { width:75%; } .tpl-page .w80 { width:80%; }
.tpl-page .w85 { width:85%; } .tpl-page .w88 { width:88%; }
.tpl-page .w90 { width:90%; } .tpl-page .w95 { width:95%; }
.tpl-page[data-preview="ats"] .tpl-bar { border-radius:0; }
.tpl-page[data-preview="sidebar"] .tpl-bar.name,
.tpl-page[data-preview="sidebar"] .tpl-bar.accent { background:var(--brand); }
.tpl-page[data-preview="sidebar"] .tpl-bar.label { background:var(--brand);
  opacity:.55; }

/* ---- Login / profile picker ------------------------------------------- */
.login-wrap { max-width:560px; padding-top:10vh; padding-bottom:var(--sp-7);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.login-brand { display:block; width:198px; height:29px; background:var(--brand);
  -webkit-mask:url("/static/img/positioned-wordmark.png") no-repeat center/contain;
  mask:url("/static/img/positioned-wordmark.png") no-repeat center/contain;
  margin-bottom:var(--sp-6); }
.login-wrap .lead { margin-bottom:var(--sp-6); }
.user-grid { display:grid; width:100%;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--sp-4); margin-bottom:var(--sp-6); }
.user-grid form { display:contents; }
.user-card { display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-2); padding:var(--sp-5) var(--sp-3);
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--r-lg); cursor:pointer; font:inherit;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.user-card:hover { border-color:var(--brand); box-shadow:var(--e-1); }
.user-card:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.user-card[aria-current="true"] { border-color:var(--brand-border);
  box-shadow:0 0 0 3px var(--surface-brand-subtle); }
.user-avatar { display:grid; place-items:center; width:56px; height:56px;
  border-radius:var(--r-full); background:var(--surface-brand-subtle);
  color:var(--brand-text); font:600 24px/1 var(--font-display); }
.user-name { color:var(--text-primary); font-weight:600; overflow-wrap:anywhere; }
.user-add { display:flex; gap:var(--sp-2); width:100%; max-width:360px; }
.user-add input { flex:1; }

/* Auth forms (sign in / sign up / reset) share the login-wrap column. */
.auth-form { display:flex; flex-direction:column; gap:var(--sp-4);
  width:100%; max-width:360px; text-align:left; }
.auth-form .btn { margin-top:var(--sp-2); }
.auth-form--inline { align-items:center; text-align:center; }
.auth-links { display:flex; flex-direction:column; gap:var(--sp-2);
  margin-top:var(--sp-5); font:var(--t-small); }
.auth-links--account { flex-direction:row; align-items:center;
  gap:var(--sp-3); margin-top:var(--sp-6); }
.login-wrap .banner { width:100%; max-width:360px; }
.menu-user { color:var(--text-primary); font-weight:600; }

/* ---- Career interview ---- */
.interview-grid { display:grid; grid-template-columns:280px 1fr;
  gap:var(--sp-5); align-items:start; }
@media (max-width: 860px) { .interview-grid { grid-template-columns:1fr; } }
.agenda ul { list-style:none; margin:var(--sp-3) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-2); }
.agenda-item { display:flex; gap:var(--sp-2); align-items:baseline;
  color:var(--text-body); }
.agenda-item .agenda-mark { flex:none; width:18px; height:18px;
  display:inline-grid; place-items:center; border-radius:var(--r-full);
  border:1.5px solid var(--border-default); color:transparent;
  transform:translateY(2px); }
.agenda-item.done { color:var(--text-faint); text-decoration:line-through; }
.agenda-item.done .agenda-mark { background:var(--brand);
  border-color:var(--brand); color:var(--text-on-brand); }
.agenda form { margin-top:var(--sp-4); }
.interview-chat .chat-log { max-height:min(65vh, 640px); }

/* ---- Gap questions: the Save button tells the truth ---- */
.qa { position:relative; }
.qa .q-skip { position:absolute; top:0; right:0; }
.qa--done { opacity:.55; }
.qa--done.qa--editing { opacity:1; }
.qa--done .q-saved { position:absolute; top:0; right:0;
  display:inline-flex; gap:4px; align-items:center; color:var(--ok);
  font:var(--t-small); }

/* ---- Role direction: positions to search for ---- */
.role-list { display:grid; gap:var(--sp-2); }
.role-item, .stack .role-item { display:flex; flex-direction:row;
  gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3);
  border:1px solid var(--border-subtle); border-radius:var(--r-md);
  cursor:pointer; font-weight:400; margin:0; }
.role-item:hover { border-color:var(--border-default);
  background:var(--surface-sunken); }
.role-item input { width:auto; min-height:0; flex:none; margin-top:2px; }
.role-item:has(input:checked) { border-color:var(--brand);
  background:var(--surface-brand-subtle); }
.role-body { display:flex; flex-direction:column; gap:2px; }
.role-title { color:var(--text-primary); font-weight:600; }
.role-tag { display:inline-block; margin-left:6px; padding:1px 8px;
  border-radius:999px; background:var(--surface-sunken);
  border:1px solid var(--border-subtle); color:var(--text-muted);
  font:var(--t-small); font-weight:400; vertical-align:1px; }
#roles-more textarea { margin-top:var(--sp-2); }
#roles-more .btn { margin-top:var(--sp-2); }

/* ---- Photo crop dialog ---- */
.photo-crop { border:1px solid var(--border-default); border-radius:var(--r-lg);
  background:var(--surface-card); color:var(--text-body);
  padding:var(--sp-5); max-width:360px; }
.photo-crop::backdrop { background:rgba(0,0,0,.55); }
.photo-crop h2 { margin-top:0; }
.crop-stage { margin-top:var(--sp-3); display:grid; place-items:center; }
#crop-canvas { border-radius:var(--r-md); cursor:grab; touch-action:none;
  max-width:100%; }
#crop-canvas:active { cursor:grabbing; }
.crop-zoom { display:flex; gap:var(--sp-3); align-items:center;
  margin-top:var(--sp-3); font:var(--t-small); color:var(--text-muted); }
.crop-zoom input { flex:1; }
.crop-actions { display:flex; gap:var(--sp-2); align-items:center;
  margin-top:var(--sp-4); }

/* ---- AI usage table (Settings) ---- */
.usage-table td:nth-child(n+2), .usage-table th:nth-child(n+2)
  { text-align:right; font-variant-numeric:tabular-nums; }