/* Design tokens follow heat.sala.company: warm paper page, Inter, soft cards, blue accent. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, .10);
  --neutral: #f0efec;
  --hover: #f4f3f0;
  --green: #0ca30c;
  --red: #d03b3b;
  --blue: #2a78d6;
  --amber: #fab219;
  --brk-bg: #fdf1f0;
  --fresh: rgba(42, 120, 214, .12);
  --src-l: 40%;
  --shadow: 0 8px 28px rgba(11, 11, 11, .14), 0 1px 3px rgba(11, 11, 11, .08);
  --heat-0: #ecebe6; --heat-1: #9dcdef; --heat-2: #3f97d6; --heat-3: #1f6fb0; --heat-4: #0b4a80;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10); --neutral: #2a2a28; --hover: #222220;
    --blue: #3987e5; --red: #ff5b52; --brk-bg: #2a1716; --fresh: rgba(57, 135, 229, .18); --src-l: 68%;
    --shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --heat-0: #232321; --heat-1: #1d4766; --heat-2: #26679d; --heat-3: #3a8acb; --heat-4: #63b0ee;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10); --neutral: #2a2a28; --hover: #222220;
  --blue: #3987e5; --red: #ff5b52; --brk-bg: #2a1716; --fresh: rgba(57, 135, 229, .18); --src-l: 68%;
  --shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --heat-0: #232321; --heat-1: #1d4766; --heat-2: #26679d; --heat-3: #3a8acb; --heat-4: #63b0ee;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; zoom: var(--zoom, 1); } /* ⚙ View → Text size */

/* ---------- header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.logo {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 50% 30%, #9fe0ff 0%, #3f97d6 38%, #1f4f9a 70%, #0b1f3f 100%);
  box-shadow: 0 0 0 1px rgba(63, 151, 214, .35), 0 6px 22px rgba(42, 120, 214, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.logo span { display: block; animation: sway 6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(160, 225, 255, .8)); }
@keyframes sway { 50% { transform: rotate(-8deg) scale(1.05); } }
h1 { font-size: 22px; line-height: 1.15; margin: 0; letter-spacing: -.02em; white-space: nowrap; }
h1 .news { font-weight: 800; background: linear-gradient(90deg, #3f97d6, #1f6fb0 55%, #0b4a80); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .tld { color: var(--ink-2); font-weight: 600; }
.fresh { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--ink-2); }
.fresh b { color: var(--ink); }
.clock { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 20%, transparent); }
.dot.warn { background: var(--amber); }
.dot.bad { background: var(--red); }

/* ---------- buttons, segments, chips ---------- */
.btn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.btn:hover { background: var(--neutral); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn:focus-visible, .chip:focus-visible, .seg button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--neutral); border-radius: 8px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 600; }
.seg button .n { font-size: 12px; color: var(--muted); margin-left: 5px; font-weight: 400; }
.seg button .n:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 9px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
a.chip { text-decoration: none; }
.chip:hover { background: var(--neutral); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
select.chip { padding-right: 4px; }
.reset { font-weight: 600; color: var(--ink); }
.spacer { flex: 1; }
.count { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- toolbar ---------- */
.toolbar { position: sticky; top: 0; z-index: 10; background: var(--page); padding: 8px 0 4px; margin: -8px 0 6px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.controls + .controls { margin-top: 6px; }
.controls.sub { padding: 5px 10px; }
.cats { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.search { display: flex; align-items: center; gap: 6px; background: var(--neutral); border-radius: 8px; padding: 3px 8px; color: var(--muted); flex: 0 1 240px; min-width: 160px; }
.search input { border: 0; background: transparent; outline: none; color: var(--ink); width: 100%; font-size: 13px; padding: 2px 0; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search kbd { font: 11px Inter, sans-serif; border: 1px solid var(--axis); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.note { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; padding: 0 4px; }
.staged { display: block; margin: 8px auto 0; border: 0; border-radius: 999px; padding: 5px 14px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.error { margin-top: 6px; font-size: 12.5px; color: var(--red); background: color-mix(in oklab, var(--red) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--red) 35%, transparent); border-radius: 8px; padding: 6px 10px; }

/* ---------- cards & panels ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.panel { padding: 14px 16px; margin-bottom: 10px; font-size: 13px; }
.panel h2 { font-size: 15px; margin: 0 0 10px; }
.panel h3 { font-size: 13px; margin: 0 0 8px; color: var(--ink-2); }
.panel p { color: var(--ink-2); margin: 12px 0 0; line-height: 1.55; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.kw { display: grid; grid-template-columns: 110px 1fr 30px; gap: 8px; align-items: center; cursor: pointer; padding: 2px 0; }
.kw:hover .kw-label { color: var(--blue); }
.kw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 8px; border-radius: 4px; background: var(--heat-2); }
.num { text-align: right; color: var(--muted); font-size: 12px; }
.heat { display: grid; gap: 3px; align-items: center; }
.heat .cell { height: 14px; border-radius: 3px; }
.heat .lbl { color: var(--ink-2); padding-right: 8px; white-space: nowrap; font-size: 12px; }
.help-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 2px 0; }
.help-row kbd { font: 600 12px Inter, sans-serif; }
.src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 24px; }
.src-row { display: grid; grid-template-columns: 14px 1fr auto 34px; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.src-row .err { grid-column: 2 / -1; color: var(--muted); font-size: 12.5px; margin-top: -2px; }
.ok-c { color: var(--green); } .bad-c { color: var(--red); } .q-c { color: var(--muted); }

/* ---------- breaking (a tag on the story's own row; the feed stays strictly newest first) ---------- */
.brk-tag { display: inline-block; color: #fff; background: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }

/* ---------- feed ---------- */
.feed { overflow: hidden; }
.empty { padding: 28px 18px; color: var(--muted); text-align: center; }
.row { padding: 11px 16px 12px; border-top: 1px solid var(--grid); }
.row:first-child { border-top: 0; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--hover); box-shadow: inset 3px 0 0 var(--blue); }
.row.brk { box-shadow: inset 3px 0 0 var(--red); }
.row.fresh { animation: flash 2.5s ease-out; }
@keyframes flash { from { background: var(--fresh); } }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); margin-top: 5px; }
.meta .when { white-space: nowrap; }
.src { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: hsl(var(--h) 55% var(--src-l)); cursor: pointer; border: 0; background: none; padding: 0; font-size: 12px; }
.src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.src:hover { text-decoration: underline; }
.plat { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); background: var(--neutral); border: 1px solid var(--border); padding: 0 5px; border-radius: 999px; }
.title { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); text-decoration: none; }
.title:hover { color: var(--blue); }
.row.read .title { color: var(--ink-2); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.more { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.more:hover { background: var(--neutral); color: var(--ink); }
.more[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.vids { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vids a { font-size: 12.5px; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
.vids a:hover { color: var(--blue); }
.vids .vlab { font-size: 12.5px; color: var(--muted); align-self: center; margin-right: 2px; }
/* ✎: choose the search words */
.term-edit { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.term-edit:hover, .term-edit[aria-expanded="true"] { color: var(--ink); background: var(--neutral); }
.terms { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; padding-top: 4px; }
.term { border: 1px dashed var(--axis); background: none; border-radius: 999px; padding: 0 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.term.on { border: 1px solid var(--blue); background: color-mix(in oklab, var(--blue) 12%, var(--surface)); color: var(--ink); }
.term.on::after { content: " ✕"; font-size: 11px; color: var(--muted); }
.term:hover { color: var(--ink); }
.reset-terms { border-style: solid; }
.summary { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.related { margin-top: 8px; border-left: 2px solid var(--grid); padding-left: 12px; display: grid; gap: 6px; }
.related .r { font-size: 13.5px; line-height: 1.4; }
.related .r .src { margin-right: 6px; }
.related .r .ago { color: var(--muted); font-size: 12px; margin-right: 6px; }
.related a { text-decoration: none; }
.related a:hover { color: var(--blue); }

.media { margin-right: 6px; font-size: .95em; font-style: normal; }

/* ---------- compact view: one story per line ---------- */
.feed.compact .row.c { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 5px 14px; }
.row.c .c-time { flex: none; min-width: 40px; white-space: nowrap; font-size: 12px; color: var(--muted); }
.row.c .c-src { flex: none; width: 140px; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.row.c .c-src .src { overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
.row.c .c-src .src::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.row.c .title { flex: 1 1 0; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.row.c .title .brk-tag { font-size: 11px; padding: 0 5px; vertical-align: 1px; }
.row.c .more { flex: none; min-width: 30px; padding: 0 7px; font-size: 12.5px; }
.row.c .c-open { flex-basis: 100%; padding: 2px 0 6px 50px; }
.row.c .c-open .summary { margin-top: 2px; }

/* ---------- near me, ratings, syndication ---------- */
.place { gap: 2px; padding: 1px 4px 1px 8px; }
.place select { border: 0; background: transparent; font-size: 12.5px; color: var(--ink); cursor: pointer; max-width: 105px; }
.ring { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px 16px 6px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink); background: var(--neutral); border-top: 1px solid var(--grid); }
.ring:first-child { border-top: 0; }
.ring-n { font-size: 12px; font-weight: 400; color: var(--muted); }
.ring-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--grid); background: var(--surface); color: var(--blue); padding: 9px 16px; font-size: 13px; text-align: left; cursor: pointer; }
.ring-more:hover { background: var(--hover); }
.rate { display: inline-flex; gap: 1px; }
.rate button { border: 0; background: none; padding: 0 2px; font-size: 12px; line-height: 1; cursor: pointer; opacity: .45; filter: grayscale(1); transition: opacity .12s; }
.rate button:hover { opacity: 1; filter: none; }
.rate button.on { opacity: 1; filter: none; }
.row:hover .rate button { opacity: .75; }
.row:hover .rate button:hover, .row .rate button.on { opacity: 1; }
.via { font-size: 12.5px; color: var(--muted); border: 1px dashed var(--axis); border-radius: 999px; padding: 0 7px; white-space: nowrap; cursor: help; }
.src-row .rate button { opacity: .55; }
.src-row.rated { grid-template-columns: 20px 1fr auto; }

.foot { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }

/* ---------- slim bar & ⚙ View menu ---------- */
.mainbar { flex-wrap: nowrap; }
.mainbar .reset { padding: 3px 8px; font-size: 14px; }
.mainbar .search { flex: 0 1 200px; min-width: 120px; }
.viewmenu-wrap { position: relative; flex: none; }
#btn-view[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px)); display: grid; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.menu-sec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.menu-lab { flex-basis: 100%; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.menu-foot { border-top: 1px solid var(--grid); padding-top: 8px; }

/* ---------- headline actions: on hover (computer) or after ⋯ (phone) ---------- */
.age { white-space: nowrap; }
.acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dots { display: none; border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1; padding: 0 6px; cursor: pointer; }
.dots[aria-expanded="true"] { color: var(--ink); }
@media (hover: hover) {
  .row:not(.c) .acts { visibility: hidden; }
  .row:hover .acts, .row:focus-within .acts, .row.sel .acts, .row.acts-open .acts { visibility: visible; }
}
@media (hover: none) {
  .row:not(.c) .dots { display: inline-block; margin-left: auto; }
  .row:not(.acts-open):not(.c) > .meta .acts { display: none; }
  .row.acts-open > .meta .acts { flex-basis: 100%; padding-top: 4px; }
}

/* "Last hour / Earlier today…" in the time-ordered views */
.tdiv { padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--neutral); border-top: 1px solid var(--grid); }
.tdiv:first-child { border-top: 0; }
.tdiv + .row { border-top: 0; }

/* ---------- top stories ---------- */
.top-stories { margin-bottom: 10px; }
.ts-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 8px; }
.ts-head h2 { font-size: 15px; margin: 0; }
.ts-sub { font-size: 12px; color: var(--muted); flex: 1; }
.ts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ts-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 9px; min-height: 112px; }
.ts-card.brk { box-shadow: inset 3px 0 0 var(--red); }
.ts-tags { display: flex; gap: 6px; align-items: center; min-height: 0; }
.ts-tags:empty { display: none; }
.ts-place { font-size: 12px; color: var(--muted); }
.ts-title { font-size: 14.5px; font-weight: 700; line-height: 1.32; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ts-title:hover { color: var(--blue); }
.ts-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--muted); }
.ts-all { margin-left: auto; border: 0; background: none; color: var(--blue); font-size: 12px; cursor: pointer; padding: 0; }
.ts-all:hover { text-decoration: underline; }
.ts-show { margin: 0 2px; }

/* ---------- side panel: wide screens only ---------- */
.rail { display: none; }
@media (min-width: 1200px) {
  .wrap { max-width: 1440px; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .rail { display: grid; gap: 10px; position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow-y: auto; scrollbar-width: thin; }
}
.rail-box { padding: 12px 14px; font-size: 13px; }
.rail-box h3 { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.rail-box p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; }
.rail-terms, .rail-list { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.kw-chip:hover { background: var(--neutral); }
.kw-chip .n { color: var(--muted); font-size: 12px; }
.rail-list .src { border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.rail-fail { margin: 6px 0 0; padding-left: 0; list-style: none; color: var(--ink-2); font-size: 12.5px; }
.rail-note { font-size: 12.5px; }
.link { border: 0; background: none; padding: 0; margin-top: 8px; color: var(--blue); font-size: 12.5px; cursor: pointer; }
.link:hover { text-decoration: underline; }
.rail-box .dot { display: inline-block; vertical-align: 1px; }

/* ---------- trust markers ---------- */
.plat.wire { color: var(--blue); border-color: color-mix(in oklab, var(--blue) 40%, transparent); background: color-mix(in oklab, var(--blue) 8%, var(--surface)); }
.plat.unk { background: none; border-style: dashed; color: var(--muted); font-weight: 600; }
.pay { font-size: 11px; cursor: help; filter: grayscale(.3); }
.acts-sum { flex-basis: 100%; color: var(--ink-2); font-size: 13px; line-height: 1.5; padding-top: 4px; }
[dir="rtl"], .title[dir="auto"]:lang(ar) { text-align: start; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .wrap { padding-top: 14px; }
  .top { gap: 8px 12px; }
  .top .btn { margin-left: auto; }
  .fresh { order: 3; flex-basis: 100%; }
  .controls.sub .count { display: none; }
  .toolbar { position: static; margin: 0 0 6px; padding: 0; }
  .mainbar { flex-wrap: wrap; }
  .mainbar .cats { flex: 1 1 calc(100% - 50px); }
  .mainbar .search { flex: 1 1 60px; min-width: 0; }
  .mainbar .search kbd { display: none; }
  .menu { right: -4px; }
  .controls.sub .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .controls.sub .chips::-webkit-scrollbar { display: none; }
  .controls.sub .spacer { display: none; }
  .row { padding: 10px 14px 11px; }
  .title { font-size: 15px; }


  .src-list { grid-template-columns: 1fr; }
  .feed.compact .row.c { gap: 0 8px; padding: 6px 12px; }
  .row.c .c-time { min-width: 36px; font-size: 12.5px; }
  .row.c .c-src { width: 84px; font-size: 12.5px; }
  .row.c .c-src .plat, .row.c .title .brk-tag { display: none; } /* the red edge still marks breaking */
  .row.c .c-open { padding-left: 0; }
  /* Top stories: one swipeable row of cards instead of a grid */
  .ts-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .ts-grid::-webkit-scrollbar { display: none; }
  .ts-card { flex: 0 0 78%; scroll-snap-align: start; }
  .ts-sub { visibility: hidden; }
}
@media (min-width: 701px) and (max-width: 900px) { .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .logo span, .row.fresh { animation: none; } }