/* Owner console: the game's palette, a working-tool layout. */
:root {
  --bg: #EEF3F7; --ink: #0E2A47; --muted: #4A6378; --line: #B9CCDB; --surface: #FFFFFF;
  --accent: #1E5A86; --accent-ink: #FFFFFF; --good: #2E7D4F; --warn: #9A5B00; --bar: #DDE7EF;
  --now: #C2410C; --now-bg: #FFE7D1; --last-bg: #FFF6CF;
  --dim: #7D93A6; --ignored-bg: #ECEFF2; --added-ink: #4C8A64; --added-bg: #E5F3EA;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --grid: #E4ECF3;   /* charts: three hues checked for colour vision on this surface */
  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-body: 'Heebo', -apple-system, 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1D31; --ink: #E6EEF5; --muted: #A3BACD; --line: #2E4E6E; --surface: #12304F;
    --accent: #5FA0D6; --accent-ink: #0B1D31; --good: #6CC08F; --warn: #E3A64B; --bar: #1A3A5A;
    --now: #FB923C; --now-bg: #4A2A12; --last-bg: #3B3718;
    --dim: #7590A8; --ignored-bg: #1D3045; --added-ink: #86C29C; --added-bg: #173A2B;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --grid: #234567;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1D31; --ink: #E6EEF5; --muted: #A3BACD; --line: #2E4E6E; --surface: #12304F;
  --accent: #5FA0D6; --accent-ink: #0B1D31; --good: #6CC08F; --warn: #E3A64B; --bar: #1A3A5A;
  --now: #FB923C; --now-bg: #4A2A12; --last-bg: #3B3718;
  --dim: #7590A8; --ignored-bg: #1D3045; --added-ink: #86C29C; --added-bg: #173A2B;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --grid: #234567;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-body); }
[hidden] { display: none !important; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; min-height: 44px; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.bar h1 { margin: 0; font: 900 26px/1 var(--font-display); }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }

main { max-width: 1180px; margin: 0 auto; padding: 20px; }
.gate { max-width: 460px; margin: 60px auto; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.note { color: var(--muted); font-size: 13px; margin: 0; }
.fact { display: inline-block; margin-inline-end: .45em; }
code { font: 13px ui-monospace, Menlo, monospace; direction: ltr; unicode-bidi: embed; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }   /* on a phone the tabs wrap: one row wider than the screen made the page zoom out */
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.tile b { font: 700 28px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: 13px; }
.tile small { color: var(--muted); font-size: 12px; }

h2 { font: 700 20px/1.2 var(--font-display); margin: 26px 0 10px; }
h3 { font-size: 14px; color: var(--muted); margin: 16px 0 6px; font-weight: 700; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
th, td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }
tr.sel td { background: var(--bar); }
/* swapping two boards: the one moving, and the boards it cannot go to */
button.swap { min-height: 30px; padding: 0 10px; font-size: 13px; }
button.swap.primary { min-height: 30px; }
tr.swapping td { background: var(--bar); box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
tr.dim td { opacity: .4; }
.swap-note { font-weight: 600; color: var(--accent); }
td.word { font-weight: 500; }
.meter { position: relative; height: 8px; min-width: 80px; background: var(--bar); border-radius: 4px; overflow: hidden; }
.found-by { display: flex; align-items: center; gap: 8px; } .found-by .meter { flex: 1; min-width: 60px; }
.meter i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.pill.frozen { border-color: var(--accent); color: var(--accent); }
.pill.live { border-color: var(--good); color: var(--good); font-weight: 700; }
.pill.loan { border-color: var(--warn); color: var(--warn); }
.pill.fb { text-decoration: none; color: var(--muted); }
.pill.fb.open { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.summary.warn { color: var(--warn); font-weight: 600; }
.letters { letter-spacing: 2px; font-family: var(--font-display); font-weight: 700; }
.letters b { color: var(--accent); }
.empty { color: var(--muted); padding: 10px 0; }
@media (max-width: 640px) { main { padding: 14px; } .bar { padding: 10px 14px; } .tabs button { padding: 0 10px; } }
textarea.dump { width: 100%; min-height: 120px; font: 12px/1.4 ui-monospace, Menlo, monospace; direction: ltr; margin-top: 8px; }
.launch p { margin: 0 0 12px; }
.launch .controls, .card > .controls { margin-bottom: 12px; }
.card.boards + .card { margin-top: 20px; }   /* Updates, full width under the boards (owner, 2026-10-26) */
/* the boards list fits the page without side scrolling (owner, 2026-10-26): when room runs out, the
   headings and the state's pills wrap, a pill never inside itself */
.boards th { white-space: normal; vertical-align: bottom; }
.boards td.state, .boards td.review { white-space: normal; }
.boards td.review { min-width: 7.5em; font-size: 13px; color: var(--muted); }
.boards .pill { white-space: nowrap; }
input[type=date] { font: inherit; color: inherit; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
button:disabled { opacity: .5; cursor: default; }

/* players' feedback */
.reports { display: flex; flex-direction: column; gap: 10px; }
.report { background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.report.done { border-inline-start-color: var(--line); opacity: .7; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.report-head .word { font-size: 17px; }
.report-head > button.small { min-height: 30px; padding: 0 10px; margin-inline-start: auto; }
.report-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chips { gap: 6px; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
td.wrap { white-space: normal; min-width: 200px; }
a { color: var(--accent); }

/* who counts as a player (the filter in the controls) */
.pill.kind-player { border-color: var(--good); color: var(--good); }
.pill.kind-auto { border-color: var(--warn); color: var(--warn); }
.pill.kind-test, .pill.kind-owner, .pill.kind-driveby { opacity: .75; }
code.ua { font-size: 12px; word-break: break-all; }
ul.changes { margin: 4px 0 0; padding-inline-start: 16px; font-size: 12px; color: var(--muted); }   /* reviewed boards an update changed */

/* the board players have now (owner, 2026-10-25) */
tr.current td { background: var(--now-bg); }
tr.current td:first-child { box-shadow: inset 4px 0 0 var(--now); }
.pill.now { border-color: var(--now); color: var(--now); font-weight: 700; }
/* a board's or a player's own page: back to the list, the boards before and after */
nav.pager { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4px; font-size: 14px; }
/* researching a word: the dictionaries, and the verdict */
.dicts { display: inline-flex; gap: 10px; font-size: 13px; }
.verdict { display: inline-flex; align-items: center; gap: 6px; }
button.small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.card.pending { margin-bottom: 8px; }
.card.pending .summary { margin: 0 0 10px; }
/* refreshing on its own: news waiting for the owner's hands */
#reload.fresh { border-color: var(--now); color: var(--now); font-weight: 700; }
input[type=search] { font: inherit; color: inherit; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); width: 14em; }
/* the spelling a missing word is added in (owner, 2026-10-25) */
.editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
input.spell { font: 500 16px var(--font-body); color: inherit; min-height: 32px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); width: 9em; }
.card.add-word { margin-bottom: 8px; }
.card.add-word h3 { margin-top: 0; }
/* the row last acted on, while the page stays (owner, 2026-10-25) */
tr.last td { background: var(--last-bg); }
/* decided words, wherever refused words are listed (owner, 2026-10-26): ignored or not a word dimmed, added
   (Missing) dimmed green; the decision's own cell stays clear, and the last row clicked keeps its bar */
tr.decided-ignored td { background: var(--ignored-bg); }
tr.decided-ignored td:not(.decision), tr.decided-ignored td:not(.decision) a { color: var(--dim); }
tr.undecided td:not(.decision) { font-weight: 500; }
tr.undecided td.word { font-weight: 600; }
tr.decided-added td { background: var(--added-bg); }
tr.decided-added td:not(.decision), tr.decided-added td:not(.decision) a { color: var(--added-ink); }
span.decided-ignored { color: var(--dim); }
span.decided-added { color: var(--added-ink); background: var(--added-bg); border-radius: 4px; padding: 0 3px; }
.report.added { background: var(--added-bg); }
/* lists with a filter bar (owner, 2026-10-26): chips by group, a choice, a date range, a search; ticks and actions */
.fbar { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ftop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 6px 28px; }
.fgroup { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; }
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fgroup.frange { grid-column: 1 / -1; }   /* the dates and their presets on one line */
.flabel { font-size: 12px; color: var(--muted); }
button.chip { min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13px; }
button.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.chip .n { font-variant-numeric: tabular-nums; opacity: .75; }
button.chip.zero:not([aria-pressed="true"]) { opacity: .5; }
.fbar select, .frange input[type=date] { min-height: 30px; font-size: 13px; }
.fbar select { padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 100%; }
.fbar input[type=search] { min-height: 32px; width: 14em; }
.fcount { margin-inline-start: auto; }
.abar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; min-height: 32px; }
th.tick, td.tick { width: 1%; padding-inline-end: 0; }
td.tick input, th.tick input { width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; }
tr.none td { text-align: center; }
tr.last td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.report.last { background: var(--last-bg); }
/* charts (owner, 2026-10-26): thin marks, hairline grid, the values on hover and in a table */
.chart-box { display: flex; flex-direction: column; gap: 6px; }
.fig { position: relative; direction: ltr; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .endlabel { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart .line.s1 { stroke: var(--s1); } .chart .line.s2 { stroke: var(--s2); } .chart .line.s3 { stroke: var(--s3); }
.chart .dot.s1, .chart .bar.s1 { fill: var(--s1); } .chart .dot.s2, .chart .bar.s2 { fill: var(--s2); } .chart .dot.s3, .chart .bar.s3 { fill: var(--s3); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
i.key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
i.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
i.s1 { background: var(--s1); } i.s2 { background: var(--s2); } i.s3 { background: var(--s3); }
.tip { position: absolute; top: 0; direction: ltr; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); z-index: 2; }
.tip-title { color: var(--muted); margin-bottom: 2px; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-row b { font-size: 13px; font-variant-numeric: tabular-nums; }
details.chart-data summary { cursor: pointer; font-size: 12px; color: var(--muted); }
td.c { text-align: center; min-width: 48px; }
/* a board's ranks in the list: who reached each, as a share of its players */
.ranks { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; vertical-align: middle; }
.ranks i { display: block; width: 6px; background: var(--s1); border-radius: 2px 2px 0 0; min-height: 1px; }
.ranks i.none { background: var(--grid); }
/* Hebrew data in the English console: its own direction, a font that has it */
bdi[lang="he"] { font-family: var(--font-body); }
.bar h1 bdi { font: inherit; }
button.danger { border-color: var(--warn); color: var(--warn); }   /* an emergency switch (Experiments: Off now) */
/* a phone (owner, 2026-10-26): each filter's label above its choices, so the choices take the whole width */
@media (max-width: 640px) {
  .fgroup { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fbar, .card { padding: 10px; }
  .ftop input[type=search] { flex: 1 1 10em; width: auto; }
}

/* an experiment's testers (owner, 2026-10-27): codes as chips, the code to add, on one wrapping line */
.exp .testers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.exp .testers input { width: 9em; max-width: 100%; }
.pill.tester { display: inline-flex; align-items: center; gap: 4px; }