/* handbook.massry.mba — tokens copied verbatim from schedule.massry.mba via
   Site/index.html, so the domain reads as one property. Retune there, retune here. */
:root {
  --purple: #46166b; --purple-deep: #33104e; --purple-lift: #5d2a86;
  --gold: #eeb211; --gold-soft: #fdf3d6;
  --bg: #ffffff; --surface: #faf9fb; --surface-2: #f3f1f5;
  --ink: #1a1420; --ink-soft: #57505f;
  /* Darkened from #857e8f, which failed WCAG AA: 3.90 on white, 3.72 on
     --surface and 3.48 on --surface-2, against the 4.5 required for body
     text. Every contrast failure on the site traced to this one token —
     section summaries, the contents numbers, key hints, the "this section"
     label, Quick Answers captions, pager labels. Now 5.14 on white and
     4.58 on the darkest surface it sits on. The dark-mode value already
     passed and is unchanged. NOTE: this diverges from schedule.massry.mba,
     which almost certainly has the same failure. */
  --ink-mute: #716b7a;
  --line: #e7e3ec; --line-soft: #f0edf3;
  --accent: var(--purple); --on-accent: #ffffff;
  --ok: #1d6b3f; --ok-soft: #e8f5ed; --warn: #8a3324; --warn-soft: #fdeeea;
  /* Squared off at SC's request. This diverges from the three-step corner
     scale on schedule.massry.mba — raise these three if you want the family
     to match again; everything below reads from them. */
  --r-chip: 0; --r-control: 0; --r-card: 0;
  --shadow: 0 1px 2px rgba(26,20,32,.05), 0 8px 24px -12px rgba(26,20,32,.12);
  --shadow-lift: 0 2px 4px rgba(26,20,32,.06), 0 16px 40px -16px rgba(26,20,32,.2);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", "Iowan Old Style", serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 68ch;
  --rail: 288px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14101a; --surface: #1c1723; --surface-2: #251e2e;
    --ink: #f3f0f7; --ink-soft: #c3bcce; --ink-mute: #8f879c;
    --line: #322a3d; --line-soft: #271f31;
    --purple: #a888c9; --purple-lift: #c4a8de; --gold-soft: #3a2f12;
    --accent: #b795d6; --on-accent: #14101a;
    --ok: #6ede9f; --ok-soft: #12301f; --warn: #ff9e86; --warn-soft: #34140d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -16px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14101a; --surface: #1c1723; --surface-2: #251e2e;
  --ink: #f3f0f7; --ink-soft: #c3bcce; --ink-mute: #8f879c;
  --line: #322a3d; --line-soft: #271f31;
  --purple: #a888c9; --purple-lift: #c4a8de; --gold-soft: #3a2f12;
  --accent: #b795d6; --on-accent: #14101a;
  --ok: #6ede9f; --ok-soft: #12301f; --warn: #ff9e86; --warn-soft: #34140d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Any `display` set on a class outranks the browser's own [hidden] rule, so an
   element given one keeps rendering after `el.hidden = true`. State it once,
   here, rather than remembering it at every call site. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
/* Every focusable thing, not a list of the ones that existed at the time —
   select was missing, so the cohort switcher had no visible focus. */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- welcome ---------- */
.welcome { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.welcome-hero {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(238,178,17,.20), transparent 60%),
    radial-gradient(900px 460px at 92% 6%, rgba(93,42,134,.22), transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}
.wrap { width: min(100% - (var(--gutter) * 2), 1080px); margin-inline: auto; }
.mark { display: flex; align-items: center; gap: 12px; padding: 22px 0; }
.mark img { width: 30px; height: auto; }
.hero-body { padding: clamp(28px, 7vw, 76px) 0 clamp(36px, 8vw, 84px); }
.hero-body h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 18px; max-width: 18ch; text-wrap: balance;
}
.hero-body p.lede { font-size: clamp(1.02rem, 2.2vw, 1.22rem); color: var(--ink-soft); max-width: 54ch; margin: 0; }
.gold-rule { width: 54px; height: 3px; background: var(--gold); margin: 0 0 26px; }

.signin { padding: clamp(30px, 6vw, 58px) 0; }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: clamp(22px, 4vw, 34px); max-width: 480px;
}
.card h2 { margin: 0 0 6px; font-size: 1.16rem; font-family: var(--serif); font-weight: 500; }
.card p.hint { margin: 0 0 20px; color: var(--ink-soft); font-size: .93rem; }
label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 7px; }
input[type=email], input[type=text], textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-control);
}
input[type=text].code { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent; border-radius: var(--r-control); width: 100%;
}
.btn:hover { background: var(--purple-lift); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn.slim { width: auto; padding: 8px 14px; font-size: .88rem; }
.row { display: flex; gap: 10px; align-items: center; margin: 16px 0 0; }
.row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.row label { margin: 0; font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.msg { margin-top: 14px; padding: 11px 14px; border-radius: var(--r-control); font-size: .91rem; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.bad { background: var(--warn-soft); color: var(--warn); }
.trouble { margin-top: 20px; font-size: .88rem; color: var(--ink-mute); }
footer.site { border-top: 1px solid var(--line); padding: 26px 0; color: var(--ink-mute); font-size: .86rem; }

/* ---------- reading ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100svh; }
@media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); } }

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(9px); border-bottom: 1px solid var(--line);
  grid-column: 1 / -1;
}
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-soft); }
.cohort-pill {
  font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-chip);
  background: var(--gold-soft); color: var(--ink); border: 1px solid var(--line);
}
.searchbtn {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 460px;
  padding: 8px 13px; font: inherit; font-size: .92rem; color: var(--ink-mute);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-control); cursor: pointer; text-align: left;
}
.searchbtn kbd {
  margin-left: auto; font: inherit; font-size: .74rem; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--bg); color: var(--ink-mute);
}
.menubtn { display: none; }
@media (max-width: 900px) {
  .menubtn { display: inline-flex; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; }
}

nav.rail {
  border-right: 1px solid var(--line); background: var(--surface);
  padding: 22px 0 60px; overflow-y: auto;
  position: sticky; top: 57px; height: calc(100svh - 57px);
}
nav.rail ol { list-style: none; margin: 0; padding: 0 14px; }
nav.rail > ol > li { margin-bottom: 3px; }
nav.rail a {
  display: block; padding: 7px 12px; border-radius: var(--r-control);
  color: var(--ink-soft); text-decoration: none; font-size: .93rem; line-height: 1.4;
}
nav.rail a:hover { background: var(--surface-2); color: var(--ink); }
nav.rail a.current { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }
nav.rail .sub { padding-left: 10px; }
nav.rail .sub a { font-size: .86rem; padding: 5px 12px; color: var(--ink-mute); }
nav.rail .sub a.current { color: var(--ink); font-weight: 600; background: transparent; box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 900px) {
  nav.rail {
    position: fixed; inset: 57px auto 0 0; width: min(84vw, 330px); z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease; height: calc(100svh - 57px);
  }
  nav.rail[data-open="true"] { transform: none; box-shadow: var(--shadow-lift); }
  .scrim { position: fixed; inset: 57px 0 0; background: rgba(0,0,0,.36); z-index: 35; }
}

main { padding: 0 var(--gutter) 96px; }
article { max-width: var(--measure); margin-inline: auto; }
article h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.018em; margin: 44px 0 20px; text-wrap: balance;
}
article h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.28rem, 2.7vw, 1.62rem);
  margin: 42px 0 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); line-height: 1.25;
}
article h3 { font-size: 1.07rem; font-weight: 700; margin: 28px 0 8px; }
article h4 { font-size: .97rem; font-weight: 700; color: var(--ink-soft); margin: 22px 0 6px; }
article p { margin: 0 0 16px; }
article ul, article ol { margin: 0 0 16px; padding-left: 22px; }
article li { margin-bottom: 7px; }
article hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
article strong { font-weight: 680; }
.anchor {
  float: left; margin-left: -1.1em; padding-right: .35em; color: var(--ink-mute);
  opacity: 0; text-decoration: none; font-weight: 400;
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { opacity: 1; }
@media (max-width: 720px) { .anchor { display: none; } }

blockquote {
  margin: 0 0 18px; padding: 14px 18px; background: var(--surface);
  border-left: 3px solid var(--line); border-radius: 0;
}
blockquote p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; background: var(--surface-2); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .89em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-chip); }

h3.h-wrong, h3.h-correct { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: var(--r-chip); font-size: .9rem; }
h3.h-wrong { background: var(--warn-soft); color: var(--warn); }
h3.h-correct { background: var(--ok-soft); color: var(--ok); }
h3.h-wrong::before { content: "✕"; font-weight: 700; }
h3.h-correct::before { content: "✓"; font-weight: 700; }
h3.h-wrong + blockquote { border-left-color: var(--warn); }
h3.h-correct + blockquote { border-left-color: var(--ok); }

.quick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 26px 0 34px; }
.quick a {
  padding: 13px 15px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .93rem;
}
.quick a:hover { border-color: var(--accent); background: var(--bg); box-shadow: var(--shadow); }
.quick a small { display: block; font-weight: 400; color: var(--ink-mute); font-size: .82rem; margin-top: 2px; }

.sec-foot { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--ink-mute); display: flex; gap: 14px; flex-wrap: wrap; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; }
.pager a { flex: 1; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; font-size: .92rem; }
.pager a small { display: block; color: var(--ink-mute); font-size: .78rem; }
.pager a:last-child { text-align: right; }

/* ---------- search & ask ---------- */
dialog.palette {
  width: min(100% - 28px, 660px); padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-lift); margin-top: 9vh;
}
dialog.palette::backdrop { background: rgba(20,16,26,.45); backdrop-filter: blur(2px); }
.palette input[type=text] { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 17px 19px; font-size: 1.04rem; }
.palette-results { max-height: min(56vh, 460px); overflow-y: auto; padding: 7px; }
.hit { display: block; padding: 11px 13px; border-radius: var(--r-control); text-decoration: none; color: var(--ink); }
.hit:hover, .hit[aria-selected="true"] { background: var(--surface-2); }
.hit .where { font-size: .76rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .07em; }
.hit .what { font-weight: 600; margin: 2px 0; }
.hit .snip { font-size: .87rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hit mark { background: var(--gold-soft); color: inherit; padding: 0 2px; border-radius: var(--r-chip); }
.palette-foot { border-top: 1px solid var(--line); padding: 11px 15px; font-size: .84rem; color: var(--ink-mute); display: flex; gap: 12px; align-items: center; }
.askrow { padding: 13px 15px; border-top: 1px solid var(--line); background: var(--surface); }
.answer { padding: 15px 19px; border-top: 1px solid var(--line); }
.answer .body { margin-bottom: 12px; }
.answer .cites { display: flex; flex-wrap: wrap; gap: 7px; }
.answer .cites a { font-size: .82rem; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-chip); text-decoration: none; }
.answer .caveat { margin-top: 12px; padding: 10px 13px; background: var(--gold-soft); border-radius: var(--r-control); font-size: .86rem; color: var(--ink); }
.spinner { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }



/* ---------- narrow screens: the topbar must not overflow ---------- */
@media (max-width: 900px) {
  .topbar { gap: 9px; padding: 9px 14px; }
  .topbar .who { display: none; }          /* moves into the drawer */
  .searchbtn { max-width: none; }
  .rail-foot { display: block; }
}
@media (max-width: 720px) {
  .searchbtn kbd { display: none; }        /* no keyboard to hint at */
  .searchbtn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .searchbtn span:nth-of-type(2) { overflow: hidden; text-overflow: ellipsis; }
}
.rail-foot {
  display: none; margin: 22px 14px 0; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.rail-foot .cohort-pill { display: inline-block; margin-bottom: 11px; }
.rail-foot select { width: 100%; padding: 9px 11px; font: inherit; margin-bottom: 11px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); }
body { overflow-x: hidden; }

/* ---------- one composed page per section ---------- */
.pad { padding: 22px 15px; color: var(--ink-mute); }
.muted { color: var(--ink-mute); }
.small { font-size: .8rem; }

.sec-head {
  padding: clamp(34px, 5vw, 56px) 0 clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(24px, 4vw, 38px);
}
.eyebrow {
  margin: 0 0 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.sec-head h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.06; letter-spacing: -.022em;
  max-width: 17ch; text-wrap: balance;
}
.sec-lede {
  margin: 16px 0 0; font-size: clamp(1.02rem, 2vw, 1.16rem);
  color: var(--ink-soft); max-width: 52ch; line-height: 1.55;
}
.sec-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.sec-body > h1 { display: none; }   /* the page header carries the title */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 0; }
.pager a {
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
  background: var(--surface); line-height: 1.35;
}
.pager a:hover { border-color: var(--accent); background: var(--bg); box-shadow: var(--shadow); }
.pager a small { display: block; font-weight: 500; color: var(--ink-mute); font-size: .76rem; margin-bottom: 3px; }
.pager a:last-child { text-align: right; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager a:last-child { text-align: left; } }

nav.rail a .num {
  display: inline-block; width: 1.5em; color: var(--ink-mute);
  font-variant-numeric: tabular-nums; font-size: .82em;
}
nav.rail a.current .num { color: var(--accent); }
nav.rail .sub { margin: 3px 0 10px; }

/* ---------- print: the whole handbook, not just this page ---------- */
#print-all { display: none; }
@media print {
  .topbar, nav.rail, .quick, .pager, dialog, .scrim, .skip { display: none !important; }
  .shell { display: block; }
  main { padding: 0; }
  article { max-width: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  body.printing .shell { display: none; }
  body.printing #print-all { display: block; }
  #print-all .print-title { font-size: 20pt; margin-bottom: 24pt; }
  #print-all > section { break-before: page; }
  #print-all > section:first-of-type { break-before: auto; }
  h1, h2, h3 { break-after: avoid; }
  blockquote, table, li, .table-wrap { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- reading typography ----------
   Serif for prose, sans for the interface. The landing page sets its statement
   in the serif; carrying that into the reading column is what makes the two
   pages feel like one property. Chrome — rail, topbar, buttons, tables, the
   search palette — stays sans, so interface never reads as content. */
.sec-body,
.sec-body p,
.sec-body li,
.sec-body blockquote {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.72;
  letter-spacing: .002em;
}
.sec-body p { margin: 0 0 18px; }
.sec-body li { margin-bottom: 9px; }
.sec-lede { font-family: var(--serif); line-height: 1.5; }

/* Sub-headings stay sans: the contrast against serif prose is what makes the
   hierarchy legible without needing size alone to carry it. */
.sec-body h3,
.sec-body h4 {
  font-family: var(--font);
  letter-spacing: -.005em;
}
.sec-body h3 { font-size: .98rem; font-weight: 700; margin: 30px 0 9px; }
.sec-body h4 { font-size: .9rem; font-weight: 700; color: var(--ink-soft); }

/* Tables are data, not prose. */
.sec-body table { font-family: var(--font); font-size: .93rem; }

/* Serif needs a slightly narrower measure than sans to stay comfortable. */
article { max-width: 64ch; }

.sec-body strong { font-weight: 700; }
.sec-body code { font-size: .85em; }

/* ---------- pager: no empty columns ----------
   The first and last sections have only one neighbour. Reserving a column for
   the missing one strands the single card against dead space, so a lone card
   takes the full width instead. */
.pager { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pager a.next { text-align: right; }
.pager a.prev { text-align: left; }
.pager > a:only-child { grid-column: 1 / -1; }

/* ---------- the top bar, on one scale ----------
   Every control in the bar is the same height, the same type size and the same
   border. The native <select> is reset too, otherwise the operating system
   draws it at its own size and the row stops reading as one row. */
:root { --ctl-h: 32px; }

.topbar { gap: 10px; padding: 11px var(--gutter); }

.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.lockup img { flex: none; }
.lockup-text { display: flex; flex-direction: column; line-height: 1.2; }
.lockup-text strong { font-size: .92rem; font-weight: 650; letter-spacing: -.005em; }
.lockup-text small { font-size: .72rem; color: var(--ink-mute); letter-spacing: .01em; }

.ctl {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-h); padding: 0 12px; margin: 0;
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-control);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
.ctl:hover { border-color: var(--accent); color: var(--accent); }
select.ctl {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* The cohort badge states a fact rather than offering an action. */
.ctl-static {
  background: var(--gold-soft); border-color: transparent;
  font-weight: 700; cursor: default;
}
.ctl-static:hover { color: var(--ink); border-color: transparent; }

.searchbtn {
  height: var(--ctl-h); padding: 0 12px; font-size: .84rem;
  border-radius: var(--r-control); gap: 8px;
}
.searchbtn kbd { font-size: .7rem; padding: 2px 5px; }
.menubtn { height: var(--ctl-h); padding: 0 11px; align-items: center; justify-content: center; }
.topbar .who { gap: 8px; }

/* The admin tabs sit on the same scale as the controls beside them. */
.tabs .tab { height: var(--ctl-h); padding: 0 13px; font-size: .82rem; display: inline-flex; align-items: center; }

/* ---------- icon control ---------- */
.ctl-icon { width: var(--ctl-h); padding: 0; }
.ctl-icon svg { display: block; }

/* ---------- when this section last changed ----------
   Under the contents rather than at the foot of the page: a reader checking
   whether a policy has moved should not have to reach the bottom to find out. */
.rail-updated {
  margin: 20px 14px 0; padding: 14px 12px 0;
  border-top: 1px solid var(--line);
  font-size: .76rem; line-height: 1.5; color: var(--ink-mute);
}
.rail-updated span {
  display: block; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: .68rem; color: var(--ink-mute);
  margin-bottom: 3px;
}
.rail-updated:empty { display: none; }
@media print { .rail-updated { display: none; } }

/* ---------- links that leave the handbook ---------- */
.sec-body a[target="_blank"] { white-space: normal; }
svg.ext {
  display: inline-block; vertical-align: 0.02em; margin-left: .22em;
  opacity: .55; flex: none;
}
a:hover svg.ext { opacity: 1; }
@media print {
  svg.ext { display: none; }
}

/* ---------- telephone numbers ----------
   Tappable on a phone, quiet on a desktop where tapping does little. They keep
   the colour of the text around them and carry only a faint underline. */
a.tel {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--ink-mute);
  text-underline-offset: 3px;
}
a.tel:hover { color: var(--accent); text-decoration-color: currentColor; }
@media print { a.tel { text-decoration: none; } }

/* ---------- the palette, as two labelled groups ----------
   A search hit and a written answer are different kinds of thing. They were
   stacked with nothing between them, so it was not obvious there were two
   results at all — and the answer arrived below the fold. */
/* Scoped to [open]. A closed <dialog> is hidden only because the UA stylesheet
   says display:none; an unconditional display on the class outranks that and
   leaves the dialog rendered in normal flow, never in the top layer — so it
   sits at the end of the page and Esc has nothing to dismiss. */
dialog.palette[open] {
  display: flex; flex-direction: column;
}
dialog.palette {
  max-height: min(82vh, 760px);
  padding: 0; overflow: hidden;
}
.palette-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.palette-results { max-height: none; padding: 4px 7px 7px; }

.group-label {
  position: sticky; top: 0; z-index: 2; margin: 0;
  padding: 9px 16px 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.group-label .from { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .75; }

.answer-wrap { border-bottom: 1px solid var(--line); background: var(--surface); }
.answer-wrap .group-label { background: var(--surface); color: var(--accent); }
.answer { padding: 14px 18px 16px; }
.answer .body { font-family: var(--serif); font-size: 1.04rem; line-height: 1.6; margin-bottom: 12px; }

.askrow { padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.askrow .btn { width: 100%; gap: 9px; }
.askrow .btn .q { opacity: .8; font-weight: 500; }

.palette-foot kbd { margin-right: 3px; }

/* A note, not a warning. The gold ground belongs to the two caveats that
   genuinely redirect the reader — the handbook not covering something, or a
   question only the program office can answer. Saying where the authoritative
   wording lives is ordinary guidance and should not shout. */
.answer .caveat.quiet {
  background: transparent;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 0 0;
  color: var(--ink-mute);
  font-size: .82rem;
}

/* The institutional line is orientation, not navigation, and inside the
   handbook the reader already knows where they are. Hiding it on a phone gives
   search 162px instead of 125px — a third more room for the tool most used on
   a small screen. A preference, not a necessity: delete this block and the line
   returns, still on one line and still usable. */
@media (max-width: 720px) {
  .lockup-text small { display: none; }
  .lockup-text { justify-content: center; }
  .searchbtn { flex: 1 1 auto; min-width: 0; }
}

/* Two lines, school above university — the same shape as the lockup inside
   the handbook, where a primary name sits over its context. Set on one line it
   ran to 342px and wrapped awkwardly on a phone; stacked, it holds together at
   any width. */
.mark-text { display: flex; flex-direction: column; line-height: 1.3; }
.mark-text strong {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.mark-text small { font-size: .72rem; letter-spacing: .02em; color: var(--ink-mute); }
@media (max-width: 480px) {
  .mark-text strong { font-size: .74rem; letter-spacing: .11em; }
  .mark-text small { font-size: .68rem; }
}

/* Air between the lockup and the search box. At 10px they read as one crammed
   unit — the name of the place and the tool for using it, touching. Scaled to
   the viewport so a phone keeps its room for the search control itself. */
.searchbtn { margin-left: clamp(8px, 2.5vw, 40px); }