/* Reviewer task screens (inbox, article A, pair B/C, history, settings). Uses the tokens and components from app.css; add only screen-specific rules here. */
/*
 * Prefix: .tk-* (screen parts), .item-chip / .row-check / .item-popover (rubric v3 task components: chips, the
 * 'no issues' check, the item popover), .pn-* (proper-noun panel and search console inside the popover).
 * Shared components (.seg-tabs, .sev, .cand-label, .judgment-group, .mark-diff, .mark-missing …) come from app.css.
 * Sections: 1 inbox · 2 rubric guide · 3 task screens (toolbar, legend, sheet, rows) · 4 item column
 *           5 item popover and proper-noun panel · 6 judgment bar · 7 history · 8 settings · 9 responsive
 */

/* 1 ─ Inbox ─────────────────────────────────────────────────────────────── */
.tk-inbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 24px;
}
.tk-inbox-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tk-inbox-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tk-status-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.tk-status-filter label { color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tk-status-filter select { width: auto; min-width: 160px; }
/* position: relative keeps visually-hidden headers inside the scroll box (no page-wide overflow) */
.tk-inbox-card, .tk-history-card { position: relative; overflow: clip; }
.tk-inbox-card .table-scroll, .tk-history-card .table-scroll { position: relative; }
.tk-inbox-table td { vertical-align: middle; }
/* Long type names (Comparación de traducciones, Perbandingan terjemahan) take two lines at most. */
.tk-inbox-table .chip-muted, .tk-history-table .chip-muted { max-width: 10.5em; min-height: 24px; padding-block: 2px; white-space: normal; }
.tk-inbox-table :is(thead th, td), .tk-history-table :is(thead th, td) { padding-inline: 10px; }
/* Long language names (Bahasa Indonesia) wrap inside their chip rather than widening the table. */
.tk-inbox-table td:nth-child(3) .chip, .tk-history-table td:nth-child(3) .chip { min-height: 24px; padding-block: 2px; white-space: normal; }
.tk-inbox-title { min-width: 160px; }
/* Wide enough for "Comparación de" on the first line, so the chip never takes three lines. */
.tk-inbox-table td:first-child, .tk-history-table td:first-child { min-width: 148px; }
.tk-inbox-progress .progress { width: 56px; }
/* The action column never scrolls out of sight, even if a long translation widens the table. */
.tk-inbox-card .tk-inbox-action, .tk-history-card .tk-inbox-action,
.tk-inbox-card thead th:last-child, .tk-history-card thead th:last-child { position: sticky; right: 0; z-index: 1; }
.tk-inbox-card .tk-inbox-action, .tk-history-card .tk-inbox-action { background: var(--surface); }
.tk-inbox-title a { color: var(--ink-1); font-weight: 500; line-height: 1.45; }
.tk-inbox-title a:hover { color: var(--accent-hover); }
/* An X post not started yet: its title is the submit button of the row's 'Start' form, drawn like the title links. */
.tk-inbox-title .tk-title-start {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-1);
  font-weight: 500;
  line-height: 1.45;
  text-align: start;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tk-inbox-title .tk-title-start:hover { color: var(--accent-hover); text-decoration: underline; }
.tk-inbox-action form { display: inline; margin: 0; }
.tk-inbox-due { white-space: nowrap; }
.tk-inbox-due time { display: block; color: var(--ink-3); font-size: 12px; }
.tk-due-rel { display: block; color: var(--ink-1); font-size: 13px; font-weight: 500; }
.tk-due-rel.is-overdue { color: var(--danger); }
.tk-inbox-progress { white-space: nowrap; }
.tk-inbox-progress .status-dot { display: flex; margin-top: 4px; }
.tk-inbox-action { text-align: right; white-space: nowrap; }
.tk-inbox-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
}
.tk-confidential { margin: 0; color: var(--ink-2); font-size: 13px; }
.tk-inbox-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tk-aside-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tk-aside-card .card-title, .card.tk-aside-card > .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.tk-aside-card p { margin: 0; font-size: 13px; }
.tk-aside-link { color: var(--ink-1); text-decoration: none; }
.tk-aside-link:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-1); text-decoration: none; }
.tk-aside-link .muted { font-size: 13px; }
.tk-aside-count { color: var(--accent); font-size: 13px; font-weight: 600; }

/* 2 ─ Rubric guide (details) ─────────────────────────────────────────────── */
.tk-rubric { padding: 0; }
.tk-rubric-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.tk-rubric-summary::-webkit-details-marker { display: none; }
.tk-rubric-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.75px solid var(--ink-2);
  border-bottom: 1.75px solid var(--ink-2);
  transform: rotate(45deg);
}
.tk-rubric[open] > .tk-rubric-summary { border-bottom: 1px solid var(--line); }
.tk-rubric[open] > .tk-rubric-summary::after { transform: rotate(-135deg); }
.tk-rubric-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; font-size: 13px; line-height: 1.55; }
.tk-rubric-intro { margin: 0; color: var(--ink-2); }
.tk-rubric-section h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.tk-rubric-section p { margin: 0; color: var(--ink-2); }
.tk-rubric-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tk-rubric-item { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 4px 12px; }
.tk-rubric-item dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.tk-rubric-item dd { margin: 0; color: var(--ink-2); }
.tk-rubric-rank { min-width: 18px; color: var(--ink-3); font-size: 12px; }
.tk-rubric-route { margin: 12px 0 6px; color: var(--ink-1); font-size: 12px; font-weight: 600; }
.tk-rubric-rules { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
.tk-rubric-rules li + li { margin-top: 4px; }
.tk-article-aside .tk-rubric-item { grid-template-columns: 1fr; }

/* 3 ─ Task screens: toolbar, legend, sheet and rows ──────────────────────── */
.tk-banner { justify-content: flex-start; text-align: left; }
.tk-task-heading { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* One line under the pair heading: what the candidate labels are (blind-mode.md 3.2, labels_hint). */
.tk-pair-labels-hint { margin: 2px 0 0; font-size: 13px; line-height: 18px; }
.tk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.tk-toolbar p { margin: 0; }
.tk-toolbar-hint { color: var(--ink-2); font-size: 13px; }
.tk-toolbar-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--ink-3);
  font-size: 13px;
}
.tk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 18px;
}
.tk-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tk-legend-note { color: var(--ink-3); }
.tk-legend mark { padding: 0 3px; }
.tk-legend-missing { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.tk-submitted { align-items: flex-start; }
.tk-notice-body { display: flex; flex-direction: column; gap: 8px; }
.tk-notice-body p { margin: 0; }
.tk-guess { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; }
.tk-guess-title { margin: 0; font-size: 14px; font-weight: 600; }
.tk-guess-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tk-guess-form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tk-guess-form legend { float: left; margin-right: 8px; font-weight: 500; }

/* The sheet: one card; each row is a grid (A: ¶ | source | translation | items; B·C: ¶ | source | A | B | items). */
.tk-sheet {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.tk-row {
  display: grid;
  grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1fr) 440px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  scroll-margin-top: calc(var(--focus-head-h) + 64px);
  scroll-margin-bottom: 200px;
}
.tk-row:last-child { border-bottom: 0; }
.tk-row[hidden] { display: none; }
.tk-row.is-sub { border-top: 1px dashed var(--line); margin-top: -1px; }
.tk-row-pair { grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 584px; }
.tk-sheet-pair .tk-sheet-head { grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 584px; }
.tk-row.is-current { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-source="off"] .tk-row { grid-template-columns: 64px minmax(0, 1fr) 440px; }
[data-source="off"] .tk-row-pair, [data-source="off"].tk-sheet-pair .tk-sheet-head { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 584px; }
.tk-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 4px 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  overflow-wrap: anywhere;
}
.tk-gutter small { max-width: 100%; font-family: var(--font-sans); font-size: 11px; line-height: 14px; overflow-wrap: break-word; hyphens: auto; }
.tk-row-no { white-space: nowrap; }
.tk-sub-no { color: var(--ink-3); }
.tk-row .read-mark { display: none; color: var(--ink-3); }
.tk-row.is-read .read-mark { display: inline-flex; }
.tk-cell {
  min-width: 0;
  padding: 16px 20px;
  border-left: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.tk-cell.is-current-cell { background: var(--marker-soft); }
.tk-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-source.is-continued { padding-top: 6px; padding-bottom: 6px; }
.tk-row.is-sub .tk-source { border-top: 0; }
.tk-text { margin: 0; white-space: pre-line; }
.tk-continued { color: var(--line-strong); font-size: 14px; line-height: 1.4; user-select: none; }
.tk-missing { color: var(--ink-3); font-style: italic; }
.tk-row.is-title .tk-text { font-weight: 600; }
.tk-sheet-head {
  position: sticky;
  top: var(--focus-head-h);
  z-index: 6;
  background: var(--surface-2);
  scroll-margin: 0;
}
.tk-sheet-head .tk-gutter { justify-content: center; padding: 0; }
.tk-head-cell, .tk-head-items {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 20px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
}
.tk-head-cell { flex-wrap: wrap; overflow-wrap: normal; }
.tk-head-items { justify-content: space-between; padding: 8px 16px; border-left: 1px solid var(--line); }
.tk-head-check { flex: 0 0 112px; }
.tk-head-items-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 12px; }
.tk-head-items-cand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tk-head-marks { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.tk-head-sev { font-weight: 600; }
.tk-head-sev.is-unusable { color: var(--danger); }
.tk-head-sev.is-minor { color: var(--sev-minor); }
.tk-head-sev[hidden] { display: none; }
[data-source="off"] [data-cell="source"] { display: none; }

/* Quoted text of a mark (article): marker + the severity shape, never colour alone. */
.tk-hit { background: var(--marker); color: var(--marker-ink); border-radius: 2px; }
.tk-hit::after { margin-left: 2px; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.tk-hit-unusable { text-decoration: underline 2px var(--danger); text-underline-offset: 4px; }
.tk-hit-unusable::after { content: "\25B2"; color: var(--danger); }
.tk-hit-minor { text-decoration: underline 2px dotted var(--sev-minor); text-underline-offset: 4px; }
.tk-hit-minor::after { content: "\25CB"; color: var(--sev-minor); }
[data-cell="source"] .tk-hit { background: var(--marker-soft); }
[data-cell="source"] .tk-hit::after { content: none; }
/* Difference hint: the other candidate's words come from data-text so selections stay clean */
.mark-missing[data-text]::before { content: attr(data-text); }
.mark-missing[data-text] { margin: 0 2px; user-select: none; }

/* Folded identical paragraphs (pair) */
.tk-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 16px 10px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tk-fold-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.tk-fold-toggle .tk-gutter { flex: 0 0 64px; flex-direction: row; justify-content: center; padding: 0; }
.tk-fold-toggle:hover .tk-fold-label { text-decoration: underline; }
.tk-fold-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.tk-fold-same { color: var(--ink-2); font-size: 12px; }
.tk-fold-kinds { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.tk-fold-note { grid-column: 1; margin: 0 0 0 76px; color: var(--ink-2); font-size: 12px; line-height: 18px; }
.tk-fold-check { grid-column: 2; grid-row: 1 / span 2; }
.tk-fold-check[hidden] { display: none; }
[data-only-diff="on"] .tk-row[data-same="1"], [data-only-diff="on"] .tk-fold { display: none; }

/* 4 ─ Item column: chips and the 'no issues' check ──────────────────────── */
.tk-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: start;
  gap: 12px 16px;
  min-width: 0;
  padding: 16px;
  border-left: 1px solid var(--line);
}
.tk-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(32px, auto));
  grid-auto-flow: column;
  gap: 8px;
  min-width: 0;
}
.item-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 3px 6px 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink-1);
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.item-chip:hover { background: var(--surface-2); }
.item-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.item-chip.is-open, .item-chip[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.item-chip:not(.is-minor):not(.is-unusable).is-open { background: var(--accent-tint); color: var(--accent-hover); }
/* A long item name (es 'Traducción errónea' with ▲ and a count) takes a second line instead of an ellipsis.
   Korean breaks between words, not syllables ('고유명/사'); a word wider than the chip still wraps (break-word). */
.item-chip-label { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
:lang(ko) .item-chip-label { word-break: keep-all; }
.item-chip-shape { flex: none; font-size: 10px; line-height: 1; }
.item-chip-shape:empty { display: none; }
.item-chip-shape.is-unusable { color: var(--danger); }
.item-chip-shape.is-minor { color: var(--sev-minor); font-size: 12px; }
.item-chip-shape.is-ok { color: var(--ok); font-size: 12px; font-weight: 700; }
.item-chip-count {
  flex: none;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.item-chip-count:empty { display: none; }
.item-chip.is-minor { border-color: var(--sev-minor); background: var(--sev-minor-tint); color: var(--sev-minor); font-weight: 600; }
.item-chip.is-minor .item-chip-shape { color: inherit; font-size: 12px; }
.item-chip.is-minor .item-chip-count { background: var(--sev-minor); color: #FFFFFF; }
.item-chip.is-unusable { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); font-weight: 600; }
.item-chip.is-unusable .item-chip-shape { color: inherit; }
.item-chip.is-unusable .item-chip-count { background: var(--danger); color: #FFFFFF; }
/* 'Review again' flag: a pole with a pennant, drawn in currentColor (shape, not colour). */
.item-chip-flag { display: none; position: relative; flex: none; width: 9px; height: 12px; border-left: 1.5px solid currentColor; }
.item-chip-flag::after { content: ""; position: absolute; top: 0; left: 0; width: 7px; height: 6px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.item-chip.is-uncertain .item-chip-flag, .item-chip-flag.is-shown { display: inline-block; }
.item-chip.is-uncertain:not(.is-minor):not(.is-unusable) .item-chip-count:empty + * { display: none; }
.item-chip.is-uncertain .item-chip-flag { margin-left: auto; }
.item-chip.is-uncertain .item-chip-flag + .item-chip-count { margin-left: 0; }

.tk-check-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}
.row-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ok); }
.row-check.is-checked { border-color: var(--ok); background: var(--ok-tint); font-weight: 600; }
.row-check:has(input:disabled) { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.row-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cand-label-sm { width: 20px; height: 20px; font-size: 12px; }
.tk-row-state { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 18px; }
.tk-items[data-state="checked"] .tk-row-state { color: var(--ok); }
.tk-state-shape { flex: none; display: inline-block; margin-top: 4px; font-size: 10px; line-height: 1; }
.tk-state-shape.is-unchecked { width: 9px; height: 9px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.tk-state-shape.is-checked { width: 10px; height: 6px; margin-top: 5px; border-bottom: 2px solid var(--ok); border-left: 2px solid var(--ok); transform: rotate(-45deg); }
.tk-state-shape.is-unusable { margin-top: 3px; color: var(--danger); }
.tk-state-shape.is-minor { margin-top: 3px; color: var(--sev-minor); font-size: 12px; }
.tk-legend .tk-state-shape, .tk-legend .item-chip-shape { margin-top: 0; }
.tk-both-note { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.tk-items-empty { margin: 0; color: var(--ink-3); font-size: 13px; font-style: italic; }
.tk-row.is-done .tk-row-no { color: var(--ink-1); }

/* Pair: two candidate cells side by side in the item column */
.tk-items-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
}
/* stretch: the chip grid and the 'no issues' check fill the candidate column (mock PairCompareModel). */
.tk-items-pair .tk-items { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border-left: 0; }
.tk-items-pair .tk-chips { grid-template-rows: none; grid-auto-flow: row; gap: 4px; }
/* Two candidates share the column: a marked chip (shape, flag, count) keeps room for a 4-syllable name at 1280px. */
.tk-items-pair .item-chip { min-height: 28px; gap: 4px; padding: 2px 4px 2px 6px; }
.tk-items-pair .item-chip-count { min-width: 16px; padding: 0 4px; }
.tk-items-pair.is-same { grid-template-columns: 1fr; }
.tk-items-pair.is-same .tk-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
.tk-items-pair.is-same .tk-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-items-pair.is-same .tk-items .tk-chips { grid-column: 1 / -1; }

/* 5 ─ Item popover and the proper-noun panel ─────────────────────────────── */
.item-popover {
  position: absolute;
  z-index: 40;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: min(82vh, 780px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
  text-align: left;
}
.item-popover[hidden] { display: none; }
.item-popover.is-wide { width: 760px; max-height: min(88vh, 960px); }
.item-popover-arrow {
  position: absolute;
  top: -8px;
  left: 40px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  background: var(--surface);
  transform: rotate(45deg);
}
.item-popover.is-above .item-popover-arrow { top: auto; bottom: -8px; transform: rotate(225deg); }
.item-popover.is-sheet .item-popover-arrow, .item-popover.is-side .item-popover-arrow { display: none; }
/* Bottom sheet: under 720px, and on wider screens when the popover fits neither under, above nor beside its chip
   (compare.js placePopover). The page behind it is inert while it is open. */
.item-popover.is-sheet {
  position: fixed;
  top: auto !important;
  right: 0;
  bottom: 0;
  left: 0 !important;
  width: 100%;
  max-width: none;
  max-height: 88vh;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.item-popover-form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; margin: 0; }
.pop-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 8px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.pop-head .cand-label[hidden] { display: none; }
.pop-title { grid-column: 2; margin: 0; font-size: 15px; font-weight: 600; line-height: 24px; }
.pop-head .cand-label:not([hidden]) + .pop-title { grid-column: 2; }
.pop-row { color: var(--ink-3); font-size: 12px; }
.pop-close { margin-right: -6px; }
.pop-def { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.pop-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px 16px; overflow-y: auto; overscroll-behavior: contain; }
.pop-body [hidden] { display: none !important; }
.pop-errors { margin: 0; padding: 8px 12px; font-size: 13px; }
.pop-errors p { margin: 0; }
.pop-readonly { margin: 0; padding: 8px 12px; font-size: 13px; }
.pop-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pop-list-label { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.pop-marks { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.pop-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink-1);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.pop-mark.is-unusable { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }
.pop-mark.is-minor { border-color: var(--sev-minor); background: var(--sev-minor-tint); color: var(--sev-minor); }
.pop-mark[aria-current="true"] { font-weight: 600; box-shadow: inset 0 0 0 1px currentColor; }
.pop-mark.is-new { border-style: dashed; cursor: default; }
.pop-add { margin-left: auto; color: var(--accent); }
.pop-both { margin: 0; color: var(--ink-2); font-size: 12px; }
.pop-required { padding: 0 5px; border-radius: var(--radius-chip); background: var(--danger-tint); color: var(--danger); font-size: 11px; font-weight: 600; line-height: 16px; }
.pop-required[hidden] { display: none; }
.item-popover .field { gap: 4px; }
.item-popover fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.item-popover legend { margin: 0 0 6px; padding: 0; color: var(--ink-1); font-size: 13px; font-weight: 500; }
.pop-sev-options, .pn-sub-options, .pn-target-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.pn-target-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pop-sev-options > label, .pn-sub-options > label, .pn-target-options > label { justify-content: center; gap: 6px; min-height: 32px; white-space: normal; text-align: center; line-height: 1.25; }
.pn-sub-options > label { justify-content: flex-start; min-height: 40px; text-align: left; }
/* Popover choices as separate boxes with a visible radio dot (mock ItemPopups): the chosen one is told by the dot and the
   border as well as the tint, not by colour alone. */
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) { gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) > label {
  justify-content: flex-start;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-1);
  font-size: 13px;
  text-align: left;
  word-break: keep-all; /* ja/zh '訳文使用不可' stays one word; Latin labels still wrap at spaces */
  overflow-wrap: break-word;
}
/* auto tracks: a column is at least as wide as its longest word (ja '訳文使用不可' next to '正常'). */
.item-popover:not(.is-wide) .pop-sev-options { grid-template-columns: repeat(3, auto); }
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) > label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); }
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) > label:has(input:disabled) { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) input[type="radio"] { position: static; flex: none; width: 14px; height: 14px; margin: 0; opacity: 1; pointer-events: auto; accent-color: var(--accent); }
.item-popover :is(.pop-sev-options, .pn-sub-options, .pn-target-options) input[type="radio"]:focus-visible { outline: none; }
.pop-sev .field-hint, .pn-sub .field-hint, .pn-target .field-hint { margin: 6px 0 0; }
.pop-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
.item-popover.is-wide .pop-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.item-popover.is-wide .pop-field-reference_url, .item-popover.is-wide .pop-field-memo { grid-column: 1 / -1; }
.item-popover.is-wide .pop-field > :is(textarea, input) { margin-top: auto; }
.pop-field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pop-field-head label { font-size: 13px; font-weight: 500; }
.pop-field-head .field-hint { font-size: 12px; }
.item-popover textarea, .item-popover input[type="url"], .item-popover input[type="text"], .item-popover input[type="search"], .item-popover select { width: 100%; font-size: 13px; }
.item-popover textarea.tk-one-line { min-height: 32px; max-height: 120px; padding-block: 5px; line-height: 1.5; field-sizing: content; }
.pop-uncertain { margin: 0; padding-top: 2px; }
.pop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.pop-foot [hidden] { display: none !important; }
.pop-status { margin: 0; color: var(--ink-2); font-size: 12px; }
.pop-status:empty { display: none; }
.pop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pop-actions .btn { min-height: 32px; }
.pop-delete { border-color: var(--danger); color: var(--danger); background: var(--surface); }

.pn-top { display: flex; flex-direction: column; gap: 12px; }
.pn-entity select { max-width: 360px; }
/* The route of the chosen noun ([data-route] db | search | none): both paths are listed and the noun's own one is
   marked by the border, the weight and the check as well as the tint. */
.pn-route { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.pn-route-label { color: var(--ink-1); font-size: 13px; font-weight: 500; }
.pn-route-paths { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pn-route-path { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.pn-route-path svg { display: none; flex: none; }
.pn-route-path[aria-current="true"] { border: 1.5px solid var(--accent); background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }
.pn-route-path[aria-current="true"] svg { display: inline; }
.pn-route .pn-route-desc { margin: 0; }
/* Only the route's subcategories show: one row of as many columns as there are choices. */
.pn-sub-options { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pn-sub-options > label[hidden], .pn-stage[hidden] { display: none !important; }
.pn-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.pn-stages { display: flex; flex-direction: column; gap: 10px; }
.pn-stage { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pn-stage.is-selected { border: 1.5px solid var(--accent); background: #F7F7FE; }
.pn-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pn-stage-head .pn-step { width: 24px; height: 24px; border: 0; background: var(--ink-1); color: #FFFFFF; font-size: 12px; }
.pn-stage.is-selected .pn-stage-head .pn-step { background: var(--accent); }
.pn-stage-head h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.pn-stage-no { color: var(--ink-3); font-weight: 500; }
.pn-stage-meta { color: var(--ink-3); font-size: 12px; line-height: 18px; }
.pn-selected { margin-left: auto; border-color: var(--accent); background: var(--accent); color: #FFFFFF; font-weight: 600; }
.pn-selected[hidden] { display: none; }
.pn-stage-body { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; }
.pn-stage-body p { margin: 0; }
.pn-no-record { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); color: var(--ink-2); }
.pn-queries, .pn-docs, .pn-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.pn-query, .pn-doc, .pn-result-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-top: 1px solid var(--line); }
.pn-query:first-child, .pn-doc:first-child, .pn-result-item:first-child { border-top: 0; }
.pn-query-text { display: flex; flex: 1 1 260px; align-items: center; gap: 8px; min-width: 0; }
.pn-query-q { min-width: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.pn-query-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-verdict { display: inline-flex; gap: 4px; }
.pn-verdict .btn { min-height: 30px; }
.pn-reason { width: auto; min-width: 160px; }
.pn-reason[hidden], .pn-reason-text[hidden] { display: none; }
.item-popover .pn-reason-text { flex: 1 1 180px; width: auto; min-width: 160px; }
/* Stage 1: the results one automatic query got (read only, collapsed; same rows as stage 2). */
.pn-query-docs { flex: 1 1 100%; min-width: 0; }
.pn-query-docs > summary { color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; }
.pn-query-docs > summary:hover { color: var(--ink-1); }
.pn-query-docs > .pn-docs { margin-top: 6px; background: var(--surface-2); }
.pn-stage-body .pn-query-docs-missing { flex: 1 1 100%; margin: 0; color: var(--ink-3); font-size: 12px; }
.pn-doc { flex-direction: column; align-items: flex-start; gap: 2px; }
.pn-doc[hidden] { display: none; }
.pn-doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-doc-meta { margin: 0; color: var(--ink-3); font-size: 12px; }
.pn-doc-snippet { margin: 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.pn-doc-rate, .pn-selection-rate, .pn-wiki-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pn-chosen { border-color: var(--ink-1); color: var(--ink-1); font-weight: 600; }
.pn-result { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); }
.pn-result-title { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pn-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 16px; margin: 0; }
.pn-dl > div { display: flex; flex-direction: column; min-width: 0; }
.pn-dl dt { color: var(--ink-3); font-size: 12px; }
.pn-dl dd { margin: 0; overflow-wrap: anywhere; }
.pn-corrected-box { display: flex; flex-direction: column; gap: 4px; }
.pn-corrected-title { margin: 0; font-size: 13px; }
.pn-corrected { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.pn-correct-entity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pn-correct-entity[hidden] { display: none; }
.pn-console-open { align-self: flex-start; }
.pn-console { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); }
.pn-console-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pn-console-head h4 { margin: 0; font-size: 13px; font-weight: 600; }
.pn-console-heading { min-width: 0; }
.pn-quota { display: flex; gap: 12px; margin: 0; color: var(--ink-2); font-size: 12px; }
.pn-quota b { color: var(--ink-1); font-weight: 600; }
.pn-console-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; align-items: end; gap: 8px; }
.pn-console-msg { margin: 0; color: var(--ink-2); font-size: 12px; }
.pn-console-msg:empty { display: none; }
.pn-result-item { align-items: flex-start; flex-wrap: nowrap; }
.pn-result-no { flex: none; width: 18px; color: var(--ink-3); font-size: 12px; line-height: 20px; }
.pn-result-body { flex: 1 1 auto; min-width: 0; }
.pn-result-pick { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
.pn-result-pick .tk-check { font-size: 12px; white-space: nowrap; }
.pn-console-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; }
.pn-console-foot .btn { margin-left: auto; }
/* Stage 3: noun Wiki search (several languages), simple preview and the right / wrong call. */
.pn-wiki-find { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); }
.pn-wiki-find h4 { margin: 0; font-size: 13px; font-weight: 600; }
.pn-wiki-entry { align-self: flex-start; }
.pn-wiki-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.pn-wiki-langs { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pn-wiki-langs legend { margin-bottom: 4px; padding: 0; color: var(--ink-3); font-size: 12px; }
.pn-wiki-langs .tk-check { font-size: 12px; white-space: nowrap; }
.pn-wiki-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; }
.pn-wiki-hit:hover b, .pn-wiki-hit[aria-expanded="true"] b { color: var(--accent); text-decoration: underline; }
.pn-wiki-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-wiki-summary { margin: 2px 0 0; color: var(--ink-2); font-size: 12px; overflow-wrap: anywhere; }
.pn-wiki-matched { display: block; margin-top: 2px; font-size: 12px; }
.pn-wiki-right { border-color: var(--ok-line); background: var(--ok-tint); color: var(--ok); }
.pn-wiki-preview { display: flex; flex-direction: column; gap: 8px; max-height: 360px; padding: 10px 12px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.pn-wiki-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-wiki-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pn-wiki-preview-head p { margin: 0 0 2px; font-size: 12px; }
.pn-wiki-preview-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.pn-wiki-nav { display: inline-flex; align-items: center; gap: 6px; }
.pn-wiki-pos { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.pn-wiki-preview h5 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.pn-wiki-names { width: 100%; border-collapse: collapse; font-size: 12px; }
.pn-wiki-names th, .pn-wiki-names td { padding: 3px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pn-wiki-names th { height: auto; background: none; font-size: 12px; letter-spacing: normal; text-transform: none; }
.pn-wiki-names thead th { border-top: 0; color: var(--ink-3); font-weight: 500; }
.pn-wiki-names tbody th { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.pn-wiki-names tr.is-own td { font-weight: 600; }
.pn-wiki-section h6 { margin: 0 0 2px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.pn-wiki-section p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pn-wiki-links { margin: 0; padding-left: 18px; font-size: 12px; overflow-wrap: anywhere; }
.pn-wiki-chosen { margin: 0; font-size: 12px; }
.pn-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 6px 10px; border: 1px solid var(--ok-line); border-radius: var(--radius-control); background: var(--ok-tint); font-size: 13px; }
.pn-saved[hidden] { display: none; }
.pn-handoff { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pn-handoff p { flex: 1 1 320px; margin: 0; }
.pn-note { color: var(--ink-2); }

/* 6 ─ Judgment bar ──────────────────────────────────────────────────────── */
.tk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 24px;
  width: 100%;
  margin: 0;
}
.tk-bar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tk-bar-errors { flex: 1 1 100%; margin: 0; }
p.notice.tk-bar-reopened { flex: 1 1 100%; margin: 0; padding: 8px 12px; font-size: 13px; }
p.notice.tk-bar-reopened[hidden] { display: none; }
.tk-grade { flex: 0 1 440px; gap: 6px; }
.tk-grade .judgment-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tk-grade-progress { margin-left: auto; }
.tk-grade-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.tk-grade-options > label { justify-content: center; min-height: 36px; white-space: nowrap; }
.tk-grade-options > label:has(input:disabled) { border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.tk-grade-notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; min-height: 18px; margin: 0; padding: 0 4px; font-size: 12px; line-height: 18px; }
.tk-grade-note { display: inline-flex; align-items: center; gap: 6px; }
.tk-grade-note[hidden] { display: none; }
/* No note to show: the line takes no room (the bar stays as low as it can). */
.tk-grade-notes:not(:has(> .tk-grade-note:not([hidden]))) { display: none; }
.tk-bar-grades { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 12px 24px; }
.tk-bar-grades .tk-grade { flex: 1 1 380px; }
.tk-bar-broken { flex: 0 0 auto; gap: 6px; }
/* A long 'output broken' text (es, id, en) takes two lines so the comment field keeps its width. */
@media (min-width: 720px) { .tk-bar-article .tk-bar-broken { max-width: 248px; } }
/* Below 1440 the bar takes two lines (1024×768 and 1366×768: about 150px instead of 190–200): grade · output broken
   (text in two lines) · comment on the first, what is missing · cannot judge · submit on the second. */
@media (min-width: 720px) and (max-width: 1439px) {
  .tk-bar-article .tk-grade { flex: 0 1 460px; }
  .tk-bar-article .tk-bar-broken { max-width: 220px; }
  .tk-bar-article .tk-bar-memo { flex: 1 1 200px; }
  .tk-bar-article .tk-bar-actions { flex: 1 1 100%; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 12px; padding-top: 0; }
  .tk-bar-article .tk-bar-actions > .cluster { flex: none; flex-wrap: nowrap; }
  .tk-bar-article .tk-submit-hint { flex: 1 1 240px; min-width: 0; }
}
.tk-check.tk-broken-check { align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); }
.tk-bar-pair .tk-broken-check { min-height: 36px; }
.tk-check.tk-broken-check > input { margin-top: 0; }
fieldset.tk-bar-broken > legend { margin-bottom: 8px; }
.tk-bar-memo { flex: 1 1 160px; gap: 6px; }
.tk-bar-memo > label { display: block; font-size: 13px; font-weight: 600; }
.tk-bar-memo > label .muted { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.tk-bar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; padding-top: 22px; }
.tk-submit-hint { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; max-width: 520px; margin: 0; color: var(--ink-2); font-size: 12px; line-height: 18px; }
.tk-submit-hint a { font-size: 12px; }
textarea.tk-one-line { min-height: 36px; max-height: 120px; padding-block: 6px; line-height: 1.5; field-sizing: content; }
.tk-field-error .cand-label { margin-right: 2px; }
.tk-field-error { display: block; margin-top: 4px; color: var(--danger); font-size: 12px; font-weight: 500; line-height: 1.45; }
.is-invalid > legend, .tk-check.is-invalid, .field.is-invalid > label { color: var(--danger); }
.tk-grade.is-invalid .tk-grade-options { border-color: var(--danger); }
.tk-error-list { margin: 0; padding-left: 18px; }
.tk-error-list li + li { margin-top: 2px; }
.tk-check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-1); font-size: 14px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.tk-check > input { margin-top: 2px; }
.tk-check .cand-label { margin-right: 2px; }
.tk-check-title { font-weight: 600; }
.tk-check:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; }
.tk-bar .field > label, .tk-cannot-panel .field > label, .tk-settings .field > label { display: block; }

.tk-cannot { position: relative; }
.tk-cannot > summary { list-style: none; }
.tk-cannot > summary::-webkit-details-marker { display: none; }
.tk-cannot[open] > summary { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); }
.tk-cannot-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 48px));
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.tk-cannot-panel fieldset { display: flex; flex-direction: column; gap: 6px; }
.tk-cannot-panel .field-hint { margin: 0; }

.tk-bar-readonly { align-items: center; }
.tk-bar-readonly-state { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-3); }
.tk-recorded { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 13px; }
.tk-recorded dt { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.tk-recorded dd { margin: 0; color: var(--ink-1); }
.seg-tabs kbd { flex: none; }

/* Shortcuts dialog */
.tk-keys { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.tk-keys > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; }
.tk-keys dt { color: var(--ink-2); white-space: nowrap; }
.tk-keys dd { margin: 0; }

/* 7 ─ History ───────────────────────────────────────────────────────────── */
.tk-history-table td { vertical-align: middle; }
.tk-legacy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tk-legacy .card-head { align-self: stretch; margin-bottom: 0; }
.tk-legacy .card-head h2 { display: flex; align-items: center; gap: 8px; }
.tk-legacy p { margin: 0; font-size: 13px; }

/* 8 ─ Settings ──────────────────────────────────────────────────────────── */
.tk-settings { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.tk-settings-card { display: flex; flex-direction: column; gap: 12px; }
.tk-settings-card .card-title, .card.tk-settings-card > .card-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.tk-settings-card > .field-hint { margin: 0; }
.tk-settings-current { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 13px; }
.tk-settings-langs { max-width: 520px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.tk-settings-langs.is-invalid { border-color: var(--danger); }
.tk-settings-zone input { max-width: 360px; }
.tk-settings-actions { justify-content: flex-start; }
#language, #time-zone, #keyboard, #guide { scroll-margin-top: 24px; }
.tk-settings-keys .field-hint { display: block; }
.tk-settings-guide-reset { align-items: center; gap: 8px 12px; }
.tk-settings-guide-reset .field-hint { margin: 0; }

/* 9 ─ Responsive: inbox and history ─────────────────────────────────────── */
/* Below 1440 the task table gets the full width (es/id rows need ~900px) and the side cards go under it. */
@media (max-width: 1439px) {
  .tk-inbox { grid-template-columns: 1fr; }
  .tk-inbox-aside { flex-direction: row; flex-wrap: wrap; }
  .tk-inbox-aside > * { flex: 1 1 260px; }
}
/* Below 1200 each task is a two-line row (title / facts + action) instead of a seven-column table. */
@media (max-width: 1199px) {
  .tk-inbox-table, .tk-history-table, .tk-inbox-table tbody, .tk-history-table tbody { display: block; width: 100%; }
  .tk-inbox-table thead, .tk-history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tk-inbox-table tr, .tk-history-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .tk-inbox-table tbody tr:last-child, .tk-history-table tbody tr:last-child { border-bottom: 0; }
  .tk-inbox-table tbody tr:hover, .tk-history-table tbody tr:hover { background: var(--surface-2); }
  .tk-inbox-card .table-scroll .tk-inbox-table td:nth-child(n), .tk-history-card .table-scroll .tk-history-table td:nth-child(n) {
    display: block;
    position: static;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  /* Same specificity as the reset above (.tk-…-card .table-scroll .tk-…-table td:nth-child(n)) plus one class. */
  .tk-inbox-card .table-scroll td.tk-inbox-title:nth-child(n), .tk-history-card .table-scroll td.tk-inbox-title:nth-child(n) { order: -1; flex: 1 1 100%; font-size: 15px; }
  .tk-inbox-card .table-scroll .tk-inbox-table td.num:nth-child(n) { display: none; } /* block total is already in the progress count */
  .tk-history-table td.num::before { content: "#"; color: var(--ink-3); }
  .tk-inbox-card .table-scroll td.tk-inbox-due:nth-child(n) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
  .tk-inbox-due .tk-due-rel, .tk-inbox-due time { display: inline; }
  .tk-inbox-card .table-scroll td.tk-inbox-progress:nth-child(n) { display: flex; align-items: center; gap: 8px; }
  .tk-inbox-progress .status-dot { margin-top: 0; }
  .tk-inbox-card .table-scroll td.tk-inbox-action:nth-child(n), .tk-history-card .table-scroll td.tk-inbox-action:nth-child(n) { margin-left: auto; }
  .tk-inbox-table .chip-muted, .tk-history-table .chip-muted { max-width: none; white-space: nowrap; }
}

.focus-meta #tk-progress-text .cand-label-sm { width: 18px; height: 18px; margin: 0 2px 0 6px; font-size: 11px; vertical-align: middle; }
.focus-meta #tk-progress-text .cand-label.is-named { width: auto; height: auto; padding: 2px 6px; }
/* Under 720px the progress line keeps the numbers only ('zh-TW · A 7 / 7 B 6 / 7'); the words stay for screen readers. */
@media (max-width: 719px) {
  .focus-meta .tk-meta-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 9 ─ Responsive: task screens ──────────────────────────────────────────── */
/* 1100–1365: narrower item column (long chip labels take a second line; the full name is also the accessible name). */
@media (min-width: 1100px) and (max-width: 1365px) {
  .tk-row { grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1fr) 392px; }
  [data-source="off"] .tk-row { grid-template-columns: 56px minmax(0, 1fr) 392px; }
  .tk-items { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
  .tk-row-pair, .tk-sheet-pair .tk-sheet-head { grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 480px; }
  [data-source="off"] .tk-row-pair, [data-source="off"].tk-sheet-pair .tk-sheet-head { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 480px; }
  .tk-cell { padding: 14px 16px; }
}
/* 720–1099: the item column goes under the texts; pair screens show one candidate at a time (tabs). */
@media (min-width: 720px) and (max-width: 1099px) {
  .tk-row, .tk-row-pair, .tk-sheet-pair .tk-sheet-head { grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1fr); }
  [data-source="off"] .tk-row, [data-source="off"] .tk-row-pair, [data-source="off"].tk-sheet-pair .tk-sheet-head { grid-template-columns: 56px minmax(0, 1fr); }
  .tk-row > .tk-items, .tk-row-pair > .tk-items-pair { grid-column: 2 / -1; border-left: 0; border-top: 1px dashed var(--line); }
  .tk-sheet-head .tk-head-items { display: none; }
  .tk-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
  .tk-items-pair { grid-template-columns: 1fr; }
  .tk-items-pair .tk-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-compare-root][data-active-cand="A"] .tk-items[data-label="B"]:not([data-both]),
  [data-compare-root][data-active-cand="B"] .tk-items[data-label="A"]:not([data-both]) { display: none; }
  .tk-items-pair .tk-items { display: grid; grid-template-columns: minmax(0, 1fr) 132px; }
  .tk-items-pair.is-same .tk-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .judgment-bar:has(.tk-bar-pair) { position: static; max-height: none; overflow: visible; box-shadow: none; }
  .tk-bar-actions { padding-top: 0; }
}
/* Short windows: no pinned judgment form at all (it would hide most of the text). */
@media (max-height: 700px) {
  .judgment-bar:has(.tk-bar) { position: static; max-height: none; overflow: visible; box-shadow: none; }
}
@media (max-width: 719px) {
  .tk-inbox-filters { align-items: stretch; }
  .tk-status-filter { flex: 1 1 100%; }
  .tk-status-filter select { flex: 1 1 auto; }
  .tk-rubric-item { grid-template-columns: 1fr; }
  .tk-row, .tk-row-pair { display: flex; flex-direction: column; }
  .tk-row.tk-sheet-head { display: none; }
  .tk-row > .tk-gutter { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 10px 16px 0; }
  .tk-cell { padding: 10px 16px 12px; border-left: 0; }
  .tk-cell + .tk-cell { border-top: 1px dashed var(--line); }
  .tk-cell[data-cell-label]::before {
    content: attr(data-cell-label);
    display: block;
    margin-bottom: 4px;
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
  }
  .tk-source.is-continued { display: none; }
  .tk-items, .tk-items-pair { padding: 12px 16px 14px; border-left: 0; border-top: 1px dashed var(--line); }
  .tk-items { grid-template-columns: 1fr; }
  .tk-items-pair { grid-template-columns: 1fr; }
  .tk-items-pair .tk-items { padding: 0; border-top: 0; }
  .tk-chips, .tk-items-pair .tk-chips, .tk-items-pair.is-same .tk-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
  .tk-items-pair.is-same .tk-items { grid-template-columns: 1fr; }
  .tk-check-col { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tk-fold { grid-template-columns: 1fr; padding: 8px 16px; }
  .tk-fold-note { margin-left: 0; }
  .tk-fold-check { grid-column: 1; grid-row: auto; }
  .tk-fold-toggle .tk-gutter { flex: none; }
  .item-popover.is-sheet.is-wide { top: 0 !important; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .item-popover.is-wide .pop-fields, .pn-correct-entity, .pn-wiki-form { grid-template-columns: 1fr; }
  .pn-console-form { grid-template-columns: 1fr; }
  .pop-sev-options, .item-popover:not(.is-wide) .pop-sev-options, .pn-sub-options { grid-template-columns: 1fr; }
  .pn-sub-options { grid-auto-flow: row; }
  .tk-bar { gap: 12px; }
  .tk-grade, .tk-bar-grades .tk-grade { flex: 1 1 100%; }
  .tk-bar-actions { flex: 1 1 100%; align-items: stretch; margin-left: 0; padding-top: 0; }
  .tk-bar-actions > .cluster > .btn { flex: 1 1 auto; }
  .tk-cannot { flex: 1 1 100%; }
  .tk-cannot > summary { width: 100%; }
  .tk-cannot-panel { width: 100%; }
  .tk-submit-hint { justify-content: flex-start; }
  .tk-keys > div { grid-template-columns: 1fr; gap: 2px; }
  .tk-toolbar-keys, .tk-keys-hint { display: none; }
  .focus-meta:has(#tk-progress-text) > span:not(.mono, [aria-hidden], #tk-progress-text, .progress),
  .focus-meta:has(#tk-progress-text) > span:not(.mono, [aria-hidden], #tk-progress-text, .progress) + [aria-hidden] { display: none; }
  /* Both candidates' chip groups are stacked: name each group with its label (data-label) before the chips. */
  .tk-items-pair .tk-items:not([data-both])::before {
    content: attr(data-label);
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--ink-1);
    border-radius: var(--radius-chip);
    background: var(--surface);
    color: var(--ink-1);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  /* Narrow screens: the judgment form follows the rows instead of covering them */
  .judgment-bar:has(.tk-bar) { position: static; max-height: none; overflow: visible; box-shadow: none; }
}
@media print {
  .tk-inbox-aside, .tk-rubric, .item-popover, .tk-check-col { display: none !important; }
}