/* ============================================================
   app.css — in-app editorial styling (logged-in student & professor).
   Builds on the same tokens as the marketing site (mars.css) but this is a
   standalone sheet so the app pages don't depend on the marketing CSS.
   Mobile-first: every table scrolls in its own container, decision entry
   reshapes to one card per person/product on small screens.
   ============================================================ */
:root {
  --cream: #fbf9f3; --cream-2: #f4efe1; --paper: #fff;
  --ink: #1a0e1d; --ink-soft: #6b5f70; --ink-faint: #726970;
  --wine: #5d1e3a; --wine-deep: #3d0d24; --gold: #b48a44;
  --rule: #d8d0bf; --rule-soft: #ebe4d2;
  --good: #2f6d4f; --bad: #a8365e;
  --shadow: 0 1px 3px rgba(26,14,29,.06), 0 12px 28px -18px rgba(26,14,29,.3);
}
* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream); color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a { color: var(--wine); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---- top bar ---- */
.bar {
  position: sticky; top: 0; z-index: 40; background: rgba(251,249,243,.95);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.bar__in { max-width: 1200px; margin: 0 auto; padding: 12px clamp(14px, 4vw, 32px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bar__brand { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.25rem;
  letter-spacing: .14em; color: var(--ink); text-decoration: none; }
.bar__sub { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.bar__spacer { flex: 1; }
.bar__nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bar__who { font-size: .78rem; color: var(--ink-soft); margin-right: 4px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: clamp(18px, 4vw, 34px); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 1.6rem; }
.tab {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--wine); }

/* ---- headings ---- */
h1.display, h2.display {
  font-family: 'Fraunces', Georgia, serif; font-weight: 350; letter-spacing: -.02em;
  line-height: 1.05; margin: 0 0 .4rem;
}
h1.display { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2.display { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.display em { font-style: italic; color: var(--wine); }
.eyebrow { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 .5rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
.section { margin-bottom: 2.4rem; }
/* "Which class am I looking at" — sits under the heading on every student screen
   that shows one section's contents. Quiet, but always in the same place. */
.section-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem;
  margin: -.4rem 0 1.2rem; font-size: .92rem; color: var(--ink-soft);
}
.section-line b { color: var(--ink); font-weight: 600; }
.section-line__label {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint);
}
/* Marks a line only an administrator can see, so it is never mistaken for
   something to pass on to a professor or a student. Wording, not colour, carries
   the meaning — the rule and tint are secondary. */
.admin-tag {
  display: inline-block; margin-right: .5rem; padding: .1rem .4rem;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--wine); border: 1px solid var(--rule); background: var(--cream-2);
  vertical-align: .08em;
}

/* ---- buttons ---- */
.btn { font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  padding: 8px 18px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.btn--solid { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.btn--solid:hover { background: var(--wine-deep); border-color: var(--wine-deep); }
.btn--sm { padding: 5px 12px; font-size: .66rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* "Run" action — gold outline so it reads as an action, never a selected view */
.btn--run { border-color: var(--gold); color: var(--wine); }
.btn--run:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---- cards ---- */
.card { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 1.4rem; }
.card + .card { margin-top: 1rem; }
/* A card folded shut — used once a section starts running and the roster and the
   syllabus paragraph stop being the reason you opened the page. The summary keeps
   the card's own padding so an open and a closed card line up down the column. */
.card--fold { padding: 0; }
.card__foldhead {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: 1.4rem; cursor: pointer; list-style: none;
}
.card__foldhead::-webkit-details-marker { display: none; }
.card__foldhead::before { content: "\25B8"; color: var(--ink-faint); font-size: .8em; }
.card--fold[open] > .card__foldhead::before { content: "\25BE"; }
.card--fold[open] > .card__foldhead { padding-bottom: 0; }
.card__foldhead .card__title { margin: 0; }
.card__foldbody { padding: 1rem 1.4rem 1.4rem; }
/* The syllabus card builds its own body, so its summary is the only child that
   needs the treatment; everything after it keeps the card's padding. */
.card--fold > *:not(summary):not(.card__foldbody) { margin-left: 1.4rem; margin-right: 1.4rem; }
.card--fold > *:last-child:not(summary) { margin-bottom: 1.4rem; }

/* A card that IS the control — the student's section list. */
.card--pick { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card--pick:hover { border-color: var(--wine); }
.card--pick.is-active { border-left: 3px solid var(--wine); }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: .8rem; }
.card__title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.15rem; margin: 0; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: 1fr 1fr; } }

/* ---- fields ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.field input, .field select {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--wine); box-shadow: inset 0 -2px 0 var(--wine); }
.field--inline { display: flex; gap: 10px; align-items: center; }
.field--inline label { margin: 0; }
.field--inline input { width: auto; }

/* numeric inputs in decision grids */
input.n { width: 100%; font-family: 'IBM Plex Mono', monospace; text-align: right; padding: 8px 8px; border: 1px solid var(--rule); border-radius: 0; font-size: .9rem; }
input.n:focus { outline: none; border-color: var(--wine); box-shadow: inset 0 -2px 0 var(--wine); }

/* ---- tables (always scroll horizontally on small screens) ---- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data caption { text-align: left; font-size: .78rem; color: var(--ink-faint); margin-bottom: .7rem; }
table.data th, table.data td { padding: 8px 12px; text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--ink); }
table.data tbody tr + tr td, table.data tbody tr + tr th { border-top: 1px solid var(--rule-soft); }
table.data tbody td { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: .86rem; }
table.data tbody td.txt, table.data tbody th { font-family: 'Instrument Sans', sans-serif; }
table.data tbody tr:hover td, table.data tbody tr:hover th { background: var(--cream-2); }
.pos { color: var(--good); }
.neg { color: var(--bad); }

/* ---- banner / toast ---- */
.banner { padding: 12px 16px; border: 1px solid var(--ink); background: var(--cream-2); margin-bottom: 1.2rem; font-size: .92rem; }
.banner--bad { border-color: var(--bad); background: var(--paper); }
.banner--good { border-color: var(--good); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--cream); padding: 12px 20px; font-size: .9rem; opacity: 0;
  transition: opacity .2s, transform .2s; z-index: 100; max-width: 90vw; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--bad { background: var(--wine-deep); }

/* ---- decision entry: grid on desktop, stacked cards on mobile ---- */
.decision-person { border: 1px solid var(--rule); padding: 1rem; margin-bottom: 1rem; background: var(--paper); }
.decision-person__name { font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 0 0 .8rem; }
.dgrid { display: grid; gap: .7rem 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .dgrid { grid-template-columns: repeat(3, 1fr); } }
.dgrid .field { margin: 0; }

/* research-report checkboxes inside the decision form — 44px rows for touch */
.research-row { display: flex; align-items: center; gap: .7rem; min-height: 44px; border-bottom: 1px solid var(--rule); }
.research-row:last-child { border-bottom: 0; }
.research-row input { width: auto; margin: 0; flex: none; }
.research-row span:nth-of-type(1) { flex: 1; }
.research-row__cost { color: var(--ink-soft); white-space: nowrap; }
ul.tight { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
ul.tight li { margin: .15rem 0; }

/* ---- restyled letters ---- */
.letter { background: var(--cream-2); border: 1px solid var(--rule); padding: clamp(1.4rem, 4vw, 2.6rem); margin-top: 1.4rem; max-width: 62ch; }
.letter__eyebrow { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0 0 1rem; }
.letter__from { font-size: 1.05rem; margin: 0; }
.letter__from em { font-family: 'Fraunces', serif; font-style: italic; color: var(--wine); }
.letter__role { font-size: .8rem; color: var(--ink-soft); margin: .2rem 0 0; }
.letter__body { border-top: 1px solid var(--rule); margin-top: 1.2rem; padding-top: 1.2rem; }
.letter__body p { margin: 0 0 1rem; line-height: 1.7; }
.letter__sign { margin-top: 1.4rem; font-size: .95rem; color: var(--ink-soft); }
/* the illustration v1 drops into each MMS letter at $PICTURE$ — the images carry
   their own 2003 borders and captions, so they get room rather than a frame */
.letter__figure { margin: 1.4rem 0; text-align: center; }
.letter__figure img { max-width: 100%; height: auto; display: inline-block; }
.letter__sign em { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink); font-size: 1.1rem; }

/* ---- charts ---- */
.chart { background: var(--paper); border: 1px solid var(--rule); padding: 1rem; margin-top: 1rem; overflow-x: auto; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: .8rem; }
.chart__key { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); }
.chart__dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
/* ---- dialogs -----------------------------------------------------------
   Replacing alert/confirm/prompt, which are the only part of MARS that does not
   look like MARS. `<dialog>` gives the top layer, focus trap and Escape for free;
   everything here is appearance. */
.dlg {
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 0; max-width: min(30rem, calc(100vw - 2rem)); width: 100%;
  box-shadow: 0 10px 40px rgba(26, 14, 29, .22);
}
.dlg::backdrop { background: rgba(26, 14, 29, .38); }
.dlg__form { padding: 1.4rem 1.5rem 1.2rem; margin: 0; }
.dlg__title {
  font-family: 'Fraunces', Georgia, serif; font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
  font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .5rem;
}
/* pre-wrap so a message that lists names one per line keeps them */
.dlg__body { margin: 0; font-size: .93rem; line-height: 1.6; white-space: pre-wrap; }
.dlg__input {
  width: 100%; margin-top: 1rem; padding: 9px 11px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: .92rem; border-radius: 0;
}
.dlg__input:focus { outline: 2px solid var(--wine); outline-offset: 1px; }
.dlg__actions {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.btn--danger { background: var(--bad); border-color: var(--bad); color: #fff; }
@media (max-width: 420px) {
  /* Full-width buttons at phone size: a 44px target beats a tidy row. */
  .dlg__actions { flex-direction: column-reverse; }
  .dlg__actions .btn { width: 100%; }
}

/* A student whose password email bounced. Loud on purpose: it is the only roster
   state the professor must act on, and it looks identical to laziness otherwise. */
.mailbad {
  display: inline-block; margin-left: .5rem; padding: 1px 7px;
  background: var(--bad); color: #fff; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; cursor: help;
}

/* A whole table row that opens something. The pointer and the hover tint are the
   only cues that it is clickable, so both are required — a row that acts like a
   link without looking like one is worse than a plain row. */
.row--open { cursor: pointer; }
.row--open:hover td { background: var(--cream-2); }
.row--open:focus-within td { background: var(--cream-2); }

/* Who pays — a decision the instructor makes, not one to infer from whether a code
   happens to exist. Two choices, side by side, so the trade-off is visible. */
.route-choices { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: .9rem 0 .2rem; }
.route-choice { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; font-size: .9rem; }
.route-choice input { margin: 0; flex: none; }
.route-choice b { font-weight: 600; }

/* The paste-ready syllabus paragraph — a document to be copied, so it reads as
   one: ruled frame, mono figures, and it must survive being pasted into Word. */
.syllabus {
  border: 1px solid var(--rule); background: var(--paper);
  padding: .9rem 1rem; font-family: 'IBM Plex Mono', monospace;
  max-height: 22rem; overflow: auto;
}
.chart__note { flex-basis: 100%; margin: 0; font-size: .76rem; color: var(--ink-soft); }
/* The hover caption v1's Flash map had. Pointer-events off so it can never sit
   between the pointer and the mark it describes and flicker. */
.chart__tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 15rem;
  background: var(--ink); color: var(--cream); padding: .5rem .65rem;
  font-size: .78rem; line-height: 1.45; box-shadow: 0 2px 10px rgba(26, 14, 29, .28);
}
.chart__tip b { font-weight: 600; }
.chart svg g[tabindex]:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---- report picker ---- */
.rpt-list { list-style: none; margin: 0; padding: 0; }
.rpt-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; }
.rpt-list .cost { margin-left: auto; font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); font-size: .82rem; }
.rpt-owned { color: var(--good); font-size: .78rem; font-weight: 600; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.spinner { text-align: center; padding: 2rem; color: var(--ink-faint); }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

/* ---- exception reporting: v1's green/yellow cell coding ----
   Tint + glyph, never color alone. The tints are light enough to keep the
   figure at full contrast on top; forced-colors mode drops the tint and keeps
   the glyph, which is why the glyph is not decorative. */
td.is-good, td.is-bad { position: relative; }
td.is-good { background: rgba(47, 109, 79, .13); }
td.is-bad  { background: rgba(180, 138, 68, .22); }
.mark { font-size: .7em; margin-left: .35em; vertical-align: .12em; }
td.is-good .mark { color: var(--good); }
td.is-bad  .mark { color: #8a6520; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .7rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.legend__key { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 8px; }
.legend__key.is-good { background: rgba(47, 109, 79, .13); }
.legend__key.is-bad  { background: rgba(180, 138, 68, .22); }
@media (forced-colors: active) {
  td.is-good, td.is-bad, .legend__key { background: none; }
}
@media print {
  td.is-good { background: #ececec; }
  td.is-bad  { background: #d8d8d8; }
}

/* session ended — v1's "Your session has timed out. Please logon again." */
.session-gone {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem; text-align: center;
  background: rgba(251,249,243,.97); padding: 2rem;
}

/* a value management reduced on save — a statement of fact about their data,
   so it reads stronger than the advisory audit letter that follows it */
.banner--adjusted { border-left: 4px solid var(--gold); }
.banner--adjusted s { color: var(--ink-soft); }
.field__hint { margin: .3rem 0 0; font-size: .74rem; color: #8a6520; }
.field__hint:empty { display: none; }
input.n.is-over { border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

/* research reports listed on the professor's team report, purchased or not */
.rpt { border-bottom: 1px solid var(--rule-soft); }
.rpt__head { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; padding: 4px 0; font-size: .92rem; }
.rpt__head::-webkit-details-marker { display: none; }
.rpt__head::before { content: "▸"; color: var(--ink-faint); font-size: .8em; }
.rpt[open] > .rpt__head::before { content: "▾"; }
.rpt__head > span:first-of-type { flex: 1; }
.rpt__body { padding: .2rem 0 1.2rem; }

/* ---- first-run help on Class Sections ------------------------------------
   Three words, then four steps. Shown open when a professor has no sections
   (it is the page at that point) and folded into a summary once they do, so it
   stops nagging the moment it stops being needed. */
.help { border: 1px solid var(--ink); background: var(--cream-2); margin-top: 2rem; }
.help__head { padding: 1rem 1.3rem; border-bottom: 1px solid var(--rule); }
.help__title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.2rem; margin: 0; }
.help__body { padding: 1.3rem; }
.help dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.1rem; }
.help dt {
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--wine);
  white-space: nowrap; padding-top: .1rem;
}
.help dd { margin: 0; font-size: .92rem; line-height: 1.62; color: var(--ink); }
.help ol { margin: 1.4rem 0 0; padding-left: 1.3rem; }
.help li { font-size: .92rem; line-height: 1.62; padding: .3rem 0; }
.help li b { font-weight: 600; }
.help__try {
  margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-size: .92rem; line-height: 1.62; color: var(--ink-soft);
}
.help summary {
  cursor: pointer; padding: 1rem 1.3rem; font-family: 'Fraunces', serif; font-size: 1.05rem;
}
.help summary::marker { color: var(--gold); }
@media (max-width: 560px) {
  .help dl { grid-template-columns: 1fr; gap: .15rem; }
  .help dt { padding-top: .5rem; }
}

/* A table cell that opens something. Reads as text, behaves as a control — used
   for the section roster, where the row is the way through to a student's
   industry and a row of buttons would drown the data. */
.linklike {
  font: inherit; color: var(--wine); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.linklike:hover { text-decoration-color: var(--wine); }
.linklike:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* Second-level tabs — the views inside one industry, under the page heading.
   Lighter than the top-level strip so the two levels read as a hierarchy rather
   than competing for the same job. */
.tabs--sub { margin-top: 1rem; margin-bottom: 1.4rem; }
.tab--sub {
  font-size: .68rem; letter-spacing: .1em; padding: 8px 12px;
}
.tab--sub.is-active { border-bottom-color: var(--gold); }

/* ---- tall lists ----------------------------------------------------------
   A section can hold 200 students. Rendering that as one long table pushes
   everything below it off the screen and makes the page itself the scrollbar,
   so the list gets its own box with a header that stays put. `--rows` sets the
   cap in rows rather than pixels, because row height changes with the type
   scale and a pixel figure would go wrong on a phone. */
.tall {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: calc(var(--rows, 12) * 2.55rem + 2.4rem);
  border-bottom: 1px solid var(--rule);
}
.tall table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper);
  /* the sticky row loses its collapsed border, so draw it back on */
  box-shadow: inset 0 -1px 0 var(--ink);
}

/* Filter row above a long list. */
.filter { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .2rem 0 .9rem; }
.filter input[type="search"] {
  font: inherit; font-size: .9rem; padding: 7px 11px; min-width: 15rem;
  border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink);
}
.filter input[type="search"]:focus { outline: none; border-color: var(--wine); }
.filter label { font-size: .86rem; color: var(--ink-soft); display: flex; align-items: center; gap: .4rem; }
.filter__count { font-size: .82rem; color: var(--ink-faint); margin-left: auto; }

/* A long list of names inside a banner — every name kept, none truncated. */
.namelist { max-height: 11rem; overflow: auto; margin: .6rem 0 0; padding-left: 1.2rem; }
.namelist li { padding: .1rem 0; }