/* Khabar — a compact, text-first news reader. Sections live in a bottom tab bar (thumb zone); stories are
   two-line rows that open in place; sharing is one action among several, not the centre of the app.
   Motion is quiet and short and only shows what happened. Apple HIG: 44pt targets, 17pt inputs, safe areas,
   Reduce Motion respected. */
/* Light tones (data-tone, default "Dæmpet" = soft grey; also Papir with a paper grain, Klassisk and Kølig) and
   proven dark palettes (data-dark, default "Notion"; also Grafit, Material and Apple). data-theme forces light/dark,
   else the phone decides. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --logo: "Lalezar", var(--sans);
  --ease: cubic-bezier(.25, .8, .25, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --dock: 56px;
  --kb: 0px;
}
:root { color-scheme: light; --bg: #eeeeeb; --text: #2a2a2a; --text-2: #575757; --text-3: #656562; --line: #dcdcd8; --fill: #e4e4e0; --fill-2: #d8d8d4; --pulse: #b8403a; --pulse-soft: rgba(184, 64, 58, 0.1); --bar: rgba(238, 238, 235, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .14); --grain: none; }
:root[data-tone="papir"] { color-scheme: light; --bg: #efe5d1; --text: #141210; --text-2: #4f473b; --text-3: #6b6253; --line: #ddd1b8; --fill: #e6dbc3; --fill-2: #dacdb1; --pulse: #d4110a; --pulse-soft: rgba(212, 17, 10, 0.1); --bar: rgba(239, 229, 209, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .14); --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .13'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
:root[data-tone="klassisk"] { color-scheme: light; --bg: #ffffff; --text: #000000; --text-2: #333333; --text-3: #6e6e6e; --line: #e5e5e5; --fill: #f2f2f2; --fill-2: #e6e6e6; --pulse: #e10600; --pulse-soft: rgba(225, 6, 0, 0.1); --bar: rgba(255, 255, 255, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .14); --grain: none; }
:root[data-tone="kolig"] { color-scheme: light; --bg: #f4f6f8; --text: #12161b; --text-2: #434b55; --text-3: #5f6873; --line: #e1e6eb; --fill: #e9edf1; --fill-2: #dde3e9; --pulse: #d62d30; --pulse-soft: rgba(214, 45, 48, 0.1); --bar: rgba(244, 246, 248, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .14); --grain: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #191919; --text: #e3e3e1; --text-2: #a5a5a3; --text-3: #8f8f8c; --line: #2f2f2f; --fill: #252525; --fill-2: #2f2f2f; --pulse: #eb5757; --pulse-soft: rgba(235, 87, 87, 0.14); --bar: rgba(25, 25, 25, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
  :root[data-dark="material"]:not([data-theme="light"]) { color-scheme: dark; --bg: #121212; --text: #ececec; --text-2: #a6a6a6; --text-3: #8a8a8a; --line: #262626; --fill: #1e1e1e; --fill-2: #2a2a2a; --pulse: #ff453a; --pulse-soft: rgba(255, 69, 58, 0.14); --bar: rgba(18, 18, 18, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
  :root[data-dark="apple"]:not([data-theme="light"]) { color-scheme: dark; --bg: #1c1c1e; --text: #ffffff; --text-2: #aeaeb2; --text-3: #8e8e93; --line: #38383a; --fill: #2c2c2e; --fill-2: #3a3a3c; --pulse: #ff453a; --pulse-soft: rgba(255, 69, 58, 0.14); --bar: rgba(28, 28, 30, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
  :root[data-dark="grafit"]:not([data-theme="light"]) { color-scheme: dark; --bg: #1e1d1b; --text: #f0ece4; --text-2: #b8b3aa; --text-3: #98938b; --line: #312f2c; --fill: #282725; --fill-2: #33312e; --pulse: #ff5a4e; --pulse-soft: rgba(255, 90, 78, 0.14); --bar: rgba(30, 29, 27, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #191919; --text: #e3e3e1; --text-2: #a5a5a3; --text-3: #8f8f8c; --line: #2f2f2f; --fill: #252525; --fill-2: #2f2f2f; --pulse: #eb5757; --pulse-soft: rgba(235, 87, 87, 0.14); --bar: rgba(25, 25, 25, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
:root[data-dark="material"][data-theme="dark"] { color-scheme: dark; --bg: #121212; --text: #ececec; --text-2: #a6a6a6; --text-3: #8a8a8a; --line: #262626; --fill: #1e1e1e; --fill-2: #2a2a2a; --pulse: #ff453a; --pulse-soft: rgba(255, 69, 58, 0.14); --bar: rgba(18, 18, 18, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
:root[data-dark="apple"][data-theme="dark"] { color-scheme: dark; --bg: #1c1c1e; --text: #ffffff; --text-2: #aeaeb2; --text-3: #8e8e93; --line: #38383a; --fill: #2c2c2e; --fill-2: #3a3a3c; --pulse: #ff453a; --pulse-soft: rgba(255, 69, 58, 0.14); --bar: rgba(28, 28, 30, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
:root[data-dark="grafit"][data-theme="dark"] { color-scheme: dark; --bg: #1e1d1b; --text: #f0ece4; --text-2: #b8b3aa; --text-3: #98938b; --line: #312f2c; --fill: #282725; --fill-2: #33312e; --pulse: #ff5a4e; --pulse-soft: rgba(255, 90, 78, 0.14); --bar: rgba(30, 29, 27, 0.86); --shadow: 0 10px 40px rgba(0, 0, 0, .6); --grain: none; }
/* colour is used sparingly: a small dot tells the section on mixed lists; red is only for big news and 'live' */
:root { --dk: #3b6fc4; --me: #2f855a; --world: #8058b8; --warn: #9a5800; --sec: var(--text-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dk: #7aa7ff; --me: #4cc38a; --world: #b794f6; --warn: #f0b45a; } }
:root[data-theme="dark"] { --dk: #7aa7ff; --me: #4cc38a; --world: #b794f6; --warn: #f0b45a; }
[data-sec="dk"] { --sec: var(--dk); }
[data-sec="me"] { --sec: var(--me); }
[data-sec="world"] { --sec: var(--world); }

/* ------------------------------------------------------------ base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; touch-action: manipulation; }   /* no double-tap zoom */
html::-webkit-scrollbar { display: none; }
html, body { margin: 0; background-color: var(--bg); color: var(--text); overscroll-behavior-y: none; transition: background-color .35s, color .35s; }
body { font: 16px/1.38 var(--sans); -webkit-font-smoothing: antialiased; background-image: var(--grain); background-attachment: fixed;
  min-height: 100vh; padding-bottom: calc(var(--dock) + 28px); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; border-radius: 8px; }

/* ------------------------------------------------------------ top bar: identity, freshness, settings */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2px;
  padding: calc(var(--top) + 2px) 6px 2px 16px; min-height: calc(var(--top) + 50px);
  background: var(--bar); -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px);
  box-shadow: 0 .5px 0 transparent; transition: box-shadow .25s; }
.bar.scrolled { box-shadow: 0 .5px 0 var(--line); }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.logo { position: relative; font-family: var(--logo); font-size: 27px; line-height: 1; padding-top: 7px; color: var(--text); }
.logo .dot { position: absolute; top: .1em; left: calc(86% - .09em); width: .18em; height: .18em; border-radius: 50%; background: var(--pulse);
  transition: background-color .4s; }
.loading .logo .dot { animation: breathe 1.2s ease-in-out infinite; }
.logo .dot.stale { background: var(--text-3); }
.title { margin: 0; font-size: 18px; font-weight: 720; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title.swap { animation: titleIn .28s var(--out); }
.status { min-height: 44px; padding: 0 8px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.status.stale { color: var(--pulse); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; color: var(--text-2); }
.icon-btn svg { width: 23px; height: 23px; }

/* ------------------------------------------------------------ lists */
main { min-height: 70vh; }
.view { animation: viewIn .2s var(--ease); }
.notice { margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: var(--pulse-soft); color: var(--text); font-size: 14px; line-height: 1.45; }
/* a block ('Vigtigst lige nu') is a large title; a day ('I dag', 'I går') a slim band that stays under the top bar
   while its stories scroll past – told apart by size and form, not by colour */
.block { margin-top: 20px; }
.block-h { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 2px 16px; }
.block-h h2 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 780; letter-spacing: -.022em; }
.block-h .live { width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); box-shadow: 0 0 0 4px var(--pulse-soft); }
.more { display: flex; align-items: center; gap: 1px; min-height: 44px; padding: 0 10px 0 14px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.more svg { width: 15px; height: 15px; }
.day { position: sticky; z-index: 5; top: calc(var(--top) + 50px); display: flex; align-items: center; gap: 10px; min-height: 34px;
  margin-top: 8px; padding: 6px 16px; font-size: 12px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; color: var(--text);
  background: var(--bar); -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px); }
.day span { padding: 3px 9px; border-radius: 7px; background: var(--text); color: var(--bg); letter-spacing: .05em; }
.day::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.foot { padding: 26px 24px 8px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.empty { padding: 56px 32px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.skel { height: 68px; margin: 0 16px; position: relative; overflow: hidden; }
.skel + .skel { box-shadow: inset 0 .5px var(--line); }
.skel::before, .skel::after { content: ""; position: absolute; left: 0; height: 12px; border-radius: 6px; background: var(--fill);
  animation: shimmer 1.4s ease-in-out infinite; }
.skel::before { top: 16px; right: 16%; }
.skel::after { top: 38px; width: 38%; }

/* ------------------------------------------------------------ one story: a row; tap to open in place
   the headline in plain type with its names in bold, one quiet line below it (big story in red, a small dot for
   the section on mixed lists, outlet, time), a small picture at the right – or the outlet's initials */
.story { position: relative; transition: background-color .25s; }
.story + .story::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: .5px solid var(--line); }
.story.open { background-color: var(--fill); }
.story.open::before, .story.open + .story::before { opacity: 0; }
.row { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 16px 12px; transition: background-color .15s; }
.row:active { background-color: var(--fill); }
.tx { flex: 1; min-width: 0; }
.h { display: block; font-size: 16px; line-height: 1.33; font-weight: 420; letter-spacing: -.008em; color: var(--text); text-wrap: pretty; }
.h b { font-weight: 700; }
.story:not(.open) .h { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* every closed story is one height: two headline lines and one meta line, the picture filling the row */
.story:not(.open):not(.hero) .row { height: 86px; padding-top: 0; padding-bottom: 0; align-items: center; overflow: hidden; }
/* a clear line between stories, right across under the picture too */
.story + .story::before { left: 16px; right: 0; border-top: 1px solid var(--line); z-index: 1; }
.story .h { font-weight: 480; }
.story .m { margin-top: 6px; }
.story:not(.open) .m { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.m { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.m > span + span::before { content: "·"; margin: 0 5px; color: var(--text-3); }
.m .src { color: var(--text-2); font-weight: 600; }
.m .big { color: var(--pulse); font-weight: 650; }
.m .sec i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--sec); vertical-align: 1px; }
.m .warn { font-style: italic; }
.m .done { color: var(--text-2); }
/* a small square picture at the right, black and white (colour once opened); no picture, no box */
.th { position: relative; flex: none; align-self: center; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--fill-2); }
.th b { display: none; }
.th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .4s; }
.story .th { display: none; }
.story.pic .th { display: block; }
.story.pic.open .th img { filter: none; }

/* the day's lead story: one big picture, its headline on a dark veil at the bottom, so it is always readable */
.story.hero { margin: 2px 12px 8px; border-radius: 16px; overflow: hidden; background: var(--fill); }
.story.hero + .story::before { display: none; }
.hero-row { position: relative; display: block; width: 100%; height: 230px; overflow: hidden; text-align: left; background: #222; }
.hero-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06); transition: filter .4s; }
.story.hero.open .hero-row img { filter: none; }
.hero-row::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .1) 72%, transparent); }
.hero-tx { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 13px; }
.hero-tx .h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; line-height: 1.24;
  font-weight: 560; letter-spacing: -.012em; color: #fff; }
.hero-tx .h b { font-weight: 760; }
.hero-tx .m, .hero-tx .m .src, .hero-tx .m > span + span::before { color: rgba(255, 255, 255, .78); }
.story.hero .x-in { padding-top: 12px; }
.story.new .row::after { content: ""; position: absolute; left: 5px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--pulse); }
.story.fresh { animation: freshBg 3s ease-out; }
.story.enter { animation: rise .34s var(--out) both; animation-delay: calc(var(--i, 0) * 16ms); }

.x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--out); }
.x > div { overflow: hidden; min-height: 0; }
.story.open .x { grid-template-rows: 1fr; }
.x-in { padding: 0 16px 14px; opacity: 0; transition: opacity .2s; }
.story.open .x-in { opacity: 1; transition-delay: .06s; }
.sum { margin: 0 0 12px; font-size: 15px; line-height: 1.47; color: var(--text-2); }
.tr-note { margin: -6px 0 12px; font-size: 12.5px; color: var(--text-3); }
.acts { display: flex; gap: 8px; }
.act { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px;
  background: var(--fill-2); font-size: 15px; font-weight: 640; color: var(--text); transition: transform .12s, opacity .12s; }
.act svg { width: 19px; height: 19px; }
.act.primary { background: var(--text); color: var(--bg); }
.act:active { transform: scale(.96); opacity: .85; }

/* how the outlets cover it: grouped by kind of media, so different framings sit side by side */
.cov { margin: 14px 0 2px; }
.cov-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.cov-sum { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.cov-g { margin-top: 8px; font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.cov a { display: block; padding: 7px 0; font-size: 14.5px; line-height: 1.38; color: var(--text-2); border-bottom: .5px solid var(--line); }
.cov a:last-child { border-bottom: 0; }
.cov a b { color: var(--text); font-weight: 650; margin-right: 6px; }
.cov a i { font-style: normal; color: var(--text-3); }
.cov a:active { opacity: .6; }

/* ------------------------------------------------------------ the overview of the day: closes the front page
   short lines – who in bold, then what – grouped by topic, newest first, with the time at the left like a wire */
.ov { margin: 26px 12px 0; border-radius: 16px; background: var(--fill); }
.ov-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 12px 14px 12px 16px; text-align: left; }
.ov-row span { flex: 1; min-width: 0; }
.ov-row b { display: block; font-size: 17px; font-weight: 720; letter-spacing: -.012em; }
.ov-row small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.ov-row svg { width: 18px; height: 18px; color: var(--text-3); transform: rotate(90deg); transition: transform .25s var(--out); }
.ov.open .ov-row svg { transform: rotate(-90deg); }
.ov .ov-body { margin: 0; border-top: .5px solid var(--line); border-radius: 0 0 16px 16px; }
.ov-h { padding: 0 16px; }
.ov-h h2 { margin: 0; font-size: 21px; font-weight: 780; letter-spacing: -.022em; }
.ov-h h2 span { font-weight: 480; color: var(--text-2); }
.ov-h p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ov-body { margin: 10px 12px 2px; padding: 4px 0 0; border-radius: 16px; background: var(--fill); }
.dt { padding: 10px 16px 4px; }
.dt + .dt { border-top: .5px solid var(--line); }
.dt h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: 15px; line-height: 1.3; font-weight: 720; letter-spacing: -.01em; }
.dt h3 i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sec); }
.dl { list-style: none; margin: 0; padding: 0; }
.dl li { position: relative; }
.dl li > a, .dl li > span { display: flex; gap: 10px; padding: 5px 0; font-size: 14.5px; line-height: 1.42; color: var(--text-2); text-wrap: pretty; }
.dl time { flex: none; width: 38px; padding-top: 1.5px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dl time small { display: block; font-size: 11px; line-height: 1.2; }
.dl b { color: var(--text); font-weight: 650; }
.dl i { color: var(--text-3); }
.dl li > a:active { opacity: .6; }
.dl li.new::before { content: ""; position: absolute; left: -10px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--pulse); }
.dt-more { min-height: 36px; margin: -2px 0 4px; padding: 0 0 0 48px; font-size: 13.5px; font-weight: 620; color: var(--text-2); }
.dt-more:active { opacity: .55; }
.ov-acts { display: flex; justify-content: flex-end; padding: 0 6px 2px; border-top: .5px solid var(--line); }
.ov-acts button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; font-size: 14px; font-weight: 620; color: var(--text-2); }
.ov-acts svg { width: 16px; height: 16px; }
.ov-acts button:active { opacity: .55; }
.explain { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.explain.top { margin: 14px 18px 2px; font-size: 13.5px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cov-more { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.explain.pad { margin: 2px 16px 8px; font-size: 13.5px; }

/* earlier days: one line each, opened in place */
.arch { margin: 0 12px; border-top: .5px solid var(--line); }
.arch-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 4px; }
.arch-row span { flex: 1; min-width: 0; }
.arch-row b { display: block; font-size: 16px; font-weight: 650; }
.arch-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.arch-row svg { width: 16px; height: 16px; color: var(--text-3); transition: transform .25s var(--out); }
.arch.open .arch-row svg { transform: rotate(90deg); }
.arch .ov-body { margin: 0 0 14px; }
.arch-h { margin: 0 16px; padding: 4px 0 6px; font-size: 12px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.wide.soft { width: calc(100% - 32px); margin: 8px 16px; background: var(--fill); }

/* ------------------------------------------------------------ search */
.hit { display: block; padding: 10px 16px 11px; position: relative; }
.hit + .hit::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--line); }
.hit:active { background: var(--fill); }
.hit b { display: block; font-size: 15.5px; line-height: 1.32; font-weight: 560; }
.hit span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
mark { background: var(--pulse-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ------------------------------------------------------------ pull to refresh: a quiet ring, like the system's */
.ptr { position: fixed; z-index: 15; top: calc(var(--top) + 58px); left: 50%; width: 28px; height: 28px; margin-left: -14px;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.ptr svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.ptr circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.ptr-track { stroke: var(--line); }
.ptr-arc { stroke: var(--text-2); stroke-dasharray: 69.12; stroke-dashoffset: calc(69.12 * (1 - var(--k, 0))); }
.ptr.ready svg { transform: rotate(-90deg) scale(1.08); transition: transform .2s var(--out); }
.ptr.spin svg { animation: spin .75s linear infinite; }
.ptr.spin .ptr-arc { stroke-dashoffset: 46; }
#list.pulling, #list.settling { will-change: transform; }
#list.settling { transition: transform .38s var(--out); }

/* ------------------------------------------------------------ "new stories" pill */
.fresh-pill { position: fixed; z-index: 25; top: calc(var(--top) + 60px); left: 50%; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 15px 0 11px; border-radius: 18px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 650;
  box-shadow: var(--shadow); transform: translateX(-50%); animation: pillIn .4s var(--out); }
.fresh-pill svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ bottom dock: sections in the thumb zone */
.dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: var(--kb); padding-bottom: var(--bottom);
  background: var(--bar); -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px);
  box-shadow: 0 -1px 0 var(--line), 0 -6px 18px rgba(0, 0, 0, .05); }
.keyboard .dock { padding-bottom: 0; }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 640px; margin: 0 auto; }
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); transition: color .2s; }
.tabs button svg { width: 25px; height: 25px; padding: 1px 0; border-radius: 13px; box-sizing: content-box; transition: transform .18s var(--out), background-color .2s; }
.tabs button[aria-selected="true"] svg { width: 25px; padding: 1px 16px; background: var(--fill-2); }
.tabs button:active svg { transform: scale(.88); }
.tabs button[aria-selected="true"] { color: var(--text); font-weight: 750; }
.tab-dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--pulse);
  box-shadow: 0 0 0 2px var(--bg); transform: scale(0); transition: transform .3s var(--out); }
.tabs button.has-new .tab-dot { transform: scale(1); }
.searchbar { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 8px auto 0; width: calc(100% - 24px);
  height: 44px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--fill-2); color: var(--text-3); }
.searchbar svg { width: 19px; height: 19px; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 17px var(--sans); }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar button { width: 44px; height: 44px; display: grid; place-items: center; }

/* ------------------------------------------------------------ toast: a calm confirmation above the tabs */
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--dock) + var(--kb) + 14px); display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 22px; background: var(--text); color: var(--bg); font-size: 14.5px; font-weight: 640;
  white-space: nowrap; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity .2s, transform .35s var(--out); }
.toast svg { width: 18px; height: 18px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ settings sheet: slides up, drag down to close */
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-width: 720px; max-height: 92vh; margin: 0 auto; display: flex;
  flex-direction: column; border-radius: 20px 20px 0 0; background-color: var(--bg); background-image: var(--grain); box-shadow: var(--shadow);
  padding-bottom: calc(var(--bottom) + 10px); transform: translateY(105%); transition: transform .42s var(--out); }
.sheet.on { transform: translateY(var(--drag, 0px)); }
.sheet.dragging { transition: none; }
.sheet-grip { height: 26px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-grip i { width: 38px; height: 5px; border-radius: 3px; background: var(--fill-2); }
.sheet-scroll { overflow-y: auto; padding: 0 20px 8px; overscroll-behavior: contain; }
.sheet h2 { margin: 2px 0 6px; font-size: 22px; font-weight: 760; letter-spacing: -.02em; }
.sheet h3 { margin: 24px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.hint { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.hint b { color: var(--text); font-weight: 640; }
.wide { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border-radius: 14px; background: var(--fill);
  font-size: 16px; font-weight: 650; margin: 4px 0 8px; transition: transform .12s; }
.wide:active { transform: scale(.98); background: var(--fill-2); }
.sheet-done { width: auto; margin: 6px 20px 0; background: var(--text); color: var(--bg); }
textarea { width: 100%; border: 0; border-radius: 10px; padding: 10px; background: var(--fill); color: var(--text);
  font: 11px/1.4 ui-monospace, Menlo, monospace; resize: none; }
.opt { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 16px; cursor: pointer; }
.opt span { flex: 1; }
.opt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--fill-2); position: relative;
  flex: none; margin: 0; cursor: pointer; transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s var(--out); }
.switch:checked { background: var(--pulse); }
.switch:checked::after { transform: translateX(20px); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: var(--fill); margin-bottom: 8px; }
.seg button { min-height: 40px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text-2); border-radius: 9px; transition: color .2s, background-color .2s; }
.seg button[aria-checked="true"] { color: var(--text); background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.tones.four { grid-template-columns: repeat(4, 1fr); }
.tones-label { margin: 2px 0 6px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.tones button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 6px 0; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: var(--text-2); transition: background-color .2s; }
.tones button i { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--c-bg);
  transition: transform .25s var(--out), box-shadow .25s; }
.tones button i::after { content: ""; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-ac); }
.tones button[aria-checked="true"] { color: var(--text); background: var(--fill); }
.tones button[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); transform: scale(1.05); }
.sources h4 { margin: 14px 0 4px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.sources ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; font-size: 13.5px; color: var(--text-2); }
.sources li { padding: 3px 0; break-inside: avoid; }
.sources li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 2px; background: var(--text-3); }
.sources li.bad { color: var(--text-3); }
.sources li.bad::before { background: var(--pulse); }

/* ------------------------------------------------------------ motion: quiet, short, only where it explains */
@keyframes viewIn { from { opacity: 0; } }
@keyframes titleIn { from { opacity: 0; transform: translateY(4px); } }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
@keyframes freshBg { from { background-color: var(--pulse-soft); } }
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes breathe { 50% { opacity: .28; } }
@keyframes spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes shimmer { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ptr.spin svg { animation: none; }
}
@media (min-width: 700px) {
  main, .bar > .brand { max-width: 680px; }
  main { margin: 0 auto; }
}

/* ------------------------------------------------------------ Live feed: everything as it ticks in, compact, no pictures */
.tabs .live-tab, .tabs .live-tab[aria-selected="true"] { color: var(--pulse); }
.live-dot { position: absolute; top: 7px; left: calc(50% + 9px); width: 7px; height: 7px; border-radius: 50%; background: var(--pulse);
  box-shadow: 0 0 0 2px var(--bg); animation: breathe 1.6s ease-in-out infinite; }
.story.tick:not(.open) .row { height: 70px; }
.story.tick .row { gap: 12px; align-items: center; }
.story.tick .tt { flex: none; width: 40px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.story.tick .h { font-size: 15px; line-height: 1.3; }
.story.tick:not(.open) .h { -webkit-line-clamp: 2; }
.story.tick .m { margin-top: 3px; }
.story.tick + .story.tick::before { left: 68px; }