/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* spades — maps the lab's own variables onto the Halfway palette. See app/theme.css.
   Shapes, sizes and type come from the COMPONENTS block in brand.css (var(--rr-…)): pills for
   controls, a segmented track for the mode switch, 12px fields, 20px panels with a hairline,
   three heading sizes, small capitals for labels and tags.
   Four colours: cream page, ink, burgundy, petrol. RESULT meaning only:
     petrol  = up / made / positive      (text, or petrol-soft tag with petrol text, always signed)
     burgundy = down / set / penalty      (text, or burgundy-soft tag with burgundy text, always signed)
   TEAMS never use those two colours: they are told apart by name, position and a SHAPE
   in ink (● team 1, ○ team 2; ■ □ ◆ ◇ for more players in solo mode).
   Leader = the one framed tile (2px ink) + "ahead"; winner = petrol fill, cream text + "winner" tag.
   Nil on = a pressed chip (petrol). Bags nearly full = burgundy-soft tag. One light theme:
   the app's dark blocks are beaten by the variable map (specificity 0,3,0). */

/* ---- 1. variables ---- */
:root:root:root{
  --paper:var(--t-bg); --surface:var(--t-surface); --surface-2:var(--t-sunken); --sunken:var(--t-sunken);
  --ink:var(--t-ink); --ink-2:var(--t-ink-2); --ink-3:var(--t-ink-2);
  --line:var(--t-line-2); --line-strong:var(--t-edge);
  --felt:var(--t-ink); --felt-ink:var(--t-cream); --felt-soft:var(--t-petrol-soft);
  --brass:var(--t-ink); --red:var(--t-burgundy); --red-soft:var(--t-burgundy-soft);
  --shadow:none; --cw:150px;
  color-scheme:light;
}

/* ---- 2. type: Bricolage for interface and numbers, Newsreader for reading, Fraunces italic as accent ---- */
body{font-family:var(--t-read);font-size:1.0625rem;line-height:1.45;background:var(--t-bg);color:var(--t-ink)}
button,input,textarea,.chipbtn,.btn,.nilbtn,.count,.tag,.delta,.pts,.prev b,.ctl input,
.ctl input.word,thead th,td.n,legend,.lbl,.seg button,.menu-pop button,.nm,.score,.x,.pip{
  font-family:var(--t-sans)}
h1,h2{font-family:var(--t-sans);font-variation-settings:normal}
/* three heading sizes: the title (h1; h2 on a phone, where the bar is narrow), each card and dialog (h2) */
h1{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls)}
.card-head h2,.dh h2{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}
/* labels: small capitals, soft ink */
.lbl,legend,thead th,.stack label{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.nm{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls);color:var(--t-ink)}
.check,td .sub,.legenda{font-family:var(--t-read)}
.legenda{font-size:1.0625rem;line-height:1.55;color:var(--t-ink)}
.legenda b{font-family:var(--t-sans);font-weight:500}
.empty{font-family:var(--t-serif);font-style:normal;font-size:1.125rem;color:var(--t-ink-2)}
.foot{font:var(--rr-reading);font-size:1rem;color:var(--t-ink-2)}
.check{font-size:1.0625rem;color:var(--t-ink)}
/* Bricolage digits are proportional by default: ask for tabular ones wherever figures line up */
.score,.delta,.pts,.prev b,td.n,.ctl input,.count,input[type=number]{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- 3. header ---- */
.pip{width:40px;height:40px;border-radius:var(--rr-pill);background:var(--t-ink);color:var(--t-cream);font-size:20px}
/* "Partners · 500" and ⋯: secondary pills, 44 */
.chipbtn{min-height:0;height:var(--rr-control);border:var(--rr-hair);background:var(--t-surface);color:var(--t-ink);
  font:var(--rr-control-font);padding:0 16px;transition:border-color .15s}
.chipbtn:hover{border-color:var(--t-ink);color:var(--t-ink)}
.dots-btn{width:var(--rr-control);height:var(--rr-control);border:var(--rr-hair);background:var(--t-surface);color:var(--t-ink);
  border-radius:var(--rr-pill);font-size:20px;transition:border-color .15s}
.dots-btn:hover{background:var(--t-surface);border-color:var(--t-ink)}
.menu-pop{border:var(--rr-frame);border-radius:var(--rr-radius);background:var(--t-surface);padding:6px;min-width:240px;box-shadow:none}
/* menu items: quiet pills (no fill, no edge) — a sunken fill under the pointer */
.menu-pop button{min-height:0;height:var(--rr-control);border-radius:var(--rr-pill);padding:0 16px;font:var(--rr-control-font);color:var(--t-ink)}
.menu-pop button:hover{background:var(--t-sunken)}
.menu-pop button.danger{color:var(--t-ink)}
.menu-pop button.danger:hover{background:var(--t-burgundy-soft)}
.menu-pop hr{border-top:1px solid var(--t-line-2);margin:4px 8px}

/* ---- 4. score tiles: panels; the leader is the one framed tile ---- */
.board{gap:12px}
.tile,.card{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);box-shadow:none}
.tile{padding:14px 18px;gap:4px}
.tile::before{display:none}
.tile.lead{border:var(--rr-frame)}
.tile.lead .nm::after{content:" \00B7  ahead";font-weight:500;color:var(--t-ink-2)}
.tile.win{background:var(--t-select);border:1px solid var(--t-select);color:var(--t-cream)}
.tile.win .nm,.tile.win .score,.tile.win .lbl{color:var(--t-cream)}
.tile.win .nm::after{content:none}
.tile.win .dot{border-color:var(--t-cream)}
.tile.win .dot.on{background:var(--t-cream)}
.tile-top{align-items:center;min-height:28px}
.score{font-weight:500;font-size:3.25rem;letter-spacing:-.045em;line-height:1;font-variation-settings:normal}
.scoreline{align-items:center;gap:12px}
/* the last hand's change and the hand's preview: signed tags in the result colour */
.delta,.prev b{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border:1px solid currentColor;border-radius:var(--rr-pill);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase}
.delta.pos,.prev b.pos{color:var(--t-ink);background:var(--t-petrol-soft)}
.delta.neg,.prev b.neg{color:var(--t-ink);background:var(--t-burgundy-soft)}
/* bags: ring = empty slot, ink = bag, burgundy with heavy ring = about to cost 100 */
.bags{gap:10px;margin-top:6px}
.dots{gap:4px}
.dot{width:12px;height:12px;border:2px solid var(--t-edge)}
.dot.on{background:var(--t-ink);border-color:var(--t-ink)}
.dot.warn{background:var(--t-burgundy);border:2px solid var(--t-burgundy);box-shadow:0 0 0 2px var(--t-burgundy-soft)}
/* tags: 26 high, small capitals */
.tag,.count{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border:1px solid transparent;border-radius:var(--rr-pill);
  font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase}
.tag.win{background:var(--t-cream);color:var(--t-ink)}
.tag.risk{background:var(--t-burgundy-soft);color:var(--t-ink);border-color:var(--t-burgundy)}

/* ---- 5. hand entry ---- */
.card-head{padding:14px 18px}
.entry{padding:0 18px 10px}
.count{border-color:var(--t-edge);background:var(--t-surface);color:var(--t-ink)}
.count.ok{background:var(--t-petrol-soft);border-color:var(--t-petrol);color:var(--t-ink)}
.count.over{background:var(--t-burgundy-soft);border-color:var(--t-burgundy);color:var(--t-ink)}
.erow{grid-template-columns:minmax(0,1fr) var(--cw) var(--cw) 64px;gap:10px;padding:5px 0}
.ehead span{color:var(--t-ink-2)}
.grp{display:flex;align-items:center;gap:10px;border-top:1px solid var(--t-ink);padding-top:12px;margin-top:8px;color:var(--t-ink)}
.grp:first-child{border-top:0;margin-top:0}
/* team markers in ink: shape, not colour, all of them sharp. 1 ■ 2 □ 3 ◆ 4 ◇ 5 ▬ 6 ▭ */
.grp::before,.prev .who::before,thead th:nth-child(n+2):not(:last-child)::before{content:"";display:inline-block;
  width:12px;height:12px;box-sizing:border-box;border:2px solid var(--t-ink);background:var(--t-ink);
  border-radius:0;margin-right:8px;vertical-align:-1px;flex:none}
.grp::before{margin-right:0}
.grp ~ .grp::before,
.prev > span:nth-child(2) .who::before,thead th:nth-child(3):not(:last-child)::before,
.prev > span:nth-child(4) .who::before,thead th:nth-child(5):not(:last-child)::before,
.prev > span:nth-child(6) .who::before,thead th:nth-child(7):not(:last-child)::before{background:transparent}
.prev > span:nth-child(n+3) .who::before,thead th:nth-child(n+4):not(:last-child)::before{transform:rotate(45deg) scale(.8)}
.prev > span:nth-child(n+5) .who::before,thead th:nth-child(n+6):not(:last-child)::before{transform:none;height:7px;vertical-align:1px}
/* bid and tricks: number fields (44 high, 12px corners, hairline on surface) with − and + inside as quiet round buttons */
.ctl{height:var(--rr-control);padding:0 3px;background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm)}
.ctl:focus-within{border-color:var(--t-ink);outline:3px solid var(--t-petrol);outline-offset:2px}
.ctl input:focus-visible{outline:none}
.ctl button{width:var(--rr-control-sm);height:var(--rr-control-sm);border-radius:var(--rr-pill);color:var(--t-ink);font-weight:500;font-size:1.375rem}
.ctl button:hover:not(:disabled){background:var(--t-sunken);color:var(--t-ink)}
.ctl button:disabled{opacity:1;color:var(--t-ink-2);background:transparent}
.ctl input{font:var(--rr-field-font);font-variant-numeric:tabular-nums;color:var(--t-ink)}
.ctl input.word{font:var(--rr-field-font);text-transform:none;padding:0;min-width:0;color:var(--t-ink-2)}
/* nil: a chip — secondary until pressed, then petrol; "Nil" / "Blind" in sentence case */
.nilbtn{width:64px;height:var(--rr-control);border:var(--rr-hair);background:var(--t-surface);border-radius:var(--rr-pill);
  font:var(--rr-control-font);letter-spacing:normal;color:var(--t-ink);text-transform:lowercase}
.nilbtn::first-letter{text-transform:uppercase}
.nilbtn:hover{border-color:var(--t-ink);background:var(--t-surface)}
.nilbtn.on,.nilbtn.on:hover{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream)}
.entry-foot{border-top:2px solid var(--t-ink);padding:14px 18px;gap:14px}
.prev{font-size:1.0625rem;gap:10px 22px;align-items:center}
.prev > span{display:inline-flex;align-items:center;gap:8px}
.prev .who{font-family:var(--t-sans);font-weight:500;color:var(--t-ink)}

/* ---- 6. buttons: pills, 44 ---- */
.btn{min-height:0;height:var(--rr-control);border:var(--rr-hair);background:var(--t-surface);color:var(--t-ink);border-radius:var(--rr-pill);
  padding:0 22px;font:var(--rr-control-font);letter-spacing:normal;transition:background .15s,color .15s,border-color .15s}
.btn:hover:not(:disabled){background:var(--t-surface);border-color:var(--t-ink)}
.btn.ghost{background:var(--t-surface)}
.btn.primary{background:var(--t-action);color:var(--t-cream);border-color:var(--t-action)}
.btn.primary:hover:not(:disabled){background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover);filter:none}
.btn.danger{color:var(--t-ink);background:var(--t-surface);border-color:var(--t-burgundy)}
.btn.danger:hover:not(:disabled){background:var(--t-burgundy-soft);border-color:var(--t-burgundy)}
/* disabled = dashed and plain, still readable (Record waits for the tricks to add up) */
.btn:disabled{opacity:1;background:var(--t-surface);color:var(--t-ink-2);border:1px dashed var(--t-edge);cursor:not-allowed}

/* ---- 7. ledger: the score grid — signed figures in the result colour, the detail under them ---- */
.tblwrap{border-top:2px solid var(--t-ink)}
table{font-size:1rem}
th,td{border-bottom:1px solid var(--t-line);padding:10px 12px;vertical-align:top}
thead th{white-space:nowrap}
td.n{color:var(--t-ink-2);font-weight:500;font-size:1rem}
tbody tr:hover{background:var(--t-sunken)}
tbody tr.editing{background:var(--t-petrol-soft);outline:2px solid var(--t-petrol);outline-offset:-2px}
.pts{display:inline-block;font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.3}
.pts.pos{color:var(--t-ink)}
.pts.neg{color:var(--t-ink)}
/* detail under the points: bid→tricks, nil, penalty — shown at every width, never dropped */
.sub{display:block;margin:2px 0 0;font-size:.875rem;line-height:1.35;color:var(--t-ink-2);white-space:normal}
:root:root .sub.d{display:block}
.sub.t::before{content:""}
.sub.t{color:var(--t-ink);font-weight:500}
.x{width:var(--rr-control);height:var(--rr-control);font-size:1.375rem;color:var(--t-ink);border-radius:var(--rr-pill);padding:0}
.x:hover{color:var(--t-ink);background:var(--t-burgundy-soft)}

/* ---- 8. dialogs and forms (a dialog is the one panel on its screen: the 2px ink frame) ---- */
dialog{border:var(--rr-frame);border-radius:var(--rr-radius);background:var(--t-surface);color:var(--t-ink);box-shadow:none}
dialog::backdrop{background:var(--t-scrim)}
.dh{padding:20px 20px 0}
.db{padding:16px 20px;gap:16px}
.df{border-top:2px solid var(--t-ink);padding:14px 20px;gap:10px}
/* the dialog's scrolling body takes the focus when a dialog opens on its own (the setup, on a first
   visit): a full ring there reads as a second frame, so it is marked by a petrol bar on its left edge */
.db:focus-visible{outline:none;box-shadow:inset 4px 0 0 var(--rr-petrol)}
/* a group inside the dialog: a nested box, 12px corners */
fieldset{border:var(--rr-hair);border-radius:var(--rr-radius-sm);padding:14px 16px}
legend{padding:0 8px}
input[type=text],input[type=number],textarea{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm);
  color:var(--t-ink);font:var(--rr-field-font)}
input[type=text],input[type=number]{min-height:0;height:var(--rr-control);padding:0 14px}
input[type=text]:focus,input[type=number]:focus,textarea:focus{border-color:var(--t-ink);outline:3px solid var(--t-petrol);outline-offset:2px}
textarea{padding:10px 14px;line-height:1.45}
.stack{gap:6px}
/* side-by-side fields line up on their boxes even when one caption takes two lines */
.fields{align-items:end}
.check{min-height:44px;gap:12px}
.check input{accent-color:var(--t-ink);width:24px;height:24px;flex:none}
/* the mode switch and the player count: a segmented control — one 44 track, 36 quiet segments, the chosen one petrol */
.seg{gap:3px;padding:3px;background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-pill)}
.seg button{min-height:0;height:var(--rr-control-sm);border:0;background:transparent;border-radius:var(--rr-pill);
  font:var(--rr-control-font-sm);padding:0 12px;color:var(--t-ink)}
.seg button:hover{background:var(--t-sunken)}
.seg button[aria-pressed="true"],.seg button[aria-pressed="true"]:hover{background:var(--t-select);color:var(--t-cream)}

/* ---- 9. phone: names get their own line so the fields keep 44px targets ---- */
@media (max-width:600px){
  :root:root:root{--cw:1fr}
  h1{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls);white-space:nowrap}
  .pip{display:none}
  .score{font-size:2.75rem}
  .tile{padding:12px 16px}
  .card-head,.entry-foot{padding-left:14px;padding-right:14px}
  .entry{padding:0 14px 10px}
  .erow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 64px;gap:8px}
  .ehead span:first-child{display:none}
  .erow[data-i] .nm{grid-column:1/-1}
  .erow[data-i]{padding-top:8px}
  .db,.dh,.df{padding-left:16px;padding-right:16px}
  th,td{padding:10px 8px}
  :root:root .sub.d{display:block}
}
/* no dark variant: the variable map above is the only theme; reduced motion is handled in theme.css */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- v3 (brand kit, October 2026): scores in Plex Mono, hairlines, controls in 500 ---------- */
.delta,.pts,.prev b,td.n{font-family:var(--t-mono);font-weight:500;letter-spacing:-.02em}
.score{border-width:1px}
button,.chipbtn,.btn,.nilbtn,.seg button,.menu-pop button{font-weight:500}
:root:root:root .nm{font-weight:500}