/* ================================================================
   Cairn — app-specific styles
   ----------------------------------------------------------------
   styles.css and tokens.css are the brain's own files, lifted
   unchanged. Everything Cairn adds on top lives HERE so the
   lifted files can be re-synced without merge pain: the onboarding
   wizard, the Today and Plan views, the connection banner, the
   profile chip. Every colour and spacing value is a token from
   tokens.css, so the app reads as one product in both themes.
   ================================================================ */

/* ---- View containers: every #view-* needs the scroll pair ------------- */
#view-home, #view-plan, #view-network, #view-library { flex: 1; overflow-y: auto; padding: var(--view-pad, 24px); }
.fp-wrap { max-width: 1100px; margin: 0 auto; }
.fp-loading, .fp-empty, .fp-error { padding: 40px; text-align: center; color: var(--fg2); }
.fp-error { color: var(--red); }
.fp-actions { display: flex; justify-content: center; gap: var(--sp-2); }
.fp-date { font-family: var(--mono); font-size: 0.6em; color: var(--fg3); font-weight: 500; margin-left: var(--sp-2); letter-spacing: 0.04em; }
.fp-fine { color: var(--fg3); font-size: var(--text-xs); margin: var(--sp-2) 0 0; }

/* ---- Today ------------------------------------------------------------- */
.fp-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fp-card-main { grid-column: 1 / -1; }
.fp-card-title { margin: 0 0 var(--sp-2); font-size: var(--text-lg); font-weight: 600; }
.fp-body { font-size: 0.95em; line-height: 1.55; color: var(--fg); }
.fp-body code, .fp-hint code { font-family: var(--mono); font-size: 0.9em; background: var(--bg3); padding: 1px 5px; border-radius: 4px; }
.fp-code {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); overflow-x: auto;
  background: var(--bg); border: 1px solid var(--bg3); border-radius: 8px;
  font-family: var(--mono); font-size: 0.82em; line-height: 1.5;
}
.fp-hint { color: var(--fg2); font-size: var(--text-sm); margin: var(--sp-2) 0 var(--sp-3); }
.fp-textarea {
  width: 100%; box-sizing: border-box; margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px;
  font: inherit; font-size: var(--text-sm); line-height: 1.5; resize: vertical;
}
.fp-textarea:focus { outline: none; border-color: var(--accent); }
.fp-advisory {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 8px; font-size: var(--text-sm);
  background: var(--tint-accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--fg);
}
.fp-advisory.ok { background: var(--tint-green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.fp-advisory.warn { background: var(--tint-yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }

.fp-reading { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.fp-reading input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.fp-reading > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-reading-title { font-weight: 600; }
.fp-reading-title a { color: var(--fg); text-decoration: none; }
.fp-reading-title a:hover { color: var(--accent); }
.fp-reading-meta { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg3); }
.fp-reading-why { font-size: var(--text-sm); color: var(--fg2); }
.fp-reading.done .fp-reading-title { text-decoration: line-through; color: var(--fg3); }

/* ---- Plan: header + timeline + week cards ----------------------------- */
.pl-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.pl-header .up-subtitle { margin: 0 0 4px; }
.pl-profile { font-size: var(--text-sm); }
.pl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pl-header { margin-bottom: var(--sp-3); }
.pl-behind { color: var(--yellow); }
.pl-late { color: var(--fg3); }
.pl-inline { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-4); padding: 10px 12px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; font-size: var(--text-sm); color: var(--fg2); }
.pl-inline label { display: inline-flex; align-items: center; gap: 8px; }
.pl-inline input[type="date"] { background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px; padding: 6px 8px; font: inherit; }

.pl-tl { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-2); overflow-x: auto; padding-bottom: 4px; }
.pl-phases, .pl-cells, .pl-ticks { display: grid; gap: 4px; min-width: 640px; }
.pl-phase { position: relative; overflow: hidden; height: 22px; display: flex; align-items: center; padding-left: 8px; background: var(--bg3); border-radius: 6px; }
.pl-phase.on { box-shadow: inset 0 -2px 0 var(--accent); }
.pl-phase-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tint-green); }
.pl-phase-name { position: relative; font-family: var(--mono); font-size: 0.64em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); white-space: nowrap; }
.pl-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 7px 8px 6px; text-align: left;
  background: var(--bg2); border: 1px solid var(--bg3); border-radius: 8px; color: var(--fg); font: inherit; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.pl-cell:hover, .pl-cell:focus-visible { border-color: var(--accent); background: var(--accent-dim); outline: none; }
.pl-cell-n { font-family: var(--mono); font-size: 0.7em; font-weight: 600; color: var(--fg2); letter-spacing: 0.04em; }
.pl-cell-d { font-family: var(--mono); font-size: 0.62em; color: var(--fg3); }
.pl-cell-mark { font-size: 0.8em; line-height: 1; height: 0.9em; color: var(--fg3); }
.pl-cell-t { font-size: 0.68em; color: var(--fg3); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cell.pl-done { background: var(--tint-green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.pl-cell.pl-done .pl-cell-mark { color: var(--green); }
.pl-cell.pl-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pl-cell.pl-now .pl-cell-mark, .pl-cell.pl-now .pl-cell-n { color: var(--accent); }
.pl-cell.pl-past { border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.pl-cell.pl-block { background: repeating-linear-gradient(135deg, var(--bg3) 0 5px, var(--bg2) 5px 10px); color: var(--fg3); }
.pl-cell.pl-today::after { content: "today"; position: absolute; }
.pl-cell.pl-today { position: relative; }
.pl-cell.pl-today::after { top: -1px; right: 6px; font-family: var(--mono); font-size: 0.58em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pl-tick-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-tick { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--yellow); font: inherit; font-size: 0.66em; text-align: left; }
.pl-tick i { flex: none; width: 2px; height: 10px; background: var(--yellow); border-radius: 1px; }
.pl-tick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tick-past { color: var(--fg3); }
.pl-tick-past i { background: var(--fg3); }
button.pl-tick { cursor: pointer; }
button.pl-tick:hover span, button.pl-tick:focus-visible span { text-decoration: underline; color: var(--accent); }

.pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
  padding: 12px 14px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 12px; transition: box-shadow 0.4s, border-color 0.2s;
}
.pl-card.pl-card-now { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pl-card.pl-done, .pl-card.pl-covered { opacity: 0.78; }
.pl-card.pl-done .pl-title, .pl-card.pl-covered .pl-title { color: var(--fg2); }
.pl-card.pl-block { background: repeating-linear-gradient(135deg, var(--bg3) 0 6px, var(--bg2) 6px 12px); }
.pl-card.pl-past { border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.pl-flash { box-shadow: 0 0 0 3px var(--accent) !important; }
.pl-card-side { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.pl-card-n { font-family: var(--mono); font-size: var(--text-sm); font-weight: 700; color: var(--fg); }
.pl-card-now .pl-card-n { color: var(--accent); }
.pl-card-dates { font-family: var(--mono); font-size: 0.64em; color: var(--fg3); letter-spacing: 0.01em; line-height: 1.35; white-space: nowrap; }
.pl-card-phase { font-family: var(--mono); font-size: 0.62em; color: var(--fg3); letter-spacing: 0.08em; }
.pl-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-del { font-size: var(--text-sm); color: var(--fg2); }
.pl-evidence { font-size: var(--text-sm); color: var(--green); }
.pl-evidence a { color: var(--green); }
.pl-evidence small { color: var(--fg3); }
.pl-dues { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.pl-due { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--yellow); font: inherit; font-size: var(--text-xs); text-align: left; }
.pl-due i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
.pl-due small { color: var(--fg3); }
button.pl-due { cursor: pointer; }
button.pl-due:hover { text-decoration: underline; }
.pl-card-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pl-act { font: inherit; font-size: var(--text-xs); padding: 6px 9px; border-radius: 7px; border: 1px solid var(--bg3); background: var(--bg); color: var(--fg2); cursor: pointer; white-space: nowrap; }
.pl-act:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.pl-act:disabled { opacity: 0.35; cursor: default; }
.pl-act-primary { background: var(--accent); color: var(--accent-ink, #06231f); border-color: var(--accent); font-weight: 600; }
.pl-act-primary:hover { background: var(--accent2); }
.pl-edit, .pl-tick-form { display: flex; flex-direction: column; gap: 8px; }
.pl-edit label, .pl-tick-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-xs); color: var(--fg3); }
.pl-edit input, .pl-tick-form input { background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: var(--text-sm); }
.pl-edit input:focus, .pl-tick-form input:focus { outline: none; border-color: var(--accent); }

/* ---- Library: readings + resources by step ---------------------------- */
.lb-readings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-reading { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; }
.lb-reading.done { opacity: 0.7; }
.lb-reading.done .lb-reading-title { text-decoration: line-through; text-decoration-color: var(--fg3); }
.lb-check { padding-top: 2px; }
.lb-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.lb-reading-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-reading-title { font-weight: 600; }
.lb-reading-title a { color: var(--fg); text-decoration: none; }
.lb-reading-title a:hover { color: var(--accent); }
.lb-reading-meta { font-family: var(--mono); font-size: 0.68em; color: var(--fg3); letter-spacing: 0.02em; }
.lb-reading-why { font-size: var(--text-sm); color: var(--fg2); }
.lb-notes { margin-top: 6px; width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: var(--text-sm); resize: vertical; }
.lb-notes:focus { outline: none; border-color: var(--accent); }
.lb-notes-view { margin-top: 4px; font-size: var(--text-sm); color: var(--fg2); border-left: 2px solid var(--bg3); padding-left: 8px; white-space: pre-wrap; cursor: text; }
.lb-tiers { display: flex; flex-direction: column; gap: var(--sp-4); }
.lb-tier-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.lb-tier-head b { font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg2); }
.lb-tier-head span { font-size: var(--text-xs); color: var(--fg3); }
.lb-tier { display: flex; flex-direction: column; }
.lb-tier > .lb-node { margin-bottom: 8px; }
.lb-node { padding: 10px 12px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; }
.lb-node.done { opacity: 0.75; }
.lb-node-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 6px; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.lb-node-head b { font-weight: 600; }
.lb-node-head small { color: var(--fg3); font-size: var(--text-xs); margin-left: auto; white-space: nowrap; }
.lb-node-head:hover b { color: var(--accent); }
.lb-node .st-res { margin: 0; }

/* ---- Plan: time off and courses --------------------------- */
.fp-commit-list { margin: 0 0 var(--sp-3); padding-left: 18px; font-size: var(--text-sm); color: var(--fg2); }
.fp-commit-form { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg2); }
.fp-commit-form label { display: inline-flex; align-items: center; gap: 6px; }
.fp-commit-form input[type="number"], .fp-commit-form input[type="text"] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px; padding: 6px 8px; font: inherit;
}
.fp-commit-form input[type="number"] { width: 64px; }
.fp-commit-form input[type="text"] { width: 130px; }
.fp-commit-form input:focus { outline: none; border-color: var(--accent); }
.fp-check input { accent-color: var(--accent); }

.fp-tblwrap { overflow-x: auto; }
.fp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fp-table th { text-align: left; font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); padding: 6px 8px; border-bottom: 1px solid var(--bg3); }
.fp-table td { padding: 8px; border-bottom: 1px solid var(--bg3); vertical-align: top; }
.fp-soon { color: var(--yellow); font-weight: 600; }

/* ---- Connection banner ------------------------------------------------ */
.fp-conn {
  position: fixed; left: 50%; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 900; display: flex; gap: var(--sp-3); align-items: center;
  padding: 10px 14px; border-radius: 12px; background: var(--bg2); color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); box-shadow: var(--shadow);
  font-size: var(--text-sm); max-width: calc(100vw - 32px);
}
.fp-conn[hidden] { display: none; }
.fp-conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.fp-conn button {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 7px;
  padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
@media (max-width: 768px) { .fp-conn { bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* ---- Sidebar profile chip -------------------------------------------- */
.sidebar-profile { flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--bg3); }
.fp-profile {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  background: none; border: none; color: var(--fg2); cursor: pointer; text-align: left;
  padding: 0; font: inherit; min-width: 0;
}
.fp-profile:hover { color: var(--accent); }
.fp-profile-ava {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 0.72em; font-weight: 700;
}
.fp-profile-text { display: flex; flex-direction: column; min-width: 0; }
.fp-profile-text b { font-size: 0.8em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-profile-text span { font-size: 0.7em; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sidebar="collapsed"] .fp-profile-text { display: none; }

/* ---- Onboarding wizard ----------------------------------------------- */
body.onboarding-open { overflow: hidden; }
#onboarding {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--fg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#onboarding[hidden] { display: none; }
.ob-shell {
  min-height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.ob-hero {
  padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5);
  background:
    radial-gradient(900px 500px at -10% -10%, var(--accent-dim), transparent 60%),
    var(--bg2);
  border-right: 1px solid var(--bg3);
}
/* ---- Brand lockup (Cairn) ------------------------------------------
   One markup shape everywhere: <span class="brand"> = inline mark SVG +
   wordmark. The mark paints with --accent / --accent-ink and the wordmark
   with currentColor, so the same markup is right in the sidebar, the mobile
   header, the wizard hero and the invite gate, in both themes. Sizes come
   from --brand-size on the container. */
.brand { --brand-size: 1.35em; display: inline-flex; align-items: center; gap: 0.45em; color: inherit; line-height: 1; }
/* The brand is a link to #welcome (the front page) — styled as the wordmark, not as a link. */
a.brand { text-decoration: none; cursor: pointer; border-radius: 8px; transition: opacity .15s; }
a.brand:hover { opacity: .78; }
a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand-mark { width: var(--brand-size); height: var(--brand-size); flex: none; display: block; border-radius: 22%; }
.brand-word { font-family: var(--mono); font-weight: 700; font-size: var(--brand-size); letter-spacing: 0.02em; }
.sidebar-header h1 .brand { --brand-size: 1.15em; }
.mobile-header .brand { --brand-size: 1.2em; }
.ob-brand { --brand-size: 1.6em; display: inline-flex; align-items: center; gap: 0.45em; color: var(--fg); line-height: 1; }
.ob-headline { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7em, 3.4vw, 2.6em); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.ob-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); color: var(--fg2); font-size: 0.95em; line-height: 1.5; }
.ob-props b { color: var(--fg); }
.ob-fine { color: var(--fg3); font-size: var(--text-sm); margin: 0; }

.ob-panel { padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); max-width: 640px; }
.ob-steps { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; gap: var(--sp-2); }
.ob-steps li { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.72em; color: var(--fg3); background: var(--bg2); border: 1px solid var(--bg3); }
.ob-steps li.current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.ob-steps li.done { color: var(--accent); border-color: var(--accent); }
.ob-eyebrow { font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.ob-title { margin: 0; font-size: clamp(1.3em, 2.4vw, 1.7em); font-weight: 600; letter-spacing: -0.01em; }
.ob-help { margin: 0; color: var(--fg2); font-size: 0.95em; }
.ob-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.ob-opt {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 44px;
  border: 1px solid var(--bg3); border-radius: 12px; background: var(--bg2); cursor: pointer;
  transition: border-color 0.12s, background 0.12s; min-height: var(--touch);
}
.ob-opt::before {
  content: ""; position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--fg3); box-sizing: border-box;
}
.ob-opt.on { border-color: var(--accent); background: var(--accent-dim); }
.ob-opt.on::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.ob-opt:hover { border-color: var(--accent); }
.ob-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ob-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-opt-label { font-weight: 600; }
.ob-opt-sub { font-size: var(--text-sm); color: var(--fg2); }
.ob-warn { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); color: var(--fg); background: var(--tint-yellow); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); border-radius: 8px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.ob-btn { font: inherit; font-weight: 600; border-radius: 9px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; min-height: var(--touch); }
.ob-btn-primary { background: var(--accent); color: var(--accent-ink); }
.ob-btn-primary:hover { background: var(--accent2); }
.ob-btn-primary:disabled { opacity: 0.6; cursor: default; }
.ob-btn-ghost { background: transparent; color: var(--fg2); border-color: var(--bg3); }
.ob-btn-ghost:hover { color: var(--fg); border-color: var(--fg3); }
.ob-note { margin: 0; min-height: 1.4em; color: var(--fg3); font-size: var(--text-sm); }

/* Invite-only / unreachable states share the wizard's panel styling. */
.ob-gate { display: grid; place-items: center; min-height: 100%; padding: var(--sp-5); text-align: center; }
.ob-gate .ob-brand { justify-content: center; margin-bottom: var(--sp-3); }
.ob-gate p { color: var(--fg2); max-width: 420px; margin: var(--sp-2) auto; }

@media (max-width: 900px) {
  .ob-shell { grid-template-columns: 1fr; }
  .ob-hero { border-right: none; border-bottom: 1px solid var(--bg3); gap: var(--sp-3); padding: 24px 20px; }
  .ob-props { display: none; }
  .ob-panel { padding: 20px 20px 40px; max-width: none; justify-content: flex-start; }
}

/* ---- Upskill: folded phases (local addition) --------------------------- */
details.up-phase > summary { list-style: none; cursor: pointer; }
details.up-phase > summary::-webkit-details-marker { display: none; }
details.up-phase > summary h4 { display: inline; }
details.up-phase > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--fg3); font-size: 0.85em; }
details.up-phase[open] > summary::before { content: "▾"; }

/* ---- Network -------------------------------------------------------------- */
.nw-hint { color: var(--fg3); font-weight: normal; text-transform: none; letter-spacing: 0; margin-left: var(--sp-2); font-family: var(--font, inherit); font-size: 0.95em; }
.nw-charts { display: grid; gap: var(--sp-3); grid-template-columns: 1.15fr 1fr; margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .nw-charts { grid-template-columns: 1fr; } }
.nw-w-close { --w: var(--green); }
.nw-w-warm { --w: var(--yellow); }
.nw-w-cool { --w: var(--accent); }
.nw-w-dormant { --w: var(--fg3); }
.nw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--w, var(--fg3)); margin-right: 5px; vertical-align: middle; }
.nw-orbit { display: flex; flex-direction: column; gap: 7px; }
.nw-orbit-row { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: var(--sp-2); background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.nw-orbit-row:hover .nw-orbit-label { color: var(--accent); }
.nw-orbit-label { font-size: var(--text-sm); color: var(--fg2); white-space: nowrap; }
.nw-orbit-bar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; min-width: 8px; gap: 1px; }
.nw-seg { display: block; background: var(--w); opacity: 0.9; }
.nw-orbit-n { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg3); text-align: right; }
.nw-legend { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--fg3); flex-wrap: wrap; }
.nw-rhythm { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 14px; }
.nw-rhythm-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.nw-rhythm-n { font-family: var(--mono); font-size: 0.66em; color: var(--fg3); height: 14px; line-height: 14px; }
.nw-rhythm-bar { width: 100%; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 55%, var(--bg3)); transition: height 0.2s; }
.nw-rhythm-now { background: var(--accent); }
.nw-rhythm-label { font-family: var(--mono); font-size: 0.62em; color: var(--fg3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.nw-due { display: flex; flex-direction: column; gap: 6px; }
.nw-due-row { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3); align-items: center; width: 100%; text-align: left; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 10px; color: inherit; font: inherit; cursor: pointer; }
.nw-due-row:hover { border-color: var(--accent); border-left-color: var(--yellow); }
.nw-due-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nw-due-name { font-weight: 600; }
.nw-due-org { font-weight: 400; color: var(--fg3); font-size: var(--text-sm); margin-left: 6px; }
.nw-due-step { font-size: var(--text-sm); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-due-when { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--text-xs); color: var(--fg3); white-space: nowrap; }
.nw-due-when b { color: var(--yellow); font-family: var(--mono); font-size: 1.05em; }
.nw-toolbar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.nw-search { width: 100%; box-sizing: border-box; padding: 9px 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 9px; font: inherit; font-size: var(--text-sm); }
.nw-search:focus { outline: none; border-color: var(--accent); }
.nw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-chip { background: var(--bg2); color: var(--fg2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: var(--text-xs); cursor: pointer; }
.nw-chip b { font-family: var(--mono); font-weight: 600; color: var(--fg3); }
.nw-chip:hover { border-color: var(--accent); color: var(--fg); }
.nw-chip-on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.nw-chip-on b { color: var(--accent); }
.nw-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nw-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.nw-card-due { border-left: 3px solid var(--yellow); }
.nw-card-open { grid-column: 1 / -1; }
.nw-card-head { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3); align-items: center; width: 100%; text-align: left; padding: 10px 12px; background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
.nw-card-head:hover .nw-card-name { color: var(--accent); }
.nw-card-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.nw-card-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-card-org { font-size: var(--text-xs); color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.nw-card-when { font-family: var(--mono); font-size: 0.66em; color: var(--fg3); }
.nw-card-body { padding: 4px 14px 12px 58px; font-size: var(--text-sm); color: var(--fg2); border-top: 1px solid var(--border); }
.nw-card-body p { margin: 8px 0 0; line-height: 1.5; }
.nw-k { display: block; font-family: var(--mono); font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 1px; }
.nw-next { color: var(--fg); }
.nw-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.nw-topics { display: flex; gap: 5px; flex-wrap: wrap; }
.nw-pill { display: inline-flex; align-items: center; font-size: 0.68em; padding: 2px 8px; border-radius: 999px; background: var(--bg3); color: var(--fg2); white-space: nowrap; }
.nw-pill-circle { font-family: var(--mono); letter-spacing: 0.04em; }
.nw-pill-topic { background: var(--accent-dim); color: var(--accent); }
.nw-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.72em; font-weight: 700; color: var(--fg); background: var(--bg3); flex-shrink: 0; }
.nw-c-mentor-advisor { background: color-mix(in srgb, #a78bfa 35%, var(--bg3)); }
.nw-c-founder-peer { background: color-mix(in srgb, var(--green) 35%, var(--bg3)); }
.nw-c-academic { background: color-mix(in srgb, #f472b6 35%, var(--bg3)); }
.nw-c-colleague { background: color-mix(in srgb, #60a5fa 35%, var(--bg3)); }
.nw-c-recruiter { background: color-mix(in srgb, #fb923c 35%, var(--bg3)); }
.nw-c-investor { background: color-mix(in srgb, var(--yellow) 35%, var(--bg3)); }
.nw-c-friend { background: color-mix(in srgb, var(--red) 35%, var(--bg3)); }
.nw-sample { color: var(--fg3); margin-left: 4px; font-weight: 700; cursor: help; }
@media (max-width: 768px) { .nw-card-open { grid-column: auto; } .nw-card-body { padding-left: 14px; } .nw-orbit-row { grid-template-columns: minmax(92px, auto) 1fr 24px; } }

/* ---- Skill tree ----------------------------------------------------------
   The field as a game map. Cards are positioned by js/views/skilltree.js
   (absolute, per tier row); the connectors are one SVG underlay. Under
   660px the same cards stack into tier lists. Colour meaning: green = done,
   accent = unlocked / open, muted = locked, yellow = closing soon. */
#view-skilltree { flex: 1; overflow-y: auto; padding: var(--view-pad, 24px); }
.st-wrap { max-width: 1240px; }
.st-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.st-header-actions .up-btn { display: inline-flex; align-items: center; gap: 6px; }
.st-header-actions svg { width: 15px; height: 15px; }
.st-of { color: var(--fg3); font-size: 0.6em; font-weight: 500; }

.st-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.st-path {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center;
  padding: 10px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--fg2); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s;
}
.st-path:hover { border-color: var(--accent); color: var(--fg); }
.st-path.on { border-color: var(--accent); background: var(--accent-dim); color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.st-path-label { font-weight: 600; }
.st-path-n { grid-row: 1; grid-column: 2; font-family: var(--mono); font-size: var(--text-xs); color: var(--fg3); }
.st-path-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.st-path-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .3s; }
.st-stats { margin-bottom: var(--sp-3); }

.st-watch-open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.st-watch-open svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.st-link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.st-link:hover { color: var(--fg); }

.st-legend { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--fg3); margin: 0 0 var(--sp-3); }
.st-legend span { display: inline-flex; align-items: center; gap: 5px; }
.st-lg { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg3); color: var(--fg3); }
.st-lg svg { width: 10px; height: 10px; }
.st-lg-done { background: var(--green); color: var(--accent-ink); }
.st-lg-avail { background: var(--accent-dim); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.st-lg-open { background: var(--accent); color: var(--accent-ink); }
.st-lg-expected { border: 1px dashed var(--fg3); background: transparent; }
.st-lg-skipped { background: transparent; color: var(--fg2); box-shadow: 0 0 0 1px var(--fg3); }
.st-legend-hint { margin-left: auto; }

/* Canvas */
.st-canvas { position: relative; min-height: 200px; }
.st-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.st-canvas:not(.st-list) .st-node { z-index: 1; }
.st-edge { fill: none; stroke-width: 2; stroke-linecap: round; transition: stroke .15s, opacity .15s; }
.st-edge-done { stroke: var(--green); opacity: .8; }
.st-edge-lit { stroke: var(--accent); opacity: .85; }
.st-edge-dim { stroke: var(--fg3); stroke-dasharray: 5 6; opacity: .45; }
.st-edge-skip { stroke: var(--accent); stroke-dasharray: 2 5; opacity: .7; }
.st-edge-hi { stroke: var(--accent); stroke-dasharray: none; opacity: 1; stroke-width: 3; }
/* The road view draws only the edges that matter; the rest wait for a hover or a click. */
.st-edge.st-edge-hidden { display: none; }
.st-edge.st-edge-hidden.st-edge-hi { display: block; }
/* The dot at the child end: the same colour as its line, no stroke. */
.st-edge-end { stroke: none; fill: var(--fg3); }
.st-edge-end.st-edge-done { fill: var(--green); }
.st-edge-end.st-edge-lit, .st-edge-end.st-edge-skip, .st-edge-end.st-edge-hi { fill: var(--accent); }
/* One card in focus (hover or click): everything not touching it fades. */
.st-canvas.st-focus .st-edge:not(.st-edge-hi) { opacity: .12; }
.st-canvas.st-focus .st-edge-end:not(.st-edge-hi) { opacity: .12; }
.st-legend-edge i.st-lg-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--fg3); position: relative; }
.st-legend-edge i.st-lg-line::after { content: ""; position: absolute; right: -3px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--fg3); }
.st-tier-label { display: flex; flex-direction: column; gap: 3px; }
.st-tier-label b { font-family: var(--mono); font-size: 0.68em; letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); font-weight: 600; }
.st-tier-label span { font-size: 0.72em; color: var(--fg3); line-height: 1.35; }
.st-tier-abs { position: absolute; left: 0; width: 84px; justify-content: center; padding-right: 8px; border-right: 1px solid var(--border); }

.st-node {
  position: absolute; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; text-align: left;
  padding: 12px 14px 12px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px;
  color: var(--fg); font: inherit; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.st-node:hover { transform: translateY(-2px); border-color: var(--accent); }
.st-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-node-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 22px; }
.st-tile {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  border: 1.5px solid var(--fg); font-family: var(--mono); font-weight: 700; font-size: 0.85em; letter-spacing: .02em;
}
.st-title { font-weight: 600; font-size: 0.98em; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; }
.st-node-sub { font-size: 0.7em; color: var(--fg3); font-family: var(--mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.st-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg3); color: var(--fg3); }
.st-dot svg { width: 12px; height: 12px; }
.st-dot-done { background: var(--green); color: var(--accent-ink); }
.st-dot-open { background: var(--bg); border: 1.5px solid var(--border); }
.st-dot-next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.st-av { font-size: 0.74em; color: var(--fg3); line-height: 1.3; }
.st-av b { font-weight: 700; }
.st-av-lit { color: var(--accent); }
.st-av-hot { color: var(--yellow); }
.st-av-roll { color: var(--green); }
.st-needs { font-size: 0.7em; color: var(--fg3); font-style: italic; }
.st-badge {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg3); color: var(--fg3); border: 2px solid var(--bg); box-shadow: var(--shadow);
}
.st-badge svg { width: 14px; height: 14px; }
.st-badge-done { background: var(--green); color: var(--accent-ink); }
.st-badge-avail { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.st-badge-open { background: var(--accent); color: var(--accent-ink); animation: st-pulse 1.8s ease-out infinite; }
.st-badge-prog { background: var(--yellow); color: var(--accent-ink); }
.st-badge-skipped { background: var(--bg2); color: var(--fg2); border-color: var(--fg3); border-style: dashed; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

.st-done { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.st-done .st-tile { border-color: var(--green); color: var(--green); }
.st-available { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.st-in-progress, .st-applied { border-color: color-mix(in srgb, var(--yellow) 55%, var(--border)); }
.st-skipped { opacity: .7; border-style: dashed; border-color: color-mix(in srgb, var(--fg3) 70%, var(--border)); }
.st-skipped .st-tile { border-color: var(--fg3); color: var(--fg3); text-decoration: line-through; }
.st-skipped:hover { opacity: 1; }
.st-locked { opacity: .62; }
.st-locked .st-tile { border-color: var(--fg3); color: var(--fg3); }
.st-locked:hover { opacity: .9; }
.st-av-open, .st-av-closing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent); opacity: 1; }
.st-av-closing { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 6px 22px color-mix(in srgb, var(--yellow) 22%, transparent); }
.st-av-closing .st-badge-open { background: var(--yellow); }
.st-custom { border-style: dashed; }
.st-selected { border-color: var(--accent) !important; transform: translateY(-2px); box-shadow: 0 0 0 3px var(--accent-dim), var(--shadow); opacity: 1; }
.st-related { opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* List mode (narrow) */
.st-canvas.st-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.st-tier-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.st-tier-list .st-tier-label { padding-left: 2px; }
.st-tier-nodes { display: flex; flex-direction: column; gap: 10px; }
.st-list .st-node { position: relative; width: 100%; }

/* Discovered */
.st-discovered { margin-top: var(--sp-5); }
.st-disc-list { display: flex; flex-direction: column; gap: 8px; }
.st-disc { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: center; padding: 10px 12px; background: var(--bg2); border: 1px dashed var(--border); border-radius: 10px; }
.st-disc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-disc-name { font-weight: 600; }
.st-disc-meta { font-size: var(--text-xs); color: var(--fg3); }
.st-disc-add { white-space: nowrap; }
@media (max-width: 700px) { .st-disc { grid-template-columns: 1fr; } }

/* Detail modal */
.st-modal .modal-box { max-height: 90vh; overflow-y: auto; }
.st-detail { display: flex; flex-direction: column; gap: var(--sp-3); }
.st-detail .fp-advisory { margin-top: 0; }
.st-detail .fp-advisory svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.st-blurb { margin: 0; color: var(--fg2); line-height: 1.5; }
.st-detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4); }
@media (max-width: 700px) { .st-detail-grid { grid-template-columns: 1fr; } }
.st-detail-block { margin-bottom: var(--sp-3); }
.st-k { display: block; font-family: var(--mono); font-size: 0.68em; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 4px; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-steps label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--text-sm); }
.st-steps input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--green); flex: none; }
.st-steps input:checked + span { color: var(--fg3); text-decoration: line-through; }
.st-status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.st-status { font: inherit; font-size: var(--text-xs); padding: 6px 11px; border-radius: 999px; background: var(--bg3); color: var(--fg2); border: 1px solid var(--border); cursor: pointer; }
.st-status:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.st-status.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.st-status:disabled { opacity: .45; cursor: default; }
.st-status-skip { border-style: dashed; display: inline-flex; align-items: center; gap: 4px; }
.st-status-skip svg { width: 11px; height: 11px; }
.st-status-skip.on { background: var(--fg2); border-color: var(--fg2); color: var(--bg); }
.st-req { display: flex; gap: 6px; flex-wrap: wrap; }
.st-req-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--text-xs); padding: 5px 10px; border-radius: 999px; background: var(--bg2); color: var(--fg2); border: 1px solid var(--border); cursor: pointer; }
.st-req-chip svg { width: 11px; height: 11px; }
.st-req-chip.st-done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.st-req-chip.st-skipped { border-style: dashed; text-decoration: line-through; text-decoration-color: var(--fg3); }
.st-req-chip:hover { border-color: var(--accent); color: var(--fg); }
.st-avail { padding: var(--sp-3); border-radius: 10px; border: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.st-avail-open { border-color: var(--accent); background: var(--accent-dim); }
.st-avail-roll { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.st-avail-exp { border-style: dashed; }
.st-avail-head { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-sm); line-height: 1.45; }
.st-avail-head svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }
.st-avail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; font-size: var(--text-xs); color: var(--fg2); }
.st-avail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-watch { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--text-xs); padding: 7px 11px; border-radius: 8px; background: transparent; color: var(--fg2); border: 1px solid var(--border); cursor: pointer; }
.st-watch svg { width: 13px; height: 13px; }
.st-watch:hover { border-color: var(--accent); color: var(--fg); }
.st-watch.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.st-book { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); }
.st-book input { width: 56px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 6px; padding: 5px 7px; font: inherit; margin-left: 4px; }
.st-detail-links { display: flex; gap: 8px; flex-wrap: wrap; }
.st-danger { color: var(--red); }
.st-add { display: flex; flex-direction: column; gap: 10px; }
.st-add label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--fg2); }
.st-add input, .st-add select { background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 7px; padding: 8px 10px; font: inherit; }
.st-add input:focus, .st-add select:focus { outline: none; border-color: var(--accent); }
.st-add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.st-add p { margin: 0; }

/* Today: the tree card */
.st-today-next { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0; }
.st-today-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.st-today-row:hover { border-color: var(--accent); }
.st-today-row .st-tile { width: 28px; height: 28px; font-size: 0.72em; }
.st-today-row b { font-weight: 600; }
.st-today-row small { display: block; font-size: var(--text-xs); color: var(--fg3); }
.st-today-row.st-hot { border-color: var(--yellow); }

@media (max-width: 768px) {
  .st-paths { grid-template-columns: 1fr; }
  .st-legend-hint { margin-left: 0; width: 100%; }
}

/* ================================================================
   2026-09-09 — Home, fit, priorities, votes, resources, map, paths
   ================================================================ */

/* ---- Home: agenda list ------------------------------- */
.hm-list { display: flex; flex-direction: column; gap: 6px; }
.hm-item {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px;
  color: var(--fg); font: inherit; cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.hm-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.hm-item.hm-hot { border-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
.hm-kind { font-family: var(--mono); font-size: 0.66em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); padding: 3px 7px; border-radius: 5px; background: var(--bg3); text-align: center; }
.hm-k-application .hm-kind { color: var(--yellow); background: var(--tint-yellow); }
.hm-k-priority .hm-kind { color: var(--accent); background: var(--tint-accent); }
.hm-k-deliverable .hm-kind { color: var(--green); background: var(--tint-green); }
.hm-k-practice .hm-kind { color: var(--fg2); background: var(--bg3); }
.hm-k-fit .hm-kind { color: var(--purple, #a78bfa); background: color-mix(in srgb, var(--purple, #a78bfa) 18%, transparent); }
.hm-k-commitment .hm-kind { color: var(--fg2); background: var(--bg3); }
.hm-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-item-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-item-main small { color: var(--fg3); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-when { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg2); white-space: nowrap; }
.hm-hot .hm-when { color: var(--yellow); font-weight: 600; }

/* ---- Home: fit card --------------------------------------------------- */
.hm-fit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-4); }
.hm-shares, .ob-shares { display: flex; flex-direction: column; gap: 8px; margin: var(--sp-2) 0; }
.hm-share, .ob-share { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--fg2); }
.hm-share.on, .ob-share.on { color: var(--fg); font-weight: 600; }
.hm-share-bar, .ob-share-bar { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.hm-share-bar i, .ob-share-bar i { display: block; height: 100%; background: var(--fg3); border-radius: 4px; }
.hm-share.on .hm-share-bar i, .ob-share.on .ob-share-bar i { background: var(--accent); }
.hm-share.cur .hm-share-label { text-decoration: underline dotted; text-underline-offset: 3px; }
.hm-share-n, .ob-share-n { font-family: var(--mono); font-size: var(--text-xs); text-align: right; }
.hm-rationale, .ob-cv-signals, .hm-done { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: var(--text-sm); color: var(--fg2); display: flex; flex-direction: column; gap: 3px; }
.hm-done li { list-style: none; margin-left: -18px; }
.hm-done-v { display: inline-block; width: 1.4em; }
.hm-trials { display: flex; flex-direction: column; gap: var(--sp-2); }
.hm-trial { padding: 12px 14px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.hm-trial-head { display: flex; justify-content: space-between; align-items: center; }
.hm-trial p { margin: 0; font-size: var(--text-sm); color: var(--fg2); line-height: 1.5; }
.hm-trial-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.hm-verdict { display: flex; gap: 4px; }
.hm-v { font: inherit; font-size: var(--text-xs); padding: 6px 9px; border-radius: 7px; border: 1px solid var(--bg3); background: var(--bg); color: var(--fg2); cursor: pointer; }
.hm-v:hover { border-color: var(--accent); color: var(--fg); }

/* ---- Home: jobs -------------------------------------------------------- */
.hm-jobs { display: flex; flex-direction: column; gap: 6px; }
.hm-job { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--bg2); border: 1px solid var(--bg3); border-radius: 9px; color: var(--fg); text-decoration: none; }
.hm-job:hover { border-color: var(--accent); }
.hm-job b { font-size: var(--text-sm); }
.hm-job small { color: var(--fg3); font-size: var(--text-xs); }
.hm-job-when { font-family: var(--mono); font-size: 0.7em; color: var(--fg3); }
.hm-hot-text { color: var(--yellow); }

/* ---- Skill tree: priorities, community, resources --------------------- */
/* Target role — the chain to one destination, and everything else dimmed. */
.st-target { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 10px; font-size: var(--text-sm); background: var(--tint-accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.st-target-empty { background: var(--bg2); border-color: var(--line); }
.st-target > svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.st-target-n { font-size: var(--text-base); }
.st-target-pick { margin-left: auto; max-width: 100%; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--text-sm); }
.st-target-toggle { padding: 4px 10px; font-size: var(--text-xs); }
.st-node.st-off-target { opacity: 1; filter: saturate(.15); background: color-mix(in srgb, var(--bg2) 55%, var(--bg)); border-color: color-mix(in srgb, var(--border) 60%, transparent); box-shadow: none; color: var(--fg3); }
.st-node.st-off-target .st-title, .st-node.st-off-target .st-tile { color: var(--fg3); border-color: var(--fg3); }
.st-node.st-off-target .st-badge, .st-node.st-off-target .st-dot { opacity: .55; }
.st-node.st-off-target:hover, .st-node.st-off-target:focus-visible, .st-node.st-off-target.st-related, .st-node.st-off-target.st-selected { filter: none; background: var(--bg2); border-color: var(--accent); color: var(--fg); box-shadow: var(--shadow); }
.st-node.st-off-target:hover .st-title, .st-node.st-off-target.st-related .st-title, .st-node.st-off-target.st-selected .st-title { color: var(--fg); }
.st-node.st-off-target:hover .st-tile, .st-node.st-off-target.st-related .st-tile, .st-node.st-off-target.st-selected .st-tile { color: var(--fg); border-color: var(--fg); }
.st-node.st-on-target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.st-target-btn.on { border-color: var(--accent); color: var(--accent); }
.st-add-check { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.st-target-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.st-target-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-size: var(--text-xs); }
.st-target-chip small { color: var(--fg3); font-family: var(--mono); }
.st-target-drop { border: 0; background: transparent; color: var(--fg3); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: 1; padding: 0 4px; border-radius: 50%; }
.st-target-drop:hover, .st-target-drop:focus-visible { color: var(--red); background: var(--bg2); }
.st-target-drop-one { font-size: var(--text-xs); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); }
/* A junction: a step on the way to more than one of the chosen roles. */
.st-node.st-shared { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent); }
.st-junction { position: absolute; right: -8px; bottom: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: var(--text-xs); font-weight: 700; display: grid; place-items: center; }
.st-target-serves { font-size: var(--text-xs); color: var(--fg2); }
@media (max-width: 660px) { .st-target-pick { margin-left: 0; width: 100%; } }

.st-prios { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: 8px; font-size: var(--text-sm); background: var(--tint-accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-prios svg { width: 14px; height: 14px; color: var(--accent); }
.st-lg-prio { color: var(--accent); }
.st-node.st-prio { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.st-star { position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.st-star svg { width: 12px; height: 12px; }
.st-community { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-family: var(--mono); font-size: 0.64em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.st-community svg { width: 11px; height: 11px; }
.st-community-earlier { color: var(--green); }
.st-community-later { color: var(--yellow); }
.st-prio-btn.on { border-color: var(--accent); color: var(--accent); }
.st-vote-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.st-vote { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--text-xs); padding: 6px 10px; border-radius: 7px; border: 1px solid var(--bg3); background: var(--bg2); color: var(--fg2); cursor: pointer; }
.st-vote svg { width: 13px; height: 13px; }
.st-vote b { font-family: var(--mono); font-weight: 600; color: var(--fg); }
.st-vote:hover { border-color: var(--accent); color: var(--fg); }
.st-vote.on { border-color: var(--accent); background: var(--accent-dim); color: var(--fg); }
.st-res { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st-res a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--bg3); background: var(--bg2); color: var(--fg); text-decoration: none; font-size: var(--text-sm); }
.st-res a:hover { border-color: var(--accent); }
.st-res-kind { font-family: var(--mono); font-size: 0.64em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.st-res b { font-weight: 600; display: block; }
.st-res small { color: var(--fg3); font-size: var(--text-xs); display: block; grid-column: 2; }
.st-today-row.st-prio { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- Onboarding: CV, probe, result ------------------------------------ */
.ob-cv { display: flex; flex-direction: column; gap: var(--sp-3); }
.ob-drop { display: flex; align-items: center; gap: var(--sp-3); padding: 18px; border: 2px dashed var(--bg3); border-radius: 12px; background: var(--bg2); cursor: pointer; color: var(--fg2); transition: border-color 0.12s, background 0.12s; }
.ob-drop:hover, .ob-drop.over { border-color: var(--accent); background: var(--accent-dim); }
.ob-drop.busy { opacity: 0.7; cursor: progress; }
.ob-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ob-drop-icon { color: var(--accent); flex: none; }
.ob-drop-text { display: flex; flex-direction: column; gap: 2px; }
.ob-drop-text b { color: var(--fg); }
.ob-drop-text span { font-size: var(--text-sm); }
.ob-paste summary { cursor: pointer; color: var(--fg2); font-size: var(--text-sm); }
.ob-paste textarea { width: 100%; box-sizing: border-box; margin: var(--sp-2) 0; padding: var(--sp-2); background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px; font: inherit; font-size: var(--text-sm); }
.ob-cv-done { padding: 14px 16px; background: var(--tint-green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: 12px; }
.ob-cv-file { display: flex; gap: 8px; align-items: baseline; }
.ob-cv-ok { color: var(--green); font-size: var(--text-sm); }
.ob-cv-remove { align-self: flex-start; margin-top: var(--sp-2); }
.ob-cvhint { margin: 0; padding: 8px 12px; background: var(--tint-accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px; font-size: var(--text-sm); color: var(--fg2); }
.ob-cvhint b { color: var(--fg); }
.ob-opt-unsure { border-style: dashed; }
.ob-quiz { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.ob-q { border: 1px solid var(--bg3); border-radius: 12px; padding: 10px 12px; margin: 0; background: var(--bg2); }
.ob-q legend { font-weight: 600; padding: 0 4px; display: flex; gap: 8px; align-items: center; }
.ob-q-n { font-family: var(--mono); font-size: 0.72em; color: var(--accent-ink); background: var(--accent); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.ob-q-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ob-q-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: var(--text-sm); color: var(--fg2); }
.ob-q-opt input { accent-color: var(--accent); margin-top: 3px; }
.ob-q-opt.on { color: var(--fg); background: var(--accent-dim); border-color: var(--accent); }
.ob-result-lead { margin: 0; font-size: 1.05em; }
.ob-result .ob-help { margin-top: var(--sp-2); }

/* ---- Network: map, cohorts, paths ------------------------------------- */
.nw-map { height: 340px; border-radius: 10px; overflow: hidden; background: var(--bg2); border: 1px solid var(--bg3); position: relative; z-index: 0; isolation: isolate; }
.nw-map-dark .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6); }
.nw-map-live { border: none; }
.nw-map-fallback { padding: var(--sp-3); }
.nw-cities { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-city { font: inherit; font-size: var(--text-sm); display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--bg3); background: var(--bg); color: var(--fg); cursor: pointer; }
.nw-city span { font-family: var(--mono); font-size: 0.8em; color: var(--fg3); }
.nw-city:hover { border-color: var(--accent); }
.leaflet-container { font: inherit; background: var(--bg2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg2); color: var(--fg); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.leaflet-popup-content { margin: 10px 12px; font-size: var(--text-sm); }
.nw-pop b { display: block; }
.nw-pop > span { color: var(--fg3); font-size: var(--text-xs); }
.nw-pop ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.nw-pop li { display: flex; gap: 6px; align-items: baseline; }
.nw-pop li span { color: var(--fg3); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-pop button { font: inherit; font-size: var(--text-sm); background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; }
.leaflet-tooltip { background: var(--bg2); color: var(--fg); border: 1px solid var(--bg3); font-size: var(--text-xs); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--bg) 80%, transparent) !important; color: var(--fg3) !important; font-size: 0.65em !important; }
.leaflet-control-attribution a { color: var(--fg2) !important; }
.leaflet-bar a { background: var(--bg2) !important; color: var(--fg) !important; border-bottom-color: var(--bg3) !important; }

.nw-cohorts { margin-top: var(--sp-3); }
.nw-cohort-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.nw-cohort-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nw-cohort-people li { display: flex; flex-direction: column; gap: 1px; }
.nw-cohort-name { font: inherit; font-weight: 600; background: none; border: none; color: var(--fg); text-align: left; padding: 0; cursor: pointer; }
.nw-cohort-name:hover { color: var(--accent); }
.nw-cohort-now { font-size: var(--text-sm); color: var(--fg2); }
.nw-cohort-now small { color: var(--fg3); }

.nw-pathwrap { margin-top: 6px; }
.nw-path { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--bg3); display: flex; flex-direction: column; gap: 6px; }
.nw-path li { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: var(--text-sm); }
.nw-path li::before { content: ""; position: absolute; left: -16px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); }
.nw-path li.nw-step-shared::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.nw-path li.nw-step-now::before { background: var(--green); }
.nw-step-when { font-family: var(--mono); font-size: 0.7em; color: var(--fg3); letter-spacing: 0.04em; }
.nw-step-what small { color: var(--fg3); }
.nw-step-tag { font-family: var(--mono); font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--tint-accent); padding: 2px 6px; border-radius: 4px; }
.nw-step-tag-now { color: var(--green); background: var(--tint-green); }

@media (max-width: 760px) {
  .hm-fit-grid { grid-template-columns: 1fr; }
  .hm-item { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .nw-map { height: 260px; }
  .nw-path li { grid-template-columns: 1fr; gap: 2px; }
}

/* Plan on a phone: the timeline scrolls sideways; cards stack their actions under the text. */
@media (max-width: 600px) {
  .pl-card { grid-template-columns: 84px minmax(0, 1fr); }
  .pl-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .pl-header .pl-actions { width: 100%; }
  .pl-cell.pl-today::after { display: none; }
}

/* ---- Public build (APP_MODE=public) ---------------------------------------
   app.js sets .mode-public from /api/me. Nothing is mirrored there, so the
   sidebar's mirror status line is hidden; People is per user and stays. */
.mode-public #mirror-status { display: none; }

/* ================================================================
   MVP finish (2026-09-16): landing, Readiness Grid, lens, people form,
   private link. Tokens only; both themes.
   ================================================================ */

/* ---- Landing ------------------------------------------------------------ */
.ld { min-height: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 64px; display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px); }
.ld-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; }
.ld-brand { --brand-size: 1.5em; color: var(--fg); }
.ld-bar-links a { color: var(--fg2); font-size: var(--text-sm); text-decoration: none; border-bottom: 1px solid var(--bg3); padding-bottom: 1px; }
.ld-bar-links a:hover { color: var(--accent); border-color: var(--accent); }
.ld-hero { display: grid; gap: var(--sp-4); max-width: 820px; padding-top: clamp(8px, 4vw, 40px); animation: ld-in .5s ease-out both; }
.ld-eyebrow { font-family: var(--mono); font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ld-h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2em, 6vw, 4.2em); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.ld-lede { margin: 0; font-size: clamp(1.02em, 1.6vw, 1.2em); line-height: 1.55; color: var(--fg2); max-width: 680px; }
.ld-lede b { color: var(--fg); }
.ld-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.ld-start { font-size: 1.05em; padding: 13px 24px; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.ld-cta-note { color: var(--fg3); font-size: var(--text-sm); max-width: 380px; line-height: 1.4; }
.ld-facts { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.ld-facts li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; }
.ld-facts b { font-family: var(--mono); font-size: 1.5em; font-weight: 600; color: var(--fg); line-height: 1; }
.ld-facts span { font-size: var(--text-xs); color: var(--fg3); text-transform: uppercase; letter-spacing: 0.05em; }
.ld-grid-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: clamp(14px, 2.5vw, 26px); box-shadow: var(--shadow); animation: ld-in .6s .1s ease-out both; }
.ld-grid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ld-grid-head h2 { margin: 0 0 4px; font-size: var(--text-xl); }
.ld-grid-head p { margin: 0; color: var(--fg2); font-size: var(--text-sm); max-width: 720px; }
.ld-grid-head p small { font-family: var(--mono); color: var(--fg3); }
.ld-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); }
.ld-how-item { padding: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; color: var(--fg2); font-size: var(--text-sm); line-height: 1.5; }
.ld-how-item b { color: var(--fg); display: block; margin-bottom: 4px; }
.ld-how-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.72em; font-weight: 700; margin-bottom: 8px; }
.ld-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--border); color: var(--fg3); font-size: var(--text-xs); }
@keyframes ld-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-hero, .ld-grid-card, .rg-chip { animation: none !important; transition: none !important; } }
@media (max-width: 640px) { .ld { gap: 28px; } .ld-facts { grid-template-columns: 1fr 1fr; } .ld-foot .ob-btn { width: 100%; } }
.ob-back-landing { align-self: flex-start; background: none; border: none; color: var(--fg3); font: inherit; font-size: var(--text-sm); cursor: pointer; padding: 0; }
.ob-back-landing:hover { color: var(--accent); }
.ob-org { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--fg2); }
.ob-org small { color: var(--fg3); }
.ob-org input { padding: 10px 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 9px; font: inherit; }
.ob-org input:focus { outline: none; border-color: var(--accent); }

/* ---- Readiness Grid ------------------------------------------------------ */
.rg { display: flex; flex-direction: column; gap: 6px; }
.rg-banner { margin: 0 0 var(--sp-2); padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--tint-accent); border-radius: 0 10px 10px 0; color: var(--fg2); font-size: var(--text-sm); line-height: 1.5; }
.st-banner { margin: 0 0 var(--sp-4); }
.rg-row { display: grid; grid-template-columns: 116px repeat(3, minmax(0, 1fr)); gap: 6px; }
.rg-corner, .rg-col { padding: 6px 8px; font-family: var(--mono); font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); }
.rg-col b { color: var(--fg2); font-weight: 600; }
.rg-stage { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--border); }
.rg-stage b { font-family: var(--mono); font-size: 1.3em; font-weight: 600; color: var(--accent); line-height: 1; }
.rg-stage span { font-size: var(--text-sm); font-weight: 600; color: var(--fg); line-height: 1.2; }
.rg-stage small { font-size: 0.72em; color: var(--fg3); line-height: 1.3; }
.rg-cell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; min-height: 52px; }
.rg-empty { color: var(--fg3); font-size: var(--text-xs); padding: 4px; }
.rg-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; color: var(--fg2);
  font: inherit; font-size: 0.8em; line-height: 1.2; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s, transform .12s, opacity .15s; animation: ld-in .4s ease-out both;
}
.rg-chip:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-1px); }
.rg-chip-t { min-width: 0; overflow-wrap: anywhere; hyphens: manual; }
.rg-chip i { font-style: normal; font-family: var(--mono); font-size: 0.86em; color: var(--accent); }
.rg-lit { border-color: var(--accent); background: var(--accent-dim); color: var(--fg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.rg-hot { border-color: var(--yellow); box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow) 45%, transparent); }
.rg-hot i { color: var(--yellow); }
.rg-done { border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--fg3); text-decoration: line-through; }
.rg-active { border-style: dashed; border-color: var(--accent); }
.rg-shared .rg-chip-t::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--fg3); margin-left: 6px; vertical-align: middle; }
.rg-off { opacity: 0.28; }
.rg-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rg-mark svg { width: 9px; height: 9px; }
.rg-mark-lit { background: var(--accent); color: var(--accent-ink); }
.rg-mark-done { background: var(--green); color: var(--accent-ink); }
.rg-mark-prio { color: var(--yellow); }
.rg-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--fg3); margin-top: 4px; }
.rg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rg-lg { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg3); }
.rg-lg svg { width: 8px; height: 8px; }
.rg-lg-lit { background: var(--accent); color: var(--accent-ink); }
.rg-lg-hot { background: transparent; box-shadow: 0 0 0 1.5px var(--yellow); }
.rg-lg-done { background: var(--green); color: var(--accent-ink); }
.rg-lg-prio { background: transparent; color: var(--yellow); }
.rg-lg-shared { width: 5px; height: 5px; background: var(--fg3); }
.rg-near { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--fg2); }
.rg-near select { padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 9px; font: inherit; font-size: var(--text-sm); max-width: 220px; }
.rg-near select:focus { outline: none; border-color: var(--accent); }
@media (max-width: 760px) {
  .rg-row { grid-template-columns: 1fr; }
  .rg-head { display: none; }
  .rg-stage { flex-direction: row; align-items: baseline; gap: 10px; border-right: none; border-bottom: 1px solid var(--border); padding: 8px 4px 6px; }
  .rg-stage small { display: none; }
  .rg-cell { min-height: 0; }
  .rg-cell::before { display: block; width: 100%; font-family: var(--mono); font-size: 0.64em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 2px; }
  .rg-cell[data-cell$=":technical"]::before { content: "Technical"; }
  .rg-cell[data-cell$=":governance"]::before { content: "Policy"; }
  .rg-cell[data-cell$=":operations"]::before { content: "Generalist"; }
}

/* ---- Skill tree: lens + grid host --------------------------------------- */
.st-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.st-lens { display: inline-flex; padding: 3px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.st-lens-btn { padding: 6px 14px; border: none; border-radius: 8px; background: transparent; color: var(--fg2); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.st-lens-btn.on { background: var(--accent); color: var(--accent-ink); }
.st-gridwrap { margin-bottom: var(--sp-5); }

/* ---- People: header, sample note, form, actions -------------------------- */
.nw-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.nw-header > div { flex: 1 1 420px; max-width: 760px; }
.nw-sample-note { margin: 0 0 var(--sp-4); }
.nw-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-card-actions .up-btn { padding: 5px 10px; font-size: var(--text-xs); }
.nw-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.nw-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--fg2); min-width: 0; }
.nw-form input, .nw-form select { padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg3); border-radius: 8px; font: inherit; font-size: var(--text-sm); min-width: 0; }
.nw-form input:focus, .nw-form select:focus { outline: none; border-color: var(--accent); }
.nw-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }

/* ---- Private link ---------------------------------------------------------- */
.fp-link { display: inline-flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 8px; padding: 7px 10px; background: var(--bg2); color: var(--fg2); border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 0.78em; cursor: pointer; text-align: left; }
.fp-link:hover { color: var(--fg); border-color: var(--accent); }
.fp-link svg { flex: none; color: var(--accent); }
html[data-sidebar="collapsed"] .fp-link span { display: none; }
.hm-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.hm-link { font-size: var(--text-xs); }

/* ---- UI pass 2026-09-16 (spacing) ------------------------------------- */
/* The Readiness Grid's three columns were equal thirds, but the technical column
   carries ~2x the programmes of the other two, so on a wide screen it ran 13 chip
   rows tall next to two half-empty boxes. Give it the width its content needs;
   the header row shares .rg-row, so the column labels stay aligned. */
@media (min-width: 900px) { .rg-row { grid-template-columns: 116px minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); } }
/* On a wide screen the landing hero sat in the left half with the right half empty.
   Centre it, and let the facts row use the full content width. */
@media (min-width: 1024px) {
  .ld-hero { max-width: none; justify-items: center; text-align: center; padding-top: clamp(24px, 5vw, 64px); }
  .ld-h1 { max-width: 880px; }
  .ld-lede { max-width: 640px; }
  .ld-cta { flex-direction: column; gap: 12px; margin-top: var(--sp-3); }
  .ld-cta-note { text-align: center; max-width: 460px; }
  .ld-facts { width: 100%; max-width: 1000px; margin-top: var(--sp-5); }
}
/* Section hints ran inline into the heading and wrapped mid-sentence on phones. */
@media (max-width: 640px) { .fp-wrap .up-section-hint, #view-plan .up-section-hint, #view-network .up-section-hint { display: block; margin-top: 4px; } }