/* Page styles. Colours, sizes, type and motion come from tokens.css (generated from shared/design); no raw colour values here. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cs-background);color:var(--cs-on-background);
  font:var(--cs-type-body-weight) var(--cs-type-body-size)/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--cs-primary-text)}
h1,h2,h3{font-family:Sora,sans-serif;margin:0}
h1{font-size:var(--cs-type-title-large-size);font-weight:var(--cs-type-title-large-weight);letter-spacing:var(--cs-type-title-large-tracking)}
h2{font-size:var(--cs-type-title-size);font-weight:var(--cs-type-title-weight);letter-spacing:var(--cs-type-title-tracking)}
.page{width:100%;max-width:560px;margin:0 auto;padding:var(--cs-space-m)}
.page.bleed{max-width:none;padding:0}
.muted{color:var(--cs-on-surface-muted)}
.overline{font-size:var(--cs-type-overline-size);font-weight:var(--cs-type-overline-weight);letter-spacing:var(--cs-type-overline-tracking);text-transform:uppercase;color:var(--cs-on-surface-muted)}
.sora{font-family:Sora,sans-serif}

/* Header band: the green top of an invite or spectator page. */
.header-band{background:var(--cs-brand-band);color:var(--cs-brand-on-band);padding:var(--cs-space-l) var(--cs-space-m) var(--cs-space-m)}
.header-band .brand{display:flex;align-items:center;gap:var(--cs-space-xs);font-family:Sora,sans-serif;font-weight:700;font-size:var(--cs-type-label-size);letter-spacing:.08em;color:var(--cs-brand-mark)}
.header-band .brand img{width:var(--cs-size-icon-medium);height:var(--cs-size-icon-medium)}
.header-band h1{margin-top:var(--cs-space-s);line-height:1.15}
.header-band .sub{margin:var(--cs-space-xxs) 0 0;font-size:var(--cs-type-caption-size)}
.header-band .status{opacity:.85}
/* The light palette's Live is too dark for the band, so the band has its own (contrast-tested in shared/design). */
.header-band .live{color:var(--cs-brand-on-band-live)}
.live{display:inline-flex;align-items:center;gap:var(--cs-space-xxs);margin-left:var(--cs-space-xs);font-weight:700;font-size:var(--cs-type-label-size);letter-spacing:.04em;color:var(--cs-live)}
.live::before{content:"";width:var(--cs-size-dot);height:var(--cs-size-dot);border-radius:50%;background:currentColor;animation:cs-pulse var(--cs-motion-live-pulse) ease-in-out infinite}
@keyframes cs-pulse{50%{opacity:.35}}

/* Card */
.card{background:var(--cs-surface);border:var(--cs-size-hairline) solid var(--cs-outline);border-radius:var(--cs-radius-medium);overflow:hidden}
.card+.card{margin-top:var(--cs-space-s)}
.card.padded{padding:var(--cs-space-s) var(--cs-space-m)}
.card h2{margin-bottom:var(--cs-space-xxs)}

/* Board rows: position badge, name and detail line, total. */
.board-row{display:flex;align-items:center;gap:var(--cs-space-s);padding:var(--cs-space-xs) var(--cs-space-s);border-top:var(--cs-size-hairline) solid var(--cs-surface-variant)}
.board-row:first-child{border-top:0}
.board-row.self{background:var(--cs-self-highlight)}
.board-row .who{flex:1;min-width:0}
.board-row .name{font-weight:500}
.board-row .line{font-size:var(--cs-type-label-size);color:var(--cs-on-surface-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row .total{font-family:Sora,sans-serif;font-weight:var(--cs-type-score-weight);font-size:var(--cs-type-score-size);font-variant-numeric:tabular-nums}
.board-row .up{color:var(--cs-positive)}
.board-row .down{color:var(--cs-negative)}
.board-gap{text-align:center;color:var(--cs-on-surface-muted);font-size:var(--cs-type-label-size);padding:var(--cs-space-xxs);border-top:var(--cs-size-hairline) solid var(--cs-surface-variant)}

/* Position badge, and its octagon form for the leader. */
.position-badge{flex:none;width:var(--cs-size-badge);height:var(--cs-size-badge);display:flex;align-items:center;justify-content:center;
  border-radius:var(--cs-radius-small);background:var(--cs-surface-variant);font-family:Sora,sans-serif;font-weight:700;font-size:var(--cs-type-score-small-size);font-variant-numeric:tabular-nums}
.position-badge.leader{background:var(--cs-leader);color:var(--cs-on-leader);border-radius:0;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}

/* The winner band: the one other place gold appears. */
.winner-band{display:flex;align-items:center;gap:var(--cs-space-s);padding:var(--cs-space-m);background:var(--cs-brand-band);color:var(--cs-brand-on-band);border-radius:var(--cs-radius-medium)}
.winner-band .position-badge{width:40px;height:40px}
.winner-band .position-badge.leader{background:var(--cs-brand-mark);color:var(--cs-brand-band)}
.winner-band .name{font-family:Sora,sans-serif;font-weight:700;font-size:var(--cs-type-title-size)}

/* Pill tabs */
.pill-tabs{display:flex;flex-wrap:wrap;gap:var(--cs-space-xxs);padding:var(--cs-space-s) 0}
.pill-tab{display:inline-flex;align-items:center;min-height:var(--cs-size-chip-min-height);padding:0 var(--cs-space-s);border:0;border-radius:var(--cs-radius-medium);
  background:var(--cs-surface-variant);color:var(--cs-on-surface);font:inherit;font-size:var(--cs-type-label-size);font-weight:var(--cs-type-label-weight);text-decoration:none;cursor:pointer;
  transition:border-radius var(--cs-motion-medium) ease,background var(--cs-motion-short) ease}
.pill-tab:focus-visible{outline:var(--cs-size-hairline) solid var(--cs-primary-text);outline-offset:2px}
.pill-tab[aria-selected="true"],.pill-tab.selected{background:var(--cs-primary);color:var(--cs-on-primary);border-radius:999px}

/* Cut-corner button: the shape of everything pressable. Cream on green is the default; gold is never a button colour. */
.cut-button{display:flex;align-items:center;justify-content:center;min-height:var(--cs-size-button-min-height);padding:0 var(--cs-space-l);border:0;
  background:var(--cs-primary);color:var(--cs-on-primary);font:inherit;font-weight:var(--cs-type-body-strong-weight);font-size:var(--cs-type-body-size);text-decoration:none;cursor:pointer;
  clip-path:polygon(var(--cs-cut) 0,100% 0,100% calc(100% - var(--cs-cut)),calc(100% - var(--cs-cut)) 100%,0 100%,0 var(--cs-cut))}
.cut-button:active{filter:brightness(.92)}
.cut-button.on-primary{background:var(--cs-brand-on-band);color:var(--cs-brand-band)}
.cut-button:focus-visible{outline:var(--cs-size-hairline) solid var(--cs-primary-text);outline-offset:2px}

/* Footer */
.site-footer{margin-top:auto;padding:var(--cs-space-m);text-align:center;font-size:var(--cs-type-label-size)}
.site-footer nav{display:flex;justify-content:center;gap:var(--cs-space-m)}
.site-footer a{color:var(--cs-on-surface-muted)}
/* A page that ends on the green (the invite screen, the landing page's closing band) keeps the footer on it: one green screen. */
body:has(.invite-page),body:has(.landing) .site-footer{background:var(--cs-brand-band)}
body:has(.invite-page) .site-footer a,body:has(.landing) .site-footer a{color:var(--cs-brand-on-band);opacity:.7}

@media (prefers-reduced-motion:reduce){.live::before{animation:none}.pill-tab{transition:none}}

/* Invite page: one full green screen, centred. The button is cream, never gold. */
.invite-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--cs-space-xl) var(--cs-space-l);
  background:var(--cs-brand-band);color:var(--cs-brand-on-band)}
.invite-page .brand{display:flex;flex-direction:column;align-items:center;gap:var(--cs-space-xs);font-family:Sora,sans-serif;font-weight:700;font-size:var(--cs-type-label-size);letter-spacing:.1em;color:var(--cs-brand-mark)}
.invite-page .invite-mark{width:var(--cs-size-mark);height:var(--cs-size-mark)}
.invite-lead{margin:var(--cs-space-xl) 0 0;opacity:.8}
.invite-name{margin:var(--cs-space-xs) 0 0;max-width:20ch;font-size:var(--cs-type-display-size);font-weight:var(--cs-type-display-weight);letter-spacing:var(--cs-type-display-tracking);line-height:1.15;overflow-wrap:anywhere}
.invite-meta{margin:var(--cs-space-s) 0 0;font-size:var(--cs-type-caption-size);opacity:.75}
.invite-store{flex-direction:column;width:100%;max-width:320px;margin-top:var(--cs-space-xl);padding-top:var(--cs-space-xs);padding-bottom:var(--cs-space-xs)}
.invite-store+.invite-store{margin-top:var(--cs-space-s)}
.invite-store-name{font-size:var(--cs-type-caption-size);font-weight:var(--cs-type-body-weight);opacity:.75}
.invite-small{margin:var(--cs-space-m) 0 0;font-size:var(--cs-type-caption-size);opacity:.7}

/* Spectator page: the Board's rows under the green band. */
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spectator-body{display:flex;flex-direction:column;gap:var(--cs-space-s)}
.spectator-body p{margin:0}
.spectator-body .card+.card{margin-top:0}
.spectator-body .pill-tabs{padding:0}
.spectator-card h2{font-size:var(--cs-type-body-strong-size);font-weight:700}
.spectator-card p+p{margin-top:var(--cs-space-xxs)}
.spectator-table{display:flex;flex-direction:column;gap:var(--cs-space-xs)}
.spectator-table .caption{font-size:var(--cs-type-caption-size)}
.board-row[hidden]{display:none}
.board-row .move{flex:none;font-weight:700}
.board-row .move.up::before{content:"\2191"}
.board-row .move.down::before{content:"\2193"}
.board-row .tags{display:flex;flex-wrap:wrap;gap:var(--cs-space-xxs);margin-top:var(--cs-space-xxs)}
.tag{font-size:var(--cs-type-caption-size);padding:0 var(--cs-space-xs);border-radius:var(--cs-radius-small);background:var(--cs-surface-variant);color:var(--cs-on-surface)}
.tag.negative{color:var(--cs-negative)}
.spectator-rows.compact .board-row{padding-top:var(--cs-space-xxs);padding-bottom:var(--cs-space-xxs)}
.spectator-rows.compact .who{display:flex;align-items:baseline;gap:var(--cs-space-xs)}
.spectator-rows.compact .name{flex:0 1 auto;min-width:0}
.spectator-rows.compact .line{flex:0 1 auto;margin-left:auto}
.spectator-rows.compact .total{font-size:var(--cs-type-score-small-size)}
.group-row{display:flex;gap:var(--cs-space-s);padding:var(--cs-space-xs) var(--cs-space-s);border-top:var(--cs-size-hairline) solid var(--cs-surface-variant)}
.group-row:first-child{border-top:0}
.group-time{flex:none;min-width:3.5em;font-family:Sora,sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.finder input{width:100%;min-height:var(--cs-size-touch);padding:0 var(--cs-space-s);border:var(--cs-size-hairline) solid var(--cs-outline);border-radius:var(--cs-radius-medium);
  background:var(--cs-surface);color:var(--cs-on-surface);font:inherit}
.finder input:focus-visible{outline:var(--cs-size-hairline) solid var(--cs-primary-text);outline-offset:2px}
.winner-band .winner-who{min-width:0}
.winner-band .winner-label{font-size:var(--cs-type-caption-size);opacity:.8}
.spectator-foot{text-align:center;color:var(--cs-on-surface-muted);font-size:var(--cs-type-label-size)}
.spectator-foot a{font-weight:700}