/* pubfinder - one stylesheet, one light theme, ported from PutnamBowl v3.
   Tokens and components are documented in docs/style.md. Pages add only what
   is theirs, in {% block extra_head %}, prefixed by the page. Rules separate
   regions; nothing is a card. The only rounded corners are buttons, inputs,
   dialogs, chips and dots. */

:root {
  --paper: #f2f1ee;
  --panel: #fafaf8;
  --white: #fff;
  --rail: #faf9f7;          /* the Analytics rail and every tab strip */

  --ink: #16181c;
  --ink-2: #4a4842;         /* secondary text, legends */
  --ink-3: #5f6469;
  --muted: #6b6b66;
  --muted-2: #8b8f96;
  --muted-3: #9a9ea4;
  --dim: #b3b6bb;
  --placeholder: #c4c2bd;

  --rule: #e8e6e1;          /* structural rules: the nav, the tab strip, the rail's edge */
  --rule-2: #eae8e3;        /* table rows, a span's track */
  --rule-3: #e4e3df;
  --rule-strong: #d9d7d2;
  --control: #cfccc5;       /* a control's border, a chart's axis */
  --grid: #f0efec;          /* a chart's gridlines */
  --fill: #eceae5;
  --fill-2: #dedcd7;
  --fill-me: #eeeeea;
  --fill-hover: #f4f3f0;
  --track: #d6d4cf;

  --accent: #2f4a7a;
  --accent-hover: #16233c;
  --pos: #167a4b;
  --pos-fill: #dcece2;
  --neg: #a83232;
  --neg-fill: #f2dede;
  --neg-soft: #f7ecec;
  --neg-text: #8e2b2b;
  --warn: #9a6a12;
  --warn-fill: #f6ecd6;
  --pos-line: #a9d2bb;
  --neg-line: #e3b3b3;

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r: 5px;
  --r-control: 3px;         /* the rail's dropdowns */
  --w-page: max(1060px, min(1400px, 82vw));
  --w-narrow: max(880px, min(1100px, 62vw));
  --w-read: 680px;
  --pad-x: 28px;
  --w-rail: 268px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.muted-3 { color: var(--muted-3); }
.r { text-align: right; }
.c { text-align: center; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide { display: none !important; }
.thing[hidden], [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.meta { font: 400 12px/1.4 var(--mono); color: var(--muted); }
.h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.h2 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.status {
  font: 600 12px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.status.is-queued, .status.is-pending { color: var(--muted-2); }
.status.is-running, .status.is-waiting_batch, .status.is-waiting_budget { color: var(--accent); }
.status.is-done { color: var(--ink); }
.status.is-failed { color: var(--neg); }
.status.is-cancelled, .status.is-skipped { color: var(--muted-3); }
.empty { font-size: 13px; color: var(--muted-3); }
.prose { font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: var(--w-read); }
.prose p { margin: 0 0 1em; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.page { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--pad-x) 48px; }
.page-narrow { max-width: var(--w-narrow); }
.page-read { max-width: var(--w-read); }

.page-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
}
.page-head-title .eyebrow { margin: 0; }
.page-head-title .meta { margin-top: 3px; }
.page-head-title .status { margin-top: 4px; }
.page-head-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.split { display: grid; grid-template-columns: 1fr minmax(300px, 24%); }
.split-main { padding: 24px 0 30px; min-width: 0; }
.rail { border-left: 1px solid var(--rule); margin-left: 28px; padding: 24px 0 30px 26px; min-width: 0; }
@media (max-width: 999px) {
  .split { grid-template-columns: 1fr; }
  .rail { border-left: 0; margin-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
}
.section { padding: 20px 0; border-top: 1px solid var(--rule); }
.section:first-child { border-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* ── Stats strip ──────────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; }
.stat { padding: 0 20px; border-left: 1px solid var(--rule-3); min-width: 0; }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-label { font: 400 10.5px/1.3 var(--mono); color: var(--muted-3); }
.stat-value { margin-top: 3px; font: 600 14px/1.3 var(--mono); }
.stat-value.big { font-size: 22px; letter-spacing: -.02em; line-height: 1; margin-top: 5px; }

/* ── Rows (key / value list separated by rules) ───────────────────────── */
.rows { border-top: 1px solid var(--rule-3); }
.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: 12.5px;
}
.row-k { font-family: var(--mono); color: var(--muted-3); letter-spacing: .04em; }
.row-v { font-family: var(--mono); font-weight: 500; text-align: right; }
.row-v.strong { font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; align-items: baseline; align-content: start; }
.kv dt { font: 400 10.5px/1.4 var(--mono); color: var(--muted-3); white-space: nowrap; }
.kv dd { margin: 0; font: 500 12px/1.4 var(--mono); color: var(--ink-3); }
.kv dd.strong { font-weight: 600; color: var(--ink); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-3);
  padding: 0 0 8px;
  white-space: nowrap;
}
.table th.r, .table td.r { text-align: right; }
.table td { padding: 9px 0; border-top: 1px solid var(--rule-2); font-size: 13.5px; vertical-align: middle; }
.table td + td, .table th + th { padding-left: 12px; }
.table tr.is-me td { background: var(--fill-me); }
.table.hover tbody tr:hover td { background: var(--fill-hover); }
.table th button {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.table th[aria-sort] button { color: var(--ink); }
.table td.sub { font-size: 12px; color: var(--muted); }
.bar { display: block; height: 4px; background: var(--rule-2); }
.bar-fill { display: block; height: 4px; background: var(--ink); }
.table-wrap { overflow-x: auto; }
.pager { display: flex; align-items: center; gap: 14px; padding-top: 14px; font: 400 12px var(--mono); color: var(--muted); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn[hidden] { display: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-secondary { background: #fff; border-color: var(--rule-3); color: var(--ink); }
.btn-secondary:hover { border-color: #b6b4ae; color: var(--ink); }
.btn-danger { background: #fff; border-color: var(--rule-3); color: var(--neg); }
.btn-danger:hover { border-color: var(--neg); color: var(--neg); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-xs { padding: 4px 8px; font-size: 11px; }
.btn-block { width: 100%; }
.btn-split { justify-content: space-between; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; pointer-events: none; }
.btn-link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12.5px; cursor: pointer; }
.btn-link:hover { color: var(--accent-hover); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid var(--rule-3); background: #fff;
  border-radius: var(--r); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.icon-btn:hover { border-color: #b6b4ae; color: var(--ink); }
.icon-btn:disabled { opacity: .32; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 15px; }
.label {
  display: block;
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 6px;
}
.label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.label-row .label { margin-bottom: 0; }
.input, .select, .textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule-3);
  border-radius: 4px;
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  padding: 10px 12px;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); }
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--neg); }
.input[readonly] { background: var(--panel); color: var(--muted); }
.input.n, .input-sm { padding: 7px 10px; font-size: 13px; }
.textarea { resize: vertical; min-height: 86px; }
.textarea.mono { font-family: var(--mono); font-size: 12.5px; }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.select-sm { padding: 6px 28px 6px 10px; font-size: 13px; }
.hint { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted-3); }
.error { margin-top: 6px; font: 400 11.5px/1.4 var(--mono); color: var(--neg); }
.alert {
  padding: 10px 12px;
  background: var(--neg-soft);
  border-left: 2px solid var(--neg);
  font-size: 12.5px; line-height: 1.5;
  color: var(--neg-text);
}
.alert-ok { background: var(--pos-fill); border-left-color: var(--pos); color: var(--pos); }
.alert-warn { background: var(--warn-fill); border-left-color: var(--warn); color: var(--warn); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; }
.chip-check span {
  display: inline-block; padding: 6px 10px; border: 1px solid var(--rule-3); background: #fff;
  border-radius: 4px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.chip-check input:checked + span { background: var(--fill); border-color: var(--ink); color: var(--ink); }
.chip-check input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.filters .field { margin: 0; min-width: 140px; }

.toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 0; border-top: 1px solid var(--rule-2); cursor: pointer; position: relative; }
.toggle > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 34px; height: 19px; border-radius: 99px; background: var(--track); display: flex; align-items: center; padding: 2px; flex-shrink: 0; transition: background .12s; }
.toggle-knob { width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .12s; }
.toggle > input:checked + .toggle-track { background: var(--ink); }
.toggle > input:checked + .toggle-track .toggle-knob { transform: translateX(15px); }
.toggle > input:focus-visible + .toggle-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.toggle-text { flex: 1; min-width: 0; }
.toggle-text b { display: block; font-size: 13px; font-weight: 500; }
.toggle-text small { display: block; font-size: 11.5px; color: var(--muted-3); margin-top: 1px; }

/* ── Dialog ───────────────────────────────────────────────────────────── */
dialog.dialog {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  padding: 26px 28px 30px;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  background: #fff;
  color: var(--ink);
  overflow: auto;
}
dialog.dialog::backdrop { background: rgba(20,22,26,.28); }
.dialog-head { display: flex; align-items: flex-start; gap: 14px; }
.dialog-head .grow { flex: 1; min-width: 0; }
.dialog-title { margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.dialog-body { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.dialog-body p { margin: 0 0 1em; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 640px) {
  dialog.dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh; border-radius: 10px 10px 0 0; border-bottom: 0; padding: 20px 18px 24px; }
}

/* ── Chips / tags ─────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 28px; height: 24px; padding: 0 3px; font: 600 10.5px var(--mono); color: var(--ink); border-bottom: 2px solid transparent; }
.chip-pos { border-bottom-color: var(--pos-line); }
.chip-neg { border-bottom-color: var(--neg-line); }
.chip-open { color: var(--muted-2); }
.chip-none { color: var(--muted-2); font-weight: 400; }
.tag { display: inline-block; padding: 2px 6px; border: 1px solid var(--rule-3); border-radius: 3px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); background: #fff; vertical-align: middle; }
.tag-on { background: var(--fill); border-color: var(--ink); color: var(--ink); }
.tag-neg { border-color: var(--neg-line); color: var(--neg); }
.tag-warn { border-color: var(--warn); color: var(--warn); }
.tag-pos { border-color: var(--pos-line); color: var(--pos); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; font: 400 10.5px var(--mono); color: var(--muted); }
.swatch { display: inline-block; width: 9px; height: 2px; background: var(--ink); }
.swatch-sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }

/* ── Numbered text (CV lines, spans, prompts) ─────────────────────────── */
.lines { font: 400 12px/1.6 var(--mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; margin: 0; }
.lines .ln { display: inline-block; width: 44px; color: var(--placeholder); user-select: none; }
.lines .is-h { font-weight: 600; color: var(--ink); }
.lines .is-r { color: var(--muted-3); font-style: italic; }
.lines .is-hit { background: var(--warn-fill); }
.lines .page-rule { display: block; border-top: 1px dashed var(--rule-strong); margin: 6px 0; height: 0; }
.pre { font: 400 12px/1.55 var(--mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--rule-3); }
details.entry > summary { cursor: pointer; list-style: none; }
details.entry > summary::-webkit-details-marker { display: none; }
details.entry[open] > summary { color: var(--ink); }
.entry-body { padding: 10px 0 14px 14px; border-left: 2px solid var(--rule-3); margin: 6px 0 4px; }

/* ── Publication rows (partials/_pub_row.html) ─────────────────────── */
.pub-list { border-top: 1px solid var(--rule-3); }
.pub-row { border-bottom: 1px solid var(--rule-2); }
.pub-row > summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 9px 0; font-size: 13.5px; }
.pub-row > summary:hover { background: var(--fill-hover); }
.pub-row .pub-year { width: 40px; flex-shrink: 0; font-size: 12px; color: var(--ink-3); }
.pub-row .pub-main { flex: 1; min-width: 240px; }
.pub-row .pub-sub { display: block; font-size: 12px; color: var(--muted); }
.pub-row .pub-who { color: var(--muted-2); }
.pub-row .pub-venue + .pub-who::before { content: ' · '; }
.pub-row .pub-tags { flex-shrink: 0; }
.pub-body .pub-part + .pub-part { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-2); }
.pub-body .eyebrow { margin-top: 14px; }
.pub-body .pub-part:first-child .eyebrow:first-child { margin-top: 0; }
.pub-body .meta { margin-top: 3px; }
.pub-body .lines { margin-top: 6px; }
.pub-body .pub-line { display: block; }
.pub-body .kv { margin-top: 8px; }
.pub-body .kv dd { white-space: normal; }
.pub-fields { margin-top: 8px; }
.pub-fields td { font-size: 12.5px; color: var(--muted); vertical-align: top; }
.pub-fields .pub-val { display: block; }
.pub-fields .pub-val.is-won { color: var(--ink); font-weight: 500; }
.pub-decisions { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--rule-3); }
.pub-decisions li { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--rule-2); }
.pub-decisions .pub-why { display: block; color: var(--muted); font-size: 12px; }
.pub-alternates li { color: var(--muted); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* One bar across the window: the brand, the three sections, the Operator and user menus at the right. */
.nav { background: #fff; border-bottom: 1px solid var(--rule); position: relative; z-index: 20; }
.nav-in { padding: 0 var(--pad-x); height: 52px; display: flex; align-items: center; gap: 28px; }
.nav-brand { display: inline-flex; align-items: center; font: 600 14px var(--sans); letter-spacing: -.01em; color: var(--ink); }
.nav-brand:hover { color: var(--ink); }
.nav-links { display: flex; gap: 18px; font-size: 12.5px; }
.nav-link { color: var(--muted); }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 12.5px; }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--ink); }
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 150px; background: #fff; border: 1px solid var(--rule-3); border-radius: var(--r);
  padding: 6px 0; display: flex; flex-direction: column;
  box-shadow: 0 6px 20px rgba(20,22,26,.08);
}
.nav-menu-list a, .nav-menu-list button { display: block; width: 100%; text-align: left; padding: 7px 14px; font-size: 12.5px; color: var(--ink); border: 0; background: none; }
.nav-menu-list a:hover, .nav-menu-list button:hover { background: var(--fill-hover); }
.nav-menu-list hr { border: 0; border-top: 1px solid var(--rule-2); margin: 4px 0; }
.nav-burger { display: none; margin-left: auto; }
.nav-burger > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; width: 16px; padding: 6px 0; }
.nav-burger > summary::-webkit-details-marker { display: none; }
.nav-burger > summary span { display: block; height: 1.5px; background: var(--muted); }
.nav-burger-list {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--rule);
  padding: 8px var(--pad-x) 12px; display: flex; flex-direction: column;
}
.nav-burger-list a, .nav-burger-list button { padding: 8px 0; font-size: 13px; color: var(--ink); border: 0; background: none; text-align: left; border-top: 1px solid var(--rule-2); }
.nav-burger-list a:first-child { border-top: 0; }
.nav-burger-list .eyebrow { margin: 12px 0 4px; }
@media (max-width: 800px) {
  .nav-links, .nav-right .nav-menu { display: none; }
  .nav-burger { display: block; }
  .nav-in { gap: 14px; }
  .nav-right { margin-left: auto; margin-right: 6px; }
  .nav-right + .nav-burger { margin-left: 0; }
  :root { --pad-x: 18px; }
  /* Two or three head buttons beside a title do not fit a phone: the buttons wrap onto their own
     right-aligned line and a long token (a snake_case filename) may break. */
  .page-head { flex-wrap: wrap; }
  .page-head-title { min-width: 0; }
  .page-head-title .meta { overflow-wrap: anywhere; }
  .page-head-end { flex-wrap: wrap; }
}

/* ── Section tabs (core/nav.py): Database's browse tabs, Analytics' Departments, Careers, Faculty and Data ── */
.subnav { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 0 0; font-size: 12.5px; }
.subnav-link { color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.subnav-link:hover { color: var(--ink); }
.subnav-link[aria-current="page"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }

/* ── Flash ────────────────────────────────────────────────────────────── */
.flash { max-width: var(--w-page); margin: 12px auto 0; padding: 0 var(--pad-x); }
.flash p { margin: 0 0 8px; padding: 10px 12px; font-size: 12.5px; border-left: 2px solid var(--ink); background: #fff; }
.flash p.is-error { border-left-color: var(--neg); background: var(--neg-soft); color: var(--neg-text); }
.flash p.is-success { border-left-color: var(--pos); }

/* ── Auth shell ───────────────────────────────────────────────────────── */
.auth-main { padding: 40px var(--pad-x) 60px; }
.auth { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; min-height: 392px; background: #fff; border: 1px solid var(--rule); }
.auth-side { padding: 34px 32px; background: var(--panel); display: flex; flex-direction: column; }
.auth-mark { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.auth-side-foot { margin-top: auto; padding-top: 24px; }
.auth-form { padding: 34px 30px; display: flex; flex-direction: column; }
.auth-form .lead { margin-top: 7px; font-size: 14px; color: var(--muted); }
.auth-form form { margin-top: 20px; }
.auth-form .btn-block { margin-top: 20px; padding: 13px; font-size: 14.5px; }
.auth-alt { margin-top: auto; padding-top: 22px; font-size: 12.5px; color: var(--muted-2); }
.steps { border-top: 1px solid var(--rule-3); }
.steps div { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); }
.steps .num { font: 400 11px var(--mono); color: var(--placeholder); flex-shrink: 0; padding-top: 1px; }
.steps p { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 720px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 24px 22px; }
  .auth-form { padding: 24px 22px; }
}

/* ── Drop zone ────────────────────────────────────────────────────────── */
.drop { border: 1px dashed var(--rule-strong); padding: 26px; text-align: center; background: #fff; }
.drop.is-over { border-color: var(--ink); background: var(--fill-hover); }
.drop input { display: none; }

/* ── Field / question rows ────────────────────────────────────────────── */
/* One row editor, two pages: templates/profile/profile_edit.html (the institution
   profile) and templates/runs/run_new.html (the Extraction section of a run). */
.pf-rows { border-bottom: 1px solid var(--rule-2); }
.pf-row { padding: 14px 0 6px; border-top: 1px solid var(--rule-2); }
.pf-row .field { display: block; margin-bottom: 10px; }
.pf-row-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 130px auto; gap: 12px; align-items: start; }
.pf-row-head .field { margin-bottom: 8px; }
.pf-row-head .pf-remove { margin-top: 22px; }
.pf-key { display: block; padding: 7px 0; min-height: 35px; font: 500 13px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pf-checks { display: flex; gap: 20px; margin-bottom: 8px; }
.pf-list-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
@media (max-width: 720px) { .pf-row-head { grid-template-columns: 1fr 1fr; } }

/* ── Charts ───────────────────────────────────────────────────────────── */
/* templates/data.html. The SVG arrives from core/charts.py carrying class names
   and nothing else: every colour is here, so the page has one palette and the
   charts print. The ramp is the existing greys, dark to light; --accent marks the
   one series of a single-series chart (.ch-accent). No radius, no gradient, no
   animation. A chart scales with its column and stops growing at its own size. */
:root {
  /* A categorical palette, not a grey ramp. The ramp was eight steps of the text colour, so two
     adjacent kinds on a stacked bar were the same object to the eye: seven kinds and seven
     open-access statuses are exactly the case it could not carry. These are IBM's categorical
     data-visualisation sequence, which belongs with the IBM Plex faces the app already sets, and
     ordered so neighbours differ in lightness as well as hue, which is what a greyscale print and
     a colourblind reader have to go on. Every one clears 3:1 against the paper (worst 4.4:1), the
     minimum for a graphical object; the grey ramp's lightest steps did not.
     Hue is never the only signal: charts.lines keeps its dash patterns and every mark keeps its
     <title>, so the charts survive being printed in grey or read by someone colourblind. */
  --ch-0: #002d9c;   /* blue    */
  --ch-1: #0072c3;   /* cyan    */
  --ch-2: #9f1853;   /* magenta */
  --ch-3: #198038;   /* green   */
  --ch-4: #6929c4;   /* purple  */
  --ch-5: #da1e28;   /* red     */
  --ch-6: #005d5d;   /* teal    */
  --ch-7: #8a6100;   /* gold    */
  /* A ninth step, for the Compare page: this institution has nine cohorts and the grouped rank
     bars draw one per cohort, so an eight-step palette would have made the ninth reuse a colour.
     Brown is the one hue family the sequence above leaves open. Measured against --paper it is
     11.3:1, well past the 3:1 a graphical object needs; measured as CIEDE2000 against the nearest
     of the eight it is 24.4 to normal vision, 15.5 under deuteranopia and 13.1 under protanopia,
     each of them wider than the palette's own closest existing pair (12.8, 6.5 and 6.2). A neutral
     grey scores better to normal vision and fails here: under protanopia it collapses onto the
     teal at 1.9. */
  --ch-8: #4c2a17;   /* brown   */
  /* Steps ten to fifteen, added on 2026-09-17 when the institution unhid 56 of its 57 cohorts and a field went
     from eight visible departments to fourteen. Fifteen is the number, not a round one: the roster holds fifteen
     universities and a field has at most one department at each, so fifteen slots is exactly one field drawn whole.
     Below nine departments nothing here is ever seen - cohort_colors.palette_style writes the university's own
     colour into --ch-<i> for every department drawn - so these are the fallback for a cohort whose name matches no
     university, and their job is to stay apart from the nine above and from each other.
     Measured the way --ch-8 was: every one clears 3:1 against --paper (worst 3.6:1, #308991), and the closest pair
     in the whole fifteen is 9.9 CIEDE2000 to normal vision, 6.5 under deuteranopia and 6.2 under protanopia. The
     last two are the eight-colour palette's own closest pairs, unchanged: adding six colours cost nothing a
     colourblind reader could see. They reach for lightness as well as hue, because at fifteen hue alone has run
     out - two of them are near-black and two are light, and neighbours still alternate. */
  --ch-9:  #0d7766;  /* emerald  */
  --ch-10: #2b194d;  /* indigo   */
  --ch-11: #d43585;  /* pink     */
  --ch-12: #45212a;  /* oxblood  */
  --ch-13: #52356e;  /* plum     */
  --ch-14: #308991;  /* steel    */
  /* The seniority ramp, for Compare's department makeup by rank (views_compare.makeup_palette sets --ch-<i> to
     these per segment). A rank is not a university, so its segments never take a university's colour: the
     tenure track runs from the strongest ink-teal (distinguished) to a light teal (assistant), the ranks off the
     tenure track are warm greys, and the ranks outside the faculty and unknown fade to the paper's own greys.
     Neighbours differ in lightness, so the stack reads in a grey print; every segment keeps its <title>. */
  --rank-distinguished: #0b3d36;
  --rank-full: #16695d;
  --rank-associate: #3a9686;
  --rank-assistant: #86c2b6;
  --rank-teaching: #6d624f;
  --rank-practice: #8a7e69;
  --rank-research: #a39880;
  --rank-adjunct: #b9af99;
  --rank-visiting: #cbc3b0;
  --rank-not-tenure-track: #8a7e69;
  --rank-emeritus: #7b7f86;
  --rank-postdoc: #a3a7ad;
  --rank-emeritus-postdoc: #8f939a;
  --rank-unknown: #d3d1cb;
}
/* A work group's other rows (a reprint, a monograph's chapter, a preprint) listed under the row that leads it. */
.pub-versions { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pub-version { font-size: 12px; color: var(--muted-3); }
.pub-version .tag { font-size: 10.5px; padding: 0 5px; }
/* A chart fills its column. core/charts.py draws every chart in a 1100-unit box, the Analytics main column's own
   width in a 1,440px window, so its 12.5-unit labels arrive at about 12.5px. Below 960px the SVG stops shrinking -
   a label there would be under 11px - and the chart scrolls sideways in .ch. */
.ch { margin-top: 6px; overflow-x: auto; overflow-y: hidden; }
.ch svg { display: block; width: 100%; min-width: 960px; height: auto; overflow: visible; }
.ch-s0 { fill: var(--ch-0); }
.ch-s1 { fill: var(--ch-1); }
.ch-s2 { fill: var(--ch-2); }
.ch-s3 { fill: var(--ch-3); }
.ch-s4 { fill: var(--ch-4); }
.ch-s5 { fill: var(--ch-5); }
.ch-s6 { fill: var(--ch-6); }
.ch-s7 { fill: var(--ch-7); }
.ch-s8 { fill: var(--ch-8); }
.ch-s9 { fill: var(--ch-9); }
.ch-s10 { fill: var(--ch-10); }
.ch-s11 { fill: var(--ch-11); }
.ch-s12 { fill: var(--ch-12); }
.ch-s13 { fill: var(--ch-13); }
.ch-s14 { fill: var(--ch-14); }
/* A single-series chart, including one panel of Compare's small-multiple grid, is drawn in the
   accent rather than in a categorical step: there is no second series for it to be told apart from. */
.ch-accent .ch-s0 { fill: var(--accent); }
.ch-accent .ch-line.ch-s0 { stroke: var(--accent); }
/* charts.lines strokes a polyline and fills a dot per point. .ch-line comes after .ch-s0 at the
   same weight, so it takes the fill off the line itself; the two-class rules stroke it in the
   series colour. .ch-area is the optional band under a line. The .ch-accent form is needed because
   `.ch-accent .ch-s0` outweighs a bare .ch-line: without it a single-series line is filled, and a
   filled polyline closes from its last point back to its first - a wedge, not a line. */
.ch-line, .ch-accent .ch-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; }
.ch-line.ch-s0 { stroke: var(--ch-0); }
/* Two lines that cross are two greys one step apart, so the second and third also carry a dash:
   the shape tells them apart where the tone alone is thin, and it survives a black-and-white print.
   The legend below repeats the same dash, so a key still names its line. */
.ch-line.ch-s1 { stroke: var(--ch-1); stroke-dasharray: 7 4; }
.ch-line.ch-s2 { stroke: var(--ch-2); stroke-dasharray: 3 3; }
.ch-line.ch-s3 { stroke: var(--ch-3); stroke-dasharray: 11 4 3 4; }
.ch-line.ch-s4 { stroke: var(--ch-4); stroke-dasharray: 2 4; }
/* Every slot past the fifth carries a dash too, from 2026-09-17. Until then only the first five did, because
   Compare drew at most five lines on one axis and turned a longer comparison into small multiples; the Rankings
   page draws every department of a field on one axis, which is fourteen here, and the colour it draws them in is
   the university's own. Several universities share a hue - Harvard crimson and Cornell carnelian, Yale and Penn
   blue, Chicago maroon and MIT red - so two solid lines in that pair are one line to the eye, and the dash is the
   only thing that separates them. Fifteen dashes cannot all be as distinct as the first five; that is why the
   dash is never asked to work alone either, and every line keeps its colour, its hover <title> and its key. */
.ch-line.ch-s5 { stroke: var(--ch-5); stroke-dasharray: 16 5; }
.ch-line.ch-s6 { stroke: var(--ch-6); stroke-dasharray: 1 6; }
.ch-line.ch-s7 { stroke: var(--ch-7); stroke-dasharray: 9 4 1 4; }
.ch-line.ch-s8 { stroke: var(--ch-8); stroke-dasharray: 5 3 1 3 1 3; }
.ch-line.ch-s9 { stroke: var(--ch-9); stroke-dasharray: 8 2; }
.ch-line.ch-s10 { stroke: var(--ch-10); stroke-dasharray: 4 2 4 8; }
.ch-line.ch-s11 { stroke: var(--ch-11); stroke-dasharray: 13 8; }
.ch-line.ch-s12 { stroke: var(--ch-12); stroke-dasharray: 6 2 2 2; }
.ch-line.ch-s13 { stroke: var(--ch-13); stroke-dasharray: 20 4 2 4; }
.ch-line.ch-s14 { stroke: var(--ch-14); stroke-dasharray: 3 8; }
.ch-area { opacity: .08; stroke: none; }
/* charts.banded_lines shades the spread behind one line in that line's own colour. It sits under
   every line and every gridline reads through it, so it is lighter than .ch-area. */
.ch-band { opacity: .11; stroke: none; }
/* A dense line's points are hover targets: invisible until the pointer is on one, and each keeps
   its <title>. A sparse line and a lone point are drawn outside .ch-hits and always show. */
.ch-hits circle { fill-opacity: 0; }
.ch-hits circle:hover { fill-opacity: 1; stroke: var(--panel); stroke-width: 1.5; }
.ch-axis { stroke: var(--rule-strong); stroke-width: 1; }
.ch-grid { stroke: var(--rule); stroke-width: 1; }
/* An axis that does not start at zero carries a break mark at its foot, beside its lowest label. */
.ch-break { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.ch-label { font: 400 12.5px var(--mono); fill: var(--muted); }
.ch-value { font: 400 12.5px var(--mono); fill: var(--ink-3); }
/* The value printed on top of a vertical bar, and a line's name at its right-hand end (in its colour). */
.ch-num { font: 400 11.5px var(--mono); fill: var(--ink-3); }
.ch-end { font: 500 12.5px var(--mono); }
.ch-legend { margin-top: 12px; }
.ch-legend { gap: 6px; }
.ch-legend .ch-key { padding: 3px 8px; font-size: 11px; color: var(--ink-3); }
.ch-key::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--ch-0); }
.ch-key1::before { background: var(--ch-1); }
.ch-key2::before { background: var(--ch-2); }
.ch-key3::before { background: var(--ch-3); }
.ch-key4::before { background: var(--ch-4); }
.ch-key5::before { background: var(--ch-5); }
.ch-key6::before { background: var(--ch-6); }
.ch-key7::before { background: var(--ch-7); }
.ch-key8::before { background: var(--ch-8); }
.ch-key9::before { background: var(--ch-9); }
.ch-key10::before { background: var(--ch-10); }
.ch-key11::before { background: var(--ch-11); }
.ch-key12::before { background: var(--ch-12); }
.ch-key13::before { background: var(--ch-13); }
.ch-key14::before { background: var(--ch-14); }
/* A line chart's keys: the swatch is a rule carrying that series' own dash, not a square. Every dash above has one
   here, in the same numbers read as pixels, because a key that draws a line the chart did not draw is the same lie
   as a key in the wrong colour. */
.ch-legend.is-lines .ch-key::before { width: 22px; height: 3px; vertical-align: 3px; }
.ch-legend.is-lines .ch-key1::before { background: repeating-linear-gradient(90deg, var(--ch-1) 0 7px, transparent 7px 11px); }
.ch-legend.is-lines .ch-key2::before { background: repeating-linear-gradient(90deg, var(--ch-2) 0 3px, transparent 3px 6px); }
.ch-legend.is-lines .ch-key3::before { background: repeating-linear-gradient(90deg, var(--ch-3) 0 11px, transparent 11px 15px, var(--ch-3) 15px 18px, transparent 18px 22px); }
.ch-legend.is-lines .ch-key4::before { background: repeating-linear-gradient(90deg, var(--ch-4) 0 2px, transparent 2px 6px); }
.ch-legend.is-lines .ch-key5::before { background: repeating-linear-gradient(90deg, var(--ch-5) 0 16px, transparent 16px 21px); }
.ch-legend.is-lines .ch-key6::before { background: repeating-linear-gradient(90deg, var(--ch-6) 0 1px, transparent 1px 7px); }
.ch-legend.is-lines .ch-key7::before { background: repeating-linear-gradient(90deg, var(--ch-7) 0 9px, transparent 9px 13px, var(--ch-7) 13px 14px, transparent 14px 18px); }
.ch-legend.is-lines .ch-key8::before { background: repeating-linear-gradient(90deg, var(--ch-8) 0 5px, transparent 5px 8px, var(--ch-8) 8px 9px, transparent 9px 12px, var(--ch-8) 12px 13px, transparent 13px 16px); }
.ch-legend.is-lines .ch-key9::before { background: repeating-linear-gradient(90deg, var(--ch-9) 0 8px, transparent 8px 10px); }
.ch-legend.is-lines .ch-key10::before { background: repeating-linear-gradient(90deg, var(--ch-10) 0 4px, transparent 4px 6px, var(--ch-10) 6px 10px, transparent 10px 18px); }
.ch-legend.is-lines .ch-key11::before { background: repeating-linear-gradient(90deg, var(--ch-11) 0 13px, transparent 13px 21px); }
.ch-legend.is-lines .ch-key12::before { background: repeating-linear-gradient(90deg, var(--ch-12) 0 6px, transparent 6px 8px, var(--ch-12) 8px 10px, transparent 10px 12px); }
.ch-legend.is-lines .ch-key13::before { background: repeating-linear-gradient(90deg, var(--ch-13) 0 20px, transparent 20px 24px, var(--ch-13) 24px 26px, transparent 26px 30px); }
.ch-legend.is-lines .ch-key14::before { background: repeating-linear-gradient(90deg, var(--ch-14) 0 3px, transparent 3px 11px); }
/* A chart's Notes: its coverage and the longer rules behind it, closed by default under the chart so the
   heading carries the title alone. Quiet by design - the summary is the size of a hint, and opens on click. */
details.ch-notes { margin-top: 8px; }
details.ch-notes > summary { display: inline-block; cursor: pointer; list-style: none; font: 400 11px/1.4 var(--mono); color: var(--muted-3); }
details.ch-notes > summary::-webkit-details-marker { display: none; }
details.ch-notes > summary::before { content: '+'; display: inline-block; width: 10px; }
details.ch-notes[open] > summary::before { content: '\2212'; }
details.ch-notes > summary:hover, details.ch-notes[open] > summary { color: var(--ink-3); }
details.ch-notes p { margin: 6px 0 0; max-width: 100ch; font-size: 11.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ch-filters .field.is-narrow { min-width: 0; }
.ch-filters .input.n { width: 76px; }
.ch-filters .check { padding-bottom: 8px; }
.ch-filters .chips { padding-bottom: 8px; }

/* ── Analytics shell (templates/analytics_base.html) ─────────────────── */
/* The tab strip across the window, then a 268px rail of controls beside a white main column. Under 720px the rail
   is a Filters disclosure above the charts (static/core/rail.js; without script it simply stands open). */
main.an-page { display: flex; flex-direction: column; min-height: calc(100vh - 53px); background: #fff; }
.an-page > .alert { margin: 12px var(--pad-x) !important; }
.an-page > .subnav { flex-wrap: nowrap; gap: 22px; padding: 0 var(--pad-x); overflow-x: auto; background: var(--rail); border-bottom: 1px solid var(--rule); }
.an-page > .subnav .subnav-link { position: relative; padding: 10px 0; border-bottom: 0; white-space: nowrap; }
.an-page > .subnav .subnav-link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); }
.an { --w-rail: 380px; flex: 1; display: grid; grid-template-columns: var(--w-rail) minmax(0, 1fr); }
.an-rail { position: sticky; top: 0; align-self: start; z-index: 2; min-width: 0; height: calc(100dvh - 92px); display: flex; flex-direction: column; overflow: hidden; background: var(--rail); border-right: 1px solid var(--rule); }
.an.settings-collapsed { grid-template-columns: minmax(0, 1fr); }
.an.settings-collapsed > .an-rail { display: none; }
.an-bare { grid-template-columns: minmax(0, 1fr); }
.an-bare > .an-rail { display: none; }         /* fewer than two cohorts: nothing to choose */
.an-form { display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 0; padding: 0; overflow: hidden; }
.an-settings-fields { display: flex; flex-direction: column; flex: 1; gap: 20px; min-height: 0; overflow-y: auto; padding: 8px 22px 20px; }
.an-label { margin: 0 0 9px; font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.an-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; font-size: 14px; }
.an-grid > .an-k:not(:first-child) { margin-top: 9px; }
.an-k { color: var(--ink-2); }
.an-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.an-compare { width: 100%; min-height: 42px; border: 0; border-radius: 4px; background: var(--ink); color: #fff; font: 500 14px/1 var(--sans); cursor: pointer; }
.an-compare:hover { background: #000; }
.an-rail-toggle { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--control); border-radius: var(--r-control); background: var(--white); color: var(--ink); font: 500 14px/1.3 var(--sans); cursor: pointer; }
.an-rail-toggle .an-label { margin: 0; flex: none; }
.an-rail-toggle::before { content: '\2630'; font-size: 15px; }
.an-rail-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.an-main { min-width: 0; padding: 24px var(--pad-x) 30px; }
.an-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.an-head-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.an-h1 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.an-intro { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.an-head .page-head-end { flex: none; }
.an-main > .empty { margin-bottom: 20px; }
@media (max-width: 980px) {
  .an { grid-template-columns: minmax(0, 1fr); }
  .an-rail { position: relative; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .an-form { padding: 0; }
  .an-settings-fields { overflow-y: visible; }
  .has-rail-js .an-rail-toggle { display: flex; }
  .an-main { padding: 20px var(--pad-x) 28px; }
  .an-head { flex-wrap: wrap; margin-bottom: 20px; }
}

/* Analysis settings and visible measurement scope. */
.an-rail-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; }
.an-rail-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.an-rail-close, .an-reset { border: 0; background: none; padding: 5px 0; color: var(--accent); font: 14px/1.4 var(--sans); cursor: pointer; }
.an-rail-close:hover, .an-reset:hover { text-decoration: underline; }
.an-measure, .an-source-options { min-width: 0; border: 0; padding: 0; margin: 0; }
.an-measure > legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.an-measure-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 9px; margin: 0 0 4px; border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer; }
.an-measure-option:has(input:checked) { border-color: var(--accent); background: var(--accent-fill); }
.an-measure-option input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.an-measure-option > span { display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.an-measure-option strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.an-settings-group { border-top: 1px solid var(--rule); padding-top: 14px; }
.an-settings-group > summary { cursor: pointer; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.an-settings-group > summary > span { display: block; margin: 3px 0 0 16px; font-size: 13px; color: var(--ink-2); font-weight: 400; }
.an-settings-group[open] > summary { margin-bottom: 13px; }
.an-settings-note { margin: 8px 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.an-score-equation .rk-input { width: 100%; margin-top: 6px; }
.an-help { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.an-help summary { color: var(--accent); cursor: pointer; }
.an-weight-state { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.an-weight-state > span { color: var(--ink-2); }
.an-settings-actions { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 22px; background: var(--rail); border-top: 1px solid var(--control); }
.an-auto-note { font-size: 12px; color: var(--ink-2); }
.an-pending-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.an-settings-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.an-settings-summary p { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.an-settings-summary strong { color: var(--ink); font-weight: 600; }
.an-settings-summary .an-pending-label { flex-basis: 100%; margin-bottom: 0; }
.an-chart-scale { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; font-size: 13px; }
.an-chart-scale-label { color: var(--ink-2); }
.an-chart-scale-options { display: flex; flex-wrap: wrap; gap: 4px; }
.an-chart-scale-options a { padding: 6px 10px; border: 1px solid var(--control); border-radius: var(--r-control); color: var(--ink-2); text-decoration: none; }
.an-chart-scale-options a:hover, .an-chart-scale-options a[aria-current] { background: var(--accent-fill); border-color: var(--accent); color: var(--ink); }
.an-chart-scale-options a[aria-current] { font-weight: 600; }
.an-chart-scale-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: -3px 0 14px; }
.an-scope { margin: -6px 0 26px; padding: 15px 18px; border-left: 3px solid var(--accent); background: var(--accent-fill); }
.an-scope h2 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.an-scope p { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.an-rail .ms > summary { padding: 9px 11px; font-size: 14px; line-height: 1.5; justify-content: space-between; }
.an-rail .ms-value { white-space: normal; }
.an-rail .ms-panel { position: static; margin-top: 5px; min-inline-size: 0; max-width: none; box-shadow: none; }
.an-rail .ms-opt { padding: 7px 3px; font-size: 14px; }
.an-rail .ms-opt input { width: 16px; height: 16px; }
.an-rail .ms-hint { font-size: 13px; color: var(--ink-2); }
.an-rail .ms-field { flex-direction: column; align-items: stretch; gap: 5px; font-size: 14px; }
.an-rail .ms-input { font-size: 14px; padding: 8px; }
.an-rail .ms[data-ms="years"] > summary::after { content: '\25BE'; }
.an-page [hidden] { display: none !important; }
.an-page :is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cp-metric { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.cp-metric .field { min-width: 0; }
.cp-metric .chips { padding-bottom: 0; }
.cp-window { margin: 0 0 10px; color: var(--ink-3); }
.cp-pager { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.cp-pager .is-disabled { opacity: .35; pointer-events: none; }
@media (max-width: 980px) { .an-settings-actions { position: relative; } }

/* A rail dropdown (partials/_ms.html, core/rail.py): a closed control naming what is chosen, and a panel of ticks. */
.ms { position: relative; min-width: 0; }
.ms > summary { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--control); border-radius: var(--r-control); background: #fff; color: var(--ink); font-size: 12.5px; line-height: 1.35; list-style: none; cursor: pointer; user-select: none; }
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary::after { content: '\25BE'; flex: none; }
.ms[data-ms="years"] > summary::after { content: none; }
.ms > summary:hover { border-color: var(--muted-2); }
.ms[open] > summary { border-color: var(--ink); }
.ms > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ms-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-inline-size: max(100%, 236px); max-width: 320px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--control); border-radius: 4px; background: #fff; box-shadow: 0 8px 24px rgba(22,24,28,.12); }
.ms-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--rule-2); }
.ms-tools button { padding: 0; border: 0; background: none; font-size: 12px; color: var(--accent); cursor: pointer; }
.ms-tools button:hover { color: var(--accent-hover); text-decoration: underline; }
.ms-options { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 4px 3px; border-radius: 2px; font-size: 13px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.ms-opt:hover { background: var(--fill-hover); }
.ms-opt input { flex: none; width: 13px; height: 13px; margin: 0; accent-color: var(--ink); }
.ms-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.ms-static { padding: 5px 9px; border: 1px solid var(--rule); border-radius: var(--r-control); color: var(--muted); }
.ms-years { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-years .ms-hint { grid-column: 1 / -1; margin-top: 0; }
.ms-field { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ms-wide { display: block; margin: 4px 0; }
.ms-input { width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--control); border-radius: var(--r-control); background: #fff; color: var(--ink); font-size: 12.5px; }
.ms-input:focus { outline: none; border-color: var(--ink); }
.ms-set { min-inline-size: 0; margin: 0 0 8px; padding: 0; border: 0; }
.ms-legend { margin: 0 0 4px; padding: 0; font-size: 11px; color: var(--muted); }
@media (max-width: 720px) { .ms-panel { min-inline-size: 100%; max-width: none; } }

/* How to rank in the rail: three read-only lines - a name, its value, a detail - and the link to the Journals tab. */
.rk-list { display: flex; flex-direction: column; gap: 11px; margin: 0; font-size: 12.5px; }
.rk { display: flex; flex-direction: column; gap: 4px; }
.rk dd { margin: 0; }
.rk-k { color: var(--muted); }
.rk-v { color: var(--ink); overflow-wrap: anywhere; }
.rk-sub { color: var(--muted); overflow-wrap: anywhere; }
.rk-error { color: var(--neg); }
.rk-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 500; }

/* An Analytics section (the Departments, Careers, Faculty, Data and Journals tabs): a head of the title (11px 600
   uppercase ink) and a right-aligned caption or the lines' keys over a 1px ink rule, then the section, its one visible
   sentence and the closed Notes. */
.an-secs { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.an-sec { min-width: 0; }
.an-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.an-sec-title { margin: 0; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.an-sec-caption { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.an-sec-caption.has-rule { color: var(--ink-2); }
.an-sec-rule { flex: none; width: 14px; height: 2px; background: var(--ink); }
.an-sec-body { padding-top: 14px; }
.an-sec-body > .ch:first-child, .an-sec > .ch { margin-top: 14px; }
.an-sec-sub { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.an-chart { padding-top: 14px; }
.ac-citation-compact { display: none; }
@media (max-width: 600px) {
  .ac-citation-full { display: none; }
  .ac-citation-compact { display: block; }
}
.an-sec-empty { padding-top: 14px; }
.an-sec-hint { margin: 12px 0 0; max-width: 78ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.an-sec .ch-notes { margin-top: 6px; }
.an-sec .cp-window { margin: 12px 0 0; font-size: 12px; }
/* The lines' keys in a section head: a short rule in each line's colour and dash, then its name. */
.an-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin: 0; font-size: 12px; color: var(--ink-2); }
.an-key { display: inline-flex; align-items: center; gap: 6px; }
.an-key::before { content: ''; flex: none; width: 16px; height: 2px; background: var(--ch-0); }
.an-key1::before { background: repeating-linear-gradient(90deg, var(--ch-1) 0 5px, transparent 5px 8px); }
.an-key2::before { background: repeating-linear-gradient(90deg, var(--ch-2) 0 2px, transparent 2px 4px); }
.an-key3::before { background: repeating-linear-gradient(90deg, var(--ch-3) 0 7px, transparent 7px 9px, var(--ch-3) 9px 11px, transparent 11px 13px); }
.an-key4::before { background: repeating-linear-gradient(90deg, var(--ch-4) 0 1.5px, transparent 1.5px 4px); }
/* Past the fifth the key repeats its line's dash too, the same rule .ch-legend.is-lines follows and for the same
   reason: these keys sit under charts that now draw a whole field of departments, and two universities of one hue
   are told apart by the dash alone. The numbers are .cl-series', because .cl-series is what these keys name. */
.an-key5::before { background: repeating-linear-gradient(90deg, var(--ch-5) 0 11px, transparent 11px 14.5px); }
.an-key6::before { background: repeating-linear-gradient(90deg, var(--ch-6) 0 1px, transparent 1px 5px); }
.an-key7::before { background: repeating-linear-gradient(90deg, var(--ch-7) 0 6px, transparent 6px 9px, var(--ch-7) 9px 10px, transparent 10px 13px); }
.an-key8::before { background: repeating-linear-gradient(90deg, var(--ch-8) 0 3.5px, transparent 3.5px 5.5px, var(--ch-8) 5.5px 6.5px, transparent 6.5px 8.5px, var(--ch-8) 8.5px 9.5px, transparent 9.5px 11.5px); }
.an-key9::before { background: repeating-linear-gradient(90deg, var(--ch-9) 0 5.5px, transparent 5.5px 7px); }
.an-key10::before { background: repeating-linear-gradient(90deg, var(--ch-10) 0 3px, transparent 3px 4.5px, var(--ch-10) 4.5px 7.5px, transparent 7.5px 13px); }
.an-key11::before { background: repeating-linear-gradient(90deg, var(--ch-11) 0 9px, transparent 9px 14.5px); }
.an-key12::before { background: repeating-linear-gradient(90deg, var(--ch-12) 0 4px, transparent 4px 5.5px, var(--ch-12) 5.5px 7px, transparent 7px 8.5px); }
.an-key13::before { background: repeating-linear-gradient(90deg, var(--ch-13) 0 14px, transparent 14px 17px, var(--ch-13) 17px 18.5px, transparent 18.5px 21.5px); }
.an-key14::before { background: repeating-linear-gradient(90deg, var(--ch-14) 0 2px, transparent 2px 7.5px); }
.an-key-band::before { height: 9px; background: var(--ch-1); opacity: .2; }

/* A line chart labelled in HTML (charts.career_line, charts.trend_lines): an SVG stretched to its column at a fixed
   height (--cl-h) with strokes that keep their width, IBM Plex Mono labels beside and under it, gridlines --grid and
   the axis --control. It never scrolls. */
.ch-axis-title { font: 500 14px var(--mono); fill: var(--ink); }
.cl { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-axis-title, .ps-axis-title { font: 500 13px/1.5 var(--mono); color: var(--ink); white-space: normal; }
.cl-axis-y { flex: 0 0 100%; }
.cl-axis-x { text-align: center; margin-top: 12px; }
.ps-axis-x { text-align: center; }
.cl-y { position: relative; flex: none; width: calc(var(--cl-gutter, 3) * 0.62em + 2px); height: var(--cl-h, 180px); font: 400 12.5px/1 var(--mono); color: var(--ink-2); }
.cl-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.cl-body { flex: 1; min-width: 0; padding-right: calc(var(--cl-end, 0) * 0.62em); }
.cl-plot { position: relative; height: var(--cl-h, 180px); }
.cl-plot svg { display: block; width: 100%; height: var(--cl-h, 180px); overflow: visible; }
.cl-grid { stroke: var(--grid); stroke-width: 1; }
.cl-axis { stroke: var(--control); stroke-width: 1; }
.cl-zero { stroke: var(--control); stroke-width: 1; stroke-dasharray: 3 3; }
.cl-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cl-dot { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
/* A series of trend_lines takes its slot's colour (.ch-s<i> sets the fill, which a line must not have); every slot
   past the first carries the dash its key shows, in this chart's own smaller numbers - the plot is 1,000 units wide
   and stretched to the column, so a dash reads about two thirds the length it would in a .ch-line chart. */
.cl-series, .cl-point { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cl-series { stroke-width: 1.6; }
.cl-point { stroke-width: 4; }
.cl-band { opacity: .12; stroke: none; }
.cl-band-tick { fill: none; opacity: .2; stroke-width: 4; }
.cl-series.ch-s0, .cl-point.ch-s0 { stroke: var(--ch-0); }
.cl-series.ch-s1, .cl-point.ch-s1, .cl-band-tick.ch-s1 { stroke: var(--ch-1); }
.cl-series.ch-s2, .cl-point.ch-s2 { stroke: var(--ch-2); }
.cl-series.ch-s3, .cl-point.ch-s3 { stroke: var(--ch-3); }
.cl-series.ch-s4, .cl-point.ch-s4 { stroke: var(--ch-4); }
.cl-series.ch-s5, .cl-point.ch-s5 { stroke: var(--ch-5); }
.cl-series.ch-s6, .cl-point.ch-s6 { stroke: var(--ch-6); }
.cl-series.ch-s7, .cl-point.ch-s7 { stroke: var(--ch-7); }
.cl-series.ch-s8, .cl-point.ch-s8 { stroke: var(--ch-8); }
.cl-series.ch-s9, .cl-point.ch-s9 { stroke: var(--ch-9); }
.cl-series.ch-s10, .cl-point.ch-s10 { stroke: var(--ch-10); }
.cl-series.ch-s11, .cl-point.ch-s11 { stroke: var(--ch-11); }
.cl-series.ch-s12, .cl-point.ch-s12 { stroke: var(--ch-12); }
.cl-series.ch-s13, .cl-point.ch-s13 { stroke: var(--ch-13); }
.cl-series.ch-s14, .cl-point.ch-s14 { stroke: var(--ch-14); }
.cl-series.ch-s1 { stroke-dasharray: 5 3; }
.cl-series.ch-s2 { stroke-dasharray: 2 2; }
.cl-series.ch-s3 { stroke-dasharray: 7 2 2 2; }
.cl-series.ch-s4 { stroke-dasharray: 1.5 2.5; }
.cl-series.ch-s5 { stroke-dasharray: 11 3.5; }
.cl-series.ch-s6 { stroke-dasharray: 0.7 4; }
.cl-series.ch-s7 { stroke-dasharray: 6 3 0.7 3; }
.cl-series.ch-s8 { stroke-dasharray: 3.5 2 0.7 2 0.7 2; }
.cl-series.ch-s9 { stroke-dasharray: 5.5 1.5; }
.cl-series.ch-s10 { stroke-dasharray: 3 1.5 3 5.5; }
.cl-series.ch-s11 { stroke-dasharray: 9 5.5; }
.cl-series.ch-s12 { stroke-dasharray: 4 1.5 1.5 1.5; }
.cl-series.ch-s13 { stroke-dasharray: 14 3 1.5 3; }
.cl-series.ch-s14 { stroke-dasharray: 2 5.5; }
.cl-hits rect { fill: transparent; }
.cl-hits rect:hover { fill: rgba(22,24,28,.05); }
/* A line's own name at its right-hand end, in the room --cl-end reserves beside the plot (charts._trend_end_labels).
   In HTML and not in the SVG because the SVG is stretched to the column and would stretch the text with it. This is a
   convenience and not the identification: the key under the chart names every series, including the ones whose end
   label was dropped for want of room beside their line, so the phone width can drop the lot and lose nothing. */
.cl-ends { position: absolute; left: 100%; top: 0; height: 100%; font: 500 12.5px/1 var(--mono); }
.cl-ends span { position: absolute; left: 0.62em; transform: translateY(-50%); white-space: nowrap; }
.cl-ends .ch-s0 { color: var(--ch-0); }
.cl-ends .ch-s1 { color: var(--ch-1); }
.cl-ends .ch-s2 { color: var(--ch-2); }
.cl-ends .ch-s3 { color: var(--ch-3); }
.cl-ends .ch-s4 { color: var(--ch-4); }
.cl-ends .ch-s5 { color: var(--ch-5); }
.cl-ends .ch-s6 { color: var(--ch-6); }
.cl-ends .ch-s7 { color: var(--ch-7); }
.cl-ends .ch-s8 { color: var(--ch-8); }
.cl-ends .ch-s9 { color: var(--ch-9); }
.cl-ends .ch-s10 { color: var(--ch-10); }
.cl-ends .ch-s11 { color: var(--ch-11); }
.cl-ends .ch-s12 { color: var(--ch-12); }
.cl-ends .ch-s13 { color: var(--ch-13); }
.cl-ends .ch-s14 { color: var(--ch-14); }
@media (max-width: 720px) { .cl-body { padding-right: 0; } .cl-ends { display: none; } }
.cl-x { position: relative; height: 22px; font: 400 12.5px/1 var(--mono); color: var(--ink-2); }
.cl-x span { position: absolute; top: 7px; transform: translateX(-50%); white-space: nowrap; }
.cl-x .is-start { transform: none; }
.cl-x .is-end { transform: translateX(-100%); }

/* A table in the design's typography (the Departments summary, the Journals tab's journals): an 11px --muted head, 14px
   names, IBM Plex Mono 13.5px figures, rows ruled --rule-2. */
.an-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.an-table thead th { padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink-2); text-align: left; }
.an-table tbody th, .an-table td { padding: 11px 0; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
.an-table tbody th { font-size: 14px; font-weight: 400; text-align: left; color: var(--ink); }
.an-table td { color: var(--ink); }
.an-table th + th, .an-table th + td, .an-table td + td { padding-left: 14px; }
.an-table .r { text-align: right; }
.an-table .an-table-diff th, .an-table .an-table-diff td { border-bottom: 0; font-size: 13px; color: var(--muted); }
.an-summary td:nth-child(3), .an-summary td:nth-child(6), .an-summary td:nth-child(7) { color: var(--ink-2); }

/* The Journals tab (compare_journals.html): How to rank's settings as radios with what each counts, the score and the
   journal weight formulas with their variables, and the journals table with a weight input per row. */
.rk-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; padding-top: 16px; }
.rk-set { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.rk-legend { display: block; margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 500; color: var(--ink); }
.rk-opt { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: 13px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.rk-opt input { flex: none; width: 13px; height: 13px; margin: 3px 0 0; accent-color: var(--ink); }
.rk-opt-label { display: block; }
.rk-opt-words { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rk-row { display: flex; gap: 8px; align-items: center; }
.rk-input { min-width: 0; padding: 5px 8px; border: 1px solid var(--control); border-radius: var(--r-control); background: #fff; color: var(--ink); font-size: 12.5px; line-height: 1.35; }
.rk-input:focus { outline: none; border-color: var(--ink); }
.rk-input[aria-invalid="true"] { border-color: var(--neg); }
.rk-equation { flex: 1; }
.rk-weight { width: 76px; text-align: right; }
.rk-vars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rk-vars > div { display: contents; }
.rk-vars dt { color: var(--ink); }
.rk-vars dd { margin: 0; }
.rk-note { margin: 10px 0 0; max-width: 100ch; font-size: 12px; line-height: 1.6; color: var(--muted); }
.rk-apply { margin-top: 12px; }
.rk-weights > .an-sec-hint:first-of-type { margin-top: 14px; }
.rk-fields { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.rk-field { display: flex; flex-direction: column; min-width: 0; }
.rk-field .rk-legend { margin-bottom: 5px; }
.rk-field-wide { flex: 1 1 260px; }
.rk-search { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.rk-search .rk-legend { margin: 0; }
.rk-search .rk-input { flex: 0 1 320px; }
.rk-table tbody th { max-width: 420px; font-size: 13.5px; }
.rk-table tbody th, .rk-table td { padding-top: 6px; padding-bottom: 6px; }
.rk-table tr.is-weighted th, .rk-table tr.is-weighted td { background: var(--fill-hover); }
.rk-pager { margin: 0 0 4px; }
.rk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
@media (max-width: 720px) { .rk-sets { grid-template-columns: minmax(0, 1fr); } }
.ps { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.ps-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 16px; }
.ps-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.ps-swatch { flex: none; width: 10px; height: 10px; }
.ps-cell { min-width: 0; }
.ps-track { position: relative; height: 26px; }
.ps-track::before { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--rule-2); }
.ps-seg { position: absolute; left: 0; top: 13px; height: 7px; }
.ps-first { background: var(--ink); }
.ps-second { background: var(--accent); }
.ps-val { position: absolute; top: 0; transform: translateX(-50%); font: 400 10.5px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.ps-val.is-before { transform: translateX(calc(-100% - 2px)); }
.ps-val.is-after { transform: translateX(2px); }
.ps-missing { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ps-ticks { position: relative; height: 12px; font: 400 10.5px/1 var(--mono); color: var(--muted); }
.ps-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.ps-ticks span:first-child { transform: none; }
.ps-ticks span:last-child { transform: translateX(-100%); }
.ps-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 12px; color: var(--ink-2); }
.ps-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ps-key { display: inline-block; width: 14px; height: 7px; }
@media (max-width: 600px) {
  .ps-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ps-axis > span:first-child { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print { .nav, .flash { display: none; } }

/* Soft navigation (app.js): the old page stays visible, dimmed, while the new one loads. */
main[aria-busy="true"] { opacity: .55; transition: opacity .15s ease .1s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { main[aria-busy="true"] { transition: none; } }

/* ══ Database ═════════════════════════════════════════════════════════════
   Every page under the Database section (templates/database/, results/, venues/, reliability.html): main.db-page is
   white and full width like the Analytics shell, with the same tab strip; a head (.db-head: h1 and one line, controls
   at its right), a filter bar (.db-bar), then rows drawn on a grid (.db-cols over .db-row, the columns set per page in
   --db-cols) or a ruled table (.db-table), a pager (.db-pager) and a note band (.db-note). The Publications tab is a
   split view (.pb-*), its right pane the record (.rec-*, partials/_pub_record.html). Docs: docs/style.md. */
:root {
  --accent-fill: #eef1f6;   /* a source chip on a publication record */
  --db-pad: var(--pad-x);
}

main.db-page { min-height: calc(100vh - 53px); padding-bottom: 36px; background: var(--white); }
.db-page > .alert { margin: 12px var(--pad-x) !important; }
.db-page > .subnav { flex-wrap: nowrap; gap: 22px; padding: 0 var(--pad-x); overflow-x: auto; scrollbar-width: none; background: var(--rail); border-bottom: 1px solid var(--rule); }
.db-page > .subnav .subnav-link { position: relative; padding: 10px 0; border-bottom: 0; white-space: nowrap; }
.db-page > .subnav .subnav-link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); }
.db-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The head: an h1 and one line under it, the page's controls at its right. */
.db-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 28px var(--db-pad) 18px; }
.db-head-title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.db-kicker { margin: 0 0 1px; font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.db-h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.db-intro { margin: 0; max-width: 100ch; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.db-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Controls: a 34px bordered button, a search box with its ring, a select that names itself inside the box. */
.db-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--control); border-radius: 4px; background: var(--white); font: 400 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer; }
.db-btn:hover { background: var(--rail); color: var(--ink); }
.db-search { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 220px; padding: 0 12px; border: 1px solid var(--control); border-radius: 4px; background: var(--white); }
.db-search::before { content: ''; flex: none; width: 11px; height: 11px; border: 1.5px solid var(--muted-3); border-radius: 50%; }
.db-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--ink); }
.db-search input::placeholder { color: var(--muted); }
.db-search input::-webkit-search-cancel-button { cursor: pointer; }
.db-search:focus-within, .db-select:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.db-select { position: relative; display: inline-flex; align-items: center; height: 34px; padding-left: 12px; border: 1px solid var(--control); border-radius: 4px; background: var(--white); font-size: 13px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.db-select select { field-sizing: content; height: 100%; max-width: 220px; margin: 0; padding: 0 28px 0 7px; border: 0; outline: 0; background: none; font-size: 13px; color: var(--muted); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.db-select::after { content: '\25BE'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted-3); pointer-events: none; }
.db-select.is-set select { color: var(--ink); }
.db-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--db-pad) 18px; }
.db-bar .db-search { min-width: 230px; }
.db-clear { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.db-clear:hover { color: var(--ink); }
.db-go { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* Enter submits; kept for no-JS */

/* Rows on a grid. A row is a div whose name link stretches over it (.db-stretch), so a tick box or a second link
   can sit in it; the header (.db-cols) shares the row's columns. */
.db-cols, .db-row { display: grid; grid-template-columns: var(--db-cols, minmax(0, 1fr)); gap: 14px; padding-left: var(--db-pad); padding-right: var(--db-pad); }
.db-cols { align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.db-cols > * { font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.db-cols > .is-quiet { color: var(--muted); }
.db-row { position: relative; align-items: center; padding-top: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--rule-2); }
.db-row:hover { background: var(--rail); }
.db-row:has(.db-stretch:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.db-stretch { color: var(--ink); }
.db-stretch:hover { color: var(--ink); }
.db-stretch::after { content: ''; position: absolute; inset: 0; }
.db-stretch:focus-visible { outline: 0; }
.db-row .db-over { position: relative; z-index: 1; }            /* a control or link above the stretched one */
.db-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-name-main { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.db-name-sub { font-size: 12px; line-height: 1.4; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.db-name-inline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.db-name-inline .db-name-main { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.db-name-inline .db-name-sub { flex: none; font-size: 11.5px; }
.db-cell { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.db-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink); text-align: right; white-space: nowrap; }
.db-num.is-quiet, .db-cell .is-quiet, .db-quiet { color: var(--muted); }
.db-src { font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.db-r { text-align: right; }
.db-mark { font-size: 14px; color: var(--muted); }
.db-mark.is-on { color: var(--ink); }
.db-tick { display: flex; align-items: center; }
.db-tick input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); }
.db-empty { margin: 0; padding: 18px var(--db-pad); font-size: 13px; color: var(--muted); }

/* A magnitude drawn in place: a 7px track, its fill (ink, or accent for a second measure), the value at the end. */
.db-barcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-track { flex: 1; min-width: 0; height: 7px; background: var(--rule-2); }
.db-fill { display: block; height: 7px; background: var(--ink); }
.db-fill.is-accent { background: var(--accent); }
.db-barv { flex: none; min-width: 52px; font: 400 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }

.db-note { margin: 0; padding: 18px var(--db-pad) 22px; font-size: 12.5px; line-height: 1.6; color: var(--muted); background: var(--rail); text-wrap: pretty; }
.db-note + .db-note { padding-top: 0; }

/* Page by page (Paginator), and ten at a time with arrows (partials/_arrows.html, core/paging.py). */
.db-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px var(--db-pad); }
.db-pager-label { font-size: 12.5px; color: var(--muted); }
.db-pager-links { display: flex; gap: 8px; }
.db-pager-btn { padding: 6px 12px; border: 1px solid var(--control); border-radius: 4px; background: var(--white); font-size: 12.5px; color: var(--ink); }
.db-pager-btn:hover { background: var(--rail); color: var(--ink); }
.db-pager-btn.is-disabled { border-color: var(--rule-2); color: var(--dim); }
.arrows { display: flex; align-items: center; gap: 6px; padding: 12px 0 0; }
.arrows .db-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 10px; border: 1px solid var(--control); border-radius: 3px; background: var(--white); font-size: 12px; line-height: 1.3; color: var(--ink); }
.arrows a.db-arrow:hover { background: var(--rail); color: var(--ink); }
.arrows .db-arrow.is-disabled { border-color: var(--rule-2); color: var(--dim); }
.arrows .db-arrows-label { padding: 0 6px; font: 400 12px var(--mono); color: var(--muted); }

/* Sections of a detail page: a title and a caption, then a ruled table or rows; figures side by side. */
.db-section { padding: 30px var(--db-pad) 0; }
.db-section.is-flush { padding-left: 0; padding-right: 0; }
.db-section.is-flush > .db-sec-head { padding: 0 var(--db-pad); }
.db-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.db-sec-title { margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.db-sec-cap { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.db-figures { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0 var(--db-pad); padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.db-figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; margin: 0; }
.db-figure dd { margin: 0; }
.db-figure-v.is-quiet { color: var(--muted); }
.db-figure-v { font: 400 22px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.db-figure-k { font-size: 12px; color: var(--muted); }
.db-table-wrap { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; }
.db-table th { padding: 0 16px 8px 0; border-bottom: 1px solid var(--ink); font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); text-align: left; white-space: nowrap; vertical-align: bottom; }
.db-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; line-height: 1.4; color: var(--ink); vertical-align: baseline; }
.db-table th:last-child, .db-table td:last-child { padding-right: 0; }
.db-table th.r, .db-table td.r { text-align: right; }
.db-table td.n { font-size: 13px; white-space: nowrap; }
.db-table td.sub { font-size: 12.5px; color: var(--muted); }
.db-table tbody tr:hover td { background: var(--rail); }
.db-table tr.is-total td { border-top: 1px solid var(--ink); font-weight: 600; }
.db-table tr.is-off td { color: var(--muted); }
.db-table .db-src { margin-left: 3px; }
.db-table a { color: var(--ink); }
.db-table a:hover { color: var(--accent); }
.db-table .db-table-sub { display: block; font-size: 11.5px; color: var(--muted); }
.db-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; border-top: 1px solid var(--rule); }
.db-split-main { min-width: 0; padding-bottom: 12px; }
.db-split-side { min-width: 0; min-height: 100%; padding: 0 0 26px; background: var(--rail); border-left: 1px solid var(--rule); }
.db-split-side .db-section { padding-top: 24px; }
.db-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.db-kv dt { color: var(--muted); }
.db-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.db-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.db-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 12.5px; line-height: 1.4; }
.db-lines .db-num { font-size: 12.5px; }
.db-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 12px; }
.db-form .field { margin: 0; }
.db-page .pub-body { min-width: 0; overflow-x: auto; }       /* an academic's rows: a long field value wraps or scrolls in place */
.db-page .pub-fields td { overflow-wrap: anywhere; }
.db-page .pub-row .pub-tags { flex-shrink: 1; max-width: 100%; }
@media (max-width: 720px) { .db-page .pub-row .pub-main { min-width: 0; flex-basis: calc(100% - 60px); } }

/* The Database landing: the search, the section list, the band to the other two sections. Its search results reuse
   the rows under ruled group heads. */
.dbh { display: flex; flex-direction: column; gap: 26px; max-width: 700px; padding: 56px 40px 40px; }
.dbh.is-results { gap: 20px; padding-top: 30px; padding-bottom: 4px; }
.dbh.is-results .dbh-h1 { font-size: 24px; }
.dbh-title { display: flex; flex-direction: column; gap: 6px; }
.dbh-h1 { margin: 0; font-size: 29px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.dbh-intro { margin: 0; font-size: 14px; color: var(--muted); }
.dbh-form { display: flex; gap: 8px; }
.dbh-form .db-search { flex: 1; height: 44px; padding: 0 14px; gap: 10px; border-radius: 5px; }
.dbh-form .db-search::before { width: 13px; height: 13px; }
.dbh-form .db-search input { font-size: 14px; }
.dbh-go { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 5px; background: var(--ink); color: var(--white); font: 500 14px/1 var(--sans); cursor: pointer; }
.dbh-go:hover { background: #000; }
.dbh-list { margin: 0 40px 40px; border-top: 1px solid var(--ink); }
.dbh-list .db-row { --db-cols: minmax(0, 1fr) 110px; gap: 16px; align-items: baseline; padding: 14px 0; }
.dbh-list .db-name-main { font-size: 14.5px; }
.dbh-list .db-num { font-size: 14px; color: var(--muted); }
.dbh-list .db-num.is-words { font-size: 13px; }
.dbh-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 36px; padding: 32px 40px 38px; border-top: 1px solid var(--rule); background: var(--rail); }
.dbh-band > div { display: flex; flex-direction: column; gap: 8px; }
.dbh-band a { font-size: 15px; font-weight: 500; color: var(--ink); }
.dbh-band a:hover { color: var(--accent); }
.dbh-band p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.dbh-results { padding: 0 40px 12px; }
.dbh-results .dbh-form { max-width: 620px; }
.dbh-count { margin: 0; font-size: 13px; color: var(--muted); }
.dbh-group { padding: 30px 0 6px; }
.dbh-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.dbh-group .db-row { --db-cols: minmax(0, 1fr) 140px; gap: 16px; padding: 12px 0; }
.dbh-group .db-row.is-pubs { --db-cols: minmax(0, 1fr) 70px; }
.dbh-people { position: relative; z-index: 1; font-size: 12px; color: var(--muted); }
.dbh-people a { color: var(--muted); }
.dbh-people a:hover { color: var(--accent); }
.dbh-people a + a::before { content: ', '; color: var(--muted); }

/* Academics (2a): the roster. Departments (4b) and Journals (5a): magnitude drawn in place. */
.ac-list { --db-cols: minmax(0, 1fr) 190px 132px 64px 96px 58px; }
.ac-list.has-ticks { --db-cols: 18px minmax(0, 1fr) 180px 124px 60px 92px 58px; }
.dp-list { --db-cols: minmax(0, 1fr) 84px minmax(0, 1.1fr) minmax(0, 1.1fr); }
.dp-list .db-cols, .dp-list .db-row, .jr-list .db-cols, .jr-list .db-row { gap: 20px; }
.dp-list .db-row { padding-top: 14px; padding-bottom: 14px; }
.jr-list { --db-cols: minmax(0, 1fr) 104px minmax(0, .9fr) 96px 104px; }
.jr-list .db-row { padding-top: 12px; padding-bottom: 12px; }
.jr-list .db-barv { min-width: 40px; }
.jr-list .db-num { font-size: 13px; color: var(--ink-2); }
.jr-list .db-issn { font: 400 12.5px var(--mono); color: var(--muted); }
.jr-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--db-pad) 18px; }
.jr-kind { padding: 5px 11px; border: 1px solid var(--rule-strong); border-radius: 14px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.jr-kind:hover { border-color: var(--muted-2); color: var(--ink); }
.jr-kind .n { margin-left: 3px; color: var(--muted); }
.jr-kind[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.jr-kind[aria-current="true"] .n { color: rgba(255,255,255,.65); }

/* Publications (3b): scan on the left, the full record on the right. Under 900px the record replaces the list. */
.pb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px var(--db-pad); border-bottom: 1px solid var(--rule); }
.pb-title { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; }
.pb-h1 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.pb-count { font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.pb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pb-bar .db-search { height: 30px; min-width: 170px; padding: 0 10px; border-radius: 3px; }
.pb-bar .db-search::before { width: 10px; height: 10px; }
.pb-bar .db-search input { font-size: 12.5px; }
.pb-bar .db-select { height: 30px; padding-left: 9px; border-radius: 3px; font-size: 12px; }
.pb-bar .db-select select { padding: 0 24px 0 5px; font-size: 12px; }
.pb-bar .db-select::after { right: 9px; }
.pb-end { display: flex; gap: 6px; margin-left: auto; }
.pb-end .db-btn, .pb-dd > summary { height: 30px; padding: 0 11px; border-radius: 3px; font-size: 12px; }
.db-dd { position: relative; }
.db-dd > summary { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--control); border-radius: 3px; background: var(--white); font-size: 12px; color: var(--ink); list-style: none; cursor: pointer; white-space: nowrap; user-select: none; }
.db-dd > summary::-webkit-details-marker { display: none; }
.db-dd > summary::after { content: '\25BE'; font-size: 11px; color: var(--muted-3); }
.db-dd > summary.db-btn::after { content: none; }
.db-dd > summary:hover { background: var(--rail); }
.db-dd[open] > summary { border-color: var(--ink); }
.db-dd.is-set > summary { border-color: var(--ink-2); }
.db-dd > summary .db-dd-v { color: var(--muted); }
.db-dd.is-set > summary .db-dd-v { color: var(--ink); }
.db-dd-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max-content; min-width: 220px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 14px; border: 1px solid var(--control); border-radius: 4px; background: var(--white); box-shadow: 0 8px 24px rgba(22,24,28,.12); }
.db-dd-panel.is-right { left: auto; right: 0; }
.db-dd-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px 12px; }
.db-dd-grid.is-wide { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
.db-dd-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.db-dd-field input, .db-dd-field select { width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--control); border-radius: 3px; background: var(--white); font-size: 12.5px; color: var(--ink); }
.db-dd-field input:focus, .db-dd-field select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.db-dd-field.is-span, .db-dd-check.is-span { grid-column: 1 / -1; }
.db-dd-set { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.db-dd-set legend { margin-bottom: 4px; padding: 0; }
.db-dd-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.db-dd-check input { flex: none; width: 13px; height: 13px; margin: 0; accent-color: var(--ink); }
.db-dd-label { margin: 14px 0 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.db-dd-label:first-of-type { margin-top: 0; }
.db-dd-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.db-dd-apply { height: 30px; padding: 0 14px; border: 0; border-radius: 3px; background: var(--ink); color: var(--white); font: 500 12px/1 var(--sans); cursor: pointer; }
.db-dd-hint { margin: 10px 0 0; max-width: 60ch; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.db-chipset { display: flex; flex-wrap: wrap; gap: 4px; }
.db-chipset label { position: relative; }
.db-chipset input { position: absolute; inset: 0; opacity: 0; }
.db-chipset span { display: inline-block; padding: 5px 9px; border: 1px solid var(--control); border-radius: 3px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.db-chipset input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.db-chipset input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pb-check { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--control); border-radius: 3px; font-size: 12px; color: var(--ink); cursor: pointer; }
.pb-check input { width: 13px; height: 13px; margin: 0; accent-color: var(--ink); }
.pb-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.pb-list { min-width: 0; border-right: 1px solid var(--rule); }
.pb-cols, .pb-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 62px; gap: 12px; }
.pb-cols { padding: 8px 20px; border-bottom: 1px solid var(--ink); background: var(--rail); }
.pb-cols > * { font: 600 10.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pb-row { padding: 11px 20px 11px 18px; border-bottom: 1px solid var(--grid); border-left: 2px solid transparent; color: var(--ink); }
.pb-row:hover { background: var(--rail); color: var(--ink); }
.pb-row[aria-current="true"] { border-left-color: var(--ink); background: var(--paper); }
.pb-row[aria-current="true"] .pb-t { font-weight: 500; }
.pb-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pb-year { font: 400 12.5px/1.45 var(--mono); color: var(--muted); }
.pb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-t { font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.pb-sub { font-size: 11.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.pb-flag { color: var(--warn); }
.pb-cites { font: 400 12.5px/1.45 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.pb-cites.is-quiet { color: var(--muted); }
.pb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px; }
.pb-pager-label { font: 400 12px var(--mono); color: var(--muted); }
.pb-pager .db-pager-links { gap: 6px; }
.pb-pager .db-pager-btn { padding: 5px 10px; border-radius: 3px; font-size: 12px; }
.pb-pane { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; min-width: 0; background: var(--rail); }
.pb-pane:focus { outline: 0; }
.pb-back { display: none; }
@media (max-width: 900px) {
  .pb-split { grid-template-columns: minmax(0, 1fr); }
  .pb-list { border-right: 0; }
  .pb-pane { position: static; max-height: none; overflow: visible; }
  .pb-split:not(.has-record) .pb-pane { display: none; }
  .pb-split.has-record .pb-list { display: none; }
  .pb-back { display: inline-block; margin: 0 0 4px; font-size: 13px; }
}

/* The record (partials/_pub_record.html). */
.rec { display: flex; flex-direction: column; gap: 20px; padding: 22px 24px 26px; }
.rec-head { display: flex; flex-direction: column; gap: 8px; }
.rec-meta { margin: 0; font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
.rec-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.rec-title:focus { outline: 0; }
.rec-by { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.rec-by a + a::before { content: ', '; color: var(--ink-2); }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rec-chip { padding: 3px 8px; border-radius: 3px; background: var(--accent-fill); font-size: 11.5px; line-height: 1.3; color: var(--accent); }
.rec-chip.is-off { background: var(--grid); color: var(--muted); }
.rec-chip.is-warn { background: var(--warn-fill); color: var(--warn); }
.rec-stats { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rec-stat { display: flex; flex-direction: column; gap: 2px; }
.rec-stat-v { font: 400 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.rec-stat-v.is-quiet { color: var(--muted); }
.rec-stat-k { font-size: 11.5px; color: var(--muted); }
.rec-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rec-sec.is-ruled { padding-top: 14px; border-top: 1px solid var(--rule); }
.rec-label { margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.rec-label .rec-who { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.rec-cap { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rec-quote { margin: 0; padding: 11px 13px; border-left: 2px solid var(--control); background: var(--white); font: 400 11.5px/1.7 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.rec-quote span { display: block; }
.rec-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.rec-kv dt { color: var(--muted); }
.rec-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.rec-kv .n { font-size: 12px; }
.rec-fields-wrap { overflow-x: auto; }
.rec-fields { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule-2); font-size: 12px; line-height: 1.4; }
.rec-fields th { padding: 7px 9px; border-bottom: 1px solid var(--rule-2); font-size: 11px; font-weight: 400; color: var(--muted); text-align: left; }
.rec-fields td { padding: 7px 9px; border-bottom: 1px solid var(--grid); color: var(--ink-2); vertical-align: top; overflow-wrap: anywhere; }
.rec-fields tr:last-child td { border-bottom: 0; }
.rec-fields td.rec-field { color: var(--muted); white-space: nowrap; }
.rec-fields .rec-val { display: block; }
.rec-fields .rec-val.is-used { color: var(--ink); font-weight: 500; }
.rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rec-list li { font-size: 12px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.rec-list .rec-why { display: block; color: var(--muted); }
.rec-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
.rec-none { padding: 22px 24px; }

/* Under 720px a grid row becomes lines: the name, then each value after its column's name. */
@media (max-width: 720px) {
  :root { --db-pad: var(--pad-x); }
  .db-head { padding-top: 22px; }
  .db-cols { display: none; }
  .db-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .db-row > .db-name { flex: 1 0 100%; }
  .db-row > .db-name-inline { flex: 1 0 100%; }
  .db-row > [data-label]::before { content: attr(data-label) '\00a0'; font: 400 11.5px var(--sans); letter-spacing: 0; color: var(--muted); }
  .db-row > .db-barcell { flex: 1 0 100%; }
  .db-row > .db-barcell::before { flex: none; min-width: 84px; }
  .db-row > .db-tick { order: -1; }
  .has-ticks .db-row > .db-name { flex-basis: calc(100% - 32px); }
  .db-num { text-align: left; }
  .dbh-list .db-num, .dbh-group .db-num { text-align: right; }
  .db-head > form.db-head-end { flex: 1 0 100%; }
  .db-bar { align-items: stretch; }
  .db-bar .db-search, .db-head-end .db-search { flex: 1 0 100%; min-width: 0; }
  .db-clear { margin-left: 0; align-self: center; }
  .db-split { grid-template-columns: minmax(0, 1fr); }
  .db-split-side { border-left: 0; border-top: 1px solid var(--rule); }
  .db-figures { gap: 12px 26px; }
  .dbh { padding: 34px var(--pad-x) 28px; }
  .dbh-form { flex-wrap: wrap; }
  .dbh-form .db-search { flex: 1 0 100%; }
  .dbh-go { flex: 1; }
  .dbh-list { margin: 0 var(--pad-x) 32px; }
  .dbh-list .db-row, .dbh-group .db-row { display: grid; }
  .dbh-band { padding: 26px var(--pad-x) 30px; }
  .dbh-results { padding: 0 var(--pad-x) 12px; }
  .dbh-group .db-row > [data-label]::before { content: none; }
  .pb-end { margin-left: 0; }
  .pb-bar .db-search { flex: 1 0 100%; }
  .db-dd-panel { position: fixed; left: 12px !important; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; max-height: 70vh; overflow-y: auto; }
  .db-dd-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec { padding: 18px var(--pad-x) 24px; }
}
/* ══ end Database ══ */

/* Always-visible Analytics view and department controls. */
.an-view-controls { display: flex; flex-wrap: wrap; align-items: start; gap: 16px 28px; padding: 0 0 18px; border-bottom: 1px solid #e8e6e1; margin-bottom: 16px; }
.an-view-modes { display: flex; flex-wrap: wrap; gap: 0; border: 0; padding: 0; margin: 0; min-width: 0; }
.an-view-modes legend { float: none; display: block; width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: #16181c; }
.an-view-modes label { position: relative; cursor: pointer; }
.an-view-modes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.an-view-modes label > span { display: block; border: 1px solid #c8c5bd; padding: 9px 12px; margin-left: -1px; background: #fff; color: #4a4842; font-size: 14px; line-height: 1.35; }
.an-view-modes label:first-of-type > span { margin-left: 0; border-radius: 4px 0 0 4px; }
.an-view-modes label:last-of-type > span { border-radius: 0 4px 4px 0; }
.an-view-modes input:checked + span { position: relative; z-index: 1; border-color: #2f4a7a; background: #edf1f7; color: #243e6b; font-weight: 600; }
.an-view-modes input:focus-visible + span { outline: 2px solid #2f4a7a; outline-offset: 3px; z-index: 2; }
.an-view-departments { flex: 1 1 250px; max-width: 540px; min-width: 0; }
.an-view-departments > .an-k { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.an-view-departments .ms { width: 100%; }
.an-view-departments .ms > summary { min-height: 40px; font-size: 14px; padding: 9px 12px; }
.an-view-departments .ms-panel { max-height: 52vh; overflow-y: auto; }
.an-view-departments .ms-static { margin: 0; padding: 30px 0 0; font-size: 14px; color: #4a4842; }
.an-view-controls [hidden] { display: none !important; }
@media (max-width: 640px) { .an-view-controls { gap: 14px; } .an-view-modes { flex: 1 1 100%; } .an-view-modes label { flex: 1; text-align: center; } .an-view-modes label > span { padding: 9px 7px; font-size: 13px; } .an-view-departments { max-width: none; flex-basis: 100%; } .an-view-departments .ms-static { padding-top: 0; } }