/* Better Game: one stylesheet for every page (style pass, Oct 12, 2026).
   Type: two families. Fraunces Bold for headings only (questions, section titles, result, game band);
         Inter for everything else, including what Lange and the judges say.
   Colour: the logo's navy + gold are the brand; cream / charcoal neutrals; green and red only for
         right / wrong; Oilers orange only as the game band's stripe. Change a colour here, nowhere else. */

:root {
  --head: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --navy: #1d2a3a;          /* brand: header, buttons, game band (the logo's felt) */
  --gold: #f2c230;          /* brand: logo, under-construction stripe */
  --lit: #ff8a1f;           /* the logo's live square only */
  --team: #ff4c00;          /* Oilers orange: the game band's stripe only */
  --on-navy: #f6efe2;
  --on-navy-muted: #b9c2cf;

  --bg: #f6efe2; --panel: #fffaf1; --line: #e4d9c6; --ink: #1d1b19; --muted: #6b6257;
  --accent: #8a6400;        /* gold, darkened so it reads as text on cream */
  --accent-soft: #f5e6b3;
  --yes: #2f7d4a; --yes-soft: #e3f1e6; --no: #9a4b3c; --no-soft: #f6e5df;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171f; --panel: #1a212c; --line: #2a3342; --ink: #ece6da; --muted: #a3a9b3;
    --accent: #f2c230; --accent-soft: #3a321a;
    --yes: #7fc496; --yes-soft: #1f3327; --no: #e09a88; --no-soft: #3a2621;
  }
}

/* base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); }
h1, h2, .result b, .game .band b { font-family: var(--head); font-weight: 700; }
h1 { font-size: 24px; line-height: 1.25; margin: 8px 0 6px; }
h2 { font-size: 20px; line-height: 1.3; margin: 14px 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 14px 0 2px; }
a { color: var(--accent); }
main { max-width: 480px; margin: 0 auto; padding: 16px 16px 40px; }
footer { text-align: center; font-size: 12px; color: var(--muted); padding: 0 16px 30px; }
footer a { color: inherit; }
.label { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.more, .who { font-size: 13px; color: var(--muted); }
.who { font-size: 12px; }
.err { color: var(--no); font-size: 14px; }

/* header + under construction */
header { position: relative; background: var(--navy); color: var(--on-navy); text-align: center; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
/* The café (Steve, Oct 26): the banner is Better Game's front door, evening from 4 PM on the phone's clock, morning before;
   picture strips put three cards in the room (window table = tonight, judges' table = the verdict, counter = Watch Party). */
header { background: linear-gradient(rgba(29,42,58,.38), rgba(29,42,58,.8)), url(img/cafe/banner_evening.jpg) center 28% / cover no-repeat, var(--navy); }
:root[data-time="morning"] header { background-image: linear-gradient(rgba(29,42,58,.3), rgba(29,42,58,.78)), url(img/cafe/banner_morning.jpg); background-position: center 40%; }
.strip { height: 78px; margin: 10px 0 12px; border-radius: 10px; background: var(--line) center / cover no-repeat; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { background-position: 42% 50%; } to { background-position: 58% 50%; } }   /* the fidget tenet: barely moving */
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }
.logo { margin: 0 auto; padding: 2px 40px 0 0; min-height: 80px; text-align: center; }
.logo svg { display: inline-block; vertical-align: top; height: 78px; width: auto; max-width: 100%; }
.sign { font: 700 24px var(--head); letter-spacing: 4px; color: var(--gold); padding-top: 22px; }   /* shown only until the logo loads */
.sub { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-navy-muted); margin-top: 2px; }
.help { position: absolute; right: 8px; top: calc(8px + env(safe-area-inset-top)); height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1.5px solid var(--on-navy-muted); color: var(--on-navy); font: 600 13px/27px var(--body); letter-spacing: 1px; text-align: center; text-decoration: none; }
.back { position: absolute; left: 12px; top: calc(16px + env(safe-area-inset-top)); color: var(--on-navy); text-decoration: none; font-size: 14px; }
.uc { background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, #1d1b19 14px 28px); padding: 4px; }
.uc div { background: var(--gold); color: #1d1b19; text-align: center; font: 600 13px/1.35 var(--body); padding: 6px 10px; }
.uc a { color: #1d1b19; }

/* cards, buttons, taps */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.btn { font: 600 16px var(--body); background: var(--navy); color: var(--on-navy); border: 0; border-radius: 12px; padding: 14px 18px; width: 100%; cursor: pointer; }
.link { background: none; border: 0; color: var(--accent); font: 600 14px var(--body); padding: 6px 0; cursor: pointer; }
.tap { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg); border: 2px solid var(--line);
  border-radius: 14px; padding: 14px; margin: 10px 0; cursor: pointer; transition: border-color .15s, transform .1s; }
.tap:active { transform: scale(.98); }
.tap.on { border-color: var(--accent); background: var(--accent-soft); }
.tap.still { cursor: default; }
.tap.still:active { transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); }
.play { font: 600 13px var(--body); background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 4px 12px; margin-top: 8px; cursor: pointer; }

/* people talking: Lange, judges, asides (Inter, never the heading font) */
.lange { display: flex; gap: 12px; align-items: center; }
.lange img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.say { font-size: 17px; line-height: 1.4; }
.line, .teaser, .lead { font-size: 16px; line-height: 1.45; }

/* tonight: players and causes */
.player .n { font-weight: 600; font-size: 18px; }
.player .m { font-size: 13px; color: var(--muted); }
.judges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.judge { text-align: center; padding: 10px 6px; margin: 0; }
.judge img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 6px; }
.judge .n { font-weight: 600; font-size: 14px; line-height: 1.25; }
.judge .c { font-size: 12px; color: var(--muted); line-height: 1.3; }

/* the game band */
.game { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin: 10px 0 4px; }
.game .band { background: var(--navy); color: var(--on-navy); padding: 10px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 4px solid var(--team); }
.game .band b { font-size: 17px; }
.game .band span { font-size: 13px; color: var(--on-navy-muted); white-space: nowrap; }
.game .info { padding: 8px 12px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.game .info b { color: var(--ink); font-weight: 600; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.opt { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); }
.opt.mine { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.opt.won { border-color: var(--yes); color: var(--yes); }

/* the verdict */
.reveal { display: grid; gap: 10px; }
.flip { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.flip img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; }
.flip .q { color: var(--muted); font-size: 14px; }
.flip .call { font-size: 12px; color: var(--muted); margin-top: 4px; }
.panel3 { display: flex; justify-content: center; margin: 4px 0 8px; }
.panel3 img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--panel); margin: 0 -6px; }
.result { border-radius: 14px; padding: 14px; text-align: center; }
.result.yes { background: var(--yes-soft); color: var(--yes); }
.result.no { background: var(--no-soft); color: var(--no); }
.result b { font-size: 20px; display: block; }
.charity { text-align: center; padding: 6px 0 12px; }
.charity b { color: var(--accent); }
.how { font-size: 13px; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.reacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reacts .tap { text-align: center; padding: 10px 4px; margin: 0; font-size: 14px; }
textarea.note { display: block; width: 100%; font: 15px/1.4 var(--body); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; resize: vertical; }
textarea.note:focus { outline: none; border-color: var(--accent); }

/* second screen */
.live .score { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin: 6px 0 10px; }
.live .score b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { margin: 10px 0; }
.bar .top { display: flex; justify-content: space-between; font-size: 15px; }
.bar .top b { font-variant-numeric: tabular-nums; }
/* Live Tracker (Steve, Oct 14): fixed 100-point track, one colour per period, the puck at the total */
:root { --p1: #4f86e0; --p2: #9a6fd0; --p3: #e0a91c; --ot: #ff8a1f; }
.P1 { background: var(--p1); } .P2 { background: var(--p2); } .P3 { background: var(--p3); } .OT { background: var(--ot); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 0 0 6px; }
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.pd { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bar { margin: 18px 0; }
.bar .track { position: relative; height: 16px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); margin: 8px 14px 6px 0; }
.bar .seg { position: absolute; top: 0; bottom: 0; transition: left .9s ease, width .9s ease; }
.bar .seg:first-child { border-radius: 7px 0 0 7px; }
/* past 100: the bar breaks just before the end and the puck carries a "!" */
.bar .brk { position: absolute; left: 88%; top: -3px; bottom: -3px; width: 7px; background: var(--panel); transform: skewX(-20deg); }
/* the puck rides the end of each bar (Steve, Oct 13): a side-on puck */
.bar .puck { position: absolute; top: 50%; width: 28px; height: 15px; margin-left: -14px; transform: translateY(-50%); transition: left .9s ease;
  border-radius: 8px / 6px; background: linear-gradient(#5b5b5b 0 32%, #111 32% 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); }
.bar.lead .puck { box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1.5px var(--accent), 0 0 9px 1px var(--accent); }
.bar .puck i { position: absolute; right: -14px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--no); color: #fff;
  font: 700 13px/18px var(--body); text-align: center; font-style: normal; }
.bar .plays { margin-top: 4px; }
.play-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.play-row:last-child { border-bottom: 0; }
.play-row .pt { color: var(--muted); width: 70px; flex: none; font-variant-numeric: tabular-nums; }
.play-row .pe { flex: 1; }
.play-row b { font-variant-numeric: tabular-nums; } .play-row b.neg { color: var(--no); }
.aside { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 12px; padding: 8px 10px; margin-top: 10px; }
.aside img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.aside .t { font-size: 15px; line-height: 1.35; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--no); margin-right: 6px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* the Meridian */
.house { margin: -16px -16px 12px; border-radius: 15px 15px 0 0; overflow: hidden; background: var(--navy); }
.house img { display: block; width: 100%; height: auto; animation: hum 7s steps(1) infinite; }
@keyframes hum { 0%, 61%, 63%, 100% { filter: none; } 62% { filter: brightness(.93); } }
.faces { display: flex; margin: 10px 0 4px; }
.faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--panel); margin-right: -8px; }
.script p { margin: 0 0 10px; font-size: 15px; }
.script .dir { color: var(--muted); font-style: italic; }
.script b { color: var(--accent); font-weight: 600; letter-spacing: .3px; }

/* charity running total (top of the page) */
.pot { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; font: 600 14px var(--body);
  color: var(--ink); background: var(--panel); border: 1.5px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; cursor: pointer; text-align: left; }
.pot .pot-l { color: var(--accent); letter-spacing: .4px; text-transform: uppercase; font-size: 12px; }
.pot .pot-r { font-weight: 400; font-size: 13px; white-space: nowrap; }
.pot .pot-r b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pot.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.pretend { font-size: 10px; letter-spacing: .5px; border: 1px solid var(--accent); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.potcard { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-color: var(--accent); }
.flow { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 6px; align-items: center; margin: 10px 0 4px; text-align: center; }
.flow div { background: var(--bg); border-radius: 10px; padding: 8px 4px; }
.flow .arrow { background: none; color: var(--muted); padding: 0; }
.flow b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.flow span { font-size: 11px; color: var(--muted); line-height: 1.2; display: block; }
.flow .give { background: var(--accent-soft); }
.cbar { margin: 8px 0; }
.cbar .top { display: flex; justify-content: space-between; font-size: 14px; }
.cbar .track { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-top: 3px; }
.cbar .fill { height: 100%; background: var(--accent); border-radius: 4px; }

/* tables (friends / family) */
.table { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.trow { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.trow:last-child { border-bottom: 0; }
.trow span { text-align: right; }
.trow .ok { color: var(--yes); font-weight: 600; }
.chip.wait { background: none; border: 1px dashed var(--line); color: var(--muted); }

/* notification switches */
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; }
.toggle .sw { flex: none; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--line); color: var(--muted); }
.tap.toggle.on { border-color: var(--line); background: var(--bg); }
.toggle.on .sw { background: var(--accent); color: var(--panel); }

/* standings */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td, th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
tr.me td { font-weight: 600; color: var(--accent); }

/* help page */
.helppage main { max-width: 560px; }
.helppage body, body.helppage { line-height: 1.6; }
.helppage .logo { padding: 22px 8px 0; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
nav a { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); text-decoration: none; }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 12px; margin-bottom: 16px; scroll-margin-top: 12px; }
section h2 { margin: 14px 0 6px; }
section table { font-size: 14px; margin: 8px 0; }
p, li { margin: 6px 0; }
ol, ul { padding-left: 22px; }
.lange.inline { margin: 8px 0; }
.helpjudges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.j { display: flex; gap: 10px; align-items: center; }
.j img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.j b { display: block; line-height: 1.2; }
.j span { font-size: 12px; color: var(--muted); line-height: 1.25; display: block; }
.lens { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-top: 12px; }
details { border-bottom: 1px solid var(--line); padding: 8px 0; }
details:last-child { border-bottom: 0; }
summary { font-weight: 600; cursor: pointer; }
.top { display: block; text-align: right; font-size: 13px; text-decoration: none; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { .house img, .dot { animation: none; } }

/* scoring chart (scoring.html, built by make_scoring.py) */
.srow { margin: 10px 0; }
.srow .top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.srow .top b { color: var(--yes); } .srow .top b.neg { color: var(--no); }
.srow .track { height: 8px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-top: 3px; }
.srow .fill { height: 100%; background: var(--yes); border-radius: 4px; } .srow .fill.neg { background: var(--no); }
.srow .xtra { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* "Why this pick?" (optional, read by the judges in an adjudication) */
.why { margin-top: 14px; }
.why .opt-tag { font-size: 12px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* verdict: game points shown straight away (Steve, Oct 13) */
.opt .gp { font-weight: 600; margin-left: 4px; }
.result .score-line { font-size: 14px; margin-top: 6px; }
/* Local Hero Board */
.hero .prize { font-family: var(--head); font-size: 17px; line-height: 1.35; margin: 8px 0 6px; }
.hero .champ { background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; margin: 10px 0 4px; font-size: 14px; }
.result .score-line .gpn { font-weight: 600; }
/* avatars (our own set, Fan_IDs_and_Conduct.md §4) */
.av { display: inline-block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--line); }
.av.big { width: 64px; height: 64px; } .av.sm { width: 24px; height: 24px; margin-right: 6px; } .av.xs { width: 18px; height: 18px; margin-right: 5px; }
.avrow { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.avgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avpick { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; aspect-ratio: 1; }
.avpick .av { width: 100%; height: 100%; }
.avpick.on { border-color: var(--accent); }
.avpick.avnew { border: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent); line-height: 1; }
.avnew span { font-size: 22px; font-weight: 600; } .avnew small { font-size: 9px; color: var(--muted); margin-top: 2px; }
/* the nine-square (Steve, Oct 14; logo look Oct 17): one navy board with gold lines between the squares, like the logo.
   Logo colours (make_logo.py, set C): felt navy, gold grid, orange lit square, slate greyed squares. Same in light and dark. */
.nine { --felt: #1d2a3a; --grid: #f2c230; --litsq: #ff8a1f; --greysq: #46566c;
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px 0 4px;
  background: var(--grid); border: 3px solid var(--grid); border-radius: 10px; overflow: hidden; }
.sq { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; text-align: center;
  font: inherit; color: #f6efe2; background: var(--felt); border: 0; border-radius: 0; padding: 6px; min-width: 0;
  overflow: hidden; transition: background .15s, transform .1s; }
button.sq { cursor: pointer; } button.sq:active { transform: scale(.97); }
.sq b { font-weight: 600; font-size: 15px; line-height: 1.2; }
.sq span { font-size: 12px; color: #b9c2cf; line-height: 1.25; }
.sq .go { color: var(--grid); font-weight: 600; }
.sq.off { background: var(--greysq); } .sq.off b { font-size: 14px; color: #c9d1dc; } .sq.off span { color: #9aa6b6; }
.sq.lit { background: var(--litsq); color: #1d1b19; } .sq.lit span { color: #3a2a12; } .sq.lit .go { color: #1d1b19; text-decoration: underline; }
.sq.done { background: var(--felt); } .sq.done span { color: #7fc496; font-weight: 600; }
.sq.ask .qt { font: 700 14px/1.2 var(--head); color: #f6efe2; } .sq.ask .go { font-size: 11.5px; }
.sq .pn { font-size: 16px; overflow-wrap: anywhere; }
.sq img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sq .cn { font-size: 12.5px; }
.sq.on { background: var(--grid); color: #1d1b19; } .sq.on span { color: #4a3a10; }
.sq.wait { background: var(--greysq); opacity: .75; }
.sq.lock { background: var(--litsq); color: #1d1b19; }
.sq.lock.wait { background: var(--greysq); color: #9aa6b6; }
.sq.small b { font-size: 15px; }
/* the spark (Steve, Oct 17: "test movement illusions"): a point of light running along the grid lines */
.nine .spark { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; overflow: visible; }
.nine .spark circle { fill: #fff6d6; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--grid)); }
@media (prefers-reduced-motion: reduce) { .nine .spark { display: none; } }
.whyq { font-size: 14px; margin: 8px 0 0; } .whyq b { color: var(--accent); font-weight: 600; }
.aside.elias { align-items: flex-start; margin-top: 12px; }
/* tables: one chair per block, stretched down; table talk (Table_Talk.md, Oct 15) */
.tchair { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.tchair:last-child { border-bottom: 0; }
.trules ol { padding-left: 20px; } .trules li { margin: 8px 0; font-size: 15px; }
.react9 .em { font-size: 26px; line-height: 1; }
.rtabs { margin: 0 0 8px; } .rtabs .chip { border: 0; font: inherit; font-size: 13px; color: inherit; cursor: pointer; } .rtabs .chip.on { background: var(--accent); color: #1d1b19; font-weight: 600; } .tmsg .em { font-size: 22px; line-height: 1; }
.tfeed { margin-top: 12px; }
.tmsg { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tmsg:last-child { border-bottom: 0; } .tmsg .tx { flex: 1; } .tmsg.auto .tx { font-weight: 600; }
/* Local Hero Board: charity causes pie (Steve, Oct 15). Categorical palette validated for colour blindness
   (dataviz reference palette; light and dark steps). Slices fill by rank, largest first; a 2px panel gap between slices. */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948; --cother: #8f8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; --cother: #6f7682; } }
.c1 { fill: var(--c1); background: var(--c1); } .c2 { fill: var(--c2); background: var(--c2); } .c3 { fill: var(--c3); background: var(--c3); }
.c4 { fill: var(--c4); background: var(--c4); } .c5 { fill: var(--c5); background: var(--c5); } .c6 { fill: var(--c6); background: var(--c6); }
.c7 { fill: var(--c7); background: var(--c7); } .c8 { fill: var(--c8); background: var(--c8); } .cother { fill: var(--cother); background: var(--cother); }
.pie svg { display: block; width: 180px; height: 180px; margin: 0 auto 12px; }
.pie path { stroke: var(--panel); stroke-width: 2; stroke-linejoin: round; }
.prow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.prow:last-child { border-bottom: 0; } .prow .pl { flex: 1; } .prow b { font-variant-numeric: tabular-nums; } .prow .more { width: 36px; text-align: right; }
.bar .gw { font-size: 13px; color: var(--muted); text-align: right; margin-top: -2px; }
.pd.so { background: var(--muted); }
/* sections that expand and collapse (Steve, Oct 17) */
.sec-head { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; padding: 0; margin: 0;
  font: 600 12px var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); cursor: pointer; text-align: left; }
.sec-head .chev { font-size: 14px; letter-spacing: 0; margin-left: 8px; }
.label.sec-orig { display: none; }
.card.closed > :not(.sec-head) { display: none; }
.card.closed { padding-top: 14px; padding-bottom: 14px; }
.card[data-sec="meridian"] > .sec-head { margin-bottom: 10px; }
.card[data-sec="meridian"] .house { margin-top: 10px; border-radius: 0; }