/* Layout: a header that says what this is (pitch, three steps, view switcher), then one of three views: Watch (scoreboard, rink, game plans), Test a strategy, How real is it. Game plans and settings open in side drawers. */
  :root {
    --bg: #e9ecef;
    --panel: #f7f8fa;
    --fg: #16202c;
    --fg-dim: #5c6978;
    --line: #d2d8e0;
    --ice: #f3f8fc;
    --ice-line-red: #c8102e;
    --ice-line-blue: #0b4ea2;
    --home: #000000;
    --home-2: #ffb81c;
    --away: #af1e2d;
    --away-2: #ffffff;
    --away-3: #192168;
    --bos-tint: #fff5dc; --bos-edge: #e9b84d; --mtl-tint: #f9e6e8; --mtl-edge: #d9a0a7; --link: #0b4ea2; --raised: #ffffff;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg: #0f1419; --panel: #171d25; --fg: #e8edf2; --fg-dim: #8d9aa8; --line: #2a3340; --ice: #dfe9f2; --home: #141414; --bos-tint: #2b2414; --bos-edge: #7a5a1c; --mtl-tint: #2e1a1d; --mtl-edge: #74333b; --link: #7fb0ee; --raised: #1d242e; color-scheme: dark; } }
  :root[data-theme="dark"] {
    --bg: #0f1419; --panel: #171d25; --fg: #e8edf2; --fg-dim: #8d9aa8; --line: #2a3340; --ice: #dfe9f2; --home: #141414; --bos-tint: #2b2414; --bos-edge: #7a5a1c; --mtl-tint: #2e1a1d; --mtl-edge: #74333b; --link: #7fb0ee; --raised: #1d242e; color-scheme: dark; }

  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  footer.version { text-align: center; color: var(--fg-dim); font-size: 0.75rem; padding: 4px 16px 18px; }
  .wrap, header.top { max-width: 1240px; margin: 0 auto; }
  .wrap { display: flex; flex-direction: column; gap: 14px; padding-block: 4px 16px; }
  .view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 200 / 109; border-radius: 14px; }

  header.top { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: end; padding-block: 16px 6px; }
  .brand h1 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.02; margin: 0; text-wrap: balance; }
  .brand p { margin: 4px 0 0; color: var(--fg-dim); max-width: 62ch; }
  /* the product is the title; the matchup it plays is the line under it */
  .brand p.matchup { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.1; color: var(--fg); }
  .brand .matchup .vs { color: var(--fg-dim); font-weight: 600; font-size: 0.75em; margin: 0 0.15em; }
  nav.views { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
  nav.views button { border: 0; background: none; padding: 7px 13px; border-radius: 7px; font: 700 1rem var(--display); letter-spacing: 0.03em; color: var(--fg-dim); white-space: nowrap; }
  nav.views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  nav.views .how { font: 500 0.9rem var(--body); letter-spacing: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  /* Watch: the way into the Game plan lab */
  .labpromo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 10px; padding-inline: 14px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  .labpromo .lp-t { font: 800 1.1rem var(--display); }
  .labpromo .steps { grid-column: auto; flex: 1 1 420px; }
  .labpromo .go { cursor: default; }
  .labpromo .primary { margin-left: auto; }
  /* Game plan lab */
  .tryrow select { width: auto; flex: 1 1 160px; min-width: 0; }
  .tested { display: flex; flex-direction: column; gap: 12px; }
  .tested:empty { display: none; }
  article.change { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
  article.change h4 { margin: 0; font: 800 1.1rem var(--display); }
  article.change h4 small { font: 400 0.85rem var(--body); color: var(--fg-dim); margin-left: 6px; }
  .headline.sm { font-size: 1.15rem; }
  .side .cgrid.lgrid { grid-template-columns: 1fr 1fr; gap: 14px 14px; }
  /* the lab spans the same width as the header and the Watch view; only its running text is held to a readable length */
  .labflow { display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .labflow .headline, .labflow .explain, .labflow .what, .labflow p.hint { max-width: 80ch; }
  .basehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .basehead .vt { margin: 0; }
  .planpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 700px) { .planpair { grid-template-columns: 1fr; } }
  /* the run card: what to do next, the run buttons, progress only while running, then the other actions */
  .card.actions { display: flex; flex-direction: column; gap: 14px; }
  .actions .status { margin: 0; font-size: 0.95rem; line-height: 1.5; max-width: 80ch; }
  .actions .row { flex-wrap: wrap; align-items: center; gap: 10px; }
  .actions .gfield { margin-left: auto; }
  .actions .running { display: flex; flex-direction: column; gap: 6px; }
  .actions .running .hint { margin: 0; }
  .actions .tools { gap: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
  .actions > .hint { margin: 0; }
  @media (max-width: 520px) { .actions .gfield { margin-left: 0; } }
  /* a choice changed from the baseline: a tag beside its name (so both columns stay level) and a ring on the control */
  .lgrid .lrow { display: flex; align-items: center; gap: 8px; min-height: 1.15rem; }
  .lgrid label.agg .lrow { justify-content: space-between; }
  .lgrid label { justify-content: end; }   /* a name that wraps on a phone pushes its label up, not its control down: the controls stay level */
  .lgrid label.changed .lname::after { content: 'Changed'; display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 999px; line-height: 1.35; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--link); background: color-mix(in srgb, var(--link) 15%, transparent); }
  .lgrid label.changed select { border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
  /* the aggression slider: a quiet track, filled to the value in the team's colour */
  .side input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; border: 0; --fill: 50%; --team: var(--away); }
  .side.bos input[type=range] { --team: #d99a0b; }
  .side input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--team) var(--fill), var(--line) var(--fill)); }
  .side input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
  .side input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--team); }
  .side input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--team); border: 2px solid var(--raised); box-shadow: 0 0 0 1px var(--team); }
  .side input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--team); border: 2px solid var(--raised); box-shadow: 0 0 0 1px var(--team); }
  .tested article.change { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
  .tested .what { margin: 0; line-height: 1.5; }
  .tested .tnum { font: 600 0.72rem var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
  .tested .chead { display: flex; flex-wrap: wrap; align-self: stretch; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
  .tested .cbtns { display: flex; gap: 16px; font-size: 0.85rem; margin-left: auto; }
  .tested article.change.folded > :not(.chead):not(.headline) { display: none; }
  .tested .removed { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; color: var(--fg-dim); }
  .lgrid select { background: var(--raised); }
  @media (max-width: 380px) { .side .cgrid.lgrid { grid-template-columns: 1fr; } }
  .steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; font-size: 0.9rem; color: var(--fg-dim); }
  .steps .go { background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; font: 400 0.9rem var(--body); color: var(--fg-dim); text-align: left; }
  .steps .go b { color: var(--fg); font-weight: 600; }
  .steps .go:hover b, .steps .go:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
  .steps .go.how { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .steps .n { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--fg); color: var(--bg); font: 800 0.82rem var(--display); margin-right: 6px; }
  @media (max-width: 760px) { header.top { grid-template-columns: 1fr; } nav.views { overflow-x: auto; } .steps .go small { display: none; } }
  .flash { animation: flash 1.8s ease-out 1; }
  @keyframes flash { 0%, 30% { box-shadow: 0 0 0 4px var(--link); } 100% { box-shadow: 0 0 0 4px transparent; } }
  @media (prefers-reduced-motion: reduce) { .flash { animation: none; box-shadow: 0 0 0 4px var(--link); } }

  .score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; padding-block: 8px; padding-inline: 16px; }
  .team { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; min-width: 0; }
  .team.r { justify-content: flex-end; }
  .team .g { font-size: 2.1rem; font-variant-numeric: tabular-nums; }
  .team .dot, .plan .dot, .side .dot { width: 15px; height: 15px; border-radius: 50%; border: 4px solid; box-sizing: border-box; flex: none; }
  .clock { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); min-width: 150px; }
  .clock b { font-size: 1.9rem; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.05; }
  .clock #note { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; max-width: 220px; }
  .strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; border-top: 1px solid var(--line); padding-top: 7px; font-size: 0.88rem; color: var(--fg-dim); }
  .strip b { color: var(--fg); font-variant-numeric: tabular-nums; }
  .share { display: inline-flex; align-items: center; gap: 8px; }
  .share .bar { width: 150px; height: 9px; border-radius: 5px; overflow: hidden; display: flex; background: var(--line); }
  .share .bar i { display: block; height: 100%; transition: width 0.4s; }
  button.tip { border: 1px solid var(--line); background: var(--panel); border-radius: 50%; width: 20px; height: 20px; font-size: 0.72rem; line-height: 1; padding: 0; color: var(--fg-dim); }
  .pop { position: fixed; max-width: 300px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); font-size: 0.88rem; line-height: 1.45; z-index: 30; }
  .pop b { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.02em; }
  @media (max-width: 620px) { .team { font-size: 1.1rem; gap: 6px; } .team .g { font-size: 1.6rem; } .clock { min-width: 0; } .share .bar { width: 100px; } }
  .sight-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.82rem; color: var(--fg-dim); margin: -4px 0 0; }
  .sight-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .sw { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
  .sw.lit { background: rgb(255 200 60 / 0.6); } .sw.shade { background: rgb(22 32 44 / 0.35); } .sw.pass { height: 3px; background: #0b4ea2; }
  .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
  .plan { border: 1px solid; border-radius: 14px; padding-block: 12px; padding-inline: 14px; display: flex; flex-direction: column; gap: 8px; }
  .plan.bos, .side.bos { background: var(--bos-tint); border-color: var(--bos-edge); }
  .plan.mtl, .side.mtl { background: var(--mtl-tint); border-color: var(--mtl-edge); }
  .plan header { display: flex; align-items: center; gap: 8px; }
  .plan h2 { flex: 1; font-size: 1.15rem; letter-spacing: 0.04em; }
  .plan p { margin: 0; line-height: 1.45; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { border: 1px solid var(--line); background: var(--raised); border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; }
  button.linkish { background: none; border: 0; padding: 2px 0; color: var(--link); font-weight: 600; }
  .box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding-block: 4px 10px; padding-inline: 16px; }
  details.more { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
  details.more:first-child { border-top: 0; margin-top: 4px; }
  details.more > summary { cursor: pointer; font: 700 1.05rem var(--display); letter-spacing: 0.04em; }
  details.more > summary small { font: 400 0.85rem var(--body); color: var(--fg-dim); margin-left: 8px; letter-spacing: 0; }
  details.more > *:not(summary) { margin-top: 10px; }
  .sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 760px) { .sheets { grid-template-columns: 1fr; } }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding-block: 14px; padding-inline: 16px; }
  .vhead { display: flex; flex-direction: column; gap: 4px; }
  h2.vt { font-size: 1.6rem; letter-spacing: 0.02em; text-transform: none; }
  .vhead .hint { margin: 0; max-width: 75ch; }

  .test { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
  @media (max-width: 900px) { .test { grid-template-columns: 1fr; } }
  .setup, .results { display: flex; flex-direction: column; gap: 12px; }
  .coachas { display: flex; align-items: center; gap: 10px; }
  .coachas .hint { margin: 0; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .seg button { border: 0; border-radius: 0; background: var(--raised); padding: 5px 12px; }
  .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .side .who small { font: 500 0.78rem var(--body); color: var(--fg-dim); margin-left: auto; letter-spacing: 0.08em; text-transform: uppercase; }
  button.linkish.under { align-self: flex-start; margin-top: -6px; font-size: 0.9rem; }
  .side .hint { margin: 0; }
  .abrow { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
  .tag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font: 800 1rem var(--display); }
  .tag.a { background: var(--raised); border: 1px solid var(--line); } .tag.b { background: var(--link); color: #fff; }
  .bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .bgrid { margin-top: 8px; gap: 8px 10px; }
  .bgrid label.changed select, .bgrid label.changed input { outline: 2px solid var(--link); outline-offset: 1px; }
  .bgrid label.changed::after { content: 'changed'; color: var(--link); font-size: 0.66rem; letter-spacing: 0.08em; }
  .bgrid select { background: var(--raised); }
  .bgrid small.desc { display: none; } .bgrid label.changed small.desc { display: block; }
  .explain { margin: 0; line-height: 1.5; }
  .explain button.tip { width: auto; height: auto; border-radius: 4px; padding: 0; font: inherit; color: var(--link); background: none; border: 0; text-decoration: underline dotted; text-underline-offset: 3px; }
  .gfield { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
  .gfield select { width: auto; }
  button.primary { background: var(--link); border-color: var(--link); color: #fff; font: 700 1.05rem var(--display); letter-spacing: 0.03em; padding: 9px 18px; }
  button.primary:disabled { opacity: 0.55; cursor: default; }
  .progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .progress i { display: block; height: 100%; width: 0; background: var(--link); transition: width 0.2s linear; }
  #labNote, #labEst { margin: 0; }
  .forwho { display: flex; align-items: center; gap: 8px; font-weight: 600; }
  .forwho .dot { width: 15px; height: 15px; border-radius: 50%; border: 4px solid; box-sizing: border-box; flex: none; }
  .headline { font: 700 1.4rem/1.15 var(--display); margin: 0; text-wrap: balance; }
  .verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .verdicts:empty { display: none; }
  @media (max-width: 700px) { .verdicts { grid-template-columns: 1fr; } }
  .v { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding-block: 10px 12px; padding-inline: 12px; display: flex; flex-direction: column; gap: 5px; }
  .v .k { font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .v .big { font: 800 1.8rem/1 var(--display); font-variant-numeric: tabular-nums; }
  .v .sub { color: var(--fg-dim); font-size: 0.82rem; }
  .pill { align-self: flex-start; border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; }
  .pill.good { background: #e2f2e9; color: #1f7a4a; } .pill.bad { background: #f8e1df; color: #a3241b; } .pill.flat { background: var(--line); color: var(--fg-dim); } .pill.cur { background: var(--bos-tint); color: var(--fg); border: 1px solid var(--bos-edge); }
  .range { position: relative; height: 20px; }
  .range .axis { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); }
  .range .zero { position: absolute; top: 2px; left: calc(50% - 1px); width: 2px; height: 16px; background: var(--fg-dim); }
  .range .span { position: absolute; top: 6px; height: 8px; border-radius: 4px; opacity: 0.35; }
  .range .pt { position: absolute; top: 4px; width: 12px; height: 12px; border-radius: 50%; margin-left: -6px; }
  .rankbox { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
  h3.rt { font: 700 1.2rem var(--display); margin: 0; }
  .rankbox .row select { width: auto; }
  .rank { display: grid; gap: 8px; }
  .rank .r { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 130px; gap: 12px; align-items: center; }
  @media (max-width: 600px) { .rank .r { grid-template-columns: 1fr; gap: 4px; } }
  .rank .name { font-weight: 600; } .rank .name small { display: block; color: var(--fg-dim); font-weight: 400; }
  .results .hint { margin: 0; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.good { background: #16322a; color: #6fd19b; } :root:not([data-theme="light"]) .pill.bad { background: #3a1c1a; color: #f08a80; } }
  :root[data-theme="dark"] .pill.good { background: #16322a; color: #6fd19b; } :root[data-theme="dark"] .pill.bad { background: #3a1c1a; color: #f08a80; }
  .realtop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
  .realscore { font-weight: 600; }
  .calib.real table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
  .calib.real th, .calib.real td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .calib.real th { font: 700 0.78rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
  .calib.real tr.sec td { font: 800 0.95rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); padding-top: 14px; border-bottom: 2px solid var(--line); }
  .calib.real td.m b { display: block; font-weight: 600; } .calib.real td.m span { color: var(--fg-dim); font-size: 0.82rem; }
  .calib.real td.n { white-space: nowrap; } .calib.real td.n .vs { color: var(--fg-dim); font-size: 0.82rem; }
  .calib.real td.n .pill { display: inline-block; margin-top: 3px; }
  .calib.real td.lg { color: var(--fg-dim); white-space: nowrap; }
  .pill.warn { background: #fbefd6; color: #8a5a00; }
  :root[data-theme="dark"] .pill.warn { background: #3a2e14; color: #f0c36a; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.warn { background: #3a2e14; color: #f0c36a; } }
  dl.glossary { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 10px; }
  dl.glossary dt { font-weight: 600; } dl.glossary dd { margin: 0; }
  @media (max-width: 600px) { dl.glossary { grid-template-columns: 1fr; } dl.glossary dd { margin-bottom: 6px; } }
  .stats .k button.tip { width: 16px; height: 16px; font-size: 0.6rem; vertical-align: 1px; }
  .scrim { position: fixed; inset: 0; background: rgb(10 14 20 / 0.4); z-index: 20; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); box-sizing: border-box; background: var(--panel); border-left: 1px solid var(--line); z-index: 21; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); padding-inline: 18px max(18px, env(safe-area-inset-right, 0px)); }
  .drawer > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .side { border: 1px solid; border-radius: 12px; padding-block: 14px 16px; padding-inline: 16px; display: flex; flex-direction: column; gap: 12px; }
  .side .who { display: flex; align-items: center; gap: 8px; font: 800 1.25rem var(--display); }
  .side .cgrid { grid-template-columns: 1fr; gap: 20px; }
  .side .cgrid label { font-size: 0.72rem; gap: 6px; }
  .side select:focus-visible { outline-color: var(--link); }
  .side .cgrid select { font-size: 0.92rem; padding: 5px 6px; background: var(--raised); }
  .side .cgrid small.desc { font-size: 0.82rem; color: var(--fg-dim); text-transform: none; letter-spacing: 0; line-height: 1.45; margin-top: 2px; }
  .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  .cgrid label { display: flex; flex-direction: column; gap: 2px; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); min-width: 0; }
  .cgrid select { font-size: 0.8rem; padding: 3px 4px; border-radius: 5px; }
  .cgrid label.agg { grid-column: 1 / -1; }
  .cgrid input[type=range] { margin: 2px 0 0; }
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding-block: 14px; padding-inline: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  h2 { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 8px; }
  h2 .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; box-sizing: border-box; }
  .field { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px 10px; font-size: 0.85rem; }
  .field label { color: var(--fg-dim); }
  select, input[type=range] { width: 100%; min-width: 0; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
  input[type=range] { padding: 0; accent-color: var(--away); }
  .row { display: flex; flex-wrap: wrap; gap: 6px; }
  button { font: 600 0.85rem var(--body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
  button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  button:focus-visible, select:focus-visible { outline: 2px solid var(--away); outline-offset: 2px; }
  .stats { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 0.85rem; gap: 2px 10px; font-variant-numeric: tabular-nums; }
  .stats .k { text-align: center; color: var(--fg-dim); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .stats .h { text-align: right; font-weight: 600; } .stats .a { font-weight: 600; }
  .log { font-size: 0.82rem; line-height: 1.5; margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
  .log li { display: flex; gap: 8px; } .log time { color: var(--fg-dim); font-variant-numeric: tabular-nums; flex: none; width: 5.2em; }
  .log .goal { font-weight: 600; }
  .calib table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; margin-top: 8px; }
  .calib th, .calib td { padding: 3px 4px; text-align: right; border-bottom: 1px solid var(--line); }
  .calib th:first-child, .calib td:first-child { text-align: left; color: var(--fg-dim); font-weight: 500; }
  .calib th { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
  .calib td.sim { font-weight: 600; } .calib td.off { color: #d9480f; }
  .calib.lab, #calib { overflow-x: auto; } #calib table { font-size: 0.74rem; } #calib th, #calib td { padding: 3px 2px; } #calib th { font-size: 0.6rem; letter-spacing: 0.04em; } .calib.lab th, .calib.lab td { white-space: nowrap; padding: 3px 3px; font-size: 0.72rem; } .calib.lab th { font-size: 0.62rem; letter-spacing: 0.04em; } .calib.lab .ci { color: var(--fg-dim); font-size: 0.66rem; font-weight: 400; } .calib.lab td { vertical-align: top; }
  .datasrc { font-size: 0.8rem; line-height: 1.5; margin-top: 8px; }
  .datasrc p { margin: 0 0 6px; } .datasrc a { color: var(--fg); } .datasrc code { font-size: 0.75rem; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
  #admin label span { color: var(--fg); font-variant-numeric: tabular-nums; }
  .slider { position: relative; min-width: 0; padding-bottom: 6px; }
  .slider input { width: 100%; margin: 0; }
  .slider .tick { position: absolute; bottom: 0; width: 2px; height: 7px; background: var(--fg-dim); transform: translateX(-1px); border-radius: 1px; }
  .slider .tick::after { content: 'NHL'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 0.55rem; letter-spacing: 0.08em; color: var(--fg-dim); }
  #admin.field { grid-template-columns: 92px 1fr; row-gap: 12px; }
  .hint { font-size: 0.8rem; color: var(--fg-dim); margin: 10px 0 0; line-height: 1.45; }
  [hidden] { display: none !important; }
  .rinkbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  button.about { background: transparent; border-color: var(--fg-dim); }
  button.about::before { content: 'i'; display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 11px/16px var(--display); text-align: center; margin-right: 7px; vertical-align: -2px; }
  details.adv { border: 1px solid var(--line); border-radius: 10px; padding-block: 10px; padding-inline: 12px; }
  details.adv > summary { font-family: var(--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  details.adv > *:not(summary) { margin-top: 10px; }
  details.adv > summary small { font-family: var(--body, inherit); font-weight: 400; font-size: 0.72rem; letter-spacing: 0; text-transform: none; margin-left: 6px; }
  h3.sub { font-family: var(--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 4px 0 0; color: var(--fg-dim); }
  .panel .hint { margin: 0; }
  #exportText { width: 100%; box-sizing: border-box; font: 0.72rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
  dialog#about { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--panel); color: var(--fg); }
  dialog#about::backdrop { background: rgba(10, 14, 20, 0.55); }
  .about-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
  .about-head h2 { font-size: 1.2rem; }
  .about-body { padding-block: 6px 20px; padding-inline: 20px; max-width: 70ch; font-size: 0.92rem; line-height: 1.55; }
  .about-body h3 { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px 0 4px; }
  .about-body p { margin: 0 0 10px; } .about-body .lede { font-size: 1rem; }
  .about-body ul { margin: 0 0 10px; padding-left: 1.2em; } .about-body li { margin-bottom: 6px; }
  .about-body code { font-size: 0.8rem; background: var(--bg); padding: 1px 4px; border-radius: 4px; }

  .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding-block: 10px; padding-inline: 12px; min-width: 0; font-size: 0.8rem; }
  .sheet h3 { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; }
  .sheet h3 small { font: 500 0.7rem var(--body); letter-spacing: 0.08em; color: var(--fg-dim); align-self: center; }
  .unit { display: grid; grid-template-columns: 2.2em 1fr; gap: 0 6px; align-items: baseline; padding: 2px 0; border-top: 1px solid var(--line); }
  .unit:first-of-type { border-top: 0; }
  .unit .lbl { color: var(--fg-dim); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .unit .pl { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
  .pl span { white-space: nowrap; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
  .pl span b { font-weight: 500; color: var(--fg); }
  .pl span.on { color: var(--fg); } .pl span.on b { font-weight: 700; }
  .pl span.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; background: currentColor; vertical-align: 1px; }
  .pl span.pen b { color: #d9480f; } .pl span.inj { opacity: 0.5; text-decoration: line-through; }
  .pl span small { font-size: 0.68rem; margin-left: 3px; }
  .legend { font-size: 0.7rem; color: var(--fg-dim); margin: 6px 0 0; line-height: 1.4; }
  button:disabled { opacity: 0.5; cursor: not-allowed; }

  /* the real-teams table: a Sim and a Real column for each team */
  .calib.real thead th.tm { text-align: center; border-bottom: 0; padding-bottom: 0; color: var(--fg); }
  .calib.real thead tr + tr th { padding-top: 2px; }
  .calib.real td.n { font-weight: 700; }
  .calib.real td.n .pill { display: block; width: max-content; margin-top: 4px; font-weight: 600; }
  .calib.real td.r { color: var(--fg-dim); white-space: nowrap; }
  .calib.real .rec { display: block; font-size: 0.78rem; font-weight: 400; color: var(--fg-dim); }
  /* records: no wider than they need, and a test's change rows set apart */
  .calib.lab table { max-width: 720px; }
  .calib.lab tr.grp td { border-top: 2px solid var(--line); }
  .calib.lab tr.chg td { font-weight: 700; }
  .calib.lab tr.chg td:first-child { color: var(--fg); }
  /* a result still inside the range of luck reads quieter than a clear one */
  .v.flat .big { color: var(--fg-dim); font-weight: 600; }
  /* once there is a baseline, Test is the main button and Rerun the quieter one */
  button.secondary { background: transparent; border: 1.5px solid var(--link); color: var(--link); font: 700 1.05rem var(--display); letter-spacing: 0.03em; padding: 8px 17px; }
  button.primary:disabled, button.secondary:disabled { opacity: 1; background: transparent; border: 1.5px dashed var(--line); color: var(--fg-dim); }
  .cgrid label.agg > span { display: flex; justify-content: space-between; gap: 8px; }
  .aggv { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg); font-size: 0.78rem; }
  /* focus rings only for the keyboard, not after a click */
  summary:focus:not(:focus-visible) { outline: none; }
  summary:focus-visible, button.linkish:focus-visible { outline: 2px solid var(--away); outline-offset: 2px; border-radius: 4px; }
  /* flex children may shrink below their content, so a wide table scrolls inside its box instead of widening the page */
  .view > *, .labflow > *, .results > *, .tested > *, article.change > * { min-width: 0; }
  @media (max-width: 600px) { .calib.real td.m span { display: none; } .calib.real td.m { min-width: 7.5em; } }
  .calib.real td.r { padding-right: 12px; }
  /* the shot review under the rink once a game ends */
  .rvsoon { margin: 0; }
  .rvsoon:empty { display: none; }
  .review { display: flex; flex-direction: column; gap: 12px; }
  .review > * { min-width: 0; }
  .rvhead .vt { margin: 0; } .rvhead .hint { margin: 4px 0 0; max-width: 80ch; }
  .rvteams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 600px) { .rvteams { grid-template-columns: 1fr; } }
  .rvt { border: 1px solid; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 0.88rem; }
  .rvt.bos { background: var(--bos-tint); border-color: var(--bos-edge); } .rvt.mtl { background: var(--mtl-tint); border-color: var(--mtl-edge); }
  .rvt b { font: 800 1.1rem var(--display); } .rvt .big { font: 800 1.6rem/1.1 var(--display); } .rvt .big small { font: 500 0.9rem var(--body); }
  .rvline .track { position: relative; height: 54px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); margin-inline: 2px; }
  .rvline .track::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
  .rvline .per { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); font-size: 0.66rem; color: var(--fg-dim); padding-left: 3px; letter-spacing: 0.06em; }
  .rvline .lbl { position: absolute; right: 4px; font: 700 0.62rem var(--body); color: var(--fg-dim); } .rvline .lbl.h { top: 2px; } .rvline .lbl.a { bottom: 2px; }
  .mk { display: inline-block; width: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--fg-dim); opacity: 0.45; }
  .rvline .mk { position: absolute; margin-left: -2px; z-index: 1; cursor: pointer; }
  .rvline .mk.h { bottom: 50%; } .rvline .mk.a { top: 50%; }
  .mk.right, .mk.none { height: 8px; } .mk.close { height: 12px; background: #c99a2e; opacity: 0.7; }
  .mk.better { height: 20px; background: #f0a500; opacity: 1; }
  .mk.goal { height: 22px; width: 6px; background: #d62828; opacity: 1; }
  .rvline .mk.goal { margin-left: -3px; }
  .rvline .mk.on { outline: 2px solid var(--link); outline-offset: 1px; z-index: 2; }
  .rvkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--fg-dim); margin: -4px 0 0; }
  .rvkey span { display: inline-flex; align-items: center; gap: 6px; } .rvkey .mk { height: 12px; }
  .rvbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 14px; align-items: start; }
  @media (max-width: 900px) { .rvbody { grid-template-columns: 1fr; } }
  .rvview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  #rvCanvas { width: 100%; aspect-ratio: 200 / 85; border-radius: 12px; display: block; margin-inline: auto; }
  .rvctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rvctl .secondary { font-size: 0.95rem; padding: 6px 14px; }
  .rvclock { font-size: 0.85rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; margin-left: 4px; flex: 1; }
  .rvtext { display: flex; flex-direction: column; gap: 6px; }
  .rvtext .headline { margin: 0; }
  .rvwhen { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
  .review .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; border: 3px solid; box-sizing: border-box; }
  .review .dot.h { background: var(--home); border-color: var(--home-2); } .review .dot.a { background: var(--away); border-color: var(--away-3); }
  .rvdl { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 5px 12px; margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; }
  .rvdl dt { font-weight: 600; color: var(--fg-dim); } .rvdl dd { margin: 0; }
  @media (max-width: 600px) { .rvdl { grid-template-columns: 1fr; } .rvdl dd { margin-bottom: 4px; } }
  .rvside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .rvside .seg { display: flex; } .rvside .seg button { flex: 1; padding: 5px 6px; font-size: 0.8rem; }
  .rvlist { display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto; }
  .rvrow { display: grid; grid-template-columns: auto 4.6em minmax(0, 1fr); align-items: center; gap: 8px; text-align: left; background: none; border: 1px solid transparent; padding: 6px 8px; font-weight: 500; }
  .rvrow:hover { background: var(--raised); }
  .rvrow.on { background: var(--raised); border-color: var(--link); }
  .rvrow .when { font-size: 0.8rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
  .rvrow .who { display: flex; flex-direction: column; min-width: 0; } .rvrow .who small { color: var(--fg-dim); font-size: 0.76rem; font-weight: 400; }
  #rvPlayers table td:first-child { white-space: nowrap; }
  .rvwhat { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
  .rvwhat:empty { display: none; }
  .rvwhat .hint { margin: 0; }
  .rvh { font: 800 1.05rem var(--display); letter-spacing: 0.04em; margin: 0; }
  .rvcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 600px) { .rvcmp { grid-template-columns: 1fr; } }
  .rvcmp .c { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--raised); display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
  .rvcmp .c.pass { border-color: #3b82f6; }
  .rvcmp .c b { font-weight: 600; } .rvcmp .c .g { font: 800 1.6rem/1.1 var(--display); }
  .rvcmp .c small { color: var(--fg-dim); font-size: 0.8rem; margin-top: 4px; }
  /* a lab game on the rink, and the pickers that open one */
  .labgame { margin: 0; padding: 8px 12px; border: 1px solid var(--link); border-radius: 10px; background: var(--panel); font-size: 0.9rem; line-height: 1.5; }
  .labgame .linkish { margin-left: 4px; }
  .lgcheck { margin-left: 8px; font-weight: 600; } .lgcheck.ok { color: #1f7a4a; } .lgcheck.bad { color: #a3241b; }
  .gamepick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
  .gamepick label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--fg-dim); flex: 1 1 280px; min-width: 0; }
  .gamepick select { background: var(--raised); }
  /* Review a game: which game is on screen, the recent ones, or how to get one */
  section.view[data-view="review"] { display: flex; flex-direction: column; gap: 14px; }
  section.view[data-view="review"][hidden] { display: none; }
  .rvpick { display: flex; flex-direction: column; gap: 12px; }
  .rvpick .vt { margin: 0; }
  .rvnow { margin: 0; font-size: 1.02rem; line-height: 1.5; }
  .rvempty p { margin: 0 0 10px; color: var(--fg-dim); max-width: 70ch; line-height: 1.5; }
  .rvempty .row { display: flex; flex-wrap: wrap; gap: 10px; }
  .rvbusy { display: flex; flex-direction: column; gap: 6px; } .rvbusy .hint { margin: 0; }
  .progress i.run { width: 35%; animation: rvrun 1.1s ease-in-out infinite alternate; }
  @keyframes rvrun { from { margin-left: 0; } to { margin-left: 65%; } }
  @media (prefers-reduced-motion: reduce) { .progress i.run { animation: none; width: 100%; opacity: 0.5; } }
  .rvrecent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
  .rvrecent .k { width: 100%; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
  .rvrecent button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; max-width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font-size: 0.86rem; }
  .rvrecent button small { color: var(--fg-dim); font-size: 0.76rem; }
  .rvrecent button[aria-pressed="true"] { background: var(--raised); color: var(--fg); border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
  .gamepick .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .rvpickhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

  /* ---------- Print or save as PDF: only the report, in the light colors, whatever the theme ---------- */
  .printout { display: none; }
  @media print {
    :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
      --bg: #ffffff; --panel: #ffffff; --fg: #16202c; --fg-dim: #4d5967; --line: #c9d0d8; --raised: #ffffff; --home: #000000;
      --bos-tint: #fff5dc; --bos-edge: #e9b84d; --mtl-tint: #f9e6e8; --mtl-edge: #d9a0a7; --link: #0b4ea2; color-scheme: light; }
    :root .pill.good, :root:not([data-theme="light"]) .pill.good { background: #e2f2e9; color: #1f7a4a; }
    :root .pill.bad, :root:not([data-theme="light"]) .pill.bad { background: #f8e1df; color: #a3241b; }
    :root .pill.warn, :root:not([data-theme="light"]) .pill.warn { background: #fbefd6; color: #8a5a00; }
    @page { margin: 14mm 12mm; }
    body { background: #fff; padding: 0; font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.printing > :not(#printOut) { display: none !important; }
    body.printing .printout { display: block; }
    /* printing without a report (the Watch view): the page without its controls */
    nav.views, .rinkbar, .labpromo, .drawer, .scrim, button { display: none !important; }
    .printout section { margin-top: 14pt; }
    .printout h2 { font: 800 14pt var(--display); margin: 0 0 6pt; break-after: avoid; }
    .printout h2 small { font: 400 9.5pt var(--body); color: var(--fg-dim); margin-left: 6pt; }
    .pr-head { border-bottom: 1.5pt solid var(--fg); padding-bottom: 8pt; }
    .pr-kicker { font: 700 8.5pt var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }
    .pr-head h1 { font: 800 22pt/1.1 var(--display); margin: 2pt 0 4pt; }
    .pr-head p { margin: 0; color: var(--fg-dim); }
    .pr-foot { margin-top: 18pt; padding-top: 6pt; border-top: 0.75pt solid var(--line); font-size: 8.5pt; color: var(--fg-dim); }
    .printout .headline { font-size: 13pt; margin: 0 0 8pt; max-width: none; }
    .printout table { border-collapse: collapse; width: 100%; max-width: none; font-size: 9pt; }
    .printout th, .printout td { padding: 2.5pt 6pt; border-bottom: 0.5pt solid var(--line); text-align: left; }
    .printout tr { break-inside: avoid; }
    .pr-plans td:first-child { color: var(--fg-dim); width: 28%; }
    .printout article.change { border: 0.75pt solid var(--line); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 8pt; break-inside: avoid; }
    .printout .verdicts { grid-template-columns: repeat(3, 1fr); }
    .pr-one img { display: block; width: 100%; max-height: 84mm; object-fit: contain; object-position: left top; border-radius: 4pt; }
    .pr-call { margin: 0 0 4pt; font: 700 11pt var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
    .printout .rvdl { display: grid; grid-template-columns: 28mm 1fr; gap: 3pt 10pt; margin: 0; font-size: 10pt; } .printout .rvdl dt { color: var(--fg-dim); } .printout .rvdl dd { margin: 0; }
    .printout .hint { font-size: 8.5pt; color: var(--fg-dim); }
  }