/* newsapp — the day's stories, and every headline as it lands.
 *
 * THE STAGE (newsapp-v10, ~/claude/IOS.md §25 — Music's recipe, confirmed on
 * the phone): the document never scrolls under a finger. #page scrolls inside a
 * screen-tall #stage and the DOCK (the three views, Search, Settings, Back) is
 * its sibling, absolute at the bottom, so every control is under the thumb and a
 * tap on it is never eaten by a list still coasting after a flick. Nothing is
 * position: fixed (a fixed layer is clipped under the status bar). Every
 * screen's top inset goes through --top once (§1). Light is the base; dark is the media
 * query. The tokens are the platform's (/login/ui.css, via busapp), copied so
 * the shell is whole offline. Reading text (a summary, an article) is set in
 * the system's serif — New York on Apple devices — at a reading size.
 */

:root {
  --bg: #f2f2f7; --panel: #ffffff; --panel-2: #f6f6f9;
  --line: rgba(60, 60, 67, .16); --ink: #000000; --ink-2: #3c3c43;
  --dim: #8a8a8e; --dim-2: #b0b0b6; --pill: #efeff0;
  --good: #1a9e4b; --warn: #b8730a; --bad: #e5322b; --link: #0d6efd;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --r-card: 20px; --r-mid: 13px; --r-tile: 10px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-round: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Charter, Georgia, serif;
  --blue: #0d6efd;                     /* the old news.jjjp.ca icon's blue — the brand */
  --star: #d99400;                     /* a starred feed (newsapp-v20) */
  --glass-t: 20px;
  --sb: 0px;                           /* installed: the status bar's height (IOS.md §25) */
  --top: calc(env(safe-area-inset-top, 0px) + var(--sb) + var(--glass-t));
  --dock-h: 0px; --kb: 0px;            /* set by app.js: the dock's height; what the keyboard covers */
  --seg-on: var(--panel);
  --bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}
/* Dark: the system's, unless the reader chose Light; or the reader's choice
   (theme.js stamps data-theme; Settings → Reading → Appearance). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e;
    --line: rgba(84, 84, 88, .48); --ink: #ffffff; --ink-2: #d7d7db;
    --dim: #98989f; --dim-2: #6c6c70; --pill: #2c2c2e;
    --good: #30d158; --warn: #ffd60a; --bad: #ff453a; --link: #4d94ff; --shadow: none;
    --seg-on: #48484a; --star: #ffc93d;
  }
}
:root[data-theme="dark"] {
  --star: #ffc93d;
  --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e;
  --line: rgba(84, 84, 88, .48); --ink: #ffffff; --ink-2: #d7d7db;
  --dim: #98989f; --dim-2: #6c6c70; --pill: #2c2c2e;
  --good: #30d158; --warn: #ffd60a; --bad: #ff453a; --link: #4d94ff; --shadow: none;
  --seg-on: #48484a;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ── DISPLAY (Settings → Display; set before paint by index.html's inline
   script, from localStorage `newsapp:display`): the reading text's size, font
   and spacing — summaries, articles, headlines. ─────────────────────────── */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --rs: 1; --read-font: var(--serif); --read-lh: 1.6; }
:root[data-size="xs"] { --rs: .88; } :root[data-size="s"] { --rs: .94; }
:root[data-size="l"] { --rs: 1.12; } :root[data-size="xl"] { --rs: 1.26; }
:root[data-font="sans"] { --read-font: var(--font); }
:root[data-font="rounded"] { --read-font: var(--font-round); }
:root[data-font="legible"] { --read-font: "Atkinson Hyperlegible", var(--font); }
:root[data-spacing="tight"] { --read-lh: 1.42; } :root[data-spacing="loose"] { --read-lh: 1.82; }
:root[data-pictures="off"] .body img, :root[data-pictures="off"] .lede-img, :root[data-pictures="off"] .body figure { display: none !important; }

* { box-sizing: border-box; }
/* THE STAGE. Installed, the body is 100lvh (100dvh and 100% are a status bar
   short) and app.js holds the document scrolled by that status bar (seat()), so
   the stage's top is the screen's top and the page runs behind the clock and
   to the bottom edge. In a browser tab the body is the visible area. The root's
   colour tints iOS's status bar, so it is the page's own. */
html { overflow: hidden; overscroll-behavior: none; background: var(--bg); }
body { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
@media (display-mode: standalone) {
  :root { --sb: calc(100lvh - 100dvh); }
  body { height: 100vh; height: 100lvh; height: var(--stage-h, 100lvh); }   /* --stage-h: app.js seat(), newsapp-v19 */
}
#stage { position: absolute; inset: 0; }
#page { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.app { max-width: 680px; margin: 0 auto; padding: 0 16px calc(28px + max(var(--dock-h), var(--kb))); }
.screen { display: none; padding-top: calc(6px + var(--top)); }
.screen.on { display: block; }

/* ── the bar at the top of every screen ───────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0 10px; }
.bar h1 { font: 700 22px/1.2 var(--font-round); letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar h1.brand { font-size: 30px; display: flex; align-items: center; gap: 9px; }
.bar h1.brand .mark { flex: none; color: var(--blue); }
.bar .bar-title { flex: 1; min-width: 0; }
.bar-outlet { font-size: 15px; font-weight: 600; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { width: 40px; height: 40px; margin-left: -10px; font-size: 34px; line-height: 1; color: var(--link); display: grid; place-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); box-shadow: var(--shadow); font-size: 22px; display: grid; place-items: center; color: var(--ink-2); }

/* ── Stories · Latest ─────────────────────────────────────────────────────── */
.seg { display: flex; padding: 3px; border-radius: 11px; background: var(--pill); margin: 0 0 16px; }
.seg button { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── a story ──────────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 10px; }
.story { background: var(--panel); border-radius: var(--r-mid); box-shadow: var(--shadow); scroll-margin-top: var(--top); }
.story-head { display: block; width: 100%; text-align: left; padding: 14px 16px 13px; }
.story .kicker { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--dim); margin-bottom: 4px; }
.story .badge { font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.story h2 { font: 650 calc(18px * var(--rs))/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.story .line { display: block; }
.story .count, .item-head .f { display: none; }
.story.read:not(.open) h2 { color: var(--ink-2); font-weight: 560; }
.story-body { padding: 0 16px 14px; }
.summary { font: calc(17px * var(--rs))/var(--read-lh) var(--read-font); color: var(--ink); margin: 0 0 12px; }
.summary b { font-weight: 700; }
.summary.pending { font: 14px/1.4 var(--font); color: var(--dim); }
.sources { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--line); }
/* one line a report: icon · outlet + headline (ellipsis) · age */
.source { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 7px 0; }
.source .ico { width: 16px; height: 16px; border-radius: 3px; }
.source .t { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(14.5px * var(--rs)); line-height: 1.35; color: var(--ink); }
.source .t .o { font-weight: 650; }
.source .m { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.others { font-size: 12.5px; color: var(--dim); padding: 4px 0 0 24px; }
.ico { width: 18px; height: 18px; border-radius: 4px; flex: none; background: var(--pill); object-fit: contain; }

/* ── Latest: the reader ───────────────────────────────────────────────────── */
.rows-list { background: var(--panel); border-radius: var(--r-mid); box-shadow: var(--shadow); padding: 0 14px; }
.rows-list:empty { display: none; }
.item { border-top: 1px solid var(--line); scroll-margin-top: var(--top); }
.item:first-child { border-top: 0; }
.item-head { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; width: 100%; text-align: left; padding: 11px 0; }
.item-head .t { font-size: calc(15.5px * var(--rs)); font-weight: 600; line-height: 1.33; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item.read .item-head .t { font-weight: 450; color: var(--ink-2); }
.item-head .m { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.item-head .w { display: block; font-size: calc(13.5px * var(--rs)); color: var(--blue); margin-top: 2px; line-height: 1.3; }
.item-head > span:last-child, .source > span:last-child, .item-head > span:nth-child(2), .source > .t { min-width: 0; }   /* a grid item may shrink below its text, so an ellipsis can happen */
.item.open .item-head .t { -webkit-line-clamp: unset; display: block; }
.item-body { padding: 0 0 14px 28px; }
#latest .day:first-child { margin-top: 2px; }
.day { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; margin: 18px 2px 8px; }
.filter { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 6px 6px 6px 12px; background: var(--panel); border-radius: 999px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.filter-k { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-x { width: 26px; height: 26px; border-radius: 50%; background: var(--pill); color: var(--dim); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.btn { display: block; width: 100%; padding: 13px 14px; border-radius: var(--r-mid); background: var(--panel); box-shadow: var(--shadow); font-weight: 600; font-size: 16px; color: var(--link); min-height: 48px; text-align: center; }
.btn.more { margin-top: 12px; }

/* ── the article's own words (Latest's open row and the article screen) ──── */
.body { font: calc(17px * var(--rs))/var(--read-lh) var(--read-font); color: var(--ink); overflow-wrap: break-word; }
.body p, .body ul, .body ol, .body blockquote, .body figure, .body pre, .body table, .body h2, .body h3, .body h4, .body h5 { margin: 0 0 .85em; }
.body h2, .body h3, .body h4, .body h5 { font: 650 18px/1.3 var(--font); }
.body img { display: block; max-width: 100%; height: auto; border-radius: var(--r-tile); margin: 4px 0; }
.body figure { margin-left: 0; margin-right: 0; }
.body figcaption { font: 13px/1.4 var(--font); color: var(--dim); }
.body .img-title { font: italic calc(15px * var(--rs))/1.45 var(--font); color: var(--ink-2); margin: 2px 0 .85em; }
:root[data-pictures="off"] .body .img-title { display: none; }
.body blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--line); color: var(--ink-2); }
.body pre { white-space: pre-wrap; font-size: 14px; background: var(--panel-2); padding: 10px; border-radius: 8px; }
.body table { display: block; overflow-x: auto; border-collapse: collapse; font: 14px/1.4 var(--font); }
.body td, .body th { border: 1px solid var(--line); padding: 4px 6px; }
.body a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); }
.body .lede-img { margin: 0 0 12px; }
.body.thin { color: var(--ink-2); }
.when { font-size: 13px; color: var(--dim); margin: 0 0 10px; }
.acts { display: flex; gap: 8px; margin-top: 12px; }
.act { flex: 1; padding: 10px 12px; border-radius: 11px; background: var(--pill); font-size: 15px; font-weight: 600; color: var(--ink); text-align: center; }
.act.primary { background: var(--blue); color: #fff; }
.morefrom { display: block; margin: 10px 0 0 auto; font-size: 14px; font-weight: 600; color: var(--link); padding: 4px 0; }
.reader { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px 18px 18px; }
.reader h1 { font: 700 calc(24px * var(--rs))/1.25 var(--font); letter-spacing: -0.015em; margin: 0 0 8px; }

/* ── settings rows (the house's shape) ─────────────────────────────────────── */
.sec-row { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 8px; }
.sec-row h2, .sec { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
.sec { margin: 22px 2px 8px; }
.sec.first { margin-top: 4px; }
.feeds-head { margin-top: 22px; }
.tiny { font-size: 14px; font-weight: 600; color: var(--link); padding: 6px 2px; }
.card { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 4px 16px; margin-bottom: 12px; }
.feed-sec { font-size: 12.5px; color: var(--dim); font-weight: 600; padding: 12px 0 2px; }
.rows .row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 0; text-align: left; color: var(--ink); }
.rows .row + .row, .rows .row-note + .row { border-top: 1px solid var(--line); }
.row-k { flex: 1; font-size: 16px; min-width: 0; }
.row-k small { display: block; font-size: 12.5px; color: var(--dim); }
.row-v { color: var(--dim); font-size: 15px; }
.chev { color: var(--dim-2); font-size: 22px; line-height: 1; }
.row-note { font-size: 13px; color: var(--dim); padding: 0 0 12px; }
.row-note.bad { color: var(--bad); }
.acct-who { padding-top: 12px; }
.rows .row.danger .row-k { color: var(--bad); }
.feed-row .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.feed-row .open .row-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .warn { color: var(--warn); font-size: 13px; }
.remove { font-size: 14px; font-weight: 600; color: var(--bad); padding: 6px 2px; }
.add-form input { flex: 1; min-width: 0; font: 16px var(--font); color: var(--ink); background: var(--bg); border: 0; border-radius: 10px; padding: 10px 12px; outline: none; -webkit-appearance: none; }
.add-form input:focus { box-shadow: 0 0 0 2px var(--link); }
/* The house's switch (busapp): a real checkbox with iOS's `switch` attribute,
   native and with its own tick; a plain checkbox where `switch` is unknown. */
.switch { width: 22px; height: 22px; accent-color: var(--good); flex: none; margin: 0; touch-action: pan-y; }
.switch[switch] { width: auto; height: auto; }

.technical { padding: 0 16px; }
.technical summary { list-style: none; display: flex; align-items: center; min-height: 48px; cursor: pointer; }
.technical summary::-webkit-details-marker { display: none; }
.technical[open] summary .chev { transform: rotate(90deg); }
.kv { margin: 0 0 10px; font-size: 14px; }
.kv div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.fineprint { text-align: center; font-size: 12.5px; color: var(--dim); margin-top: 18px; }
.fineprint + .fineprint { margin-top: 6px; }
.update-note { color: var(--ink-2); }
/* The "myjp.ca apps" row (mealapp's lockup): the platform's mark, ".ca" in the app's blue. */
.lockrow { font-weight: 800; letter-spacing: -.02em; }
.lockrow .lc { color: var(--link); }

.empty { color: var(--dim); text-align: center; padding: 28px 12px; font-size: 15px; }
.note { color: var(--dim); font-size: 12.5px; text-align: center; margin: 16px 0 0; min-height: 18px; }
.banner { align-self: center; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.banner button { color: var(--bg); font-size: 20px; width: 28px; height: 28px; opacity: .7; }

/* ── "New stories": how often ──────────────────────────────────────────────── */
.every-row { padding-top: 0 !important; }
.seg.mini { flex: 1; margin: 0; }
.seg.mini button { font-size: 13.5px; padding: 6px 4px; }

/* ── COMPACT (Settings → Reading): jjjp.ca/reader's layout, for screening many
   headlines — one line a row on the page itself, a favicon, no cards; the
   feed's name before the headline on a wide screen (the reader's "Feed —");
   a row opens into the reader's bordered box. ─────────────────────────────── */
.compact .rows-list { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.compact .item { border-top: 0; }
.compact .item-head { grid-template-columns: 16px 1fr; gap: 8px; padding: 6px 2px; align-items: center; }
.compact .item-head .ico { width: 16px; height: 16px; border-radius: 3px; }
.compact .item-head .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(15px * var(--rs)); font-weight: 600; line-height: 1.35; }
.compact .item-head .m { display: none; }
.compact .item.open .item-head { align-items: start; }
.compact .item.open .item-head .t { white-space: normal; }
.compact .item.open .item-head .f { display: inline; color: var(--ink-2); font-weight: 500; }   /* opened: the reader's "Feed — Title"; the date is in the box */
.compact .item-body { margin: 2px 0 12px; padding: 14px; background: var(--panel); border-radius: var(--r-mid); box-shadow: var(--shadow); }
.compact .day { margin: 14px 2px 4px; }
.compact #latest .day:first-child { margin-top: 0; }
@media (min-width: 840px) { .compact .item-head .f { display: inline; color: var(--ink-2); font-weight: 500; } }
.compact .list { gap: 0; }
.compact .story { background: none; box-shadow: none; border-radius: 0; }
.compact .story-head { padding: 6px 2px; }
.compact .story .kicker { display: none; }
.compact .story .line { display: flex; align-items: center; gap: 8px; }
.compact .story h2 { flex: 1; min-width: 0; font-size: calc(15px * var(--rs)); font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact .story.read:not(.open) h2 { font-weight: 450; }
/* the outlet count sits where Latest's favicon does: a 16px tile on the left (the owner, 2026-10-14) */
.compact .story .count { display: grid; place-items: center; flex: none; min-width: 16px; height: 16px; padding: 0 2px; border-radius: 3px;
  background: var(--pill); color: var(--ink-2); font: 700 10.5px/1 var(--font-round); font-variant-numeric: tabular-nums; }
.compact .story.open .kicker { display: flex; }
.compact .story.open h2 { white-space: normal; }
.compact .story.open .line { align-items: start; }
.compact .story.open .count { margin-top: 2px; }
.compact .story-body { margin: 2px 0 12px; padding: 14px; background: var(--panel); border-radius: var(--r-mid); box-shadow: var(--shadow); }

/* ── For you, the story's Share, the feeds by outlet (2026-10-05, v4) ──────── */
.lede { font-size: 13.5px; color: var(--dim); margin: -4px 2px 12px; }
.lede a { font-weight: 600; }
.story-acts { display: flex; gap: 8px; margin-top: 12px; }   /* the article's .acts: two equal buttons, a gap between */
.story-acts .act { flex: 1; padding: 10px 12px; }
.feed-group { padding: 0 16px; }
.feed-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; }
.feed-group > summary::-webkit-details-marker { display: none; }
.feed-group > summary .row-k { font-weight: 600; }
.feed-group > summary .row-v { font-size: 14px; }
.feed-group[open] > summary .chev { transform: rotate(90deg); }
.feed-group[open] > summary { border-bottom: 1px solid var(--line); }
.feed-group .feed-row .open .row-k { font-size: 15.5px; }
.rows .feed-group .row + .row { border-top: 1px solid var(--line); }

/* ── v5: search, follows, history, mutes, offline, display (2026-10-05) ─────── */
.bar .icon-btn + .icon-btn { margin-left: -2px; }
.status { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-round); color: var(--dim); background: var(--panel); padding: 6px 11px 6px 9px; border: 0; border-radius: 999px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.status.warn .dot { background: var(--warn); }
.search-form { flex: 1; }
.search-form input { width: 100%; font: 17px var(--font); color: var(--ink); background: var(--panel); border: 0; border-radius: var(--r-mid); padding: 11px 14px; box-shadow: var(--shadow); outline: none; -webkit-appearance: none; }
.search-form input:focus { box-shadow: 0 0 0 2px var(--link); }
#search-stories:not(:empty) { margin-bottom: 12px; }
.page-title { font: 700 calc(24px * var(--rs))/1.25 var(--font); letter-spacing: -0.015em; margin: 0 2px 6px; }
.danger-text { color: var(--bad); }
.btn.danger-btn { color: var(--bad); margin-top: 14px; }
.row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.row.stack .seg.mini { flex: none; }
.seg .aa { font-family: var(--serif); font-weight: 600; }
.seg.fonts .f-serif { font-family: var(--serif); } .seg.fonts .f-sans { font-family: var(--font); }
.seg.fonts .f-rounded { font-family: var(--font-round); } .seg.fonts .f-legible { font-family: "Atkinson Hyperlegible", var(--font); }
.preview-card { padding: 16px 18px; }
.preview-card .summary { margin: 0; }
.row-k small { font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--pill); font-size: 15px; }
.chip button { width: 22px; height: 22px; border-radius: 50%; color: var(--dim); font-size: 16px; line-height: 1; display: grid; place-items: center; }
/* Following, at the top of Stories; the follow's timeline */
#following { margin-bottom: 18px; }
#following .day { margin-top: 0; }
.follow-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 11px 0; border-top: 1px solid var(--line); }
.follow-row:first-child { border-top: 0; }
.follow-row .t { font-weight: 600; font-size: calc(15.5px * var(--rs)); line-height: 1.33; }
.follow-row .m { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.fresh { font-size: 12px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 2px 8px; }
.item.is-fresh .item-head .t::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin: 0 6px 2px 0; }
/* For you's "Not interested", the history's rows */
.act.quiet { background: none; color: var(--dim); font-weight: 500; flex: none; padding-left: 4px; padding-right: 4px; }
.hist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.hist-row:first-child { border-top: 0; }
.hist-row .t { font-size: calc(15px * var(--rs)); line-height: 1.33; }
.hist-row .m { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.hist-row.skip .t { color: var(--dim); text-decoration: line-through; }
.hist-row button.x { width: 30px; height: 30px; border-radius: 50%; background: var(--pill); color: var(--dim); font-size: 18px; line-height: 1; display: grid; place-items: center; }
/* Summary previews under each story's headline (Display) */
.story .preview { display: none; }
:root[data-previews="on"]:not(.compact) .story:not(.open) .preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: calc(15px * var(--rs))/1.45 var(--read-font); color: var(--ink-2); margin-top: 6px; }


/* ── THE DOCK (newsapp-v10; the owner: "most if not all of the controls at the
   bottom"): one solid pill — Stories · Latest · For you · Search · Settings —
   and, on a pushed screen (an article, a follow, a page of Settings), a Back
   circle beside it. Solid, no backdrop-filter (IOS.md §24). The page's SIBLING,
   absolute at the stage's bottom (§25); the page keeps --dock-h free under its
   last row. A swipe left or right on the home moves between the three views. */
.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none; display: flex; flex-direction: column;
        padding: 8px calc(12px + env(safe-area-inset-right, 0px)) calc(6px + max(0px, var(--bottom) - 12px)) calc(12px + env(safe-area-inset-left, 0px)); }
.dock > * { pointer-events: auto; }
.dock-row { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 560px; margin: 0 auto; }
.dock-back { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--link);
             background: var(--panel); box-shadow: 0 0 0 .5px var(--line), 0 4px 18px rgba(0,0,0,.12); }
.dock-back svg { width: 24px; height: 24px; }
.tabbar { flex: 1; min-width: 0; display: flex; height: 58px; padding: 4px; border-radius: 999px; background: var(--panel);
          box-shadow: 0 0 0 .5px var(--line), 0 4px 18px rgba(0,0,0,.12); }
.tabbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
                 border-radius: 999px; color: var(--ink-2); touch-action: manipulation; }
.tabbar button svg { width: 23px; height: 23px; }
.tabbar button span { font-size: 10.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar button.on { color: var(--blue); background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar button.on { color: var(--link); } }
:root[data-theme="dark"] .tabbar button.on { color: var(--link); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar, :root:not([data-theme="light"]) .dock-back { box-shadow: 0 0 0 .5px var(--line); } }
:root[data-theme="dark"] .tabbar, :root[data-theme="dark"] .dock-back { box-shadow: 0 0 0 .5px var(--line); }

/* ── SAVED and STARRED (newsapp-v20) ─────────────────────────────────────────
   The bookmark leads an article's buttons; filled = saved. A starred feed's rows
   wear a gold star and a gold wash wherever they are, and Latest pins the unread
   ones in a gold panel at its top. */
.act.save { flex: none; width: 46px; display: grid; place-items: center; padding: 8px 0; color: var(--ink-2); }
.act.save svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.act.save.on { color: var(--blue); }
.act.save.on svg { fill: currentColor; }
.star-m { display: inline-block; width: .95em; height: .95em; margin: 0 .3em 0 0; vertical-align: -.1em; color: var(--star); }
.star-m svg, .star-i svg { width: 100%; height: 100%; display: block; }
.item.starred { background: color-mix(in srgb, var(--star) 6%, transparent); margin: 0 -16px; padding: 0 16px; }
.item.starred > .item-head { grid-template-columns: 18px 1fr auto; }
.compact .item.starred > .item-head { grid-template-columns: 16px 1fr auto; }
.item-head .star-m, .source .star-m { width: 14px; height: 14px; margin: 3px 0 0; align-self: start; }
.compact .item-head .star-m { align-self: center; margin: 0; }
.source.starred { grid-template-columns: 16px minmax(0, 1fr) auto auto; }
.source .star-m { align-self: center; margin: 0; }
.feed-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.feed-acts .morefrom { margin: 0 0 0 auto; }
.starbtn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 14px; font-weight: 600; color: var(--dim); padding: 4px 0; }
.starbtn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starbtn .star-i { flex: none; width: 17px; height: 17px; }
.starbtn .star-i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.starbtn.on { color: var(--star); }
.starbtn.on .star-i svg { fill: currentColor; }
.starrow { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--dim-2); }
.starrow .star-i { width: 20px; height: 20px; }
.starrow .star-i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.starrow.on { color: var(--star); }
.starrow.on .star-i svg { fill: currentColor; }
.stars-head { padding-top: 4px; }
.hist-open { display: block; min-width: 0; text-align: left; padding: 0; }
.hist-row .act.save { width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%; background: var(--pill); }
.hist-row .act.save svg { width: 17px; height: 17px; }
/* A summary from a starred feed (newsapp-v22): the same light wash, the star at the headline's right. */
.story.starred { background: color-mix(in srgb, var(--star) 6%, var(--panel)); }
.story.starred .line { display: flex; align-items: flex-start; gap: 8px; }
.story.starred .line h2 { flex: 1; min-width: 0; }
.story .line .star-m { flex: none; width: 14px; height: 14px; margin: 4px 0 0; }
.compact .story.starred { background: color-mix(in srgb, var(--star) 6%, transparent); }
.compact .story.starred .line { align-items: center; }
.compact .story .line .star-m { margin: 0; }
.story-acts .act.save { flex: none; }
.sum-ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; margin-top: 2px; }
.kicker-badge { font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; margin-bottom: 4px; }
/* "Summaries" is the dock's longest word: its button takes a little more of the pill, so it fits beside Back. */
.tabbar button[data-tab="stories"] { flex-grow: 1.35; }
.tabbar button span { letter-spacing: -.01em; }