/* ============================================================================
   xEllerator consoles: HR, mentee, mentor, admin, IT ops.
   Load AFTER styles.css and app.css, on the console pages only (the landing
   and about pages keep their own look).

   The brand guide (p.10) sets White as the page, Soft Gray #F2F2F2 for
   panels, dividers and tables, Deep Charcoal #1F1F1F for text, and Momentum
   Plum for charts and progress. The one repeated device is the bar from under
   "xE": as an overline above titles (p.11) and as the data mark in every
   chart, square-ended like the original.
   ============================================================================ */

:root {
  --ink: #1f1f1f;          /* Deep Charcoal */
  --ink-2: #545454;        /* secondary text, 7.4:1 on white */
  --ink-3: #6f6f6f;        /* notes and captions, 5.0:1 on white */
  --line: #e8e8e8;         /* hairlines */
  --line-2: #d4d4d4;       /* table heads, control borders */
  --soft: #f2f2f2;         /* Soft Gray: tracks, panels */
  --soft-2: #f8f8f8;       /* row hover, quiet fills */

  /* Ordered stages in a stacked bar, darkest = furthest along.
     Checked with the dataviz ordinal validator on white. */
  --stage-1: #562244;
  --stage-2: #944872;
  --stage-3: #c286a8;
  --stage-4: #d8a9c3;

  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-color: var(--line);

  --gray-50: #f8f8f8;
  --gray-100: #f2f2f2;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #6f6f6f;
  --gray-600: #545454;
  --gray-700: #3d3d3d;
  --gray-800: #2b2b2b;
  --gray-900: #1f1f1f;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: 0 2px 8px rgb(31 31 31 / 0.06);
  --shadow-lg: 0 12px 32px rgb(31 31 31 / 0.08);
  --shadow-xl: 0 24px 48px rgb(31 31 31 / 0.14);

  --sidebar-width: 240px;
  --header-height: 64px;
}

body { color: var(--ink); background: #fff; }

/* --- Shell ----------------------------------------------------------------- */
.sidebar { background: var(--primary-700); }
.sidebar-header { padding: 22px 22px 20px; border-bottom: none; }
.brand-logo { height: 30px; }
.nav-menu { padding: 8px 12px; gap: 2px; }
.nav-item {
  padding: 10px 12px; border-radius: var(--radius);
  color: rgb(255 255 255 / 0.74); font-weight: 500;
}
.nav-item:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
.nav-item.active { background: rgb(255 255 255 / 0.1); color: #fff; }
.nav-item.active::before { width: 3px; height: 18px; background: var(--primary-200); border-radius: 0; }
.nav-icon { width: 18px; height: 18px; }
.nav-item .nav-icon, .nav-item svg { opacity: 0.9; }
.badge { background: rgb(255 255 255 / 0.16); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.sidebar-footer { border-top: 1px solid rgb(255 255 255 / 0.08); }

.top-header { border-bottom: 1px solid var(--line); padding: 0 40px; }
/* A flex item grows to fit wide content unless told otherwise; tables scroll inside their wrapper instead. */
.main-content { min-width: 0; }
.user-menu { padding: 4px 4px 4px 4px; }
.user-menu:hover { background: transparent; }
.avatar { width: 34px; height: 34px; background: var(--soft); }
.user-name { font-size: 13.5px; }
.user-role { font-size: 12px; color: var(--ink-3); }

.dashboard { padding: 40px 48px 72px; max-width: 1280px; }

/* --- Titles ---------------------------------------------------------------- */
.page-head { margin-bottom: 36px; align-items: flex-end; }
.page-head h1, .welcome-content h1 {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.15; color: var(--ink);
}
.page-head p, .welcome-content p { font-size: 15px; color: var(--ink-2); margin-top: 8px; max-width: 72ch; line-height: 1.55; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec-head h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.25; color: var(--ink);
}
.sec-head h2::before {
  content: ""; display: block; width: 1.13em; height: 0.226em;
  margin-bottom: 0.45em; background: var(--primary-500);
}
.sec-head p { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; max-width: 72ch; }
.sec-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* On a phone a head with buttons wraps: the title keeps the width, and the
   buttons go under it, wrapping too, so nothing scrolls sideways. */
@media (max-width: 600px) {
  .sec-head { flex-wrap: wrap; align-items: flex-start; }
  .sec-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .sec-actions { flex-wrap: wrap; flex-shrink: 1; max-width: 100%; }
}
.sec { margin-top: 52px; }
.sec:first-child { margin-top: 0; }

/* --- Figures: numbers on the page, no boxes -------------------------------- */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig { padding: 22px 24px 22px 0; display: flex; flex-direction: column; min-width: 0; }
.fig + .fig { padding-left: 24px; border-left: 1px solid var(--line); }
.fig-value {
  font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fig-label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-top: 8px; }
.fig-note { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.fig .bar, .fig .levels { margin-top: 12px; max-width: 180px; }
.fig-act .fig-value { color: var(--primary-700); }
.fig-link {
  align-self: flex-start; margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-300);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.fig-link:hover { color: var(--primary-500); text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .figs { grid-template-columns: 1fr 1fr; }
  .fig, .fig + .fig { padding: 18px 16px 18px 0; border-left: none; }
  .fig:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .fig:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* --- The brand bar as a data mark ------------------------------------------ */
.bar { height: 6px; background: var(--soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--primary-500); }
.levels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 6px; }
.levels > span { background: var(--soft); }
.levels > span.on { background: var(--primary-500); }

/* One stacked bar split into ordered stages; its key is the direct label. */
.stage-bar { display: flex; gap: 2px; height: 14px; background: #fff; }
.stage-seg { min-width: 6px; transform-origin: left center; animation: stageGrow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.stage-seg:nth-child(2) { animation-delay: 0.06s; }
.stage-seg:nth-child(3) { animation-delay: 0.12s; }
.stage-seg:nth-child(4) { animation-delay: 0.18s; }
.stage-empty { flex: 1; background: var(--soft); }
@keyframes stageGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage-key { display: flex; flex-wrap: wrap; gap: 18px 44px; margin-top: 18px; }
.stage-item { min-width: 120px; }
.stage-n { display: flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stage-n i { width: 10px; height: 10px; flex-shrink: 0; }
.stage-label { font-size: 13px; color: var(--ink-2); margin-top: 5px; padding-left: 19px; }
.stage-item .fig-link { margin-left: 19px; margin-top: 6px; }
.stage-item.zero .stage-n { color: var(--ink-3); }
.stage.compact .stage-bar { height: 10px; }

.stage-foot { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.stage-foot b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Rows of organisations, each with a small stage bar on a shared scale. */
.org-rows { display: flex; flex-direction: column; }
.org-row {
  display: grid; grid-template-columns: minmax(160px, 220px) 1fr 64px; gap: 20px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.org-row:first-child { border-top: 1px solid var(--line); }
.org-row:hover { background: var(--soft-2); }
.org-row .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-row .sub { font-size: 12px; color: var(--ink-3); }
.org-row .track { display: flex; gap: 2px; height: 10px; }
.org-row .track > span { min-width: 3px; }
.org-row .n { font-size: 13.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.org-key { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.org-key span { display: inline-flex; align-items: center; gap: 7px; }
.org-key i { width: 10px; height: 10px; }
@media (max-width: 640px) { .org-row { grid-template-columns: 1fr 48px; } .org-row .track { grid-column: 1 / -1; grid-row: 2; } }

/* Label / value list for secondary numbers. */
.kv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 48px; }
.kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv-row span { color: var(--ink-2); }
.kv-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Surfaces -------------------------------------------------------------- */
.card { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: none; padding: 24px; animation: none; }
.card-header { margin-bottom: 16px; }
.card-header h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.card-link { color: var(--primary-700); font-weight: 600; }
.panel { background: var(--soft-2); border-radius: var(--radius-lg); padding: 24px; }
.panel + .panel { margin-top: 16px; }
.divide > * + * { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }

/* --- Buttons --------------------------------------------------------------- */
.btn { border-radius: var(--radius); font-weight: 500; font-size: 13.5px; padding: 9px 16px; }
.btn-primary { font-weight: 600; }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-outline { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink-3); background: #fff; color: var(--ink); }
.btn-ghost:hover { background: var(--soft); }
.btn-danger { background: #fff; color: #a32626; border: 1px solid var(--line-2); }
.btn-danger:hover { background: #fdf3f3; border-color: #e4b4b4; }
.btn { white-space: nowrap; }
/* In a table row the destructive action stays quiet until you point at it. */
.row-actions .btn-danger { border-color: transparent; color: var(--ink-3); }
.row-actions .btn-danger:hover, .row-actions .btn-danger:focus-visible { color: #a32626; background: #fdf3f3; border-color: transparent; }
.btn:focus-visible, .tab:focus-visible, .nav-item:focus-visible, .fig-link:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary-500); outline-offset: 2px;
}
.btn:disabled { opacity: 0.45; }

/* --- Status, chips, tags --------------------------------------------------- */
/* Status is a coloured dot plus plain text; colour alone never carries it. */
.pill {
  background: transparent; padding: 0; border-radius: 0; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink); text-transform: none; white-space: nowrap;
}
.pill::before { width: 7px; height: 7px; background: var(--dot, var(--gray-400)); }
.pill.green, .pill.yellow, .pill.amber, .pill.red, .pill.gray, .pill.blue, .pill.plum { background: transparent; }
.pill.green { --dot: #2e8b57; color: var(--ink); }
.pill.yellow, .pill.amber { --dot: #c98a12; color: #7a4f00; }
.pill.red { --dot: #c93b3b; color: #a32626; }
.pill.gray { --dot: #b3b3b3; color: var(--ink-2); }
.pill.blue { --dot: var(--primary-400); color: var(--ink); }
.pill.plum { --dot: var(--primary-700); color: var(--primary-700); }

.chip, .chip.blue, .chip.green, .chip.amber, .chip.gray,
.expertise-tag, .topic-tag {
  background: var(--soft); color: var(--ink-2); border: none;
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px;
}
.chip.plum { background: var(--primary-50); color: var(--primary-700); }

/* --- Tables ---------------------------------------------------------------- */
.table-wrap { border: none; border-radius: 0; background: transparent; }
table.data { font-size: 13.5px; }
table.data th {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: #fff; padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: bottom;
}
table.data td { padding: 14px; border-bottom: 1px solid var(--line); }
table.data th:first-child, table.data td:first-child { padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data tr:last-child td { border-bottom: 1px solid var(--line); }
table.data tbody tr:hover { background: var(--soft-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-user .avatar-initials { width: 32px; height: 32px; font-size: 12px; }
.cell-user .em { color: var(--ink-3); }
.score { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Equity tables: "Everyone" is the reference row; a flagged cell is red text
   with a marker, and its title says what everyone got. */
table.data.eq tr.everyone td { background: var(--soft-2); font-weight: 600; }
table.data.eq td.suppressed { color: var(--ink-3); font-style: italic; }
table.data.eq .flagged { color: #a32626; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
table.data.eq .flagged::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c93b3b; }
.eq-flags { padding: 16px 20px; background: var(--soft-2); border-radius: var(--radius-lg); margin-bottom: 8px; }
.eq-flags-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.eq-flags.has-gaps { background: #fdf5f5; }
.eq-flag-list { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.eq-flag-list b { font-weight: 600; margin-right: 8px; }
.eq-note { font-size: 12.5px; color: var(--ink-3); margin-top: 32px; max-width: 80ch; }
/* Which saved week an Equity page's figures are from (lib/snapshots.js). */
.eq-asof { font-size: 13px; color: var(--ink-2); margin: -8px 0 20px; max-width: 80ch; }

.mini-progress .bar { height: 6px; border-radius: 0; background: var(--soft); }
.mini-progress .bar > span { background: var(--primary-500); border-radius: 0; }
.mini-progress .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- Tabs ------------------------------------------------------------------ */
.tabs { border-bottom: 1px solid var(--line); gap: 24px; }
.tab { padding: 10px 0; font-weight: 500; color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary-500); }
.tab .count { background: var(--soft); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tab.active .count { background: var(--primary-50); color: var(--primary-700); }

/* --- Notices, empty states, modals ----------------------------------------- */
.notice { border-radius: var(--radius); font-size: 13.5px; }
.notice.info { background: var(--primary-50); color: var(--primary-800); border: none; }
.notice.info svg { color: var(--primary-500); }
.notice span > svg:first-child { display: inline-block; vertical-align: -4px; margin: 0 8px 0 0; }
.notice.warn { border: none; }
.notice.success { border: none; }
.empty { border: none; background: var(--soft-2); border-radius: var(--radius-lg); }
.empty .ic { background: #fff; }
.empty h3 { font-family: var(--font-display); font-weight: 600; }
.empty-state { border: none; background: var(--soft-2); }
.modal-backdrop { background: rgb(31 31 31 / 0.45); backdrop-filter: none; }
.modal { border-radius: 14px; }
.modal-header, .modal-footer { border-color: var(--line); }
.input, .select, .textarea { border-color: var(--line-2); border-radius: var(--radius); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); }
.org-scope, .view-switch { font-weight: 500; }

/* --- Mentee dashboard ------------------------------------------------------ */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 48px; align-items: start; margin-top: 44px; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; gap: 40px; } }

.goal { padding: 22px 0; border-bottom: 1px solid var(--line); }
.goal:first-of-type { border-top: 1px solid var(--line); }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.goal-cat { font-size: 12.5px; font-weight: 600; color: var(--primary-500); }
.goal-pct { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.goal h3 { font-size: 16px; font-weight: 600; margin-top: 4px; }
.goal-desc { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
/* --- Goals and steps (docs/DATA_MODEL.md 3.1) ------------------------------
   Progress comes from the steps she ticks; there is no slider. The meter is
   one square per step: confirmed by her mentor in solid plum, done but not
   confirmed yet as a plum outline, not done yet in Soft Gray. Its key says
   each kind in words. */
.goal.is-done h3 { color: var(--ink-2); }
.goal-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.goal-pct-empty { font-size: 13.5px; }
.step-progress { margin-top: 14px; }
.step-meter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 8px; max-width: 420px; }
.step-meter > span { background: var(--soft); }
.step-meter > span.done { background: #fff; box-shadow: inset 0 0 0 1.5px var(--primary-500); }
.step-meter > span.confirmed { background: var(--primary-500); }
.step-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.step-key span { display: inline-flex; align-items: center; gap: 6px; }
.step-key i { width: 10px; height: 10px; flex-shrink: 0; background: var(--soft); }
.step-key i.confirmed { background: var(--primary-500); }
.step-key i.done { background: #fff; box-shadow: inset 0 0 0 1.5px var(--primary-500); }

.step-list { list-style: none; margin-top: 12px; }
.step-row { padding: 10px 0; border-top: 1px solid var(--line); }
.step-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--ink); min-width: 0; }
.step-check input { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--primary-500); cursor: pointer; }
.step-row.done .step-text { color: var(--ink-2); }
.step-state { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.step-state.confirmed { color: var(--primary-700); font-weight: 600; }
.step-extra { margin: 6px 0 0 26px; display: flex; flex-direction: column; gap: 4px; }
.step-note { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.step-note b { font-weight: 600; color: var(--ink); }
.step-note.mentor { padding-left: 10px; border-left: 2px solid var(--primary-200); }
.step-note .link-btn { margin-left: 8px; }
.step-side { display: flex; align-items: baseline; gap: 14px; flex-shrink: 0; }
.step-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0 26px; }
.step-inline.step-edit { flex-direction: column; align-items: stretch; }
.step-inline.step-edit .input { flex: none; width: 100%; }
.step-edit-actions { display: flex; align-items: center; gap: 8px; }
.step-edit-actions .link-btn { margin-left: auto; }
.step-inline .input { flex: 1 1 220px; min-width: 0; padding: 7px 10px; font-size: 13.5px; }
.step-inline .hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.step-inline.step-edit .hint { flex-basis: auto; }
.step-empty { padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.step-empty p { margin-bottom: 10px; line-height: 1.5; }
.step-add-row { padding-top: 10px; border-top: 1px solid var(--line); }
.step-add { display: flex; gap: 8px; }
.step-add .input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13.5px; }
.goal-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }

/* A quiet text button: says what it does, sits inline, no box. */
.link-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-200); text-underline-offset: 3px;
}
.link-btn:hover { color: var(--primary-500); text-decoration-color: currentColor; }
.link-btn.quiet { color: var(--ink-3); text-decoration-color: var(--line-2); }
.link-btn.quiet:hover { color: #a32626; }
/* A link that changes something harmless: as quiet as .quiet, without the red. */
.link-btn.muted { color: var(--ink-3); text-decoration-color: var(--line-2); }
.link-btn.muted:hover { color: var(--primary-500); text-decoration-color: currentColor; }
.link-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

.share-ask { background: var(--soft-2); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.share-ask-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dropped { margin-top: 28px; }
.dropped-list { list-style: none; font-size: 13.5px; }
.dropped-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.step-drafts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.step-draft { display: flex; gap: 10px; align-items: center; }
.step-draft .input { flex: 1; min-width: 0; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.check-line input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary-500); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .step-main { flex-direction: column; gap: 4px; }
  .step-side { margin-left: 26px; }
  .step-add { flex-direction: column; }
}

.session { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.session:first-of-type { border-top: 1px solid var(--line); }
.session-day { text-align: left; }
.session-day b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.session-day span { font-size: 12.5px; color: var(--ink-3); }
.session h3 { font-size: 14.5px; font-weight: 600; }
.session .when { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.session .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.session .next { font-size: 12px; font-weight: 600; color: var(--primary-500); margin-bottom: 3px; }
/* A cancelled session still to come stays in its place, struck through and gray. */
.session.is-cancelled .next { color: var(--ink-3); }
.session.is-cancelled h3, .session.is-cancelled .session-day b { color: var(--ink-3); }
.session.is-cancelled s { text-decoration-color: var(--line-2); }
.ses-cal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }

.person { display: flex; align-items: center; gap: 14px; }
.person .nm { font-size: 16px; font-weight: 600; }
.person .ti { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.why summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--primary-700); list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::after { content: " +"; font-weight: 500; color: var(--ink-3); }
.why[open] summary::after { content: " \2212"; }
.why p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; }
.aside-title { font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }

.skill { margin-bottom: 14px; }
.skill:last-child { margin-bottom: 0; }
.skill-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 7px; }
.skill-top span { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Skill ratings (public/js/skills.js): the level as words and the plum meter,
   her ratings by phase, and one plain line when she and her mentor differ. */
.sk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sk-head .aside-title { margin-bottom: 0; }
.sk-ask { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: -6px 0 14px; }
.sk-line { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.sk-line.differ { color: var(--ink); }
.sk-key { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.sk-key li { display: grid; grid-template-columns: 16px 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sk-key b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sk-key span { color: var(--ink-2); }
.sk-rate { padding: 12px 0; border-top: 1px solid var(--line); }
.sk-rate > b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sk-rate .choice-group { gap: 6px; }
.sk-rate .choice { min-width: 40px; justify-content: center; padding: 6px 12px; font-size: 13px; }
.sk-picked { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.sk-up { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sk-up li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sk-up li span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.m-skills { border-top: 1px solid var(--line); padding-top: 14px; }
.sk-ended { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.sk-ended > .m-skills:first-child { border-top: none; padding-top: 0; }
@media (max-width: 560px) {
  .sk-key li { grid-template-columns: 16px 1fr; }
  .sk-key li span { grid-column: 2; }
}

.timeline { list-style: none; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 20px; font-size: 13.5px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--primary-500); }
.timeline li::after { content: ""; position: absolute; left: 3px; top: 18px; bottom: 2px; width: 1px; background: var(--line-2); }
.timeline li:last-child::after { display: none; }
.timeline .t { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.timeline .note { color: var(--ink-2); }

/* Proposal: the score as a number, then what it is made of. */
.proposal-grid { gap: 48px; }
.score-big { display: flex; align-items: baseline; gap: 10px; }
.score-big b { font-size: 56px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--primary-700); font-variant-numeric: tabular-nums; }
.score-big span { font-size: 14px; color: var(--ink-2); }
.factor-bars { gap: 14px; margin-top: 24px; }
.factor { grid-template-columns: 116px 1fr 44px; }
.factor .fl { color: var(--ink-2); font-size: 13px; }
.factor .fb { height: 8px; border-radius: 0; background: var(--soft); }
.factor .fb > span { background: var(--primary-500); border-radius: 0; }
.factor .fn { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }

/* --- Mentor dashboard ------------------------------------------------------ */
.m-card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: 22px; gap: 16px; }
.m-card-head .who .nm { font-size: 15px; }
.m-card-head .who .ti { color: var(--ink-3); }
.m-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.m-explain { background: var(--soft-2); border: none; }
.m-mentee-foot { border-top-color: var(--line); }
.m-score { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.m-score b { font-size: 20px; font-weight: 600; color: var(--primary-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: 4px; }
.m-progress { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.m-progress b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* Each active mentee is one full-width block: a short head row (who, the
   attention pill, the next session, the average), then goals on the left and
   sessions, the log and the agreement on the right. One column when narrow. */
.m-list { display: flex; flex-direction: column; gap: 24px; }
.m-wide { padding: 24px; gap: 18px; }
.m-wide-head { flex-wrap: wrap; row-gap: 12px; }
.m-wide-head .who .m-chips { margin-top: 6px; }
.m-head-figs { display: flex; gap: 28px; flex-wrap: wrap; }
.m-head-fig { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-3); }
.m-head-fig b { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-wide-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; border-top: 1px solid var(--line); padding-top: 18px; }
.m-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-col > .ses:first-child, .m-col > .m-log:first-child, .m-col > .m-agree:first-child { border-top: none; padding-top: 0; }
@media (max-width: 960px) {
  .m-wide-body { grid-template-columns: 1fr; gap: 20px; }
  .m-col + .m-col > .ses:first-child { border-top: 1px solid var(--line); padding-top: 14px; }
}
@media (max-width: 560px) {
  .m-wide { padding: 18px 16px; }
  .m-head-figs { width: 100%; gap: 20px; }
}

/* Her shared goals on his card: the same step meter, and one mark per step
   (solid once he confirmed it, a plum outline when done, gray when not). */
.m-about { grid-template-columns: 1fr; }
.m-about .kv-row { padding: 8px 0; }
.m-about .kv-row span { flex-shrink: 0; }
.m-about .kv-row b { text-align: right; font-weight: 500; }
.m-goals { display: flex; flex-direction: column; gap: 14px; }
.m-goals > .m-progress { margin-bottom: 0; }
.m-goal { padding-top: 12px; border-top: 1px solid var(--line); }
.m-goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.m-goal-pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-goal .goal-meta { margin-top: 2px; }
.m-goal .step-progress { margin-top: 10px; }
.m-steps { list-style: none; margin-top: 8px; font-size: 13px; }
.m-steps li { padding: 6px 0; }
.m-step-main { display: flex; align-items: flex-start; gap: 8px; }
.m-step-mark { width: 10px; height: 10px; margin-top: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.m-step-mark.done { box-shadow: inset 0 0 0 1.5px var(--primary-500); }
.m-step-mark.confirmed { background: var(--primary-500); box-shadow: none; }
.m-step-text { flex: 1; min-width: 0; line-height: 1.45; }
.m-steps li.done .m-step-text { color: var(--ink-2); }
.m-step-main .btn-sm { padding: 3px 10px; }
.m-step-note { margin: 4px 0 0 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.m-step-note b { color: var(--primary-700); font-weight: 600; }

/* --- How you'll work together (public/js/agreement.js) --------------------- */
/* A list on the page with hairlines, a dot-and-text status, plain buttons. */
.agree-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.agree-status p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.agree-list { margin-top: 16px; border-top: 1px solid var(--line); }
.agree-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.agree-row dt { color: var(--ink-2); }
.agree-row dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.agree-row dd .muted { font-weight: 400; }
.agree-sub { font-size: 12.5px; font-weight: 400; color: var(--ink-3); line-height: 1.45; }
.agree-link { color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-300); text-underline-offset: 3px; }
.agree-link:hover { color: var(--primary-500); text-decoration-color: currentColor; }
.agree-note { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; max-width: 72ch; }
.agree-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.agree.compact .agree-status p { font-size: 12.5px; }
.agree.compact .agree-list { margin-top: 12px; }
.agree.compact .agree-row { grid-template-columns: 92px 1fr; gap: 12px; padding: 8px 0; font-size: 13px; }
.agree.compact .agree-actions { margin-top: 12px; }
.m-agree { border-top: 1px solid var(--line); padding-top: 14px; }
.m-agree > .m-label { display: block; margin-bottom: 10px; }
.agree-lead { font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; line-height: 1.5; }
.agree-slot { display: grid; grid-template-columns: 1fr 140px; gap: 10px; }
button.choice { font: inherit; font-size: 13px; }
/* HR Matches: the pace a match's health is measured against, under its dot. */
.health-pace { font-size: 12px; color: var(--ink-3); margin-top: 4px; white-space: nowrap; }
@media (max-width: 560px) {
  .agree-row, .agree.compact .agree-row { grid-template-columns: 1fr; gap: 2px; }
  .agree-slot { grid-template-columns: 1fr; }
}

/* --- The sponsorship log (docs/DATA_MODEL.md 3.5) --------------------------
   What a mentor did, as a dated list with hairlines. His pledges sit on a
   soft gray panel under it. On her side each act carries "Did this happen?"
   as three plain choices, and says who sees the answer. */
.m-log { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.m-log-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-log-empty { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.act-group-title { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.act-count { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.act-group-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.act-list { list-style: none; margin-top: 6px; }
.act { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.act-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.act-top b { font-weight: 600; line-height: 1.4; }
.act-date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-note { margin-top: 3px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.act-meta { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.act-edit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.act-kind { font-size: 14px; font-weight: 600; }
.pledges { padding: 12px 14px; background: var(--soft-2); border-radius: var(--radius); }
.pledge-list { list-style: none; margin-top: 6px; font-size: 13px; }
.pledge-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.pledge-list li:first-child { border-top: none; }
.pledge-state { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pledge-list li.kept .pledge-state { font-weight: 500; color: var(--ink-3); }
.acts-title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.goal-acts { margin-top: 14px; padding: 12px 14px; background: var(--soft-2); border-radius: var(--radius); }
.goal-acts .act:first-child { border-top: none; }
.happened { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.happened-q { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.happened .choice { padding: 4px 11px; font-size: 12.5px; }
.happened .choice:disabled { opacity: 0.6; cursor: default; }
.happened-note { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }
.happened-note.changed { color: var(--ink-2); }
@media (max-width: 560px) {
  .pledge-list li { flex-direction: column; gap: 2px; }
  .act-top { flex-direction: column; gap: 2px; }
}

/* --- Sessions and next steps (public/js/sessions.js) ----------------------- */
/* Rows on the page with hairlines. A next step's mark is a small square: an
   outline while open, solid plum once done; carried and dropped ones fade and
   say what happened in words. */
.ses { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; }
.ses-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.ses-head > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ses-count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ses-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ses-row.is-due { background: var(--soft-2); margin: 0 -10px; padding: 10px; border-bottom: none; border-radius: var(--radius); }
.ses-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ses-main b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ses-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; overflow-wrap: anywhere; }
.ses-acts { display: flex; gap: 14px; flex-shrink: 0; }
.ses-empty { font-size: 13px; color: var(--ink-3); padding: 10px 0; }
.ses-last { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ses-last-head { display: flex; align-items: baseline; gap: 10px; }
.ses-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ses-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--primary-200); white-space: pre-line; }
.ses-note b { font-weight: 600; color: var(--ink); }
.ses-lead { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
.ses-group { margin-top: 24px; }
.ses-group:first-of-type { margin-top: 0; }
.ses-group-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.ses-group > .ses-sub { margin: -6px 0 8px; }
.ses-past { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ses-past:first-of-type { border-top: 1px solid var(--line); }
.ses-past-top { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; }
.ses-past-top b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ses-more { margin-top: 12px; align-self: flex-start; }
/* "Add to calendar" on each session still to come. */
.ses-cal { margin-top: 8px; }
.ses-acts { flex-wrap: wrap; row-gap: 6px; }
/* On a narrow card the links go under the session instead of squeezing it. */
.ses-row { flex-wrap: wrap; row-gap: 8px; }
.ses-row > .ses-main { flex: 1 1 auto; }
a.link-btn { display: inline-block; }

.ns-list { list-style: none; font-size: 13px; }
.ns-item { padding: 8px 0; border-top: 1px solid var(--line); }
.ns-item:first-child { border-top: none; }
.ses-group .ns-list .ns-item:first-child { border-top: 1px solid var(--line); }
.ns-check { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; cursor: default; }
label.ns-check { cursor: pointer; }
.ns-check input { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary-500); cursor: pointer; }
.ns-mark { width: 10px; height: 10px; margin: 4px 3px 0; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ns-mark.done { background: var(--primary-500); box-shadow: none; }
.ns-text { min-width: 0; overflow-wrap: anywhere; }
.ns-item.is-done .ns-text, .ns-item.is-carried .ns-text, .ns-item.is-dropped .ns-text { color: var(--ink-2); }
.ns-item.is-carried .ns-mark, .ns-item.is-dropped .ns-mark { opacity: 0.5; }
.ns-meta { font-size: 12px; color: var(--ink-3); margin: 3px 0 0 25px; line-height: 1.45; }
.ns-carried .ns-meta { margin-left: 0; }

/* "How did it go?" */
.modal.modal-wide { max-width: 640px; }
.wu-panel .field { margin-bottom: 22px; }
.wu-hint { margin: -2px 0 10px; }
.wu-topics { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--soft-2); border-radius: var(--radius); }
.wu-topic-cat { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.wu-topics .choice { padding: 6px 12px; font-size: 12.5px; }
.wu-prev { padding: 10px 0; border-top: 1px solid var(--line); }
.wu-prev-text { font-size: 13.5px; line-height: 1.45; }
.wu-prev .ns-meta { margin-left: 0; }
.wu-prev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.wu-prev-acts .choice, .wu-step .choice { padding: 6px 12px; font-size: 12.5px; }
.wu-due { width: auto; padding: 6px 10px; font-size: 13px; }
.wu-steps { display: flex; flex-direction: column; }
.wu-step { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.wu-line { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; }
.wu-line .input { min-width: 0; padding: 7px 10px; font-size: 13.5px; }
.wu-step-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wu-pre { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.wu-steps + .link-btn { margin-top: 8px; }
@media (max-width: 560px) {
  .ses-row { flex-direction: column; align-items: flex-start; }
  .wu-line { grid-template-columns: auto 1fr; }
}

/* --- Pair health: the Matches cell, "This week", the match file ------------
   (public/js/health.js) */
/* The pair opens its match file, so its names read as a link. */
a.pair-cell { color: inherit; text-decoration: none; }
a.pair-cell > span:not(.pair-thread) { color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-200); text-underline-offset: 3px; }
a.pair-cell:hover > span:not(.pair-thread) { text-decoration-color: var(--primary-500); }
.hl-why { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; max-width: 26ch; }
/* The Matches table fits its box: the action buttons wrap rather than push it wider. */
table.data .row-actions { flex-wrap: wrap; }
.hl-why.more { color: var(--ink-3); }
.hl-quiet { font-size: 13.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; max-width: 72ch; }
.hl-sub-title { font-size: 13.5px; font-weight: 600; margin-top: 28px; }
.hl-reasons { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); max-width: 72ch; }
.hl-reasons li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.hl-reasons li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #c98a12; transform: translateY(-1px); }
.hl-reasons li.red::before { background: #c93b3b; }
.hl-pairs { list-style: none; margin-top: 10px; }
.hl-pair { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 3px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.hl-pair:last-child { border-bottom: 1px solid var(--line); }
.hl-pair > a { font-weight: 600; color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-200); text-underline-offset: 3px; }
.hl-pair > a:hover { text-decoration-color: var(--primary-500); }
.hl-pair .sub { grid-column: 2; color: var(--ink-2); line-height: 1.5; }
.hl-pair .meta { grid-column: 2; font-size: 12.5px; color: var(--ink-3); }
.hl-flags { margin-top: 10px; }
.back-link { display: inline-block; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; text-decoration: none; }
.back-link::before { content: "\2190\00a0"; }
.back-link:hover { color: var(--primary-700); }
.fu-form { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 200px); gap: 0 16px; max-width: 640px; }
.fu-form .field-note, .fu-form .fu-actions { grid-column: 1 / -1; }
.fu-list { list-style: none; margin-top: 24px; max-width: 72ch; }
.fu-item { padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.fu-item:last-child { border-bottom: 1px solid var(--line); }
.fu-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fu-top b { font-weight: 600; }
.fu-when { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fu-note { margin-top: 4px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .fu-form, .hl-pair { grid-template-columns: 1fr; }
  .hl-pair .sub, .hl-pair .meta { grid-column: 1; }
  .fu-top { flex-direction: column; gap: 2px; }
}

/* --- The mentoring record (public/js/record.js) -----------------------------
   Numbers and lists on the page. "Print this record" adds .print-record to
   the body, and the print rules below print this section alone. */
.rec .sec-head { flex-wrap: wrap; }
.rec .sec-actions { flex-wrap: wrap; }
.rec-names { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; margin-right: 6px; }
.rec-names input { width: 16px; height: 16px; accent-color: var(--primary-500); }
.rec-who { font-size: 13.5px; color: var(--ink-2); margin-bottom: 20px; }
.rec-part { margin-top: 36px; }
.rec-part h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.rec-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.rec-table th[scope="row"] { font-weight: 600; text-align: left; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); padding: 14px 14px 14px 0; font-size: 13.5px; white-space: nowrap; }
.rec-kv b { white-space: nowrap; }
.rec-table tfoot td, .rec-table tfoot th[scope="row"] { font-weight: 600; background: var(--soft-2); }
.rec-table time { white-space: nowrap; }
.rec-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 48px; margin-top: 8px; }
.rec-group h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 12px 0 2px; }
.rec-kv { grid-template-columns: 1fr; }
.rec-pledges { max-width: 560px; margin-top: 8px; }
.rec-none { font-size: 13.5px; margin-top: 8px; }
.rec-notes { list-style: none; margin-top: 32px; padding: 0; font-size: 12.5px; color: var(--ink-3); max-width: 80ch; line-height: 1.5; }
.rec-notes li + li { margin-top: 4px; }
.rec-notes .rec-print { display: none; }
@media (max-width: 560px) {
  .rec .sec-actions { width: 100%; }
}
@media print {
  body.print-record .sidebar, body.print-record .top-header, body.print-record .toast,
  body.print-record .dashboard > :not(#sec-record), body.print-record .rec .sec-actions { display: none !important; }
  body.print-record .app-container, body.print-record .main-content { display: block; margin: 0; min-height: 0; }
  body.print-record .dashboard { padding: 0; max-width: none; }
  body.print-record #sec-record { margin-top: 0; }
  body.print-record .rec .sec-head h2::before, body.print-record .rec-table tfoot td, body.print-record .rec-table tfoot th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.print-record .rec table.data { min-width: 0; font-size: 10.5pt; }
  body.print-record .rec table.data tbody tr:hover { background: transparent; }
  body.print-record .rec .table-wrap { overflow: visible; }
  body.print-record .rec .figs, body.print-record .rec-part, body.print-record .rec tr { break-inside: avoid; }
  body.print-record .rec .fig-value { font-size: 24pt; }
  /* On paper the names box and "Only you can open this record" mean nothing. */
  body.print-record .rec-notes .rec-screen { display: none !important; }
  body.print-record .rec-notes .rec-print { display: list-item !important; }
}

/* --- Profile edit, pause, decline reasons (public/js/profile.js, declines.js) - */
.decline-lead { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 12px; }
.decline-opts { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-bottom: 14px; }
.decline-opt { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.decline-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-700); flex-shrink: 0; }
.prof-date { padding: 10px 0 4px 26px; border-bottom: 1px solid var(--line); }
.prof-date .field { margin-bottom: 8px; }
.prof-kv { margin-top: 20px; max-width: 880px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.prof-kv .kv-row span { flex-shrink: 0; }
.prof-kv .kv-row b { text-align: right; font-weight: 500; }
.prof-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.prof-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.prof-check { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: -4px 0 18px; cursor: pointer; }
.prof-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-700); }
.dec-count { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.dec-h { font-size: 15px; font-weight: 600; margin: 28px 0 10px; }
.dec-hidden { font-size: 13.5px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- Onboarding wizards sit on Soft Gray so the white card reads ----------- */
.onboard-shell, .onboard-surface { background: var(--soft-2); }
.onboard-card { box-shadow: none; border-color: var(--line); }

@media (max-width: 768px) {
  .dashboard { padding: 28px 16px 56px; }
  .top-header { padding: 0 16px; }
  .page-head h1, .welcome-content h1 { font-size: 26px; }
  .fig-value { font-size: 28px; }
  .stage-key { gap: 16px 28px; }
}
@media (prefers-reduced-motion: reduce) { .stage-seg { animation: none; } }