/* Layout: a working board. Title row with board mode and identity, a four-step guide, four lanes that read left to right
   (open → matched → confirming → agreed), then the rota with agreed swaps applied and the house rules. */
:root{
  --bg:#F4F7F6; --surface:#FFFFFF; --sunk:#E7EEED; --line:#D2DDDB;
  --ink:#13201E; --muted:#57706B; --teal:#0E4D4A; --on-teal:#FFFFFF; --teal-soft:#D4E8E4;
  --signal:#C4441D; --on-signal:#FFFFFF; --signal-soft:#FBE3DA;
  --gold:#8E600E; --gold-soft:#F5EAD0; --ok:#226B46; --ok-soft:#DBEFE2;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1615; --surface:#15201E; --sunk:#1B2927; --line:#2C3E3B;
    --ink:#E4EEEC; --muted:#94ABA7; --teal:#6CC0B6; --on-teal:#0B1312; --teal-soft:#1C3734;
    --signal:#FF8A62; --on-signal:#1A0D08; --signal-soft:#3A2219;
    --gold:#E2B256; --gold-soft:#32291A; --ok:#66CB91; --ok-soft:#163224;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1615; --surface:#15201E; --sunk:#1B2927; --line:#2C3E3B;
  --ink:#E4EEEC; --muted:#94ABA7; --teal:#6CC0B6; --on-teal:#0B1312; --teal-soft:#1C3734;
  --signal:#FF8A62; --on-signal:#1A0D08; --signal-soft:#3A2219;
  --gold:#E2B256; --gold-soft:#32291A; --ok:#66CB91; --ok-soft:#163224;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);margin:0}
.wrap{max-width:1320px;margin:0 auto;padding-inline:20px;padding-block:22px 56px}
@media (max-width:480px){.wrap{padding-inline:16px}}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* Header */
.top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between}
.eyebrow{font:600 12px var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.01em;margin-top:4px}
.sub{color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 15px;border-radius:999px;font:600 13px var(--f-body);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--teal);color:var(--on-teal)}
.me{display:flex;gap:8px;align-items:center;font-weight:600;font-size:13.5px}
select,input{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
select:disabled,input:disabled{opacity:.6}

/* Banner and hints */
.banner{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;background:var(--gold-soft);border-radius:10px;padding:11px 14px;margin-top:18px;font-size:14px}
.banner.example{background:var(--teal-soft)}
.linkish{background:none;border:0;padding:0;color:var(--teal);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hint{margin:0 0 12px;font-size:14px;color:var(--signal);font-weight:600}

/* Steps */
ol.steps{list-style:none;padding:0;margin:20px 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px}
ol.steps li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);min-width:0}
ol.steps li b{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font:600 12px var(--f-mono)}
ol.steps strong{color:var(--ink)}
@media (max-width:900px){ol.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){ol.steps{grid-template-columns:1fr}}

/* Lanes */
.lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1100px){.lanes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lanes{grid-template-columns:1fr}}
.lane{background:var(--sunk);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lane > h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 12.5px var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:2px 2px 0}
.count{font:600 13px var(--f-mono);color:var(--ink);letter-spacing:0}
.lane-note{font-size:12.5px;color:var(--muted);margin-top:-4px;padding:0 2px}
.stack{display:flex;flex-direction:column;gap:10px;min-width:0}
.empty{color:var(--muted);font-size:13.5px;padding:6px 2px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.card.is-mine{border-color:var(--signal)}
.card.match{border-color:var(--teal);box-shadow:0 1px 0 var(--line)}
.card-top{display:flex;gap:10px;align-items:center;min-width:0}
.unit{font-weight:700;font-size:15px;line-height:1.3;min-width:0}
.kicker{font:700 11.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.kicker.cover{color:var(--gold)}
.who{flex:none;display:inline-grid;place-items:center;min-width:36px;height:26px;padding:0 6px;border-radius:6px;background:var(--teal);color:var(--on-teal);font:600 12.5px var(--f-mono)}
.who.sm{min-width:30px;height:22px;font-size:11.5px}
.who.is-me{background:var(--signal);color:var(--on-signal)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.chip.bh{background:var(--signal-soft);color:var(--signal)}
.chip.xmas{background:var(--gold-soft);color:var(--gold)}
.wants{font-size:13.5px;color:var(--muted)}
.wants strong{color:var(--ink);font-weight:600}
.note{font-size:13.5px;font-style:italic;overflow-wrap:anywhere}
.warn{font-size:13px;color:var(--signal);font-weight:600}
.can{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{appearance:none;border:1px solid transparent;background:var(--teal);color:var(--on-teal);font:600 13.5px/1.2 var(--f-body);padding:8px 13px;border-radius:8px;cursor:pointer}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn.toggle[aria-pressed="true"]{background:var(--ok-soft);color:var(--ok)}
.btn.full{width:100%}
.small{font-size:12.5px;color:var(--muted)}
.legs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.leg{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;min-width:0}
.leg > span{min-width:0}
.why{font-size:12.5px;color:var(--muted)}
.confs{display:flex;flex-wrap:wrap;gap:6px 10px}
.conf{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600}
.conf.ok{color:var(--ok)}
.conf.wait{color:var(--muted)}
details.done{font-size:13px;color:var(--muted)}
details.done summary{cursor:pointer;font-weight:600;padding:4px 2px}
details.done ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* Post form */
.form{gap:8px}
.form label{font-size:12.5px;font-weight:700;color:var(--muted)}
.form .opt{font-weight:400}
.form select,.form input{width:100%}
.form .actions{margin-top:4px}

/* Rota */
.rota{margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.rota-head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between}
.rota h2,.rules h2{font-family:var(--f-display);font-weight:600;font-size:20px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--sunk);border:1px solid var(--line)}
.sw.mine{background:var(--signal-soft);border-color:var(--signal)}
.sw.moved{border:2px dashed var(--teal);background:transparent}
.sw.bh{background:var(--surface);position:relative}
.sw.bh::after{content:"";position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--signal)}
.mine-line{margin:10px 0 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px;color:var(--muted)}
.mine-line .chip{background:var(--signal-soft);color:var(--signal)}
.table-scroll{overflow-x:auto}
table.grid{border-collapse:separate;border-spacing:3px;width:100%;min-width:640px;font-variant-numeric:tabular-nums}
table.grid th{font:600 12px var(--f-body);color:var(--muted);text-align:center;padding:4px 2px}
table.grid tbody th{text-align:left;white-space:nowrap;padding-right:8px}
table.grid td{position:relative;text-align:center;font:600 13px var(--f-mono);padding:7px 2px;border-radius:5px;background:var(--sunk);border:1px solid transparent}
table.grid td.wkend{background:var(--teal-soft)}
table.grid td.mine{background:var(--signal-soft);color:var(--signal);border-color:var(--signal)}
table.grid td.moved{border:2px dashed var(--teal)}
table.grid td.bh::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--signal)}

/* Rules */
.rules{margin-top:22px;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 24px;align-items:start}
.rules ul{margin:0;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;font-size:14px}
@media (max-width:760px){.rules{grid-template-columns:1fr}.rules ul{grid-template-columns:1fr}}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom, 0px));max-width:min(560px, calc(100% - 32px));background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:10}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s ease}}

/* Account bar (live board, signed in) */
.account{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13.5px}
.account .name{font-weight:700}
.account a,.account .linkish{font-size:13.5px}
a{color:var(--teal);font-weight:600}

/* Sign-in */
.signin{display:flex;justify-content:center;margin:28px 0 8px}
.signin-card{width:100%;max-width:440px;padding:20px;gap:12px}
.signin-card h2{font-family:var(--f-display);font-weight:600;font-size:22px}
.signin-card form{display:flex;flex-direction:column;gap:8px}
.signin-card label{font-size:12.5px;font-weight:700;color:var(--muted)}
.signin-card input{width:100%;font-size:16px}
.signin-card input.code{font:600 22px var(--f-mono);letter-spacing:.3em;text-align:center}
.signin-card .btn{padding:10px 14px}
.err{font-size:13.5px;color:var(--signal);font-weight:600}
.muted{color:var(--muted)}

/* Dialog */
dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:18px;width:min(460px, calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog h2{font-family:var(--f-display);font-weight:600;font-size:20px;margin-bottom:8px}
dialog form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
dialog input{width:100%}
.email-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.email-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px;background:var(--sunk);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.dialog-foot{display:flex;justify-content:flex-end;margin-top:14px}

/* Admin */
.admin-grid{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h2{font-family:var(--f-display);font-weight:600;font-size:20px}
.panel textarea{width:100%;min-height:180px;font:13px/1.45 var(--f-mono);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.people{width:100%;border-collapse:collapse;font-size:14px}
.people th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:6px 6px;border-bottom:1px solid var(--line)}
.people td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.people input[type=text]{width:100%}
.people td.code input{width:5.5em}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.check{display:inline-flex;gap:6px;align-items:center;font-size:14px}
.audit{list-style:none;margin:0;padding:0;font-size:13px;display:flex;flex-direction:column;gap:4px;max-height:420px;overflow:auto}
.audit li{display:grid;grid-template-columns:150px 50px minmax(0,1fr);gap:8px;padding:4px 0;border-bottom:1px solid var(--sunk)}
.audit code{font:12px var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
@media (max-width:640px){.audit li{grid-template-columns:1fr}}

.footnote{margin-top:28px;font-size:12.5px;color:var(--muted)}