/* NTechTips News — presentation tier styles
   Light and dark themes share one set of variables:
   --c-*  category colour used as a BACKGROUND under white text
   --f-*  category colour used as TEXT on the page surface (lighter in dark mode)
   --t-*  category tint for soft backgrounds */

:root {
  color-scheme: light;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --ground: #F8FAFC;
  --card: #FFFFFF;
  --card-2: #F8FAFC;
  --field: #FFFFFF;
  --hover: #F1F5F9;
  --night: #0B1220;
  --night-line: #1E293B;
  --brand: #E11D48;
  --up: #34D399;
  --down: #FB7185;
  --live: #BE123C;
  --live-tint: #FFF1F2;
  --live-line: #FECDD3;
  --sky-bg: #E0F2FE;
  --sky-line: #BAE6FD;
  --sky-fg: #075985;
  --sky-ink: #0369A1;
  --sky-soft: #F0F9FF;
  --skel-a: #EEF2F7;
  --skel-b: #E2E8F0;
  --focus: #2563EB;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .04);
  --shadow-pop: 0 16px 40px rgba(15, 23, 42, .16);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --gutter: 24px;

  --c-breaking: #BE123C;   --f-breaking: #BE123C;   --t-breaking: #FFE4E6;
  --c-local: #C2410C;      --f-local: #C2410C;      --t-local: #FFEDD5;
  --c-politics: #6D28D9;   --f-politics: #6D28D9;   --t-politics: #EDE9FE;
  --c-finance: #047857;    --f-finance: #047857;    --t-finance: #D1FAE5;
  --c-technology: #1D4ED8; --f-technology: #1D4ED8; --t-technology: #DBEAFE;
  --c-fashion: #BE185D;    --f-fashion: #BE185D;    --t-fashion: #FCE7F3;
  --c-movies: #B45309;     --f-movies: #B45309;     --t-movies: #FEF3C7;
  --c-sports: #0F766E;     --f-sports: #0F766E;     --t-sports: #CCFBF1;
  --c-world: #4338CA;      --f-world: #4338CA;      --t-world: #E0E7FF;
  --c-humour: #A16207;     --f-humour: #A16207;     --t-humour: #FEF9C3;
  --c-shopping: #A21CAF;   --f-shopping: #A21CAF;   --t-shopping: #FAE8FF;
  --c-health: #0369A1;     --f-health: #0369A1;     --t-health: #E0F2FE;
  --c-auto: #57534E;       --f-auto: #57534E;       --t-auto: #F5F5F4;
  --c-noteworthy: #B45309; --f-noteworthy: #B45309; --t-noteworthy: #FEF3C7;
  --up-fg: #047857;        --down-fg: #BE123C;
  --c-cartoon: #6D28D9;    --f-cartoon: #5B21B6;    --t-cartoon: #EDE9FE;
  --c-all: #0F172A;        --f-all: #0F172A;        --t-all: #E2E8F0;
}

/* Dark theme: chosen in the header toggle (data-theme) or, with no choice saved, from the system setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E5E7EB;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --line: #243041;
  --line-strong: #334155;
  --ground: #0B1120;
  --card: #111827;
  --card-2: #0F172A;
  --field: #0F172A;
  --hover: #1F2937;
  --night: #050913;
  --night-line: #1F2937;
  --live-tint: #2A1219;
  --live-line: #5B1A2A;
  --sky-bg: #0C2A3F;
  --sky-line: #164E63;
  --sky-fg: #BAE6FD;
  --sky-ink: #7DD3FC;
  --sky-soft: #0F2233;
  --skel-a: #1A2333;
  --skel-b: #243041;
  --focus: #60A5FA;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55);

  --f-breaking: #FB7185;   --t-breaking: #3A1220;
  --f-local: #FB923C;      --t-local: #3A1C0C;
  --f-politics: #A78BFA;   --t-politics: #251A45;
  --f-finance: #34D399;    --t-finance: #0C2E24;
  --f-technology: #60A5FA; --t-technology: #12234A;
  --f-fashion: #F472B6;    --t-fashion: #3A1229;
  --f-movies: #FBBF24;     --t-movies: #33230A;
  --f-sports: #2DD4BF;     --t-sports: #0B2E2B;
  --f-world: #818CF8;      --t-world: #1C1F4A;
  --f-humour: #FACC15;     --t-humour: #2F2708;
  --f-cartoon: #C4B5FD;    --t-cartoon: #251A45;
  --f-shopping: #E879F9;   --t-shopping: #3B0F3F;
  --f-health: #38BDF8;     --t-health: #0C2A3F;
  --c-auto: #57534E;       --f-auto: #D6D3D1;       --t-auto: #262422;
  --f-noteworthy: #FBBF24; --t-noteworthy: #33230A;
  --up-fg: #34D399;        --down-fg: #FB7185;
  --c-all: #334155;        --f-all: #E5E7EB;        --t-all: #1F2937;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E5E7EB; --ink-2: #CBD5E1; --muted: #94A3B8; --line: #243041; --line-strong: #334155;
    --ground: #0B1120; --card: #111827; --card-2: #0F172A; --field: #0F172A; --hover: #1F2937;
    --night: #050913; --night-line: #1F2937; --live-tint: #2A1219; --live-line: #5B1A2A;
    --sky-bg: #0C2A3F; --sky-line: #164E63; --sky-fg: #BAE6FD; --sky-ink: #7DD3FC; --sky-soft: #0F2233;
    --skel-a: #1A2333; --skel-b: #243041; --focus: #60A5FA;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .3); --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55);
    --f-breaking: #FB7185; --t-breaking: #3A1220; --f-local: #FB923C; --t-local: #3A1C0C;
    --f-politics: #A78BFA; --t-politics: #251A45; --f-finance: #34D399; --t-finance: #0C2E24;
    --f-technology: #60A5FA; --t-technology: #12234A; --f-fashion: #F472B6; --t-fashion: #3A1229;
    --f-movies: #FBBF24; --t-movies: #33230A; --f-sports: #2DD4BF; --t-sports: #0B2E2B;
    --f-world: #818CF8; --t-world: #1C1F4A; --f-humour: #FACC15; --t-humour: #2F2708;
    --f-cartoon: #C4B5FD; --t-cartoon: #251A45; --c-all: #334155; --f-all: #E5E7EB; --t-all: #1F2937;
    --f-shopping: #E879F9; --t-shopping: #3B0F3F; --f-health: #38BDF8; --t-health: #0C2A3F; --f-auto: #D6D3D1; --t-auto: #262422;
    --f-noteworthy: #FBBF24; --t-noteworthy: #33230A; --up-fg: #34D399; --down-fg: #FB7185;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 160px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--ground); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
[hidden] { display: none !important; }
.wrap { max-width: 1400px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* Category colour hooks: --accent (background), --accent-fg (text), --tint (soft background) */
[data-cat] { --accent: var(--c-all); --accent-fg: var(--f-all); --tint: var(--t-all); }
[data-cat="breaking"]   { --accent: var(--c-breaking);   --accent-fg: var(--f-breaking);   --tint: var(--t-breaking); }
[data-cat="local"]      { --accent: var(--c-local);      --accent-fg: var(--f-local);      --tint: var(--t-local); }
[data-cat="politics"]   { --accent: var(--c-politics);   --accent-fg: var(--f-politics);   --tint: var(--t-politics); }
[data-cat="finance"]    { --accent: var(--c-finance);    --accent-fg: var(--f-finance);    --tint: var(--t-finance); }
[data-cat="technology"], [data-cat="events"] { --accent: var(--c-technology); --accent-fg: var(--f-technology); --tint: var(--t-technology); }
[data-cat="fashion"]    { --accent: var(--c-fashion);    --accent-fg: var(--f-fashion);    --tint: var(--t-fashion); }
[data-cat="movies"], [data-cat="entertainment"] { --accent: var(--c-movies); --accent-fg: var(--f-movies); --tint: var(--t-movies); }
[data-cat="sports"]     { --accent: var(--c-sports);     --accent-fg: var(--f-sports);     --tint: var(--t-sports); }
[data-cat="world"]      { --accent: var(--c-world);      --accent-fg: var(--f-world);      --tint: var(--t-world); }
[data-cat="humour"]     { --accent: var(--c-humour);     --accent-fg: var(--f-humour);     --tint: var(--t-humour); }
[data-cat="shopping"]   { --accent: var(--c-shopping);   --accent-fg: var(--f-shopping);   --tint: var(--t-shopping); }
[data-cat="health"]     { --accent: var(--c-health);     --accent-fg: var(--f-health);     --tint: var(--t-health); }
[data-cat="auto"]       { --accent: var(--c-auto);       --accent-fg: var(--f-auto);       --tint: var(--t-auto); }

/* ---------- Fixed header ---------- */
.site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(15, 23, 42, .06); padding-top: env(safe-area-inset-top); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 800 20px var(--display); }
.brand-name { font: 800 28px/1 var(--display); letter-spacing: -.5px; }
.brand-name span { color: var(--brand); }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.today { font-size: 14px; color: var(--ink-2); }
.region-toggle { display: flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.region-toggle button { min-height: 40px; padding: 0 14px; border: 0; background: var(--field); color: var(--ink); font-weight: 600; font-size: 13px; }
.region-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.search { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--field); }
.search input { border: 0; outline: 0; padding: 0 0 0 14px; height: 40px; width: 170px; font-size: 16px; background: transparent; }
.search button { width: 44px; height: 40px; border: 0; background: transparent; display: grid; place-items: center; }

/* Theme toggle */
.theme-toggle { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); display: grid; place-items: center; flex: none; }
.theme-toggle:hover { background: var(--hover); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Weather chip ---------- */
.weather { position: relative; }
.weather-chip { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--sky-line); background: var(--sky-bg); color: var(--sky-fg); font-weight: 700; font-size: 14px; }
.weather-chip:hover { border-color: var(--sky-ink); }
.wx-icon, .wx-big-icon { display: inline-flex; color: var(--sky-ink); }
.wx-icon svg { width: 22px; height: 22px; }
.wx-temp { font: 800 16px var(--display); color: var(--ink); }
.wx-place { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.weather:not(.ready) .wx-icon { animation: flash 1.4s ease-in-out infinite; }
.weather-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-pop); }
.wx-head { display: flex; align-items: center; gap: 12px; }
.wx-big-icon svg { width: 48px; height: 48px; }
.wx-big { display: block; font: 800 34px/1 var(--display); }
.wx-cond { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.wx-where { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.wx-grid { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wx-row { background: var(--sky-soft); border-radius: 10px; padding: 8px 10px; }
.wx-row dt { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sky-ink); }
.wx-row dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; }
.wx-locate { margin-top: 12px; width: 100%; min-height: 44px; border-radius: 999px; border: 2px solid var(--sky-ink); background: var(--field); color: var(--sky-ink); font-weight: 700; font-size: 14px; }
.wx-credit { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.wx-credit a { color: var(--sky-ink); }

/* ---------- Section menu + Technology sub-menu ---------- */
.main-nav { border-top: 1px solid var(--line); position: relative; }
.main-nav > ul { list-style: none; margin: 0; display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.main-nav > ul > li { display: flex; flex: none; }
.main-nav > ul > li > a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--accent-fg); border-bottom: 3px solid transparent; }
.main-nav > ul > li > a:hover { background: var(--tint); }
.main-nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--accent-fg); background: var(--tint); }
.submenu-toggle { display: grid; place-items: center; width: 34px; min-height: 46px; border: 0; background: transparent; color: var(--accent-fg); border-bottom: 3px solid transparent; }
.submenu-toggle svg { transition: transform .15s ease; }
.submenu-toggle[aria-expanded="true"] { background: var(--tint); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.main-nav > ul > li.has-sub > a { padding-right: 4px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 55; background: var(--card); border-top: 3px solid var(--accent); box-shadow: var(--shadow-pop); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mega-inner { padding-top: 18px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.mega-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.mega-head strong { font: 800 18px var(--display); color: var(--accent-fg); }
.mega-head a { font-size: 14px; font-weight: 700; color: var(--accent-fg); }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.mega-grid a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--tint); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; border: 1px solid transparent; }
.mega-grid a:hover, .mega-grid a[aria-current="page"] { border-color: var(--accent-fg); }
.mega-grid svg { flex: none; color: var(--accent-fg); }

/* ---------- Markets marquee ---------- */
.markets { background: var(--night); color: #E2E8F0; display: flex; align-items: center; height: 40px; overflow: hidden; }
.markets-label { flex: none; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--c-finance); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 1px; }
.marquee { flex: 1; min-width: 0; overflow: hidden; }
.marquee-track { display: flex; width: -webkit-max-content; width: max-content; animation: marquee 50s linear infinite; will-change: transform; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; gap: 36px; padding-right: 36px; padding-left: 24px; white-space: nowrap; font-size: 14px; align-items: center; }
.quote b { color: #fff; margin-right: 6px; }
.quote .up { color: var(--up); font-weight: 700; margin-left: 6px; }
.quote .down { color: var(--down); font-weight: 700; margin-left: 6px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Breaking flasher ---------- */
.flasher { background: var(--c-breaking); color: #fff; display: flex; align-items: center; min-height: 48px; overflow: hidden; }
.flasher-badge { flex: none; margin: 0 16px 0 24px; padding: 6px 12px; background: #fff; color: #9F1239; border-radius: 6px; font: 800 13px var(--display); letter-spacing: 1.5px; animation: flash 1.1s ease-in-out infinite; }
.flasher .marquee-track { animation-duration: 70s; }
.flasher .marquee-group { gap: 48px; font-weight: 600; font-size: 15px; }
.flasher a { color: #fff; text-decoration: none; }
.flasher a:hover { text-decoration: underline; }
.flasher a::before { content: "●"; margin-right: 10px; opacity: .7; font-size: 10px; vertical-align: middle; }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Generic ---------- */
main.wrap { padding-top: 32px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head h2 { margin: 0; font: 800 30px/1.1 var(--display); letter-spacing: -.3px; }
.section-head p { margin: 0; font-size: 14px; color: var(--ink-2); }
.tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-fg); }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.meta { font-size: 12px; color: var(--muted); }
.thumb { position: relative; background: var(--tint); color: var(--accent-fg); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; }
.thumb img + .ph { display: none; }
.skeleton { background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 12px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.empty { padding: 24px; border-radius: var(--radius); background: var(--card); color: var(--ink-2); box-shadow: var(--shadow); }
.btn { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--ink); color: var(--card); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-outline { background: var(--field); color: var(--accent-fg); border: 2px solid var(--accent-fg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Home layout: news on the left, live column on the right ---------- */
main.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "top side" "desks side" "lighter side"; gap: 40px 28px; align-items: start; }
.home-grid > .top { grid-area: top; }
.home-grid > .home-side { grid-area: side; }
.home-grid > .desks-section { grid-area: desks; }
.home-grid > .lighter { grid-area: lighter; }
.home-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---------- Home: top stories ---------- */
.top { display: flex; flex-wrap: wrap; gap: 24px; min-width: 0; }
.lead { flex: 999 1 460px; min-width: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; display: flex; flex-direction: column; }
.lead .thumb { height: clamp(220px, 28vw, 400px); }
.lead .pill { position: absolute; left: 20px; top: 20px; z-index: 1; }
.lead-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.lead h1 { margin: 0; font: 800 clamp(26px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -.5px; }
.lead:hover h1 { text-decoration: underline; text-decoration-thickness: 2px; }
.lead p { margin: 0; font-size: 17px; color: var(--ink-2); }
.latest { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.latest h2 { margin: 0; font: 800 22px var(--display); }
.mini { display: flex; gap: 14px; text-decoration: none; background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
.mini .thumb { flex: none; width: 96px; height: 72px; border-radius: 10px; }
.mini-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-title { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mini:hover .mini-title { text-decoration: underline; }

/* ---------- Live column panels (live scores, tech events) ---------- */
.strip { --st: var(--f-technology); --st-bg: var(--c-technology); --st-tint: var(--t-technology); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 12px; border-top: 4px solid var(--st-bg); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scores-strip { --st: var(--f-breaking); --st-bg: var(--c-breaking); --st-tint: var(--live-tint); }
.strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.strip-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 20px var(--display); }
.strip-icon { color: var(--st); }
.strip-link { font-size: 14px; font-weight: 700; color: var(--st); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.strip-link:hover { text-decoration: underline; }
.strip-chips, .ev-filter-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.strip-chips::-webkit-scrollbar, .ev-filter-row::-webkit-scrollbar { display: none; }
.strip-chips button, .ev-filter-row button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); font-size: 13px; font-weight: 700; }
.strip-chips button[aria-pressed="true"] { background: var(--st-bg); border-color: var(--st-bg); color: #fff; }
.strip-subchips button { min-height: 32px; font-size: 12px; background: var(--card-2); }
/* In the column the rows run vertically and scroll inside the panel. */
.strip-row { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: 640px; padding-right: 2px; scrollbar-width: thin; }
.events .strip-row { max-height: 720px; }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E11D48; box-shadow: 0 0 0 0 rgba(225, 29, 72, .5); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); } }
.events-ph, .sc-empty { margin: 0; padding: 18px; width: 100%; border: 2px dashed var(--st); border-radius: 12px; background: var(--st-tint); color: var(--ink-2); font-size: 14px; }

/* Live scores: compact rows grouped into sport sub-categories, separated by thin rules */
.scores-strip .strip-row { gap: 0; max-height: 520px; }
.sc-group { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.sc-group:first-child { border-top: 0; padding-top: 0; }
.sc-group-head { margin: 0 0 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 800 12px var(--body); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); }
.sc-group-live { color: var(--f-breaking); font-weight: 800; }
.sc-group-live::before { content: "●"; margin-right: 4px; animation: flash 1.1s ease-in-out infinite; }
.sc-group-count { color: var(--muted); font-weight: 700; }
.sc-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px 4px; border-radius: 6px; text-decoration: none; border-bottom: 1px solid var(--line); }
.sc-group .sc-row:last-of-type { border-bottom: 0; }
.sc-row:hover { background: var(--hover); }
.sc-row.sc-live { background: var(--live-tint); }
.sc-state { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.sc-state.sc-in { color: var(--f-breaking); }
.sc-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-team { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.sc-team.sc-win, .sc-live .sc-team { color: var(--ink); font-weight: 700; }
.sc-logo { width: 16px; height: 16px; object-fit: contain; }
.sc-initial { border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--ink-2); }
.sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-score { font: 800 13px var(--display); color: var(--ink); white-space: nowrap; }
.sc-event { font: 700 13px/1.3 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-board { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-row .sc-place { grid-column: 2; font-size: 11px; color: var(--muted); padding: 0; border: 0; margin-top: 1px; white-space: nowrap; overflow: hidden; }
.sc-row .sc-place span { overflow: hidden; text-overflow: ellipsis; }
.sc-row .sc-place svg { width: 11px; height: 11px; color: var(--muted); }
.sc-group-sub { font-size: 11px; color: var(--muted); }
.sc-more { display: block; width: 100%; margin-top: 2px; min-height: 32px; border: 0; background: none; color: var(--f-breaking); font-size: 12px; font-weight: 700; text-align: left; padding: 0 4px; }
.sc-more:hover { text-decoration: underline; }
.scores-strip .strip-chips button { min-height: 32px; padding: 0 12px; font-size: 12px; }

/* Most noteworthy */
.noteworthy { --st: var(--f-noteworthy); --st-bg: var(--c-noteworthy); --st-tint: var(--t-noteworthy); }
.nw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nw-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.nw-item:first-child { border-top: 0; padding-top: 2px; }
.nw-rank { font: 800 20px/1.1 var(--display); color: var(--f-noteworthy); text-align: center; }
.nw-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nw-title { font-weight: 700; font-size: 14px; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-title:hover { text-decoration: underline; }
.nw-meta { font-size: 12px; color: var(--muted); }
.nw-cov { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--t-noteworthy); color: var(--f-noteworthy); font-weight: 800; }
.nw-sources { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-empty { font-size: 13px; color: var(--muted); padding: 6px 0; list-style: none; }
.nw-panel .nw-updated { margin: -6px 0 8px; }
.home-side .nw-updated { margin: -4px 0 0; }

.ev-place { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.ev-place svg { flex: none; margin-top: 1px; color: var(--evc-fg, var(--f-technology)); }

/* Tech event cards */
[data-ev] { --evc: var(--c-technology); --evc-fg: var(--f-technology); --evt: var(--t-technology); }
.ev-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--evt); }
.ev-date { flex: none; width: 56px; border-radius: 10px; background: var(--card); display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-top: 4px solid var(--evc); }
.ev-dow, .ev-mon { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--evc-fg); }
.ev-day { font: 800 22px/1.1 var(--display); color: var(--ink); }
.ev-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ev-tag { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--evc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-title { font-size: 14px; font-weight: 700; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-title:hover { text-decoration: underline; }
.ev-meta { font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* Add to calendar menu */
.cal { position: relative; }
.cal-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--evc-fg); background: var(--field); color: var(--evc-fg); font-size: 13px; font-weight: 700; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cal-btn::-webkit-details-marker { display: none; }
.cal-btn::marker { content: ""; }
.cal-btn:hover, .cal[open] .cal-btn { background: var(--evc); border-color: var(--evc); color: #fff; }
.cal-menu { margin-top: 6px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; min-width: 200px; }
.cal-menu a, .cal-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; background: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.cal-menu a + a, .cal-menu a + button { border-top: 1px solid var(--line); }
.cal-menu a:hover, .cal-menu button:hover { background: var(--evt); }

/* ---------- Tech events page ---------- */
.ev-page { gap: 18px; }
.ev-filters { display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.ev-filter-label { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ev-topics { flex-wrap: wrap; max-height: 128px; overflow-y: auto; }
.ev-filter-row button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 4px; }
.ev-search { flex: 1 1 280px; }
.ev-search input { width: 100%; max-width: 460px; height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 16px; font-size: 16px; background: var(--field); }
.ev-day-group { margin-bottom: 18px; }
.ev-day-head { position: -webkit-sticky; position: sticky; top: var(--sticky-top, 150px); z-index: 5; margin: 0 0 8px; padding: 8px 12px; background: var(--ground); font: 800 20px var(--display); border-bottom: 2px solid var(--accent-fg); }
.ev-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: start; background: var(--card); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.ev-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-row-title { font: 700 17px/1.3 var(--display); text-decoration: none; }
.ev-row-title:hover { text-decoration: underline; }
.ev-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--ink-2); }
.ev-when { font-weight: 700; color: var(--ink); }
.ev-pill { padding: 1px 9px; border-radius: 999px; background: var(--evc); color: #fff; font-weight: 700; font-size: 12px; }
.ev-topic { padding: 1px 9px; border-radius: 999px; background: var(--evt); color: var(--evc-fg); font-weight: 700; font-size: 12px; }
.ev-in { font-weight: 700; color: var(--f-local); }
.ev-cfp { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--f-finance); }
.ev-src { font-size: 12px; color: var(--muted); }
.ev-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ev-row-side .cal-menu { position: absolute; right: 0; z-index: 10; }
.ev-rel { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ---------- Finance: Watch now, My Portfolio, Research tools ---------- */
.cat-tools { display: flex; flex-direction: column; gap: 24px; }
.fin-panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--c-finance); min-width: 0; }
.fin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fin-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 22px var(--display); }
.fin-panel .chips button { border: 1px solid var(--line-strong); color: var(--ink); background: var(--field); min-height: 36px; font-size: 13px; }
.fin-panel .chips button[aria-pressed="true"] { background: var(--c-finance); border-color: var(--c-finance); color: #fff; }
.fin-up { color: var(--up-fg); }
.fin-down { color: var(--down-fg); }

/* live video (16:9; padding fallback for browsers without aspect-ratio) */
.lv-stage { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
@supports (aspect-ratio: 16 / 9) { .lv-stage { padding-top: 0; aspect-ratio: 16 / 9; } }
.lv-stage > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.lv-skel { border-radius: 0; }
.lv-poster { padding: 0; background: #000; cursor: pointer; display: block; }
.lv-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.lv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.lv-poster:hover .lv-play svg circle { fill: #E11D48; }
.lv-badge { position: absolute; left: 12px; top: 12px; background: #E11D48; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 6px; letter-spacing: .5px; }
.lv-off { color: #E2E8F0; display: grid; place-items: center; text-align: center; padding: 24px; margin: 0; }
.lv-caption { margin: 0; }
.lv-caption a { color: var(--f-finance); font-weight: 700; }

/* symbol search */
.sym-search { position: relative; flex: 1 1 260px; min-width: 0; }
.sym-search input { width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 16px; font-size: 16px; background: var(--field); }
.sym-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); max-height: 300px; overflow-y: auto; }
.sym-list button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; }
.sym-list button:hover, .sym-list button:focus-visible { background: var(--hover); }
.sym-list em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.sym-note { padding: 10px; font-size: 13px; color: var(--muted); }

/* portfolio */
.pf-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-add input[type="number"] { width: 150px; height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 14px; font-size: 16px; background: var(--field); }
.pf-picked { flex: 1 1 100%; font-size: 13px; font-weight: 700; color: var(--ink-2); order: 5; }
.pf-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-quick button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field); font-size: 12px; font-weight: 700; }
.pf-quick button:hover { border-color: var(--f-finance); color: var(--f-finance); }
.pf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; }
.pf table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.pf th, .pf td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pf thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--card-2); }
.pf tbody th { text-align: left; }
.pf thead th:first-child { text-align: left; }
.pf tbody tr:last-child th, .pf tbody tr:last-child td { border-bottom: 0; }
.pf-sym { display: block; font-weight: 800; }
.pf-name { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 500; color: var(--muted); }
.pf-remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--field); font-size: 18px; line-height: 1; }
.pf-remove:hover { border-color: var(--down-fg); color: var(--down-fg); }
.pf-totals { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-total { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--t-finance); font-size: 14px; }
.pf-total strong { font: 800 18px var(--display); }
.pf-empty { margin: 0; padding: 16px; border: 2px dashed var(--line-strong); border-radius: 12px; color: var(--ink-2); font-size: 14px; }

/* research tools */
.rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.rt-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rt-card[data-tool="lookup"] { grid-column: 1 / -1; }
.rt-card h3 { margin: 0; font: 800 17px var(--display); }
.rt-card form { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 90px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rt-field input, .rt-field select { height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; font-size: 16px; background: var(--field); color: var(--ink); width: 100%; }
.rt-result { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.45; }
.rt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.rt-name { font: 800 18px var(--display); }
.rt-price strong { font: 800 22px var(--display); }
.rt-chart { width: 100%; height: 160px; display: block; }
.rt-chart .rt-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rt-chart .rt-area { fill: currentColor; opacity: .12; }
.rt-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.rt-stats div { background: var(--card-2); border-radius: 10px; padding: 8px 10px; }
.rt-stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.rt-stats dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.rt-ranges button { min-height: 32px !important; padding: 0 12px; }
.rt-card .btn-outline { align-self: flex-start; --accent-fg: var(--f-finance); }

/* ---------- Home: category desks ---------- */
.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.desk { background: var(--tint); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.desk-head { background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.desk-head h3 { margin: 0; font: 800 20px var(--display); }
.desk-head a { color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; min-height: 32px; display: flex; align-items: center; }
.desk-head a:hover { text-decoration: underline; }
.desk-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.desk-subs a { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--accent-fg); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.desk-subs a:hover { text-decoration: underline; }
.desk-feature { display: block; margin: 16px 18px 4px; text-decoration: none; }
.desk-feature .thumb { height: 170px; border-radius: 12px; }
.desk-feature strong { display: block; margin-top: 10px; font: 700 17px/1.3 var(--display); }
.desk-feature:hover strong { text-decoration: underline; }
.desk ul { list-style: none; margin: 0; padding: 4px 18px 16px; }
.desk li a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.desk li:last-child a { border-bottom: 0; }
.desk li a:hover { color: var(--accent-fg); }
.desk li .meta { display: block; font-weight: 500; margin-top: 2px; }

/* ---------- Humour + cartoon ---------- */
.lighter { display: flex; flex-wrap: wrap; gap: 20px; }
.fun { flex: 1 1 320px; min-width: 0; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; border: 2px dashed var(--accent-fg); background: var(--tint); }
.fun h2 { margin: 0; font: 800 26px var(--display); }
.fun p { margin: 0; font-size: 17px; line-height: 1.5; }
.fun .btn { align-self: flex-start; }
.fun.cartoon { --accent: var(--c-cartoon); --accent-fg: var(--f-cartoon); --tint: var(--t-cartoon); }
.cartoon-frame { min-height: 200px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 12px; color: #5B21B6; text-align: center; }
.cartoon-frame img { max-height: 360px; width: auto; object-fit: contain; }

/* ---------- Category page ---------- */
.cat-hero { background: var(--accent); color: #fff; }
.cat-hero .wrap { padding-top: 40px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 14px; }
.crumbs { font-size: 13px; font-weight: 600; }
.crumbs a { color: #fff; }
.cat-hero h1 { margin: 0; font: 800 clamp(36px, 6vw, 68px)/1 var(--display); letter-spacing: -1px; }
.cat-hero p { margin: 0; font-size: 17px; max-width: 680px; }
.cat-refresh { font-size: 13px; font-weight: 600; opacity: .9; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .chips a { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.chips button[aria-pressed="true"], .chips a[aria-current="page"] { background: #fff; color: var(--c-all); }
.sub-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.sub-chips::-webkit-scrollbar { display: none; }
.sub-chips a { flex: none; min-height: 36px; font-size: 13px; border-width: 1px; }
.cat-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cat-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cat-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.feature { display: flex; flex-wrap: wrap; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; }
.feature .thumb { flex: 1 1 360px; min-height: 260px; }
.feature-body { flex: 1 1 320px; padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.feature h2 { margin: 0; font: 800 30px/1.12 var(--display); }
.feature:hover h2 { text-decoration: underline; }
.feature p { margin: 0; color: var(--ink-2); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease; }
.card:hover { transform: translateY(-2px); }
.card .thumb { height: 160px; }
.card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.card-title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.card:hover .card-title { text-decoration: underline; }
.card-summary { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.panel { background: var(--card); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.panel h3 { margin: 0 0 12px; font: 800 20px var(--display); }
.panel.tinted { background: var(--tint); box-shadow: none; }
.ranked { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: r; }
.ranked li { display: flex; gap: 12px; align-items: flex-start; counter-increment: r; }
.ranked li::before { content: counter(r); font: 800 26px/1 var(--display); color: var(--accent-fg); min-width: 22px; }
.ranked a { font-weight: 600; font-size: 14px; text-decoration: none; }
.ranked a:hover { text-decoration: underline; }
.ranked a .meta { display: block; margin-top: 2px; font-weight: 500; }
.source-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chips span { padding: 6px 10px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.source-chips span.down { opacity: .55; text-decoration: line-through; }
.load-more { align-self: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #CBD5E1; padding-bottom: env(safe-area-inset-bottom); }
.footer-top { padding-top: 40px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.footer-top .brand-name { color: #fff; font-size: 24px; }
.footer-top .brand-name span { color: #FB7185; }
.footer-top p { max-width: 440px; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; list-style: none; margin: 0; padding: 0; max-width: 560px; }
.footer-links a { color: #E2E8F0; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.footer-links a:hover { text-decoration: underline; }
.copyright { border-top: 1px solid var(--night-line); text-align: center; padding: 16px 24px; font-size: 13px; }

/* Shown by js/legacy.js on browsers without ES module support */
.legacy-note { background: #FEF3C7; color: #78350F; padding: 12px 16px; text-align: center; font-size: 14px; }

/* ---------- Responsive ---------- */
/* Tablet / small laptop: the live column moves under the top stories; its two panels sit side by side. */
@media (max-width: 1180px) {
  main.home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "desks" "lighter"; }
  .home-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }
  .strip-row, .events .strip-row { max-height: 560px; }
}
@media (max-width: 960px) {
  .today { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .brand-name { font-size: 24px; }
  .tools { gap: 8px; }
  .region-toggle button { padding: 0 10px; }
  .search input { width: 96px; }
  .wx-place { display: none; }
  .weather-chip { padding: 0 12px 0 8px; }
  .weather-panel { position: fixed; left: 16px; right: 16px; top: 120px; width: auto; }
  .today { display: none; }
  .flasher-badge { margin-left: 16px; }
  .lead-body { padding: 18px; }
  .strip-row, .events .strip-row { max-height: 70vh; }
  .ev-row { grid-template-columns: 56px minmax(0, 1fr); }
  .ev-row-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .ev-row-side .cal-menu { right: auto; left: 0; }
  .ev-day-head { top: var(--sticky-top, 90px); font-size: 17px; }
  .mega-grid a { min-height: 44px; }
}
/* Very small phones (320–360px) */
@media (max-width: 360px) {
  .brand-name { font-size: 21px; }
  .brand-mark { width: 36px; height: 36px; }
  .search input { width: 72px; }
}
/* Touch devices: no hover-lift on cards */
@media (hover: none) {
  .card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
  .flasher-badge, .skeleton, .live-dot, .sc-state.sc-in::before, .weather:not(.ready) .wx-icon { animation: none; }
  .card, .submenu-toggle svg { transition: none; }
}

@media print {
  .site-header, .flasher, .home-side, .lighter, .site-footer, .load-more, .cal, .chips { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .lead, .mini, .desk, .panel { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Sports page: one narrow column per sport ---------- */
.sp-hero .wrap { padding-bottom: 22px; }
.sp-status { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; }
.sp-status .live-dot { display: inline-block; vertical-align: middle; margin-right: 6px; background: #fff; box-shadow: none; }
.sp-jump { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: 14px; padding-bottom: 4px; }
.sp-jump::-webkit-scrollbar { display: none; }
.sp-jump a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; border-left: 4px solid var(--sp); }
.sp-jump a:hover { background: var(--hover); }
.sp-jump-live { color: var(--f-breaking); margin-left: 2px; }
main.sp-page { padding-top: 16px; gap: 32px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; align-items: start; }
.sp-col { --sp: #334155; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--sticky-top, 150px) + 12px); }
.sp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sp); color: #fff; }
.sp-head h2 { margin: 0; flex: 1; font: 800 18px var(--display); }
.sp-icon { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18); align-items: center; justify-content: center; }
.sp-badge { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.sp-badge:empty { display: none; }
.sp-badge.on { background: #E11D48; }
.sp-sec { padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.sp-sec:first-of-type { border-top: 0; }
.sp-sec-title { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font: 800 11px var(--body); letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.sp-live-sec .sp-sec-title { color: var(--f-breaking); }
.sp-live-sec .live-dot { width: 8px; height: 8px; }
.sp-live { max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
.sp-live .sc-row { padding-left: 2px; padding-right: 2px; }
.sp-skel { height: 64px; }
.sp-sub { margin: 6px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.sp-empty { margin: 4px 0; font-size: 13px; color: var(--muted); list-style: none; }
.sp-up, .sp-leagues { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
.sp-leagues { max-height: 170px; }
.sp-day { margin-top: 6px; padding: 2px 0; font-size: 11px; font-weight: 800; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.sp-day:first-child { margin-top: 0; }
.sp-fix { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.sp-fix:last-child { border-bottom: 0; }
.sp-time { font-size: 12px; font-weight: 700; color: var(--sp); filter: saturate(1.2); }
:root[data-theme="dark"] .sp-time { color: var(--ink-2); }
.sp-fix-body { display: flex; flex-direction: column; min-width: 0; }
.sp-fix-title { font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-fix-title:hover { text-decoration: underline; }
.sp-fix-meta, .sp-lg-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.sp-lg:last-child { border-bottom: 0; }
.sp-lg.idle { opacity: .65; }
.sp-lg-name { font-size: 13px; font-weight: 700; text-decoration: none; }
.sp-lg-name:hover { text-decoration: underline; }
.sp-lg-live { font-size: 10px; font-weight: 800; color: #fff; background: #E11D48; padding: 1px 6px; border-radius: 999px; }
.sp-lg-meta { flex-basis: 100%; }
@media (max-width: 720px) {
  .sp-live { max-height: 300px; }
  .sp-up { max-height: 220px; }
}

/* ---------- Entertainment: Top 10 + Coming soon columns ---------- */
.ent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: start; }
.ent-panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--c-movies); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ent-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ent-head h2 { margin: 0; font: 800 22px var(--display); }
.ent-panel .chips { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ent-panel .chips::-webkit-scrollbar { display: none; }
.ent-panel .chips button { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); }
.ent-panel .chips button[aria-pressed="true"] { background: var(--c-movies); border-color: var(--c-movies); color: #fff; }
.ent-list, .ent-soon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; }
.ent-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.ent-row:last-child { border-bottom: 0; }
.ent-rank { flex: none; width: 26px; font: 800 20px var(--display); color: var(--f-movies); text-align: center; }
.ent-poster { flex: none; width: 40px; height: 60px; border-radius: 6px; object-fit: cover; background: var(--t-movies); }
.ent-body { display: flex; flex-direction: column; min-width: 0; }
.ent-title { font-weight: 700; font-size: 14px; line-height: 1.3; text-decoration: none; }
.ent-title:hover { text-decoration: underline; }
.ent-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-day { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: var(--card); padding: 8px 0 4px; font-size: 12px; color: var(--ink-2); border-bottom: 2px solid var(--f-movies); }
.ent-film { display: flex; flex-direction: column; padding: 7px 2px; border-bottom: 1px dashed var(--line); }
.ent-tag { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--t-movies); color: var(--f-movies); font-weight: 700; font-size: 11px; }
.ent-source { margin: 0; }

/* Credited stock picture on stories without one */
.thumb .img-credit { position: absolute; right: 6px; bottom: 6px; z-index: 1; max-width: calc(100% - 12px); padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }