/* The chrome is today's; 1918 arrives through the words alone. White ground,
   one sans, one accent, flat posts separated by hairlines — the grammar of a
   feed a person would scroll now, not the livery of any company and not a
   museum vitrine. Everything scholarly stays in the HTML and recedes until
   wanted. The only decoration is one stable hue per voice, so a reader starts
   to recognise who is speaking before reading the name. */
:root {
  color-scheme: light dark;
  --bg:#ffffff; --ink:#15181c; --soft:#5d646c; --line:#e5e7ea; --panel:#f4f5f7;
  /* Carmine from the flag, on white — the one period note left, and only on
     the interactive and the reveal. ≥ 4.5:1 on --bg (tests/run.ts checks). */
  --accent:#b01f2e; --accent-tint:#fbeef0;
}
/* Phones read this at night. Same tokens, same contrast floor. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111317; --ink:#e9ebee; --soft:#a1a8b1; --line:#2a2e35; --panel:#1b1e24;
    --accent:#f0808a; --accent-tint:#2d1b1e;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* The device's own face — Roboto on Android, SF on iOS — exactly as the feed
   apps are set, which is much of why they feel native. Both carry the full
   Latvian set. The self-hosted Inter files stay in fonts/ unreferenced; see
   the note in index.astro to switch back. */
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:600px; margin:0 auto; padding:0 16px; }
a { color:var(--accent); }

/* Every control is a real <button>, so it is in the tab order; this is the one
   visible focus ring they all share. */
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ---- top bar: the name, and on a profile the way back ------------------- */
header { background:var(--bg); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); }
/* Exactly one row stays on screen while reading, and it is the row that does
   something: on a day page the day strip below (the brand scrolls away), on a
   profile — which has no strip — this header, holding the way back. */
header.pinned { position:sticky; top:0; z-index:5; }
.top { display:flex; align-items:center; justify-content:space-between; height:48px; }
.brand { display:flex; align-items:center; gap:6px; font-weight:600; font-size:17px; letter-spacing:-.01em; }
.brand .mark { flex:none; fill:var(--accent); }
.top .date { font-size:14px; color:var(--soft); }

/* ---- the day strip: four days side by side, the span the site covers -----
   A day is a cell, not a chevron: the reader sees where they are among the
   four and reaches any of them in one tap. At 400 px a cell is 92 px wide
   ((400 − the wrap's 32 px of gutter) / 4) and 46 px tall — four fit with no
   horizontal scroll, and each is past the 34 px the thumb needs. Breaks when:
   a fifth day joins DAYS — then 73 px a cell, and the strip needs rethinking. */
.daystrip { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); }
.daystrip .row { display:flex; gap:4px; padding:5px 12px; }
.day { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px;
       padding:5px 0 6px; color:var(--soft); text-decoration:none; border-radius:9px; }
.day .n { font-size:16px; line-height:1.2; font-weight:600; letter-spacing:-.01em; }
/* The count, not a bar: 55 against 6 is read at a glance and needs no key. */
.day .c { font-size:12px; line-height:1.2; }
/* The day you are on is the one cell with a ground under it. */
.day[aria-current="page"] { color:var(--ink); background:var(--panel); }
.day:hover { color:var(--ink); }

/* The day is the headline of the whole page — the one fact framing every post.
   (padding-top/bottom only: a shorthand here would wipe .wrap's side gutter.) */
.hero { padding-top:22px; padding-bottom:10px; }
.hero h1 { margin:0; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.02em; }
/* What this day's papers made of the proclamation, under the headline. */
.hero .holds { margin:8px 0 0; font-size:14px; color:var(--soft); }

.tabs { display:flex; border-bottom:1px solid var(--line); }
.tabs button { flex:1; font-size:15px; padding:13px 0; text-align:center; color:var(--soft);
               border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button[aria-selected="true"] { color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }

#filterbar { padding:12px 0 0; }
#filterbar button { font-size:14px; background:var(--panel); border-radius:999px; padding:6px 14px; }

/* ---- a post --------------------------------------------------------------- */
.post { padding:14px 0 10px; border-bottom:1px solid var(--line); }
.who { display:flex; gap:10px; align-items:flex-start; }
/* A person is a circle, a paper or an office a rounded square — the only cue
   the face needs for "who" versus "what". The hue is set per account at build
   (avatarHue in feed.ts); the initials are white, ≥ 4.5:1 on every hue. */
.avatar { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
          font-size:14px; font-weight:600; color:#fff; letter-spacing:.02em; }
.avatar.k-org, .avatar.k-publication, .avatar.k-meta { border-radius:10px; }
/* The eight hues. HUE_COUNT in feed.ts must equal the number of rules here. */
.avatar.h-0 { background:#1d4ed8; } .avatar.h-1 { background:#0f766e; }
.avatar.h-2 { background:#b45309; } .avatar.h-3 { background:#6d28d9; }
.avatar.h-4 { background:#be123c; } .avatar.h-5 { background:#15803d; }
.avatar.h-6 { background:#475569; } .avatar.h-7 { background:#9d174d; }
.meta { flex:1; min-width:0; }
.meta { line-height:1.35; padding-top:9px; }
/* The name is the way to the account's page; it looks like a name, not a link. */
.acct { color:inherit; text-decoration:none; }
.acct:hover .name { text-decoration:underline; }
.name { font-weight:600; }
.handle, .stamp, .seqno { color:var(--soft); font-size:14px; }
/* Astro drops the whitespace between the two spans in the button. */
.acct .handle { margin-left:5px; }
/* A dot would start the line when a long name wraps, so the time keeps a gap instead. */
.stamp { margin-left:7px; }
/* A person's words as a paper rendered them — said, not labelled. */
.reporter { margin:0 0 2px; font-size:13px; color:var(--soft); }
/* A recollection written years later. The only accent-coloured text on a card
   face, so it cannot be missed, and still one quiet line — not a badge. It is
   repeated on every thread segment and, when every post of an account is a
   recollection, on the profile header. */
.written { margin:0 0 2px; font-size:13px; font-weight:600; color:var(--accent); cursor:help; }
.phead .written { margin-top:6px; cursor:default; }

/* The words run the full width: on a 400 px phone a 48 px indent under the
   avatar cost an eighth of every line, and 1918 sentences are long. */
.body { margin-top:6px; }
.body p { margin:0 0 8px; }
.lv { font-size:17px; line-height:1.5; overflow-wrap:anywhere; }

/* Four kinds of mark inside the text, each told apart by shape, not only
   colour, and as quiet as they can be while still telling: a mention (accent,
   no line), a reconstructed word (thin dotted line), a gap [?] (the brackets
   in the muted ink — a price list with five gaps must still read as a voice,
   not a redaction), an identified title or name (thin wavy line, with its own
   [≈] mark) — the wave is what tells "we looked this up" apart from "we read
   this off the scan". Each explains itself in a title; there is no panel. */
.mention { color:var(--accent); font-weight:500; text-decoration:none; }
/* „(@handle)“ wraps as one piece, never leaving a lone „(“ at a line end. The
   longest handle is 22 characters ≈ 190 px at 17 px — well inside a 368 px line. */
.m { white-space:nowrap; }
.recon { text-decoration:underline dotted; text-decoration-color:var(--soft); text-underline-offset:3px;
         text-decoration-thickness:1px; cursor:help; }
.gap { color:var(--soft); font-weight:500; cursor:help; }
.ident { text-decoration:underline wavy; text-decoration-color:var(--soft); text-underline-offset:3px;
         text-decoration-thickness:1px; cursor:help; }
.ident-note b { color:var(--ink); font-weight:600; }

/* ---- the thread: the rest of a long item, below the first segment --------- */
.thread { margin-top:6px; padding-left:14px; border-left:2px solid var(--line); }
.thread .seg { margin-top:12px; }
.seghead { font-size:13px; color:var(--soft); margin-bottom:4px; }
.seghead b { font-weight:500; }

/* ---- the action row -------------------------------------------------------
   One thin row of quiet words, 34 px tall for the thumb. */
.bar { display:flex; gap:0 12px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.bar button { font-size:14px; color:var(--soft); min-height:34px; display:inline-flex; align-items:center; }
.bar button:hover, .bar button[aria-expanded="true"] { color:var(--ink); }
.bar a { font-size:14px; color:var(--soft); text-decoration:none; min-height:34px; display:inline-flex; align-items:center; }
.bar a:hover { color:var(--accent); }
/* The links sit at the right, as a feed's share does. avots → stays last — it
   is the site; dalīties comes before it on a post, and a later segment of a
   thread has only avots. */
.bar .share, .bar .src-link { margin-left:auto; }
.bar .share + .src-link { margin-left:0; }

/* ---- the one fold left: replies under the article ------------------------ */
.fold { margin:4px 0 8px; font-size:14px; }
.k { font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--soft); margin-bottom:6px; }
.comments { padding-left:12px; border-left:2px solid var(--line); }
.cmt { margin-bottom:12px; font-size:15px; }
.cmt .cvia { color:var(--soft); font-size:12px; display:block; margin-top:3px; }

/* ---- a profile page: who this account was on 18 November 1918 ---------- */
.top .back { font-weight:600; font-size:15px; text-decoration:none; color:var(--ink); }
.phead { padding:18px 0 14px; border-bottom:1px solid var(--line); }
.phead .avatar { width:64px; height:64px; font-size:22px; margin-bottom:10px; }
.phead h1 { margin:0; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.01em; }
.phead .handle { font-size:15px; }
.phead .what { margin:6px 0 0; font-size:15px; color:var(--soft); }
.phead .bio { margin:10px 0 0; font-size:16px; }
.phead .pwarn, .phead .today { margin:10px 0 0; font-size:13px; color:var(--soft); }
.pcount { margin:14px 0 0; font-size:14px; color:var(--soft); }
/* A profile spans the days; each run of posts is headed by its day, which is
   the way to that day's page. */
.pday { margin:14px 0 0; font-size:13px; font-weight:600; }
.pday a { color:var(--soft); text-decoration:none; }
.pday a:hover { color:var(--accent); }
/* The account said nothing that day: a statement, not an empty list. */
.empty { margin:16px 0; padding:14px 16px; border-radius:10px; background:var(--panel); font-size:16px; }
.empty p { margin:0; }
.named { padding:14px 0 6px; }
.named h2 { margin:0 0 4px; font-size:13px; font-weight:600; color:var(--soft); }
.named a { display:block; padding:10px 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-size:15px; }
.named a:hover { color:var(--accent); }
.named .nw { color:var(--soft); font-size:13px; }
.chandle { color:var(--soft); font-size:13px; }

/* ---- what the day talked about ------------------------------------------- */
#trends { padding:14px 0 10px; }
#trends .k { margin-bottom:8px; }
.trend { display:flex; align-items:baseline; gap:12px; width:100%; padding:10px 8px; border-radius:8px; }
.trend:hover, .trend.on { background:var(--panel); }
.trend .scope { flex:none; min-width:58px; white-space:nowrap; font-size:13px; color:var(--soft); }
.trend b { font-size:16px; font-weight:600; flex:1; }
.trend .n { font-size:13px; color:var(--soft); }

/* The feed ends with room for the thumb — and on a day page, with the credit. */
main { padding-bottom:48px; }
/* The credit is deliberately NOT a card: no hairline above it, not the full
   measure, well clear of the last post. A rule over a full-width block IS how
   this page separates posts, and the one thing a credit may never be mistaken
   for is a sourced 1918 document. Centred, narrow and small instead — the
   shape of a colophon. The 40 px is its own, because the feed column's bottom
   padding does not reach here. */
.credit { margin-top:40px; padding:0 16px 44px; }
.credit p { max-width:38ch; margin:0 auto; text-align:center; font-size:12px; line-height:1.6; color:var(--soft); }

/* Lazy reveal. The hiding is CSS, not script, because the page's CSP is
   'self' with no hashes — there is no inline script that could hide these
   before first paint, and doing it from feed.js would flash all 86 posts.
   feed.js removes .later in batches; nojs.css shows them all instead. */
.post.later { display: none; }
#more { height: 1px; }