/* pip-app dashboard styles, built on Pip Design System v3 (PIP-481 Task 11).
   Owner of every rule and value: pip-landing DESIGN-SYSTEM.md. This file reads ROLE tokens only
   (pip-v3.css, loaded first and copied verbatim from pip-landing tokens/pip-v3.css: never hand-edit it).
   Light only: DS v3 retired dark (decision #22), so there is deliberately no dark block.
   Approved components only. Each rule names the DS component it renders. */

/* ---------- Fonts: DS §Source of truth. Copied from pip-landing fonts/ (vendor-fonts.py output).
   Bricolage 400-800 (variable) and Plex Mono 400 + 600 only: the DS bans Plex 500.
   ⚠️ Re-cut 2026-10-15 (PIP-481) to a FIXED set, not pipthebot.com's characters: printable ASCII, Latin-1,
   curly quotes, en/em dash, ellipsis, bullet, middle dot, U+2212 minus, euro, plus every character in
   src/copy.mjs. A character outside that set renders in a fallback font: widen the set and re-run. ---------- */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-ext-normal.6e98109f.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-normal.2ecb72fd.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-normal.86a91eeb.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-normal.deaf78e1.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-normal-600.26179642.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-normal-600.a597fbf8.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Layout. --app-col is the site's reading column: build_shell.py `article`, `.watch`,
   `.related`, `.cta-wrap` are all 680px. Gutter: --space-4 on a phone, --gutter from 600px. ---------- */
:root { --app-col: 680px; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--t-body); }

.app-bar, main { max-width: var(--app-col); margin: 0 auto; padding-inline: var(--space-4); }
main { padding-block: var(--space-8) var(--space-16); }

/* Focus: DS Baseline, every interactive element shows --focus-ring. The transparent outline keeps a
   visible ring in forced-colours mode, where box-shadow is dropped. */
a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
a:focus-visible:not(.btn) { border-radius: var(--radius-xs); } /* .btn keeps its own --radius-md under the ring */

/* ---------- Lockup A (DS §Lockup and dots). Ported from build_shell.py `.brand` / `.pip-dot` with v3
   role names (--outline for v1 --ink). Identity, not a T3 card. Not a link, so nothing focusable precedes
   <main> and no bypass block is needed yet. ---------- */
.app-bar { display: flex; align-items: center; min-height: var(--control-xl); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.045em; line-height: 1; color: var(--text); }
.pip-dot { display: inline-block; flex: none; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--accent); border: var(--dot-ring) solid var(--outline); box-shadow: var(--dot-offset) var(--dot-offset) 0 0 var(--outline); margin-right: .2em; transform: translateY(.04em); }

/* ---------- Heading (DS §Heading): Bricolage, 800 for h1/h2, never 700, never Plex.
   Placeholders and long words must not force a horizontal scroll at 375px. ---------- */
h1, h2 { margin: 0; color: var(--text); overflow-wrap: anywhere; }
h1 { font: var(--t-display-2); letter-spacing: var(--ls-display); }
h2 { font: var(--t-h2); letter-spacing: var(--ls-head); margin-bottom: var(--space-4); }
/* The date inside a section head is a sub-line of the heading, not a Figure: Heading is never Plex. */
h2 .sub { display: block; margin-top: var(--space-1); font: var(--t-body); letter-spacing: normal; color: var(--text-3); }

section { margin-top: var(--space-12); }

/* The lede under the h1 (demo_banner). Plain text, not a box: DS has no notice component. */
.banner { margin: var(--space-3) 0 0; font: var(--t-body-l); color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- Frame (DS §Frame), --radius-md on --surface: the offline and on-its-way notices.
   role="status" is in the markup; the words carry the meaning, never a colour. ---------- */
.offline, .pending {
  margin: var(--space-6) 0 0; padding: var(--space-3) var(--space-4);
  border: var(--t3-stroke) solid var(--outline); border-radius: var(--radius-md); background: var(--surface);
  font: var(--t-body-s); color: var(--text); overflow-wrap: anywhere;
}

/* ---------- List row (DS §List row): holdings. Frameless rows on a 1px --border top edge, first row none.
   Ticker = Figure (DS §Figure): Plex 600 at --t-figure-m, .03em, ink (the email's tickerText()).
   The ticker cell is 6ch of its own face, so reasons align for tickers up to six characters. ---------- */
.rows, .dates { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.row:first-child { border-top: none; }
.ticker { flex: none; min-width: 6ch; font: var(--t-figure-m); font-weight: 600; letter-spacing: .03em; color: var(--figure); }
.reason { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.updated { margin: var(--space-3) 0 0; font: var(--t-caption); color: var(--text-3); }
.fig { font-family: var(--font-figure); letter-spacing: var(--ls-figure); }
.updated .fig { font: var(--t-figure-s); }

/* ---------- Frame (DS §Frame), --radius-lg on --bg, no offset: the briefing body. Pip's facts, so
   never T3 (rule #19). Body is sanitizer output: only b, i, blockquote, a (src/render/briefing.mjs). ---------- */
.briefing {
  padding: var(--space-4); border: var(--t3-stroke) solid var(--outline); border-radius: var(--radius-lg); background: var(--bg);
  font: var(--t-body); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.briefing b { font-weight: 600; } /* the UA default is 700, which neither family ships (DS §Heading, fonts.never) */
.briefing blockquote { margin: var(--space-2) 0; padding-left: var(--space-4); color: var(--text-2); }
.briefing a, .back a { color: var(--link); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.briefing a:hover, .back a:hover { text-decoration-color: var(--text); }

/* ---------- Button primary (DS §Button): ink fill, one per view, 44px. Ported from build_shell.py
   `.btn.btn-primary`. Hover underlines rather than reaching for a primitive grey. ---------- */
.cta { margin: var(--space-10) 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-min); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font: var(--t-body); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.btn-primary { background: var(--surface-inverse); color: var(--text-inverse); }
.btn-primary:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- List row (DS §List row; `.dates li` is in its web_find): the archive. Each link is the
   whole row, 44px tall. Dates = Figure. ---------- */
.dates li { border-top: 1px solid var(--border); }
.dates li:first-child { border-top: none; }
.dates a { display: flex; align-items: center; min-height: var(--touch-min); padding-block: var(--space-1); color: var(--text); text-decoration: none; }
.dates a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dates .fig { font: var(--t-figure-m); }

/* Empty states: archive_empty, briefing_none_for_date. */
.empty { margin: 0; color: var(--text-2); }

/* The back link on the archive and 404 pages: a 44px target above the h1. */
.back { margin: 0 0 var(--space-4); }
.back a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.demo > h1 + .briefing, .demo > h1 + .offline + .briefing, .demo > h1 + .empty { margin-top: var(--space-6); }
.demo > h1 + .back { margin: var(--space-4) 0 0; }

/* ---------- Phone first: everything above is the 375px layout. ---------- */
@media (max-width: 599px) {
  .cta .btn { display: flex; width: 100%; }
}
@media (min-width: 600px) {
  .app-bar, main { padding-inline: var(--gutter); }
  main { padding-top: var(--space-12); }
  .briefing { padding: var(--pad-card) var(--space-6); }
}