/* Two-Way Recruit stylesheet. Moved out of index.html in Round 123
   (2026-09-26); bump ?v= on the <link> in index.html when it changes. */
  /* ---- Design tokens ----------------------------------------------------
     Dark is the primary designed identity (energetic, GenZ-leaning --
     vivid coral accent + teal secondary against a near-black ground); light
     is a fully-supported second mode for daylight/outdoor use (a ballfield
     in July sun is real), not an afterthought. [data-theme] always wins;
     it's set synchronously above from localStorage or, absent that, from
     prefers-color-scheme -- so these bare-:root values are just the
     pre-JS/no-JS fallback and should stay identical to [data-theme="dark"]. */
  :root {
    /* Ties native control rendering (checkboxes, selects, scrollbars) to
       our explicit theme rather than the OS/browser's prefers-color-scheme
       -- without this, an explicit light data-theme on a dark-OS browser
       renders unchecked checkboxes as solid black boxes, clashing with the
       light card background around them. */
    color-scheme: dark;
    --ink: #f1f3f9;
    --ink-soft: #9aa1b5;
    --line: #2a2e3c;
    --bg: #0e1016;
    --card: #191c26;
    --card-2: #21252f;
    --map-land: #343a4a;
    --map-edge: #4d5467;
    --input-bg: #12141c;
    /* Round 135 (Brent, 2026-09-28): Carolina blue accent. The accent is
       kept for things you can click; --label is the third colour, for
       eyebrows and other emphasis that is not a control. */
    --accent: #4b9cd3;
    --accent-hover: #66ade0;
    --accent-ink: #06131f;
    --accent-soft: rgba(75, 156, 211, 0.18);
    --accent-soft-hover: rgba(75, 156, 211, 0.30);
    --accent-text: #8cc2e6;
    --label: #f2b84b;
    --done-fill: #34e0c4;
    --done-ink: #06201b;
    --ctl-shadow: rgba(0, 0, 0, 0.45);
    --accent2: #34e0c4;
    --accent2-soft: rgba(52, 224, 196, 0.14);
    --confirmed: #34e0c4;
    --ambiguous: #ffb648;
    --ambiguous-soft: rgba(255, 182, 72, 0.14);
    --projected: #6ea8ff;
    --info: #6ea8ff;
    --info-soft: rgba(110, 168, 255, 0.14);
    --danger: #ff5470;
    --danger-soft: rgba(255, 84, 112, 0.14);
    --opportunity: #7ee081;
    --opportunity-soft: rgba(126, 224, 129, 0.14);
    --flag: #ffcf5c;
    --flag-soft: rgba(255, 207, 92, 0.18);
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --ink: #1b1f24;
    --ink-soft: #5a6472;
    --line: #e2e5ea;
    --bg: #f7f8fb;
    --card: #ffffff;
    --card-2: #f1f2f6;
    --map-land: #d9dde5;
    --map-edge: #b3bac6;
    --input-bg: #ffffff;
    --accent: #2877b2;
    --accent-hover: #21669a;
    --accent-ink: #ffffff;
    --accent-soft: #e7f1f9;
    --accent-soft-hover: #d3e6f4;
    --accent-text: #1f5f8f;
    --label: #8a6400;
    --done-fill: #0b7d6d;
    --done-ink: #ffffff;
    --ctl-shadow: rgba(27, 31, 36, 0.16);
    --accent2: #0f9c88;
    --accent2-soft: #e2f7f3;
    --confirmed: #0f9c88;
    --ambiguous: #a4761c;
    --ambiguous-soft: #fbeee3;
    --projected: #3b5c9a;
    --info: #3b5c9a;
    --info-soft: #eef4fb;
    --danger: #c23b56;
    --danger-soft: #fbeae6;
    --opportunity: #2f7d5e;
    --opportunity-soft: #e6f1ec;
    --flag: #8a6400;
    --flag-soft: #fcf0cf;
  }
  * { box-sizing: border-box; }
  a { color: var(--accent); }
  a:visited { color: var(--accent); }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
  }
  header {
    padding: 20px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
  header h1 {
    font-size: 19px;
    margin: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  header .who {
    font-size: 13px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .theme-toggle {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-soft);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    flex: none;
  }
  .theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
  button, .btn {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    display: inline-block;
  }
  button.primary, a.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }
  button.link {
    border: none;
    background: none;
    color: var(--accent);
    padding: 0;
    text-decoration: underline;
  }
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 80px;
  }
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px;
    margin-bottom: 20px;
  }
  .card h2 {
    margin-top: 0;
    font-size: 20px;
  }
  .field { margin-bottom: 18px; }
  .field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink-soft);
  }
  .field input[type=text],
  .field input[type=email],
  .field input[type=password],
  .field input[type=number],
  .field input[type=url],
  .field input[type=date],
  .field select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    background: var(--input-bg);
    color: var(--ink);
  }
  .field input:focus,
  .field select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .check {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
  }
  .check input { margin: 0; }
  .check.checked {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .check.is-primary { opacity: 0.55; cursor: not-allowed; border-style: dashed; }
  .check .check-note { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
  .hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
  .error {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .notice {
    background: var(--info-soft);
    border: 1px solid var(--info);
    color: var(--info);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .tabs { display: flex; gap: 4px; margin-bottom: 20px; }
  .tabs button {
    flex: 1;
    border-radius: 6px;
  }
  .tabs button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  /* Round 117: every data table sits in one of these. A table cannot wrap below
     its widest cell, and without a scroller the Openings table pushed the
     whole page 100px wider than a phone. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
  th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  th.sortable:hover { color: var(--ink); }
  .school-row td:first-child { font-weight: 600; }
  .count { display: inline-block; margin-right: 6px; }
  .count.confirmed { color: var(--confirmed); }
  .count.ambiguous { color: var(--ambiguous); }
  .count.projected { color: var(--projected); }
  .legend {
    display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-soft);
    margin-bottom: 14px; flex-wrap: wrap;
  }
  .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
  .no-data { color: var(--ink-soft); font-style: italic; }
  tr.zero-row { opacity: 0.5; }
  tr.zero-row td,
  tr.zero-row .count { color: var(--ink-soft); }
  .zero-tag {
    font-size: 11px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .expandable-cell {
    cursor: pointer;
    display: inline-flex;
    align-items: flex-start;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
  }
  .expandable-cell:hover { background: var(--bg); }
  .expandable-cell.expanded { background: var(--accent-soft); }
  .expand-caret {
    display: inline-block;
    margin-right: 6px;
    margin-top: 1px;
    color: var(--ink-soft);
    transition: transform 0.15s ease;
  }
  .expand-caret.open { transform: rotate(90deg); }
  .count.zero-cell { color: var(--ink-soft); }
  .pos-cell { display: flex; flex-direction: column; gap: 2px; }
  .coverage-note {
    font-size: 11px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .gap-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--opportunity-soft);
    color: var(--opportunity);
    white-space: nowrap;
    width: fit-content;
  }
  .deficit-row { display: flex; align-items: baseline; gap: 5px; }
  .deficit-count {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }
  .deficit-count.has-opening { color: var(--opportunity); }
  .deficit-label {
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .confirmed-note {
    font-size: 11px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    /* Round 91: was white-space:nowrap. This class started as a one-line
       numeric label and got reused for prose -- a School Detail history note
       ran straight out of the card and off the page. Prose is now the default
       and the one place that genuinely needs a single line, the Depth Coverage
       table cell, says so inline. overflow-wrap handles a long email or URL,
       which would otherwise overflow even when wrapping is allowed. */
    overflow-wrap: anywhere;
  }
  tr.detail-row td {
    background: var(--accent-soft);
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .detail-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 13px;
  }
  /* Round 117: a flex item drops the space before it, so "Depth coverage:
     <strong>" read "Depth coverage:-1.59". The gap puts the space back. */
  .detail-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .detail-chip .dot { margin-right: 1px; }
  .detail-title { font-weight: 600; margin-bottom: 8px; }
  .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin: 28px 0 10px; }
  .profile-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  /* Quick-jump bar shown only when both a Positions table and a Pitching
     table are on the page -- the Positions table can run to 80+ rows, so
     without this Pitching can sit thousands of pixels below the fold and
     read as "missing" rather than "further down." Sticky so it stays
     reachable while scrolling through a long Positions table. */
  .section-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    background: var(--bg);
    padding: 10px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .section-nav a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: var(--accent-soft);
    padding: 6px 12px;
    border-radius: 999px;
  }
  .section-nav a:hover { text-decoration: underline; }
  html { scroll-behavior: smooth; }
  .loading { color: var(--ink-soft); padding: 40px 0; text-align: center; }
  .southwestern-flag { font-size: 11.5px; color: var(--ink-soft); }
  .school-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
  .school-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 20px;
  }
  .fact { display: flex; flex-direction: column; gap: 2px; }
  .fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
  .fact-value { font-size: 14px; font-weight: 600; }

  /* ---- CSS Profile badge + measurables status pills ------------------- */
  .badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
    display: inline-block;
  }
  .badge-required { background: var(--accent-soft); color: var(--accent); }
  .badge-not-required { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
  .badge-unknown { background: var(--bg); color: var(--ink-soft); border: 1px dashed var(--line); }
  .badge-needs-review { background: var(--ambiguous-soft); color: var(--ambiguous); }
  .badge-confirmed { background: var(--accent-soft); color: var(--accent); }

  /* ---- Measurables screen --------------------------------------------- */
  .measurable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .measurable-row:last-child { border-bottom: none; }
  .measurable-key { font-weight: 600; font-size: 13px; }
  .measurable-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
  .measurable-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .physicality-table td, .physicality-table th { white-space: nowrap; }

  /* ---- Recruiting Tracker: general to-dos (checklist) + school board (kanban) */
  .board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 12px;
  }
  .board-col {
    flex: 0 0 240px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    min-height: 80px;
  }
  .board-col.drag-over { border-color: var(--accent); background: var(--accent-soft); }
  .board-col h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    margin: 2px 4px 10px;
  }
  .board-col h3 .stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 10.5px;
    font-weight: 700;
    flex: none;
  }
  .board-col h3 .stage-name { flex: 1; }
  .board-col h3 .n { color: var(--ink); font-weight: 700; text-transform: none; letter-spacing: 0; }
  .kcard.closed { opacity: .72; }
  .kcard {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    font-size: 13px;
    -webkit-user-drag: element;
    user-select: none;
  }
  .kcard:active { cursor: grabbing; }
  .kcard.dragging { opacity: 0.4; }
  .kcard .kname { font-weight: 600; margin-bottom: 4px; }
  .kcard .kmeta { color: var(--ink-soft); font-size: 11.5px; }
  .kcard .kbar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
  .kcard .kbar-fill { height: 100%; background: var(--accent); }
  .kcard .knext {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 11.5px;
    color: var(--ink);
  }
  .kcard .knext .knext-label {
    color: var(--ink-soft);
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
  }
  .kcard .knext.all-done { color: var(--opportunity); }
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(20,24,20,0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px; overflow-y: auto; z-index: 50;
  }
  .modal { background: var(--card); border-radius: 10px; padding: 24px 26px; max-width: 480px; width: 100%; }
  .modal h2 { margin-top: 0; font-size: 18px; }
  .modal .closeRow { text-align: right; margin-top: 16px; }
  .ms-sheet { max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; }
  .ms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ms-list-head { display: flex; gap: 6px; margin: 4px 0 6px; }
  .ms-list-head input { flex: 1; min-width: 0; }
  .ms-list { overflow-y: auto; min-height: 120px; max-height: 38vh; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
  .ms-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; cursor: pointer; }
  .ms-row .ms-name { flex: 1; }
  .ms-sheet .closeRow { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  @media (max-width: 560px) { .ms-fields { grid-template-columns: 1fr; } }
  .remove-choice:hover, .remove-choice:focus-visible { background: var(--accent-soft); outline: none; }
  .action-item {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
  }
  .action-item:last-child { border-bottom: none; }
  .card > .action-item:first-child { padding-top: 0; } /* 2026-09-30: the card's 28px is the gap; the row's 8px on top of it read as too much */
  .action-item .a-title { flex: 1; }
  .action-item .a-title .a-guidance { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
  .action-item.done .a-title { color: var(--ink-soft); }
  .stage-select { font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
  .foundation-group { margin-bottom: 26px; }
  .foundation-now h3 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .foundation-folds { margin-top: 20px; }
  .fold-line {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 9px 2px; margin: 6px 0; font: inherit; font-size: 12.5px;
    color: var(--ink-soft); cursor: pointer; border-top: 1px solid var(--line);
  }
  .fold-line:hover { color: var(--ink); }
  .action-item .a-meta { display: block; margin-top: 3px; font-size: 11px; }
  .action-item .a-last { color: var(--ink-soft); margin-right: 10px; }
  .a-why {
    background: none; border: none; padding: 0; font: inherit; font-size: 11px;
    color: var(--accent); cursor: pointer; text-decoration: underline;
  }
  .action-item .a-guidance[hidden] { display: none; }
  .foundation-group h3 { font-size: 14px; margin: 0 0 10px; }
  .phase-cal {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
  }
  .plan-nav { display: flex; gap: 8px; margin-bottom: 18px; }
  .plan-nav button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  /* For a long form/table with no other way back to the top -- keeps a
     way out reachable no matter how far you've scrolled. */
  .plan-nav.sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .add-school-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .add-school-row select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
  /* 2026-09-29 (Brent): the Add a school field. "so it isn't the boring black
     on gray", then "looks like the app rather than a windows drop down": a
     tinted Go to field (plus left, chevron right) and the app's own list. */
  .as-combo { position: relative; flex: 1; min-width: 0; }
  .as-combo input {
    width: 100%; box-sizing: border-box; min-height: var(--ctl-h); padding: 0 40px 0 38px;
    border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600;
    background-color: var(--accent-soft); color: var(--accent-text);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%238cc2e6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 2.5v9M2.5 7h9'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238cc2e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat; background-position: left 15px center, right 16px center; background-size: 14px 14px, 12px 12px;
    transition: background-color .15s ease, border-color .15s ease;
  }
  :root[data-theme="light"] .as-combo input {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231f5f8f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 2.5v9M2.5 7h9'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231f5f8f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  }
  .as-combo input::placeholder { color: var(--accent-text); opacity: 1; }
  .as-combo input:hover { background-color: var(--accent-soft-hover); }
  .as-combo input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background-color: var(--card); color: var(--ink); font-weight: 500; }
  .as-combo input:focus::placeholder { color: var(--ink-soft); }
  .as-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
    max-height: 320px; overflow-y: auto; padding: 6px;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  }
  .as-opt { padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
  .as-opt strong { color: var(--accent-text); font-weight: 700; }
  .as-opt:hover, .as-opt.hi { background: var(--accent-soft); color: var(--accent-text); }
  .as-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }
  #addSchoolBtn:disabled { opacity: .45; cursor: default; }

  /* ---- Onboarding wizard (Round 40) -------------------------------------
     One question per screen, Noom-paced. Centered card, progress bar up
     top, a short eyebrow/title/subtitle stack, then the single input for
     this step. Kept visually calmer than the rest of the app (no gradient
     text here) so the accent color reads as "your answer" on the choice
     buttons and progress fill, not as chrome. */
  .wizard-card {
    max-width: 460px;
    margin: 6vh auto 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px 30px 28px;
  }
  .wizard-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 2px;
    transition: width 0.3s ease;
  }
  .wizard-step-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
  }
  .wizard-eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--label);
    margin-bottom: 6px;
  }
  .wizard-title {
    font-size: 24px;
    margin: 0 0 8px;
    text-wrap: balance;
  }
  .wizard-subtitle {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .wizard-body { margin-bottom: 8px; }
  .wizard-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .wizard-choice {
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--card-2);
    color: var(--ink);
    padding: 12px 18px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .wizard-choice:hover { border-color: var(--accent); }
  .wizard-choice.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
  }
  .wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .wizard-nav button.primary { padding: 9px 20px; }
  .wizard-review {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .wizard-review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .wizard-review-row:last-child { border-bottom: none; }
  .wizard-review-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }
  .wizard-review-value {
    font-size: 14.5px;
    color: var(--ink);
    word-break: break-word;
  }
  @media (max-width: 540px) {
    .wizard-card { margin-top: 0; border-radius: 0; min-height: 100vh; padding: 24px 20px; }
  }
  /* ---- Round 122: sign-up screens 4-8 ---- */
  .wizard-nav { gap: 12px; }
  .wizard-nav > .btn { white-space: nowrap; flex-shrink: 0; }
  .us-map { display: block; width: 100%; height: auto; }
  /* Round 124: the land had the panel's own colour, so only the dots showed. */
  .us-map .um-land { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 2; }
  .us-map .um-dot { stroke: var(--card); stroke-width: 3; }
  .us-map .um-thin { fill: var(--accent); }
  .us-map .um-open { fill: var(--ambiguous); }
  .us-map .um-closed, .us-map .um-dim { fill: var(--ink-soft); opacity: 0.55; }
  .us-map .um-tie { fill: var(--accent); }
  .us-map .um-city { fill: var(--accent2); }
  .us-map .um-home { fill: var(--ink); stroke: var(--card); stroke-width: 3; }
  .su-map-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 12px; }
  /* ---- Round 131: the Schools tab map, coloured by the class word ---- */
  .us-map .um-cw-open { fill: var(--confirmed); }
  .us-map .um-cw-filling { fill: var(--ambiguous); }
  .us-map .um-cw-full { fill: var(--ink-soft); }
  .us-map .um-cw-unknown { fill: var(--card); stroke: var(--ink-soft); stroke-width: 5; }
  .us-map .um-hit { fill: transparent; }
  .us-map .um-tap { cursor: pointer; outline: none; }
  .us-map .um-tap:hover .um-dot, .us-map .um-tap:focus-visible .um-dot { stroke: var(--ink); stroke-width: 5; }
  .su-swatch.cw-open { background: var(--confirmed); }
  .su-swatch.cw-filling { background: var(--ambiguous); }
  .su-swatch.cw-full { background: var(--ink-soft); }
  .su-swatch.cw-unknown { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink-soft); }
  .sm-section { margin-bottom: 18px; }
  .sm-card .us-map { max-height: 380px; }
  .sm-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin-top: 10px; font-size: 13.5px; }
  .su-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; font-size: 13.5px; }
  .su-legend-row { display: flex; align-items: center; gap: 9px; }
  .su-swatch { width: 12px; height: 12px; border-radius: 6px; flex-shrink: 0; }
  .su-swatch.thin, .su-swatch.tie { background: var(--accent); }
  .su-swatch.open { background: var(--ambiguous); }
  .su-swatch.closed { background: var(--ink-soft); opacity: 0.55; }
  .su-swatch.city { background: var(--accent2); }
  .su-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }
  .su-city { margin-top: 8px; padding: 9px 11px; border-radius: 9px; background: var(--accent2-soft); font-size: 13.5px; }
  .su-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .su-grid2 label { font-size: 12.5px; color: var(--ink-soft); display: block; margin-bottom: 4px; }
  .su-grid2 select, .su-grid2 input { width: 100%; box-sizing: border-box; }
  .su-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; }
  .su-opt-sub { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
  .su-seg { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: var(--card-2); margin-bottom: 10px; }
  .su-seg button { flex: 1; font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); cursor: pointer; }
  .su-seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
  .su-count { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent2); background: var(--accent2-soft); padding: 3px 9px; border-radius: 10px; }
  .su-rows { display: flex; flex-direction: column; gap: 8px; }
  .su-group-head { margin: 8px 2px 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
  .su-group-head:first-child { margin-top: 0; }
  .su-group-n { font-weight: 600; opacity: 0.8; }
  .su-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
  .su-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .su-row-name { font-weight: 700; font-size: 15px; }
  .su-row-word { font-size: 12.5px; color: var(--ink-soft); }
  .su-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .su-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); }
  .su-chip.thin { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  .su-chip.tie { background: var(--accent2-soft); color: var(--accent2); border-color: transparent; }
  .su-add { flex-shrink: 0; min-width: 72px; min-height: 40px; }
  .su-add.on { background: var(--accent2); border-color: var(--accent2); color: var(--bg); }
  .su-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  .su-tick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); cursor: pointer; font-size: 14.5px; }
  .su-tick.on { border-color: var(--accent2); background: var(--accent2-soft); }
  .su-tick input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent2); }
  .su-skip { display: block; margin: 10px auto 0; font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: 8px 12px; }

  /* ---- Top-level nav (Home / On Deck / Openings / Profile), added for the
     2026-09 IA redesign -- see project doc tracker-ia-redesign-2026-09-04.
     Lives in <header>'s own DOM slot, not inside #app, so it survives every
     renderX() wholesale-innerHTML repaint untouched. Empty/hidden until a
     signed-in recruit has a completed profile (see paintAppNav(null)). */
  .app-nav {
    display: flex;
    gap: 2px;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .app-nav:empty { display: none; }
  .nav-tab {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 16px 10px;
    white-space: nowrap;
  }
  .nav-tab:hover { color: var(--ink); }
  .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ---- Home: recruiting-period banner ---- */
  .period-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .period-collapsed .pc-status { font-size: 14px; }
  .pc-toggle {
    font-size: 12px;
    padding: 5px 10px;
    color: var(--ink-soft);
  }
  .period-full { display: grid; gap: 8px; margin-top: 16px; }
  /* An unqualified `.period-full { display: grid }` beats the UA stylesheet's
     `[hidden] { display: none }` -- author rules always win over UA rules in
     the cascade, regardless of specificity -- so the collapsed state never
     actually collapsed and the toggle button looked clickable but did
     nothing. This is the fix: an explicit override for the hidden state. */
  .period-full[hidden] { display: none; }
  [data-score-form][hidden], [data-score-err][hidden], .ms-sheet [hidden] { display: none !important; }
  .period-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--card-2);
    flex-wrap: wrap;
  }
  .period-row .div-tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11.5px;
    flex: none;
    width: 24px;
    color: var(--ink-soft);
  }
  .period-row .p-name { font-weight: 600; font-size: 13px; flex: none; }
  .period-row .p-detail { font-size: 12px; color: var(--ink-soft); }
  .period-row.contact .p-name { color: var(--opportunity); }
  .period-row.quiet .p-name { color: var(--ink-soft); }
  .period-row.dead .p-name { color: var(--danger); }
  /* ---- Home: two-column layout ----
     Plain source-order grid, no template-areas needed: on mobile it's a
     single column so .home-main (actions) stacks above .home-side
     (calendar) simply because it comes first in the DOM; on desktop the
     same source order lands .home-main in the left column and .home-side
     in the right, which is exactly the "actions left half, calendar right
     half" layout requested -- no reordering trick required either way. */
  .home-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .home-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  @media (min-width: 861px) {
    .home-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  }
  .ondeck-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 12px;
    padding: 20px 22px;
  }
  .ondeck-cta .oc-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 4px; color: var(--accent-ink); }
  .ondeck-cta .oc-sub { font-size: 13px; color: var(--accent-ink); opacity: 0.88; }
  .ondeck-cta button {
    flex: none;
    background: var(--accent-ink);
    color: var(--accent);
    border: none;
    font-weight: 700;
  }
  .action-list, .target-list { display: flex; flex-direction: column; gap: 8px; }
  .action-row, .target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink);
  }
  .action-row:hover, .target-row:hover { border-color: var(--accent); }
  /* Changes box (2026-09-18): what changed at your schools since last visit. */
  .change-list { display: flex; flex-direction: column; gap: 8px; }
  /* Same cascade trap as .period-full above: the unqualified display:flex
     beats the UA `[hidden] { display: none }`, so the overflow list would
     stay visible. Explicit override for the collapsed state. */
  .change-list[hidden] { display: none; }
  .change-earlier {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-soft); margin: 4px 2px 0;
  }
  .target-row .tr-kind { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); margin-bottom: 2px; }
  .target-row .tr-kind.coach { color: var(--danger); }
  .target-row .tr-flag { font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 2px; }
  .action-row .ar-title, .target-row .tr-name { font-weight: 600; font-size: 13.5px; }
  .action-row .ar-sub, .check-row .ar-sub, .target-row .tr-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
  .target-row .tr-touch { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
  .target-row .tr-touch.stale { color: var(--danger); font-weight: 600; }
  .action-row .ar-go, .target-row .tr-go { flex: none; font-size: 13px; color: var(--accent); }
  /* Home, 2026-09-18 redesign: deadline-first two columns. */
  .home-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .home-card-head .section-title { margin: 0; }
  .home-card-head .hc-meta { font-size: 12px; color: var(--ink-soft); }
  .action-row .ar-due { flex: none; font-size: 12.5px; font-weight: 700; color: var(--label); text-align: right; white-space: nowrap; }
  .action-row .ar-due.overdue { color: var(--danger); }
  .action-row .ar-due.today { color: var(--danger); }
  /* Checkable personal rows on Home (2026-09-18): tick it off right here. */
  .check-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
  .check-row:hover { border-color: var(--accent); }
  /* Round 124: the Done pill sits at the right of a Home row, Undo after it. */
  .check-row .check-btn { order: 2; }
  .check-row .cr-undo { order: 3; }
  .check-row .cr-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
  .check-row.is-done .ar-title { color: var(--ink-soft); }
  .check-row[hidden] { display: none; }
  .check-row .cr-undo { flex: none; font-size: 12px; }

  /* ---- Profile ---- */
  .profile-id { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
  .profile-id .p-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
  .profile-id .p-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
  .account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .account-row:last-child { border-bottom: none; }
  .account-row .ac-label { flex: 1; min-width: 0; font-size: 13.5px; }
  .ac-check {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    border: 1.5px solid var(--line);
    color: var(--ink-soft);
  }
  .ac-check.done { background: var(--opportunity-soft); border-color: var(--opportunity); color: var(--opportunity); }
  .ac-add { flex: none; font-size: 11.5px; padding: 5px 10px; }
  .mx-meta { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 400; }
  .mx-edit { padding: 3px 10px; font-size: 12px; }
  .mx-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
  .mx-form[hidden] { display: none; }
  .mx-form .error { flex-basis: 100%; }
  .ms-sub-label { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
  .stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .stat-row:last-child { border-bottom: none; }
  .stat-row .s-label { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-soft); }
  .stat-row .s-value { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
  .stat-row .s-compare {
    flex: none;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .s-compare.meets { background: var(--opportunity-soft); color: var(--opportunity); }
  .s-compare.mid { background: var(--ambiguous-soft); color: var(--ambiguous); }
  .s-compare.below { background: var(--danger-soft); color: var(--danger); }
  .s-compare.none { background: var(--card-2); color: var(--ink-soft); }
  .profile-tabs { display: flex; gap: 4px; margin: 18px 0 16px; flex-wrap: wrap; }
  .profile-tabs button {
    border-radius: 999px;
    font-size: 12.5px;
    padding: 6px 14px;
  }
  .profile-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .empty-state {
    text-align: center;
    padding: 22px 16px;
    border: 1px dashed var(--line);
    border-radius: 10px;
  }
  .empty-state .e-title { font-weight: 600; margin-bottom: 4px; }
  .empty-state .e-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }

  /* ---- On Deck (By School list view + Personal) ---- */
  .deck-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .deck-toolbar input[type=text] {
    flex: 1 1 200px; min-width: 160px; padding: 9px 10px; border: 1px solid var(--line);
    border-radius: 6px; font: inherit; background: var(--input-bg); color: var(--ink);
  }
  .deck-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .deck-chips button {
    font-size: 11.5px;
    padding: 4px 11px;
    border-radius: 999px;
  }
  .deck-chips button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .deck-chips button.attn.active { background: var(--danger); border-color: var(--danger); }
  .stage-section { margin-bottom: 20px; }
  .stage-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-radius: 8px; background: var(--card-2);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--ink-soft); margin-bottom: 8px;
  }
  .deck-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px; font: inherit; color: var(--ink); cursor: pointer;
  }
  .deck-row:hover { border-color: var(--accent); }
  .deck-row .dr-main { flex: 1; min-width: 0; }
  .deck-row .dr-school { font-weight: 600; font-size: 13.5px; }
  .deck-row .dr-next { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .deck-row .dr-doors { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
  .deck-row .dr-to { font-size: 12px; color: var(--ink); margin-top: 2px; font-weight: 500; }
  .deck-row .dr-doors .sg-doors { margin-left: 4px; }
  .deck-row .dr-to .sg-doors { margin-left: 8px; } /* Round 143: Send email beside the To line */
  .deck-row .dr-touch { flex: none; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .deck-row .dr-touch.stale { color: var(--danger); font-weight: 600; }
  .deck-row .dr-log { flex: none; }
  .deck-row { flex-wrap: wrap; }
  .deck-row .dr-actions { flex: none; display: flex; gap: 6px; }
  .deck-row .dr-confirm { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
  .deck-row .dr-confirm span { flex: 1; min-width: 160px; }
  .deck-row .dr-confirm[hidden] { display: none; }
  /* Round 144: a row's Advice takes the row's full width, under it (on a phone the text column is ~130px) */
  .deck-row .dr-adv { flex-basis: 100%; }
  .deck-row .dr-adv .adv { margin-top: 0; }
  .next-tag {
    display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
    border-radius: 4px; padding: 1px 6px; margin-right: 5px; font-weight: 700;
    background: var(--info-soft); color: var(--info);
  }
  .next-tag.logged { background: var(--opportunity-soft); color: var(--opportunity); }
  .next-tag.later { background: var(--card-2); color: var(--ink-soft); }
  /* ---- On Deck action cards (Round 75) ---- */
  .act-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
  }
  .act-card .act-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .act-card .act-main { flex: 1; min-width: 180px; }
  /* Round 143: a put-away you-pick card leaves this note until reload */
  .act-card.put-away-note { background: transparent; border-style: dashed; box-shadow: none; }
  .act-card.put-away-note .act-title { color: var(--ink-soft); }
  .act-card .act-title { font-weight: 600; font-size: 14px; }
  .act-card .act-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
  .act-card .act-actions { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
  /* Round 94: the steps a school card owes, one row each. Always visible --
     they are the point of the card, not detail behind a toggle. */
  /* Round 95: a task that has not opened yet. Visible so its arrival is never
     a surprise, dimmed so it never reads as something to do now. */
  .deck-row.soon { opacity: 0.55; cursor: default; }
  .act-card .sg-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
  .act-card .sg-step {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
    padding: 8px 10px; background: var(--bg); border-radius: 8px;
  }
  .act-card .sg-step-title { font-size: 13px; flex: 1 1 150px; }
  /* Round 114: the Advice pill gets its own full-width line under the step, so
     it opens across the card rather than down a narrow title column. */
  .act-card .sg-step > .adv, .action-item > .adv { flex-basis: 100%; margin-top: 0; }
  .act-card .sg-step-actions { flex: none; display: flex; gap: 6px; align-items: center; }
  .sg-doors { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
  .sg-door {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--card);
  }
  .sg-door:hover { border-color: var(--accent); }
  .undo-notice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
  .undo-notice > span { flex: 1 1 260px; }
  .h-wrong { margin-left: 8px; font-size: 12px; }
  .sg-door.broken { color: var(--ink-soft); border-style: dashed; cursor: default; font-weight: 500; }
  /* Round 114: the Advice pill (B4). A <details>, so it opens and closes with
     no wiring and nothing else on the page moves until it is tapped. */
  .adv { display: block; margin-top: 4px; font-weight: normal; }
  .adv > summary { display: inline-block; list-style: none; cursor: pointer; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 20px; border: 1px solid var(--accent2); color: var(--accent2); background: var(--accent2-soft); }
  .adv > summary::-webkit-details-marker { display: none; }
  .adv[open] > summary { background: var(--accent2); color: var(--card); }
  .adv-body { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--accent2-soft); font-size: 13px; line-height: 1.4; color: var(--ink); }
  .adv-body ul { margin: 0; padding-left: 18px; }
  .adv-body li + li { margin-top: 3px; }
  .adv-facts { margin-top: 8px; }
  .eo-advice { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
  .eo-advice .adv { margin: 0; }
  .eo-advice .adv[open] { flex-basis: 100%; }
  .adv-facts-head { font-weight: 600; margin-bottom: 2px; }
  .act-card .act-schools { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .act-card .act-schools .deck-row:last-child { margin-bottom: 0; }
  .stage-section-head.fold { cursor: pointer; }
  /* ---- Commitment: outcome tag, confirm sheet, decline list ---- */
  .committed-tag { color: var(--opportunity); border-color: var(--opportunity); font-weight: 700; }
  /* ---- Coaching staff: head coach blue, recruiting coordinator green ---- */
  .kcard.coach-hc { border-left: 4px solid var(--info); }
  .kcard.coach-rc { border-left: 4px solid var(--opportunity); }
  .kcard.coach-hc .kmeta.role { color: var(--info); font-weight: 600; }
  .kcard.coach-rc .kmeta.role { color: var(--opportunity); font-weight: 600; }
  /* ---- A program change at the recruit's own position ---- */
  .history-item.h-flagged {
    background: var(--flag-soft); border-radius: 8px;
    padding: 8px 10px; margin-left: -10px; margin-right: -10px;
  }
  .history-item.h-flagged .h-title { font-weight: 600; }
  .flag-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--flag); color: var(--bg);
  }
  .committed-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; margin-bottom: 14px; cursor: pointer;
    border: 1px solid var(--opportunity); border-radius: 10px; background: var(--opportunity-soft);
  }
  .committed-banner:hover { filter: brightness(0.97); }
  .committed-banner .cb-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--opportunity);
  }
  .committed-banner .cb-name { font-size: 15px; font-weight: 700; margin-top: 2px; }
  .committed-banner .cb-go { flex: none; font-size: 12px; color: var(--opportunity); font-weight: 600; }
  .commit-breakdown { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; }
  .commit-breakdown li { margin-bottom: 3px; }
  .ci-how { color: var(--ink-soft); font-size: 11.5px; font-weight: normal; }
  .dc-tier { margin-bottom: 16px; }
  .dc-tier-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 2px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .stage-section-head.fold:hover { color: var(--ink); }

  /* ---- Openings: scope toggle, search, fit ---- */
  .opening-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
  .opening-toolbar input[type=text] {
    flex: 1 1 200px; min-width: 160px; padding: 9px 10px; border: 1px solid var(--line);
    border-radius: 6px; font: inherit; background: var(--input-bg); color: var(--ink);
  }
  tr.fit-row td { background: var(--opportunity-soft); }
  .fit-badge {
    display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--opportunity); color: var(--bg); border-radius: 4px; padding: 1px 6px; margin-left: 6px; font-weight: 700;
  }

  /* ---- Round 121: still recruiting your position, the class word ---- */
  .openings-headline .oh-big { font-size: 18px; line-height: 1.35; }
  .openings-for-you .ofy-line { font-size: 15px; margin-bottom: 2px; }
  .cw { font-weight: 700; white-space: nowrap; }
  .cw-open { color: var(--confirmed); }
  .cw-filling { color: var(--ambiguous); }
  .cw-full, .cw-unknown { color: var(--ink-soft); }

  /* ---- School Detail: history log + action queue ---- */
  .history-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); margin-left: 5px; }
  .history-item { position: relative; padding: 0 0 14px 18px; }
  .history-item:last-child { padding-bottom: 0; }
  .history-item::before {
    content: ''; position: absolute; left: -6px; top: 3px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--card); border: 2px solid var(--accent);
  }
  .history-item .h-date { font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
  .history-item .h-title { font-size: 13px; }

  /* ---- Events (Round 70) ---- */
  .ev-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
  .ev-card.open { border-color: var(--accent); }
  .ev-head { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 12px; font: inherit; color: var(--ink); cursor: pointer; }
  .ev-date { flex: none; width: 46px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; background: var(--card-2); }
  .ev-mon { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); font-weight: 700; }
  .ev-day { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .ev-main { flex: 1; min-width: 0; }
  .ev-name { font-weight: 600; font-size: 14px; }
  .ev-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .ev-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .ncaa-band { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
  .ncaa-band .nb-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 6px; }
  .ev-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
  /* Round 103: the daily inbound check and its sweep */
  .inbound-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
  .inbound-box .ib-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
  .inbound-box .ib-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
  .inbound-box .ib-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .inbound-box.quiet { border-color: var(--line); padding: 10px 16px; font-size: 13px; color: var(--ink-soft); }
  .linkish { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
  .inb-sofar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
  .inb-school { margin: 4px 0 10px; }
  .inb-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
  .inb-chip { text-align: left; background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--ink); }
  .inb-chip:hover, .inb-chip.on { border-color: var(--accent); background: var(--accent-soft); }
  .inb-chip .ic-label { display: block; font-weight: 600; font-size: 14px; }
  .inb-chip .ic-hint { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .inb-meet { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  /* Round 133: forwarded emails at the top of the daily check, and the address */
  .inbound-box.fwd-box { display: block; }
  .fwd-box .fwd-ask, .fwd-box .fwd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
  .fwd-box .fwd-text { flex: 1 1 260px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
  .fwd-box .fwd-hint { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .fwd-box .fwd-actions { display: flex; align-items: center; gap: 12px; }
  .fwd-addr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .fwd-addr { font-size: 14px; padding: 4px 8px; border-radius: 6px; background: var(--input-bg); border: 1px solid var(--line); overflow-wrap: anywhere; }
  .fwd-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .fwd-add-row input { flex: 1 1 200px; min-width: 0; }
  .ev-chip.done { color: var(--opportunity); border-color: var(--opportunity); background: var(--opportunity-soft); }
  .ev-chip.overdue { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
  .ev-chip.live { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  .ev-chip.muted { opacity: 0.7; }
  .ev-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px 70px; font-size: 13px; }
  .ev-body { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
  .ev-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; margin-top: 4px; }
  .ev-task { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
  .ev-task.is-done { opacity: 0.7; }
  .ev-task-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; margin-right: 6px; }
  .ev-conv { border-left: 3px solid var(--accent-soft); padding: 4px 0 4px 10px; font-size: 13px; }
  .ev-conv-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
  .ev-conv-meta, .ev-conv-sub { font-size: 12px; color: var(--ink-soft); }
  .ev-conv-notes { font-size: 13px; margin-top: 2px; }
  .ev-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .ev-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
  .ev-mini { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); }
  .ev-mini:first-of-type { border-top: 0; }
  .ev-mini-date { flex: none; width: 92px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
  @media (max-width: 480px) { .ev-ask { padding-left: 12px; } }
  /* ---- Event school lists (Round 71) ---- */
  .es-list { max-height: 44vh; }
  .es-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; padding: 8px 2px 2px; }
  .es-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
  .es-results { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .es-hit { text-align: left; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
  .eo-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
  .eo-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .eo-row:first-child { border-top: 0; }
  .eo-row.is-sent { opacity: 0.65; }
  .eo-main { flex: 1; min-width: 150px; }
  .eo-btns { display: flex; gap: 6px; flex: none; margin-left: auto; }
  .eo-name { font-weight: 600; font-size: 14px; }
  .eo-to { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
  .eo-talked { color: var(--accent); border-color: var(--accent); }
  .eo-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
  .eo-ask > span { flex: 1 1 260px; min-width: 0; line-height: 1.45; }
  .eo-ask > .btn { flex: none; }
  a.btn { text-decoration: none; display: inline-flex; align-items: center; }

  /* Round 124 (Brent): one Done control everywhere, never a checkbox. An
     outlined teal pill with an empty ring; done, it fills teal and the ring
     becomes a tick. --bg reads on --accent2 in both themes. */
  .done-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 8px; border-radius: 999px; border: 1.5px solid var(--accent2); background: transparent; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  .done-btn:hover { background: color-mix(in srgb, var(--accent2) 14%, transparent); }
  .done-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
  .done-btn:disabled { opacity: 0.6; cursor: progress; }
  .done-btn .db-ico { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--accent2); box-sizing: border-box; flex: none; }
  .done-btn.is-done, .check-row.is-done .done-btn { background: var(--accent2); border-color: var(--accent2); color: var(--bg); }
  .done-btn.is-done:hover, .check-row.is-done .done-btn:hover { background: color-mix(in srgb, var(--accent2) 85%, var(--ink)); }
  .done-btn.is-done .db-ico, .check-row.is-done .done-btn .db-ico { border-color: transparent; }
  .done-btn.is-done .db-ico::after, .check-row.is-done .done-btn .db-ico::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  @keyframes db-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
  .done-btn.db-pop { animation: db-pop .34s cubic-bezier(.3,1.6,.5,1); }
  @media (prefers-reduced-motion: reduce) { .done-btn.db-pop { animation: none; } .done-btn { transition: none; } }

/* Round 126 (B6): the pop. Dots burst from a Done; the row swells and fades;
   the counter bumps; the next basic slides in. Nothing moves under
   prefers-reduced-motion. */
.done-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 9999; }
.done-burst span { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent2); animation: db-burst .6s cubic-bezier(.2,.7,.3,1) forwards; }
.done-burst span:nth-child(3n) { background: var(--accent); }
.done-burst span:nth-child(3n+1) { width: 6px; height: 6px; }
@keyframes db-burst { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.pop-away { animation: pop-away .3s ease-in forwards; transform-origin: center; }
@keyframes pop-away { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.025); opacity: 1; }
  100% { transform: scale(.97); opacity: 0; } }
.hc-meta.count-bump { display: inline-block; animation: count-bump .45s ease-out; }
@keyframes count-bump { 40% { transform: scale(1.2); color: var(--accent2); } }
.basics-slide-in { animation: basics-in .32s ease-out; }
@keyframes basics-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.basics-more { margin-top: 8px; padding: 3px 10px; font-size: 12px; }
/* .check-row is display:flex, which beats the hidden attribute on its own. */
.check-row[data-basics-queued][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .done-burst { display: none; }
  .pop-away, .hc-meta.count-bump, .basics-slide-in { animation: none; }
}

/* Round 128: "View all N schools" at the foot of a card showing three. */
.act-card .act-more { display: block; margin: 10px auto 0; font-size: 12.5px; }

/* Round 129 (B6): the quiet slide for Put it off / Dismiss / Not for me. */
.slide-away { animation: slide-away .26s ease-in forwards; pointer-events: none; }
@keyframes slide-away { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
@media (prefers-reduced-motion: reduce) { .slide-away { animation: none; } }

/* Round 130: "Start here" as an eyebrow above the action. */
.action-item .a-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--label); margin-bottom: 3px; }
/* Round 130: Undo after a done row pops away. */
.undo-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9998;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  animation: basics-in .25s ease-out; max-width: calc(100vw - 32px); }
.undo-toast-btn { background: none; border: none; color: var(--accent2); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0; }
@media (prefers-reduced-motion: reduce) { .undo-toast { animation: none; } }

/* ---- Round 135 (Brent, 2026-09-28): the four controls -------------------
   One family, one height, one shape. Primary: a solid pill, at most one per
   card, the card's main action. Go to (and every other secondary button): the
   same pill tinted; with an arrow when it takes you to another screen. Done:
   the same pill outlined teal, filled when done. Quiet: text only, for small
   actions we don't want to invite (Remove, Not a coach). Mockup: the "Two-Way
   Recruit button system" canvas, board "Refined: Carolina blue". */
:root { --ctl-h: 36px; --ctl-h-sm: 30px; }
@media (pointer: coarse) { :root { --ctl-h: 44px; --ctl-h-sm: 36px; } }
.btn, a.btn, button.primary, .sg-door, .ar-go, .tr-go, .cb-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-h); padding: 5px 16px; border-radius: 999px; border: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box;
  background: var(--accent-soft); color: var(--accent-text);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
}
a.btn:visited, a.sg-door:visited { color: var(--accent-text); }
/* The row affordances had their own older, more specific colour and size. */
.action-row .ar-go, .target-row .tr-go, .committed-banner .cb-go { color: var(--accent-text); font-size: 14px; font-weight: 600; }
.btn:hover, a.btn:hover, .sg-door:hover,
.cr-body:hover .ar-go, .action-row:hover .ar-go, .target-row:hover .tr-go, .committed-banner:hover .cb-go {
  background: var(--accent-soft-hover); color: var(--accent-text); border-color: transparent;
}
.btn:active, .sg-door:active { transform: translateY(1px); }
.btn.primary, a.btn.primary, button.primary, a.btn.primary:visited {
  background: var(--accent); color: var(--accent-ink); border: 0;
}
.btn.primary:hover, a.btn.primary:hover, button.primary:hover {
  background: var(--accent-hover); color: var(--accent-ink);
  transform: translateY(-1px); box-shadow: 0 6px 14px var(--ctl-shadow);
}
.btn.primary:active, button.primary:active { transform: translateY(1px); box-shadow: none; }
.btn.active, .btn.on { background: var(--accent); color: var(--accent-ink); }
.btn:disabled, button.primary:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn:focus-visible, button.primary:focus-visible, .sg-door:focus-visible, .done-btn:focus-visible,
.linkish:focus-visible, button.link:focus-visible,
.cr-body:focus-visible .ar-go, .target-row:focus-visible .tr-go {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.ctl-arrow { flex: none; width: 16px; height: 16px; transition: transform .15s ease; }
.btn:hover .ctl-arrow, .cr-body:hover .ctl-arrow, .action-row:hover .ctl-arrow,
.target-row:hover .ctl-arrow, .committed-banner:hover .ctl-arrow { transform: translateX(3px); }
/* Doors (X, questionnaire, email) sit several to a row: the small size of the
   same control. */
.sg-door { min-height: var(--ctl-h-sm); padding: 3px 12px; font-size: 13px; gap: 6px; }
.sg-door.broken { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); cursor: default; font-weight: 500; }
.done-btn {
  min-height: var(--ctl-h); padding: 5px 16px 5px 10px; gap: 8px; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--accent2); font-size: 14px; line-height: 1.2;
}
.done-btn .db-ico { width: 18px; height: 18px; border: 0; box-shadow: inset 0 0 0 1.5px var(--accent2); }
.done-btn.is-done, .check-row.is-done .done-btn { background: var(--done-fill); color: var(--done-ink); box-shadow: none; }
.done-btn.is-done:hover, .check-row.is-done .done-btn:hover { background: color-mix(in srgb, var(--done-fill) 85%, var(--ink)); }
.done-btn.is-done .db-ico, .check-row.is-done .done-btn .db-ico { background: var(--done-ink); color: var(--done-fill); box-shadow: none; }
.done-btn.is-done .db-ico::after, .check-row.is-done .done-btn .db-ico::after { left: 6px; top: 3px; }
.linkish, button.link { color: var(--accent-text); text-decoration: none; font-weight: 500; border-radius: 4px; }
.linkish:hover, button.link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn, button.primary, .sg-door, .ctl-arrow { transition: none; }
  .btn.primary:hover, button.primary:hover { transform: none; }
}

/* ---- Round 136 (Brent, 2026-09-28): sheets and forms take the same family --
   The modal is a card like the rest (16px corners, a hairline, a shadow);
   fields share the control height and a softer corner; focus is the accent
   ring the controls use; checkboxes and radios are the accent. The footer is
   Cancel (tinted) then the one Primary, right-aligned. */
.modal { border-radius: 16px; padding: 28px 30px 24px; border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); }
.modal h2 { font-size: 20px; margin-bottom: 18px; }
.modal .closeRow, .ms-sheet .closeRow { display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; margin-top: 22px; }
.modal .field { margin-bottom: 16px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number],
.field input[type=url], .field input[type=date], .field input[type=search], .field input[type=tel], .field select, .field textarea,
.modal input[type=text], .modal input[type=email], .modal input[type=password], .modal input[type=number],
.modal input[type=url], .modal input[type=date], .modal input[type=search], .modal input[type=tel], .modal select, .modal textarea {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--input-bg); color: var(--ink); font: inherit; font-size: 14px; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea { max-width: 100%; }
.field input:hover, .field select:hover, .field textarea:hover,
.modal input:not([type=checkbox]):not([type=radio]):hover, .modal select:hover, .modal textarea:hover { border-color: color-mix(in srgb, var(--ink-soft) 55%, var(--line)); }
.field input:focus, .field select:focus, .field textarea:focus,
.modal input:not([type=checkbox]):not([type=radio]):focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.modal textarea, .field textarea { min-height: 88px; line-height: 1.45; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.modal input[type=checkbox], .modal input[type=radio], .ev-check input { width: 18px; height: 18px; margin: 0; flex: none; }
.ev-check { gap: 10px; font-size: 14px; min-height: 32px; }
.su-tick input { accent-color: var(--accent2); }
/* Round 136b: one chevron for every select, and tab strips as pills. */
.field select, .modal select {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238a93a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
}
.plan-nav button, .profile-tabs button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctl-h-sm);
  padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.plan-nav button:hover, .profile-tabs button:hover { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.plan-nav button.active, .profile-tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.plan-nav button:focus-visible, .profile-tabs button:focus-visible, .su-seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.su-seg { border-radius: 999px; }
.su-seg button { border-radius: 999px; min-height: var(--ctl-h-sm); }
.modal .hint + .field { margin-top: 14px; }

/* ---- Round 137 (Brent, 2026-09-28): On Deck, calmer ---------------------
   The heading spans the page; below it a main column and a context column
   whose tops line up with "Hear from anyone?". One column under 1000px. */
main:has(> .od-grid) { max-width: 1200px; }
.od-head { margin: 0 0 22px; }
.od-date { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.od-title { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 6px 0 0; letter-spacing: -0.01em; }
.od-sub { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.od-grid { display: block; }
@media (min-width: 1000px) {
  .od-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .od-aside { position: sticky; top: 16px; }
}
.od-main { min-width: 0; }
.od-main > #inboundBox:empty { display: none; }
.od-aside { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; min-width: 0; }
@media (min-width: 1000px) { .od-aside { margin-top: 0; } }
.od-side-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.od-side-card[hidden] { display: none; }
.od-side-card h2 { margin: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.od-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.od-side-sub { font-size: 14px; }
.od-tools { background: transparent; border-style: dashed; }
.od-tools .btn { align-self: flex-start; }
.od-label { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.od-tools input { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink); font: inherit; font-size: 14px; }
.od-tools input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.od-go { align-self: flex-start; }
.od-event { display: flex; gap: 12px; align-items: center; }
.od-cal { flex: none; width: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.od-cal-mon { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--label); }
.od-cal-day { font-size: 17px; font-weight: 700; line-height: 1.1; }
.od-event-name { font-size: 14.5px; font-weight: 600; }
.od-event-meta, .od-opens { font-size: 13px; color: var(--ink-soft); }
.od-progress { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.od-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent2); }
.od-season-open, #odMoreChangesBtn { align-self: flex-start; }
.od-changes { gap: 8px; }
.od-aside .target-row { padding: 10px 12px; }
.od-aside .target-row .tr-go { display: none; }
.od-today { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; }
.od-thing { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.od-num { width: 30px; height: 30px; margin-top: 12px; border-radius: 999px; background: var(--card-2); color: var(--ink-soft); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.od-thing-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.od-thing-body > .deck-row, .od-thing-body > .act-card { margin-bottom: 0; }
@media (max-width: 560px) { .od-thing { grid-template-columns: minmax(0, 1fr); } .od-num { display: none; } .od-title { font-size: 26px; } }

/* Round 138: Home is gone, so five tabs fit a phone. Under 560px the bar
   spreads them across the width instead of scrolling (known-bugs 4). */
@media (max-width: 560px) {
  .app-nav { padding: 0 6px; gap: 0; }
  .nav-tab { flex: 1 1 auto; padding: 12px 6px 10px; font-size: 13px; text-align: center; }
}

/* Round 140: Write them. Opening a coach's email makes Sent it the next press. */
.wt-sheet .done-btn.is-next { box-shadow: 0 0 0 2px var(--done-fill); }
.wt-proof a { word-break: break-all; }
.wt-sheet .eo-btns { align-items: center; }
.wt-sheet .eo-btns .sg-door { min-height: var(--ctl-h); padding: 0 16px; font-size: 14px; }

/* ---- Round 146 (Brent, 2026-09-30): the school page, regrouped ------------
   To do / Reach out / Roster, with jump pills (pinned on a phone). Mockup: the
   "School page revamp" canvas. */
.sd-head { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.sd-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sd-name { margin: 0; font-size: 28px; line-height: 1.15; }
.sd-conf { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.sd-head-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sd-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sd-chips .zero-tag { font-size: 12.5px; }
.sd-chip-open { color: var(--opportunity); border-color: var(--opportunity); background: var(--opportunity-soft); }
.sd-jump { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sd-jump .btn { min-height: var(--ctl-h-sm); padding: 3px 14px; font-size: 13px; }
.sd-group { margin: 28px 0 6px; padding-top: 12px; border-top: 2px solid var(--ink); scroll-margin-top: 12px; }
.sd-group-name { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.sd-group-blurb { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.sd-group + .section-title { margin-top: 14px; }
.sd-npc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.sd-oneline { margin: 0 0 18px 2px; }
.sd-program-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sd-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sd-coach { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.sd-coach.is-first { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sd-coach.is-past { opacity: .7; }
.sd-coach-name { font-weight: 600; font-size: 14.5px; }
.sd-coach-role { font-size: 12.5px; color: var(--ink-soft); margin-top: -4px; }
.sd-coach-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-first-tag { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.sd-coach-doors { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.sd-coach-doors .linkish { font-weight: 600; font-size: 14px; }
.sd-x { width: var(--ctl-h); min-width: var(--ctl-h); padding: 0; flex: none; }
.sd-x svg { width: 15px; height: 15px; flex: none; display: block; }
.sd-conn-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.sd-conn-group { display: flex; flex-direction: column; gap: 8px; }
.sd-conn-label { font-size: 12.5px; font-weight: 600; }
.sd-conn-item { background: var(--card-2); border-radius: 10px; padding: 10px 12px; }
.sd-conn-title { font-size: 14px; font-weight: 600; }
.sd-conn-sub, .sd-conn-line { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.sd-conn-line { color: var(--opportunity); }
@media (max-width: 560px) {
  .sd-name { font-size: 24px; }
  /* The pills pin under the tab bar while he scrolls (Brent agreed, 2026-09-30). */
  .sd-jump { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0 -16px 14px; padding: 8px 16px; box-shadow: 0 2px 6px var(--ctl-shadow); border-top: 0; }
  .sd-group { scroll-margin-top: 60px; }
  /* Two facts to a row, so the facts card is not a 16-line column. */
  .facts-grid { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
}

/* ---- B2, 2026-09-30: Calendar, Openings, Progress, Profile ---------------- */
/* Calendar: the recruiting calendar under the events, every division open. */
.show-more { margin: 2px 0 4px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.rc-div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rc-div h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: 14px; }
.rc-tag { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.rc-today { font-weight: 700; }
.rc-today.contact { color: var(--opportunity); }
.rc-today.quiet { color: var(--ink-soft); }
.rc-today.dead { color: var(--danger); }
.rc-detail { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-bottom: 8px; }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-row { display: grid; grid-template-columns: 138px 1fr auto; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.rc-row + .rc-row { margin-top: 2px; }
.rc-row.now { background: var(--card-2); }
.rc-dates { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.rc-name { min-width: 0; font-weight: 600; }
.rc-row.contact .rc-name { color: var(--opportunity); }
.rc-row.dead .rc-name { color: var(--danger); }
.rc-row.portal .rc-name { color: var(--ambiguous); }
.rc-now { flex: none; font-size: 11px; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .04em; }
.rc-foot { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.rc-foot a { color: var(--accent-text); }
.rc-legend { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; display: grid; gap: 4px; }
.rc-legend strong { color: var(--ink); }

/* Openings: the scope pills, and a + Add sized to the row's text. */
.scope-pills { margin: 0 0 14px; }
.scope-pills button { font-size: 13px; padding: 5px 14px; }
.scope-pills .sp-n { font-weight: 700; opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.btn.add-mini { min-height: 22px; padding: 1px 9px; font-size: 12px; gap: 4px; margin-left: 8px; vertical-align: 1px; }
@media (pointer: coarse) { .btn.add-mini { min-height: 30px; padding: 3px 11px; } }

/* Progress: an empty column is narrow; on a phone, one column at a time. */
.board-col.is-empty { flex-basis: 150px; }
.board-col.is-empty h3 { flex-wrap: wrap; }
.phone-only { display: none; }
@media (max-width: 560px) {
  .phone-only { display: inline; }
  .desk-only { display: none; }
  .board { scroll-snap-type: x mandatory; scroll-padding-left: 0; gap: 10px; }
  .board-col { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .board-col.is-empty { flex-basis: 150px; }
}

/* Profile: Your links. */
.link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.link-row:first-of-type { border-top: 0; }
.link-row .ac-label { flex: 0 0 140px; font-weight: 600; font-size: 13.5px; }
.link-row .link-url { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--accent-text); }
.link-row span.link-url { color: var(--ink-soft); }
.link-row .link-edit { flex: none; }
.link-form { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.link-form[hidden] { display: none; }
.link-form input { flex: 1 1 260px; min-width: 0; }
.adv-links { margin-top: 8px; }
.adv-links ul { word-break: break-all; }
.adv-copy { margin-top: 8px; }