/* Base styles. Mobile first: the review screen has to work on a phone. */

/* The font ships with the program: no CDN, no reliance on what the school
   machines happen to have installed. The same family renders the interface,
   the preview and the printed sheet, so what a teacher sees is what prints. */

@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3-It.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/SourceSans3-BoldIt.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   Colours. Every colour in this file comes from a token below, so the
   theme is switchable from one place — spec/00_mag.md chapter 10.

   The theme (15_sablonok_preferenciak.md 3.3) comes with the page's first
   bytes, on <html>: data-theme="light" or "dark" for a teacher who chose
   one, nothing for "the system's" — and then the operating system decides,
   through the @media block below. The pages before logging in carry
   nothing, so they follow the system too.

   The dark tokens are written twice, for data-theme="dark" and for the
   system's dark: a browser on a school machine may not know light-dark().
   The two blocks must stay the same: tools/check_theme_tokens.py says so
   when they do not.

   Printing stays light whatever the setting is: see the print block at the
   bottom of this file. The sheet's own colours are written out, never
   taken from here: the preview is white paper on any ground.
   --------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --ink: #1c1f23;
  --ink-soft: #5b6470;
  --line: #dfe3e8;
  --paper: #ffffff;
  --ground: #f5f6f8;
  --accent: #1f5c8b;
  --accent-ink: #ffffff;
  --accent-soft: #eef4f9;
  --accent-faint: rgba(31, 92, 139, 0.25);
  --ok: #2f7a4d;
  --pending: #8a6d1f;
  --bad: #b3382c;
  --warn: #c99a12;
  --warn-soft: #fdf6dc;
  --ok-soft: #e6f3ea;
  --bad-soft: #fbe9e7;
  --backdrop: rgba(20, 23, 28, 0.45);
  --shadow: rgb(0 0 0 / 12%);
  --shadow-strong: rgba(0, 0, 0, 0.25);
  --radius: 6px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #e6e8ea;
  --ink-soft: #a0a8b4;
  --line: #333a44;
  --paper: #1b1f25;
  --ground: #14171c;
  --accent: #6aa9d8;
  --accent-ink: #10151a;
  --accent-soft: #22303c;
  --accent-faint: rgba(106, 169, 216, 0.3);
  --ok: #6cc08d;
  --pending: #d4b45c;
  --bad: #e08a80;
  --warn: #d9b64a;
  --warn-soft: #3a3320;
  --ok-soft: #1e3326;
  --bad-soft: #3d2420;
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow: rgb(0 0 0 / 45%);
  --shadow-strong: rgba(0, 0, 0, 0.6);
}

/* The same tokens, for "the system's" when the system is dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink: #e6e8ea;
    --ink-soft: #a0a8b4;
    --line: #333a44;
    --paper: #1b1f25;
    --ground: #14171c;
    --accent: #6aa9d8;
    --accent-ink: #10151a;
    --accent-soft: #22303c;
    --accent-faint: rgba(106, 169, 216, 0.3);
    --ok: #6cc08d;
    --pending: #d4b45c;
    --bad: #e08a80;
    --warn: #d9b64a;
    --warn-soft: #3a3320;
    --ok-soft: #1e3326;
    --bad-soft: #3d2420;
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow: rgb(0 0 0 / 45%);
    --shadow-strong: rgba(0, 0, 0, 0.6);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* Top bar */

.topbar {
  padding: 0.85rem 1.25rem 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.topbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.brand {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

.tagline {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Layout */

.container {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
}

h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.lead {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

/* 11_generalas.md 4.7: shown once, outside Chromium-based browsers. */
.browser-notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.browser-notice[hidden] { display: none; }
.browser-notice p { margin: 0; flex: 1; }

.notice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

th,
td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

tr:last-child th,
tr:last-child td {
  border-bottom: 0;
}

th {
  width: 9rem;
  font-weight: 600;
}

code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.state {
  font-size: 0.85rem;
  white-space: nowrap;
}

.state--ok {
  color: var(--ok);
}

.state--pending {
  color: var(--pending);
}

/* Menu */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.6rem;
}

.nav__link {
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link--current {
  border-bottom-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* 18_naplo_mentes_eleres.md 4.4: beside Admin, when the backup needs the
   administrator's attention. */
.nav__mark {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--bad);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* 18_naplo_mentes_eleres.md 7.3: the open feedback beside Admin — a
   number, apart from the backup's "!". */
.nav__count {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* The Feedback page of the administrator (7.3). */
.feedback-entry {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.feedback-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
.feedback-entry__sender { font-weight: 600; }
.feedback-entry__body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 0.6rem; }
.feedback-entry__image { display: block; max-width: 100%; max-height: 18rem; border: 1px solid var(--line); border-radius: var(--radius); }
.feedback-entry__agent { font-size: 0.85rem; color: var(--ink-soft); }
.feedback-entry__close { margin-top: 0.75rem; }
.feedback__copybar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0 0 0.5rem; }
.feedback__copystatus { flex-basis: 100%; }
.feedback__copystatus:empty { display: none; }
.feedback__copy { margin: 0 0 1rem; }

/* Admin › Log (18_naplo_mentes_eleres.md 8.1): the filters in a row that
   wraps; the table, and on a phone one card a line, the labels from the
   cells' data-label. */
.logfilters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; margin: 1rem 0; }
.logfilters .field { flex: 1 1 10rem; min-width: 0; margin-bottom: 0.75rem; }
.logfilters__attention { flex: 1 1 100%; min-height: 44px; display: flex; align-items: center; gap: 0.4rem; }
.logfilters__actions { display: flex; align-items: center; gap: 1rem; flex: 1 1 100%; margin: 0 0 0.5rem; }
.logtable td { vertical-align: top; overflow-wrap: anywhere; }
.logtable__when { white-space: nowrap; }
.logtable__address { font-size: 0.85rem; }
.logtable__row--attention td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.logtable__detail dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0.35rem 0 0; font-size: 0.85rem; }
.logtable__detail dt { font-weight: 600; }
.logtable__detail dd { margin: 0; overflow-wrap: anywhere; }
.logtable__detail p { margin: 0.35rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.logpager { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 40rem) {
  .logtable, .logtable tbody, .logtable tr, .logtable td { display: block; width: 100%; }
  .logtable thead { display: none; }
  .logtable tr { margin: 0 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.6rem; }
  .logtable__row--attention { border-left: 3px solid var(--bad) !important; }
  .logtable__row--attention td:first-child { box-shadow: none; }
  .logtable td { border: 0; padding: 0.2rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; }
  .logtable td::before { content: attr(data-label); font-weight: 600; color: var(--ink-soft); }
  .logtable__when { white-space: normal; }
}

/* The Backup page (4.5): long paths break anywhere rather than widen the
   page on a phone. */
.backup__path { overflow-wrap: anywhere; }
.backup__now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 1.5rem; }
.backup__list td { white-space: nowrap; }

/* Who is logged in */

.whoami {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-left: auto;
  font-size: 0.9rem;
}

.whoami__name {
  font-weight: 600;
}

.whoami__role {
  color: var(--ink-soft);
}

.whoami__out {
  margin: 0;
}

/* 18_naplo_mentes_eleres.md 7.1: on every page, beside the name. With the
   reviewer's queue counter beside it, the line is longer than a phone: it
   breaks onto a second line, to the right, rather than run off the side. */
.whoami__feedback {
  color: var(--accent);
  white-space: nowrap;
}

.whoami {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

/* The feedback page: the kinds side by side, the picture's preview, what
   goes along without asking. */
.feedback__kinds { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.feedback__kind { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.feedback__preview { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; }
.feedback__preview[hidden], .feedback__warn[hidden] { display: none; }
.feedback__preview img { max-width: 100%; max-height: 14rem; border: 1px solid var(--line); border-radius: var(--radius); }
.feedback__warn { margin-top: 0.5rem; }
.feedback__context { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.25rem; }
.feedback__context dt { font-weight: 600; }
.feedback__context dd { margin: 0; overflow-wrap: anywhere; }
.feedback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.field textarea { width: 100%; }

/* 14_lektoralas.md 2.4: the queue's counter, the flagged part in red. */
.queue-count {
  margin-right: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.queue-count:hover { text-decoration: underline; }

.queue-count__flagged {
  color: var(--bad);
  font-weight: 600;
}

.presence__badge {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  cursor: default;
}

/* Forms */

.container--narrow {
  max-width: 26rem;
}

.form {
  margin-top: 1.25rem;
}

.field {
  display: block;
  margin-bottom: 1rem;
}

.field__label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.field__hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* 17_cimkek_konyvek.md 5.1: a fixed order, the options as the sheet will
   letter them, the key's place marked. */
.key-place__preview {
  margin: -0.5rem 0 1rem;
}

.key-place__option--key {
  font-weight: 600;
}

/* Text-like inputs only. A checkbox stretched to 100% is what tore the
   boxes away from their own labels. */
.field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-faint);
  outline-offset: 1px;
}

/* 00_mag.md 8.: the eye beside a password field, inside the box on its
   right — at least 44 × 44 px, to tap on a phone. The box is as tall, and
   leaves the room on its right. The slash crosses the eye while the
   password shows: pressing it then hides it. */
.reveal {
  position: relative;
  display: block;
}

.field .reveal input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px;
  padding-right: 48px;
}

.reveal__button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.reveal__button[hidden] { display: none; }
.reveal__button:hover { color: var(--accent); }
.reveal__button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.reveal__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reveal__slash { display: none; }
.reveal__button[aria-pressed="true"] .reveal__slash { display: inline; }

.button {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.08);
}

.button--quiet {
  padding: 0.2rem 0.6rem;
  border-color: var(--line);
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
}

.form--wide {
  max-width: 26rem;
}

.field select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

/* A box and its words belong next to each other, not at opposite edges. */
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1.25rem 0.5rem 0;
}

.check input {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

/* Several choices of the same question sit on one line while they fit. */
.choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.5rem;
}

.choices .check {
  margin-bottom: 0.25rem;
}

.stacked .check {
  display: flex;
  margin-right: 0;
}

/* Item entry */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
}

.field textarea,
.field select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field textarea:focus,
.field select:focus,
.picker__search:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-faint);
  outline-offset: 1px;
}

fieldset.field {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.field__row {
  margin-bottom: 0.35rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.typelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.typecard {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

a.typecard:hover {
  border-color: var(--accent);
}

.typecard--later {
  opacity: 0.55;
}

.typecard__name {
  display: block;
  font-weight: 600;
}

.typecard__hint {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Progressive form: the rare fields and the exercise-named buttons */

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}

.toggle {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.toggle:hover {
  border-color: var(--accent);
}

.toggle--on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.extra {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
}

.extra__what {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
}

/* The item form's sample of the printed line. Not the sheet itself:
   the two once shared a class name, and this margin and padding ended
   up on the PDF. */
.sheet-sample {
  margin: 0.25rem 0 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  background: var(--ground);
}

.sheet-sample__title {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.sheet-sample__line {
  display: block;
  font-size: 1.02rem;
}

.sheet-sample__empty {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* The exclusive block is kept visibly apart: these narrow the item down
   rather than widening it. */

.exclusive {
  margin: 2rem 0 1rem;
  padding: 0.25rem 1rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.exclusive h2 {
  margin-top: 1.25rem;
}

.exclusive__option {
  margin-bottom: 0.9rem;
}

.exclusive__option .extra__what {
  margin: -0.5rem 0 0 1.6rem;
  font-size: 0.88rem;
}

.exclusive__option .check {
  margin-bottom: 0.35rem;
}

#mode-detail-extra_word {
  margin: 0.5rem 0 0 1.6rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--line);
}

/* Quick entry */

.shared {
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.shared__summary {
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}

.shared__title {
  font-weight: 600;
}

.shared__digest {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.shared__body {
  padding: 0.25rem 0.9rem 0.6rem;
  border-top: 1px solid var(--line);
}

.rows {
  table-layout: fixed;
}

.rows th {
  width: auto;
  font-size: 0.85rem;
  font-weight: 600;
}

.rows td {
  padding: 0.25rem 0.3rem;
  vertical-align: middle;
}

.rows input[type="text"] {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.rows input[type="text"]:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-faint);
  outline-offset: 1px;
}

.rows__sentence {
  width: 34%;
}

.rows__key {
  width: 16%;
}

.rows__badge {
  width: 11rem;
  text-align: right;
}

.badge {
  font-size: 0.8rem;
  white-space: nowrap;
}

.badge--ok {
  color: var(--ok);
}

.badge--bad {
  color: var(--pending);
}

.row--bad input[type="text"] {
  border-color: var(--pending);
}

.row__problem td {
  padding-top: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.suspects__line {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

/* Cloze gap rows */

.gaps {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.gaprow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--line);
}

.gaprow:last-child {
  border-bottom: 0;
}

.gaprow__no {
  flex: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: right;
}

.gaprow__context {
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gaprow__marker {
  color: var(--accent);
}

.gaprow input[type="text"] {
  flex: 0 1 12rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.gaprow input[type="text"]:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-faint);
  outline-offset: 1px;
}

.gaprow .badge {
  flex: 0 0 10rem;
  text-align: right;
}

.toggle--tiny {
  flex: 0 0 auto;
  padding: 0.1rem 0.5rem;
  line-height: 1;
}

.gapextra {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}

.gapextra .field {
  margin-bottom: 0.6rem;
}

@media (max-width: 46rem) {
  .gaprow {
    flex-wrap: wrap;
  }

  .gaprow__context {
    flex: 1 1 100%;
    white-space: normal;
  }

  .gaprow input[type="text"] {
    flex: 1 1 auto;
  }
}

/* Passage questions */

.qrow {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 0.5rem;
}

.qrow__main,
.qrow__answer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.qrow__answer {
  margin-top: 0.4rem;
  padding-left: 1.8rem;
}

.qrow__no {
  flex: 0 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.qrow input[type="text"],
.qrow input[type="number"],
.qrow select {
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.qrow__main input[type="text"] {
  flex: 1 1 18rem;
}

.qrow__main select {
  flex: 0 1 14rem;
}

.qrow__answer input[type="text"] {
  flex: 0 1 12rem;
}

.qrow__distractor {
  flex: 0 1 9rem;
}

.qrow input:focus,
.qrow select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-faint);
  outline-offset: 1px;
}

.field input[type="file"] {
  width: 100%;
  padding: 0.4rem 0;
  font: inherit;
  font-size: 0.9rem;
}

/* Tag picker */

.picker {
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.picker__search {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.chips--tags {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.tagchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.15rem 0.4rem 0.15rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
}

.tagchip--primary {
  border-color: var(--accent);
}

.tagchip__group {
  color: var(--ink-soft);
}

.tagchip__star,
.tagchip__drop {
  padding: 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.tagchip__star:hover,
.tagchip__drop:hover {
  color: var(--accent);
}

.tagchip--primary .tagchip__star {
  color: var(--accent);
}

.results {
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  list-style: none;
  border-top: 1px solid var(--line);
}

.results__hit {
  display: block;
  width: 100%;
  padding: 0.35rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.results__hit:hover {
  background: var(--accent-soft);
}

.results__group {
  color: var(--ink-soft);
}

.results__empty {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* The derivation bar */

.derivation {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
}

.derivation__title {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.derivation__none {
  margin: 0;
  color: var(--ink-soft);
}

.derivation__miss {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.chip--mode {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
}

.checks {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.checks--blocking {
  color: var(--bad);
}

.checks--warning {
  color: var(--pending);
}

.suspects {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.suspects__title {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.suspects ul {
  margin: 0;
  padding-left: 1.1rem;
}

.suspects__ratio {
  display: inline-block;
  min-width: 2.8rem;
  color: var(--ink-soft);
}

/* The bank list */

.bank__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tabs {
  display: flex;
  /* A narrow screen wraps the tabs rather than scrolling sideways (the
     Tags page has five). */
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--line);
}

.tabs__tab {
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
}

.tabs__tab--current {
  border-bottom-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.search input[type="search"] {
  flex: 1 1 auto;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.bank {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 48rem) {
  .bank {
    grid-template-columns: 1fr;
  }
}

/* Filter column */

.filters {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.filters__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.filters__group {
  margin-bottom: 0.9rem;
}

.filters__label,
.filters summary {
  margin: 0 0 0.3rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  cursor: default;
}

.filters summary {
  cursor: pointer;
}

.filters__note {
  margin: 0 0 0.3rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.filter {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

.filter:hover {
  border-color: var(--accent);
}

/* Three states, 7.2: off, include, exclude. */
.filter--with {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.filter--without {
  border-color: var(--bad);
  color: var(--bad);
  text-decoration: line-through;
}

/* 17_cimkek_konyvek.md 4.2: the search above the books' chips; an
   inactive book's chip faded, still a filter. */
.filters__booksearch { margin: 0 0 0.35rem; }
.filters__booksearch input {
  width: 100%;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}
.filter--inactive:not(.filter--with) { opacity: 0.7; }

.range {
  display: flex;
  gap: 0.35rem;
}

.range input {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}

/* Results */

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.results__count {
  margin: 0;
  font-weight: 600;
}

.results__order {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.order {
  color: var(--ink-soft);
  text-decoration: none;
}

.order--current {
  color: var(--ink);
  font-weight: 600;
}

.hits {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.hit {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.hit:last-child {
  border-bottom: 0;
}

/* Chapter 7: a flagged item stays on the list, struck through. */
.hit--flagged .hit__body {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.hit__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.hit__marks {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.mark {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.mark--new {
  background: var(--accent-soft);
  color: var(--accent);
}

.mark--flagged {
  border: 1px solid var(--bad);
  color: var(--bad);
}

/* 13_import.md 1.1: AI-generated — a fact about the item, not a warning. */
.mark--ai {
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
}

.hit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.hit__key {
  color: var(--ink);
}

.hit__tag::before {
  content: "·";
  margin-right: 0.45rem;
}

.hit__uses {
  margin-left: auto;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.pager__where {
  color: var(--ink-soft);
}

/* One item, and the reviewer's bulk bar */

.struck {
  text-decoration: line-through;
}

.bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.bulkbar[hidden],
.bulkbar [hidden] {
  display: none;
}

.bulkbar__count {
  font-weight: 600;
}

.bulkbar__head,
.bulkbar__ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  width: 100%;
}

.bulkmenu > summary {
  list-style: none;
  cursor: pointer;
}

.bulkmenu > summary::-webkit-details-marker {
  display: none;
}

.bulkmenu__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.bulkmenu[open] {
  flex: 1 1 100%;
}

.bulkpage {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.bulkresult p {
  margin: 0.2rem 0;
}

.bulkbar select {
  flex: 1 1 14rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.hit__top input[type="checkbox"] {
  flex: 0 0 auto;
  margin-right: 0.4rem;
}

.hit__body a {
  color: inherit;
  text-decoration: none;
}

.hit__body a:hover {
  text-decoration: underline;
}

/* Messages */

.alert {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--paper);
}

.alert--bad {
  border-left-color: var(--bad);
}

.alert--good {
  border-left-color: var(--ok);
}

.alert--info {
  border-left-color: var(--accent);
}

.alert--warn {
  border-left-color: var(--pending);
}

.alert ul { margin: 0.35rem 0 0.35rem; padding-left: 1.2rem; }
.alert p { margin: 0; }

/* A dialog over the page: the confirmation before finalising
   (12_nyomtatas.md 5.2) and where the PDF stands afterwards. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 1rem;
  background: var(--backdrop);
  overflow-y: auto;
}

.modal__box {
  width: min(40rem, 100%);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 40px var(--shadow-strong);
}

.modal__title { margin: 0 0 0.75rem; font-size: 1.25rem; }
.modal__box > p { margin: 0 0 0.75rem; }
.modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.finalize__findings { color: var(--ink-soft); font-size: 0.95rem; }
.finalize__findings ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }

.editor__engine-off { color: var(--bad); font-size: 0.9rem; }

/* A finalised paper: no editor, the sheet as printed. */

.final__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.final__name { margin: 0; font-size: 1.4rem; }
.final__state { margin: 0 0 1rem; color: var(--ink-soft); }
.final__sheet { max-width: 60rem; }

/* What a finalised paper hands out — 12_nyomtatas.md 6.1. */
.final__downloads { max-width: 60rem; margin-bottom: 1.5rem; }
.downloads { list-style: none; margin: 0 0 1rem; padding: 0; }
.downloads li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.35rem 0; }
.downloads a { font-weight: 600; }
.downloads__name { color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
.downloads__missing { color: var(--bad); }
.downloads__zip { border-top: 1px solid var(--line); margin-top: 0.35rem; }
.final__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.final__note { color: var(--ink-soft); font-size: 0.9rem; }
.draft__code, .draft__letters { color: var(--ink-soft); font-size: 0.9rem; }

/* Dimension chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
}

.chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--accent);
}

.chip--current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.chip__count {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.chip--current .chip__count {
  color: inherit;
  opacity: 0.75;
}

.tags th {
  width: auto;
}

.tags__child td:first-child {
  padding-left: 2rem;
  color: var(--ink-soft);
}

.spaced {
  margin: 1.25rem 0;
}

/* Footer */

.footer {
  padding: 1rem 1.25rem 2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
}

a {
  color: var(--accent);
}

/* Narrow screens: the path table stacks instead of squeezing. */

@media (max-width: 34rem) {
  .paths th,
  .paths td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 0.2rem 0.85rem;
  }

  .paths th {
    padding-top: 0.7rem;
  }

  .paths tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
  }

  .paths tr:last-child {
    border-bottom: 0;
  }
}

/* ---------------------------------------------------------------------
   The paper editor — 11_generalas.md 1. Two columns: the blocks on the
   left, the sheet as it will be printed on the right. Below 1024 pixels
   the editor does not start at all; the message takes its place.
   --------------------------------------------------------------------- */

.container--wide {
  max-width: 82rem;
}

.too-narrow {
  display: none;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

@media (max-width: 1023px) {
  .too-narrow { display: block; }
  .editor { display: none; }
}

.editor__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.editor__title { flex: 1 1 22rem; }

.editor__title input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 6px;
}

.editor__title input:hover { border-color: var(--line); }
.editor__title input:focus { border-color: var(--accent); outline: none; }

.saved {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.header-panel { flex: 0 0 auto; position: relative; }
.header-panel summary { cursor: pointer; list-style: none; }

/* Open, it hangs below its button rather than pushing the title around:
   the panel is opened now and then, the title is always there. */
.header-panel > .header-form {
  position: absolute;
  right: 0;
  top: 2.4rem;
  z-index: 5;
  width: 28rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 24px var(--shadow);
}

.bands { border: 0; margin: 1rem 0 0; padding: 0; }
.bands legend { font-weight: 600; padding: 0; }
.bands__table { border-collapse: collapse; margin-top: 0.5rem; }
.bands__table th,
.bands__table td { padding: 0.25rem 0.75rem 0.25rem 0; text-align: left; }
.bands__table input { width: 5rem; }
.bands__points { color: var(--ink-soft); }
.print-settings__fields { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: flex-end; margin-top: 0.5rem; }
.print-settings__fields .field { margin: 0; }

.editor__columns {
  display: grid;
  grid-template-columns: minmax(20rem, 2fr) 3fr;
  gap: 1.5rem;
  align-items: start;
}

.editor__label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.editor__label--checks { margin-top: 1.5rem; }

.editor__right { position: sticky; top: 1rem; }

.editor__add { margin: 1rem 0; }

.editor__score {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.score { display: flex; gap: 0.75rem; align-items: baseline; margin: 0; }
.score__label { color: var(--ink-soft); }
.score__value { font-size: 1.2rem; font-weight: 600; }
.score__items { color: var(--ink-soft); font-size: 0.9rem; }

.blocks { list-style: none; margin: 0; padding: 0; }

.block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  margin-bottom: 0.5rem;
}

.block__number { color: var(--ink-soft); }
.block__what { flex: 1; }
.block__points { color: var(--ink-soft); font-size: 0.9rem; }
.block__move { display: flex; gap: 0.25rem; }

.drafts { list-style: none; margin: 0; padding: 0; }

.draft {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  margin-bottom: 0.5rem;
}

.draft__name { flex: 1; font-weight: 600; }
.draft__when { color: var(--ink-soft); font-size: 0.9rem; }

/* The archive — 16_archivum_megosztas_statisztika.md 2.1. The four filters
   sit in a row and wrap; on a phone everything is one column, a line's
   name above its details. */

.archive__search { margin-bottom: 1.25rem; }
.archive__search .search { margin-bottom: 0.75rem; }
.archive__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; }
.archive__filter { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--ink-soft); min-width: 0; }
.archive__filter select,
.final__rename input[type="text"] {
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.archive__filter select { max-width: 16rem; }
.archive__clear { font-size: 0.9rem; padding-bottom: 0.35rem; }
.archive__year { margin-bottom: 1.5rem; }
.archive__count { color: var(--ink-soft); font-weight: normal; font-size: 0.9rem; }
.archive__row { flex-wrap: wrap; gap: 0.25rem 1rem; }
.archive__row form { margin: 0; }

@media (max-width: 48rem) {
  .archive__filter { flex: 1 1 100%; }
  .archive__filter select { max-width: none; width: 100%; }
  .archive__row .draft__name { flex-basis: 100%; }
}

/* Sharing — 16_archivum_megosztas_statisztika.md 3.1–3.3: the owner's list
   of shares, the recipient's line, the colleague picker. */

.final__received { margin: 0 0 0.25rem; font-weight: 600; }
.final__shares { max-width: 60rem; margin-bottom: 1.5rem; }
.shares { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.shares__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
.shares__who { flex: 1 1 12rem; font-weight: 600; }
.shares__when, .shares__note { color: var(--ink-soft); font-size: 0.9rem; font-weight: normal; }
.shares__line form { margin: 0; }
.pick { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.pick__row { padding: 0.2rem 0; }
.pick__user, .pick__taken { color: var(--ink-soft); font-size: 0.85rem; margin-left: 0.35rem; }
.tpl__shared { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.archive__from { font-style: italic; }
.handover__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.final__rename { margin: 0 0 1rem; max-width: 60rem; }
.final__rename summary { cursor: pointer; color: var(--ink-soft); }
.final__rename form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; }
.final__rename input[type="text"] { flex: 1 1 18rem; min-width: 0; }
.final__rename .final__note { flex-basis: 100%; margin: 0; }

/* The templates — 15_sablonok_preferenciak.md 4.3 — and the chooser of a
   new paper (5.). One column on a phone: the lines wrap. */

.tpls { list-style: none; margin: 0 0 1rem; padding: 0; }

.tpl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 0.5rem;
}

.tpl__main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.tpl__name { font-weight: 600; overflow-wrap: anywhere; }
.tpl__summary, .tpl__points, .tpl__used { color: var(--ink-soft); font-size: 0.9rem; }
.tpl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tpl__actions form { margin: 0; }
.tpl__rename { position: relative; }
.tpl__rename[open] form { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.tpl__rename input[type="text"] {
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.tpl__pin { margin: 0; }

.star {
  border: 0;
  background: none;
  padding: 0 0.2rem;
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.star--on { color: var(--warn); }

.tpl__state { font-size: 0.85rem; font-weight: 600; }
.tpl__state--draft, .tpl__state--changed { color: var(--pending); }
.tpl__state--withdrawn { color: var(--bad); }
.tplpage__part { margin-bottom: 1.5rem; }
.tplpage__earlier { margin: 0 0 1.5rem; }
.tplpage__earlier > summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }

.chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0.5rem 2rem; }
.chooser__part { min-width: 0; }
.chooser__all { margin: 0.25rem 0 1rem; }
.chooser .draft { flex-wrap: wrap; gap: 0.4rem 1rem; }
.chooser .draft form { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hint { color: var(--ink-soft); font-size: 0.9rem; margin: 0.25rem 0 0; }
.section-title { margin-top: 1.5rem; }


/* The block builder — one step at a time, 11_generalas.md 2.1. */

.builder {
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--paper);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}

.builder__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.builder__title { font-weight: 600; }

.builder__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.builder__chosen { color: var(--ink-soft); }
.builder__ask { margin: 0 0 0.6rem; font-weight: 600; }

.builder__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.builder__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.builder__row input[type="number"] { width: 5rem; }

.builder__group { margin: 0.75rem 0; }

.builder__label {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The three states of supply. The tag stays selectable in all of them:
   the teacher is told, not stopped. */
.chip-form { display: inline; }

.filter--thin { opacity: 0.65; }

.filter--short {
  border-color: var(--bad);
  color: var(--bad);
}

.filter__short {
  margin-left: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.builder__gear { margin-left: auto; }
.builder__gear summary { cursor: pointer; list-style: none; }

.builder__gear-body {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
}

.check { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0; }
.check input { width: auto; }


/* An opened block — 11_generalas.md 3. */

.block--open {
  display: block;
  border-color: var(--accent);
}

.block__head { display: flex; align-items: center; gap: 0.6rem; }

.block__open {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.block__bar {
  margin: 0.6rem 0;
  padding: 0.5rem 0.6rem;
  background: var(--ground);
  border-radius: 4px;
}

.block__bar input[type="text"] { width: 100%; }
.block__tags { margin: 0.4rem 0 0; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: baseline; }
.block__add { margin: 0.6rem 0 0; display: flex; gap: 0.4rem; }

.rows { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}

.row:last-child { border-bottom: 0; }
.row__number { color: var(--ink-soft); min-width: 1.5rem; }
.row__body { flex: 1; }
.row__icons { display: flex; gap: 0.15rem; }
.row__icons .button { padding: 0.15rem 0.4rem; }

.row--editing { display: block; padding: 0.6rem 0; }
.row__form .field { margin-bottom: 0.5rem; }
.row__form textarea { width: 100%; }
.field--narrow input { width: 5rem; }
.row__buttons { display: flex; gap: 0.4rem; margin: 0.5rem 0 0; }

.extra {
  margin-top: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ground);
}

.extra .hits { max-height: 18rem; overflow-y: auto; }


/* The checking panel — 11_generalas.md 7. Never printed. */

.checks { list-style: none; margin: 0; padding: 0; }

.check {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pending);
  border-radius: 4px;
  margin-bottom: 0.4rem;
  background: var(--paper);
}

.check--not_enough_items,
.check--example_missing { border-left-color: var(--bad); }

.check__what { margin: 0 0 0.35rem; }
.check__actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0; }

.variants { display: flex; align-items: center; gap: 0.25rem; }

.variants__current,
.variants__other {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

.variants__current { background: var(--accent); color: var(--accent-ink); }
.variants__other { border: 1px solid var(--line); color: var(--ink); }
.variants__code { color: var(--ink-soft); font-size: 0.85rem; margin-left: 0.3rem; }

@media print {
  .checks, .variants { display: none; }
}

/* ---------------------------------------------------------------------
   The sheet. Always light, whatever the dark mode setting says: it shows
   what comes out of the printer (00_mag.md 10). The colours are therefore
   written out here rather than taken from the theme variables.
   --------------------------------------------------------------------- */

.sheet-frame {
  /* No overflow clipping: the pages are as tall as the paper, and the
     column scrolls with the page. */
  border-radius: 6px;
}

/* The sheet is A4: 210 by 297 millimetres, with the page boundaries in
   view, because otherwise the layout cannot be judged (4.2). The pages are
   built by static/js/sheet.js and scaled down to the width of the preview
   column; printing takes them at their real size. */

.sheet {
  color-scheme: light;
  color: #000000;
  font-size: var(--sheet-font-size, 10.5pt);
  line-height: var(--sheet-line-height, 1.3);
  /* A word longer than the line — a web address, say — breaks at the
     margin. The page clips what runs past its edge, and the PDF engine
     refuses a sheet with anything clipped. */
  overflow-wrap: anywhere;
}

.sheet__flow {
  background: #ffffff;
  padding: 18mm 16mm;
}

/* Once paginated, the flow is emptied and the pages carry everything. */
.sheet--paginated .sheet__flow { display: none; }

.sheet__pages {
  transform-origin: top left;
  transform: scale(var(--sheet-scale, 1));
  width: 210mm;
}

.sheet__page {
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: 18mm 16mm 20mm;
  background: #ffffff;
  /* The boundary is a shadow, not a border: a border would take room
     from the text on screen that it does not take on paper, and the
     layout measured on screen is the one that gets printed. */
  box-shadow: 0 0 0 1px #cccccc;
  margin-bottom: 8mm;
  overflow: hidden;
}

/* The answer key — 12_nyomtatas.md 4. The same pages as the sheet; the
   thick bars down both sides tell it from a sheet at a glance, on a desk
   covered in paper (4.1). They stand in the side margins and take no
   room from the text, so the layout measures the same. */

.sheet--key .sheet__page::before,
.sheet--key .sheet__page::after {
  content: "";
  position: absolute;
  top: 8mm;
  bottom: 8mm;
  width: 3mm;
  background: #000000;
}

.sheet--key .sheet__page::before { left: 7mm; }
.sheet--key .sheet__page::after { right: 7mm; }

.key__head { margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1px solid #000000; }
.key__title { margin: 0 0 1mm; font-size: 20pt; font-weight: 700; letter-spacing: 0.06em; }
.key__title--plain { font-size: 14pt; letter-spacing: 0; }
.key__name { margin: 0 0 1mm; font-size: 12pt; font-weight: 700; }
.key__facts, .key__bands { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin: 0 0 1mm; }
.key__bands-label { font-weight: 700; }

.key__task { margin-bottom: 4mm; }
.key__heading {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  margin: 0 0 1.5mm;
  font-size: 1em;
}
.key__task-points { font-weight: 400; white-space: nowrap; }

.key__answers { list-style: none; margin: 0; padding: 0; }
.key__answers li { margin: 0 0 0.6mm; }
.key__number { display: inline-block; min-width: 2.2em; font-weight: 700; }
.key__points { color: #444444; font-size: 0.9em; }

.key__writing-id { margin: 0 0 1.5mm; font-style: italic; }
.key__criteria-title { margin: 0 0 1mm; font-weight: 700; }
.key__criteria { margin: 0; padding-left: 5mm; }

.key__section-title { margin: 2mm 0 2mm; font-size: 12pt; }
.key__transcript-label { margin: 0 0 1.5mm; font-size: 1em; }
.key__transcript-text { margin: 0 0 1.5mm; }
/* A line the next line of the same paragraph follows (4.5). */
.key__transcript-text--line { margin-bottom: 0; }

/* The key of several variants — 12_nyomtatas.md 4.6: one column under each
   variant's letter. The widths are set on the grid from app/key.py, which
   measures every cell against them; change one, change both. Two classes
   deep, so that no single-class rule further down reshapes a row. */

.key__grid .key__grid-row {
  display: grid;
  grid-template-columns: var(--key-label) repeat(var(--key-columns), minmax(0, 1fr));
  column-gap: var(--key-gap);
  margin: 0 0 0.6mm;
}

.key__grid .key__grid-letters {
  margin: 0 0 1mm;
  padding-bottom: 1mm;
  border-bottom: 1px solid #000000;
  font-weight: 700;
}

.key__grid .key__heading { margin-top: 3mm; }
.key__grid .key__grid-points { color: #444444; font-size: 0.9em; }
.key__grid-note { margin: 0 0 0.6mm; font-style: italic; }

/* Printed in black and white: a frame and bold, not a colour. */
.key__warning {
  margin: 1.5mm 0;
  padding: 1mm 2mm;
  border: 1.5px solid #000000;
  font-weight: 700;
}

.key__variant-title { margin: 3mm 0 2mm; font-size: 13pt; }

/* A page that runs past its margin — 11_generalas.md 4.3. Screen only:
   such a page never reaches paper, the PDF engine refuses it. */
.sheet__page--overflow { box-shadow: 0 0 0 2px #b42318; }

.sheet__overflow-note {
  position: absolute;
  left: 16mm;
  right: 16mm;
  bottom: 14mm;
  padding: 1.5mm 2.5mm;
  border: 1px solid #b42318;
  background: #fdecea;
  color: #b42318;
  font-size: 9pt;
  font-weight: 700;
}

@media print {
  .sheet__overflow-note { display: none; }
}

.sheet__page-foot {
  position: absolute;
  left: 16mm;
  right: 16mm;
  bottom: 9mm;
  display: flex;
  justify-content: space-between;
  font-size: 8pt;
  color: #444444;
  border-top: 1px solid #dddddd;
  padding-top: 2mm;
}

.sheet__head {
  border-bottom: 1px solid #000000;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.sheet__school { margin: 0 0 0.5rem; font-weight: 600; }

.sheet__fields {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.sheet__field { display: inline-flex; align-items: baseline; gap: 0.4rem; }

.sheet__rule {
  display: inline-block;
  width: 12rem;
  border-bottom: 1px solid #000000;
}

.sheet__rule--short { width: 7rem; }
.sheet__rule--tiny { width: 3rem; }

.sheet__empty { color: #666666; font-style: italic; }

.sheet__task { margin-bottom: 1.5rem; }
.sheet__instruction { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.sheet__task-number { margin-right: 0.4rem; }
.sheet__items { margin: 0; padding-left: 1.5rem; }
.sheet__item { margin-bottom: 0.4rem; }

.sheet__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid #cccccc;
  font-size: 0.8rem;
  color: #666666;
}


/* The shapes on the sheet. A blank is a ruled space, an option list is
   lettered, a matching task is two columns — chapter 6 and 11_generalas 4. */

.sheet__passage {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #000000;
  background: #fafafa;
}

.sheet__passage-title { margin: 0 0 0.35rem; font-weight: 600; }
.sheet__passage-body { margin: 0; line-height: 1.9; }
/* 12_nyomtatas.md 3.2: a short text's letter and title over its body; a
   recording's letters and names, one a line. */
.sheet__short-title { margin: 0.45rem 0 0; font-weight: 600; }
.sheet__short-line { margin: 0; line-height: 1.9; }
.sheet__audio { margin: 0 0 0.35rem; font-size: 0.85rem; }
.sheet__audio-icon {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.2em;
  vertical-align: -0.22em;
}

.sheet__blank {
  display: inline-block;
  /* Where the student writes in the line: longer with more answer space
     (15_sablonok_preferenciak.md 1.7). */
  min-width: calc(5rem * var(--answer-space, 1));
  border-bottom: 1px solid #000000;
  text-align: center;
  vertical-align: baseline;
}

.sheet__blank-label { font-size: 0.9em; }

.sheet__underlined { text-decoration: underline; }

.sheet__trailing {
  margin-left: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sheet__options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0.3rem 0 0;
  padding: 0;
}

.sheet__letter {
  display: inline-block;
  min-width: 1.2rem;
  font-weight: 600;
}

.sheet__answer {
  display: block;
  margin-top: 0.35rem;
}

.sheet__rule--full {
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
}

.sheet__word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid #000000;
}

.sheet__word { white-space: nowrap; }

.sheet__match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sheet__match-left { margin: 0; padding-left: 1.5rem; }
.sheet__match-right { list-style: none; margin: 0; padding: 0; }
.sheet__match-right li { margin-bottom: 0.4rem; }

.sheet__box {
  display: inline-block;
  width: 1.6rem;
  height: 1.1rem;
  margin-left: 0.5rem;
  border: 1px solid #000000;
  vertical-align: middle;
}

.sheet__bullets { margin: 0.3rem 0 0; padding-left: 1.2rem; }


/* The head of a task: its number, the instruction and the marking space. */

.sheet__instruction {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sheet__instruction-text { flex: 1; }

.sheet__task-points {
  font-weight: 400;
  white-space: nowrap;
  font-size: 0.9em;
}

/* The worked sample at the head of a task — item zero (11_generalas 6). */

.sheet__example {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.6rem;
  background: #f2f2f2;
  border-left: 3px solid #666666;
}

.sheet__example-number { font-weight: 600; margin-right: 0.4rem; }
.sheet__example-solution { margin-left: 0.5rem; font-weight: 600; }

.sheet__extra-options {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid #000000;
}


/* Answer space — 4.5. Nothing to write on is the same as no answer space.
   The paper's answer space (15_sablonok_preferenciak.md 1.7) multiplies
   the room between and around the lines, never their number: 8mm is the
   minimum, narrow. */

.sheet__answer { margin-top: calc(8mm * var(--answer-space, 1)); }
.sheet__rule--full { display: block; width: 100%; margin-bottom: calc(8mm * var(--answer-space, 1)); }

/* The first line of a writing task: the student writes above a line, so
   it needs the same room above it as every other line has, or it sits
   right under the task like an underline. */
.sheet__item--writing + .sheet__rule--full,
.sheet__bullets + .sheet__rule--full { margin-top: calc(8mm * var(--answer-space, 1)); }

/* Two columns per block, when the block asks for it — 4.4. */

.sheet__task--cols2 .sheet__items,
.sheet__task--cols2 .sheet__match {
  column-count: 2;
  column-gap: 8mm;
}

.sheet__task--cols2 .sheet__item { break-inside: avoid; }

/* The numbered answer slots of a cloze: equal length, beside the passage
   while they fit, under it in two columns when there are many. */

.sheet__slots {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.sheet__slots li {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  margin-bottom: 4mm;
}

.sheet__slot-number { font-weight: 700; min-width: 1.4rem; text-align: right; }
.sheet__rule--slot { display: inline-block; width: calc(45mm * var(--answer-space, 1)); border-bottom: 1px solid #000; }

/* A cloze's gap in the text only points to its slot: the student writes
   in the slot, so the mark keeps its length. */
.sheet__passage .sheet__blank { min-width: 5rem; }

.sheet__slots--beside {
  float: right;
  /* The slot and 17mm for its number and the gap beside the text. */
  width: calc(45mm * var(--answer-space, 1) + 17mm);
  margin: 0 0 4mm 8mm;
}

/* The passage must not run under the floated slots. */
.sheet__task::after { content: ""; display: table; clear: both; }

.sheet__slots--below { column-count: 2; column-gap: 10mm; }
.sheet__slots--below li { break-inside: avoid; }

/* A first-letter cloze: the letter stands before the rule (4.5), in a
   space of its own width, so every rule keeps the same length. */
.sheet__slot-letter { display: inline-block; width: 1em; font-weight: 400; }

/* A multiple-choice cloze: one line a gap under the text, its number and
   its lettered options, nothing to write on (4.5). Two columns past twelve
   gaps, as the slots. */
.sheet__cloze-options {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.sheet__cloze-options li {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  margin-bottom: 2mm;
  break-inside: avoid;
}

/* The options of one gap; a line that wraps goes on under them, not
   under the gap's number. */
.sheet__cloze-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
}

.sheet__cloze-option { white-space: nowrap; }
.sheet__cloze-options--two { column-count: 2; column-gap: 10mm; }
.sheet__cloze-options--two .sheet__cloze-choices { gap: 0 0.8rem; }

/* A task never breaks with only a line or two left behind (4.3). */

.sheet__task {
  break-inside: auto;
  margin-bottom: 6mm;
}

.sheet__instruction { break-after: avoid; }
.sheet__passage { break-after: avoid; }

/* The document the PDF engine prints (templates/pdf_sheet.html). The
   pages start at the very top, as they will on paper. */
body.pdf-document {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

/* Printing — 12_nyomtatas.md 2.1. Chromium prints the pages sheet.js
   laid out, one laid-out page to one sheet of A4, and breaks nowhere
   else: if its own page breaking decided, the preview and the PDF
   would part ways. Nothing here may change a size the layout
   measured. The margin is carried by the page itself, so the paper's
   is zero; the screen-only boundary, gap and scaling go. */
@media print {
  @page { size: A4; margin: 0; }

  html,
  body {
    margin: 0;
    padding: 0;
    background: #ffffff;
  }

  .sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sheet__pages {
    transform: none !important;
    height: auto !important;
  }

  .sheet__page {
    box-shadow: none;
    margin: 0;
    break-after: page;
  }

  .sheet__page:last-child { break-after: auto; }

  /* The editor itself prints nothing. A draft has no printout: the PDF
     is the only way to paper, and making it is the finalisation that
     counts the use (12_nyomtatas.md 5.1). */
  .editor__left, .editor__label, .sheet-frame { display: none; }
}

/* ---------------------------------------------------------------------
   Printing is always light — chapter 10. The preview shows what comes out
   of the printer, so neither may follow a dark setting.
   --------------------------------------------------------------------- */

@media print {
  /* As specific as every theme selector above, and later: it wins. */
  :root,
  :root[data-theme],
  :root:not([data-theme="light"]) {
    color-scheme: light;

    --ink: #000000;
    --ink-soft: #333333;
    --line: #999999;
    --paper: #ffffff;
    --ground: #ffffff;
    --accent: #000000;
    --accent-ink: #ffffff;
    --accent-soft: #ffffff;
    --accent-faint: transparent;
    --ok: #000000;
    --pending: #000000;
    --bad: #000000;
    --warn: #000000;
    --warn-soft: #ffffff;
    --backdrop: transparent;
    --shadow: transparent;
    --shadow-strong: transparent;
  }

  .topbar,
  .nav,
  .whoami,
  .footer {
    display: none;
  }
}

/* The import page's instruction for the AI (13_import.md 4.2): a block of
   English for copying, shown as the machine will read it. */
.prompt-panel {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.prompt-panel > summary {
  cursor: pointer;
}

.prompt {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
}


/* 12_nyomtatas.md 3.1: a heading matching's lines carry their own label
   ("Paragraph 3") and a box for the letter; the paragraphs they name are
   numbered in the text. */
.sheet__items--plain { list-style: none; padding-left: 0; }
.sheet__items--plain .sheet__box { margin-left: 0.6em; }
.sheet__paragraph-number { font-weight: 700; margin-right: 0.35em; }

/* A text on its own page and in its edit — 14_lektoralas.md 3.2. */
.textedit__image { max-width: 100%; max-height: 18rem; display: block; }
.textview__body p { margin: 0 0 0.6rem; }
.textview__part { margin: 0 0 0.8rem; padding-left: 0.6rem; border-left: 3px solid var(--line, #ddd); }
.textview__rows th { text-align: right; vertical-align: top; padding-right: 0.5rem; }
.textview__rows td { vertical-align: top; padding: 0.2rem 0.5rem; }
.qrow__points { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.85rem; }
.qrow__points input { width: 4rem; }

/* A field a warning is about: a yellow frame (14_lektoralas.md 3.2). */
.qrow__answer--warn { outline: 2px solid var(--warn); outline-offset: 3px; border-radius: var(--radius); }
.qrow__warn { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--pending); }
.field--warn { outline: 2px solid var(--warn); outline-offset: 4px; border-radius: var(--radius); }


/* ---------------------------------------------------------------------
   The reviewing queue — 14_lektoralas.md 3. The list on the left, the
   unit on the right; below 768 pixels one at a time (3.3).
   --------------------------------------------------------------------- */

.review { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: 1.5rem; align-items: start; }
.review__list { position: sticky; top: 0.5rem; max-height: calc(100vh - 1rem); overflow-y: auto; }
.review__filters { margin: 0 0 0.6rem; }
.review__filters fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; }
.review__order { margin: 0 0 0.6rem; }
.queue { list-style: none; margin: 0; padding: 0; }
.queue__row { display: block; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.queue__row:hover, .queue__row:focus { background: var(--accent-soft); outline: none; }
.queue__row--open { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.queue__top { display: flex; gap: 0.5rem; justify-content: space-between; align-items: baseline; }
.queue__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.queue__marks { display: inline-flex; gap: 0.25rem; flex: 0 0 auto; }
.queue__meta { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.queue__later { margin-top: 0.8rem; }
.mark--warn { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--pending); }
.panel__back { display: none; margin: 0 0 0.5rem; }
.panel__head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.panel__bank { margin-left: auto; }
.panel__source { font-size: 0.8rem; color: var(--ink-soft); margin: 0.2rem 0 0.6rem; }
.band { background: var(--warn-soft); border-left: 4px solid var(--warn); padding: 0.5rem 0.8rem; margin: 0 0 0.8rem; border-radius: var(--radius); }
.band ul { margin: 0; padding-left: 1.1rem; }
.band__stale { color: var(--ink-soft); }
.panel__body--twins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: 1rem; align-items: start; }
.panel__twins { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.7rem; background: var(--paper); }
.twin { border-top: 1px solid var(--line); padding-top: 0.4rem; margin-top: 0.4rem; }
.twin__text { margin: 0; }
.twin__queue { margin: 0.2rem 0 0; font-size: 0.85rem; }

@media (max-width: 767px) {
  .review { display: block; }
  .review__list { position: static; max-height: none; overflow: visible; }
  .review__panel { display: none; }
  .review--open .review__list { display: none; }
  .review--open .review__panel { display: block; }
  .panel__back { display: block; }
  .panel__body--twins { display: block; }
  .panel__twins { margin-top: 1rem; }
  /* 3.3: the decision's buttons stay at the bottom while scrolling. */
  .panel__actions { position: sticky; bottom: 0; background: var(--ground); padding: 0.5rem 0; margin: 0; }
}

/* 4.5: the way back after a decision, at the bottom for a few seconds —
   one line, the unit's beginning cut short. On a phone it sits above the
   decision's buttons, which stay at the bottom (3.3). */
.undo-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; margin: 0 auto;
  width: fit-content; max-width: min(40rem, calc(100vw - 2rem)); display: flex; gap: 0.8rem; align-items: center;
  padding: 0.5rem 0.9rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); box-shadow: 0 4px 16px var(--shadow-strong); }
.undo-bar span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo-bar .button { flex: 0 0 auto; color: var(--paper); border-color: var(--paper); }
.review__hint { font-size: 0.85rem; color: var(--ink-soft); }
.review__keys { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.review__keys th { text-align: left; padding-right: 1rem; white-space: nowrap; }
.flash-line { animation: flash-line 1.2s ease-out; }
@keyframes flash-line { from { background: var(--warn-soft); } to { background: transparent; } }
@media (max-width: 767px) { .undo-bar { bottom: 7rem; } }

/* 8.: the key extensions — a dense table when only they are chosen, the
   list wider than the panel; on a phone each row a card. */
.review--table { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
.keytable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.keytable th { text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--ink-soft); padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); }
.keytable .queue__row { display: table-row; }
.keytable td { padding: 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.keytable__where { width: 45%; }
.keytable__key { min-width: 6rem; }
.keytable__do { width: 1%; white-space: nowrap; text-align: center; }
.keytable__do .button { padding: 0.15rem 0.55rem; }
.keyrow__title { display: block; }
.keyrow__context { display: block; color: var(--ink-soft); font-size: 0.85em; }
.keynote { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.keynote--bad { color: var(--bad); }
.keynote__link { font-size: 0.8rem; }
.keyrow--large { font-size: 1.1rem; margin: 0.4rem 0 1rem; }
.keyrow__keys { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0.8rem 0; }
.keyrow__keys dt { color: var(--ink-soft); font-size: 0.9rem; align-self: baseline; }
.keyrow__keys dd { margin: 0; font-weight: 600; }
.keyrow__notes { margin: 0.4rem 0 0; }
.keyrow__notes .keynote { font-size: 0.95rem; }
@media (max-width: 767px) {
  .keytable thead { display: none; }
  .keytable, .keytable tbody { display: block; }
  .keytable .queue__row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.2rem 0.6rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line); }
  .keytable td { border: 0; padding: 0; }
  .keytable__where { grid-column: 1 / -1; }
  .keytable__key::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--ink-soft); }
  .keytable__where { width: auto; }
  .keytable__who { grid-column: 1 / -1; grid-row: 3; font-size: 0.8rem; }
  .keytable__do { width: auto; align-self: end; }
}

/* 6.: the selection — the boxes in the list, the bar above it, each
   selected unit in full on the panel. */
.queue__pick { flex: 0 0 auto; margin: 0 0.35rem 0 0; }
.queue__pick + .queue__text { flex: 1 1 auto; }
.keytable .queue__pick { float: left; margin-top: 0.2rem; }
.queue__row--picked { background: var(--accent-soft); }
.queue__selection[hidden] { display: none; }
.queue__selection { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.4rem 0.6rem; margin: 0 0 0.5rem; background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); }
.selection__title { font-size: 1.1rem; margin: 0 0 0.6rem; }
.selection__held { font-size: 1rem; margin: 1rem 0 0.4rem; }
.picked { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 0.5rem 0.8rem; margin: 0 0 0.7rem; }
.picked--held { border-color: var(--bad); }
.picked__title { font-size: 1rem; margin: 0.3rem 0; }
@media (min-width: 768px) {
  .queue__selection [data-selection-show] { display: none; }
}

/* 10.2 and the slice's end: the folded blocks under the list. */
.review__block { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.7rem; background: var(--paper); }
.review__block summary { cursor: pointer; font-weight: 600; }
.bookreq { border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.5rem; }
.bookreq__levels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* 17_cimkek_konyvek.md 1.10: a reviewer's request, and its note. */
.bookreq__title { font-size: 1rem; margin: 0.3rem 0 0.4rem; }
.bookreq__ask { border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.5rem; }
.bookreq__note { font-size: 0.9rem; margin: 0.2rem 0; white-space: pre-line; }
/* 10.2: an active book answers to the name already — "A meglévő könyvre: X". */
.bookreq__assign { margin: 0.3rem 0 0.5rem; }
.bookreqs { margin: 1rem 0; }
/* The Books page (17_cimkek_konyvek.md 4.1): an inactive book at the end of
   the list, faded. */
.tagrow--inactive .tagrow__name,
.tagrow--inactive .tagrow__meta { opacity: 0.6; }
.shortages { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.review__more { margin-top: 0.8rem; }
.summary h3 { font-size: 0.95rem; margin: 0.6rem 0 0.2rem; }
.summary ul, .summary ol { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.synonyms__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.synonyms__list { width: 100%; margin-top: 1rem; }
.synonyms__list th, .synonyms__list td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 767px) { .synonyms__pair { grid-template-columns: 1fr; } }

/* 11.: two reviewers — the watch's line, the conflict's fields, the names. */
.panel--gone .panel__actions [data-decision] { display: none; }
.watch { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.8rem; }
.conflict { border: 1px solid var(--warn); border-left-width: 4px; background: var(--warn-soft); border-radius: var(--radius); padding: 0.6rem 0.8rem; margin: 0 0 0.8rem; }
.conflict__table { width: 100%; margin: 0.4rem 0; }
.conflict__table th, .conflict__table td { text-align: left; vertical-align: top; padding: 0.2rem 0.4rem; }
.presence__count { display: none; }
.presence__count summary { cursor: pointer; }
@media (max-width: 767px) {
  .presence__names { display: none; }
  .presence__count { display: inline-block; }
}

/* 9.: a worked example, its combination's current one beside it. */
.example-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: 1rem; align-items: start; }
.example-panel__combination { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.7rem 0.2rem; margin: 0 0 0.6rem; }
.example-side { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.7rem; background: var(--paper); }
.example-side__title { font-size: 0.9rem; margin: 0 0 0.3rem; }
.example-side__others { margin-top: 0.5rem; }
.example-choose { margin-right: 0.6rem; }
@media (max-width: 767px) {
  .example-panel { display: block; }
  .example-side { margin-top: 0.8rem; }
}

/* 7.1: a flagged unit's flags above its edit. */
.flags { border-left: 4px solid var(--bad); background: var(--paper); padding: 0.5rem 0.8rem; margin: 0 0 0.8rem; border-radius: var(--radius); }
.flags__open { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.flags__drafts { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* The system settings page — 15_sablonok_preferenciak.md 6, the layout of
   the preferences (3.2). One column, so it works on a phone too. */
.settings__section { margin: 1.5rem 0; }
.settings__reference { display: block; }
.settings__number { max-width: 7rem; }
.settings__sources { border: 0; padding: 0; }
.settings__modes { margin: 0.5rem 0; }
.settings__modes summary { cursor: pointer; font-weight: 600; }
.settings__mode { padding: 0.5rem 0 0.75rem; border-bottom: 1px solid var(--line); }
.settings__mode-name { margin: 0.5rem 0 0.25rem; font-weight: 600; }
.settings__actions { margin-top: 1.5rem; }

/* A field still showing the value above it (a teacher's, not yet their
   own), and one marked to go back to it at the save (3.2). */
.settings__item--faded input,
.settings__item--faded select { color: var(--ink-soft); }
.settings__reset { display: inline-flex; gap: 0.3rem; align-items: baseline; font-size: 0.85rem; color: var(--accent); cursor: pointer; }
.settings__resetting-note { display: none; }
.settings__item--resetting .settings__resetting-note { display: inline; margin-left: 0.4rem; }
.settings__item--resetting input:not(.settings__reset-box),
.settings__item--resetting select { color: var(--ink-soft); background: var(--ground); }

/* 16_archivum_megosztas_statisztika.md 2.3: the sources that moved on. */
.final__changes { max-width: 60rem; margin: 0 0 1rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--warn); background: var(--paper); }
.final__changes summary { cursor: pointer; }
.final__changes ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.paper-use { margin: 0 0 1rem; padding: 0.35rem 0.75rem; border-left: 3px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; }
.paper-use p { margin: 0.2rem 0; }

/* The Statistics page — 16_archivum_megosztas_statisztika.md 4. Wide tables
   scroll sideways on a phone; the page itself does not. */
.stats__part { margin-bottom: 1.25rem; }
.stats__part > summary { cursor: pointer; list-style-position: inside; }
.stats__part > summary h2 { display: inline; }
.stats__scroll { overflow-x: auto; max-width: 100%; }
.stats__table { border-collapse: collapse; margin: 0.5rem 0; }
.stats__table th, .stats__table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.stats__table thead th { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.stats__num { text-align: right; white-space: nowrap; }
.stats__table td.stats__num, .stats__table th.stats__num { text-align: right; }
.stats__note { color: var(--ink-soft); font-size: 0.85rem; font-weight: normal; }
.stats__rising { color: var(--bad); font-weight: 600; margin-left: 0.35rem; }
.stats__settled td { color: var(--ink-soft); }
.stats__list { margin: 0.25rem 0 0.75rem; }
.stats__table form { margin: 0; }

/* The Coverage page — 16_archivum_megosztas_statisztika.md 5.1. Nothing,
   too little, enough: three tinted cells, and the number always written, so
   the colour is never the only sign. On a phone the table scrolls sideways
   with its row headings held in place. */
.cov__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.cov__controls select { padding: 0.35rem 0.45rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; max-width: 16rem; }
.cov__check { padding-bottom: 0.35rem; }
.cov__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.cov__key { display: inline-block; min-width: 2.5rem; padding: 0.1rem 0.4rem; border-radius: var(--radius); text-align: center; font-size: 0.85rem; }
.cov__scroll { overflow-x: auto; max-width: 100%; }
.cov { border-collapse: separate; border-spacing: 2px; }
.cov th, .cov td { padding: 0.25rem 0.5rem; white-space: nowrap; }
.cov__colhead { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; text-align: right; }
.cov__head { position: sticky; left: 0; z-index: 1; background: var(--ground); text-align: left; font-weight: 600; }
.cov__head--child { font-weight: normal; padding-left: 1.4rem; }
.cov__cell { text-align: right; border-radius: 4px; }
.cov__cell a { color: inherit; text-decoration: none; display: inline-block; min-width: 2rem; }
.cov__cell a:hover, .cov__cell a:focus { text-decoration: underline; }
.cov__cell--none { background: var(--bad-soft); color: var(--bad); }
.cov__cell--few { background: var(--warn-soft); color: var(--ink); }
.cov__cell--enough { background: var(--ok-soft); color: var(--ink); font-weight: 600; }
.cov__items { display: block; font-size: 0.75rem; color: var(--ink-soft); font-weight: normal; }
.cov__toggle { background: none; border: none; padding: 0; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.cov__toggle::before { content: "▸ "; color: var(--ink-soft); }
.cov__toggle[aria-expanded="true"]::before { content: "▾ "; }

/* The Tags page — 17_cimkek_konyvek.md 2. A row is the name and, after it,
   how many units and aliases; a grammar group folds its topics away. On a
   phone the row wraps: the figures go under the name. */
.tagsearch { flex-wrap: wrap; align-items: center; }
.tagsearch__unused { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.tagsearch__elsewhere { margin: 0 0 0.75rem; color: var(--ink-soft); }
.tagsearch__elsewhere a { margin-left: 0.25rem; }
.taglist { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.taglist--group { margin: 0 0 0.5rem 1.25rem; }
.tagrow, .taggroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--line); }
.tagrow__name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.tagrow__meta { color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.tagrow__unused, .tagrow__fixed { display: inline-block; padding: 0 0.4rem; border-radius: var(--radius); font-size: 0.8rem; }
.tagrow__unused { background: var(--warn-soft); color: var(--ink); }
.tagrow__fixed { background: var(--line); color: var(--ink); margin-right: 0.4rem; }
.taggroup { margin: 0; }
.taggroup__head { cursor: pointer; font-weight: 600; list-style: none; }
.taggroup__head::-webkit-details-marker { display: none; }
.taggroup__head::before { content: "▸"; color: var(--ink-soft); width: 0.9rem; flex: 0 0 auto; }
.taggroup[open] > .taggroup__head::before { content: "▾"; }
.taggroup__head .tagrow__name { flex-basis: 10rem; }
.taggroup__head .tagrow__meta { font-weight: normal; }
@media (max-width: 34rem) {
  .tagrow__meta { white-space: normal; }
  .taglist--group { margin-left: 0.75rem; }
}
/* The row's ⋯ menu and the panel under it (2.1). On a phone the menu opens
   as a full-width sheet under the row. */
.tagrow { position: relative; }
.tagmenu { position: relative; flex: 0 0 auto; }
.tagmenu__open { list-style: none; cursor: pointer; padding: 0 0.5rem; border-radius: var(--radius); color: var(--ink-soft); font-weight: 700; }
.tagmenu__open::-webkit-details-marker { display: none; }
.tagmenu__open:hover, .tagmenu[open] > .tagmenu__open { background: var(--line); color: var(--ink); }
.tagmenu__body { position: absolute; right: 0; top: 1.6rem; z-index: 5; display: flex; flex-direction: column; min-width: 11rem; padding: 0.25rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 4px 12px var(--shadow); }
.tagmenu__item { display: block; width: 100%; padding: 0.4rem 0.8rem; border: none; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tagmenu__item:hover, .tagmenu__item:focus { background: var(--line); }
.tagpanel { flex: 1 1 100%; }
.tagpanel:empty { display: none; }
.tagpanel__form { margin: 0.5rem 0 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.tagpanel__title { margin: 0 0 0.5rem; font-size: 1rem; }
.tagpanel__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tagpanel .alert { margin: 0.5rem 0; }
.tagpanel .alert .button { margin-top: 0.4rem; }
.tagnew { margin: -0.5rem 0 0.75rem; }
@media (max-width: 34rem) {
  .tagmenu { position: static; }
  .tagmenu__body { left: 0; right: 0; top: auto; margin-top: 0.25rem; min-width: 0; }
  .tagmenu__item { padding: 0.65rem 0.9rem; }
}
/* A topic's place in its group (1.2): ▲▼ everywhere, the drag handle only
   where there is a fine pointer — on a phone the buttons are the way. */
.tagrow__handle { flex: 0 0 auto; cursor: grab; color: var(--ink-soft); user-select: none; }
.tagrow--dragging { opacity: 0.5; }
.tagorder { display: inline-flex; gap: 0.15rem; flex: 0 0 auto; }
.tagorder__step { padding: 0 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.5; cursor: pointer; }
.tagorder__step:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.tagorder__step:disabled { opacity: 0.35; cursor: default; }
@media (pointer: coarse) { .tagrow__handle { display: none; } }
@media (max-width: 34rem) { .tagorder__step { padding: 0.25rem 0.6rem; font-size: 0.9rem; } }
/* A tag's aliases in its panel (1.8): the own name first, marked, without
   a button. */
.aliaslist { list-style: none; margin: 0.5rem 0; padding: 0; }
.aliaslist__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.25rem 0; border-bottom: 1px solid var(--line); }
.aliaslist__word { overflow-wrap: anywhere; }
.aliaslist__own { color: var(--ink-soft); font-size: 0.85rem; }
.aliasadd { margin-top: 0.5rem; }
/* Merging and deactivating (17_cimkek_konyvek.md 2., 2.1): a row's button
   or the reason in its place, the preview's numbers, and "Legutóbbi
   műveletek" under the list. */
.tagrow__action { flex: 0 0 auto; }
.tagrow__blocked { color: var(--ink-soft); font-size: 0.85rem; }
.tagreport { margin: 0.5rem 0; }
.tagreport p { margin: 0.25rem 0; }
.tagreport__blocks { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.tagops { margin-top: 1.5rem; }
.tagops__title { font-size: 1rem; margin: 0 0 0.5rem; }
@media (max-width: 34rem) { .tagrow__action { flex-basis: 100%; } }
/* The Statistics page: a missed search's two buttons, and the alias panel
   under its row (17_cimkek_konyvek.md 1.8). */
.stats__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stats__panelrow td { padding: 0; border-bottom: none; }
.stats__panelrow .tagpanel__form { margin: 0.25rem 0 0.75rem; max-width: 36rem; }

/* The searchable chooser (17_cimkek_konyvek.md 1.10): a box, the chosen
   name in it, the options under it. Inside a .field it takes the field's
   own input style; the room on the right is the clearing ×. */
.choice { position: relative; display: flex; align-items: center; min-width: 12rem; }
.choice__box {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0.45rem 1.9rem 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.field input.choice__box:not([type="checkbox"]):not([type="radio"]) { padding-right: 1.9rem; }
.choice__box:focus { border-color: var(--accent); outline: 2px solid var(--accent-faint); outline-offset: 1px; }
.choice__clear {
  position: absolute;
  right: 0.25rem;
  padding: 0.1rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.choice__clear:hover { color: var(--accent); }
.choice__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 16rem;
  margin: 2px 0 0;
  padding: 0.2rem 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 4px 12px var(--shadow);
}
.choice__option { padding: 0.4rem 0.6rem; cursor: pointer; }
.choice__option:hover,
.choice__option[aria-selected="true"] { background: var(--accent-soft); }
.choice__heading { padding: 0.45rem 0.6rem 0.15rem; color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; }
.choice__where,
.choice__hint { color: var(--ink-soft); }
.choice__hint { font-size: 0.85rem; }
.choice__empty { padding: 0.4rem 0.6rem; color: var(--ink-soft); font-size: 0.9rem; }
.bulkmenu__body .choice { flex: 1 1 14rem; max-width: 24rem; }

/* The book and its unit (17_cimkek_konyvek.md 1.11, 4.2): two fields of
   the form's grid, held together for bookfield.js only. A unit saved
   without a book is marked where it is. */
.book-field { display: contents; }
.field--bad input:not([type="checkbox"]):not([type="radio"]),
.field--bad textarea { border-color: var(--bad); }
.field input[data-bookfield-unit]:disabled { background: var(--ground); color: var(--ink-soft); cursor: not-allowed; }