@font-face { font-family: "Antonio"; src: url("fonts/antonio-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --bg: #e9edf3; --paper: #ffffff; --ink: #142033; --muted: #4a566b; --line: #c3ccda; --soft: #f2f5f9;
  --rule: #d6e1f0; --rule-ink: #7f9bcb; --blue: #1d3f9a; --blue-ink: #ffffff; --blue-soft: #e2e9fa;
  --red: #b8261f; --red-soft: #fbe8e6; --green: #146a3b; --green-soft: #e1f2e8;
  --num: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 8px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1420; --paper: #162033; --ink: #e8edf6; --muted: #a9b5ca; --line: #34435f; --soft: #1b2639;
    --rule: #223049; --rule-ink: #58709f; --blue: #9db8ff; --blue-ink: #0c1322; --blue-soft: #1f2d4f;
    --red: #ff8f84; --red-soft: #3b1f22; --green: #79d8a2; --green-soft: #173527;
  }
}

* { 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(--body); }
a { color: var(--blue); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--num); font-weight: 600; line-height: 1.12; letter-spacing: 0.005em; }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .35rem; }
h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.2rem; margin: 1.3rem 0 .3rem; }
p, li { max-width: 70ch; }
small { font-size: .85em; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; background: var(--paper); padding: .5rem .8rem; z-index: 20; }

/* header: a strip of score-pad paper */
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; align-items: center; justify-content: space-between; padding-top: .55rem; padding-bottom: .55rem; }
.brand { font: 600 1.45rem var(--num); color: var(--ink); text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.brand svg { width: 28px; height: 28px; }
.top nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.top nav a { color: var(--ink); text-decoration: none; padding: .45rem 0; border-bottom: 3px solid transparent; font-weight: 500; }
.top nav a[aria-current="page"] { border-bottom-color: var(--red); }
.top nav a:hover { color: var(--blue); }

.hero { padding: 1.1rem 0 .9rem; }
.hero p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.hero .crumbs { font-size: .95rem; margin: 0 0 .3rem; }
.crumbs a { color: var(--muted); }

/* buttons and chips */
.btn { font: inherit; font-size: 1rem; font-weight: 600; min-height: 44px; padding: .5rem .95rem; border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--blue); color: var(--blue-ink); border-color: var(--blue); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.link { border-color: transparent; background: none; color: var(--blue); text-decoration: underline; padding-left: .3rem; padding-right: .3rem; font-weight: 500; }
.btn.small { min-height: 40px; font-size: .95rem; padding: .35rem .7rem; }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font: 500 1.05rem var(--body); min-width: 46px; min-height: 46px; padding: .3rem .7rem; border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; line-height: 1.15; }
.chip small { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--blue); color: var(--blue-ink); border-color: var(--blue); }
.chip.on small { color: inherit; opacity: .85; }
.take .chip, .fld:has(.chip[data-set="bid"]) .chip { font-family: var(--num); font-size: 1.3rem; font-weight: 600; min-width: 46px; padding: .2rem .5rem; }

/* notes */
.note { padding: .65rem .9rem; border-radius: var(--r); margin: 0 0 1rem; border-left: 4px solid var(--blue); background: var(--blue-soft); }
.note.warn { border-left-color: var(--red); background: var(--red-soft); }
.hint { display: block; color: var(--muted); font-size: .92rem; margin-top: .2rem; }
.derived { color: var(--muted); margin: .3rem 0 .6rem; }

/* game page layout */
.app { margin-bottom: 2rem; }
@media (min-width: 980px) {
  .app.is-game { display: grid; grid-template-columns: minmax(380px, 470px) 1fr; gap: 0 2rem; align-items: start; }
  .app.is-game > .note { grid-column: 1 / -1; }
  .app.is-game > .board, .app.is-game > .entry { grid-column: 1; }
  .app.is-game > .pad { grid-column: 2; grid-row: 1 / span 3; }
  .app.is-game > .tools { grid-column: 1; }
}

/* scoreboard: the one raised element */
.board { background: var(--paper); border-radius: var(--r); padding: .9rem 1rem 1rem; box-shadow: 0 1px 0 var(--line), 0 6px 18px -10px rgba(20, 32, 51, .35); border-top: 4px solid var(--blue); }
.b-head h2 { margin: 0; font-size: 1.35rem; }
.b-sub { margin: .1rem 0 .4rem; color: var(--muted); }
.b-sub strong { color: var(--ink); }
.scores { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; }
.scores.n3 { grid-template-columns: repeat(3, 1fr); }
.scores.n4, .scores.n5, .scores.n6 { grid-template-columns: repeat(3, 1fr); }
.scores li { display: grid; border-bottom: 2px solid var(--rule); padding-bottom: .2rem; min-width: 0; }
.scores .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores .tot { font: 600 3.4rem/1 var(--num); font-variant-numeric: tabular-nums; }
.scores.n4 .tot, .scores.n5 .tot, .scores.n6 .tot { font-size: 2.4rem; }
.scores .last { color: var(--muted); font-size: .85rem; }
.scores .neg .tot { color: var(--red); }
.scores .won { border-bottom-color: var(--green); }
.scores .won .who::after { content: " wins"; color: var(--green); }
.scores .won.tied .who::after { content: " tied"; }
.won-box .tie-note { margin-top: .35rem; }
.series { margin: .6rem 0 0; color: var(--muted); }
.status { margin: .6rem 0 0; padding-left: 1.1rem; }
.status li { margin: .15rem 0; }
.won-box { margin-top: .8rem; padding: .7rem .8rem; background: var(--green-soft); border-radius: var(--r); }
.won-box p { margin: 0; }

/* hand entry */
.entry { margin-top: 1.2rem; padding-top: .2rem; }
.entry.editing { background: var(--blue-soft); margin-left: -16px; margin-right: -16px; padding: .4rem 16px 1rem; }
.e-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.e-head h2 { margin: 0; }
.e-deal { color: var(--muted); }
.fld { margin: .8rem 0 0; }
.fld .lbl { display: block; font-weight: 600; margin-bottom: .3rem; }
.fld .lbl small { font-weight: 500; color: var(--muted); }
.cards { border-left: 2px solid var(--red); padding-left: .7rem; margin-top: .4rem; }
.cardrow { margin-top: .55rem; }
.e-foot { margin-top: .9rem; }
.preview { margin: 0; padding: .55rem .75rem; border-radius: var(--r); background: var(--soft); border: 1px solid var(--line); min-height: 3.2em; }
.preview.err { background: var(--red-soft); border-color: var(--red); }
.preview strong { font-family: var(--num); font-size: 1.25rem; font-weight: 600; }

/* score pad: ruled paper with a red margin */
.pad h2 small { font: 400 1rem var(--body); color: var(--muted); }
.pad-wrap { background: var(--paper); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.padt { width: 100%; table-layout: fixed; border-collapse: collapse; background-image: linear-gradient(to right, transparent 38px, var(--red) 38px, var(--red) 40px, transparent 40px); }
.padt th, .padt td { padding: .45rem .5rem; text-align: left; vertical-align: top; }
.padt thead th { font-size: .9rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--rule-ink); overflow-wrap: break-word; vertical-align: bottom; }
.padt.n4 thead th, .padt.n5 thead th, .padt.n6 thead th { font-size: .8rem; padding-left: .25rem; padding-right: .25rem; }
.padt thead th:first-child { width: 40px; }
.padt.n2 thead th:nth-child(2), .padt.n3 thead th:nth-child(2) { width: 42%; }
.padt td, .padt tbody th { overflow-wrap: anywhere; }
.padt tbody tr:first-child > * { padding-bottom: .1rem; }
.padt tbody th { font: 600 1.2rem var(--num); width: 40px; text-align: center; color: var(--muted); }
.padt tr.why td { font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--rule); padding-top: 0; }
.padt .num { text-align: right; }
.padt .num .d { display: block; font-size: .85rem; color: var(--green); }
.padt .num .d.minus { color: var(--red); }
.padt .num .t { font: 600 1.35rem var(--num); font-variant-numeric: tabular-nums; }
.padt .bidc b { font-family: var(--num); font-size: 1.15rem; font-weight: 600; }
.padt .dl { display: block; font-size: .82rem; color: var(--muted); }
.padt tr.why .bidc { display: block; color: var(--ink); font-size: 1rem; }
.padt tr.why .bidc .dl { display: inline; margin-left: .4rem; }
.tag { font-size: .78rem; font-weight: 600; padding: 0 .35rem; border-radius: 4px; }
.tag.made { color: var(--green); background: var(--green-soft); }
.tag.set { color: var(--red); background: var(--red-soft); }
.padt tbody.editing { background: var(--blue-soft); }
.padt tbody.after { opacity: .7; }
.padt .btn.small { min-height: 36px; padding: .1rem .5rem; }
.pad.empty p { margin-top: 0; }
@media (max-width: 480px) {
  .padt.n4 .num .t, .padt.n5 .num .t, .padt.n6 .num .t { font-size: 1.1rem; }
  .padt.n5 th, .padt.n5 td, .padt.n6 th, .padt.n6 td { padding-left: .3rem; padding-right: .3rem; }
}

/* tools, panels, forms */
.tools { margin-top: 1.4rem; }
.rules-sum { margin-top: 1rem; }
.rules-sum summary, details.more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.rules-now { padding-left: 1.1rem; color: var(--muted); }
.panel { background: var(--paper); border-radius: var(--r); padding: .4rem 1rem 1rem; border: 1px solid var(--line); }
.panel h2 { margin-top: .7rem; }
.setup { background: var(--paper); border-radius: var(--r); padding: .4rem 1rem 1.1rem; border: 1px solid var(--line); border-top: 4px solid var(--blue); max-width: 760px; }
.setup h2 { margin-top: .7rem; }
.saved { max-width: 760px; }
.saved h2 { margin-top: .2rem; }
.fld-in { display: grid; gap: .25rem; margin: .8rem 0 0; }
.fld-in label { font-weight: 600; }
select, input[type="text"], input[type="number"] { font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: .5rem .65rem; min-height: 46px; width: 100%; max-width: 100%; }
select:focus, input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.names-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 .8rem; }
.rform { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1rem; }
.chk { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 0; font-weight: 500; min-height: 44px; }
.chk input { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--blue); }
.glist { list-style: none; padding: 0; margin: .4rem 0; }
.glist li { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.gi { display: grid; min-width: 0; }
.gi span { color: var(--muted); font-size: .95rem; }
.gb { display: flex; gap: .4rem; }
.removed { margin-top: .8rem; }

/* landing */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin: .4rem 0 1.4rem; }
.picker a { display: grid; gap: .15rem; padding: .8rem .9rem; background: var(--paper); border: 1.5px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.picker a:hover { border-color: var(--blue); border-left-color: var(--red); }
.picker strong { font: 600 1.5rem var(--num); }
.picker span { color: var(--muted); font-size: .95rem; }
.home-games { margin-bottom: 1.5rem; }

/* content */
.content { max-width: 760px; }
.tbl-wrap { overflow-x: auto; margin: 1rem 0; }
.vt { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--paper); }
.vt caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .3rem; }
.vt th, .vt td { border-bottom: 1px solid var(--rule); padding: .45rem .5rem; text-align: left; vertical-align: top; }
.vt thead th { border-bottom: 2px solid var(--rule-ink); }
.faq h3 { font-family: var(--body); font-size: 1.05rem; font-weight: 700; margin-top: 1.2rem; }
.faq p { margin: .2rem 0 0; }
.sources { color: var(--muted); font-size: .95rem; margin-top: 2rem; }

/* toast: fixed at the top, so it never covers the score buttons */
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: 10px; width: min(560px, calc(100% - 24px)); background: var(--ink); color: var(--paper);
  border-radius: var(--r); padding: .55rem .6rem .55rem .9rem; display: flex; gap: .7rem; align-items: center; justify-content: space-between; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.toast .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

footer.site { margin-top: 3rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); background: var(--paper); font-size: .95rem; color: var(--muted); }
footer.site a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------------------------------------------------------------- print */
.print-root { display: none; }
@page { margin: 0.5in; }
@media print {
  :root { --ink: #000; --muted: #333; --paper: #fff; --bg: #fff; color-scheme: light; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  body.has-sheet > *:not(.print-root) { display: none !important; }
  body.has-sheet .print-root { display: block; }
  body:not(.has-sheet) .top nav, body:not(.has-sheet) .app, body:not(.has-sheet) footer, body:not(.has-sheet) .toast, body:not(.has-sheet) .picker { display: none !important; }
  .sheet { font: 10.5pt/1.3 var(--body); color: #000; }
  .sh-head { display: grid; grid-template-columns: 1fr; gap: 4pt; border-bottom: 1.5pt solid #000; padding-bottom: 5pt; margin-bottom: 6pt; }
  .sh-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4pt 14pt; }
  .sh-title h2 { font: 600 20pt/1.1 var(--num); margin: 0; }
  .sh-title p { margin: 0; font-size: 10.5pt; }
  .sh-rules { margin: 0; padding-left: 12pt; columns: 2; column-gap: 18pt; font-size: 9pt; }
  .sh-rules li { break-inside: avoid; max-width: none; }
  .sh-players, .sh-fill { margin: 4pt 0 6pt; font-size: 10.5pt; }
  .sh-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .sh-table thead { display: table-header-group; }
  .sh-table th, .sh-table td { border: 0.6pt solid #555; padding: 3pt 4pt; text-align: left; vertical-align: top; overflow-wrap: break-word; }
  .sh-table thead th.num { white-space: normal; text-align: right; vertical-align: bottom; }
  .sh-table thead th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 9.5pt; }
  .sh-table .num { text-align: right; white-space: nowrap; }
  .sh-table .num b { font: 600 12pt var(--num); }
  .sh-table .num .d { font-size: 9pt; }
  .sh-table td.bidder { background: #f1f1f1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sh-table tbody.hand { break-inside: avoid; }
  .sh-table tr.sh-note td { font-size: 8.5pt; color: #222; border-top: none; }
  .sh-table tr.sh-note td:first-child { border-right: none; }
  .sh-table tbody.after { color: #555; }
  .sh-table col.c-no { width: 0.35in; } .sh-table col.c-deal { width: 0.95in; } .sh-table col.c-bid { width: 1.7in; }
  .sheet.wide .sh-table col.c-bid { width: 1.8in; }
    /* name headers: sized in sheet.js so the longest word fits; words are never split */
  .sh-table thead th.num, .sh-table.grid th.namecell { font: 600 var(--hfs, 9.5pt)/1.15 var(--num); overflow-wrap: normal; word-break: normal; hyphens: none; }
  .sh-table.grid td { height: 0.31in; }
  .sh-table.grid col.c-no { width: 0.38in; } .sh-table.grid col.c-deal { width: 0.8in; } .sh-table.grid col.c-bidder { width: 1in; }
  .sh-table.grid col.c-bidv { width: 0.55in; } .sh-table.grid col.c-made { width: 0.55in; }
  .sh-table.grid th.sub { font-size: 8pt; font-weight: 600; text-align: center; }
  .sh-table.grid th.namecell { text-align: center; height: 0.3in; }
  .sh-table.grid th { vertical-align: bottom; }
  .sh-table.grid tr.sum th, .sh-table.grid tr.sum td { border-top: 1.5pt solid #000; font-weight: 600; vertical-align: middle; }
  .sheet.fixed .sh-table.grid td { height: 0.45in; }
  .sh-result, .sh-foot { margin: 8pt 0 0; font-size: 11pt; break-inside: avoid; }
  .sh-result { font-weight: 600; break-before: avoid; }   /* the winner line stays with the last hand */
}