/* =============================================================================
   IBM Plex Sans — self-hosted, three weights, no third-party request.

   Subset to Latin (incl. Latin Extended-A for Slovene and Czech), the punctuation,
   arrows and marks the interface uses, and nothing else: 24–25 kB per face. Plex's
   figures are tabular by construction — every digit advances 600/1000 em — so the
   numeric columns align on the glyph metrics, not on a font feature.

   The single-storey g is baked in rather than switched on at runtime: the cmap maps
   U+0067 and the four accented g's straight to Plex's .alt01 outlines, so the glyph
   cannot depend on a font feature reaching the element. No stylistic set survives the
   subset. Because that modifies the font, the OFL's reserved name is dropped and the
   family is declared as "AM Benchmark Sans"; the outlines are IBM Plex Sans.
   Licence: SIL Open Font License 1.1, fonts/LICENSE.txt.
   ========================================================================== */

@font-face {
  font-family: "AM Benchmark Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AMBenchmarkSans-Regular.3a24ffd5.woff2") format("woff2");
}
@font-face {
  font-family: "AM Benchmark Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/AMBenchmarkSans-Medium.b4832305.woff2") format("woff2");
}
@font-face {
  font-family: "AM Benchmark Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/AMBenchmarkSans-SemiBold.e5dc06f9.woff2") format("woff2");
}

/* =============================================================================
   Multilingual tagging and parsing benchmark — interface styles

   One system for both surfaces. The overview compares systems; the analysis page
   investigates one run. They share the table, the controls, the type scale and
   the palette so the second never reads as a different application.

   Character: precise, calm, academic. Content is the interface — rules and
   whitespace do the structural work, not cards, shadows or colour fills.
   ========================================================================== */

:root {
  /* ---- colour -------------------------------------------------------------
     One accent, a desaturated ink blue, reserved for meaning: selection, links,
     focus, the headline metric. Everything else is neutral. Contrast against the
     page is 16.4:1 for text, 5.1:1 for muted text and 6.7:1 for the accent; white
     on the accent fill is 7.2:1. */
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-sub: #f2f5f7;
  --text: #17191d;
  --muted: #626a73;
  /* Decoration only — separator dots and the like. Never text: 3.0:1 on the page. */
  --faint: #89919a;
  --border: #d8dde2;
  --border-strong: #bcc4cc;
  --rule-faint: #eaedf0;
  --accent: #315b7d;
  --accent-strong: #24465f;
  --accent-soft: #eaf1f6;
  --focus: #315b7d;
  --flag: #8a5a17;
  --flag-soft: #fbf3e4;
  --mark: #f6e7b8;

  /* ---- type ---------------------------------------------------------------
     Two faces, three roles, and the split is the point: the interface is set in a
     humanist sans, the material it presents is not. A relation name, a tagset label
     and a corpus sentence are objects of study; setting them in the page's own voice
     makes them read as prose about the data rather than as the data.

     --font-ui    IBM Plex Sans (declared "AM Benchmark Sans", see above), served from
                  this directory. Nothing is fetched from
                  a third party, so the page loads identically offline and leaks no
                  request. Three weights: Regular for text, Medium for headings,
                  labels and controls, SemiBold for the best value in a column.
     --font-data  The reader's own monospace. Tagset identifiers, dependency
                  relations, error pairs and corpus sentences — the technical
                  register the interface quotes rather than speaks.
     --font-mono  The same stack, named separately because the reason differs: a
                  checksum or a path needs character-by-character comparison, not a
                  change of register. One face fills both roles; there is no third. */
  --font-ui: "AM Benchmark Sans", "Segoe UI", Arial, sans-serif;
  --font-data: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  --font-mono: var(--font-data);

  /* One recipe for every small uppercase label — LANGUAGE, TAGGING, UPOS, DETAILED
     ANALYSIS. Plex's capitals are already open, so the tracking stays modest: past
     about .06em the words stop reading as words. */
  --label-size: 11.5px;
  --label-track: .05em;

  /* ---- spacing scale ---------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  --radius: 4px;
  --radius-lg: 6px;

  --page-max: 1320px;
  --measure: 66ch;
  /* Long explanatory and provenance prose can use a generous measure without
     becoming difficult to scan on a very wide display. Short interface copy is
     allowed to use its full content field instead. */
  --measure-wide: 108ch;

  /* ---- table grid ---------------------------------------------------------
     One horizontal cell padding for every table on both pages. The table field
     is pulled out by exactly this much, so a cell's *text* — header and body
     alike — lands on the page's text grid rather than 12px inside a box. */
  --cell-x: 12px;
  --cell-y: 8px;
  --head-y: 10px;
  --bar-w: 68px;
  --bar-gap: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.52;
  color: var(--text);
  background: var(--bg);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s8) var(--s10) var(--s16);
  /* No -webkit-font-smoothing override. Plex Regular already sets a lighter line
     than the system faces this page used to fall back to; thinning it further on
     macOS would take the body copy below comfortable. */
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- shared notices ------------------------------------------------ */

.fatal,
.noscript-note {
  max-width: var(--measure);
  margin: 0 0 var(--s6);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
}

.notice {
  max-width: var(--measure);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--flag-soft);
  border: 1px solid #eadfc4;
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text);
}
.notice.quiet {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

/* =============================================================================
   OVERVIEW
   ========================================================================== */

.masthead { margin-bottom: var(--s8); }

/* Plex Medium carries a title at this size without help: 600 here reads as an
   announcement rather than a heading, and the page is not announcing anything. */
.masthead h1 {
  font-size: 34px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -.012em;
}

.lede {
  margin-top: var(--s3);
  max-width: none;
  font-size: 16px;
  line-height: 25px;
  color: var(--muted);
}

/* ---------- context controls ---------------------------------------------
   Lightweight filters, not form fields: no field boxes, no shadows, and the
   label sits above its control as quiet metadata. */

.context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6) var(--s8);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--border);
}

.field { display: flex; flex-direction: column; gap: var(--s2); }

.field-label {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.seg-btn {
  appearance: none;
  min-height: 38px;
  padding: var(--s2) var(--s4);
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  font: inherit;
  font-size: 14px;
  /* Regular in both states. Weight on a selected control changed its own width,
     nudging every button after it along the row — and the fill already says which
     one is on. */
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--surface-sub); }

.seg-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.seg-btn[aria-pressed="true"]:hover { background: var(--accent-strong); }

.seg-btn[aria-disabled="true"] {
  cursor: default;
  color: var(--muted);
}
.seg-btn[aria-disabled="true"][aria-pressed="true"] { color: #fff; }

.seg-btn:focus-visible { outline-offset: -3px; }
/* The ring is inset, so on the selected button it would be accent on accent —
   invisible. Light on the fill instead. */
.seg-btn[aria-pressed="true"]:focus-visible { outline-color: #fff; }

.context select {
  min-height: 38px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--text);
}

/* ---------- results heading ---------------------------------------------- */

.results-head { margin: var(--s8) 0 var(--s4); }

.results-head h2 {
  font-size: 23px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -.008em;
}

.results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin-top: var(--s1);
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.results-note {
  margin-top: var(--s1);
  max-width: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

/* ---------- empty state --------------------------------------------------- */

.empty {
  max-width: 520px;
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.empty-title { font-size: 17px; font-weight: 500; }
.empty-hint { margin-top: var(--s2); font-size: 14px; color: var(--muted); }

/* =============================================================================
   TABLES — one treatment, both pages
   ========================================================================== */

/* One edge for everything outside a table. The table field starts and ends on the
   same line as the headings, notes, counts and toolbars around it; the cells keep
   their own internal padding, so the column text sits one cell-padding inside that
   line. No outer border and no radius: a box would make a results table read as a
   form control, and rules alone are how a table is typeset. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* A metric table is wider than a phone. Without paint containment Chromium
     still counts that width towards the root scroll area, so the whole page pans
     sideways even though the wrap clips it correctly. The table scrolls; the page
     does not. */
  contain: paint;
  background: var(--surface);
}

/* Tighter than the page's leading: a table row is one line of data, and Plex's
   compact x-height keeps 14/19.6 open enough to scan down a column. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;
}

thead th {
  padding: var(--head-y) var(--cell-x);
  background: var(--surface);
  text-align: left;
  font-size: 13px;
  line-height: 17.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  vertical-align: bottom;
}

/* Opening and closing rules, so the table is bounded without being boxed. */
thead tr:first-child th { border-top: 1px solid var(--border); }
thead tr:last-child th { border-bottom: 1.5px solid var(--border-strong); }

/* Metric-family row: quiet, small, and never taller than it must be. */
thead tr.groups th {
  padding: var(--s2) var(--cell-x) 0;
  font-size: var(--label-size);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}
thead tr.groups th.grp { text-align: center; }

thead tr.cols th { padding-top: 6px; }
thead th.num, th.right { text-align: right; }

/* A metric column that carries a proportion bar. Header and body reserve the same
   trailing space and the bar is positioned into it, so the column label and its
   numbers right-align on one edge by construction rather than by arithmetic. */
th.has-bar, td.has-bar {
  padding-right: calc(var(--cell-x) + var(--bar-w) + var(--bar-gap));
}
td.has-bar { position: relative; }

/* Metric families read as blocks: a gutter, plus a rule two shades lighter than
   the row rules so it separates without drawing a grid. The family label above sits
   over its own compartment. */
th.grp-start, td.grp-start {
  padding-left: 17px;
  border-left: 1px solid var(--rule-faint);
}
thead tr.groups th.grp { border-left: 1px solid var(--rule-faint); }

/* The headline parsing metric: an accent on the header only. */
thead th.primary { color: var(--accent); }

.sortable { position: relative; cursor: pointer; user-select: none; }
.sortable:hover { color: var(--accent); }
/* Inset, so a focused column header is ringed inside its own cell instead of
   spilling a rounded box over the rule and the row beneath it. */
th.sortable:focus-visible { outline-offset: -2px; border-radius: 0; }

/* A dotted rule under an abbreviation is the quiet, conventional sign that an
   explanation is available; the explanation itself appears on pointer hover and on
   keyboard focus, and is announced through aria-describedby. */
.col-label.has-tip {
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sortable:hover .col-label.has-tip,
.sortable:focus-visible .col-label.has-tip { text-decoration-color: var(--accent); }

.col-tip {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  right: 0;
  width: max-content;
  max-width: 210px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: var(--text);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 17.5px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease;
}
.sortable:hover .col-tip,
.sortable:focus-visible .col-tip,
.sortable:focus-within .col-tip { opacity: 1; visibility: visible; }
/* The indicator holds the direction arrow and, once a column is sorted, the clear
   control. Its width is reserved at all times so activating a sort never re-flows
   the header row, and on a right-aligned column it leads the label so the label
   keeps the numbers' edge. */
.sort-ind {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 11px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  vertical-align: baseline;
}
th.num .sort-ind, th.right .sort-ind { margin-right: 5px; }
th:not(.num):not(.right) .sort-ind { margin-left: 5px; justify-content: flex-start; }

.sort-arrow { font-size: 11px; }

/* Current sort, stated in words beside the row count, with the control that undoes
   it. Clearing never hides inside a header cell. */
.sort-status {
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.results-meta .sort-status::before,
.count-meta .sort-status::before { content: "· "; color: var(--faint); }

tbody td, tbody th {
  padding: var(--cell-y) var(--cell-x);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Plex's own figures are tabular and lining already; the declaration is for the
   fallback faces, so a reader without the web font still gets aligned columns. */
td.num, th.num, td.right, th.right {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

td.no-data-cell {
  color: var(--muted);
  font-style: italic;
}

/* ---------- comparison table --------------------------------------------- */

#comparison { min-width: 860px; }
#comparison col.c-model { width: 132px; }
#comparison col.c-train { width: 150px; }
#comparison col.c-metric { width: auto; }
#comparison col.c-action { width: 104px; }

#comparison th.model {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
  background: var(--surface);
  white-space: nowrap;
}

#comparison td.train {
  color: var(--muted);
  white-space: nowrap;
}

#comparison td.primary { color: var(--text); }

/* Best in column: weight alone. A tint on as many as seven scattered cells reads
   as a heatmap, which would imply a scale the data does not have. Assistive
   technology gets the same fact as text, so nothing depends on seeing the weight. */
#comparison td.best { font-weight: 600; }

/* One stronger rule between systems rather than two adjacent ones: the group
   above gives up its closing rule so the boundary reads as a single line. */
.system-group:not(:last-child) > tr:last-child > * { padding-bottom: 15px; border-bottom: 0; }
.system-group + .system-group > tr:first-child > * {
  padding-top: 15px;
  border-top: 1.5px solid var(--border-strong);
}

#comparison tbody tr.actionable td { cursor: pointer; }
#comparison tbody tr.actionable:hover td { background: var(--surface-sub); }

.flag { color: var(--flag); }

td.c-action { text-align: right; }

.analyse {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.analyse .arrow { transition: transform .12s ease; }
tr:hover .analyse { text-decoration: underline; }
tr:hover .analyse .arrow { transform: translateX(2px); }

/* ---------- footer -------------------------------------------------------- */

/* The rule spans the page grid; the prose inside keeps a readable measure. A rule
   that stopped at the text's own width read as truncated rather than deliberate. */
.colophon {
  margin-top: var(--s12);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--muted);
}
.colophon p { max-width: var(--measure-wide); }
.colophon .meta {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

/* =============================================================================
   ANALYSIS PAGE
   ========================================================================== */

/* A report measure, not a comparison measure. At the overview's width a
   two-column error table strands "37" some 900px from "obl → nmod"; here the
   columns stay within one eye span. */
[data-ui="analysis"] { max-width: 900px; }

.crumb { margin-bottom: var(--s6); }

.back-link {
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.page-head { padding-bottom: var(--s2); }

.eyebrow {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.page-head h1 {
  margin-top: var(--s2);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.012em;
}

/* The run's identity, not a strapline: full text colour so it stays the second
   thing read, but Regular and near body size so it does not compete with the
   title above it. */
.page-head .subtitle {
  margin-top: 2px;
  font-size: 15.5px;
  line-height: 23px;
  color: var(--text);
}

.run-meta {
  margin-top: var(--s3);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- summary metrics ----------------------------------------------
   Five columns divided by rules, not five cards. */

.overview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: var(--s6) 0 var(--s8);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.metric-box { padding: var(--s4) var(--s4) var(--s4) 0; border-right: 1px solid var(--border); }
.metric-box:last-child { border-right: 0; }
.metric-box:not(:first-child) { padding-left: var(--s4); }

.metric-box .label {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}
.metric-box .val {
  margin-top: 6px;
  font-size: 26px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.006em;
  font-variant-numeric: tabular-nums lining-nums;
}
.metric-box .sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16.5px;
  color: var(--muted);
}

.metric-box.primary .val { color: var(--accent); }

/* ---------- in-page navigation --------------------------------------------
   A row of subsection tabs, not a row of links. One rule under the whole row, which
   the current tab's own rule sits on; the labels stay charcoal so the row does not
   read as five links competing with the headings below it.

   The items carry no horizontal padding, so the first label's left edge lands on the
   same line as the headings, notes and table field — a tab's inset would have pushed
   it off the grid. Their spacing is a fixed column gap rather than padding, so the
   rhythm is the same whether a label is one word or three. */

.section-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 4px;
  margin: var(--s2) 0 var(--s10);
  border-bottom: 1px solid var(--rule-faint);
}

.section-tab {
  /* The 2px rule is reserved on every tab and only coloured on the current one, so
     becoming current never moves anything. The negative margin drops it onto the
     row's own rule instead of stacking below it. */
  appearance: none;
  background: transparent;
  border: 0;
  padding-bottom: 9px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.section-tab:hover {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}
.section-tab:focus-visible { outline-offset: 3px; }

.section-tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Reproducibility is the technical appendix, not a fifth view of the results, so a
   wider gap separates it from the four that are. The extra space is trailing margin
   on the tab before it rather than leading margin on Reproducibility itself: when the
   row wraps, a trailing margin disappears at the end of a line, where a leading one
   would indent the wrapped tab off the page's left edge. */
.section-tab[data-panel="all-metrics"] { margin-right: var(--s3); }

/* ---------- headings and notes -------------------------------------------- */

[data-ui="analysis"] h2 {
  margin: var(--s12) 0 var(--s4);
  padding-bottom: var(--s2);
  font-size: 22px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: -.008em;
  border-bottom: 1px solid var(--border);
}

[data-ui="analysis"] h3 {
  margin: var(--s8) 0 var(--s2);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
/* The selected tab supplies the top-level heading. Keep the first item in its panel
   on one consistent baseline whether that item is a subsection title or a note. */
.analysis-panel > :first-child { margin-top: 0; }

.note { font-size: 13px; line-height: 18.5px; color: var(--muted); }
.section-note { max-width: none; margin-bottom: var(--s4); }
/* A caveat or an instruction about the tables below it, so it separates from the
   totals above rather than running on from them. */
.examples-availability { max-width: none; margin: var(--s3) 0 var(--s4); }
.error-section .section-note { margin-bottom: var(--s3); }

/* Total, then the three categories that partition it, separated by mid dots. */
.tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s3);
  margin-bottom: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.tally strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.tally .tally-part { font-variant-numeric: tabular-nums lining-nums; }
.tally .tally-part::before { content: "·"; margin-right: var(--s3); color: var(--faint); }

/* ---------- table controls ------------------------------------------------ */

/* One control language for every table: the count and its Show more on the left,
   the filter and exports on the right, on a single line just above the table they
   act on. Nothing that acts on a table sits beside a heading any more. */
.control-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  margin-left: auto;
}

.section-filter { margin: var(--s4) 0 var(--s6); }
.section-filter .filter-field input { width: 300px; max-width: 100%; }

.filter-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}
.filter-field input {
  width: 210px;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: var(--s1) 26px var(--s1) 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.filter-field input::placeholder { color: var(--muted); }
.filter-field input[type="search"]::-webkit-search-cancel-button { display: none; }

.filter-icon {
  position: absolute;
  left: var(--s2);
  width: 11px; height: 11px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
}
.filter-icon::after {
  content: "";
  position: absolute;
  top: 9px; left: 8px;
  width: 5px;
  border-top: 1.5px solid var(--muted);
  transform: rotate(45deg);
}

.filter-clear {
  position: absolute;
  right: var(--s1);
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.filter-clear:hover { background: var(--surface-sub); color: var(--text); }

.action-btns { display: inline-flex; gap: var(--s1); }

.action-btn,
.toggle-btn,
.inline-toggle {
  appearance: none;
  min-height: 34px;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.action-btn:hover,
.toggle-btn:hover,
.inline-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.inline-toggle {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding-left: 0;
  padding-right: 0;
}
.inline-toggle:hover { text-decoration: underline; color: var(--accent-strong); }

/* The toolbar is a section-level element, so it spans the table field exactly: the
   count starts on the field's left edge and the last control ends on its right. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s3);
  min-height: 34px;
}
.count-meta { display: flex; align-items: baseline; gap: var(--s3); }

/* ---------- analysis tables ----------------------------------------------- */

/* CJVT's strongest table qualities, translated into this interface's palette:
   a compact technical register, a single dark header band and white data rows
   divided only by fine horizontal rules. The overview keeps its lighter grouped
   publication header; these rules belong to the analytical tables only. */
[data-ui="analysis"] table {
  --cell-x: 10px;
  --cell-y: 6px;
  --head-y: 7px;
  --bar-w: 60px;
  --bar-gap: 7px;
  font-family: var(--font-data);
  font-size: 12.5px;
  line-height: 18px;
}

[data-ui="analysis"] thead th {
  padding-top: var(--head-y);
  padding-bottom: var(--head-y);
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  vertical-align: middle;
}

[data-ui="analysis"] thead th.primary { color: #fff; }
[data-ui="analysis"] thead .sort-ind,
[data-ui="analysis"] thead .sort-arrow { color: #fff; }
[data-ui="analysis"] thead th.sortable:hover {
  background: var(--accent);
  color: #fff;
}
[data-ui="analysis"] thead th.sortable:focus-visible {
  outline-color: #fff;
  color: #fff;
}

[data-ui="analysis"] tbody td,
[data-ui="analysis"] tbody th {
  padding-top: var(--cell-y);
  padding-bottom: var(--cell-y);
  font-family: var(--font-data);
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 400;
}

/* Relation names, tagset labels and error pairs are quoted material, not the page's
   own words: the whole analysis table now uses the data face at regular weight, so
   labels, counts and scores form one coherent technical register. */
[data-ui="analysis"] tbody th.label,
[data-ui="analysis"] td.label {
  font-weight: 400;
  color: var(--text);
}
[data-ui="analysis"] td.metric-name {
  white-space: nowrap;
}

[data-ui="analysis"] tbody th {
  font-weight: 400;
  text-align: left;
}
[data-ui="analysis"] th.metric-name { font-weight: 400; }

tr.layer-start > * { border-top: 1.5px solid var(--border-strong); }

/* Proportion bar beside an accuracy value: one neutral bar, no colour scale. */
.bar-wrap {
  position: absolute;
  right: var(--cell-x);
  top: 50%;
  transform: translateY(-50%);
  width: var(--bar-w);
  height: 6px;
  border-radius: 1px;
  background: var(--surface-sub);
  overflow: hidden;
}
.bar { display: block; height: 100%; background: var(--border-strong); }

/* Rows that open sentence evidence. The hooked branch belongs to the drill-down,
   not to a table family: it marks both error/confusion rows and category-score rows
   when (and only when) the row can open evidence. It adds no control or tab stop. */
[data-ui="analysis"] tr.clickable-row { cursor: pointer; }
[data-ui="analysis"] tr.clickable-row:hover > *,
[data-ui="analysis"] tr.clickable-row:focus-visible > * { background: var(--surface-sub); }
[data-ui="analysis"] tr.clickable-row:hover td.label { color: var(--accent); }
[data-ui="analysis"] tr.selected-row > * { background: var(--accent-soft); }
[data-ui="analysis"] tr.selected-row td.label { color: var(--accent); }

[data-ui="analysis"] tr.clickable-row td.label {
  position: relative;
  padding-left: 27px;
}
[data-ui="analysis"] tr.clickable-row td.label::before {
  content: "↳";
  position: absolute;
  left: 10px;
  color: var(--faint);
  font-family: var(--font-data);
  font-size: 11px;
}
[data-ui="analysis"] tr.clickable-row:hover td.label::before,
[data-ui="analysis"] tr.clickable-row:focus-visible td.label::before,
[data-ui="analysis"] tr.selected-row td.label::before {
  color: var(--accent);
}

[data-ui="analysis"] tr.no-data-row td { color: var(--muted); font-style: italic; }

.expanded-scroll { max-height: 60vh; overflow-y: auto; }
.expanded-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--accent-strong);
}

.error-section { margin-bottom: var(--s8); }
.bucket-header h3 { margin-top: 0; }

/* "A." indexes the three categories that partition the errors; the words after it
   name one. The letter is structure and takes the accent, the name stays charcoal —
   a heading is not a link. */
.section-marker {
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}

.stat { display: inline-flex; align-items: baseline; gap: var(--s1); }
.stat-value { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.stat-unit { color: var(--muted); }

/* ---------- disclosures --------------------------------------------------- */

/* Inside a disclosure the inset is the box's own padding, and the table inherits
   it, so the summary, the column labels, the data and the closing note all sit on
   one vertical line. */
.disclosure {
  --cell-x: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* The analysis-table rule declares its own compact inset. Restore the disclosure's
   inset on a table nested here so its first and last cell text aligns with the
   summary and closing note instead of sitting 6px outside them. */
[data-ui="analysis"] .disclosure table { --cell-x: 16px; }
.disclosure > summary {
  padding: var(--s3) var(--cell-x);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸"; margin-right: var(--s2); font-size: 11px; }
.disclosure[open] > summary::before { content: "▾"; }
.disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.disclosure > summary:hover { color: var(--accent-strong); }
.disclosure > .note { padding: var(--s3) var(--cell-x); }

.provenance-list {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--s2) var(--s4);
  padding: var(--s4) var(--cell-x);
  font-size: 13px;
  line-height: 19px;
}
.provenance-list dt { color: var(--muted); }
.provenance-list dd { overflow-wrap: anywhere; }
.provenance-list dd.mono { font-family: var(--font-mono); font-size: 11.5px; }

.policy-note {
  padding: 0 var(--cell-x) var(--s4);
  max-width: var(--measure-wide);
}

/* ---------- analysis empty state ------------------------------------------ */

.empty-state {
  max-width: 560px;
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.empty-state h1 { font-size: 19px; font-weight: 500; }
.empty-state p { margin: var(--s2) 0 var(--s4); font-size: 14px; color: var(--muted); }
.empty-state-action {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.empty-state-action:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* A footer disclosure carries no box of its own: it is a quiet way in, not a panel. */
.disclosure-quiet {
  margin-top: var(--s3);
  border: 0;
  background: transparent;
}
.disclosure-quiet > summary { padding: 0; font-size: 12.5px; }
.disclosure-quiet[open] > summary { border-bottom: 0; margin-bottom: var(--s2); }
.disclosure-quiet .provenance-list { padding: 0; font-size: 12px; }

kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .88em;
}

/* =============================================================================
   SENTENCE EXAMPLES PANEL
   Corpus evidence, not a developer inspector: the sentence is the largest thing
   in it, and the annotations sit under it as quiet metadata.
   ========================================================================== */

.examples-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(23, 25, 29, .28);
}

.examples-panel {
  position: fixed;
  z-index: 21;
  top: var(--s6);
  right: var(--s6);
  bottom: var(--s6);
  width: 500px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.examples-panel-header {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-start;
  padding: var(--s4) var(--s5) var(--s2);
}

.examples-titles {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 40px;
}
.examples-panel-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -.006em;
  overflow-wrap: anywhere;
}
.examples-subtitle { margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* Navigation and exports read as the panel's toolbar, in the same "count left,
   controls right" arrangement every table on the page uses — rather than crowding
   the title into a quarter of the header. */
.examples-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0 var(--s5) var(--s3);
  border-bottom: 1px solid var(--border);
}

.examples-panel-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.examples-panel-action,
.examples-panel-close {
  appearance: none;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--label-track);
  color: var(--muted);
  cursor: pointer;
}
.examples-panel-action:hover:not(:disabled),
.examples-panel-close:hover { background: var(--surface-sub); color: var(--text); }
.examples-panel-action:disabled { opacity: .4; cursor: default; }
.examples-panel-action.nav { font-size: 16px; line-height: 1; color: var(--accent); }
.examples-panel-action.nav:hover:not(:disabled) { color: var(--accent-strong); }
/* Row navigation and exports are two jobs, so a gap separates the pairs. */
.examples-panel-action.nav + .examples-panel-action:not(.nav) { margin-left: var(--s2); }
.examples-panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.examples-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  font-size: 13px;
}
.examples-total { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.examples-shown { color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }

.examples-panel-body { flex: 1 1 auto; overflow-y: auto; }

.example-item { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.example-item:last-child { border-bottom: 0; }

.example-meta {
  font-family: var(--font-data);
  font-size: 11.5px;
  line-height: 15.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.example-meta .example-kind { font-style: italic; }

/* Sentence text remains in the panel's sans UI face; this pass changes only its
   vertical rhythm, not the examples panel's typographic language. */
.example-sentence {
  margin-top: var(--s1);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
/* One restrained highlight. The token is evidence, not an alarm. */
.example-sentence mark {
  padding: 1px 2px;
  border-radius: 2px;
  background: var(--mark);
  color: inherit;
  box-shadow: inset 0 -2px 0 0 rgba(138, 90, 23, .45);
}

.example-facts {
  margin-top: var(--s1);
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
}
.example-name { color: var(--muted); }
.example-value { color: var(--text); font-size: 12px; }
.example-sep { color: var(--faint); }

.examples-empty { padding: var(--s6) var(--s5); color: var(--muted); }

.examples-source {
  flex: none;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
}

body[data-examples="open"] { overflow: hidden; }

/* =============================================================================
   RESPONSIVE
   Tables scroll horizontally rather than becoming cards: a benchmark row only
   means something as a row.
   ========================================================================== */

@media (max-width: 1100px) {
  .overview { grid-template-columns: repeat(3, 1fr); }
  .metric-box { border-bottom: 1px solid var(--border); }
  .metric-box:nth-child(3n) { border-right: 0; }
  .metric-box:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  body { padding: var(--s6) 28px var(--s12); }
  .masthead h1 { font-size: 28px; line-height: 34px; }
  .lede { font-size: 15px; line-height: 23px; }
  .page-head h1 { font-size: 26px; line-height: 32px; }
  .page-head .subtitle { font-size: 15px; line-height: 22px; }
  .results-head h2 { line-height: 28px; }
  [data-ui="analysis"] h2 { margin-top: var(--s8); font-size: 20px; line-height: 27px; }
  .context { gap: var(--s4) var(--s6); }
  .control-main { margin-left: auto; }

  /* v5's own behaviour: below this width the panel is a centred sheet. */
  .examples-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
}

/* Narrow: the metric table scrolls sideways rather than becoming cards, because a
   benchmark row only means something as a row. The semantic label columns are
   pinned when present — System always, Training only in grouped mode — and the
   layout is fixed so their offsets are exact. */
@media (max-width: 900px) {
  /* A tighter cell inset for this table only. At 70px a metric column left 46px of
     text room and clipped "Lemmas" by three pixels; 10px gives it 50px without
     widening the table or moving the pinned offsets. */
  #comparison { min-width: 760px; table-layout: fixed; --cell-x: 10px; }
  #comparison col.c-model { width: 78px; }
  #comparison col.c-train { width: 104px; }
  #comparison col.c-metric { width: 70px; }
  #comparison col.c-action { width: 86px; }

  #comparison th.model,
  #comparison td.train,
  #comparison thead th[data-sort-key="model"],
  #comparison thead th[data-sort-key="training_condition"],
  #comparison thead tr.groups th:first-child {
    position: sticky;
    z-index: 1;
    background: var(--surface);
  }
  #comparison thead th[data-sort-key="model"],
  #comparison thead th[data-sort-key="training_condition"],
  #comparison thead tr.groups th:first-child { z-index: 2; }

  #comparison th.model,
  #comparison thead th[data-sort-key="model"],
  #comparison thead tr.groups th:first-child { left: 0; }
  #comparison td.train,
  #comparison thead th[data-sort-key="training_condition"] { left: 78px; }

  #comparison td.train,
  #comparison thead th[data-sort-key="training_condition"] { box-shadow: 1px 0 0 0 var(--border); }

  /* One training setup selected: only the system column is a label. */
  #comparison thead tr.groups th:first-child { box-shadow: 1px 0 0 0 var(--border); }

  #comparison th.model { font-size: 14px; }
  /* "Written + spoken" is wider than a pinned column can be on a phone, so it
     wraps rather than spilling over the first score. */
  #comparison td.train { font-size: 12.5px; white-space: normal; }
  .analyse { font-size: 12.5px; }

  /* Analysis tables scroll as one complete table on narrow screens. Expanded
     tables still keep their bounded vertical scroller, but their headers stay in
     normal table flow instead of mixing sticky positioning with two-axis overflow. */
  [data-ui="analysis"] .expanded-scroll thead th {
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}

@media (max-width: 620px) {
  body { padding: var(--s6) 18px var(--s12); font-size: 14px; }
  /* The filter takes its own line rather than squeezing the exports off-screen, and
     a wrapped control row still ends on the table field's edge. */
  .control-main { width: 100%; justify-content: flex-end; }
  .filter-field { flex: 1 1 160px; }
  .filter-field input { width: 100%; }
  .section-filter .filter-field input { width: 100%; }
  .masthead h1 { font-size: 25px; line-height: 31px; }
  .results-head h2 { font-size: 20px; line-height: 26px; }
  table { font-size: 13px; line-height: 1.38; }
  /* This tighter overview treatment must not replace the analysis tables' 10px
     horizontal inset; their blue headers and data rows share that compact grid. */
  #comparison tbody td, #comparison tbody th { padding: var(--s2) var(--s3); }
  .overview { grid-template-columns: repeat(2, 1fr); }
  .metric-box:nth-child(3n) { border-right: 1px solid var(--border); }
  .metric-box:nth-child(2n) { border-right: 0; }
  .metric-box:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .metric-box:last-child { border-bottom: 0; }
  .metric-box .val { font-size: 23px; }
  .seg-btn { min-height: 40px; padding: var(--s2) var(--s3); font-size: 13.5px; }
  .field { width: 100%; }
  .seg { width: 100%; }
  .seg-btn { flex: 1 1 0; }
  /* The data face sets wide, so on a phone the sentence comes down rather than up:
     at 15.5px a monospace line held barely thirty characters and the sentence read
     as a column of fragments. */
  .example-sentence { font-size: 13px; line-height: 20px; }
  .examples-panel-header, .examples-toolbar { padding-left: var(--s4); padding-right: var(--s4); }
  .example-item, .examples-source { padding-left: var(--s4); padding-right: var(--s4); }
}