/* ============================================================================
   THE WIRE — Tri-Lens by SiiYa · feed stylesheet
   Split out of the approved "The Wire" redesign. Tokens-first, dark-mode-first.
   Pairs with index.html + feed.js. Auth gating is handled by gate.js, which sets
   body[data-gate] — see §0 (gate overlay) below.
   ============================================================================ */

/* ============================================================================
   1 · TOKEN LAYER  — the whole system is built on these. No magic numbers below.
   Brand tokens (siiya-marketing design system) are law; product tier colors come
   from welcome-aboard trust-tokens.css. Dark-mode-first (Product theme #0D1117).
   ========================================================================== */
:root {
  /* — Brand accents — */
  --brand-cyan:  #00D4FF;   /* the ONE accent, used sparingly */
  --brand-teal:  #0D7A78;
  --brand-navy:  #1B2A4A;

  /* — Semantic surfaces (Product theme) — */
  --surface:        #0D1117;   /* page */
  --surface-raised: #161B22;   /* cards, rails */
  --surface-inset:  #10151c;   /* wells, skeleton base */
  --surface-hover:  #1A2235;   /* row hover (brand --bg-dark-hover-row) */
  --border:         #21262D;
  --border-subtle:  rgba(255,255,255,0.06);

  /* — Semantic text (contrast verified against --surface) — */
  --text-primary: #F2F6FB;   /* headings ~15:1 */
  --text-read:    #D6DEE7;   /* long-form reading body ~12:1 */
  --text-body:    #94A3B8;   /* meta / secondary ~6.3:1 (brand --text-body-dark) */
  --text-muted:   #64748B;   /* hints, large/decorative only */
  --text-dim:     #475569;

  --accent:       var(--brand-cyan);
  --accent-ink:   #04222B;   /* text ON accent fills */
  --accent-soft:  color-mix(in srgb, var(--brand-cyan) 12%, transparent);

  /* — Trust tiers (welcome-aboard trust-tokens.css — the real feed identity) — */
  --tier-gold:  #c8a040;  --tier-gold-bg:  #1a1200;
  --tier-well:  #00c8a0;  --tier-well-bg:  #002a22;
  --tier-review:#7c5cbf;  --tier-review-bg:#1a1030;
  --tier-risk:  #e8394a;  --tier-risk-bg:  #2a0008;
  --tier-pending:#7a8793; --tier-pending-bg:#141a20;

  /* — Lens identity (distinct from tier) — */
  --lens-l1: #ffb800;  /* Source reliability */
  --lens-l2: #00bcd4;  /* Corroboration */
  --lens-l3: #ff6d00;  /* Sentiment */

  /* — Type faces — */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Modular type scale (fluid, clamp) — */
  --fs-eyebrow: 0.6875rem;                              /* 11px */
  --fs-meta:    0.75rem;                                /* 12px */
  --fs-small:   0.8125rem;                              /* 13px */
  --fs-body:    0.9375rem;                              /* 15px */
  --fs-read:    clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);   /* article body 17–19px */
  --fs-list:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);    /* list headline */
  --fs-lead:    clamp(1.5rem, 1.2rem + 1.8vw, 2.125rem);       /* lead headline */
  --fs-display: clamp(1.875rem, 1.35rem + 2.6vw, 2.875rem);    /* article headline */

  /* — Line heights — */
  --lh-read:    1.72;
  --lh-snug:    1.28;
  --lh-tight:   1.12;

  /* — Spacing scale (rem) — */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;

  /* — Radii (brand set) — */
  --r-badge: 4px; --r-btn: 6px; --r-card: 8px; --r-lg: 14px; --r-full: 999px;

  /* — Elevation — */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.35);
  --shadow-pop:   0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
  --shadow-seal:  0 8px 28px rgba(0,0,0,0.5);

  /* — Motion — */
  --t-fast: 150ms; --t-base: 200ms; --t-slow: 320ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --measure: 65ch;
  --shell:   min(1180px, 100% - 2 * var(--sp-6));
}

/* ============================================================================
   2 · RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text-read);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-badge);
}
::selection { background: var(--accent-soft); color: var(--text-primary); }

.skip {
  position: fixed; inset-block-start: -100%; inset-inline-start: var(--sp-4);
  z-index: 100; background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-btn); font-weight: 600;
}
.skip:focus { inset-block-start: var(--sp-4); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-body);
}

/* ============================================================================
   0 · AUTH GATE OVERLAY  — gate.js sets body[data-gate]; keep .page hidden until
   Firebase auth resolves (mirrors the original styles.css gate contract).
   ========================================================================== */
body[data-gate="pending"] .page { display: none; }
.loading-overlay {
  position: fixed; inset: 0; display: none; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  background: var(--surface); color: var(--text-body);
}
body[data-gate="pending"] .loading-overlay { display: flex; }
.loading-overlay__mark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.75rem;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1;
}
.loading-overlay__mark .ii { color: var(--brand-cyan); }
.loading-overlay__msg { font-size: var(--fs-small); letter-spacing: 0.02em; }

/* ============================================================================
   3 · MASTHEAD  — wordmark honours brand (S Y A white, ii cyan with dots)
   ========================================================================== */
.masthead {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--border);
}
.masthead__bar {
  width: var(--shell); margin-inline: auto;
  min-height: 60px; display: flex; align-items: center; gap: var(--sp-5);
}
.brand { display: inline-flex; align-items: baseline; gap: var(--sp-3); }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem;
  letter-spacing: -0.02em; color: var(--text-primary); line-height: 1;
}
.wordmark .ii { position: relative; color: var(--brand-cyan); padding-inline: 0.02em; }
.wordmark .ii::before {   /* the two dots — never removed */
  content: ""; position: absolute; inset-block-start: -0.34em; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 0.62em; height: 0.16em; border-radius: var(--r-full);
  background:
    radial-gradient(circle at 22% 50%, var(--brand-cyan) 42%, transparent 46%),
    radial-gradient(circle at 78% 50%, var(--brand-cyan) 42%, transparent 46%);
}
.brand__sub {
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-body);
  padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--border);
}
.masthead__spacer { flex: 1; }
.masthead__meta { display: flex; align-items: center; gap: var(--sp-4); }
.livedot {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-meta); color: var(--text-body); letter-spacing: 0.02em;
}
.livedot::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--tier-well); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier-well) 60%, transparent);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier-well) 55%, transparent); }
  70%,100% { box-shadow: 0 0 0 7px transparent; }
}
.acct {
  font-size: var(--fs-meta); color: var(--text-body);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct b { color: var(--text-primary); font-weight: 600; }
.signout {
  font-size: var(--fs-meta); font-weight: 600; color: var(--text-body);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn);
  border: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  min-height: 32px; display: inline-flex; align-items: center;
}
.signout:hover { color: var(--text-primary); border-color: var(--accent); }
@media (max-width: 640px) { .acct, .brand__sub { display: none; } }

/* ============================================================================
   4 · LENS RAIL  — the filter, reimagined as a slim editorial bar (no panel)
   ========================================================================== */
.rail {
  position: sticky; inset-block-start: 60px; z-index: 30;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}
.rail__inner {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-3); flex-wrap: wrap;
}
/* category filter — quiet inline text with an accent underline when active */
.cats { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center;
  overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  position: relative; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); font-weight: 500; color: var(--text-body);
  border-radius: var(--r-btn); white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cat:hover { color: var(--text-primary); background: var(--surface-raised); }
.cat[aria-pressed="true"] { color: var(--text-primary); }
.cat[aria-pressed="true"]::after {
  content: ""; position: absolute; inset-inline: var(--sp-3); inset-block-end: 1px;
  height: 2px; border-radius: var(--r-full); background: var(--accent);
}
.rail__spacer { flex: 1; }

/* trust floor — a compact segmented control, not a filter panel */
.floor { display: inline-flex; align-items: center; gap: var(--sp-3); }
.floor__label {
  font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.seg__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-meta); font-weight: 600; color: var(--text-body);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  min-height: 32px;
}
.seg__btn:hover { color: var(--text-primary); }
.seg__btn[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-card); }
.seg__btn .dot { width: 8px; height: 8px; border-radius: var(--r-full); }

/* search — reveals from an icon; quiet until used */
.search { position: relative; display: inline-flex; align-items: center; }
.search input {
  width: 12rem; max-width: 42vw; height: 36px; padding-inline: var(--sp-8) var(--sp-3);
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--r-full); color: var(--text-primary); font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), width var(--t-base) var(--ease);
}
.search input::placeholder { color: var(--text-muted); }
.search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { position: absolute; inset-inline-start: var(--sp-3); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
@media (max-width: 860px) {
  .rail__spacer { display: none; }
  .floor__label { display: none; }
  .search input { width: 8rem; }
}

/* ============================================================================
   5 · FEED  — asymmetric editorial column: one lead + a reading list
   ========================================================================== */
.feed { width: var(--shell); margin-inline: auto; padding-block: var(--sp-8) var(--sp-16); }
.feed__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-6); }
.feed__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--text-primary); letter-spacing: -0.01em; }
.feed__count { font-size: var(--fs-meta); color: var(--text-muted); }

/* non-blocking notice bar (graceful sample fallback / connection hint) */
.notice {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block-end: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--lens-l1) 8%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--lens-l1) 32%, var(--border));
  border-radius: var(--r-card); font-size: var(--fs-small); color: var(--text-body);
}
.notice svg { width: 17px; height: 17px; color: var(--lens-l1); flex-shrink: 0; }
.notice span { flex: 1; }
.notice__retry {
  font-size: var(--fs-meta); font-weight: 600; color: var(--accent);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-btn);
  min-height: 32px;
  transition: background var(--t-fast) var(--ease);
}
.notice__retry:hover { background: var(--accent-soft); }

.stream { display: grid; gap: 2px; }   /* hairline rhythm between stories */

/* — shared story anatomy — */
.story {
  position: relative; display: grid; align-items: start;
  gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6);
  border-radius: var(--r-card);
  transition: background var(--t-base) var(--ease);
}
.story::before {   /* the tier spine — quiet ambient signal on the inline-start edge */
  content: ""; position: absolute; inset-block: var(--sp-5); inset-inline-start: var(--sp-2);
  width: 3px; border-radius: var(--r-full);
  background: var(--tier); opacity: 0.55;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  transform-origin: top;
}
.story:hover { background: var(--surface-raised); }
.story:hover::before { opacity: 1; }
.story__topic { margin-block-end: var(--sp-2); }
.story__topic a { color: var(--tier); }
.story__topic a:hover { text-decoration: underline; text-underline-offset: 3px; }

.story__headline {
  font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
  line-height: var(--lh-snug); letter-spacing: -0.011em;
}
.story__headline a { transition: color var(--t-fast) var(--ease); }
.story:hover .story__headline a { color: var(--accent); }
.story__dek {
  margin-block-start: var(--sp-2); color: var(--text-body); line-height: 1.55;
  font-size: var(--fs-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story__meta {
  margin-block-start: var(--sp-3); display: flex; align-items: center;
  gap: var(--sp-3); font-size: var(--fs-meta); color: var(--text-muted); flex-wrap: wrap;
}
.story__meta .src { color: var(--text-body); font-weight: 500; }
.story__meta .sep { width: 3px; height: 3px; border-radius: var(--r-full); background: currentColor; opacity: 0.6; }

/* — the ONE explicit trust signal: a compact tier marker button — */
.mark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  background: color-mix(in srgb, var(--tier) 9%, transparent);
  font-size: var(--fs-meta); color: var(--text-primary); white-space: nowrap;
  min-height: 34px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mark:hover { background: color-mix(in srgb, var(--tier) 16%, transparent); border-color: color-mix(in srgb, var(--tier) 60%, transparent); }
.mark[aria-expanded="true"] { background: color-mix(in srgb, var(--tier) 18%, transparent); }
.mark .dot { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--tier); flex-shrink: 0; }
.mark .tname { font-weight: 600; letter-spacing: 0.01em; }
.mark .tscore { font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); }
.mark .chev { width: 13px; height: 13px; color: var(--text-muted); transition: transform var(--t-fast) var(--ease); }
.mark[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mark--pending { border-style: dashed; }
.mark--pending .tscore { color: var(--text-muted); }

/* lead story — larger, gives the top of the feed a clear focal point */
.story--lead { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-6); }
.story--lead .story__headline { font-size: var(--fs-lead); font-weight: 700; }
.story--lead .story__dek { -webkit-line-clamp: 3; font-size: var(--fs-read); color: var(--text-read); }
.story--lead .story__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* list story — headline + dek, trust marker in a quiet trailing column */
.story--row { grid-template-columns: 1fr auto; }
.story--row .story__headline { font-size: var(--fs-list); }
.story--row .story__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); padding-block-start: var(--sp-1); }
.story--row .readtime { font-size: var(--fs-meta); color: var(--text-muted); }
@media (max-width: 620px) {
  .story--row { grid-template-columns: 1fr; }
  .story--row .story__aside { flex-direction: row-reverse; justify-content: flex-start; align-items: center; }
}

/* — inline trust peel: on-demand breakdown, opens beneath the story — */
.peel {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.peel[data-open="true"] { grid-template-rows: 1fr; }
.peel__box { overflow: hidden; }
.peel__inner {
  margin-block-start: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-inset); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--tier); border-radius: var(--r-card);
  display: grid; gap: var(--sp-3);
}
.peel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.peel__score { display: flex; align-items: baseline; gap: var(--sp-2); }
.peel__score b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--tier); }
.peel__score span { font-size: var(--fs-meta); color: var(--text-muted); }
.peel__note { font-size: var(--fs-meta); color: var(--text-muted); }
.peel__lenses { display: grid; gap: var(--sp-3); }
.lens { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-meta); }
.lens__key { font-family: var(--font-mono); font-weight: 600; color: var(--lc); letter-spacing: 0.04em; }
.lens__track { height: 6px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.lens__fill { height: 100%; border-radius: var(--r-full); background: var(--lc); transform-origin: left; transform: scaleX(var(--v, 0)); box-shadow: 0 0 6px color-mix(in srgb, var(--lc) 60%, transparent); transition: transform var(--t-slow) var(--ease-out); }
.lens__val { color: var(--text-body); font-family: var(--font-mono); min-width: 3.6rem; text-align: end; }
.lens--missing .lens__val { color: var(--text-muted); }
.peel__more {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--accent);
}
.peel__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   6 · STATES  — skeleton (loading), empty, error
   ========================================================================== */
.sk { padding: var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-3); border-radius: var(--r-card); }
.sk__line { height: 0.75rem; border-radius: var(--r-full); background:
  linear-gradient(90deg, var(--surface-inset) 0%, var(--surface-raised) 40%, var(--surface-inset) 80%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sk__eyebrow { width: 6rem; height: 0.6rem; }
.sk__h1 { width: 92%; height: 1.15rem; }
.sk__h2 { width: 70%; height: 1.15rem; }
.sk__dek { width: 100%; }
.sk__dek2 { width: 84%; }
.sk__meta { width: 40%; margin-block-start: var(--sp-2); }

.state {
  text-align: center; padding: var(--sp-16) var(--sp-4);
  display: grid; place-items: center; gap: var(--sp-4);
}
.state__glyph {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  display: grid; place-items: center; color: var(--text-body);
  background: var(--surface-raised); border: 1px solid var(--border);
}
.state h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
.state p { color: var(--text-body); max-width: 42ch; }
.state--error .state__glyph { color: var(--tier-risk); border-color: color-mix(in srgb, var(--tier-risk) 45%, transparent); background: var(--tier-risk-bg); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px;
  padding: var(--sp-2) var(--sp-5); border-radius: var(--r-btn);
  font-size: var(--fs-small); font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }
[hidden] { display: none !important; }

/* ============================================================================
   7 · ARTICLE VIEW  — reading-optimised; trust surfaced on demand in the gutter
   ========================================================================== */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--brand-cyan), var(--tier-well));
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
html[data-view="article"] .progress { opacity: 1; }

.reader { width: var(--shell); margin-inline: auto; padding-block: var(--sp-6) var(--sp-20); }
.reader__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-10); }
.back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--text-body);
  padding: var(--sp-2) var(--sp-3); margin-inline-start: calc(-1 * var(--sp-3));
  border-radius: var(--r-btn); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.back:hover { color: var(--text-primary); background: var(--surface-raised); }

.article { max-width: var(--measure); margin-inline: auto; }
.article__topic { margin-block-end: var(--sp-4); }
.article__topic .t { color: var(--tier); }
.article__title {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--text-primary);
  text-wrap: balance;
}
.article__dek {
  margin-block-start: var(--sp-5); font-size: var(--fs-read); line-height: 1.5;
  color: var(--text-body); font-weight: 400; text-wrap: pretty;
}
.byline {
  margin-block: var(--sp-6); padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--text-body);
}
.byline .src { color: var(--text-primary); font-weight: 600; }
.byline .sep { width: 3px; height: 3px; border-radius: var(--r-full); background: currentColor; opacity: 0.5; }
.byline .source-link {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--accent); font-weight: 600;
}
.byline .source-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.prose { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--text-read); }
.prose > p + p { margin-block-start: var(--sp-5); }
.prose h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25;
  margin-block: var(--sp-8) var(--sp-3);
}
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose .lead-in::first-letter {
  font-family: var(--font-display); font-weight: 800; float: inline-start;
  font-size: 3.1em; line-height: 0.8; padding-inline-end: var(--sp-2); padding-block-start: 0.05em;
  color: var(--tier);
}
/* source-first fallback block (used when the API provides no article body) */
.prose .source-first {
  margin-block-start: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: var(--surface-inset); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--tier); border-radius: var(--r-card);
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-body);
}
.prose .source-first .btn { margin-block-start: var(--sp-4); }
.pull {
  margin-block: var(--sp-8); padding-inline-start: var(--sp-5);
  border-inline-start: 3px solid var(--tier);
  font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.4;
  color: var(--text-primary); text-wrap: balance;
}
.article__end {
  margin-block-start: var(--sp-10); padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--text-muted);
}

/* — Trust SEAL: pinned in the right gutter (desktop) / floating FAB (mobile) — */
.seal {
  position: fixed; z-index: 45;
  inset-block-start: 50%; inset-inline-end: max(var(--sp-6), calc((100vw - var(--shell)) / 2 - 3.5rem));
  transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 5rem; padding: var(--sp-3) var(--sp-2); border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
  box-shadow: var(--shadow-seal); text-align: center;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease);
}
html[data-view="article"] .seal { display: flex; }
.seal:hover { transform: translateY(-50%) scale(1.03); }
.seal__cap { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.seal__ring { position: relative; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; }
.seal__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.seal__ring .track { fill: none; stroke: var(--border); stroke-width: 4; }
.seal__ring .arc { fill: none; stroke: var(--tier); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset 900ms var(--ease-out); }
.seal__num { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--tier); }
.seal__tier { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); line-height: 1.1; }
.seal__cta { font-size: 0.5625rem; color: var(--text-body); display: flex; align-items: center; gap: 2px; }

/* mobile: seal collapses to a floating pill button, bottom-inline-end */
@media (max-width: 1100px) {
  html[data-view="article"] .seal {
    inset-block-start: auto; inset-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom));
    inset-inline-end: var(--sp-5); transform: none;
    flex-direction: row; width: auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
  }
  html[data-view="article"] .seal:hover { transform: scale(1.03); }
  .seal__cap, .seal__cta { display: none; }
  .seal__ring { width: 2.25rem; height: 2.25rem; }
  .seal__num { font-size: 0.8125rem; }
}

/* — Trust DRAWER: full tri-lens breakdown, slides from inline-end on demand — */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(3,6,10,0.62);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 55;
  width: min(430px, 94vw); background: var(--surface-raised);
  border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out);
  display: flex; flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-block-end: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
}
.drawer__kicker { font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.drawer__tier { margin-block-start: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); }
.drawer__tier .big { font-family: var(--font-mono); font-size: 2.25rem; font-weight: 600; color: var(--tier); line-height: 1; }
.drawer__tier .lbl { display: flex; flex-direction: column; gap: 2px; }
.drawer__tier .lbl b { font-family: var(--font-display); color: var(--text-primary); font-size: var(--fs-body); }
.drawer__tier .lbl span { font-size: var(--fs-meta); color: var(--text-muted); }
.xclose {
  width: 36px; height: 36px; border-radius: var(--r-btn); display: grid; place-items: center;
  color: var(--text-body); border: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.xclose:hover { color: var(--text-primary); border-color: var(--accent); }
.drawer__body { padding: var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-6); }
.drawer__sec h4 {
  font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-block-end: var(--sp-4); font-weight: 600;
}
.dlens { display: grid; gap: var(--sp-5); }
.dlens__row { display: grid; gap: var(--sp-2); }
.dlens__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.dlens__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); }
.dlens__name .k { font-family: var(--font-mono); font-weight: 600; color: var(--lc); }
.dlens__name .n { color: var(--text-primary); font-weight: 600; }
.dlens__raw { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-body); }
.dlens__track { height: 8px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.dlens__fill { height: 100%; border-radius: var(--r-full); background: var(--lc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lc) 55%, transparent);
  transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 700ms var(--ease-out); }
.dlens__foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-meta); color: var(--text-muted); }
.dlens__desc { font-size: var(--fs-meta); color: var(--text-body); line-height: 1.5; }

.formula {
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--sp-4); display: grid; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-meta);
}
.formula__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--text-body); }
.formula__row.total { border-block-start: 1px solid var(--border); padding-block-start: var(--sp-2); margin-block-start: var(--sp-1); color: var(--text-primary); font-weight: 600; }
.formula__row.total b { color: var(--tier); }
.formula__cap { font-family: var(--font-body); font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5; }

.srcprofile { display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.srcprofile__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.srcprofile__row span:first-child { color: var(--text-muted); }
.srcprofile__row span:last-child { color: var(--text-primary); font-weight: 500; text-align: end; }
.drawer__foot { padding: var(--sp-5); border-block-start: 1px solid var(--border); }
.drawer__foot .btn { width: 100%; justify-content: center; }

/* ============================================================================
   8 · FOOTER
   ========================================================================== */
.footer {
  border-block-start: 1px solid var(--border);
  background: var(--surface-raised);
}
.footer__inner {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding-block: var(--sp-6);
  font-size: var(--fs-meta); color: var(--text-muted);
}
.footer__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer__links a { color: var(--text-body); transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: var(--text-primary); }
html[data-view="article"] .footer { display: none; }

/* ============================================================================
   9 · VIEW SWITCH + REDUCED MOTION
   ========================================================================== */
html[data-view="feed"] #article-view { display: none; }
html[data-view="article"] #feed-scope { display: none; }
#article-view { animation: rise var(--t-slow) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stream .story { animation: rise var(--t-base) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .livedot::before { animation: none; }
}