/* Fantasy Impact League: styles.
   Layout: one 560px column with 16px gutters under a sticky deep-indigo year strip, a text-only tab bar
   fixed at the bottom; the portfolio opens a second column above 960px. Words only: no icons or symbols.
   Brand: Nunito; deep indigo headers; power pink only on the one primary button per screen. */

:root {
  --surface: #faf9f8;      /* page background */
  --card: #f4e6ff;         /* soft lilac cards */
  --raised: #ffffff;       /* sheets, inputs, the tab bar */
  --ink: #1b1c1c;          /* body text */
  --muted: #4c4451;        /* secondary text */
  --outline: #cec3d3;      /* borders */
  --head: #2e0052;         /* deep indigo headers */
  --link: #4b0082;         /* indigo links */
  --chart: #5d4cbf;        /* slate indigo: chart lines and chips */
  --on-chart: #ffffff;
  --index: #2f8fd4;        /* impact sky, deepened for a line on a light page */
  --sky: #71c1f4;          /* impact pills */
  --lilac: #f4e6ff;
  --pink: #ca0362;         /* primary buttons only */
  --on-pink: #ffffff;
  --pill-ink: #1b1c1c;     /* ink on light pill colors, in both themes */
  --strip: #2e0052;
  --on-strip: #faf9f8;
  --strip-muted: #e2d6ea;
  --warn: #ffe3b3;
  --bad: #ffd4d9;
  --good: #cdeedb;
  --warn-line: #b86e00;
  --good-line: #2f8f5b;
  --focus: #4b0082;
  --backdrop: rgba(27, 28, 28, 0.55);
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1b1c1c; --card: #2e0052; --raised: #241a2b; --ink: #faf9f8; --muted: #cec3d3; --outline: #5d4cbf;
    --head: #f4e6ff; --link: #d9c6ff; --chart: #a99cf0; --on-chart: #1b1c1c; --index: #71c1f4;
    --strip: #2e0052; --on-strip: #faf9f8; --strip-muted: #cec3d3; --warn-line: #ffb84d; --good-line: #7fd6a6;
    --focus: #f4e6ff; --backdrop: rgba(0, 0, 0, 0.72);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #1b1c1c; --card: #2e0052; --raised: #241a2b; --ink: #faf9f8; --muted: #cec3d3; --outline: #5d4cbf;
  --head: #f4e6ff; --link: #d9c6ff; --chart: #a99cf0; --on-chart: #1b1c1c; --index: #71c1f4;
  --strip: #2e0052; --on-strip: #faf9f8; --strip-muted: #cec3d3; --warn-line: #ffb84d; --good-line: #7fd6a6;
  --focus: #f4e6ff; --backdrop: rgba(0, 0, 0, 0.72);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  padding-bottom: 24px;
}
body.screen-game { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.has-sheet { overflow: hidden; }
[hidden] { display: none !important; }
.wrap { max-width: 560px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 960px) { body.tab-portfolio .wrap { max-width: 1040px; } }
h1 { font-size: 1.8rem; font-weight: 900; color: var(--head); line-height: 1.15; margin: 0.2rem 0 0.8rem; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; font-weight: 800; color: var(--head); line-height: 1.25; margin: 0 0 0.5rem; text-wrap: balance; }
h3, .h3 { font-size: 1.05rem; font-weight: 800; color: var(--head); line-height: 1.3; margin: 1.1rem 0 0.4rem; }
.card > .h3:first-child, .card > h3:first-child { margin-top: 0; }
p { margin: 0 0 0.6rem; }
ul, ol { list-style: none; padding-left: 0; margin: 0.5rem 0; }
dl { margin: 0; }
a { color: var(--link); }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.eyebrow { font-size: 0.85rem; font-weight: 800; color: var(--muted); margin: 1.4rem 0 0; }
.lead { font-size: 1.1rem; }
.note, .small, .help { color: var(--muted); font-size: 0.9rem; }
.help { margin: 0.25rem 0 0; }
.strong { font-weight: 700; }
.warn-text { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sec { margin: 1.6rem 0; }
.sec.sub { margin: 1.1rem 0; }
.card { background: var(--card); border: 1px solid var(--outline); border-radius: 14px; padding: 14px 16px; margin: 0.75rem 0; }
.card > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- start screen */
.hero { padding-block: 8px 24px; }
.title { font-size: clamp(2.3rem, 10vw, 3.4rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.02; margin: 0.4rem 0 1rem; }
.disclaimer { color: var(--muted); font-size: 0.85rem; margin-top: 1.6rem; max-width: 62ch; }

/* ---------------------------------------------------------------- buttons, chips, pills */
.btn {
  font: inherit; font-weight: 800; min-height: 44px; padding: 10px 18px; border-radius: 12px;
  border: 2px solid transparent; cursor: pointer; text-align: center; line-height: 1.25; max-width: 100%;
}
.btn.primary { background: var(--pink); color: var(--on-pink); }
.btn.secondary { background: transparent; color: var(--link); border-color: var(--link); }
.btn.quiet { background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px; }
.btn.link { background: none; border: none; color: var(--link); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px 0 0; font-weight: 800; text-align: left; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin: 1rem 0; }
.stack > .note, .stack > .help { margin: -4px 0 4px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1.2rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.6rem 0; }
.chip {
  font: inherit; font-size: 0.9rem; font-weight: 700; min-height: 44px; padding: 8px 14px; border-radius: 22px;
  border: 1.5px solid var(--chart); background: transparent; color: var(--chart); cursor: pointer;
}
.chip.on { background: var(--chart); color: var(--on-chart); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }
.pill {
  display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 800; line-height: 1.25;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--outline); color: var(--ink); background: transparent; text-align: left;
}
.pill-sky { background: var(--sky); border-color: var(--sky); color: var(--pill-ink); }
.pill-lilac { background: var(--lilac); border-color: var(--outline); color: var(--pill-ink); }
.pill-warn { background: var(--warn); border-color: var(--warn); color: var(--pill-ink); }
.pill-bad { background: var(--bad); border-color: var(--bad); color: var(--pill-ink); }
.pill-good { background: var(--good); border-color: var(--good); color: var(--pill-ink); }
.pill-strong { background: var(--head); border-color: var(--head); color: var(--surface); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill-label { font-size: 0.85rem; font-weight: 800; color: var(--muted); margin-right: 2px; }
.term {
  font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.term:hover { color: var(--link); }

/* ---------------------------------------------------------------- sticky year strip and tab bar */
#strip { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--strip); color: var(--on-strip); border-bottom: 1px solid var(--outline); }
.strip-in { padding-block: 8px 10px; }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-content: space-between; }
.when { margin: 0; font-weight: 800; font-size: 1rem; }
.strain { margin: 0; display: flex; gap: 6px; align-items: center; }
.strain-label { font-size: 0.8rem; font-weight: 800; color: var(--strip-muted); }
.strip-in .pill { background: var(--lilac); border-color: var(--lilac); color: var(--pill-ink); }
.strip-in .pill-good { background: var(--good); border-color: var(--good); }
.strip-in .pill-warn { background: var(--warn); border-color: var(--warn); }
.strip-in .pill-bad { background: var(--bad); border-color: var(--bad); }
.strip-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.strip-stats .kv dt { font-size: 0.78rem; font-weight: 800; color: var(--strip-muted); }
.strip-stats .kv dd { margin: 0; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.of { font-weight: 600; color: var(--muted); font-size: 0.85em; }
.strip-stats .of { color: var(--strip-muted); }
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--raised); border-top: 1px solid var(--outline); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabs-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-inline: 4px; }
#tabs .tabs-in { max-width: 560px; margin: 0 auto; }
.tab {
  font: inherit; font-size: 0.82rem; font-weight: 700; min-height: 56px; padding: 6px 2px; line-height: 1.15;
  background: none; border: none; border-top: 3px solid transparent; color: var(--muted); cursor: pointer;
}
.tab[aria-current="page"] { color: var(--head); border-top-color: var(--chart); font-weight: 900; }
#foot { color: var(--muted); font-size: 0.8rem; padding-block: 12px 4px; }
#foot p { margin: 0; }

/* ---------------------------------------------------------------- messages and events */
.msg { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: 12px; padding: 8px 12px; margin: 0.75rem 0; border: 1px solid var(--outline); background: var(--raised); }
.msg p { margin: 0; flex: 1 1 14rem; }
.msg-error { border: 2px solid var(--warn-line); }
.msg-info { background: var(--card); }
.err { background: var(--bad); color: var(--pill-ink); border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.event.warn { border: 2px solid var(--warn-line); }
.event.good { border: 2px solid var(--good-line); }
.event-line { font-weight: 600; }
.goal-card { border: 2px solid var(--good-line); }
.why { background: var(--card); border-radius: 10px; padding: 8px 12px; }
.lesson { font-weight: 700; color: var(--head); margin: 0.9rem 0; }
.closing { font-size: 1.15rem; font-weight: 800; color: var(--head); margin-top: 1.6rem; }
.share { font-weight: 700; background: var(--raised); border: 1px dashed var(--outline); padding: 10px 12px; border-radius: 10px; }
.big { font-size: 1.6rem; font-weight: 900; color: var(--head); line-height: 1.2; margin: 0.2rem 0 0.5rem; font-variant-numeric: tabular-nums; }
/* Life complete: the final portfolio value is the hero, 3 to 4 times body size, and still fits a 375px phone. */
.hero-card { padding: 18px 16px 16px; border-width: 2px; }
.hero-label { font-size: 1.05rem; font-weight: 800; color: var(--head); margin: 0; }
.hero-num {
  font-size: clamp(2.9rem, 14vw, 4rem); font-weight: 900; color: var(--head); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0.15rem 0 0.35rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hero-of { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 1.1rem; font-weight: 700; color: var(--muted); margin: 0 0 0.8rem; }
.kv-help { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.sub-label { font-size: 0.95rem; margin: 0.9rem 0 0.2rem; }
.strip-final { grid-template-columns: minmax(0, 1fr); }
.strip-final .kv dd { font-size: 1.15rem; }
.running { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; }
progress { width: 100%; max-width: 260px; height: 10px; accent-color: var(--chart); vertical-align: middle; }

/* ---------------------------------------------------------------- forms */
fieldset.choices { border: none; padding: 0; margin: 1.1rem 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
fieldset.choices legend { font-weight: 800; color: var(--head); font-size: 1.05rem; margin-bottom: 6px; padding: 0; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--outline); border-radius: 12px; padding: 10px 12px; background: var(--raised); }
.choice.on { border: 2px solid var(--chart); background: var(--card); padding: 9px 11px; }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--chart); }
.choice label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; flex: 1; min-width: 0; min-height: 24px; }
.choice-text { color: var(--muted); font-size: 0.92rem; }
.choice.disabled { opacity: 0.55; }
.choice.disabled label { cursor: not-allowed; }
fieldset.compact .choice { padding: 8px 12px; }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; align-items: start; margin: 0.8rem 0; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--chart); }
.check label { cursor: pointer; font-weight: 600; }
.check .help { grid-column: 2; }
.check.disabled label { color: var(--muted); cursor: not-allowed; }
.field { margin: 0.9rem 0; }
.lbl { display: block; font-weight: 700; margin-bottom: 4px; }
.input-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.affix { color: var(--muted); font-weight: 700; }
input[type="text"], input[type="email"], textarea, select {
  font: inherit; color: var(--ink); background: var(--raised); border: 1.5px solid var(--outline); border-radius: 10px;
  padding: 9px 12px; min-height: 44px; width: 100%; max-width: 100%;
}
.input-row input { flex: 1 1 8rem; width: auto; min-width: 0; max-width: 14rem; }
textarea { resize: vertical; }
.preview { margin-top: 1.2rem; }
.feas { margin: 1rem 0 1.4rem; }
.ack-card .lead { margin: 0; }

/* ---------------------------------------------------------------- offerings, news, holdings */
.offers { display: flex; flex-direction: column; gap: 8px; margin: 0.6rem 0; }
.offer {
  display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--outline); border-radius: 14px; padding: 12px 14px; cursor: pointer; min-height: 44px;
}
.offer:hover { border-color: var(--chart); }
.offer-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.offer-name { font-weight: 800; font-size: 1.05rem; color: var(--head); margin-right: 2px; overflow-wrap: anywhere; }
.offer-line { font-size: 0.95rem; }
.offer-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-hi { background: var(--sky); color: var(--pill-ink); border-radius: 6px; padding: 0 5px; font-weight: 800; white-space: nowrap; }
.portal { color: var(--muted); }
.order { background: var(--raised); }
.news { display: flex; flex-direction: column; margin: 0.4rem 0; }
.news-row {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--outline); padding: 9px 2px; cursor: pointer; min-height: 44px;
}
.news-row:hover .news-name { text-decoration: underline; }
.news-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.news-name { font-weight: 800; color: var(--head); overflow-wrap: anywhere; }
.news-line.pm { color: var(--muted); font-style: italic; }
.news-sum { padding: 9px 2px; border-bottom: 1px solid var(--outline); font-weight: 700; }
.commit li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--outline); }
.commit-text { flex: 1 1 14rem; min-width: 0; }
.timeline li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--outline); }
.yr { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3rem; color: var(--head); }
.facts li { padding: 6px 0; }
.facts li + li { border-top: 1px solid var(--outline); }
.plain li { margin: 0.35rem 0; }
.recap { display: flex; flex-direction: column; gap: 4px; }
.recap-year p { margin-bottom: 0.3rem; }
.inbox { display: flex; flex-direction: column; gap: 4px; }
.inbox-item .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.choices-row { display: flex; flex-direction: column; gap: 10px; margin-top: 0.6rem; }
.decide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.choice-inv { border-top: 1px solid var(--outline); padding-top: 8px; }
.list-offer ul li .btn { text-align: left; }
.copy-out { margin: 0.6rem 0; }

/* ---------------------------------------------------------------- deal card */
.meta { margin-bottom: 0.4rem; }
.campaign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.95rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0.5rem 0 0.75rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0.5rem 0 0.75rem; }
@media (max-width: 440px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv { min-width: 0; }
.kv dt { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kn .kv dd { font-size: 1.05rem; }
.small-kv .kv dd { font-weight: 600; }
.lines { display: flex; flex-direction: column; gap: 8px; margin: 0.8rem 0; }
.scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.score { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.score-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.score-num { font-size: 2.3rem; font-weight: 900; color: var(--head); line-height: 1; font-variant-numeric: tabular-nums; }
.score-num.mid { font-size: 1.45rem; }
.caption { font-size: 0.86rem; color: var(--muted); }
.odds { font-weight: 600; }
.details { margin-top: 1.2rem; }
.tablist { display: flex; flex-wrap: wrap; gap: 2px 4px; border-bottom: 1px solid var(--outline); }
.dtab {
  font: inherit; font-size: 0.9rem; font-weight: 700; min-height: 44px; padding: 8px 10px; background: none;
  border: none; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer;
}
.dtab[aria-selected="true"] { color: var(--head); border-bottom-color: var(--chart); }
.tabpanel { padding: 12px 0 4px; }
.meter-line { font-weight: 600; }
.ack { background: var(--card); border-radius: 12px; padding: 10px 12px; }

/* ---------------------------------------------------------------- sheets */
.sheet-layer { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.sheet {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(560px, 100%);
  background: var(--surface); color: var(--ink); display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.sheet-full { top: env(safe-area-inset-top, 0px); bottom: 0; }
@media (min-width: 600px) { .sheet-full { top: calc(env(safe-area-inset-top, 0px) + 16px); bottom: 16px; border-radius: 16px; overflow: hidden; } }
.sheet-bottom { bottom: 0; max-height: calc(100% - env(safe-area-inset-top, 0px) - 24px); border-radius: 16px 16px 0 0; overflow: hidden; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 16px 8px; border-bottom: 1px solid var(--outline); background: var(--raised); }
.sheet-head-text { min-width: 0; }
.sheet-head .eyebrow { margin-top: 2px; }
.sheet-title { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 18px; overscroll-behavior: contain; min-height: 0; }
.sheet-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--outline); background: var(--raised);
}
.sheet-actions .btn.primary { flex: 1 1 12rem; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; }
.sheet-actions .help { margin: 0; flex: 1 1 100%; }

/* Short screens (a phone held sideways): give the deal card most of the height. */
@media (max-height: 520px) {
  .sheet-full { top: 0; bottom: 0; border-radius: 0; }
  .sheet-head { padding: 6px 16px; align-items: center; }
  .sheet-head .eyebrow { display: none; }
  .sheet-title { font-size: 1.1rem; }
  .sheet-head .btn { min-height: 40px; padding-block: 6px; }
  .sheet-actions { flex-wrap: nowrap; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .sheet-actions .btn { min-height: 40px; padding-block: 6px; }
  .sheet-actions .btn.primary { flex: 1 1 auto; }
  .inv-actions { flex-wrap: nowrap; }
  .strip-in { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding-block: 4px 6px; max-width: 760px; }
  .strip-row { flex: 0 1 auto; }
  .strain-label { display: none; }
  .strip-stats { flex: 1 1 14rem; margin-top: 0; gap: 4px 8px; }
  .strip-stats .kv dd { font-size: 0.9rem; line-height: 1.3; }
  .strip-stats .kv dt { line-height: 1.3; }
  .tab { min-height: 44px; }
  body.screen-game { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- tables, meters, charts */
.table-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; max-width: 100%; }
.tbl { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--outline); text-align: left; vertical-align: top; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl thead th.num, .tbl .num.wrap { white-space: normal; }
.tbl thead th { font-size: 0.78rem; color: var(--muted); font-weight: 800; }
.tbl tbody th { font-weight: 600; }
.tbl tr.total th, .tbl tr.total td { font-weight: 800; border-top: 2px solid var(--ink); }
.tbl tr.held th, .tbl tr.held td { font-weight: 800; color: var(--head); }
.tbl tr.has-detail th, .tbl tr.has-detail td { border-bottom: none; padding-bottom: 2px; }
.tbl tr.detail td { padding-top: 0; padding-left: 0; font-size: 0.85rem; color: var(--muted); }
.table-note { margin: -0.5rem 0 1rem; }
.meter { position: relative; height: 14px; border-radius: 7px; background: var(--card); border: 1px solid var(--outline); overflow: hidden; margin: 0.5rem 0 0.25rem; }
.meter > span { display: block; height: 100%; background: var(--chart); }
.meter .mark45 { position: absolute; top: 0; bottom: 0; left: 45%; width: 3px; background: var(--ink); }
.meter-scale { position: relative; height: 1.4em; font-size: 0.8rem; color: var(--muted); margin: 0 0 0.6rem; }
.meter-scale .mark45-label { position: absolute; left: 45%; transform: translateX(-50%); font-weight: 800; color: var(--ink); }
.meter-scale .end { position: absolute; right: 0; }
.chart { margin: 0.8rem 0; }
.chart-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.chart-svg text { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.chart-svg .clabel { font-size: 12.5px; font-weight: 800; }
.chart-svg .lbl-ink { fill: var(--ink); }
.chart-svg .lbl-muted { fill: var(--muted); }
.chart-svg .grid { stroke: var(--outline); stroke-width: 1; }
.chart-svg .base { stroke: var(--ink); stroke-width: 1.5; }
.chart-svg .hline { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-svg .ln { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg path.ln-goal { stroke: var(--chart); }
.chart-svg path.ln-index { stroke: var(--index); stroke-width: 3; }
.chart-svg .dot { stroke: none; }
.chart-svg .dot.ln-goal { fill: var(--chart); }
.chart-svg .dot.ln-index { fill: var(--index); }
.chart-svg .bar-up { fill: var(--chart); }
.chart-svg .bar-down { fill: var(--muted); opacity: 0.55; }
.chart figcaption { margin-top: 4px; }

/* ---------------------------------------------------------------- portfolio columns, More */
.pgrid { display: block; }
.pcol { min-width: 0; }
@media (min-width: 960px) { .pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.toggle-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.toggle-head h2 { margin: 0; }
.gloss dt { font-weight: 800; color: var(--head); margin-top: 0.8rem; }
.gloss dd { margin: 0.2rem 0 0; }
.finished { margin-top: 1.4rem; }

/* ---------------------------------------------------------------- fun pass (design/FUN_PLAN.md)
   Play now leads the start screen; the year-1 risk line; The Crowd Courier on each year statement; sharing. */
.btn-play { min-height: 60px; font-size: 1.25rem; font-weight: 900; border-radius: 14px; }
.btn.secondary.btn-play { border-width: 2.5px; }
.risk-card { border: 2px solid var(--warn-line); background: var(--raised); }
.risk-card .btn { margin-top: 2px; }
.risk-line { flex: 1 1 100%; font-weight: 700; color: var(--ink); }
/* The Crowd Courier: a make-believe local paper. Words only; the masthead is Nunito at its heaviest between two rules. */
.courier { margin: 0.6rem 0 1.2rem; padding: 10px 14px 6px; background: var(--raised); border: 1px solid var(--outline); border-top: 5px solid var(--head); border-radius: 4px 4px 12px 12px; }
.courier-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; border-bottom: 2px solid var(--head); padding-bottom: 5px; margin-bottom: 2px; }
.courier-name { margin: 0; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; color: var(--head); }
.courier-date { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.courier-list { margin: 0; }
.courier-list li { padding: 7px 0; font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.courier-list li + li { border-top: 1px solid var(--outline); }
.courier-list li:first-child { font-size: 1.15rem; font-weight: 900; color: var(--head); line-height: 1.25; }
/* each skipped year's top story on the "While you were away" page */
.recap-year p.recap-courier { font-weight: 800; color: var(--head); border-left: 4px solid var(--head); padding: 1px 0 1px 10px; margin: 0.1rem 0 0.5rem; line-height: 1.3; }
.recap-paper { font-weight: 900; }
.score-why { margin: 0.4rem 0 0; }
.share-row { margin: 0.9rem 0 0.4rem; }
.hero-card .copy-out textarea { font-size: 0.95rem; }
.beta-line { font-weight: 600; }
.beta-line a { font-weight: 800; }

/* ---------------------------------------------------------------- League page only: save for later, feedback */
.ok-box { border: 2px solid var(--good-line); border-radius: 12px; padding: 10px 12px; background: var(--raised); }
.ok-box > :last-child { margin-bottom: 0; }
.feedback { margin-top: 1.6rem; }
.feedback textarea { min-height: 7.5rem; }
/* the honeypot: off screen, out of the tab order and hidden from screen readers */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}