/* Hallmark · redesign: full · scope: app · brand: CONE RED (spec 2026-10-27) · surface: absolute */
/* critique: a landing-page column pretending to be a tool; the report had no shelf to sit on, so every panel shouted at once */
/* pass 2026-11-04 · the cone red panel language: square corners, hairline cards, red-bar section heads above the card, red outlined secondary buttons, underline tabs */
/* Hallmark · waive 7b · .hallmark/brand-spec.md records the cone red page plane as #000000, read from the rendered homepage, not recalled · the rail is that plane and tinting it would publish a colour the company does not use */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sprite { position: absolute; width: 0; height: 0; }
.ic { width: 16px; height: 16px; flex: 0 0 auto; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:where(button, select, input, textarea, a, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

:where(input, textarea, select):focus-visible { outline-offset: 0; }

h1, h2, h3 { text-wrap: balance; }

:where(button):active:not(:disabled) { transform: translateY(1px); }

/* ── shell ───────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); height: 100vh; overflow: hidden; }

.rail {
  background: var(--nav);
  color: var(--nav-ink);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5) var(--s3) var(--s4);
  height: 100vh;
  overflow-y: auto;
}

.rail-brand { padding: 0 var(--s2) var(--s6); }
.rail-logo { display: block; width: 150px; height: auto; }
.rail-sub { display: block; margin-top: var(--s2); color: var(--nav-ink-2); font-size: 12px; }

.rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; font: inherit; font-size: 14px; text-align: left;
  color: var(--nav-ink); background: none; border: 0;
  border-radius: var(--r2); padding: var(--s3) var(--s3);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rail-item .ic { color: var(--nav-ink-2); transition: color .15s ease; }
.rail-item:hover { background: var(--nav-2); color: var(--on-accent); }
.rail-item:hover .ic { color: var(--nav-ink); }
.rail-item.on { background: var(--nav-2); color: var(--on-accent); font-weight: 600; position: relative; }
.rail-item.on::before {
  content: ""; position: absolute; left: 0; top: 50%; width: var(--s1); height: var(--s5);
  margin-top: calc(var(--s5) / -2); background: var(--accent-mark);
}
.rail-item.on .ic { color: var(--nav-accent); }
.rail-n {
  margin-left: auto; font-size: 12px; color: var(--nav-ink-2);
  font-variant-numeric: tabular-nums;
}

/* the signed-in person, at the foot of the rail below the links share.js appends; the
   menu opens upward */
.rail-user { order: 1; margin-top: auto; position: relative; padding-top: var(--s3); border-top: 1px solid var(--nav-line); }
.rail-user[hidden] { display: none; }
.ru-trigger {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  font: inherit; text-align: left; color: var(--nav-ink); background: none; border: 0;
  border-radius: var(--r2); padding: var(--s2) var(--s2); cursor: pointer;
  transition: background-color .15s ease;
}
.ru-trigger:hover, .ru-trigger[aria-expanded="true"] { background: var(--nav-2); }
.ru-mark {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--nav-3); color: var(--nav-ink); font-size: 14px; font-weight: 600;
}
.ru-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
.ru-txt b, .ru-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-txt b { font-size: 14px; font-weight: 600; }
.ru-txt span { font-size: 12px; color: var(--nav-ink-2); }
.ru-txt span:empty { display: none; }
.ru-chev { flex: 0 0 auto; color: var(--nav-ink-2); transform: rotate(180deg); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.ru-trigger[aria-expanded="true"] .ru-chev { transform: none; }
.ru-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--s2)); z-index: 30;
  background: var(--nav-2); border: 1px solid var(--nav-line); padding: var(--s2);
  /* closes back the way it came; display waits out the fade, so hidden stays the switch */
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), display var(--t-fast) allow-discrete;
}
.ru-menu:not([hidden]) { transition-duration: var(--t-enter); }
@starting-style { .ru-menu:not([hidden]) { opacity: 0; transform: translateY(4px); } }
.ru-menu[hidden] { display: none; opacity: 0; transform: translateY(4px); pointer-events: none; }
.ru-who { margin: 0; padding: var(--s2) var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; line-height: 1.3; border-bottom: 1px solid var(--nav-line); }
.ru-who b { font-size: 14px; font-weight: 600; color: var(--nav-ink); }
.ru-who span { font-size: 12px; color: var(--nav-ink-2); overflow-wrap: anywhere; }
.ru-who span:empty { display: none; }
.ru-menu form { margin: var(--s2) 0 0; }
.ru-out {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  font: inherit; font-size: 14px; text-align: left; color: var(--nav-ink); background: none; border: 0;
  border-radius: var(--r2); padding: var(--s2) var(--s2); cursor: pointer;
}
.ru-out .ic { color: var(--nav-ink-2); }
.ru-out:hover { background: var(--nav-3); color: var(--on-accent); }
/* the interface language: set once, so in the account menu; the select in the rail's dark */
.ru-lang { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--nav-line); }
.ru-lang label { font-size: 12px; line-height: 16px; color: var(--nav-ink-2); }
.ru-lang .cs { width: 100%; }
.ru-lang .cs-trigger { color: var(--nav-ink); background: var(--nav-2); border-color: var(--nav-line); }
.ru-lang .cs-trigger:hover { background: var(--nav-3); border-color: var(--nav-ink-2); }
.ru-lang .cs-icon, .ru-lang .cs-chev { color: var(--nav-ink-2); }
.ru-lang .cs-trigger:hover .cs-icon, .ru-lang .cs-trigger:hover .cs-chev { color: var(--nav-ink); }
.ru-lang .cs-open > .cs-trigger { border-color: var(--nav-ink); box-shadow: none; }
/* in the account menu: the languages as menu rows, the current one ticked; no select */
.ru-menu .ru-lang { gap: 0; padding: var(--s2) 0; }
.ru-menu .ru-lang label { padding: var(--s1) var(--s2); }
.ru-menu .ru-lang .cs, .ru-menu .ru-lang > select { display: none; }
.ru-lang-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; font-size: 14px; line-height: 20px; text-align: left; color: var(--nav-ink-2);
  background: none; border: 0; padding: var(--s2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ru-lang-opt:hover { background: var(--nav-3); color: var(--nav-ink); }
.ru-lang-opt[aria-checked="true"] { color: var(--nav-ink); cursor: default; }
.ru-lang-opt .ic { width: 16px; height: 16px; color: var(--accent-mark); }
.ru-lang-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail > .ru-lang .ru-lang-rows { display: none; }
/* the select of the rail opens its list in the rail's own dark, not a white sheet */
.ru-lang .cs-list { background: var(--nav-2); border-color: var(--nav-line); }
.ru-lang .cs-opt { color: var(--nav-ink-2); }
.ru-lang .cs-opt:hover, .ru-lang .cs-opt.cs-active { background: var(--nav-3); color: var(--nav-ink); }
.ru-lang .cs-opt[aria-selected="true"] { color: var(--nav-ink); }
/* no account menu (a shared view, login off): the same row at the foot of the rail */
.rail > .ru-lang { order: 1; margin-top: var(--s2); padding: var(--s3) 0 0; border-bottom: 0; border-top: 1px solid var(--nav-line); }

/* the fold switch (static/rail.js): open, at the right end of the logo row, centred on the
   triangle of the 25px logo; folded, the red mark itself */
.rail-brand { position: relative; }
.rail-fold {
  position: absolute; right: 0; top: calc(12.5px - 16px);
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--nav-ink-2); background: none; border: 0; border-radius: var(--r2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.rail-fold:hover { background: var(--nav-2); color: var(--nav-ink); }
.rail-mark { display: none; width: 24px; height: 20px; }
.rail-fold .ic { width: 20px; height: 20px; }
/* the tip of the fold switch: a dark pill to its right naming the action */
.rail-tip {
  position: fixed; z-index: 60; transform: translateY(-50%); pointer-events: none;
  padding: var(--s1) var(--s3);
  font-size: 13px; line-height: 20px; color: var(--nav-ink); background: var(--nav-2);
  border: 1px solid var(--nav-line); border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.rail-tip.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rail-tip { transition: none; } }
.t6-rail-meth .ic { display: none; }
/* the labels fade: out before the column narrows, in after it widens */
.rail-item > span, .rail-logo, .rail-sub, .ru-txt, .t6-rail-meth > span { transition: opacity var(--t-fast) var(--ease); }
.rail-fading .rail :is(.rail-item > span, .rail-logo, .rail-sub, .ru-txt, .ru-chev, .t6-rail-meth > span) { opacity: 0; }
.rail-still .rail :is(.rail-item > span, .rail-logo, .rail-sub, .ru-txt, .ru-chev, .t6-rail-meth > span) { transition: none; }

/* folded: 64px of icons; each names itself in a title, the labels stay for screen readers */
@media (min-width: 901px) {
  .rail-folded .app { --rail: 64px; }
  .rail-folded .rail-logo, .rail-folded .rail-sub { display: none; }
  /* folded: the red mark; pointed at or focused it turns into the panel icon on a light
     square and a tip names the action (static/rail.js). The empty dark of
     the rail shows an "open the panel" cursor and opens it on a click */
  .rail-folded .rail-fold { position: static; width: 40px; height: 40px; margin-left: -8px; }
  .rail-folded .rail-fold .ic { display: none; }
  .rail-folded .rail-mark { display: block; }
  .rail-folded .rail-fold:is(:hover, :focus-visible) { background: var(--nav-2); }
  .rail-folded .rail-fold:is(:hover, :focus-visible) .rail-mark { display: none; }
  .rail-folded .rail-fold:is(:hover, :focus-visible) .ic { display: block; }
  .rail-folded { --cur-open: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'><g stroke='white' stroke-width='4'><path d='M5 5v14M9 12h10M15 8l4 4-4 4'/></g><g stroke='black' stroke-width='2'><path d='M5 5v14M9 12h10M15 8l4 4-4 4'/></g></svg>") 12 12, e-resize; }
  .rail-folded .rail { cursor: var(--cur-open); }
  .rail-folded .rail :is(a, button, [role="button"], .rail-user) { cursor: pointer; }
  /* the logo and its line keep their height, so the icons do not move when the rail folds */
  .rail-folded .rail-brand { min-height: 75px; }
  .rail-folded .rail-item, .rail-folded .t6-rail-meth { position: relative; }
  .rail-folded :is(.rail-item > span, .t6-rail-meth > span, .ru-txt, .rail > .ru-lang label) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .rail-folded .ru-chev { display: none; }
  .rail-folded .t6-rail-meth { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
  .rail-folded .t6-rail-meth .ic { display: block; }
  .rail-folded .ru-trigger { justify-content: center; padding: var(--s1); }
  /* the menu cannot fit the column: it opens beside the rail */
  .rail-folded .ru-menu { position: fixed; left: calc(64px + var(--s2)); right: auto; bottom: var(--s4); width: 248px; }
  /* a shared view: the language select down to its globe */
  .rail-folded .rail > .ru-lang .cs-trigger { width: 40px; padding: 0; justify-content: center; }
  .rail-folded .rail > .ru-lang :is(.cs-box, .cs-chev) { display: none; }
}
@media (max-width: 900px) { .rail-fold { display: none; } }

/* ── topbar ──────────────────────────────────────────────── */

.main { min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) var(--s7) 0;
  position: sticky; top: 0; z-index: 20;
}
/* one row: which campaign (and when it was measured) on the left, what you can do on the right */
.topbar-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: nowrap; padding-bottom: var(--s4); }
.tb-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; }
.topbar-row .ghost, .topbar-row .start { height: var(--ctl); white-space: nowrap; flex: 0 0 auto; }
.tb-actions > [hidden] { display: none; }

/* the controls, one look per role: primary (red fill), secondary (ink on a hairline);
   14/500, 36 high, square, the one red focus ring from the global rule */
.start {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--ctl);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 20px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 0; padding: 0 var(--s4);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.start:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.start:active:not(:disabled) { background: var(--accent-press); border-color: var(--accent-press); }
.start:disabled {
  background: var(--surface-3); border-color: var(--line-2);
  color: var(--ink-3); cursor: not-allowed;
}

/* secondary: ink on a neutral hairline. The red outline belongs to Share alone, so the
   top bar has one red control instead of three */
.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--ctl);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 20px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 0;
  padding: 0 var(--s3); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.ghost:active:not(:disabled) { background: var(--surface-3); }
.ghost[aria-expanded="true"] { background: var(--surface-2); border-color: var(--ink-3); }
.ghost:disabled { color: var(--ink-3); border-color: var(--line-2); background: var(--surface-2); cursor: not-allowed; }
.ghost .ic { color: var(--ink-2); }
.start[hidden], .ghost[hidden] { display: none; }

/* campaign picker: the shared select (select.css). The trigger names the campaign and,
   quiet under it, when it was measured; the menu lists the campaigns, then what can be
   done with the one on screen */
/* the picker is the page's title: the campaign name large, the date of the measurement under
   it, a small chevron right after the name, no box; a light fill on hover and while open,
   like a project switcher */
.cs.dd { flex: 0 1 auto; min-width: 0; max-width: 560px; margin-left: calc(-1 * var(--s2)); }
.cs-trigger.dd-trigger {
  width: auto; height: auto; min-height: 0; align-items: flex-start; gap: var(--s2);
  padding: var(--s1) var(--s2); border-color: transparent; background: none;
}
.cs-trigger.dd-trigger:hover, .cs-open > .dd-trigger { border-color: transparent; background: var(--surface-2); box-shadow: none; }
/* the chevron right after the name, the date on the line under both */
.cs-trigger.dd-trigger { display: inline-grid; grid-template-columns: minmax(0, max-content) 1fr; justify-content: start; column-gap: var(--s1); row-gap: 0; }
.dd-trigger .dd-value { display: contents; }
.dd-trigger .dd-value b { grid-column: 1; grid-row: 1; min-width: 0; }
.dd-trigger .dd-when { grid-column: 1 / -1; grid-row: 2; }
.dd-trigger .cs-chev { position: static; grid-column: 2; grid-row: 1; align-self: center; justify-self: start; margin: 0; }
.dd-value { display: flex; flex-direction: column; min-width: 0; }
.dd-value b { font-size: 20px; font-weight: 500; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-when { font-size: 13px; line-height: 20px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dd-when > [hidden], .dd-when > :empty { display: none; }
.dd-when > :not([hidden]):not(:empty) ~ :not([hidden]):not(:empty)::before { content: "·"; margin: 0 var(--s2); }
.dd-menu { min-width: 280px; }
.dd-opt .nm { font-size: 14px; font-weight: 500; white-space: nowrap; }
.dd-opt .dom { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt[aria-selected="true"] .nm { color: var(--accent-ink); }
/* the actions start one group under the list of campaigns */
.dd-act, .dd-new { color: var(--ink-2); }
.dd-act .ic, .dd-new .ic { color: var(--ink-3); }
.dd-act:hover, .dd-new:hover, .dd-act.cs-active, .dd-new.cs-active { color: var(--ink); }
.dd-opt + .dd-act:not([hidden]), .dd-opt + .dd-act[hidden] + .dd-act { margin-top: var(--s1); border-top: 1px solid var(--line); }
.dd-edit, .dd-del {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  flex: 0 0 auto; color: var(--ink-3); background: var(--surface-3);
  padding: var(--s1) var(--s2); cursor: pointer;
  font-size: 12px; font-weight: 400; line-height: 1.4; min-width: 26px; min-height: 24px;
  transition: color .14s ease, background-color .14s ease;
}
.dd-edit { margin-left: var(--s2); }
.dd-edit:hover { color: var(--ink); background: var(--line); }
.dd-del:hover { color: var(--accent-ink); background: var(--accent-wash); }
.dd-del.armed { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.dd-edit:focus-visible, .dd-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "new campaign" beside the picker, where the row has room; it is always the picker's last row */
.tb-new { display: none; }
@media (min-width: 1560px) { .topbar-row .tb-new { display: inline-flex; } }

/* names the answers keep giving that the campaign does not compare with (Comparison) */
.camp-suggest { margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-3); }
.camp-suggest[hidden] { display: none; }
/* the card under them hangs its heading above itself, so it keeps a section's gap */
.view > .camp-suggest:not([hidden]) + section.panel { margin-top: calc(var(--s6) + var(--head) + var(--s2)); }
.camp-suggest button {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 0; padding: 2px var(--s2);
  display: inline-flex; align-items: center; gap: var(--s1);
}
.camp-suggest button:hover { border-color: var(--accent-mark); color: var(--accent-ink); }
.camp-suggest button:disabled { color: var(--ink-3); cursor: default; border-style: dashed; }
.camp-suggest .ic { width: 12px; height: 12px; }
.fl-row-hint { margin: calc(-1 * var(--s2)) 0 var(--s4); }
.fl-note { margin: 0 0 var(--s2); font-size: 13px; color: var(--ink-2); background: var(--surface-3); padding: var(--s2) var(--s3); }
.fl-note[hidden] { display: none; }
.fl-why { flex: none; margin: 0; padding: var(--s3) var(--s6); color: var(--ink); white-space: pre-line; }
.rl-row.rl-new input { border-color: var(--accent-mark); background: var(--accent-wash); }

/* before a live run: what it asks and what is left of today's budget */
.prerun-body { padding: var(--s4) var(--s6) var(--s6); }
.prerun-tab { margin-bottom: var(--s5); }
.prerun-tab td.mk { color: var(--ink-3); white-space: nowrap; padding-right: var(--s4); }
.prerun-tab td.mv { color: var(--ink); font-weight: 500; }
.prerun-tab .calc { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 400; font-size: 12px;
  white-space: normal; text-align: right; }
.prerun-tab td.mv { white-space: normal; width: auto; }
.prerun-tab td.mk { width: 1%; vertical-align: top; }

/* run settings */
/* a popover under its button, over the page: opening it never changes the header's height */
.runset {
  position: absolute; top: 100%; right: var(--s7); z-index: 30;
  width: min(520px, calc(100% - 2 * var(--s7)));
}
.runset[hidden] { display: none; }
.runset-body {
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--lift-2);
  border-radius: 0; padding: var(--s1) var(--s4);
  max-height: calc(100dvh - 128px); overflow-y: auto; overscroll-behavior: contain;
}
.rs-others { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-3); }
.rs-row { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.rs-row:last-of-type { border-bottom: 0; }
.rs-k { flex: 0 0 120px; font-size: 14px; font-weight: 500; color: var(--ink); padding-top: var(--s2); }
.rs-v { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }

.eng-pick {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r1); padding: var(--s2) var(--s3); cursor: pointer; user-select: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.eng-pick:hover { border-color: var(--ink-3); }
.eng-pick input { accent-color: var(--accent); margin: 0; }
.eng-pick.on { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.eng-pick:has(input:disabled) { color: var(--ink-3); background: var(--surface-3); cursor: not-allowed; }
.eng-pick:has(input:disabled) .eng-why { font-weight: 400; }
.eng-why { font-size: 12px; color: var(--ink-3); }
.eng-why::before { content: "· "; }
.rs-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-2); }
.rs-note:empty { display: none; }
/* the button names what it opens; the current settings sit under it, smaller */
#runset-open { padding-top: var(--s2); padding-bottom: var(--s2); }
#runset-open .rs-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
#runset-open .rs-sum { font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
#runset-open .rs-sum:empty { display: none; }
.rs-foot { margin: 0; padding: var(--s3) 0 var(--s2); font-size: 13px; color: var(--ink-3); }

/* progress and the live question */
.progress { padding-bottom: var(--s4); display: none; }
.progress.on { display: block; }
.pbar { height: 4px; background: var(--track); overflow: hidden; }
.pbar > i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.pmeta { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 13px; color: var(--ink-2); }

.now { display: none; align-items: baseline; gap: var(--s3); padding-bottom: var(--s4); min-width: 0; }
.now.on { display: flex; }
.now-k { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.now-q { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── content ─────────────────────────────────────────────── */

.content { display: contents; }
.view { display: none; padding: var(--s7); width: 100%; }
.view.on { display: block; }

/* an empty view starts where a populated one does: at the view's own padding, no gap above */
.empty-state { margin: 0; padding: 0; max-width: 52ch; }
.panel-empty { margin: 0 0 var(--s4); padding: 0; max-width: 52ch; color: var(--ink-2); }
.panel-empty[hidden] { display: none; }
.empty-h { margin: 0 0 var(--s2); font-size: 17px; font-weight: 600; }
.empty-p { margin: 0; color: var(--ink-2); }
/* a run in progress: a turning ring before the heading, still under reduced motion */
.empty-state.running .empty-h { display: flex; align-items: center; gap: var(--s3); }
.empty-state.running .empty-h::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .empty-state.running .empty-h::before { animation: none; } }
#summary.on .empty-state { display: none; }
/* a report with no finished run yet still says so on Over time */
#summary.on #dyn-empty:not([hidden]) { display: block; }
/* the question rows arrive one by one during a run; the first one replaces the empty state */
.view[data-view="prompts"]:has(#feed > .item) .empty-state { display: none; }
#summary:not(.on) .needs-data { display: none; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.tile {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 0;
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s1);
}
.tile[hidden] { display: none; }
.tile-k { font-size: 13px; color: var(--ink-2); }
.tile-v { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; margin: var(--s1) 0; }
.tile-s { font-size: 13px; color: var(--ink-3); }
/* a value is ink: a colour would claim good or bad, and nothing here defines either */
/* the overview opens with the situation in words: one sentence, the supporting counts
   under it, then the question language on its own line. How it was measured is a quiet
   block at the foot: what was asked, how much came back, what was not measured */
/* the overview opens with one card: the situation in words, and right under it, in the
   same card, the figures (#panel-funnel). The section heading "How the models answer"
   moves inside, as a quiet sub-head */
.ov-head {
  margin: 0; background: var(--surface); border: 1px solid var(--edge); border-bottom: 0;
  padding: var(--s5) var(--s5) var(--s4);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6);
}
.ov-head > .ov-lead, .ov-head > .ov-sub { grid-column: 1; max-width: 72ch; }
/* the question language at the card's right: it changes the figures under it */
.ov-head > .tb-qlang { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
/* no figures to show: the words close the card themselves */
.ov-head:has(+ #panel-funnel[hidden]) { border-bottom: 1px solid var(--edge); }
.view > .ov-head + #panel-funnel { margin-top: 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
#panel-funnel > h2.panel-h { position: static; margin: 0 0 var(--s3); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 720px) {
  .ov-head { padding: var(--s4); grid-template-columns: minmax(0, 1fr); }
  .ov-head > .tb-qlang { grid-column: 1; grid-row: auto; margin-top: var(--s3); }
}
.ov-lead { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.ov-sub { margin: var(--s2) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); text-wrap: pretty; }
.ov-head [hidden], .ov-how [hidden] { display: none; }
/* how it was measured: one strip of label / value pairs with the way to every answer as a
   secondary button at its right end; what was not measured sits under a hairline in the
   same pairs */
.ov-how-body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); }
.ov-facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); min-width: 0; }
.ov-asked, .ov-how .params { display: contents; }
.ov-fact { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; margin: 0; }
.ov-fk { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.ov-fv { font-size: 14px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ov-how-body > .ghost { flex: 0 0 auto; }
.ov-meta {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s7);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line);
}
.ov-meta:not(:has(> :not([hidden]))) { display: none; }
.ov-meta .unmeasured-line .ov-fv { color: var(--ink-2); }
.ov-prov { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
@media (max-width: 720px) {
  .ov-how-body { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .ov-facts, .ov-meta { gap: var(--s3) var(--s6); }
}
.unmeasured-line a { margin-left: var(--s2); color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); white-space: nowrap; }
.unmeasured-line a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* every figure in one table, folded at the foot of the overview */
.ov-all { margin-top: var(--s7); }
.ov-all > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); padding: var(--s1) 0;
}
.ov-all > summary::-webkit-details-marker { display: none; }
.ov-all > summary .ic { color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--t-fast) var(--ease); }
.ov-all[open] > summary .ic { transform: none; }
.ov-all > summary:hover .ic { color: var(--ink); }
.ov-all-body { margin-top: var(--s2); background: var(--surface); border: 1px solid var(--edge); padding: var(--s5); overflow-x: auto; }
/* each group of figures opens with its own heading under a hairline, the table right under it */
.ov-all-body .mh {
  margin: var(--s6) 0 var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink);
}
.ov-all-body > .mh:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ov-all-body .mtab td { line-height: 20px; }
.ov-all-body .mtab.cols th { line-height: 16px; font-weight: 400; padding-top: 0; }
.ov-all-body .mtab.cols th.l { text-align: left; }

/* motion, one for the page: an opened <details class="anim"> fades in and rises 4px;
   closing plays the reverse (static/motion.js adds .closing, then folds it). Items a list
   unfolds (.anim-in) enter the same way. Opacity and transform only */
@keyframes anim-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes anim-out { to { opacity: 0; transform: translateY(4px); } }
details.anim[open] > :not(summary), .anim-in { animation: anim-in var(--t-enter) var(--ease); }
details.anim.closing > :not(summary) { animation: anim-out var(--t-fast) var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  details.anim[open] > :not(summary), .anim-in, details.anim.closing > :not(summary) { animation: none; }
}

/* panels */
/* a section is its heading, then the card under it. The heading is taken out of the
   card and hung 8px above it, so every view keeps its markup and the gap between
   sections stays 32px */
.panel {
  position: relative;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 0;
  padding: var(--s5); margin: calc(var(--s7) + var(--head) + var(--s2)) 0 0;
  --head: 24px;
}
.view > section.panel:first-of-type,
.view > div > section.panel:first-of-type { margin-top: calc(var(--head) + var(--s2)); }
/* a section is named in plain sentence case; the size and the gap set it apart, the red
   is kept for the data */
.panel > h2.panel-h, .modal-head h2 {
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: var(--head, 24px);
  color: var(--ink);
}
.panel > h2.panel-h { position: absolute; left: 0; bottom: calc(100% + var(--s2)); right: 0; margin: 0;
  display: flex; align-items: center; gap: var(--s2); font-size: 18px; font-weight: 500; }
.panel-note { margin: 0 0 var(--s3); font-size: 13px; color: var(--ink-3); max-width: 70ch; }

/* scales */
.scale { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.scale:first-child { padding-top: 0; }
.scale:last-child { border-bottom: 0; }
.scale-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.scale-head .nm { font-size: 14px; font-weight: 500; }
.scale-head .q { font-size: 13px; color: var(--ink-3); }
.scale-body { display: flex; align-items: center; gap: var(--s4); }
.scale-track { position: relative; flex: 1; height: 8px; background: var(--track); min-width: 96px; }
.scale-track .rng { position: absolute; top: 0; height: 100%; background: rgba(21, 21, 21, .16); }
.scale-track .pt {
  position: absolute; top: 50%; width: 4px; height: 16px; margin: -8px 0 0 -2px;
  background: var(--accent);
}
.scale-val { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.scale-val b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.scale-val .rangetxt { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.scale-val .unmeasured { font-size: 13px; color: var(--ink-3); }
.scale-sub { font-size: 13px; color: var(--ink-3); margin-top: var(--s1); }
.scale.off .scale-head .nm { color: var(--ink-2); }

/* metrics table */
.mtab { width: 100%; border-collapse: collapse; }
.mtab td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: baseline; }
.mtab td:first-child { padding-left: 0; }
.mtab td:last-child { padding-right: 0; }
.mtab tr:last-child td { border-bottom: 0; }
.mtab .mf { text-align: right; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: var(--s5); width: 1%; }
/* the history tables share the overview's table: 13px cells, a small sentence-case head */
.panel .dyn-tab th, .panel .dyn-tab td { padding: var(--s2) var(--s3); font-size: 13px; }
.panel .dyn-tab :is(th, td):first-child { padding-left: 0; }
.panel .dyn-tab :is(th, td):last-child { padding-right: 0; }
.panel .dyn-tab .dyn-chg { padding-left: var(--s4); }
.panel .dyn-tab thead th {
  font-size: 12px; font-weight: 500;
  color: var(--ink-3); padding-top: 0;
}
.mtab .mv { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }

/* an overview block: one sentence on what it counts and why it matters, then the list; a
   sub-head only where one panel holds two blocks */
.step { padding: var(--s5) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step-h { margin: 0 0 var(--s1); font-size: 14px; font-weight: 600; line-height: 20px; }
.step-lead { margin: 0 0 var(--s4); color: var(--ink-2); line-height: 20px; max-width: 80ch; }
/* the buyers' own questions, quoted on quiet lines */
.qlines { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-2); }
.qlines li { padding: var(--s1) 0 var(--s1) var(--s3); line-height: 20px; color: var(--ink); }
.qlines li[hidden] { display: none; }
.qlines q { quotes: "\201C" "\201D"; }
:lang(ru) .qlines q, :lang(es) .qlines q { quotes: "\00AB" "\00BB"; }
/* the control that unfolds the rest of a list, at its end; the ring only on keyboard focus */
.list-more {
  display: inline-flex; align-items: center; margin: var(--s2) 0 0 var(--s3); padding: var(--s1) 0;
  font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.list-more:hover { color: var(--ink); text-decoration-color: currentColor; }
.list-more:focus { outline: none; }
.list-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* two columns on a wide screen: who is named instead and the sources on the left, the
   questions without the brand on the right. A column with nothing to show drops out and
   the other takes the row; stacked below 1200 */
.ov-pair .ov-col > section.panel { margin-top: calc(var(--s7) + var(--head) + var(--s2)); }
.ov-col:not(:has(> section:not([hidden]))) { display: none; }
/* wide: the cards sit two to a row, each as tall as its content; with all three, the two ranked
   lists share the first row and the questions take the full width under them, in two columns */
@media (min-width: 1200px) {
  .ov-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); align-items: start; }
  .ov-pair .ov-col { display: contents; }
  /* app.js sets data-n to the number of cards shown */
  .ov-pair[data-n="1"] section.panel, .ov-pair[data-n="3"] #panel-next { grid-column: 1 / -1; }
  .ov-pair:is([data-n="1"], [data-n="3"]) #panel-next .qlines { columns: 2; column-gap: var(--s6); border-left: 0; }
  .ov-pair:is([data-n="1"], [data-n="3"]) #panel-next .qlines li { break-inside: avoid; border-left: 2px solid var(--line-2); }
}
@media (max-width: 900px) {
  .ov-pair .ov-col > section.panel { margin-top: var(--s6); }
}
/* the sentence above a ranked list keeps the list's width */
.ov-pair .step-lead { max-width: 60ch; margin-bottom: var(--s4); }
/* a short ranked list as one grid: the name, the count right after it in a right-aligned
   column, then a thin bar to scale; the rows share the columns, so the counts line up */
/* a ranked list read as a small table: column heads, then rows on hairlines with the name,
   a thin bar to scale and the figure at the right edge of the card */
.rank-head, .step-ranks .rank {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 1.2fr) 76px;
  align-items: center; column-gap: var(--s4);
}
.rank-head { padding-bottom: var(--s2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.rank-head > :last-child { text-align: right; }
.step-ranks { display: block; }
.step-ranks .rank { padding: var(--s2) 0; border-top: 1px solid var(--line); gap: 0 var(--s4); }
.step-ranks .rank .nm { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.step-ranks .rank .pc { width: auto; white-space: nowrap; font-size: 14px; color: var(--ink); }
.step-ranks .rank .bar { height: 6px; min-width: 0; }
/* a phone: the name and the figure share a line, the bar runs the full width under them */
@media (max-width: 720px) {
  .rank-head { grid-template-columns: minmax(0, 1fr) auto; }
  .rank-head > :nth-child(2) { display: none; }
  .step-ranks .rank { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .step-ranks .rank .nm { grid-column: 1; grid-row: 1; }
  .step-ranks .rank .pc { grid-column: 2; grid-row: 1; }
  .step-ranks .rank .bar { grid-column: 1 / -1; grid-row: 2; }
}
.tile-v.quiet { font-size: 16px; font-weight: 400; color: var(--ink-3); padding: var(--s1) 0; }
/* you against the competitors: one series in ink, yours in the accent and named "you" */
/* one small table: the name, a thin bar to the most named, both counts at the right edge;
   the width is capped so the counts sit next to the names */
.cmp-lead { max-width: 70ch; margin: 0 0 var(--s4); }
.cmp-rank { max-width: 880px; }
.cmp-head, .cmp-line {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 1fr) repeat(2, 136px);
  align-items: center; column-gap: var(--s4);
}
.cmp-head { padding-bottom: var(--s2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cmp-line { padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.cmp-rank .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-line .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-line .bar { height: 6px; background: var(--track); overflow: hidden; }
.cmp-line .bar > i { display: block; height: 100%; background: var(--ink-2); }
.cmp-line .pc { color: var(--ink); }
.cmp-line .mf { color: var(--ink-3); font-size: 13px; }
.cmp-line.you .nm { font-weight: 600; color: var(--accent-ink); }
.cmp-line.you .bar > i { background: var(--accent); }
.cmp-rank .you-tag { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cmp-zero { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--line); max-width: 880px; font-size: 13px; color: var(--ink-3); }
.cmp-rank + .mtab, .cmp-zero + .mtab { margin-top: var(--s5); }
/* a phone: the name and the figures share a line, the bar runs the full width under them */
@media (max-width: 720px) {
  .cmp-head, .cmp-line { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--s2); }
  .cmp-head > :nth-child(2) { display: none; }
  .cmp-line .bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ranked bars */
.rank { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.rank .nm { width: 148px; font-size: 14px; flex: 0 0 auto; }
.rank .bar { flex: 1; height: 8px; background: var(--track); overflow: hidden; min-width: 72px; }
.rank .bar > i { display: block; height: 100%; background: var(--ink-2); }
.rank.you .nm { font-weight: 600; color: var(--accent-ink); }
.rank.you .bar > i { background: var(--accent); }
.rank .pc { width: 56px; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.cats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }

/* a filter bar: every filter of a view in one row that never wraps. Each filter is the
   shared custom select with its name in grey inside the box, the value after it */
.fbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); min-width: 0; }
.fbar[hidden] { display: none; }
.cats > .fbar { flex: 1 1 100%; margin-bottom: 0; }
.fbar-f { display: flex; flex: 0 1 auto; min-width: 0; }
.fbar-f .cs-trigger { font-weight: 600; }
.fbar-k { flex: 0 0 auto; font-size: 13px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.fbar-reset {
  all: unset; flex: 0 0 auto; cursor: pointer; font-size: 13px; color: var(--accent-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.fbar-reset[hidden] { display: none; }
.fbar-reset:hover { text-decoration-color: currentColor; }
.fbar-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fbar-end { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

/* the key to the marks */
/* the question list in one sentence, above its filter */
.q-lead { margin: 0 0 var(--s4); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); max-width: 80ch; }
.q-lead[hidden] { display: none; }
.qlegend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s4); font-size: 13px; color: var(--ink-2); }
.qlegend[hidden] { display: none; }
.lg { display: inline-flex; align-items: center; gap: var(--s2); }
.lg b { font-weight: 600; color: var(--ink); }
.lg .qmk { width: 20px; height: 20px; }

/* the question table: a column per model, the same columns in every row, so a model
   sits in one place all the way down and a long question wraps inside its own column */
.view[data-view="prompts"] { --models: 4; --cell-w: 96px; --sum-w: 172px; }
.qgrid {
  display: grid; align-items: center; column-gap: var(--s2);
  grid-template-columns: minmax(0, 1fr) repeat(var(--models), var(--cell-w)) var(--sum-w);
}
.one-model { --sum-w: 232px; }
.one-model .qgrid { grid-template-columns: minmax(0, 1fr) var(--cell-w) var(--sum-w); }
.one-answer .qgrid { grid-template-columns: minmax(0, 1fr) var(--cell-w); }
.one-answer .sum, .one-answer .qh-sum { display: none; }
.qhead {
  padding: 0 var(--s5) var(--s2); border: 1px solid transparent; border-width: 0 1px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.qhead .qh-en { text-align: center; }
.qhead .qh-sum { padding-left: var(--s3); }
.view[data-view="prompts"]:not(:has(#feed > .item)) .qhead { display: none; }

.feed { display: flex; flex-direction: column; gap: var(--s3); }
.item { background: var(--surface); border: 1px solid var(--edge); border-radius: 0; overflow: hidden;
  transition: background-color 600ms var(--ease), border-color 600ms var(--ease), box-shadow 600ms var(--ease); }
/* the question a jump landed on (app.js flashCard): a light red wash and a red edge, which
   fade back when the class goes after two seconds */
/* a jump lands the question below the sticky top bar, not under it */
.item { scroll-margin-top: 124px; }
.item.flash { background: var(--accent-wash); border-color: var(--accent-edge); box-shadow: inset 3px 0 0 var(--accent-mark); transition: none; }
.item.flash .row:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .item { transition: none; } }
/* a restored report arrives all at once; the entrance belongs to a live run */
.replaying .item { animation: none; }
.item .row { padding: var(--s3) var(--s5); min-height: 64px; cursor: pointer; transition: background-color .14s ease; }
.item .row:hover { background: var(--surface-2); }
.item .q { font-size: 14px; font-weight: 500; line-height: 1.4; padding-right: var(--s3); }

/* one model's result: a mark and a word, the word carrying the meaning */
.cell { display: flex; flex-direction: column; align-items: center; gap: var(--s1); font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink-3); }
.cell-en { display: none; }
.cell.shortlist .cell-w { color: var(--shortlist); font-weight: 600; }
.cell.cited .cell-w { color: var(--ink); font-weight: 600; }
.cell.mentioned .cell-w { color: var(--ink); font-weight: 600; }
.qmk { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r1); }
.qmk .ic { width: 14px; height: 14px; }
.qmk.shortlist { background: var(--shortlist-wash); color: var(--shortlist); }
/* a link or a mention says nothing about the tone of the answer, so neither is painted
   as good or bad; the icon and the word tell them apart */
.qmk.cited, .qmk.mentioned { background: var(--surface-2); color: var(--ink); }
.qmk.absent, .qmk.unlinked { background: var(--absent-wash); color: var(--absent); }
.qmk.missing { border: 1px dashed var(--line-2); }
.qmk.asking { background: var(--surface-2); }

/* the row in words, across every model */
.sum { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s3); border-left: 1px solid var(--line); font-size: 13px; line-height: 1.3; }
.sum-main { font-weight: 600; color: var(--ink); }
.sum.absent .sum-main, .sum.unlinked .sum-main, .sum.missing .sum-main { font-weight: 500; color: var(--ink-3); }
.sum-sub { font-size: 12px; color: var(--ink-2); }

@media (max-width: 720px) {
  .qhead { display: none; }
  .item .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s2); }
  .item .q, .item .sum { grid-column: 1 / -1; }
  .item .sum { border-left: 0; padding-left: 0; }
  .cell { flex-direction: row; text-align: left; }
  .cell-en { display: inline; font-weight: 600; color: var(--ink); }
  /* one model: its name on every row compares it with nothing */
  .one-model .cell-en { display: none; }
}

.pulse { width: 6px; height: 6px; background: var(--ink-3); animation: pl 1s infinite ease-in-out; }
@keyframes pl { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.answers { border-top: 1px solid var(--line); padding: 0 var(--s5) var(--s4); background: var(--surface-2); display: none; }
.answers.on { display: block; }
.ans { margin-top: var(--s3); }
.ans .hd { display: flex; align-items: center; gap: var(--s2); font-size: 13px; margin-bottom: var(--s1); }
.ans .hd .en { font-weight: 600; font-size: 13px; }
.ans .hd .st { color: var(--ink-2); }
.ans .hd .qmk { width: 20px; height: 20px; }
.ans .body {
  font-size: 13px; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 0;
  padding: var(--s3); white-space: pre-wrap;
}
/* a long answer opens folded and unfolds in place, never inside a scroll box */
.ans.long:not(.open) .body {
  max-height: 168px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.ans .hd .ans-meta { margin-left: auto; color: var(--ink-3); font-size: 12px; text-align: right; }
.ans-more {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--accent-ink);
  background: none; border: 0; padding: var(--s2) 0 0; cursor: pointer;
}
.ans-more:hover { text-decoration: underline; }
.ans-more:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r1); }
.ans-cut { margin: var(--s2) 0 0; font-size: 12px; color: var(--ink-3); }
.ans .body.empty { color: var(--ink-3); }
.ans .note-line { font-size: 13px; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r1); padding: var(--s2) var(--s3); margin-bottom: var(--s2); }

/* ── dialog ──────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 100; background: var(--scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh var(--s5) var(--s5); overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--edge); border-radius: 0; width: 100%; max-width: 520px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-x { font: inherit; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: var(--s1); display: inline-flex; transition: color .14s ease, background-color .14s ease; }
.modal-x:hover { color: var(--ink); background: var(--surface-3); }

.fld { display: block; margin-bottom: var(--s4); }
.fld[hidden] { display: none; }
.fl-k { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: var(--s2); }
.fl-opt { color: var(--ink-3); font-size: 12px; }
.fl-hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: var(--s2); }
.fld input, .fld textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 0; padding: var(--s2) var(--s3);
  transition: border-color .14s ease;
}
.fld textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); }
.fld input:hover, .fld textarea:hover { border-color: var(--ink-3); }
.fld input:focus, .fld textarea:focus { border-color: var(--ink-2); }
.fld .cs { width: 100%; }
/* a form select is never narrower than its longest option: the row wraps instead of cutting a value */
.fld .cs-box { min-width: max-content; }
.rowlist { display: flex; flex-direction: column; gap: var(--s2); }
.rl-row { display: flex; align-items: center; gap: var(--s2); }
.rl-row input, .rl-row textarea { flex: 1; min-width: 0; }
.rowlist-long .rl-row textarea { resize: none; overflow: hidden; min-height: 0; line-height: 1.45; }
.rowlist-long { counter-reset: q; }
.rowlist-long .rl-row { align-items: flex-start; }
.rowlist-long .rl-row::before { counter-increment: q; content: counter(q); flex: 0 0 2ch; padding-top: var(--s3);
  text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rowlist-long .rl-x { margin-top: var(--s1); }
.rowlist[hidden], .rowlist-add[hidden], .q-show[hidden] { display: none; }
.q-fold { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.q-show { font: inherit; font-size: 13px; font-weight: 500; color: var(--accent-ink); background: none; border: 0;
  padding: 0; cursor: pointer; }
.q-show:hover { text-decoration: underline; }
.rl-x {
  flex: 0 0 auto; display: inline-flex; padding: var(--s2); border: 0; border-radius: var(--r1);
  background: none; color: var(--ink-3); cursor: pointer; transition: color .14s ease, background-color .14s ease;
}
.rl-x:hover { color: var(--ink); background: var(--surface-3); }
.rowlist-add {
  display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; padding: var(--s2) 0; cursor: pointer;
}
.rowlist-add:hover { color: var(--accent-ink); }
.rowlist-add .ic { color: var(--ink-3); }
.fld-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.fld-row .fld { flex: 1 1 auto; min-width: 136px; }
/* two fields that belong together share a row on a wide dialog and stack on a narrow one */
.fld-row.fld-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--s4); align-items: start; }
.fld-row.fld-pair .fld { min-width: 0; }

/* the campaign form: wide enough for a question to read whole, cut into three groups.
   The card is a column no taller than the screen: the title and the save row stay put
   and only the fields between them scroll */
#add-modal { align-items: center; padding: var(--s6); overflow: hidden; }
#add-modal .modal-card {
  max-width: 760px; display: flex; flex-direction: column;
  max-height: calc(100vh - 2 * var(--s6)); max-height: calc(100dvh - 2 * var(--s6));
}
#add-modal .modal-head { flex: none; }
#add-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
#add-form .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s5) var(--s6) var(--s6); }
.fl-sec { margin: var(--s6) 0 var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 600; line-height: 24px; color: var(--ink); }
#add-form .modal-body > .fl-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#add-form .modal-body > :last-child { margin-bottom: 0; }
#add-form .modal-foot { flex: none; background: var(--surface); border-top: 1px solid var(--line); padding: var(--s4) var(--s6); }
/* a phone gets the form as a full-height sheet */
@media (max-width: 720px) {
  #add-modal { padding: 0; }
  #add-modal .modal-card { height: 100vh; height: 100dvh; max-height: none; border: 0; }
  #add-modal .modal-head, #add-form .modal-body, #add-form .modal-foot { padding-left: var(--s4); padding-right: var(--s4); }
}

.modal-err { background: var(--bad-wash); border: 1px solid var(--bad-edge); color: var(--bad-ink); border-radius: var(--r1); padding: var(--s3); font-size: 13px; margin-bottom: var(--s4); }
.modal-err[hidden] { display: none; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s3); }

/* ── responsive & motion ─────────────────────────────────── */

@media (max-width: 900px) {
  /* the page scrolls as one document, so the rail scrolls away and the report gets the screen */
  .app { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .main { overflow: visible; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--s2) var(--s4); padding: var(--s3) var(--s4) 0; overflow: visible; }
  .rail-brand { display: flex; align-items: baseline; gap: var(--s3); padding: 0; }
  .rail-logo { width: 112px; }
  .rail-sub { margin: 0; }
  /* the sections as one row that scrolls sideways, the open one underlined in the brand red */
  .rail-nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s2); scrollbar-width: none; }
  .rail-nav::-webkit-scrollbar { display: none; }
  /* the row clips anything outside it, so the focus ring is drawn inside the tab */
  .rail-item:focus-visible { outline-offset: -2px; }
  .rail-item { width: auto; white-space: nowrap; gap: var(--s2); padding: var(--s3) var(--s2); font-size: 14px; }
  .rail-item.on { background: none; }
  .rail-item.on::before { top: auto; bottom: 0; left: var(--s2); right: var(--s2); width: auto; height: 2px; margin: 0; }
  .rail-n { margin-left: var(--s1); }
  /* the account: the initial and the chevron beside the logo; the menu opens downward */
  .rail-user { order: 2; margin: 0; padding: 0; border: 0; }
  .ru-trigger { padding: var(--s1); gap: var(--s2); }
  .ru-mark { width: 28px; height: 28px; font-size: 13px; }
  .ru-txt { display: none; }
  .ru-chev { transform: none; }
  .ru-trigger[aria-expanded="true"] .ru-chev { transform: rotate(180deg); }
  .ru-menu { top: calc(100% + var(--s2)); bottom: auto; left: auto; right: 0; width: 248px; }
  /* the methodology link sits beside the account, pushed to the right of the logo */
  .rail > .t6-rail-meth { order: 1; margin: 0 0 0 auto; padding: var(--s1) 0; font-size: 13px; }
  .rail > .ru-lang { order: 2; margin: 0; padding: 0; border: 0; }
  .rail > .ru-lang label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail > .ru-lang .cs-trigger { height: 32px; }
  .topbar, .view { padding-left: var(--s4); padding-right: var(--s4); }
  .rs-k { flex-basis: 100%; }
  .rs-row { flex-wrap: wrap; row-gap: var(--s2); }
  .runset { right: var(--s4); width: min(520px, calc(100% - 2 * var(--s4))); }
  .rank .nm { width: 112px; }
  /* a narrow card can wrap its heading: put it back inside the card */
  .panel { margin-top: var(--s6); }
  .view > section.panel:first-of-type, .view > div > section.panel:first-of-type { margin-top: 0; }
  .view > .camp-suggest:not([hidden]) + section.panel { margin-top: var(--s4); }
  .panel > h2.panel-h { position: static; margin: 0 0 var(--s3); }
}

/* a phone: the top bar stops being sticky and stays one row, the picker giving up width
   to Share; only the run controls of a live campaign go to a second row. The cards get a
   tighter pad */
@media (max-width: 720px) {
  .rail-sub { display: none; }
  .topbar { position: static; padding-top: var(--s3); }
  .topbar-row { flex-wrap: wrap; row-gap: var(--s3); }
  /* the run settings rise from the bottom as a sheet the width of the screen */
  .runset { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 90; width: auto; }
  .runset-body { max-height: 80dvh; border-width: 1px 0 0; padding-bottom: var(--s4); }
  .cs.dd { flex: 1 1 0; min-width: 160px; max-width: none; }
  /* the question language takes the second row, under the picker and Share */
  .ov-lead { font-size: 20px; line-height: 28px; }
  .ov-all-body { padding: var(--s4); }
  .view { padding-top: var(--s5); padding-bottom: var(--s6); }
  .panel, .tile { padding: var(--s4); }
  /* a wide table scrolls sideways inside its card instead of running past its edge */
  .panel { overflow-x: auto; }
  .tiles { gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* how it was measured */
.method-card { max-width: 600px; }
.method-body { padding: var(--s5) var(--s6) var(--s6); }
.method-sec + .method-sec { margin-top: var(--s5); }
.method-sec h3 { margin: 0 0 var(--s2); font-size: 14px; font-weight: 600; color: var(--ink); }
.method-sec p, .method-sec li { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.method-sec p + p { margin-top: var(--s2); }
.method-sec ul { margin: 0; padding-left: var(--s5); }
.method-sec li + li { margin-top: var(--s1); }

/* ── t4: judge verdict, rendered answer markdown ── */
.ans .judge-line { font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--shortlist); padding: 2px var(--s3); margin-bottom: var(--s2); }
/* how an answer was read: label and reading in two columns, no coloured rules */
.ans .why { display: grid; gap: var(--s1); margin: 0 0 var(--s3); font-size: 13px; }
.ans .why > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s3); }
.ans .why dt { color: var(--ink-3); }
.ans .why dd { margin: 0; color: var(--ink-2); }
.ans .why dd b { color: var(--ink); font-weight: 600; }
.ans .why .off dd { color: var(--ink-3); }
.ans .why q { quotes: "\201C" "\201D"; }
.ans .judge-line.off { border-left-color: var(--line); color: var(--ink-3); }
.ans .body.md { white-space: normal; line-height: 1.5; }
.ans .body.md > :first-child { margin-top: 0; }
.ans .body.md > :last-child { margin-bottom: 0; }
.ans .body.md p, .ans .body.md ul, .ans .body.md ol, .ans .body.md table { margin: 0 0 var(--s2); }
.ans .body.md ul, .ans .body.md ol { padding-left: 20px; }
.ans .body.md li { margin: 2px 0; }
.ans .body.md h3, .ans .body.md h4, .ans .body.md h5, .ans .body.md h6 { font-size: 13px; font-weight: 600; color: var(--ink); margin: var(--s3) 0 var(--s1); }
.ans .body.md strong { color: var(--ink); font-weight: 600; }
.ans .body.md a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ans .body.md code { font-size: 12px; background: var(--surface-3); padding: 0 3px; }
.ans .body.md hr { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; }
.ans .body.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.ans .body.md th, .ans .body.md td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.ans .body.md th { font-weight: 600; color: var(--ink); }

/* for a capture in several languages, the question language, in the overview card beside
   the figures it changes; its label small and quiet. The pressed segment is a light fill
   with an ink edge, not a solid block that outranks the figures */
.tb-qlang { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.tb-qlang[hidden] { display: none; }
.seg { display: inline-flex; }
.seg button {
  font: inherit; font-size: 14px; font-weight: 500; min-width: 40px; height: 32px; padding: 0 var(--s3);
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.seg button + button { margin-left: -1px; }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: var(--surface-3); border-color: var(--ink); position: relative; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 1; }

/* the login card is this panel's card too: one hairline, no lift */
.login-card { border: 1px solid var(--edge); }

/* t13: metrics split into general / branded questions, missing answers, language sets */
.mtab.cols th { text-align: right; font-size: 12px; font-weight: 500; color: var(--ink-3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: bottom; }
.mtab.cols th:first-child { text-align: left; padding-left: 0; }
.mtab.cols th:last-child { padding-right: 0; }
/* a group cell over several columns (Comparison: general questions, by model) */
.mtab.cols th.grp { text-align: center; padding-bottom: var(--s1); }
.mtab.cols thead tr + tr th:first-child { text-align: right; padding-left: var(--s3); }
.mtab.cols td.mv,.mtab.cols td.mf { width: auto; }
.mtab.cols td.mw { font-size: 12px; color: var(--ink-3); }
.mtab.cols tr.you td { font-weight: 600; }
.mh { font-size: 14px; font-weight: 600; margin: var(--s6) 0 var(--s2); }
.panel-h .info { display: inline-flex; color: var(--ink-3); text-decoration: none; }
.panel-h .info:hover { color: var(--ink); }
.note.mnote { margin: 0 0 var(--s3); font-size: 12px; color: var(--ink-3); }

/* the expanded question: where it was asked from, then one block per model with its repeats */
.answers .asked { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; font-size: 12px; color: var(--ink-3); }
.answers .asked b { color: var(--ink-2); font-weight: 600; }
/* one row per model: mark, model, verdict or repeat tabs, sources, the unfold control;
   the answer itself stays folded under its row until asked for */
.ans-all {
  display: block; margin: var(--s3) 0 0 auto; padding: 0; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.ans-all[hidden] { display: none; }
/* opened from another view, a row lands below the sticky top bar, not under it */
.ans-grp { border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.ans-all + .ans-grp { margin-top: var(--s2); border-top: 1px solid var(--line); }
.ans-grp > .hd .ans-n:empty { display: none; }
.ans-grp > .hd {
  display: grid; grid-template-columns: 20px 112px minmax(0, 1fr) 128px auto; align-items: center;
  column-gap: var(--s3); min-height: 44px; padding: var(--s1) 0; font-size: 13px;
}
.ans-grp > .hd .hd-mark { grid-column: 1; display: flex; }
.ans-grp > .hd .en { grid-column: 2; font-weight: 600; color: var(--ink); }
.ans-grp > .hd .st, .ans-grp > .hd .reps { grid-column: 3; }
.ans-grp > .hd .st { color: var(--ink-2); }
.ans-grp > .hd .qmk { width: 20px; height: 20px; }
.ans-grp > .hd .ans-n { grid-column: 4; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.ans-tog {
  grid-column: 5; justify-self: end; padding: var(--s1) 0; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.ans-tog:hover, .ans-all:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.ans-tog:focus-visible, .ans-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ans-grp:not(.open) > :not(.hd) { display: none; }
.ans-grp > .ans-meta { margin: 0 0 var(--s2) calc(20px + var(--s3)); color: var(--ink-3); font-size: 12px; }
.ans-grp .ans { margin: 0 0 var(--s4) calc(20px + var(--s3)); }
.ans-grp.closing > :not(.hd) { animation: anim-out var(--t-fast) var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) { .ans-grp.closing > :not(.hd) { animation: none; } }
.reps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.reps-k { margin-right: var(--s1); color: var(--ink-3); font-size: 12px; }
.rep {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--s2) 0 var(--s1); font: inherit; font-size: 12px;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
}
.rep .qmk { width: 18px; height: 18px; }
.rep .rep-n { font-weight: 500; color: var(--ink); }
.rep[aria-pressed="true"] { background: var(--surface-3); border-color: var(--ink); }
.rep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .ans-grp > .hd { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: var(--s1); padding: var(--s2) 0; }
  .ans-grp > .hd .st, .ans-grp > .hd .reps, .ans-grp > .hd .ans-n { grid-column: 2 / -1; text-align: left; }
  .ans-tog { grid-column: 3; grid-row: 1; }
  /* repeats carry their own marks, so the row starts at the edge and the tabs get its width */
  .ans-grp.many > .hd .hd-mark { display: none; }
  .ans-grp.many > .hd .en { grid-column: 1 / 3; }
  .ans-grp.many > .hd .reps, .ans-grp.many > .hd .ans-n { grid-column: 1 / -1; }
  .ans-grp > .ans-meta, .ans-grp .ans { margin-left: 0; }
}
.ans-src { margin-top: var(--s2); font-size: 12px; }
.ans-src summary { cursor: pointer; color: var(--ink-2); }
.ans-src .src-list { margin: var(--s1) 0 0; padding-left: 28px; }
.ans-src .src-list li { margin: 1px 0; }
.ans-src .src-none { color: var(--ink-3); font-style: italic; }
.ans-src .src-more { margin: var(--s2) 0 0; color: var(--ink-2); font-weight: 600; }
.ans-src .src-list a { color: var(--ink-2); display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans .body.md a.fn { text-decoration: none; color: var(--accent-ink); font-size: 11px; vertical-align: super; line-height: 0; }
.ans .body.md a.fn:hover { text-decoration: underline; }