:root{
  --paper:#FBFAF6;
  --card:#FFFFFF;
  --ink:#12222D;
  --ink-soft:#38484F;
  --ink-mute:#6C7A82;
  --rule:#E4E0D6;
  --rule-soft:#EFECE4;
  --accent:#14657F;
  --accent-deep:#0E4A5E;
  --likely:#0E7A56;
  --target:#AF7317;
  --reach:#BF4A2B;
  --reconsider:#6E7C86;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --measure:74ch;
  /* paper palette — this is what the printer and the exported PDF get */
  --on-accent:#FFFFFF;
  --th-bg:#12222D; --th-fg:#EEEAE0;
  --btn-bg:#12222D; --btn-fg:#FBFAF6; --btn-bg-hover:#0E4A5E;
  --toolbar-bg:rgba(251,250,246,.86);
  --row-alt:rgba(18,34,45,.017); --row-hover:rgba(20,101,127,.05);
  --shadow-a:rgba(18,34,45,.03); --shadow-b:rgba(18,34,45,.34);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 4%, rgba(20,101,127,.05), transparent 42%),
    radial-gradient(circle at 92% 0%, rgba(175,115,23,.045), transparent 38%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.14;margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--ink)}
em,i{font-style:italic}
a{color:var(--accent);text-underline-offset:3px}

/* ---------- shell ---------- */
.shell{max-width:1500px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.layout{display:block}
@media screen and (min-width:1180px){
  .layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(30px,3.4vw,56px);align-items:start}
}

.doc{width:100%;max-width:var(--measure);min-width:0}
@media screen and (min-width:1180px){.doc{margin-inline:auto}}

/* ---------- toolbar ---------- */
/* Fixed, not sticky: on iOS Safari a sticky bar pins to the layout viewport,
   so when the browser chrome collapses it sits below the visible top and page
   content shows through the gap above it. Fixed pins to the visual viewport. */
.toolbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--toolbar-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px);
}
/* the bar is out of flow now, so the document starts below it */
body{padding-top:var(--toolbar-h,58px)}
.toolbar-in{max-width:1500px;margin:0 auto;padding:11px clamp(20px,4vw,56px);display:flex;align-items:center;gap:18px}
.brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand b{color:var(--ink);font-weight:500}
.spacer{flex:1}
.btn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:2px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);transform:translateY(-1px);box-shadow:0 6px 18px -8px var(--shadow-b)}
.btn:active{transform:translateY(0)}
.btn svg{width:14px;height:14px;flex:none}

/* ---------- rail ---------- */
.rail{display:none}
@media screen and (min-width:1180px){
  .rail{display:block;position:sticky;top:calc(var(--toolbar-h,58px) + 38px);padding-top:8px}
}
.rail-title{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.rail a{
  display:flex;gap:10px;align-items:baseline;
  font-size:13.5px;line-height:1.4;color:var(--ink-soft);text-decoration:none;
  padding:7px 0 7px 13px;border-left:2px solid var(--rule);
  transition:color .16s ease,border-color .16s ease;
}
.rail a .n{font-family:var(--mono);font-size:10px;color:var(--ink-mute);flex:none}
.rail a:hover{color:var(--ink);border-left-color:var(--ink-mute)}
.rail a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.rail a.active .n{color:var(--accent)}

/* ---------- masthead ---------- */
.masthead{padding:clamp(48px,7vw,86px) 0 0}
.eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.eyebrow span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.eyebrow .line{height:1px;flex:1;background:linear-gradient(90deg,var(--accent),rgba(20,101,127,0))}
h1{font-size:clamp(40px,6.4vw,68px);letter-spacing:-.025em;margin-bottom:.18em}
.dek{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(19px,2.4vw,25px);color:var(--ink-soft);line-height:1.34;margin-bottom:1.1em}
.lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);max-width:62ch}

/* ---------- snapshot ---------- */
.snapshot{
  margin:clamp(36px,5vw,52px) 0 0;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:clamp(24px,3.4vw,34px);
  box-shadow:0 1px 2px var(--shadow-a),0 14px 34px -26px var(--shadow-b);
}
.snapshot h2{font-size:21px;margin-bottom:22px}
.dl{display:grid;gap:18px 34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.dd{font-size:16.5px;font-weight:600;line-height:1.35}

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--accent);
  padding:4px 0 4px 22px;
  margin:clamp(38px,5vw,54px) 0;
  color:var(--ink-soft);
}
.callout .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px}

/* ---------- sections ---------- */
section{padding-top:clamp(44px,6vw,68px);scroll-margin-top:calc(var(--toolbar-h,58px) + 22px)}
.sec-head{display:flex;gap:16px;align-items:baseline;margin-bottom:.7em}
.sec-num{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);flex:none;padding-top:.35em}
.sec-head h2{font-size:clamp(27px,3.6vw,38px)}
.sec-sub{color:var(--ink-mute);margin-bottom:1.6em;font-size:17px}
h3.sub{font-size:clamp(20px,2.4vw,25px);margin:1.9em 0 .6em}

/* ---------- lever cards ---------- */
.lever{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(22px,3vw,32px);margin-bottom:20px;
  box-shadow:0 1px 2px var(--shadow-a),0 14px 34px -28px var(--shadow-b);
}
.lever-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:14px}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;border:1px solid currentColor;flex:none;
}
.chip.c-blind{color:var(--accent)}
.chip.c-gpa{color:var(--likely)}
.lever-head h3{font-size:clamp(20px,2.6vw,26px)}

/* ---------- table ---------- */
/* overflow-x:auto, not hidden — a table wider than its column must scroll,
   not have its last column silently clipped off the right edge. */
.table-wrap{border:1px solid var(--rule);border-radius:4px;overflow-x:auto;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  background:var(--th-bg);color:var(--th-fg);
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  text-align:left;padding:13px 12px;vertical-align:bottom;
}
tbody td{padding:12px;border-top:1px solid var(--rule-soft);vertical-align:top;line-height:1.4}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover{background:var(--row-hover)}
td.num{font-family:var(--mono);font-size:11px;color:var(--ink-mute);width:34px}
td.school-cell{font-weight:700;min-width:132px}
td.tier{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;min-width:118px}
.t-likely{color:var(--likely)}
.t-target{color:var(--target)}
.t-reach{color:var(--reach)}
.t-high{color:var(--reconsider)}
.sep{color:var(--ink-mute);opacity:.6}
td .fit-strong{font-weight:700;color:var(--ink)}
td .fit-mod{color:var(--ink-soft)}
/* "Lower" was set in the muted grey at 2.76:1. The column already says the
   value in words, so encoding it a second time in lightness bought nothing
   and cost legibility — it now reads at the same weight as "Moderate". */
td .fit-low{color:var(--ink-soft)}

/* ---------- tier groups ---------- */
.tier-head{display:flex;align-items:center;gap:13px;margin:clamp(40px,5vw,58px) 0 .35em}
.tier-head .dot{width:13px;height:13px;border-radius:50%;flex:none}
.tier-head h3{font-size:clamp(24px,3.2vw,32px)}
.tier-note{color:var(--ink-mute);margin-bottom:1.5em;font-size:16px}
.d-likely{background:var(--likely)}
.d-target{background:var(--target)}
.d-reach{background:var(--reach)}
.d-recon{background:var(--reconsider)}

.school{
  background:var(--card);border:1px solid var(--rule);border-radius:4px;
  border-left:3px solid var(--rule);
  padding:clamp(20px,2.6vw,28px);margin-bottom:16px;
  box-shadow:0 1px 2px var(--shadow-a),0 12px 30px -26px var(--shadow-b);
  transition:border-left-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.school:hover{transform:translateX(2px);box-shadow:0 1px 2px var(--shadow-a),0 16px 34px -24px var(--shadow-b)}
.school.s-likely{border-left-color:var(--likely)}
.school.s-target{border-left-color:var(--target)}
.school.s-reach{border-left-color:var(--reach)}
.school.s-recon{border-left-color:var(--reconsider)}
.school-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:11px}
.school-head h4{font-family:var(--display);font-size:clamp(19px,2.3vw,23px);font-weight:700}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);letter-spacing:.01em}

/* ---------- strategy ---------- */
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:18px;margin-bottom:26px}
.step-n{
  flex:none;width:28px;height:28px;border-radius:3px;background:var(--accent);color:var(--on-accent);
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.step-b{color:var(--ink-soft);min-width:0}

/* ---------- footer ---------- */
footer{margin-top:clamp(60px,8vw,100px);padding:30px 0 60px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}

/* ---------- reveal ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive table -> cards (screen only; print always gets the real table) ---------- */
@media screen and (max-width:800px){
  body{font-size:16px}
  /* Compact list cards. A stacked label-per-row card runs ~330px tall, which
     is a lot of thumb for 17 schools — this reflows each row into three lines:
     name + controls, tier, then the reference fields as quiet mono runs. */
  .table-wrap{border:none;background:none;border-radius:0}
  table,tbody{display:block;width:100%}
  thead{position:absolute;left:-9999px}
  #listTable tbody tr{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;
    background:var(--card)!important;border:1px solid var(--rule);border-radius:4px;
    padding:11px 13px;margin-bottom:9px;position:relative;
  }
  #listTable tbody td{display:block;border:none;padding:0;width:auto;min-height:0;line-height:1.45}
  #listTable tbody td::before{display:none}

  /* line 1 — position, school, controls */
  #listTable td.num{order:1;flex:0 0 19px;position:static;font-family:var(--mono);font-size:11px;color:var(--ink-mute)}
  #listTable td.school-cell{order:2;flex:1 1 40%;font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin:0}
  #listTable td.row-actions{order:3;flex:0 0 auto;margin:0;padding:0;border:none}

  /* line 2 — the tier call, the thing you reorder against */
  #listTable td.tier{order:4;flex:0 0 100%;padding-left:28px;font-size:11.5px;margin-top:1px}

  /* line 3+ — one flowing labelled run so it wraps on purpose, not raggedly */
  #listTable td.c-loc,#listTable td.c-cost,#listTable td.c-rate,#listTable td.c-sat,#listTable td.c-fit{
    order:5;flex:0 0 auto;
    font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);
  }
  /* read as: where · how hard · then the reference fields */
  #listTable td.c-loc{padding-left:28px;order:5}
  #listTable td.c-cost{order:6}
  #listTable td.c-rate{order:7}
  #listTable td.c-sat{order:8}
  #listTable td.c-fit{order:9}
  #listTable td.c-cost::before,#listTable td.c-rate::before,#listTable td.c-sat::before,#listTable td.c-fit::before{
    display:inline;position:static;width:auto;margin-right:4px;
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.62;
  }
  #listTable td.c-cost::before{content:'Cost'}
  #listTable td.c-rate::before{content:'Rate'}
  #listTable td.c-sat::before{content:'SAT'}
  #listTable td.c-fit::before{content:'Fit'}

  .rowbtn{width:32px;height:32px;font-size:12px;margin-right:3px}
  .rowbtn:last-child{margin-right:0}
  .rowbtn-x{font-size:16px}
  .steps li{gap:14px}
  /* deadlines: a plain labelled stack — five short date fields, not a dense row */
  #deadlineTable tbody tr{
    display:block;background:var(--card)!important;
    border:1px solid var(--rule);border-radius:4px;
    padding:12px 14px;margin-bottom:9px;
  }
  #deadlineTable tbody td{display:block;border:none;padding:3px 0 3px 132px;position:relative;font-size:13px}
  #deadlineTable tbody td::before{
    content:attr(data-label);position:absolute;left:0;top:4px;width:124px;
    font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  }
  #deadlineTable td.dl-school{padding:0 0 7px;font-size:16px}
  #deadlineTable td.dl-school::before{display:none}
}

/* ---------- list controls ---------- */
.list-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.list-bar-spacer{flex:1;min-width:0}
.list-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.list-status.is-dirty{color:var(--accent)}
.list-status.is-error{color:var(--reach)}
.btn-quiet{background:transparent;color:var(--ink-mute);border-color:var(--rule)}
.btn-quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink-mute);box-shadow:none;transform:none}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.btn[disabled]:hover{transform:none;box-shadow:none;background:var(--btn-bg);border-color:var(--btn-bg)}
.btn-quiet[disabled]:hover{background:transparent;border-color:var(--rule)}

th.col-actions{width:86px}
td.row-actions{white-space:nowrap;padding-left:6px;padding-right:8px;cursor:default}
/* the whole row opens the school, so say so — except over the controls */
#listTable tbody tr{cursor:pointer}
.rowbtn{
  font-family:var(--mono);font-size:11px;line-height:1;
  width:25px;height:25px;padding:0;margin-right:3px;
  display:inline-flex;align-items:center;justify-content:center;
  /* align by box, not baseline: the grip holds only an SVG, so its baseline
     falls to the bottom edge while the x aligns on its glyph — 2.5px apart */
  vertical-align:middle;
  background:transparent;color:var(--ink-mute);
  border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.rowbtn:last-child{margin-right:0}
.rowbtn:hover:not([disabled]){color:var(--ink);border-color:var(--ink-mute);background:var(--row-hover)}
.rowbtn[disabled]{opacity:.26;cursor:not-allowed}
.rowbtn-x{font-size:14px}
.rowbtn-x:hover:not([disabled]){color:var(--reach);border-color:var(--reach)}
.rowbtn:focus-visible,.btn:focus-visible,.tray-item button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
tr.just-moved{background:var(--row-hover)!important;transition:background .5s ease}

/* drag handle — touch-action:none so a hold doesn't scroll the page instead */
.rowbtn-grip{cursor:grab;touch-action:none}
.rowbtn-grip svg{width:9px;height:15px;fill:currentColor;pointer-events:none}
.rowbtn-grip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--row-hover)}
/* Pressed, but not yet dragging. The press has to be visible on the way down —
   waiting for the drag to start is what made the handle feel unresponsive. */
.rowbtn-grip.is-armed{color:var(--accent);border-color:var(--accent);background:var(--row-hover);transform:scale(1.08)}

/* The lift. box-shadow on a <tr> does not paint under border-collapse, so the
   picked-up row is drawn on its cells: a solid card fill against the striped
   table, an accent rule top and bottom, and a bar down the leading edge. */
tr.is-dragging{position:relative;z-index:3}
tr.is-dragging td{
  background:var(--card);
  border-top:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
}
tr.is-dragging td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.is-dragging td.num{color:var(--accent);font-weight:700}
tr.is-dragging .rowbtn-grip{cursor:grabbing;color:var(--accent);border-color:var(--accent);background:var(--row-hover)}
body.is-reordering{user-select:none;-webkit-user-select:none;cursor:grabbing}
/* the displaced rows are mid-FLIP; a hover tint on them reads as a drop target */
body.is-reordering tbody tr:hover{background:inherit}

/* ---------- set aside, not deleted ---------- */
.tray{margin-top:18px;padding:17px 20px;border:1px dashed var(--rule);border-radius:4px;background:var(--card)}
.tray-head{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:13px}
.tray-count{color:var(--accent)}
.tray-items{display:flex;flex-wrap:wrap;gap:9px}
.tray-item{display:inline-flex;align-items:center;gap:10px;padding:5px 6px 5px 12px;border:1px solid var(--rule);border-radius:2px;font-size:14.5px;color:var(--ink-soft)}
.tray-item button{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 8px;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  background:transparent;color:var(--ink-mute);transition:color .15s ease,border-color .15s ease;
}
.tray-item button:hover{color:var(--likely);border-color:var(--likely)}
.tray-print{display:none}
tr[hidden],.school[hidden]{display:none!important}

/* ---------- Midnights ----------
   Screen only. Print keeps the paper palette above so the PDF stays
   readable and ink-friendly. */
@media screen{
  /* Palette lifted off the sleeve: greige card stock, the wordmark's dusty
     lavender, the lighter's flame, her teal shadow and coral lip. */
  :root{
    --paper:#E4E0D9;
    --card:#F1EEE9;
    --ink:#443D4E;
    --ink-soft:#655C72;
    --ink-mute:#8B8397;
    --rule:#CDC6BE;
    --rule-soft:#DBD6CE;
    /* The sleeve's lavender is #8B7F97, but on this greige that measures
       2.86:1 — under the 3:1 floor for large text, and it also carries the
       eyebrow and section numbers at 11-12px. Deepened to 4.5:1. */
    --accent:#6B5F79;
    --accent-deep:#544961;
    --on-accent:#F4F2EE;
    /* Tier labels sit at 11.5px, so they need the 4.5:1 normal-text floor,
       not the 3:1 large-text one. Straight off the sleeve they measured
       teal 3.40, amber 2.87 and coral 3.67 — all short. Deepened, hues kept. */
    --likely:#3E6A6F;
    --target:#7F5D1F;
    --reach:#9C4A2E;
    --reconsider:#6B5F79;
    --th-bg:#4A4353; --th-fg:#E7E3DC;
    --btn-bg:#6B5F79; --btn-fg:#F4F2EE; --btn-bg-hover:#544961;
    --toolbar-bg:rgba(228,224,217,.88);
    --row-alt:rgba(68,61,78,.026); --row-hover:rgba(139,127,151,.11);
    --shadow-a:rgba(68,61,78,.05); --shadow-b:rgba(68,61,78,.22);
  }
  body{
    /* the sleeve is nearly flat — just the warmth thrown by the flame */
    background-image:
      radial-gradient(560px 380px at 78% 4%, rgba(214,150,74,.16), transparent 66%),
      radial-gradient(760px 520px at 12% 0%, rgba(139,127,151,.13), transparent 62%);
  }
  /* the photograph is grainy 70s film — on light stock that reads as multiply */
  body::after{
    content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:.34;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  }
  /* The wordmark is a bold, tightly set sans in lavender — not a serif.
     The masthead carries the reference; the document keeps its own serif. */
  h1{
    font-family:var(--body);font-weight:700;
    letter-spacing:-.035em;color:var(--accent);
    font-size:clamp(44px,7.2vw,78px);
  }
  .dek{color:var(--accent);font-style:normal;font-family:var(--body);font-weight:500;font-size:clamp(17px,2vw,21px)}
  .eyebrow span{color:var(--accent)}
  .eyebrow .line{background:linear-gradient(90deg,var(--accent),rgba(107,95,121,0))}
  /* the tracklist is small, bold and tightly leaded — so is the school column */
  td.school-cell{letter-spacing:-.012em}
  .sec-num,.rail a.active{color:var(--accent)}
  .snapshot,.lever,.school,.table-wrap{
    background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
  }
  .btn:hover{box-shadow:0 6px 22px -10px rgba(68,61,78,.55)}
}


/* ---------- school detail ----------
   The tier cards are both the modal's source and the printed appendix, so
   they stay in the DOM and are simply not shown on screen. */
@media screen{ #tiers{display:none} }

.school-open{
  font:inherit;color:inherit;letter-spacing:inherit;
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease;
}
.school-open:hover{color:var(--accent);border-bottom-color:var(--accent)}
.school-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop{position:absolute;inset:0;background:rgba(30,25,38,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;z-index:1;
  width:min(640px,100%);max-height:min(84vh,760px);overflow-y:auto;
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:clamp(24px,4vw,36px);
  box-shadow:0 24px 70px -28px rgba(30,25,38,.7);
}
.modal-panel:focus{outline:none}
.modal-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:17px;line-height:1;cursor:pointer;
  background:none;color:var(--ink-mute);border:1px solid var(--rule);border-radius:2px;
  transition:color .15s ease,border-color .15s ease;
}
.modal-x:hover{color:var(--reach);border-color:var(--reach)}
.modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.modal-title{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:700;line-height:1.15;margin:0 40px .35em 0}
.modal-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);margin-bottom:20px;line-height:1.5}
.modal-grid{
  display:grid;gap:13px 22px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  padding:16px 0;margin-bottom:18px;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
.modal-grid .dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px}
.modal-grid .dd{font-size:14.5px;font-weight:600;line-height:1.35}
.modal-prose{color:var(--ink-soft)}
.modal-aside{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
@media(prefers-reduced-motion:no-preference){
  .modal-panel{animation:modal-in .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}
@media(max-width:800px){
  .modal{padding:14px}
  .modal-panel{max-height:88vh}
}

/* ---------- deadlines ---------- */
#deadlineTable td{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
#deadlineTable td.dl-school{font-family:var(--body);font-size:14px;font-weight:700;white-space:normal;min-width:150px}
.dl-school .sub{
  display:block;font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.01em;color:var(--ink-mute);margin-top:4px;line-height:1.4;
}
.notes{margin-top:22px;font-size:15.5px;color:var(--ink-soft)}
.notes p{margin-bottom:.9em}
.notes b{color:var(--ink)}


/* ---------- sorting: the header is the control ---------- */
thead th[data-sort]{padding:0}
.th-sort{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:13px 12px;
  display:flex;align-items:baseline;gap:5px;
  transition:color .15s ease,background .15s ease;
}
.th-sort:hover{background:rgba(255,255,255,.09);color:#fff}
.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.th-ind{font-size:9px;letter-spacing:0;opacity:.95;white-space:nowrap}
thead th.is-sorted .th-sort{color:#fff;background:rgba(255,255,255,.12)}
/* the # column is the way back to her own order */
thead th[data-sort="manual"] .th-sort{justify-content:flex-start}

/* Hidden by default and shown on phones — this order matters: the base rule
   has to come first or it overrides the media query on source order. */
.sortnote{display:none}
@media screen and (max-width:800px){
  /* thead is positioned off-screen on phones, so surface the sort separately */
  .sortnote{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;
  }
  .sortnote button{
    font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    padding:8px 10px;border:1px solid var(--rule);border-radius:2px;
    background:var(--card);color:var(--ink-soft);cursor:pointer;
  }
  .sortnote button.on{color:var(--accent);border-color:var(--accent);background:var(--row-hover)}
  .sortnote button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

td.c-cost{font-family:var(--mono);font-size:12px;white-space:nowrap}
.mi{font-family:var(--mono);font-size:10px;color:var(--ink-mute);white-space:nowrap;margin-left:6px}
@media screen and (max-width:800px){ .mi{font-size:9.5px;margin-left:5px} }
.est{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);margin-left:4px;vertical-align:super;cursor:help}
/* ---------- wide desktop ----------
   On a large screen the report reads as a dashboard: the tables and card grids
   run edge to edge and the prose reflows into columns, so a full-screen window
   is spent on content rather than on margin. The measure cap moves off the
   document and onto the text inside it — that is what lets a nine-column table
   use the whole width while a paragraph still stops at a readable line length.
   Screen only. Print keeps the single measure column it has always had. */
@media screen and (min-width:1180px){
  .shell,.toolbar-in{max-width:2560px}
  .doc{max-width:none;margin-inline:0}
  .sec-sub,.tier-note,.callout p,.notes p,.step-b,.rigor-part p,#rigor > p{max-width:var(--measure)}

  /* Going wide is only half the point; the other half is less scrolling, so
     the vertical rhythm tightens once the horizontal space is being used. */
  .masthead{padding-top:clamp(30px,3vw,48px)}
  section{padding-top:clamp(32px,3.2vw,50px)}
  .callout{margin:clamp(24px,2.4vw,32px) 0}
  .snapshot{margin-top:clamp(24px,2.4vw,32px)}

  /* the snapshot beside the caveat that qualifies it */
  .pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,2.6vw,44px);align-items:start}
  .pair .snapshot,.pair .callout{margin:0}

  /* 02 — five short notes set as newspaper columns rather than a stack */
  .notes{columns:2;column-gap:clamp(30px,2.8vw,48px)}
  .notes p{break-inside:avoid}

  /* 03 — the two levers side by side */
  .lever-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:clamp(18px,1.8vw,24px)}
  .lever-grid .lever{margin-bottom:0}

  /* 04 — the public half and the private half, in parallel */
  .rigor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:0 clamp(30px,2.8vw,48px)}
  .rigor-part h3.sub{margin-top:0}

  /* 05 — six steps as a grid, so they read two or three across */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:clamp(20px,2vw,28px) clamp(30px,2.8vw,48px)}
  .steps li{margin-bottom:0}
}
@media screen and (min-width:1800px){
  .notes{columns:3}
  /* Five short date columns stretched across a 2000px table are unscannable —
     the eye has to travel too far from the school to its deadline. Once there
     is room for both, the notes move alongside the table instead of under it,
     which keeps the table dense and takes the notes out of the scroll. */
  .dl-pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,2.6vw,52px);align-items:start}
  .dl-pair .notes{columns:1;margin-top:0}
}

/* ---------- print ---------- */
@page{size:letter portrait;margin:0.7in 0.72in}
@media print{
  html,body{background:#fff!important;font-size:10.4pt;line-height:1.5}
  body{padding-top:0!important}
  body{background-image:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .toolbar,.rail,.no-print{display:none!important}
  /* the controls are for the screen; paper just gets the list as it stands */
  .list-bar,.tray,th.col-actions,td.row-actions{display:none!important}
  .tray-print.has-items{display:block;margin-top:10pt;font-size:9pt;color:#5A6670;font-style:italic}
  .shell{max-width:none;padding:0}
  .layout{display:block}
  .doc{max-width:none;margin:0}
  .reveal{opacity:1!important;transform:none!important}
  .masthead{padding-top:0}
  h1{font-size:30pt}
  .dek{font-size:13pt}
  .lede{font-size:11pt;max-width:none}
  .sec-head h2{font-size:18pt}
  .tier-head h3{font-size:15.5pt}
  .lever-head h3{font-size:13.5pt}
  .school-head h4{font-size:12.5pt}
  h3.sub{font-size:13pt}
  section{padding-top:20pt}
  .snapshot,.lever,.school{box-shadow:none!important;break-inside:avoid;page-break-inside:avoid}
  /* the table is long enough to need splitting — rows stay whole, header repeats */
  .table-wrap{box-shadow:none!important;border:none}
  .school:hover{transform:none}
  .snapshot,.lever,.school{border-color:#D8D4C9}
  .dl-row,.steps li,.callout{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3,h4,.tier-head,.sec-head{break-after:avoid;page-break-after:avoid}
  table{font-size:8.6pt}
  thead{display:table-header-group}
  thead th{background:#12222D!important;color:#fff!important;padding:8px 7px}
  tbody td{padding:7px}
  tbody tr{break-inside:avoid;page-break-inside:avoid}
  tbody tr:nth-child(even){background:#F7F6F2!important}
  tbody tr:hover{background:transparent!important}
  footer{margin-top:24pt;padding-bottom:0;border-top:1px solid #D8D4C9}
  a{color:inherit;text-decoration:none}
}