/* Self-hosted web fonts (SIL Open Font License 1.1, see /assets/fonts/OFL.txt). Same families, weights and subsets Google Fonts served. */
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/public-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/public-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/public-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/public-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 800; src: url(/assets/fonts/public-sans-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 800; src: url(/assets/fonts/public-sans-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
:root {
  --bg: #f4f6f8; --surface: #ffffff; --fg: #17202b; --muted: #566472; --line: #e3e7ec; --accent: #2f5bd3;
  --buy: #137a43; --buy-bg: #e3f4ea; --ok: #8f5c00; --ok-bg: #fcf1d6; --wait: #c4332f; --wait-bg: #fbe5e3;
  --pieces: #1f6f9c; --pieces-bg: #e2f0f8;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0f141a; --surface: #171e26; --fg: #e8edf2; --muted: #95a3b2; --line: #26303a; --accent: #7ea2ff;
  --buy: #4cc47f; --buy-bg: #133224; --ok: #f0b43c; --ok-bg: #372b10; --wait: #ff7a72; --wait-bg: #3c1a19;
  --pieces: #6cb8e6; --pieces-bg: #12283a; color-scheme: dark } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; display: grid; gap: 16px; }
nav.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 4px; }
nav.top .brand { font-weight: 800; font-size: 1.1rem; color: var(--fg); text-decoration: none; margin-right: auto; }
nav.top a:not(.brand) { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
nav.top a[aria-current="page"] { color: var(--fg); }
h1 { font-size: 1.45rem; font-weight: 800; margin: 6px 0 0; }
.lede { color: var(--muted); margin: 4px 0 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card > h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; padding: 12px 14px 0; }
.pad { padding: 8px 14px 14px; }
.pad p { margin: 0.4em 0; }
.how { display: grid; gap: 8px; }
.rule { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; align-items: start; font-size: 0.92rem; }
.tag { display: inline-block; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; text-align: center; }
.t-buy { color: var(--buy); background: var(--buy-bg); } .t-ok { color: var(--ok); background: var(--ok-bg); }
.t-wait { color: var(--wait); background: var(--wait-bg); } .t-pieces { color: var(--pieces); background: var(--pieces-bg); }
.note { font-size: 0.85rem; color: var(--muted); }
.chartbox { height: 440px; }
.tape { min-height: 46px; }
.group-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 12px 14px 4px; border-top: 1px solid var(--line); }
.group-h:first-child { border-top: 0; }
details.row { border-top: 1px solid var(--line); }
details.row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 0.8rem;
  grid-template-areas: "tk badges chev"; align-items: center; gap: 4px 10px; padding: 8px 12px 8px 14px; min-height: 44px; }
.tk { grid-area: tk; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-weight: 800; }
.tk small { font-weight: 400; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.chev { grid-area: chev; }
.badges { flex-wrap: nowrap; }
.badges .tag { font-size: 0.7rem; padding: 3px 8px; }
@media (max-width: 480px) { .tk small { font-size: 0.78rem; } details.row > summary { gap: 4px 6px; padding-left: 12px; } }

.t-trend { color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 600; }
.asof { font-size: 0.8rem; color: var(--muted); padding: 2px 14px 8px; }
details.row > summary::-webkit-details-marker { display: none; }
details.row[open] > summary { background: color-mix(in srgb, var(--accent) 10%, transparent); }
details.row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mini { height: 150px; min-width: 0; pointer-events: none; }
.chev::after { content: "›"; color: var(--muted); display: inline-block; transition: transform .15s; }
details[open] .chev::after { transform: rotate(90deg); }
.big { height: 440px; border-top: 1px solid var(--line); }
.widget { height: 420px; }
.widget.short { height: 330px; }
.info { min-height: 170px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.kv .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kv .val { font-family: var(--font-num); font-size: 1.02rem; }
.grades { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.92rem; }
.grades .g { font-family: var(--font-num); font-weight: 700; }
ul.tight { margin: 0.3em 0; padding-left: 1.2em; }
footer { color: var(--muted); font-size: 0.85rem; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
footer .attr { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .chev::after { transition: none; } }
@media (max-width: 480px) { .rule { grid-template-columns: 6.6rem 1fr; } .chartbox, .big, .widget { height: 380px; } }
/* TradingView iframes: match the embedded page's color-scheme so the browser doesn't paint an opaque white
   backdrop behind transparent dark-theme widgets (that caused light-gray text on white). */
.tradingview-widget-container iframe { color-scheme: normal; }
.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; }
#sub { margin-top: -4px; }
[lang="th"] { font-family: "IBM Plex Sans Thai", var(--font-ui); }
.brand-th { font-weight: 600; font-size: 0.85em; color: var(--muted); margin-left: 4px; }
.eyebrow { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.eyebrow [lang="th"] { color: var(--fg); font-weight: 600; font-size: 1.05rem; }
.t-verdict { min-width: 5.6rem; text-align: center; }
.t-none { visibility: hidden; }
nav.top .brand { display: grid; line-height: 1.15; }
.brand-tag { font-size: 0.72rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 420px) { .brand-th { font-size: 0.8em; } nav.top { gap: 12px; } nav.top a:not(.brand) { font-size: 0.82rem; } }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 6px 0; }
.card-h h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; padding: 0 0 0 14px; white-space: nowrap; }
.lab-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.t-grade { min-width: 2.3rem; text-align: center; font-family: var(--font-num); font-weight: 700; color: var(--fg);
  background: transparent; border: 1.5px solid var(--fg); }
.t-nograde { color: var(--muted); border-color: var(--line); font-weight: 400; }
@media (max-width: 420px) { .tk small { display: none; } }
.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px;
  border-radius: 10px; padding: 6px 8px; text-align: center; text-decoration: none; line-height: 1.15; }
.bar b { font-size: 1.05rem; font-weight: 800; }
.bar .bl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; opacity: 0.85; }
.g5 { background: #137a43; color: #fff; } .g4 { background: #6fb34a; color: #0d1a07; } .g3 { background: #e0a526; color: #1f1400; }
.g2 { background: #e0702a; color: #1f0c00; } .g1 { background: #c4332f; color: #fff; } .g0 { background: var(--line); color: var(--fg); }
.bar-link { border: 1.5px solid var(--accent); color: var(--accent); }
.bar-link b { font-size: 0.92rem; }
.bar-none { grid-column: 1 / -1; border: 1px dashed var(--line); color: var(--muted); font-size: 0.88rem; }
@media (max-width: 420px) { .bars { gap: 6px; padding: 10px 12px; } .bar b { font-size: 0.95rem; } .bar-link b { font-size: 0.82rem; } }

/* Report card page */
.rc-nav { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 0.9rem; padding-top: 4px; }
.rc-nav a { text-decoration: none; }
.rc-id h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.rc-tk { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; }
.rc-name { font-size: 1.15rem; font-weight: 600; color: var(--muted); }
.rc-sub { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin-top: 4px; }
.rc-inst { margin-top: 8px !important; }
.rc-soon { margin-top: 14px; border: 1px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); font-weight: 600; }
.rc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rc-tile { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; min-height: 104px; }
.rc-tile .bl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; opacity: 0.85; }
.rc-big { font-family: var(--font-num); font-size: 3.4rem; font-weight: 700; line-height: 1; }
.rc-word { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.rc-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.rc-meters .lab, .kv .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 4px 0; }
.meter span { background: var(--line); color: var(--muted); } .meter span.on { color: inherit; }
.meter span { text-align: center; font-size: 0.7rem; font-weight: 700; padding: 5px 0; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.meter span.on.g5 { background:#137a43; color:#fff } .meter span.on.g4 { background:#6fb34a; color:#0d1a07 } .meter span.on.g3 { background:#e0a526; color:#1f1400 } .meter span.on.g2 { background:#e0702a; color:#1f0c00 } .meter span.on.g1 { background:#c4332f; color:#fff }
.meter span.on { font-size: 0.78rem; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--fg); }
.rc-grades { display: grid; gap: 14px; padding-top: 12px; }
.rc-g { display: grid; grid-template-columns: 3.6rem 1fr; gap: 12px; align-items: center; }
.rc-letter { display: grid; place-items: center; height: 3.6rem; border-radius: 12px; font-family: var(--font-num); font-size: 1.7rem; font-weight: 700; }
.rc-gname { font-weight: 800; font-size: 1.02rem; }
.track { height: 10px; border-radius: 999px; background: var(--line); margin: 5px 0 4px; overflow: hidden; }
.track span { display: block; height: 100%; border-radius: 999px; }
.rc-lead { font-size: 1.02rem; }
.rc-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rc-case { border-top-width: 5px; }
.rc-case.bull { border-top-color: var(--buy); } .rc-case.bull > h2 { color: var(--buy); }
.rc-case.bear { border-top-color: var(--wait); } .rc-case.bear > h2 { color: var(--wait); }
.rc-case li { margin: 0.35em 0; }
.rc-take { border-left: 5px solid var(--accent); }
.rc-take p { font-size: 1.05rem; line-height: 1.6; }
.rc-foot { margin: 0; }
@media (max-width: 600px) { .rc-cases, .rc-meters { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .rc-tk { font-size: 2rem; } .rc-big { font-size: 2.8rem; } .rc-word { font-size: 1.35rem; } .rc-tile { min-height: 92px; } .meter span { font-size: 0.62rem; } }
.rc-main { display: grid; gap: 16px; align-content: start; min-height: 100vh; }
.rc-hero > .pad { padding-top: 14px; }

/* How it works / About: report-card style */
.page-h { font-size: 1.9rem; letter-spacing: -0.01em; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo-tile { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.duo-tile .bl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; opacity: 0.85; }
.duo-tile > b { font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.t-q1 { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.t-q2 { background: var(--buy-bg); border: 1.5px solid color-mix(in srgb, var(--buy) 45%, transparent); }
.duo-tile.plain { background: var(--bg); border: 1px solid var(--line); }
.duo-tile.plain > b { font-size: 1.02rem; }
.duo-demo { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.mini-g { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; font-family: var(--font-num); font-weight: 700; }
.mock { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.mock .badges .tag:nth-child(1)::before, .mock .badges .tag:nth-child(2)::before, .mock .badges .tag:nth-child(3)::before { font-family: var(--font-ui); margin-right: 4px; font-size: 0.62rem; opacity: 0.8; }
.mock .badges .tag:nth-child(1)::before { content: "1"; } .mock .badges .tag:nth-child(2)::before { content: "2"; } .mock .badges .tag:nth-child(3)::before { content: "3"; }
.callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 6px; }
.callouts > div { display: grid; grid-template-columns: 1.7rem 1fr; gap: 2px 8px; align-items: start; align-content: start; font-size: 0.9rem; }
.callouts .num { grid-row: span 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fg); color: var(--surface); font-weight: 800; font-size: 0.85rem; }
.callouts b { font-size: 1rem; }
.callouts span:not(.num) { color: var(--muted); }
.vbars { display: grid; gap: 8px; margin: 12px 0 8px; }
.vbar { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; align-items: center; border-radius: 12px; padding: 12px 14px; border-left: 6px solid; }
.vbar b { font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.vbar span { font-size: 0.93rem; }
.v-buy { background: var(--buy-bg); border-color: var(--buy); } .v-buy b { color: var(--buy); }
.v-ok { background: var(--ok-bg); border-color: var(--ok); } .v-ok b { color: var(--ok); }
.v-wait { background: var(--wait-bg); border-color: var(--wait); } .v-wait b { color: var(--wait); }
.v-pieces { background: var(--pieces-bg); border-color: var(--pieces); } .v-pieces b { color: var(--pieces); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.reason { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; padding: 12px; }
.reason b { font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.reason span { font-size: 0.92rem; }
.reason cite { font-style: normal; font-size: 0.78rem; color: var(--muted); margin-top: auto; padding-top: 4px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 10px 0; }
.scale span { text-align: center; border-radius: 8px; padding: 8px 2px; font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; white-space: nowrap; overflow: hidden; }
.scale.small { margin: 8px 0 2px; }
.scale.small span { font-family: var(--font-ui); font-size: 0.7rem; padding: 5px 1px; border-radius: 6px; }
.cats { display: grid; gap: 8px; }
.cat { border-left: 4px solid var(--fg); padding: 4px 0 4px 12px; display: flex; flex-direction: column; }
.cat b { font-size: 1.08rem; font-weight: 800; }
.cat > span { font-size: 0.92rem; color: var(--muted); }
.name-card { border-top: 5px solid var(--accent); }
.name-hero { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0 6px; }
.name-hero [lang="th"] { font-size: 2.6rem; font-weight: 600; line-height: 1.2; }
.name-hero b { font-size: 1.1rem; font-weight: 800; color: var(--muted); letter-spacing: 0.02em; }
.disc { display: grid; gap: 8px; }
.disc > div { display: flex; flex-direction: column; gap: 2px; border-radius: 12px; padding: 12px 14px; border-left: 6px solid; }
.disc b { font-size: 1.08rem; font-weight: 800; }
.disc span { font-size: 0.92rem; }
.d-own { background: var(--buy-bg); border-color: var(--buy); }
.d-warn { background: var(--wait-bg); border-color: var(--wait); }
.d-info { background: var(--bg); border-color: var(--line); }
@media (max-width: 600px) { .callouts, .reasons { grid-template-columns: 1fr; } .vbar { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 420px) { .duo { grid-template-columns: 1fr; } .page-h { font-size: 1.6rem; } .mock .tk small { display: none; } .scale.small span { font-size: 0.6rem; } }

/* Front page count tiles */
.tally { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.tally .tile { font: inherit; cursor: pointer; border: 2px solid transparent; border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
.tally .tile b { font-family: var(--font-num); font-size: 2.2rem; font-weight: 700; }
.tally .tile span { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.tally .tile[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.tally .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tally-note { grid-column: 1 / -1; grid-row: 2; font-size: 0.8rem; color: var(--muted); }
.nf-code { font-family: var(--font-num); font-size: 3.4rem; font-weight: 700; line-height: 1; }
.nf-btn { display: inline-block; font-weight: 800; text-decoration: none; border: 1.5px solid var(--accent); border-radius: 10px; padding: 8px 14px; }
@media (max-width: 420px) { .tally { gap: 6px; } .tally .tile b { font-size: 1.8rem; } .tally .tile span { font-size: 0.66rem; letter-spacing: 0.03em; } }
.card > .tally { padding: 10px 14px 6px; }
#asof { padding: 2px 14px 10px; }
.rownews { border-top: 1px solid var(--line); }
@media (max-width: 600px) { .home-h { font-size: min(1.9rem, 5.8vw); letter-spacing: -0.02em; } }

/* This week page */
.wk-title { font-size: 1.45rem; font-weight: 800; line-height: 1.2; margin: 6px 0 4px; text-transform: none; letter-spacing: 0; color: var(--fg); padding: 0; }
.wk-mkt { display: flex; align-items: center; gap: 8px; }
.tally.static { margin-top: 10px; }
.tally.static .tile { cursor: default; }
.wk-list { display: grid; gap: 2px; }
.wk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.wk-row:first-child { border-top: 0; }
.wk-row.col { align-items: baseline; flex-wrap: nowrap; }
.wk-row.link:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.wk-row.cur b { color: var(--accent); }
.wk-tk { min-width: 3.4rem; font-weight: 800; }
.wk-move { display: inline-flex; align-items: center; gap: 6px; }
.wk-move .arrow { color: var(--muted); font-weight: 800; }
.wk-note { flex-basis: 100%; }
.mini-g.sm { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 6px; }
.wk-card { display: flex; flex-direction: column; align-items: center; border-radius: 10px; padding: 6px 4px; text-decoration: none; line-height: 1.1; }
.wk-card span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.wk-card b { font-family: var(--font-num); font-size: 1.3rem; }
.wk-f .note { white-space: nowrap; }
.wk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.wk-story .wk-chips { margin: 0 0 10px; }
.wk-chg { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.wk-chg .arrow { color: var(--muted); font-weight: 800; }
.wk-chgnote { flex-basis: 100%; font-size: 0.85rem; }
.wk-body { min-width: 0; }
.wk-quiet a { font-weight: 700; }
.wk-past > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding-right: 14px; min-height: 44px; }
.wk-past > summary::-webkit-details-marker { display: none; }
.wk-past > summary h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; padding: 12px 14px; }
.wk-past > summary h2 .note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.wk-past > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wk-past .pad { padding-top: 0; }
/* Lead card: tinted so the week's headline stands out */
.wk-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); border-left: 5px solid var(--accent); }
.wk-hero .rc-sub { color: var(--accent); font-weight: 700; }
.wk-hero .rc-lead { font-size: 1.02rem; }
/* Coming up calendar: Mon–Fri, one row per week, color by event type */
.cal-m { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 4px; }
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.cal-d { border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 6px; min-height: 3.8rem; display: flex; flex-direction: column; gap: 3px; background: var(--surface); }
.cal-d.empty { background: color-mix(in srgb, var(--line) 35%, transparent); border-style: dashed; }
.cal-d.past { opacity: 0.5; }
.cal-d.busy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cal-n { font-size: 0.68rem; color: var(--muted); white-space: nowrap; padding: 1px 3px; border-radius: 6px; align-self: flex-start; }
.cal-n b { color: var(--fg); font-family: var(--font-num); font-size: 0.85rem; }
.cal-d.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-d.today .cal-n { background: var(--accent); color: var(--surface); }
.cal-d.today .cal-n b { color: var(--surface); }
.cal-e { display: flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 800; text-decoration: none; color: var(--fg); border-radius: 6px; padding: 2px 5px;
  border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-e i { font-style: normal; font-weight: 400; font-size: 0.8rem; line-height: 1; }
.cal-e.am { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cal-e.pm { background: var(--pieces-bg); color: var(--pieces); border-color: color-mix(in srgb, var(--pieces) 30%, transparent); }
.cal-e.tbd { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.cal-e.ev { background: none; color: var(--fg); border: 1px dashed var(--muted); }
a.cal-e:hover { filter: brightness(0.95); }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cal-key .cal-e { font-size: 0.74rem; font-weight: 700; }
.cal-tip { margin: 0 0 6px; font-size: 0.8rem; }
@media (max-width: 420px) { .cal { gap: 3px; } .cal-d { padding: 3px 2px 4px; } .cal-e { font-size: 0.72rem; padding: 2px 3px; gap: 2px; } .cal-key .cal-e { font-size: 0.7rem; } }
/* SEC filings list in expanded rows and report cards */
.filings { padding: 8px 14px 4px; border-top: 1px solid var(--line); }
.filings .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.filings ul { list-style: none; margin: 0; padding: 0; }
.filings li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.filings li:first-child { border-top: 0; }
.filings li .note { white-space: nowrap; }
/* Phones: brand on its own line, the four page links on one clean line below */
@media (max-width: 480px) { nav.top { gap: 6px 18px; } nav.top .brand { flex-basis: 100%; margin-right: 0; } }
/* Filings card on the Financials page */
#filsec .filings { border-top: 0; padding: 4px 14px 10px; }
#filsec .filings .lab { display: none; }

/* Headline list in expanded rows */
.newslist { padding: 10px 14px 8px; }
.newslist .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.newslist ul { list-style: none; margin: 0; padding: 0; }
.newslist li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.35; }
.newslist li:first-child { border-top: 0; }
.newslist li a { font-weight: 600; }
.newslist .note { margin: 4px 0 6px; }
/* Expanded-row action strip: equal tiles matching the Grade / Risk / Report card bars */
.acts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px;
  border-radius: 10px; padding: 6px 8px; text-align: center; text-decoration: none; line-height: 1.15;
  border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent);
  transition: background .15s; }
/* Links sit directly under the Grade / Risk row: one block, no divider between them. Same blue as "Report card →". */
.bars + .acts { border-top: 0; padding-top: 0; }
.bar-link { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.bar-link:hover, .bar-link:focus-visible { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.act b { font-size: 0.92rem; font-weight: 800; white-space: nowrap; }
.act .bl { white-space: nowrap; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); }
.act:hover, .act:focus-visible { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .acts { gap: 6px; padding: 10px 12px 12px; } .act { padding: 6px 4px; } .act b { font-size: 0.78rem; } .act .bl { font-size: 0.6rem; letter-spacing: 0.04em; } }
@media (max-width: 340px) { .act .bl { display: none; } .act { min-height: 44px; } .act b { white-space: normal; } }
/* Phones: 12px minimum for pills and small labels (Lighthouse legible font size) */
@media (max-width: 480px) { .tag, .badges .tag, .brand-tag, .bar .bl { font-size: 0.75rem; } .act .bl { font-size: 0.75rem; letter-spacing: 0; } .bar .bl { letter-spacing: 0.02em; } }
/* This week: top stories, TL;DR groups (2026-10-10 format) */
.wk-story p { margin: 0 0 0.55em; }
.wk-story p:last-child { margin-bottom: 0; }
.wk-src a { white-space: nowrap; }
.wk-grp { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin: 12px 0 2px; }
.wk-grp:first-child { margin-top: 0; }
.wk-quiet { margin: 10px 0 0; }
.wk-sitenote, .wk-credit { margin: 0 2px; }
.wn-list { display: grid; gap: 2px; }
.wn-row { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline; }
.wn-row:first-child { border-top: 0; }
.wn-row time { font-family: var(--font-num); color: var(--muted); white-space: nowrap; min-width: 5.6rem; font-size: 0.85rem; }
.wk-story h2 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 800; color: var(--fg); line-height: 1.3; }
/* Front page: latest "This week" issue */
.wk-banner { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--card, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--fg); text-decoration: none; line-height: 1.3; }
.wk-banner[hidden] { display: none; }
/* Space is reserved while the issue title loads, so the page below doesn't jump (CLS). */
.wk-banner { min-height: 44px; }
.wk-banner:empty { visibility: hidden; }
@media (max-width: 480px) { .wk-banner { min-height: 80px; } }
.wk-banner b { color: var(--accent); white-space: nowrap; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.wk-banner span { flex: 1; min-width: 0; }
.wk-banner i { font-style: normal; color: var(--accent); font-weight: 800; }
.wk-banner:hover { border-color: var(--accent); }
/* Phones: Holdings list first, market chart card below it (desktop unchanged). */
@media (max-width: 480px) { .mkt-card { order: 1; } .wrap > footer { order: 2; } }
/* Reserve space for the Holdings tiles, as-of line and list while their data loads, so the cards below don't jump
   (home mobile Cumulative Layout Shift 0.653 after the phone reorder put the market card under the list). */
.card > .tally:empty { min-height: 92px; }
#asof:empty { min-height: 31px; }
@media (max-width: 480px) { #asof:empty { min-height: 50px; } #list:has(> p.note:only-child) { min-height: 100vh; } }
@media (max-width: 420px) { .card > .tally:empty { min-height: 83px; } }