:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #1b2230;
  --muted: #4a5263;
  --line: #c9ccd3;
  --accent: #1d5a45;
  --accent-ink: #ffffff;
  --accent-soft: #e2efe9;
  --s1: #1e4a85;
  --s1-soft: #e3ebf7;
  --s2: #9a3412;
  --s2-soft: #f8e6dc;
  --out: #5b6070;
  --warn: #8a4b00;
  --gold: #b07a12;
  --gold-ink: #8a5a00;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 6px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --surface: #1a2028;
    --ink: #e9e7e2;
    --muted: #b3b8c2;
    --line: #3a4350;
    --accent: #67c3a0;
    --accent-ink: #0e1a15;
    --accent-soft: #1d3029;
    --s1: #9dbdf2;
    --s1-soft: #1d2a3d;
    --s2: #f4a582;
    --s2-soft: #3a2419;
    --out: #b3b8c2;
    --warn: #f2c27a;
    --gold: #f2b84b;
    --gold-ink: #f2b84b;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--sans); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; }
h1 { font-size: clamp(28px, 6vw, 40px); margin: 0 0 8px; }
h2 { font-size: 24px; margin: 28px 0 10px; }
h3 { font-size: 19px; margin: 22px 0 6px; }
a { color: var(--accent); }
.masthead { border-top: 6px solid var(--accent); padding: 22px 0 10px; }
.lede { margin: 0; max-width: 62ch; color: var(--muted); }

input, select, textarea, button { font: inherit; font-size: 16px; color: inherit; }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
textarea { min-height: 96px; resize: vertical; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  cursor: pointer; text-align: center;
}
@media (hover: hover) { button:hover:not(:disabled) { border-color: var(--ink); } }
button:disabled { cursor: not-allowed; color: var(--muted); background: transparent; border-style: dashed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.linkish { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 8px 4px; }
.linkish.danger { color: var(--s2); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* setup and entry folds */
details { border-bottom: 1px solid var(--line); padding: 4px 0 14px; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0 6px; }
.sum-h { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.sum-sub { color: var(--muted); }
.setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; max-width: 760px; }
.setup .wide { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.f input, .f select { font-weight: 400; }
fieldset.method { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
fieldset.method legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.radio { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.radio input, .check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.cite { margin: -4px 0 0; color: var(--muted); }
table.sides { border-collapse: collapse; width: 100%; }
table.sides th { text-align: left; font-weight: 600; padding: 0 8px 4px 0; }
table.sides td { padding: 0 8px 8px 0; }
table.sides td:first-child { width: 44%; }
table.sides.no-alts th:nth-child(3), table.sides.no-alts td:nth-child(3) { display: none; }
.entry { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.entry label { font-weight: 600; }
.err { color: var(--s2); margin: 0; min-height: 0; }
.err:empty { display: none; }
.privacy { margin: 0; color: var(--muted); }
.note { background: var(--s2-soft); color: var(--ink); padding: 10px 14px; border-radius: var(--r); margin: 12px 0 0; }

/* board */
#board h2 { margin-top: 22px; }
.sides-now { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.side { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.side.s1 { border-top: 5px solid var(--s1); }
.side.s2 { border-top: 5px solid var(--s2); }
.side-name { grid-column: 1 / -1; font-weight: 700; overflow-wrap: anywhere; }
.side .big { font: 700 44px/1 var(--serif); }
.side.s1 .big { color: var(--s1); }
.side.s2 .big { color: var(--s2); }
.side .of { color: var(--muted); line-height: 1.35; }
.side .alt-left { grid-column: 1 / -1; margin-top: 4px; }
.reach { margin: 12px 0 0; font-weight: 600; }
.reach.short { color: var(--warn); }
.seat-line { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

#grid { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 6px; }
.seat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 6px 6px; min-height: 64px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 4px solid var(--accent); border-radius: var(--r); overflow: hidden;
}
.seat.alt { border-bottom-color: var(--gold); }
.seat.empty { border-style: dashed; border-bottom-width: 1px; background: transparent; }
.seat.on { outline: 3px solid var(--ink); outline-offset: 1px; }
.seat-n { color: var(--muted); font-size: 16px; line-height: 1.2; }
.seat-no { font: 700 22px/1.15 var(--serif); }
.seat-note { display: none; color: var(--muted); font-size: 16px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
#grid.roomy .seat-note { display: -webkit-box; }

/* the panel, in calling order */
#list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
#list .m { border-bottom: 1px solid var(--line); }
.m-main {
  width: 100%; display: grid; grid-template-columns: 4.2em minmax(9em, 14em) 1fr; gap: 2px 12px; align-items: baseline;
  border: 0; border-radius: 0; background: none; padding: 10px 4px; text-align: left;
}
@media (hover: hover) { .m-main:hover:not(:disabled) { background: var(--accent-soft); } }
.m.on > .m-main { background: var(--accent-soft); }
.m-no { font: 700 20px/1.2 var(--serif); }
.m-role { font-weight: 600; }
.m-cd { display: block; font-weight: 400; color: var(--muted); }
.m-note { color: var(--muted); overflow-wrap: anywhere; }
.r-juror .m-role { color: var(--accent); }
.r-alt .m-role { color: var(--gold-ink); }
.o-p1 .m-role { color: var(--s1); }
.o-p2 .m-role { color: var(--s2); }
.out .m-no { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--out); }
.o-h .m-role, .o-c1 .m-role, .o-c2 .m-role { color: var(--out); }
.r-beyond .m-role { color: var(--muted); font-weight: 400; }
.reach-line { border-bottom: 3px double var(--ink); padding: 10px 4px 4px; font-weight: 700; }
.sec-line { border-bottom: 3px solid var(--gold); }
@media (max-width: 599px) {
  .m-main { grid-template-columns: 3.4em 1fr; }
  .m-note { grid-column: 2; }
  .m-note:empty { display: none; }
}

.acts { padding: 10px 4px 16px; display: flex; flex-direction: column; gap: 10px; }
#grid-act .acts { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px; }
.act-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.act-fields .num { width: 8em; }
.act-fields .grow { flex: 1 1 14em; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act-l { flex: 0 0 100%; font-weight: 600; }
.act-row button { flex: 1 1 9em; max-width: 18em; }
.act-row button.s1:not(:disabled) { border-color: var(--s1); color: var(--s1); background: var(--s1-soft); font-weight: 600; }
.act-row button.s2:not(:disabled) { border-color: var(--s2); color: var(--s2); background: var(--s2-soft); font-weight: 600; }
.act-row button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.act-row .linkish { flex: 0 0 auto; }
.act-out { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-why { margin: -4px 0 0; color: var(--muted); }
.board-btns { margin: 22px 0 8px; }

#earlier { margin-top: 16px; }
#earlier-list { list-style: none; padding: 0; margin: 0 0 8px; }
#earlier-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
#earlier-list li > span:first-child { overflow-wrap: anywhere; }

.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px;
  background: var(--ink); color: var(--bg); border-radius: var(--r); pointer-events: none;
}
.toast .linkish { color: var(--bg); pointer-events: auto; font-weight: 700; flex: none; }

/* explainer */
.explain { max-width: 70ch; padding-bottom: 24px; }
.explain h2 { margin-top: 40px; }
.sources { color: var(--muted); overflow-wrap: anywhere; }

.foot { border-top: 1px solid var(--line); margin-top: 24px; padding: 18px 0 28px; color: var(--muted); }
.sb-footer p { margin: 6px 0; }
.sb-more a, .sb-credit a { color: var(--accent); }

.print-sheet { display: none; }

@media (min-width: 900px) {
  .top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .top-grid details { border-bottom: 0; }
  .top-grid .setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top-grid { border-bottom: 1px solid var(--line); }
  #board:not([hidden]) { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 0 36px; align-items: start; }
}
@media (min-width: 900px) and (min-height: 760px) {
  .board-l { position: sticky; top: 8px; }
}
@media (max-width: 359px) { .side { padding: 10px; column-gap: 6px; } .side .big { font-size: 36px; } }

@media (max-width: 640px) {
  .setup { grid-template-columns: 1fr 1fr; }
  .setup .f:nth-of-type(n) { min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font: 10.5pt/1.35 var(--sans); }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; }
  .ps-head h2 { font: 700 17pt/1.2 var(--serif); margin: 0 0 2pt; }
  .ps-head p { margin: 0 0 8pt; }
  .ps-grid { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 0; border-left: 1pt solid #000; border-top: 1pt solid #000; margin-bottom: 8pt; }
  .pc { border-right: 1pt solid #000; border-bottom: 1pt solid #000; min-height: 18mm; padding: 2pt 4pt; display: flex; flex-direction: column; break-inside: avoid; }
  .pc.alt { background: #eee; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pc-n { font-size: 8.5pt; }
  .pc-no { font: 700 14pt/1.1 var(--serif); }
  .pc-note { font-size: 8.5pt; line-height: 1.2; overflow-wrap: anywhere; }
  .ps-sum p { margin: 0 0 4pt; }
  .ticks { display: inline-flex; flex-wrap: wrap; gap: 4pt; vertical-align: middle; }
  .tick { display: inline-block; width: 12pt; height: 12pt; border: 1pt solid #000; }
  .ps-table { width: 100%; border-collapse: collapse; margin-top: 6pt; table-layout: fixed; }
  .ps-table th, .ps-table td { border: 0.75pt solid #000; padding: 2pt 4pt; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  .ps-table th { background: #eee; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ps-table thead { display: table-header-group; }
  .ps-run th { background: none; border: 0; border-bottom: 0.75pt solid #000; font-weight: 400; padding: 0 0 2pt; }
  .ps-table tr { break-inside: avoid; }
  .ps-table col.c-pos { width: 8%; }
  .ps-table col.c-no { width: 12%; }
  .ps-table col.c-res { width: 34%; }
  .ps-table.blank td { height: 17pt; }
  .p-out td:nth-child(2) { text-decoration: line-through; }
  .p-sec td { border-top: 2pt solid #000; font-weight: 700; }
  .ps-grid.blank .pc { min-height: 24mm; }
}