/* ─────────────────────────────────────────────────────────────
   pw-today.css — Today card, The Standing and the pre-season
   holding screen. Shared by index.html and desktop.html.

   One loud thing per screen: the dark card. Terracotta is the
   season's movement, slate is carried work, green is done.
   Contrast checked against #202B35: #E8784F 4.96, #A8B4C4 6.85,
   #8BC98F 7.44; white on #C24E2A 4.75, on #256628 6.98.
   ───────────────────────────────────────────────────────────── */

/* Two tokens desktop.html does not define; set here so both pages match. */
:root { --tw-muted: #E2D8C9; --tw-primary: #9D422C; }

.tw-stack { display: flex; flex-direction: column; gap: 12px; }
.tw-mono { font-family: var(--font-mono); }
.tw-dim { color: var(--ink-dim); }
.tw-context {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase;
}

/* ── The wordmark: one word, two tones ──
   "Wars" uses the button terracotta, which clears 3:1 on the paper
   ground at 18px bold and up; on dark panels it switches to the ring
   colour. Below that size use --tw-primary. */
.pw-wordmark { font-family: var(--font-sans); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pw-wordmark span { color: #C24E2A; }
.pw-wordmark.on-dark { color: #FBF8F1; }
.pw-wordmark.on-dark span { color: #E8784F; }

/* ── The dark card ── */
.tw-card {
  background: #202B35; color: #FBF8F1; border-radius: 8px;
  padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 18px;
}
.tw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tw-target { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-kicker {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; color: #A8B4C4; text-transform: uppercase;
}
.tw-kicker-icon:empty { display: none; }
.tw-kicker-icon .tw-pack { width: 12px; height: 12px; display: block; }
.tw-big {
  font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: #E8784F; transition: color 200ms;
}
.tw-sub { font-size: 13px; font-weight: 600; color: #A8B4C4; }
.tw-card.is-carried-now .tw-big { color: #A8B4C4; }
.tw-card.is-carried-now .tw-kicker { color: #C4CCCB; }

.tw-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.tw-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.tw-ring-bg { fill: none; stroke: #2E3B48; stroke-width: 9; }
.tw-ring-fg {
  fill: none; stroke: #E8784F; stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 320ms cubic-bezier(.2,.8,.2,1), stroke 200ms;
}
.tw-card.is-carried-now .tw-ring-fg { stroke: #A8B4C4; }
.tw-card.is-done .tw-ring-fg, .tw-ring.is-done .tw-ring-fg { stroke: #8BC98F; }
.tw-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tw-ring-num { font-size: 32px; font-weight: 800; line-height: 1; color: #FBF8F1; }
.tw-ring-of { font-family: var(--font-mono); font-size: 11px; color: #A8B4C4; margin-top: 2px; }

/* ── The one button ── */
.tw-bank, .tw-complete {
  width: 100%; min-height: 76px; border: none; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #FFFFFF; font-family: var(--font-sans);
}
.tw-bank {
  background: #C24E2A; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(232,120,79,0.7);
  transition: background 200ms, transform 120ms;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.tw-bank:active { transform: scale(0.97); }
.tw-bank:disabled { background: #2A3642; color: #A8B4C4; box-shadow: none; cursor: not-allowed; }
.tw-bank.is-copied { background: #364756; box-shadow: none; }
.tw-bank:focus-visible { outline: 3px solid #F0B987; outline-offset: 3px; }
.tw-bank.pop { animation: tw-pop 180ms ease-out; }
@keyframes tw-pop { 0% { transform: scale(1); } 40% { transform: scale(0.95); } 100% { transform: scale(1); } }
.tw-complete { background: #256628; }
/* ── Sunday: the seventh day gets its own card ──
   Rest has its own colour (--tw-rest). Green means a day is done and
   orange means work, so rest borrows neither. */
.tw-card.is-rest { --rest: var(--tw-rest, #9FC0E8); --rest-ink: var(--tw-rest-ink, #16263A); }
.tw-rest { display: none; flex-direction: column; gap: 14px; }
.tw-card.is-rest > .tw-top, .tw-card.is-rest > .tw-sets { display: none; }
.tw-card.is-rest .tw-rest { display: flex; }
.tw-rest-head { font-size: 58px; font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; color: var(--rest); }
.tw-rest-line { font-size: 15px; font-weight: 600; line-height: 1.4; color: #C4CCCB; max-width: 32ch; }
.tw-week7 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.7fr); gap: 6px; margin-top: 4px; }
.tw-w7 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tw-w7 span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-align: center; color: #A8B4C4; }
.tw-w7 i { height: 46px; border-radius: 6px; background: #2A3642; border: 1px solid #384A59; display: flex; align-items: center; justify-content: center; }
.tw-w7.is-claimed i { background: #E8784F; border-color: #E8784F; }
.tw-w7.is-partial i { border-color: #E8784F; background: linear-gradient(to top, rgba(232,120,79,0.5) 45%, #2A3642 45%); }
.tw-w7.is-off i { background: transparent; border-style: dashed; }
.tw-w7.is-rest span { color: var(--rest); font-weight: 700; }
.tw-w7.is-rest i { background: var(--rest); border-color: var(--rest); color: var(--rest-ink); }
.tw-w7.is-rest svg { width: 20px; height: 20px; }
.tw-rest-score { font-family: var(--font-mono); font-size: 12px; color: #A8B4C4; }
.tw-rest-score strong { color: #FBF8F1; font-weight: 500; }
.tw-next { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid #384A59; }
.tw-next strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.1; color: #FBF8F1; }
.tw-next small { font-family: var(--font-mono); font-size: 12px; color: #F2A98C; white-space: nowrap; }

/* Sunday board: six pips, one per training day */
.tw-row.is-week .tw-pips { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tw-row.is-week .tw-pip { height: 14px; border-radius: 3px; }
.tw-row.is-week .tw-pip.is-claimed { background: #364756; border-color: #364756; }
.tw-row.is-week.is-me .tw-pip.is-claimed { background: #C24E2A; border-color: #C24E2A; }
.tw-row.is-week .tw-pip.is-partial { border-color: #8C99A6; }
.tw-row.is-week .tw-pip.is-off { background: transparent; border-style: dashed; border-color: var(--border-dark); }
.tw-bank-main { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; }
.tw-bank-sub { font-family: var(--font-mono); font-size: 12px; opacity: 0.92; }

/* ── Ten squares ── */
.tw-sets { display: flex; flex-direction: column; gap: 10px; }
.tw-sets-head { display: flex; justify-content: space-between; align-items: baseline; }
.tw-sets-count { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: #FBF8F1; }
.tw-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tw-tile {
  height: 52px; border-radius: 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  background: #2A3642; color: #9AA7B4; border: 1.5px solid #384A59;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.tw-tile .tw-pack { width: 12px; height: 12px; }
.tw-tile.is-carried { border-style: dashed; border-color: #7F93A8; color: #A8B4C4; }
.tw-tile.is-on { background: #E8784F; border-color: #E8784F; border-style: solid; color: #202B35; }
.tw-tile.is-carried.is-on { background: #A8B4C4; border-color: #A8B4C4; }
.tw-tile.is-latest { border: 2px solid #FBF8F1; }
.tw-tile.is-done { background: #8BC98F; border-color: #8BC98F; color: #202B35; }

.tw-key { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.tw-key-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #C4CCCB; }
.tw-key-swatch { width: 14px; height: 14px; border-radius: 3px; background: #E8784F; flex-shrink: 0; }
.tw-key-swatch.is-carried { background: transparent; border: 1.5px dashed #A8B4C4; }
.tw-key-range { font-family: var(--font-mono); color: #A8B4C4; }

/* ── Pace line ── */
.tw-pace {
  min-height: 44px; padding: 0 14px; border-radius: 6px;
  background: var(--paper-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink-muted);
}
.tw-pace .tw-mono { font-weight: 500; color: var(--ink); }

/* ── Light panels: The Standing, Your Monday ── */
.tw-panel {
  background: var(--paper-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--ink);
}
.tw-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tw-kicker-ink { color: var(--ink-dim); }
.tw-panel-title { font-size: 18px; font-weight: 800; }
.tw-panel-copy { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.tw-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; white-space: nowrap;
  color: var(--green); border: 1px solid var(--green-border); background: var(--green-bg);
  padding: 3px 7px; border-radius: 3px;
}

.tw-rows { display: flex; flex-direction: column; gap: 6px; }
.tw-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
  background: var(--paper); border: 1px solid var(--tw-muted);
}
.tw-row.is-me { background: #F7E6DC; border-color: #E3B9A5; }
.tw-row.is-open { background: transparent; border-style: dashed; border-color: var(--border-dark); }
.tw-row-rank { width: 20px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); flex-shrink: 0; }
.tw-row-name { width: 96px; display: flex; flex-direction: column; min-width: 0; flex-shrink: 0; }
.tw-row-name strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-row-name small { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-dim); letter-spacing: 0.02em; white-space: nowrap; }
.tw-row.is-open .tw-row-name { flex-grow: 1; width: auto; }
.tw-pips { flex-grow: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.tw-pip { height: 10px; border-radius: 2px; background: var(--tw-muted); border: 1px solid var(--tw-muted); }
.tw-pip.is-carried { border-style: dashed; border-color: #8C99A6; }
.tw-pip.is-on { background: #364756; border: 1px solid #364756; }
.tw-row.is-me .tw-pip.is-on { background: #C24E2A; border-color: #C24E2A; }
.tw-pip.is-carried.is-on, .tw-row.is-me .tw-pip.is-carried.is-on { background: #6F8296; border-color: #6F8296; }
.tw-pip.is-done, .tw-row .tw-pip.is-done.is-on { background: var(--green); border-color: var(--green); }
.tw-row-count { width: 54px; white-space: nowrap; text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: 500; flex-shrink: 0; }
.tw-live {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--green);
  border: 1px solid var(--green-border); background: var(--green-bg); padding: 3px 7px; border-radius: 3px;
}

/* ── Pre-season ── */
.tw-seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tw-seat {
  height: 64px; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between;
  background: #2A3642; color: #A8B4C4; border: 1.5px dashed #7F93A8; min-width: 0;
}
.tw-seat strong { font-size: 15px; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-seat-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: 0.85; }
.tw-seat.is-reserved { border-style: solid; border-color: #384A59; }
.tw-seat.is-on { background: #E8784F; color: #202B35; border: 1.5px solid #E8784F; }
.tw-seat.is-done { background: #8BC98F; border-color: #8BC98F; }
.tw-seat.is-me { border: 2px solid #FBF8F1; }

.tw-prevs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tw-prev {
  height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; background: var(--paper); color: var(--ink-dim);
  border: 1.5px solid #E3B9A5;
}
.tw-prev.is-carried { border-style: dashed; border-color: #8C99A6; }
.tw-keylines { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.tw-max {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 6px; background: var(--paper); border: 1px solid var(--tw-muted);
}
.tw-max > div { display: flex; flex-direction: column; gap: 2px; }
.tw-max strong { font-size: 14px; font-weight: 700; }
.tw-max small { font-size: 12px; color: var(--ink-dim); }
.tw-ghost {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--tw-primary); border-radius: 6px;
  background: var(--paper-card); color: var(--tw-primary); font-family: var(--font-sans);
  font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.tw-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tw-rules > div {
  padding: 12px; border-radius: 6px; background: var(--paper-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.tw-rules strong { font-size: 17px; font-weight: 800; white-space: nowrap; }
.tw-rules small { font-size: 12px; color: var(--ink-dim); }

/* ── Day complete: confetti and a bounce when set 10 banks ──
   Fired by celebrateDay() in index.html. Phone app only. */
.tw-confetti {
  position: fixed; top: -14px; z-index: 9999; pointer-events: none;
  will-change: transform, opacity;
  animation: tw-fall var(--d, 1.6s) cubic-bezier(.25,.6,.4,1) var(--delay, 0s) forwards;
}
@keyframes tw-fall {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(var(--spin, 720deg)); opacity: 0.2; }
}
.tw-complete.tw-burst { animation: tw-burst 520ms cubic-bezier(.3,1.7,.5,1); }
@keyframes tw-burst { 0% { transform: scale(0.88); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tw-ring-fg, .tw-tile, .tw-bank, .tw-big { transition: none; }
  .tw-bank.pop, .tw-complete.tw-burst { animation: none; }
}

/* ── The League: the week grid ── */
.tw-week { display: flex; flex-direction: column; gap: 6px; }
.tw-week-row { display: grid; grid-template-columns: 74px repeat(6, minmax(0, 1fr)) 28px; gap: 6px; align-items: center; }
.tw-week-head span { text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #A8B4C4; }
.tw-week-head span.is-now { color: #FBF8F1; }
.tw-week-name { font-size: 14px; font-weight: 700; color: #FBF8F1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-week-name.is-me { color: #F2A98C; }
.tw-week-total { text-align: right; font-size: 16px; font-weight: 800; color: #FBF8F1; }
.tw-week-total.is-top { color: #E8784F; }
.tw-day {
  display: flex; align-items: flex-end; height: 30px; border-radius: 5px; overflow: hidden;
  background: #2A3642; border: 1px solid #384A59;
}
.tw-day.is-claimed { background: #E8784F; border-color: #E8784F; }
.tw-day.is-today { border: 2px solid #FBF8F1; }
.tw-day.is-today i { display: block; width: 100%; background: rgba(232,120,79,0.55); transition: height 300ms; }
.tw-day.is-future { background: transparent; border-style: dashed; }
.tw-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: #C4CCCB; }
.tw-legend span { display: flex; align-items: center; gap: 6px; }
.tw-legend .tw-day { width: 12px; height: 12px; border-radius: 3px; }

/* bars: The Season, Reps by movement */
.tw-bar { flex-grow: 1; height: 10px; border-radius: 5px; background: var(--tw-muted); position: relative; overflow: hidden; display: block; }
.tw-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.tw-bar-played { background: #D6CCBB; }
.tw-bar-fill { background: #364756; }
.tw-row.is-me .tw-bar-fill, .tw-bar-fill.is-now { background: #C24E2A; }
.tw-row .tw-row-name small { letter-spacing: 0.04em; }

/* ── Me ── */
.tw-seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tw-season {
  height: 70px; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between;
  background: #2A3642; color: #A8B4C4; border: 1.5px dashed #7F93A8; min-width: 0;
}
.tw-season strong { font-size: 12.5px; font-weight: 800; line-height: 1.15; }
.tw-season-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.tw-season-top span + span { font-size: 9px; letter-spacing: 0.06em; }
.tw-season.is-done { background: #8BC98F; color: #202B35; border: 1.5px solid #8BC98F; }
.tw-season.is-now { background: #E8784F; color: #202B35; border: 2px solid #FBF8F1; }
.tw-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 6px; background: #2A3642; border: 1px solid #384A59;
}
.tw-strip > div { display: flex; flex-direction: column; gap: 2px; }
.tw-strip strong { font-size: 15px; font-weight: 700; }
.tw-strip .tw-mono { font-size: 12px; color: #A8B4C4; white-space: nowrap; }
.tw-move { display: flex; flex-direction: column; gap: 6px; }
.tw-move-head { display: flex; justify-content: space-between; align-items: baseline; }
.tw-move-head strong { font-size: 15px; font-weight: 700; }
.tw-move-head span { font-size: 18px; font-weight: 800; }
.tw-move small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.tw-list { padding: 4px 16px; gap: 0; }
.tw-list-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 56px; border-bottom: 1px solid var(--tw-muted);
}
.tw-list-row:last-child { border-bottom: none; }
.tw-list-row > div { display: flex; flex-direction: column; }
.tw-list-row strong { font-size: 14px; font-weight: 700; }
.tw-list-row small { font-size: 12px; color: var(--ink-dim); }
.tw-switch {
  width: 52px; height: 32px; border-radius: 16px; border: none; background: var(--border-dark);
  position: relative; cursor: pointer; flex-shrink: 0; transition: background 160ms;
}
.tw-switch span {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px;
  background: #FBF8F1; transition: left 160ms;
}
.tw-switch[aria-checked="true"] { background: var(--green); }
.tw-switch[aria-checked="true"] span { left: 23px; }
.tw-switch:focus-visible, .tw-ghost:focus-visible { outline: 3px solid #F0B987; outline-offset: 2px; }

/* Division standings (League) */
.tw-div-name { width: 128px; }
.tw-row.is-open .tw-div-name small { white-space: normal; }
.tw-row.is-open .tw-div-name { flex-grow: 1; width: auto; }
.tw-div-waiting { margin-top: 8px; }

/* ── The League: division standings, two green bars each ── */
.tw-lg-nudge { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.tw-sr-list { display: flex; flex-direction: column; }
.tw-sr { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--tw-muted); }
.tw-sr:first-child { padding-top: 4px; }
.tw-sr:last-child { border-bottom: none; padding-bottom: 0; }
.tw-sr-name { font-size: 16px; color: var(--ink); }
.tw-sr-name strong { font-weight: 800; }
.tw-sr-name em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #C24E2A; margin-left: 4px; }
.tw-sr.is-me .tw-sr-name { color: #C24E2A; }
.tw-sb { display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.tw-sb-bar { height: 8px; border-radius: 4px; background: var(--tw-muted); overflow: hidden; display: block; }
.tw-sb-bar i { display: block; height: 100%; border-radius: 4px; background: #8BC98F; }
.tw-sb-v { text-align: right; white-space: nowrap; }
.tw-league-foot { font-size: 12px; line-height: 1.45; color: var(--ink-dim); }

/* ── The season-end retest ── */
.tw-retest { gap: 12px; }
.tw-retest-lede { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.tw-retest-lede strong { color: #E8784F; }
.tw-retest-sub { font-size: 14px; line-height: 1.45; color: #C4CCCB; }
.tw-retest-result { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.tw-retest-result span { color: #E8784F; }