/* Mobile first, right to left. One decision per screen; large tap targets (spec). */
:root {
  --fg: #1b1b1f; --muted: #5b5b66; --bg: #fbfbfd; --card: #fff; --line: #d9d9e0;
  --none: #1f7a4d; --minor: #a86800; --major: #b3261e; --focus: #2457c5; --mark: #ffe58a;
  font-family: system-ui, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 18px; line-height: 1.5; color: var(--fg); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; gap: 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--card); }
header .app-name { font-weight: 600; flex: 1; }
header a { color: var(--muted); font-size: .9rem; }
header .guide-link { min-height: 2.2rem; padding: .2rem .8rem; font-size: .9rem; }
main { max-width: 42rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
h1:focus { outline: none; }
h2 { font-size: 1rem; color: var(--muted); margin: 1.2rem 0 .3rem; font-weight: 600; }
p { margin: .3rem 0; }
.note { color: var(--muted); font-size: .9rem; }
.error { color: var(--major); font-weight: 600; }
.step-count, .progress { color: var(--muted); font-size: .9rem; }

button, .button {
  display: inline-block; min-height: 3rem; padding: .6rem 1.2rem; border-radius: .6rem; border: 1px solid var(--line);
  font: inherit; cursor: pointer; text-decoration: none; text-align: center; background: var(--card); color: var(--fg);
}
button.primary, .button:not(.secondary) { background: var(--focus); border-color: var(--focus); color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }

.line { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .6rem .9rem; margin: .5rem 0; }
.line h2 { margin: 0 0 .2rem; }
.sentence { font-size: 1.3rem; }
mark { background: var(--mark); padding: 0 .15rem; border-radius: .2rem; }
mark.insertion { font-size: .8rem; color: var(--muted); border: 1px dashed var(--muted); background: transparent; }
.context { color: var(--muted); }

.labels { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 1rem 0 .2rem; }
@media (min-width: 40rem) { .labels { grid-template-columns: repeat(3, 1fr); } }
button.label { min-height: 4rem; font-size: 1.15rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
button.label kbd { font: .8rem monospace; color: var(--muted); border: 1px solid var(--line); border-radius: .3rem; padding: 0 .35rem; }
button.label.none[aria-pressed="true"] { background: var(--none); border-color: var(--none); color: #fff; }
button.label.minor[aria-pressed="true"] { background: var(--minor); border-color: var(--minor); color: #fff; }
button.label.major[aria-pressed="true"] { background: var(--major); border-color: var(--major); color: #fff; }
button.label[aria-pressed="true"] kbd { color: #fff; border-color: #fff; }

fieldset { border: 1px solid var(--line); border-radius: .6rem; margin: .8rem 0; padding: .4rem .8rem; }
.categories label.category { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); min-height: 2.75rem; }
.categories label.category:last-child { border-bottom: 0; }
.categories .title { font-weight: 600; margin-inline-start: .4rem; }
.categories .rule { display: block; color: var(--muted); font-size: .85rem; margin-inline-start: 1.6rem; }
.ref-suspect { margin: .8rem 0; }
textarea, input[type=text], input[type=number] { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: .4rem; }
input[type=checkbox], input[type=radio] { width: 1.2rem; height: 1.2rem; margin-inline-end: .4rem; vertical-align: middle; }

.label-cards { display: grid; gap: .6rem; }
.label-card { background: var(--card); border: 1px solid var(--line); border-inline-start: .4rem solid var(--line); border-radius: .6rem; padding: .5rem .8rem; }
.label-card.none { border-inline-start-color: var(--none); }
.label-card.minor { border-inline-start-color: var(--minor); }
.label-card.major { border-inline-start-color: var(--major); }
.label-card h3 { margin: .2rem 0; }
.example .pair { font-size: 1.15rem; }
.feedback { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.custom-goal { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: 1rem 0; }
.custom-goal input { width: 6rem; }
.guidelines p { margin: .5rem 0; }
footer.attribution { margin-top: 1.5rem; color: var(--muted); font-size: .8rem; text-align: left; }

/* Admin (English, left to right). */
body.admin { font-size: 15px; }
body.admin main { max-width: 70rem; }
body.admin table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem; font-size: .9rem; }
body.admin th, body.admin td { border: 1px solid var(--line); padding: .25rem .4rem; text-align: left; }
body.admin button { min-height: 2.2rem; padding: .3rem .8rem; }
body.admin section { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .5rem 1rem; margin: 1rem 0; }
body.admin pre { white-space: pre-wrap; background: #f2f2f6; padding: .5rem; border-radius: .4rem; max-height: 20rem; overflow: auto; }
.guidelines .table-wrap { overflow-x: auto; }
.guidelines table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: .5rem 0; }
.guidelines th, .guidelines td { border: 1px solid var(--line); padding: .3rem .5rem; text-align: right; vertical-align: top; }
.guidelines code { font-size: .85em; background: #f2f2f6; padding: 0 .2rem; border-radius: .2rem; }
.guidelines blockquote { border-inline-start: .25rem solid var(--line); margin: .5rem 0; padding-inline-start: .8rem; color: var(--muted); }

/* Category examples under each picker option (owner, 2026-11-01). */
.category-option { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.category-option:last-child { border-bottom: 0; }
.category-option label.category { border-bottom: 0; }
.category-option.other .title { font-style: italic; }
.cat-examples { list-style: none; margin: .1rem 0 .3rem; padding-inline-start: 1.6rem; font-size: .85rem; color: var(--muted); }
.cat-example .pair { display: block; color: var(--fg); }
.cat-example .note { display: block; }
.empty-side { color: var(--muted); font-size: .8rem; }
.examples-toggle { display: none; min-height: 2rem; padding: .1rem .6rem; font-size: .8rem; margin-inline-start: 1.6rem; }
@media (max-width: 40rem) {
  .examples-toggle { display: inline-block; }
  .category-option:not(.show-examples) .cat-examples { display: none; }
}

/* Pair task (public/pairs/): two versions A and B, one difference marked, the label set's options. */
body.pairs .version .sentence { font-size: 1.25rem; line-height: 1.9; }
body.pairs mark.diff { cursor: pointer; position: relative; }
body.pairs mark.diff::after { content: attr(data-n); font-size: .65rem; vertical-align: super; margin-inline-start: .1rem; color: var(--muted); }
body.pairs mark.diff.current { outline: 2px solid var(--focus); }
body.pairs mark.diff.answered { background: #e3eefc; }
body.pairs mark.diff.insertion { background: transparent; border: 1px dashed var(--muted); }
.diff-block { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .8rem; margin: .8rem 0; }
.diff-block.current { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.diff-block h2 { margin: 0 0 .3rem; }
.diff-sides { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 1.15rem; }
.diff-sides .side-name { color: var(--muted); font-weight: 600; }
/* As many columns as fit (at least 8rem each), so 2 options sit side by side even on a phone and
   more options wrap; in RTL the first option (the label set's order 1) is on the right. */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .5rem; margin: .6rem 0; }
.options[data-count="2"] { gap: .75rem; }
/* Four options (v2 sets): 2 x 2, or one row of 4 on a wide screen; never 3 + 1. */
.options[data-count="4"] { grid-template-columns: 1fr 1fr; }
@media (min-width: 40rem) { .options[data-count="4"] { grid-template-columns: repeat(4, 1fr); } }
.options[data-count="2"] button.option { min-height: 5rem; font-size: 1.2rem; justify-content: center; text-align: center; }
/* Option colors come from the label set (custom properties set by pairs.js); the defaults are neutral. */
button.option {
  min-height: 3.8rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: .4rem; text-align: start;
  background: var(--opt-bg, var(--card)); color: var(--opt-fg, var(--fg)); border: 2px solid var(--opt-border, var(--line));
}
button.option kbd { font: .8rem monospace; color: inherit; border: 1px solid currentColor; border-radius: .3rem; padding: 0 .35rem; opacity: .8; }
button.option.chosen { outline: 4px solid var(--focus); outline-offset: 2px; }
button.option.chosen .name::before { content: "\2713  "; }
button.option.other { opacity: .55; }
.step-count { margin: .2rem 0 .4rem; }
/* Type chips (step 2): large tap targets, the key on each, a clear selected state, muted when off. */
.chips { margin: .8rem 0; }
.chips h2 { margin: 0 0 .3rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
button.chip { min-height: 3rem; padding: .4rem .9rem; border-radius: 1.5rem; border: 2px solid var(--line); background: var(--card); display: inline-flex; gap: .5rem; align-items: center; }
button.chip kbd { font: .75rem monospace; color: var(--muted); border: 1px solid var(--line); border-radius: .3rem; padding: 0 .3rem; }
button.chip.chosen { background: var(--focus); border-color: var(--focus); color: #fff; }
button.chip.chosen kbd { color: #fff; border-color: #fff; }
button.chip.chosen .name::before { content: "\2713  "; }
.chips.muted button.chip { opacity: .4; }
.keys-hint { margin-top: .4rem; }
.shadow-feedback { font-size: 1.15rem; font-weight: 600; padding: .6rem .8rem; border-radius: .6rem; border: 2px solid var(--line); }
.shadow-feedback.ok { border-color: var(--none); }
.shadow-feedback.miss { border-color: var(--minor); }
.invisible-char { font-size: .75rem; color: var(--muted); margin-inline-start: .2rem; }
.category-step { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .95rem; color: var(--muted); }
.category-step select { font: inherit; min-height: 2.75rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--card); flex: 1; min-width: 12rem; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Guide screen: the consent line for new users (pairs copy v6), above "start". */
.consent { margin-top: 1rem; }

/* Usage page (public/pairs/usage.html): inline SVG charts. Colors only through these classes, so
   the page reads in light and dark themes (it follows the system setting). */
body.usage {
  --viz-bar: #2457c5; --viz-axis: #9a9aa6;
  --heat-0: #eef0f5; --heat-1: #c6d4f2; --heat-2: #8eaae6; --heat-3: #4f78d6; --heat-4: #1d3f99;
}
@media (prefers-color-scheme: dark) {
  body.usage {
    --fg: #e8e8ee; --muted: #a9a9b6; --bg: #15161a; --card: #1e1f25; --line: #3a3b44;
    --viz-bar: #7ea3ff; --viz-axis: #6b6b78;
    --heat-0: #262833; --heat-1: #2c3f73; --heat-2: #3c5cae; --heat-3: #5f86e8; --heat-4: #a9c2ff;
    color: var(--fg); background: var(--bg);
  }
  body.usage pre { background: #26272e; }
  body.usage header a { color: var(--muted); }
}
body.usage h3 { font-size: .95rem; margin: 1rem 0 .2rem; }
.chart { display: block; max-width: 48rem; height: auto; margin: .4rem 0; color: var(--fg); }
.chart-bar { fill: var(--viz-bar); }
.chart-axis { stroke: var(--viz-axis); stroke-width: 1; }
.chart-label, .chart-value { fill: currentColor; font-size: 12px; font-family: inherit; }
.chart-label { fill: var(--muted); }
.heat-0 { fill: var(--heat-0); } .heat-1 { fill: var(--heat-1); } .heat-2 { fill: var(--heat-2); }
.heat-3 { fill: var(--heat-3); } .heat-4 { fill: var(--heat-4); }
table.sortable button.sort { min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }