/* Hallmark · shape: app screen · genre: playful · theme: Halftone (deal 1/3, adapted green ink)
 * nav: top bar · signature: three-player score ledger · states: loading, empty, error, full
 * halftone: cream · axes: light/serif/green · posture: restrained · contrast: reviewed · v2.0.0 */
/* Hallmark · pre-emit critique: ledger first; restrained green for the family card table. */
/* waive: theme type and spot changed for readable scorekeeping; app scope permits familiar system faces. */
@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 16px/1.5 var(--font-body); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: var(--color-transparent); }
a { color: var(--color-accent-deep); text-underline-offset: 4px; }
button, a, input, [tabindex] { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--color-focus); }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy='true'] { cursor: progress; }
button:active { transform: translateY(1px); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.topbar { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.brand { text-decoration: none; color: var(--color-ink); font: 600 24px/1.2 var(--font-display); display: flex; align-items: center; gap: var(--space-sm); }
.brand-mark { font-size: 37px; color: var(--color-accent-deep); }
.header-actions { display: flex; gap: var(--space-md); align-items: center; }
.connection, .small { font-size: 14px; }
.connection, .muted { color: var(--color-muted); }
h1, h2, h3 { min-width: 0; overflow-wrap: break-word; margin: 0; font-weight: 500; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: 42px; line-height: 1.12; letter-spacing: -.025em; }
h2 { font-size: 27px; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: var(--space-sm) 0 var(--space-lg); max-width: 65ch; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); min-height: 650px; }
.welcome h1 { font-size: 56px; }
.welcome > p { font-size: 19px; margin-block: var(--space-lg); color: var(--color-muted); }
.welcome > p.small { font-size: 14px; }
.name-line { display: flex; flex-wrap: wrap; gap: var(--space-lg); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); font-weight: 600; }
.signin-panel { padding: var(--space-xl); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent-deep); background: var(--color-paper-2); }
.suit { display: block; font-size: 46px; color: var(--color-accent-deep); margin-bottom: var(--space-lg); line-height: 1; }
label { display: block; font-size: 14px; font-weight: 600; }
input { width: 100%; min-height: 48px; padding: var(--space-sm); margin-top: var(--space-xs); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); }
input:hover { border-color: var(--color-muted); }
input:read-only { color: var(--color-muted); }
input:user-invalid { border-color: var(--color-error); }
.button { min-height: 46px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-micro); }
.button:hover { background: var(--color-accent-deep); }
.signin-panel .button { width: 100%; margin-top: var(--space-md); }
.text-button { min-height: 44px; border: 0; padding: var(--space-xs); background: var(--color-transparent); color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.text-button:hover { background: var(--color-highlight); }
.message { font-size: 14px; color: var(--color-accent-deep); margin: var(--space-md) 0; }
.message:empty { display: none; }
.message.error { color: var(--color-error); }
.privacy { font-size: 12px; color: var(--color-muted); margin-bottom: var(--space-md); }
.demo-link { font-size: 14px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); }
.page-heading p { margin-bottom: 0; color: var(--color-muted); }
.workspace { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: var(--space-xl); min-height: 500px; }
.history { border-right: 1px solid var(--color-rule); padding-right: var(--space-lg); }
.history h2 { font: 600 16px/1.5 var(--font-body); margin-bottom: var(--space-lg); }
.game-choice { width: 100%; text-align: left; padding: var(--space-sm); margin-bottom: var(--space-xs); border: 1px solid var(--color-transparent); border-radius: var(--radius-input); background: var(--color-transparent); color: var(--color-ink); }
.game-choice small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); }
.game-choice:hover { background: var(--color-paper-2); }
.game-choice[aria-current='true'] { background: var(--color-highlight); border-color: var(--color-rule); }
.game-heading, .section-heading, .leader-line, .game-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.game-heading { margin-bottom: var(--space-lg); }
.game-heading p { margin-bottom: 0; }
.badge { padding: var(--space-2xs) var(--space-sm); background: var(--color-highlight); color: var(--color-accent-deep); border-radius: var(--radius-pill); font-size: 13px; white-space: nowrap; }
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 2px solid var(--color-accent-deep); }
.player-total { padding: var(--space-lg); border-right: 1px solid var(--color-rule); }
.player-total:first-child { padding-left: 0; }
.player-total:last-child { border: 0; }
.player-total .score { display: block; font: 500 54px/1.2 var(--font-display); font-variant-numeric: tabular-nums; margin-block: var(--space-xs); }
.player-total small { color: var(--color-muted); font-size: 12px; }
.leader-line { padding-block: var(--space-md); font-size: 14px; }
.leader-line > span:first-child { color: var(--color-accent-deep); font-weight: 600; }
.round-entry { background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-lg) var(--space-xl); }
.score-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-sm); align-items: end; margin-top: var(--space-md); }
.score-inputs input { font-size: 20px; font-variant-numeric: tabular-nums; }
.ledger-heading { margin-bottom: var(--space-sm); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: right; font-variant-numeric: tabular-nums; }
th { font-size: 13px; font-weight: 500; color: var(--color-muted); }
th, td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-rule); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td:last-child, th:last-child { padding-right: 0; }
td .text-button { padding: var(--space-2xs); font-size: 12px; }
tfoot { font-weight: 600; }
tfoot td { border-bottom: 0; }
.round-actions { white-space: nowrap; }
.game-footer { margin-top: var(--space-md); }
.game-footer p { margin: 0; }
.empty-state { padding: var(--space-2xl) var(--space-lg); text-align: center; }
.empty-state p { margin-inline: auto; }
.empty-row { text-align: center !important; color: var(--color-muted); padding-block: var(--space-xl); }
.notice { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); background: var(--color-highlight); font-size: 14px; }
.footer { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 13px; }
.skip-link { position: fixed; top: 0; left: 0; transform: translateY(-200%); background: var(--color-paper); padding: var(--space-sm); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 850px) {
  .login-layout { gap: var(--space-lg); }
  .welcome h1 { font-size: 44px; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .history { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--color-rule); }
  .history h2 { margin-bottom: var(--space-xs); }
  #game-list { display: flex; overflow-x: auto; gap: var(--space-xs); padding-bottom: var(--space-sm); }
  .game-choice { min-width: 150px; max-width: 190px; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .topbar { min-height: 80px; }
  .connection { display: none; }
  .login-layout { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); min-height: auto; gap: var(--space-xl); }
  .welcome h1 { font-size: 40px; }
  .welcome > p { font-size: 16px; margin-block: var(--space-md); }
  .name-line { margin-top: var(--space-lg); padding-top: var(--space-md); }
  .signin-panel { padding: var(--space-lg); }
  .page-heading { align-items: flex-start; padding-block: var(--space-lg); }
  h1 { font-size: 30px; } h2 { font-size: 24px; }
  .page-heading p { font-size: 14px; max-width: 28ch; }
  .page-heading .button { padding-inline: var(--space-sm); font-size: 14px; }
  .player-total { padding: var(--space-md) var(--space-sm); }
  .player-total .score { font-size: 36px; }
  .leader-line { align-items: flex-start; flex-direction: column; gap: var(--space-2xs); }
  .round-entry { padding: var(--space-md); }
  .score-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-inputs .button { grid-column: 1 / -1; }
  .score-inputs input { padding: var(--space-xs); }
  th, td { padding-inline: var(--space-2xs); }
  .round-actions .text-button { display: block; min-height: 36px; margin-left: auto; }
  .footer { margin-top: var(--space-xl); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

h1, h2 { text-wrap: balance; }
::selection { background: var(--color-highlight); color: var(--color-ink); }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
input { caret-color: var(--color-accent); }
.game-area, .history, .page-heading > div { min-width: 0; }
@media (max-width: 600px) { .page-heading { flex-wrap: wrap; } }
.sr-only { overflow: hidden; }

/* Phone-first scorebook: compact shell, expandable history, generous touch targets. */
:root { --container: 540px; --gutter: 16px; }
.container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.topbar { min-height: 64px; gap: var(--space-xs); }
.brand { font-size: 23px; gap: var(--space-xs); }
.brand-mark { display: flex; }
.header-actions { gap: var(--space-xs); }
.connection { display: none; }
.login-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); min-height: 0; }
.welcome h1 { font-size: 30px; }
.welcome > p { font-size: 15px; margin: var(--space-xs) 0 0; }
.signin-panel { padding: var(--space-lg) var(--space-md); }
.signin-panel h2 { font-size: 24px; }
.signin-panel > p { font-size: 15px; }
#phone-help { margin-block: var(--space-xs) var(--space-sm); }
#recaptcha-container { max-width: 100%; }
input { font-size: 16px; min-height: 48px; }
.button { min-height: 48px; touch-action: manipulation; }
.text-button, summary, .demo-link { min-height: 44px; touch-action: manipulation; }
.demo-link { display: inline-flex; align-items: center; }
.page-heading { flex-wrap: nowrap; gap: var(--space-xs); padding-block: var(--space-lg) var(--space-md); align-items: center; }
.page-heading h1 { font-size: 30px; }
.page-heading .button { padding-inline: var(--space-sm); font-size: 14px; }
.workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); min-height: 0; }
.history { border: 0; border-bottom: 1px solid var(--color-rule); padding: 0 0 var(--space-xs); }
.history summary { cursor: pointer; padding-block: var(--space-xs); font-size: 15px; font-weight: 600; }
.history summary:focus-visible { outline: 3px solid var(--color-focus); }
#game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 260px; overflow-y: auto; gap: var(--space-xs); padding-block: var(--space-xs); }
.game-choice { min-width: 0; max-width: none; margin: 0; }
.game-heading { margin-bottom: var(--space-md); gap: var(--space-xs); }
.game-heading h2 { font-size: 23px; }
.game-heading p { font-size: 12px; margin-top: var(--space-2xs); }
.player-total { padding: var(--space-sm) var(--space-xs); min-width: 0; }
.player-total .score { font-size: 32px; overflow-wrap: anywhere; }
.player-total small { font-size: 12px; }
.leader-line { padding-block: var(--space-sm); flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.round-entry { padding: var(--space-md); margin-block: var(--space-xs) var(--space-lg); }
.score-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-sm); }
.score-inputs input { padding: var(--space-xs); font-size: 20px; }
.score-inputs .button { grid-column: 1 / -1; width: 100%; margin-top: var(--space-2xs); }
.table-scroll { width: 100%; }
th, td { padding: var(--space-xs) var(--space-2xs); }
th { font-size: 12px; }
td { font-size: 14px; }
.round-actions .text-button { display: block; min-height: 44px; min-width: 52px; margin-left: auto; font-size: 13px; padding: var(--space-xs) var(--space-2xs); }
.game-footer { gap: var(--space-xs); }
.empty-state { padding: var(--space-xl) var(--space-md); }
.footer { margin-top: var(--space-lg); font-size: 12px; flex-wrap: wrap; gap: var(--space-xs); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
@media (max-width: 359px) {
  .welcome h1 { font-size: 27px; }
  .player-total .score { font-size: 28px; }
  .game-heading h2 { font-size: 21px; }
}