/* ============================================================================
   Physician Hiring: the tool's own stylesheet.

   Loads AFTER css/ed-ui.css, the shared "ED tools look" (an exact copy of the
   master in the dashboard repo: never edit the copy here). That file holds the
   colour, type, shape and depth tokens for light mode, dark mode and print.
   Every colour below is an --ed-* token, so the page follows the device's
   light or dark setting and always prints light. Do not add a hex colour here:
   reuse a token, or add one to the master with its contrast worked out (7:1).

   One sheet for index.html and book.html. No frameworks.
   ============================================================================ */

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font:var(--ed-text)/1.47 var(--ed-font); color:var(--ed-ink); background:var(--ed-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.hidden, [hidden] { display:none !important; }
.small { font-size:var(--ed-text-sm); }
.muted { color:var(--ed-ink-2); font-size:var(--ed-text-sm); }
.faint { color:var(--ed-ink-2); }
.bad { color:var(--ed-red); } .ok { color:var(--ed-green); } .warn { color:var(--ed-amber); }
b, strong { font-weight:600; }
h1, h2, h3 { font-family:var(--ed-font-display); letter-spacing:-.01em; text-wrap:balance; }
a { color:var(--ed-accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
code, pre { font-size:.88em; }
/* Inline line icons (SVG drawn with currentColor; see ICON in app.js). */
.ico { display:inline-block; width:1em; height:1em; vertical-align:-.14em; flex:none; }

/* ---- focus + reduced motion (a11y) -------------------------------------- */
:focus-visible { outline:none; box-shadow:var(--ed-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- overlays: sign-in gate, name picker, applicant's last name ---------- */
/* One sign-in card for every tool: the ED badge, the tool's name, one line,
   the field and a full-width button. margin:auto on the box (not
   align-items:center) keeps a tall card scrollable on a short phone. */
.overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:16px; overflow-y:auto; background:var(--ed-bg); }
.overlay-box { width:100%; max-width:380px; margin:auto; text-align:center; background:var(--ed-surface);
  border-radius:var(--ed-r-lg); box-shadow:var(--ed-shadow); padding:28px 24px;
  animation:pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.overlay-box .logo { width:56px; height:56px; border-radius:14px; margin:0 auto 14px; background:var(--ed-accent);
  color:var(--ed-on-accent); display:grid; place-items:center; font:700 20px/1 var(--ed-font-display); letter-spacing:.02em; }
.overlay-box h2 { margin:0; font-size:24px; font-weight:700; }
.overlay-box p { margin:6px 0 0; }
.overlay-box form { margin-top:20px; text-align:left; }
.overlay-box input, .overlay-box select { font:inherit; color:var(--ed-ink); width:100%; min-height:var(--ed-tap);
  padding:10px 14px; margin-top:12px; border:1px solid transparent; border-radius:var(--ed-r-md);
  background:var(--ed-surface-2); transition:border-color .15s, box-shadow .15s; }
.overlay-box form input { margin-top:0; }
.overlay-box input:focus, .overlay-box select:focus { outline:none; border-color:var(--ed-accent); box-shadow:var(--ed-ring); }
.overlay-box .note { text-align:left; margin-top:14px; }
/* The gate's visible field label (shared .ed-label: 15px semibold, field below).
   The field must not inherit the label's weight and size. */
.gatelabel input { font-weight:400; font-size:var(--ed-text); }

/* ---- buttons: one family, pill-shaped, 44px tall ------------------------ */
/* filled = the one main action, tinted = other actions, ghost = plain text
   button (Cancel, Edit, the arrows), danger = destructive. */
.primary, .btn { font:600 var(--ed-text)/1.2 var(--ed-font); cursor:pointer; border:0; border-radius:999px;
  min-height:var(--ed-tap); padding:10px 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; text-align:center; transition:background-color .15s, opacity .15s; }
.primary { width:100%; margin-top:12px; background:var(--ed-accent); color:var(--ed-on-accent); }
.primary:hover, .btn.filled:hover, .primary:active, .btn.filled:active { background:var(--ed-accent-press); }
.primary:disabled, .btn:disabled { opacity:.45; cursor:default; }
.btn.filled { background:var(--ed-accent); color:var(--ed-on-accent); }
.btn.tinted { background:var(--ed-accent-tint); color:var(--ed-accent-ink); }
.btn.ghost { background:none; color:var(--ed-accent-ink); padding:6px 12px; }
.btn.danger { background:var(--ed-red-tint); color:var(--ed-red); }
.btn.tinted:hover, .btn.ghost:hover:not(:disabled), .btn.danger:hover, .flagbtn:hover, .savebtn:hover {
  background-image:linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 0 0); }
.btn.small { font-size:var(--ed-text-sm); padding:6px 16px; min-height:36px; }
.btn.ghost.small { padding:6px 10px; white-space:nowrap; }
.btn .ico { width:20px; height:20px; }

/* Setup modal (a sheet over the current page). The sheet is the grey page
   colour and its sections are white cards on it, so nothing is a box in a box. */
#setupModal { background:rgba(0,0,0,.4); align-items:flex-start; padding:4vh 16px; }
#confirmWrap { background:rgba(0,0,0,.4); }
#confirmWrap .overlay-box { text-align:left; max-width:420px; box-shadow:var(--ed-shadow-lg); }
#confirmWrap h2 { font-size:20px; }
#confirmMsg { white-space:pre-line; }
.modal-box { background:var(--ed-bg); border-radius:var(--ed-r-lg); box-shadow:var(--ed-shadow-lg);
  width:100%; max-width:640px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
  animation:pop .28s cubic-bezier(.2,.8,.2,1); text-align:left; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px 10px 20px; border-bottom:1px solid var(--ed-line-soft); background:var(--ed-surface); flex:none; }
.modal-head h2 { margin:0; font-size:20px; font-weight:700; }
.modal-body { padding:4px 16px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-body .hint:last-child { margin:12px 4px 0; }
@media (max-width:640px) {
  #setupModal { padding:0; } .modal-box { max-height:100vh; height:100%; border-radius:0; } }

/* Text actions (Change, Remove, Export CSV): words, not buttons. */
.linky { background:none; border:0; color:var(--ed-accent-ink); cursor:pointer; font:inherit; font-weight:500;
  padding:0; text-align:left; }
.linky:hover { text-decoration:underline; }
.linky.danger { color:var(--ed-red); }
/* Seventeen red "Remove" links down a list read as seventeen problems, so since
   R11 Remove sits inside each row's "More" menu (same confirm). Inside the menu
   it is red, like every destructive item there. */
.collist .moremenu .linky.danger { color:var(--ed-red); }

/* header icon button (Setup gear) and the sheet's close button */
.iconbtn { background:transparent; border:0; color:var(--ed-ink-2); cursor:pointer;
  width:var(--ed-tap); height:var(--ed-tap); border-radius:12px; display:inline-flex; align-items:center;
  justify-content:center; transition:background-color .15s, color .15s; flex:none; }
.iconbtn:hover { background:var(--ed-fill); color:var(--ed-ink); }
.iconbtn.active { background:var(--ed-accent-tint); color:var(--ed-accent-ink); }

/* small "i" info badge. The ::after widens the tap area to 44px without
   moving anything. */
.info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--ed-fill); color:var(--ed-ink); font:700 13px/1 var(--ed-font);
  font-style:normal; cursor:help; vertical-align:middle; user-select:none; margin-left:2px; }
.info::after { content:""; position:absolute; inset:-12px; }
.info:hover, .info:focus-visible { background:var(--ed-accent-tint); color:var(--ed-accent-ink); }
/* Instant custom tooltip (appended to body so it's never clipped).
   NB: class is `tooltip`, not `tip`. It used to be `.tip`, which collided with
   the `.note.tip` help boxes: those inherited position:absolute and opacity:0
   from here and were invisible on every tab. Don't rename it back. */
.tooltip { position:absolute; z-index:400; max-width:300px; background:var(--ed-toast-bg); color:var(--ed-toast-ink);
  padding:8px 12px; border-radius:var(--ed-r-sm); font:400 var(--ed-text-sm)/1.4 var(--ed-font);
  box-shadow:var(--ed-shadow-lg); pointer-events:none; opacity:0; transition:opacity .09s ease; }
.tooltip.show { opacity:1; }
.err { color:var(--ed-red); font-size:var(--ed-text-sm); min-height:1.2em; margin-top:12px; }

/* ---- spinner (drawn in the button's own text colour) --------------------- */
.spinner { width:18px; height:18px; border:2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; }
.spinner.dark { border-color:var(--ed-fill); border-top-color:var(--ed-accent); }
@keyframes spin { to { transform:rotate(360deg); } }
.btn.loading { pointer-events:none; opacity:.85; }
.overlay-loading { display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; color:var(--ed-ink-2); }
.overlay-loading .spinner { width:26px; height:26px; }

/* ---- app header ---------------------------------------------------------- */
header#appHeader, header.page { padding:16px var(--ed-gutter) 8px; max-width:var(--ed-maxw); margin:0 auto; }
.brandrow { display:flex; align-items:center; gap:10px; }
.brandmark { width:32px; height:32px; border-radius:9px; background:var(--ed-accent); color:var(--ed-on-accent);
  display:grid; place-items:center; font:700 13px/1 var(--ed-font-display); letter-spacing:.02em; flex:none; }
h1 { font-size:20px; margin:0; font-weight:700; }
header.page .muted { margin:2px 0 0; }
.who { display:flex; gap:6px 10px; align-items:center; font-size:var(--ed-text-sm); color:var(--ed-ink-2);
  margin-top:6px; flex-wrap:wrap; }
.who b { color:var(--ed-ink); }
.tag { background:var(--ed-fill); color:var(--ed-ink); border-radius:999px; padding:3px 10px;
  font:600 var(--ed-text-xs)/1.4 var(--ed-font); }

/* ---- deadline banner ------------------------------------------------------
   The state modifier is `past`, NOT `info`. renderBanner sets the whole
   className ("banner past"), and `.info` is the round badge above, so
   `banner info` collapsed the banner to a 16px inline-flex circle with its
   contents hanging off the left edge, overlapping the header. It needed no
   code change to appear: the class only gets added once the deadline is in
   the past, so it broke by itself the morning after the deadline. Same trap
   as `.tip` vs `.tooltip` above.
   The explicit display/width/height/radius are the belt-and-braces half: a
   modifier that collides in future is overridden here rather than reshaping
   the bar. */
.banner { display:block; width:auto; height:auto; border-radius:0;
  max-width:var(--ed-maxw); margin:0 auto; padding:4px var(--ed-gutter) 0; }
.banner .inner { display:flex; align-items:center; gap:10px; background:var(--ed-amber-tint); color:var(--ed-amber);
  border-radius:var(--ed-r-md); padding:10px 14px; font-size:var(--ed-text-sm); }
.banner .inner .ico { width:18px; height:18px; }
.banner.past .inner { background:var(--ed-accent-tint); color:var(--ed-accent-ink); }
.banner.urgent .inner { background:var(--ed-red-tint); color:var(--ed-red); }
.banner .inner b { font-weight:600; }

/* ---- tabs: a segmented control on a visible track ------------------------
   No numbers in the names. On a phone the track scrolls sideways; when a tab
   is out of view the edge fades (`more-left` / `more-right`, set in
   buildTabs) so the hidden one is never just cut off. The page-coloured ring
   hides content scrolling underneath once the bar sticks. */
nav.tabs { position:sticky; top:8px; z-index:5; display:flex; gap:2px; padding:3px;
  width:calc(100% - 2 * var(--ed-gutter)); max-width:calc(var(--ed-maxw) - 2 * var(--ed-gutter)); margin:8px auto 4px;
  background:var(--ed-seg-track); border-radius:var(--ed-r-sm); box-shadow:0 0 0 8px var(--ed-bg);
  overflow-x:auto; scrollbar-width:none; }
nav.tabs::-webkit-scrollbar { display:none; }
nav.tabs.more-right { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); }
nav.tabs.more-left { -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(to left, #000 calc(100% - 40px), transparent); }
nav.tabs.more-left.more-right { -webkit-mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
nav.tabs button { flex:1 0 auto; font:500 var(--ed-text-sm)/1 var(--ed-font); border:0; background:none;
  border-radius:var(--ed-r-xs); min-height:38px; padding:0 14px; color:var(--ed-ink); cursor:pointer; white-space:nowrap; }
nav.tabs button.on { background:var(--ed-seg-on); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* ---- main + cards -------------------------------------------------------- */
main { padding:8px var(--ed-gutter) 64px; max-width:var(--ed-maxw); margin:0 auto; }
h3 { font-size:var(--ed-h3); margin:28px 0 8px; font-weight:700; }
.card { background:var(--ed-surface); border-radius:var(--ed-r-lg); box-shadow:var(--ed-shadow);
  padding:16px 20px; margin:12px 0; }
.card.flush { padding:0; overflow:hidden; }
/* ---- ruled list ----------------------------------------------------------
   Seventeen applicants used to be seventeen cards: seventeen borders, seventeen
   shadows, and 1.5 screens of gaps between them. One card, hairlines between
   the rows, so a column of names reads as a list instead of a stack of boxes. */
.list > .rrow, .list > .prow { padding:12px 16px; border-top:1px solid var(--ed-line-soft); }
.list > .rrow:first-child, .list > .prow:first-child { border-top:none; }
.list > .prow.open { background:var(--ed-surface-2); }
.rrow .row, .prow .row { flex-wrap:wrap; row-gap:8px; }
.rrow .rate, .rrow .flagbtn { margin-left:auto; }
.rrow .rate + .flagbtn { margin-left:0; }
.prow .members { color:var(--ed-ink-2); margin-top:4px; }
.row { display:flex; gap:10px; align-items:flex-start; }
.row.center { align-items:center; }
.grow { flex:1; min-width:0; }
.name { font-weight:600; overflow-wrap:anywhere; }
a.doc { font-size:var(--ed-text-sm); display:inline-flex; align-items:center; gap:4px; }

/* helper text. Not a box: inside a card a boxed note was a box in a box. */
.note { margin:8px 0; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.note b { color:var(--ed-ink); }

/* ---- one line of guidance, and one line of progress ----------------------
   These replace the blue "What to do here" panel and the boxed "8 of 17
   reviewed by you" note that used to stack above every list. No border, no
   background: they read as captions and the content starts at the top. */
.hint { margin:4px 0 12px; font-size:var(--ed-text-sm); color:var(--ed-ink-2); max-width:60ch; }
/* Secondary actions (export, print, undo). Text, not buttons: they are things
   you do once at the end, not the point of the page. */
.toolline { margin:4px 0 12px; font-size:var(--ed-text-sm); display:flex; gap:4px 20px; flex-wrap:wrap; }
.progress { margin:4px 0 10px; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.progress b { color:var(--ed-ink); font-weight:600; }
.pagetitle { font-size:var(--ed-h2); font-weight:700; margin:16px 0 4px; }
.docline { margin:4px 0 12px; font-size:var(--ed-text-sm); }

.adminbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 4px; }

/* ---- collapsible section (a card with a tappable title row) -------------- */
details.section { background:var(--ed-surface); border-radius:var(--ed-r-lg); box-shadow:var(--ed-shadow);
  margin:12px 0; overflow:hidden; }
details.section > summary { list-style:none; cursor:pointer; padding:12px 16px; min-height:var(--ed-tap);
  display:flex; align-items:center; gap:10px; user-select:none; transition:background-color .15s; }
details.section > summary::-webkit-details-marker { display:none; }
details.section > summary:hover { background:var(--ed-surface-2); }
details.section > summary .sec-title { font-weight:600; font-size:var(--ed-text); flex:1; min-width:0; }
details.section > summary .sec-sub { font-size:var(--ed-text-sm); color:var(--ed-ink-2); font-weight:400; }
details.section > summary .chev { width:18px; height:18px; color:var(--ed-ink-2); flex:none; transition:transform .2s ease; }
details.section[open] > summary .chev { transform:rotate(90deg); }
details.section > summary .count { display:inline-flex; align-items:center; background:var(--ed-amber-tint);
  color:var(--ed-amber); border-radius:999px; padding:4px 8px; font-size:var(--ed-text-xs); font-weight:600; }
.sec-body { padding:0 16px 16px; }
.sec-body > .note:first-child { margin-top:0; }

/* ---- links out ----------------------------------------------------------- */
a.doc:hover { text-decoration:underline; }

/* ---- pills: only where a status is NOT the expected one ----------------- */
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px;
  font:600 var(--ed-text-xs)/1.4 var(--ed-font); white-space:nowrap; }
.pill.in, .pill.ip { background:var(--ed-green-tint); color:var(--ed-green); }
.pill.out { background:var(--ed-red-tint); color:var(--ed-red); }
.pill.zoom { background:var(--ed-purple-tint); color:var(--ed-purple); }
.pill.neutral { background:var(--ed-fill); color:var(--ed-ink); }
.pill.amber { background:var(--ed-amber-tint); color:var(--ed-amber); }

/* ---- flag + save-reason buttons (same pill family) ---------------------- */
.flagbtn, .savebtn { font:600 var(--ed-text-sm)/1 var(--ed-font); border:0; border-radius:999px; cursor:pointer;
  min-height:var(--ed-tap); padding:0 16px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  background:var(--ed-accent-tint); color:var(--ed-accent-ink); transition:background-color .15s; }
.flagbtn.on { background:var(--ed-red-tint); color:var(--ed-red); }
.flagbtn .ico { width:16px; height:16px; }
.savebtn { min-height:36px; }

/* ---- segmented controls: rating 1 to 5, in person / Zoom / either, sort,
   offer status. One shape everywhere: a grey track, the chosen segment white. */
.rate, .seg { display:inline-flex; background:var(--ed-seg-track); border-radius:var(--ed-r-sm); padding:3px; gap:2px;
  max-width:100%; }
.rate button, .seg button { font:500 var(--ed-text-sm)/1 var(--ed-font); border:0; background:none; cursor:pointer;
  min-height:38px; padding:0 14px; border-radius:var(--ed-r-xs); color:var(--ed-ink); white-space:nowrap;
  transition:background-color .15s; }
.rate button { min-width:44px; padding:0 8px; font-variant-numeric:tabular-nums; }
.rate button.on, .seg button.on { background:var(--ed-seg-on); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.rate button:hover:not(.on), .seg button:hover:not(.on) { background:color-mix(in srgb, var(--ed-seg-on) 45%, transparent); }
/* interview overall score: typed, 1.0 to 5.0 */
.overall { display:flex; align-items:center; gap:8px; flex:none; }
.overall input[type=text] { width:5.5rem; margin-top:0; text-align:center; font-weight:600; }

textarea, input[type=text], input[type=email], select { font:inherit; width:100%; color:var(--ed-ink); min-height:var(--ed-tap);
  border:1px solid transparent; border-radius:var(--ed-r-md); padding:9px 14px; margin-top:8px;
  background:var(--ed-surface-2); transition:border-color .15s, box-shadow .15s; }
textarea:focus, input[type=text]:focus, input[type=email]:focus, select:focus { border-color:var(--ed-accent); box-shadow:var(--ed-ring); outline:none; }
textarea { resize:vertical; }
::placeholder { color:var(--ed-ink-2); opacity:1; }
.card select, .row select { margin-top:0; width:auto; }
.row select.grow { width:100%; }

/* ---- tables: sentence-case headings, numbers on the right --------------- */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:var(--ed-text-sm); font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--ed-line-soft); vertical-align:middle; }
th { color:var(--ed-ink-2); font-weight:600; padding-top:10px; padding-bottom:10px; border-bottom-color:var(--ed-line); white-space:nowrap; }
th.num, td.num { text-align:right; }
tr:last-child td { border-bottom:none; }
.rankn { color:var(--ed-ink-2); font-variant-numeric:tabular-nums; font-weight:600; }
td .name { font-weight:500; }
td.name { overflow-wrap:normal; min-width:8.5rem; }

/* ---- times list (in person / Zoom / either per time) -------------------- */
.slotgrid { display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:center; }
.slotgrid .h { color:var(--ed-ink-2); font-size:var(--ed-text-xs); font-weight:600; }
.slotgrid > .slabel { font-variant-numeric:tabular-nums; }

/* ---- panels -------------------------------------------------------------- */
/* A badge is now only ever a fault. Every panel used to wear "3 members" and
   "balanced panel" ticks, so the page was a column of ticks confirming nothing
   was wrong, which is the reading that hides a real fault. */
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px;
  font:600 var(--ed-text-xs)/1.4 var(--ed-font); }
.badge.bad { background:var(--ed-red-tint); color:var(--ed-red); }
/* Needs attention: the one place on the tab that is allowed to shout. */
.attention .ahead { color:var(--ed-amber); display:flex; align-items:center; gap:8px; font-size:var(--ed-text); }
.attention ul.small li { margin:8px 0; }
ul.small { margin:8px 0 0; padding-left:20px; } ul.small li { margin:6px 0; }
.chip { display:inline-flex; align-items:center; gap:4px; background:var(--ed-fill); color:var(--ed-ink);
  border-radius:999px; padding:3px 10px; font-size:var(--ed-text-xs); line-height:1.4; margin:2px 4px 2px 0; }
label.chip { font-size:var(--ed-text-sm); padding:6px 12px; }
.chip .x { color:var(--ed-ink); cursor:pointer; margin-left:4px; font-weight:700; }
.chip .x:hover { color:var(--ed-red); }
.peditor { margin-top:12px; border-top:1px solid var(--ed-line-soft); padding-top:12px; }

/* ---- empty state: a line icon, a title, one line ------------------------ */
.empty { text-align:center; padding:28px 16px; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--ed-ink-2); font-size:var(--ed-text-sm); }
.empty > svg { width:40px; height:40px; margin-bottom:4px; }
.empty .empty-title { font-family:inherit; letter-spacing:normal; margin:0; color:var(--ed-ink); font-size:var(--ed-text); font-weight:600; }
.empty p { margin:0; max-width:340px; }

/* ---- toast: a small dark pill; taps go through it ----------------------- */
.toast { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:200;
  transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; width:max-content;
  max-width:calc(100vw - 32px); background:var(--ed-toast-bg); color:var(--ed-toast-ink); border-radius:22px;
  padding:10px 18px; font:500 var(--ed-text-sm)/1.3 var(--ed-font); box-shadow:var(--ed-shadow-lg);
  pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.hide { opacity:0; transform:translateX(-50%) translateY(8px); }
.toast.toast-ok::before, .toast.toast-err::before { content:""; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:var(--toast-icon) center / contain no-repeat; mask:var(--toast-icon) center / contain no-repeat; }
.toast.toast-ok { --toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5l3 3 7-7'/%3E%3C/svg%3E"); }
.toast.toast-err { --toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='7.2'/%3E%3Cpath d='M9 5.2v4.4M9 12.4v.3'/%3E%3C/svg%3E"); }

/* ---- saving indicator ---------------------------------------------------- */
.saveflag { font-size:var(--ed-text-xs); color:var(--ed-ink-2); display:inline-flex; align-items:center; gap:6px; }
.saveflag.saving { color:var(--ed-ink-2); }
.saveflag.saved { color:var(--ed-green); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:640px) {
  header.page h1, #appHeader h1 { font-size:18px; }
  .card { padding:14px 16px; }
  .row { gap:8px; }
  nav.tabs button { padding:0 12px; }
  .slotgrid { grid-template-columns:1fr; gap:6px; }
  /* one column on a phone, so the second column heading has nothing to head */
  .slotgrid .h + .h { display:none; }
  .slotgrid > .slabel { margin-top:8px; font-weight:500; }
  .slotgrid > .slotday + .slabel { margin-top:0; }
  .slotgrid .seg { display:flex; width:100%; }
  .slotgrid .seg button { flex:1 1 0; padding:0 6px; }
  /* the rotated names need a little more headroom once columns are at minimum */
  .avgrid th.ivcol { height:5.6rem; }
  /* A name, five rating buttons and a flag button do not fit across a phone.
     The name shares the first line with the flag button; the rating takes the
     whole second line, its five segments sharing the width equally. */
  .rrow .row > .name { flex:1 1 0; }
  .rrow .flagbtn { order:1; margin-left:auto; }
  .rrow .rate { order:2; flex:1 0 100%; margin-left:0; }
  .rrow .rate button { flex:1 1 0; }
  th, td { padding-left:10px; padding-right:10px; }
}

/* ---- touch targets -------------------------------------------------------
   Keyed on `pointer: coarse` as well as width, because a tablet is a touch
   device at 768px+. Text actions grow their hit box to about 44px with
   padding that negative margins cancel, so the layout does not move. */
@media (max-width:640px), (pointer: coarse) {
  .linky { padding-top:11px; padding-bottom:11px; margin-top:-11px; margin-bottom:-11px; }
  .btn.small, .savebtn { min-height:var(--ed-tap); }
  .rate button, .seg button, nav.tabs button { min-height:var(--ed-tap); }
  label.chip { min-height:var(--ed-tap); }
  details.raters > summary { padding:11px 0; margin:-11px 0; }
}
@media print {
  nav.tabs, .primary, .btn, .flagbtn, .savebtn, .linky, #toast, .banner, .note.tip,
  .hint, .tooltip { display:none !important; }
  body { background:var(--ed-bg); }
  .card, details.section { box-shadow:none; border:1px solid var(--ed-line); break-inside:avoid; }
  .list > .rrow, .list > .prow { break-inside:avoid; }
  details.section > .sec-body, details.section .sec-body { display:block !important; }
  a { color:var(--ed-ink); }
}

/* ---- Setup: interview times editor -------------------------------------- */
/* Day headings get a hairline only BETWEEN days: the first one sits at the
   top of its card, where a rule above it was a stray line. */
.slotgrid .slotday { grid-column:1 / -1; margin-top:12px; padding-top:12px; border-top:1px solid var(--ed-line-soft);
  font-weight:600; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.slotgrid > .slotday:first-child, .slotgrid .h + .h + .slotday { border-top:none; margin-top:0; padding-top:0; }
.tgroup { margin:4px 0 16px; }
.tgroup-h { display:flex; align-items:baseline; gap:2px 6px; padding:6px 0; border-bottom:1px solid var(--ed-line); flex-wrap:wrap; }
.tgroup-h .muted, .tgroup-h .linky { white-space:nowrap; }
.tgroup-h .linky { margin-left:auto; font-size:var(--ed-text-sm); }
.trow { display:flex; align-items:center; gap:6px 16px; padding:8px 0; border-bottom:1px solid var(--ed-line-soft); flex-wrap:wrap; }
.trow .grow { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.trow .ttime { font-variant-numeric:tabular-nums; font-weight:500; min-width:9.5em; }
.trow.editing { display:block; padding:12px 0; }
.tadd { margin-top:16px; padding-top:12px; border-top:1px solid var(--ed-line); }
.tadd-h { margin-bottom:8px; }
.tform { display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:8px 12px; }
.tform label { font-size:var(--ed-text-xs); color:var(--ed-ink-2); font-weight:600; }
.tform input, .tform select { display:block; width:100%; font:400 var(--ed-text-sm)/1.3 var(--ed-font); color:var(--ed-ink);
  border:1px solid transparent; border-radius:var(--ed-r-md); padding:8px 12px; margin-top:4px;
  background:var(--ed-surface-2); min-height:var(--ed-tap); }
.tform input:focus, .tform select:focus { border-color:var(--ed-accent); box-shadow:var(--ed-ring); outline:none; }
@media (max-width:640px) { .tform { grid-template-columns:1fr 1fr; } .trow .ttime { min-width:0; } }

/* ---- availability grid: who's available when ---------------------------- */
/* Rows are interview times, columns are interviewers. The letter in each cell
   carries the same meaning as the colour, so the grid still reads correctly
   without colour vision. */
.gridwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -3px; padding:0 3px 3px; }
/* width:auto beats the global table{width:100%}, which would stretch the time
   column across the card and push the squares to the far right. */
.avgrid { width:auto; border-collapse:separate; border-spacing:3px; font-size:var(--ed-text-xs); }
.avgrid th, .avgrid td { padding:0; font-weight:500; border:0; }
/* Interviewer names are slanted 45 degrees rather than set vertically: at 45
   the letters stay upright enough to read at a glance, and 13 columns still
   fit in the width of a phone.
   NB: class is `ivcol`, not `who`: the global `.who` is display:flex, which
   would stop these <th> laying out as table cells at all.
   The label is absolutely positioned and rotated about its bottom-left corner,
   so each name STARTS at its own column and rises to the right. Rotated text is
   out of flow and cannot widen the table, so the header carries a `pad` spacer
   column on the right to stop the last name being clipped by .gridwrap. */
.avgrid th.ivcol { position:relative; vertical-align:bottom; height:5.3rem; width:1.9rem; min-width:1.9rem; overflow:visible; }
.avgrid th.ivcol span { position:absolute; left:50%; bottom:.3rem; transform-origin:0 100%;
  transform:rotate(-45deg); display:inline-block;
  white-space:nowrap; font-size:var(--ed-text-xs); color:var(--ed-ink-2); font-weight:600; cursor:default; line-height:1; }
.avgrid th.pad, .avgrid td.pad { width:3.8rem; min-width:3.8rem; padding:0; border:none; }
.avgrid th.tlab { text-align:right; padding-right:8px; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-weight:500; color:var(--ed-ink-2); position:sticky; left:0; background:var(--ed-surface); z-index:1;
  font-size:var(--ed-text-xs); }
/* min-width, not just width: a table set to shrink-to-fit inside the scrolling
   wrapper will happily squash single-letter cells to slivers on a phone. The
   minimum is what makes it overflow and scroll instead. */
.avgrid td.av { width:1.9rem; min-width:1.9rem; height:1.9rem; text-align:center; border-radius:var(--ed-r-xs);
  font-size:var(--ed-text-xs); font-weight:700; color:var(--ed-on-accent); cursor:default; line-height:1.9rem; }
.avgrid td.av.ip     { background:var(--ed-green); }
.avgrid td.av.zoom   { background:var(--ed-purple); }
.avgrid td.av.either { background:var(--ed-accent); }
.avgrid td.av.no     { background:var(--ed-fill); }
.avgrid tr.dayrow td { padding:10px 3px 3px; font-weight:600; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.avgrid td.sum { text-align:center; white-space:nowrap; padding:0 8px; border-radius:var(--ed-r-xs);
  font-variant-numeric:tabular-nums; font-weight:600; cursor:default; }
.avgrid td.sum.yes  { background:var(--ed-green-tint); color:var(--ed-green); }
.avgrid td.sum.nope { background:var(--ed-red-tint); color:var(--ed-red); }
.avgrid th.sum { font-size:var(--ed-text-xs); color:var(--ed-ink-2); font-weight:600; padding:0 8px; vertical-align:bottom; }
.glegend { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin-top:12px;
  font-size:var(--ed-text-xs); color:var(--ed-ink-2); }
.glegend span { display:inline-flex; align-items:center; gap:6px; }
.glegend .muted { font-size:var(--ed-text-xs); }
.glegend .sw { width:22px; height:22px; border-radius:6px; display:inline-block;
  font-style:normal; font-size:var(--ed-text-xs); font-weight:700; color:var(--ed-on-accent); text-align:center; line-height:22px; }
.glegend .sw.ip { background:var(--ed-green); } .glegend .sw.zoom { background:var(--ed-purple); }
.glegend .sw.either { background:var(--ed-accent); } .glegend .sw.no { background:var(--ed-fill); }

/* ---- the same grid for applicants -------------------------------------- */
/* Same table, one extra state: the time an applicant is actually being
   interviewed at. It is drawn as a RING rather than another colour: the grid
   already spends its four colours on in person / Zoom / either / unavailable,
   and a fifth hue would be both unreadable and invisible to anyone who can't
   separate them. A shape is neither. `inset` so it can't widen a cell. */
.avgrid td.av.booked { box-shadow:inset 0 0 0 2.5px var(--ed-ink); }
/* An hour nobody has asked for yet: neither good news nor a problem. */
.avgrid td.sum.idle { background:none; color:var(--ed-ink-2); }
/* Seventeen applicants is wider than any phone, and the summary is the column
   you are reading the row FOR, so it is pinned to the right edge the way the
   time label is pinned to the left. `demand` is only ever a modifier on
   .avgrid; it is never a utility of its own (see the .tip/.info note above).
   Every pinned cell sets its own background, or the columns it floats over
   would show through it, and an edge, or a rotated name sliding beneath
   "Usable" reads as one smudge with it. */
.avgrid.demand td.sum, .avgrid.demand th.sum { position:sticky; right:0; z-index:1; background:var(--ed-surface);
  box-shadow:-3px 0 0 var(--ed-surface), -4px 0 0 var(--ed-line), 6px 0 0 var(--ed-surface); }
.avgrid.demand th.sum { padding-left:10px; }
/* Same reason for the date: scrolled a few names in, the day had left the
   screen and the rows lost the day they belong to. */
.avgrid.demand tr.dayrow td { position:sticky; left:0; background:var(--ed-surface); }
.glegend .sw.booked { box-shadow:inset 0 0 0 2px var(--ed-ink); }
/* Footer row: how many times each applicant offered, and a dash for the ones
   who have sent nothing at all: the column you scan to know who to chase. */
.avgrid tr.footrow th.tlab { padding-top:8px; font-weight:600; color:var(--ed-ink-2); }
.avgrid td.tot { text-align:center; padding-top:8px; font-size:var(--ed-text-xs); font-weight:600;
  color:var(--ed-ink-2); font-variant-numeric:tabular-nums; cursor:default; }
.avgrid td.tot.none { color:var(--ed-red); }

/* ---- collation & shortlist (admin) -------------------------------------- */
/* A row per applicant instead of a six-column table. Several people can flag
   one applicant, each with a sentence of their own; stacked and attributed,
   it reads. */
.sortbar { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin:4px 0 4px; }
.collist { margin:4px 0; }
.collrow { border-top:1px solid var(--ed-line-soft); padding:12px 0; }
.collrow:first-child { border-top:none; }
.collrow.out .collhead .name { color:var(--ed-ink-2); }
.collhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.collhead .name { font-weight:600; }
.collhead .spacer { flex:1; min-width:0; }
.collmeta { display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; margin-top:4px;
  font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.collmeta .metric { display:inline-flex; align-items:baseline; gap:5px; cursor:default; }
.collmeta .metric b { color:var(--ed-ink); font-variant-numeric:tabular-nums; }
.collmeta .metric.flagged b { color:var(--ed-red); }
.collmeta .denom { color:var(--ed-ink-2); font-size:var(--ed-text-xs); }
.collmeta .thin { color:var(--ed-amber); }
ul.reasons { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
ul.reasons li { display:flex; gap:8px; font-size:var(--ed-text-sm); color:var(--ed-ink-2);
  border-left:3px solid var(--ed-line); padding:2px 0 2px 10px; }
ul.reasons li .rwho { font-weight:600; color:var(--ed-ink); white-space:nowrap; }
ul.reasons li.noreason { font-style:italic; }

/* who rated, and what. A <details> rather than a tooltip: a phone has no hover. */
details.raters > summary { list-style:none; cursor:pointer; color:var(--ed-accent-ink); font-weight:500;
  font-size:var(--ed-text-sm); user-select:none; }
details.raters > summary::-webkit-details-marker { display:none; }
details.raters > summary::after { content:""; display:inline-block; width:6px; height:6px; margin:0 0 3px 7px;
  border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
details.raters[open] > summary::after { transform:rotate(-135deg); margin-bottom:0; }
.raterlist { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ratechip { display:inline-flex; align-items:center; gap:6px; background:var(--ed-fill); color:var(--ed-ink);
  border-radius:999px; padding:2px 10px; font-size:var(--ed-text-xs); }
.ratechip b { font-variant-numeric:tabular-nums; }

/* attention callout inside a section: input stranded on a removed entry, or
   applicants the times can't hold. Tinted, not boxed. */
.note.warnbox { background:var(--ed-amber-tint); color:var(--ed-ink); border-radius:var(--ed-r-md); padding:12px 14px; }
.note.warnbox .muted { color:var(--ed-ink); }
.warn .ico, .ahead .ico, .badge .ico, .count .ico { width:16px; height:16px; }
b.warn { display:inline; }
.hidrow { border-top:1px solid color-mix(in srgb, var(--ed-amber) 25%, transparent); margin-top:10px; padding-top:10px; }
pre.cmd { background:var(--ed-surface); color:var(--ed-ink); border-radius:var(--ed-r-xs);
  padding:8px 10px; margin:6px 0 0; font-size:var(--ed-text-xs); overflow-x:auto;
  white-space:pre; -webkit-overflow-scrolling:touch; }
.collrow .more { font-size:var(--ed-text-sm); margin-top:4px; }

/* ---- ranking ------------------------------------------------------------- */
.shift { font-size:var(--ed-text-xs); font-weight:700; margin-left:4px; }
.shift.up { color:var(--ed-green); } .shift.down { color:var(--ed-red); }
td.adj { font-variant-numeric:tabular-nums; color:var(--ed-ink-2); }
.thinscore { color:var(--ed-amber); font-weight:600; }
/* Phone: keep #, Candidate and Avg as columns; Adj and Scored by drop to a
   second line under the name so the table fits 390px without sideways scroll. */
.ranktable .rk-sub { display:none; }
@media (max-width:640px) {
  .ranktable .rk-opt { display:none; }
  .ranktable td.name { min-width:0; }
  .ranktable .rk-sub { display:block; margin-top:2px; font-size:var(--ed-text-xs); font-weight:400;
    color:var(--ed-ink-2); font-variant-numeric:tabular-nums; }
}

/* ---- score tab: candidate picker stays in reach ------------------------- */
/* The candidate picker sits at the top of the scoring list. As a sticky bar of
   its own inside the list card it overlapped the first question (a sticky child
   of an `overflow:hidden` card paints over its siblings). */
.scorebar .row { gap:8px; flex-wrap:nowrap; }
.scorebar select { max-width:100%; }
.scorenav { display:inline-flex; gap:2px; flex:none; }
.scorenav .btn.ghost.small { padding:0; width:var(--ed-tap); }
.qrow.done .q { color:var(--ed-ink); }
/* The question text in the scoring list. */
.qrow .q { font-weight:500; margin-bottom:6px; }

/* ---- "saved on this device only" notice --------------------------------- */
.note.local { color:var(--ed-ink-2); }
.note.local b { color:var(--ed-ink); }

/* ---- Ranking: Offers -----------------------------------------------------
   One ruled list (same shape as the screening list): rank, name, a segmented
   status control, then the dates and a note. The chosen status is the only
   coloured thing on the row, so a glance down the list reads the outcomes. */
.sechead { margin:32px 0 4px; font-size:var(--ed-h2); }
.ofsummary { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 10px; font-size:var(--ed-text-sm); }
.rrow.offer .rankn { min-width:1.6rem; text-align:center; }
.rrow.offer .ofseg { margin-left:auto; }
.ofseg button.on.none { color:var(--ed-ink); }
.ofseg button.on.offered { background:var(--ed-accent-tint); color:var(--ed-accent-ink); }
.ofseg button.on.accepted { background:var(--ed-green-tint); color:var(--ed-green); }
.ofseg button.on.declined { background:var(--ed-red-tint); color:var(--ed-red); }
.ofdates { display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0 2.3rem; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.ofdates label { display:inline-flex; align-items:center; gap:8px; }
.ofdates input[type=date] { font:inherit; color:var(--ed-ink); border:1px solid transparent; border-radius:var(--ed-r-sm);
  padding:4px 10px; background:var(--ed-surface-2); min-height:36px; }
.ofnote { display:flex; gap:8px; align-items:flex-start; margin:10px 0 0 2.3rem; }
.ofnote textarea { margin-top:0; resize:none; overflow:hidden; font-size:var(--ed-text-sm); }
.ofnote .savebtn { flex:none; }
.toolline .linky { color:var(--ed-accent-ink); }
@media (max-width:640px) {
  .rrow.offer .ofseg { margin-left:2.3rem; width:calc(100% - 2.3rem); }
  .rrow.offer .ofseg button { flex:1 1 auto; padding:0 6px; font-size:var(--ed-text-xs); }
  .ofnote { flex-direction:column; align-items:stretch; }
}
@media (max-width:640px), (pointer: coarse) { .ofdates input[type=date] { min-height:var(--ed-tap); } }

/* ---- Back up this cycle --------------------------------------------------- */
.card.backup { margin-top:32px; }
.backup-actions { gap:10px; margin-top:14px; flex-wrap:wrap; }

/* ---- Printed cycle summary (IV.printCycle) --------------------------------
   Built on demand into #printReport; while printing, only it is shown. The
   print colours come from ed-ui.css, which forces the light set for paper. */
#printReport { display:none; }
@media print {
  body.printing-report > *:not(#printReport) { display:none !important; }
  body.printing-report #printReport { display:block; font-size:10.5pt; color:var(--ed-ink); }
  #printReport h1 { font-size:16pt; margin:0 0 2pt; }
  #printReport .pr-sub, #printReport .pr-foot { color:var(--ed-ink-2); font-size:9pt; margin:0 0 10pt; }
  #printReport h2 { font-size:12pt; margin:14pt 0 4pt; break-after:avoid; }
  #printReport table { width:100%; border-collapse:collapse; font-size:9.5pt; }
  #printReport th, #printReport td { border:1px solid var(--ed-line); padding:3pt 5pt; text-align:left; vertical-align:top; }
  #printReport th { background:var(--ed-surface-2); color:var(--ed-ink); white-space:normal; }
  #printReport td.wrap { white-space:pre-wrap; }
  #printReport tr { break-inside:avoid; }
}

/* ---- page-level news line (new release, allowed-list fight) --------------- */
.updline { max-width:var(--ed-maxw); margin:8px auto 0; padding:0 var(--ed-gutter); }
.updline p { margin:0 0 6px; padding:10px 14px; border-radius:var(--ed-r-md); background:var(--ed-accent-tint);
  color:var(--ed-accent-ink); font-size:var(--ed-text-sm); }
.updline .linky { padding:0; min-height:0; font-weight:600; text-decoration:underline; }

/* ---- toast with one action (Undo) takes taps ------------------------------ */
.toast.toast-act { pointer-events:auto; }
.toast-btn { font:600 var(--ed-text-sm)/1.2 var(--ed-font); color:inherit; background:none; border:0; cursor:pointer;
  padding:6px 4px 6px 8px; margin:-6px -6px -6px 0; min-height:36px; text-decoration:underline; }

/* ---- multi-step dialog ----------------------------------------------------- */
#flowWrap .overlay-box { text-align:left; max-width:520px; box-shadow:var(--ed-shadow-lg); }
#flowWrap h2 { font-size:20px; }
#flowBody { margin-top:10px; }
#flowBody p { margin:8px 0; }
.flowbtns { justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.copybox { width:100%; font:inherit; font-size:var(--ed-text-sm); }

/* ---- Setup: change history -------------------------------------------------- */
.hlist .hrow { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid var(--ed-line-soft); }
.hlist .hrow:first-child { border-top:none; }
.hlist .hrow .linky { flex:none; }

/* ---- Setup: committee and screeners (H6) ------------------------------------ */
.pickhint { margin:8px 0 0; text-align:left; }
.mlist .mrow { padding:12px 0; border-top:1px solid var(--ed-line-soft); display:grid; gap:8px; }
.mlist .mrow:first-child { border-top:none; padding-top:4px; }
.mlist .mrow.left input[type=text] { color:var(--ed-ink-2); }
.mopts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mopts .seg button { min-height:36px; }
.mopts .mg { display:inline-flex; align-items:center; gap:6px; }
.mrow input[type=text], .mrow input[type=email] { width:100%; margin:0; }
.mrow .linky.danger { justify-self:start; }

/* ---- Setup: interview questions (H2) ---------------------------------------- */
.qedlist .qedrow { padding:10px 0; border-top:1px solid var(--ed-line-soft); }
.qedlist .qedrow:first-child { border-top:none; padding-top:2px; }
.qedrow textarea { width:100%; margin:0; }
.qedbtns { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.qedbtns .btn.small { min-height:40px; }
.qedbtns .btn.danger { background:none; color:var(--ed-red); }
.qscales { display:grid; gap:6px; }
.qscale { display:flex; align-items:center; gap:10px; }
.qscale span { width:1.2em; color:var(--ed-ink-2); font-variant-numeric:tabular-nums; }
.qscale input { flex:1; margin:0; }

/* ---- stages, deadlines, the schedule lock, list decisions (H4, H7) ------------ */
.stagerow { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--ed-line-soft); flex-wrap:wrap; }
.stagerow:first-child { border-top:none; padding-top:2px; }
.numin { width:4.5rem; display:inline-block; min-height:36px; margin:0 4px; text-align:center; font:inherit; color:var(--ed-ink);
  border:1px solid transparent; border-radius:var(--ed-r-md); background:var(--ed-surface-2); padding:4px 8px; }
.lockbar { display:flex; align-items:center; gap:8px 10px; margin:0 0 10px; flex-wrap:wrap; }
.lockline { margin:0 0 6px; font-size:var(--ed-text-sm); color:var(--ed-ink-2); }
.lockbar .lockline { margin:0; }
.listseg { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.listseg .seg button { min-height:32px; padding:0 12px; }
.notesh { margin:8px 0 2px; }
.reasons.notes li { color:var(--ed-ink-2); }
.knows { display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--ed-ink-2); }
.knows input { width:auto; min-height:0; margin:0; }
.flagbtn + .notebtn { margin-left:0; }
.flagbtn.notebtn.on { background:var(--ed-purple-tint); color:var(--ed-purple); }
.rrow button:disabled, .slotgrid button:disabled { opacity:.55; cursor:default; }
.dlform input { min-width:0; }
@media (max-width:640px) { .tform.dlform { grid-template-columns:1fr; } }

/* ---- applicants: More menu, the two name fields (H5, H14) --------------------- */
details.more { display:inline-block; position:relative; margin-left:10px; }
details.more > summary { list-style:none; cursor:pointer; color:var(--ed-accent-ink); font-weight:500; }
details.more > summary::-webkit-details-marker { display:none; }
.moremenu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:220px; display:grid; gap:2px;
  background:var(--ed-surface); border-radius:var(--ed-r-md); box-shadow:var(--ed-shadow-lg); padding:8px; text-align:left; }
.moremenu .linky { text-align:left; padding:8px 10px; min-height:40px; margin:0; }
.moremenu > span { padding:8px 10px; }
/* the Panels tab's More: a ghost button with a dots icon */
details.panelmore { margin-left:auto; }
details.panelmore > summary { gap:4px; }
.moremenu .menunote { margin:6px 10px 0; padding-top:8px; border-top:1px solid var(--ed-line-soft); max-width:16rem; }
.candlabel { display:block; text-align:left; margin-top:10px; }
.candlabel input { margin-top:6px; }

/* ---- rooms, day chairs, notices, the applicant's interview (H8, H9, H11, H13) -- */
.dayctl { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:4px 0 6px; }
.daychair { display:inline-flex; align-items:center; gap:6px; color:var(--ed-ink-2); }
.daychair select { margin:0; width:auto; min-height:36px; padding:4px 10px; font-size:var(--ed-text-sm); }
.roomseg { margin-left:6px; vertical-align:middle; }
.roomseg button { min-height:30px; padding:0 10px; font-size:var(--ed-text-xs); }
/* R11: two compact groups per panel, "Email: Applicant Panel" and
   "Calendar: Panel Applicant", instead of four long links in a row */
.panelacts { display:flex; flex-wrap:wrap; gap:2px 22px; margin-top:6px; }
.panelacts .actgrp { display:inline-flex; align-items:center; gap:12px; }
.panelacts .actlab { display:inline-flex; align-items:center; gap:6px; color:var(--ed-ink-2); font-size:var(--ed-text-sm); }
.panelacts .linky { padding:4px 0; min-height:32px; }
.scoretoggle { margin-top:8px; }
.noticecard p { margin:0 0 10px; }
.replybtns { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.replybtn { min-height:var(--ed-tap); }
@media (max-width:640px) {
  .replybtns { flex-direction:column; }
  .replybtns .replybtn, .noticecard > .replybtn { width:100%; }
  .panelacts .linky { min-height:40px; }
}

/* ---- close the round, past rounds, restore (H1) ------------------------------ */
.roundline p { background:var(--ed-amber-tint); color:var(--ed-amber); }
.roundline .linky { color:inherit; }
/* another Admin page is closing the round: this one is read-only */
/* read-only while another page closes the round: the page sets `inert` on both */
body.closing-elsewhere #app, body.closing-elsewhere #settings { opacity:.6; }
.filepick { display:inline-flex; align-items:center; cursor:pointer; }
.rsmode { display:flex; align-items:center; gap:8px; margin:6px 0; }
.rsmode input { width:auto; min-height:0; margin:0; }
.rstable { width:100%; border-collapse:collapse; font-size:var(--ed-text-sm); margin:8px 0; }
.rstable th, .rstable td { padding:6px 8px; border-top:1px solid var(--ed-line-soft); text-align:right; }
.rstable th:first-child { text-align:left; font-weight:600; }
.rstable thead th { color:var(--ed-ink-2); font-weight:600; font-size:var(--ed-text-xs); vertical-align:bottom; }

.h3size { font-size:var(--ed-h3); font-weight:700; }

/* the tab row's landmark wrapper adds no box of its own (the sticky row keeps working) */
.tabsland { display:contents; }

/* ---- committee rows: one line on a phone until "Details" (review) ---------- */
.mrow .mhead { display:flex; gap:8px; align-items:center; }
.mrow .mhead input { flex:1; min-width:0; }
.mrow .mtoggle, .mrow .msum { display:none; }
.h3size { font-size:var(--ed-h3); font-weight:700; }
@media (max-width:640px) {
  .mrow .mtoggle { display:inline-flex; min-height:40px; align-items:center; flex:none; }
  .mrow .msum { display:block; margin-top:-4px; }
  .mrow:not(.open) .mopts, .mrow:not(.open) input[type=email], .mrow:not(.open) > .linky.danger { display:none; }
}

/* ---- R11 UX pass: Setup groups, small icon buttons, menus ------------------ */
/* Setup's four small headings (People, This round, Records, Passwords). */
.setgroup { margin:22px 4px 4px; font:600 var(--ed-text-sm)/1.3 var(--ed-font); letter-spacing:normal; color:var(--ed-ink-2); }
.modal-body > .setgroup:first-child { margin-top:14px; }
/* a closed card's quiet "Edit" on the right; the whole row opens it */
details.section > summary .sec-act { flex:none; font-size:var(--ed-text-sm); font-weight:500; color:var(--ed-accent-ink); }
details.section[open] > summary .sec-act { display:none; }
/* icon buttons in a row (move up, move down, more): 40px, accent ink */
.iconbtn.sm { width:40px; height:40px; border-radius:10px; color:var(--ed-accent-ink); }
.iconbtn:disabled { opacity:.35; cursor:default; background:transparent; }
.tadd.first { margin-top:0; padding-top:0; border-top:none; }
/* Screen tab: "+ Add applicants" opens the form in place */
details.adder { margin:4px 0 12px; }
details.adder > summary { list-style:none; width:max-content; max-width:100%; }
details.adder > summary::-webkit-details-marker { display:none; }
details.adder[open] > summary { background:var(--ed-fill); color:var(--ed-ink); }
.adderbox { margin-top:10px; }
.adderbox textarea { margin-top:6px; }
.nobr { white-space:nowrap; }
/* on a phone a card's grey subtitle is its own line under the title, and a
   long one wraps (only its last word and the (i) are kept together) */
@media (max-width:640px) {
  details.section > summary .subline { display:block; margin-top:1px; overflow-wrap:anywhere; }
  details.section > summary .subline .dot { display:none; }
}
/* a field heading with its (i) beside it, not under it */
div.ed-label { flex-direction:row; align-items:center; flex-wrap:wrap; }
.ed-label .info { margin-left:0; }
/* repeated remove links in an editor list stay grey until reached for */
.trow .linky.danger, .tgroup-h .linky.danger, .qedbtns .btn.danger { color:var(--ed-ink-2); }
.trow .linky.danger:hover, .trow .linky.danger:focus-visible, .tgroup-h .linky.danger:hover, .tgroup-h .linky.danger:focus-visible,
.qedbtns .btn.danger:hover, .qedbtns .btn.danger:focus-visible { color:var(--ed-red); }
/* Questions tab: each question with its move and remove controls beside it */
.qcard .qedrow { display:flex; align-items:flex-start; gap:8px; }
.qcard .qedrow textarea { flex:1; min-width:0; }
.qcard .qedbtns { margin-top:0; flex:none; align-items:center; gap:2px; }
@media (max-width:640px) {
  .qcard .qedrow { flex-direction:column; align-items:stretch; }
  .qcard .qedbtns { margin-top:4px; }
}
.panelmore .moremenu { min-width:max-content; }
/* small segmented controls grow to a full tap target on touch screens */
@media (max-width:640px), (pointer: coarse) {
  .listseg .seg button, .roomseg button, .mopts .seg button { min-height:40px; }
}

/* ---- mobile field sizing: MUST STAY LAST ---------------------------------
   iOS Safari zooms the whole page whenever a focused field's text is smaller
   than 16px. Several fields here are set smaller for density (the times form,
   offer notes and dates), so on a phone tapping one zoomed the page in and
   shoved the button you were reaching for off-screen.

   This block sits at the end ON PURPOSE: several of the rules it overrides
   (`.overlay-box input`, `.tform input`, `.ofnote textarea`) have equal
   specificity and appear earlier, so order is what decides it. Adding rules
   after this one will silently undo it. */
@media (max-width:640px) {
  input, select, textarea,
  .overlay-box input, .overlay-box select,
  .tform input, .tform select,
  .ofnote textarea, .ofdates input[type=date], .overall input[type=text], .numin, .daychair select { font-size:16px; }
}