/* NewSpace RFP — Launch Cinema (redesign 2026-09-02, docs/REDESIGN-BRIEF.md).
   White and black surfaces, one signal red, Barlow at scale, rules instead of boxes.
   Tokens live in tokens.css. Selector names are stable: the client scripts depend
   on them, so this file restyles the same vocabulary rather than renaming it. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: clip; /* the hero and the band bleed to the viewport edge */
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

a { color: inherit; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(.desk, .card, .rfp, .job-row, .ss-hit, .kpi, .stat-link, .watch-card, .mission-card,
    .pinned-row, .res, .week-chip, .cal-cell, .sup, .src-row):hover { color: var(--ink); text-decoration: none; }
:is(.desk, .card, .rfp, .mission-card, .watch-card, .sup):hover :is(h3, h4, strong),
.job-row:hover .job-title, .ss-hit:hover .ss-title, .pinned-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.mono, .num { font-variant-numeric: tabular-nums; }

/* small labels: sentence case, weight and color do the work, never tracking or caps */
.eyebrow, .card-meta, .chip, .facet-n, .drawer-kind, .cal-rel, .stat span:last-child,
.sup-hq, .job-dept, .archive th, .fact dt, .masthead-top {
  font-size: 13px;
  color: var(--ink-dim);
}

/* ---------- icons ---------- */
.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.ico-lg { width: 20px; height: 20px; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--base); }
.masthead-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
}
.masthead-mid { display: flex; align-items: center; gap: 16px; padding: 16px 0 12px; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 10px; }
.brand a { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.brand a:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.tagline { color: var(--ink-dim); margin: 0; font-size: 14px; flex: 1; }
.reg-warm .masthead-mid { padding: 18px 0 12px; }

.nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 10px 14px 10px 0; margin-right: 12px; text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { text-decoration: none; color: var(--ink-dim); }
.nav a.active { border-bottom-color: var(--ink); }

.theme-btn {
  background: none; border: 1px solid var(--rule); color: var(--ink-dim);
  width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink); }
.support-btn { text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; gap: 5px; padding: 8px 14px; border: 1px solid var(--ink); }
.support-btn:hover { background: var(--ink); color: var(--base); text-decoration: none; }

/* ---------- the front page: hero photograph ---------- */
.cine { position: relative; margin: 0 calc(50% - 50vw); background: #000; color: #fff; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.cine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 66%), linear-gradient(180deg, rgba(0,0,0,0) 22%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.86) 100%); } /* unslop-ignore: a photographic scrim under the headline, not decoration */
.cine-body { position: relative; padding: 0 max(28px, calc(50vw - 660px)) 52px; max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.cine-kicker { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.78); }
.cine h2 { margin: 0; font-size: 60px; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; }
.cine h2 a { text-decoration: none; }
.cine h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cine p { margin: 0; font-size: 20px; line-height: 1.4; color: #e6e6e6; max-width: 46ch; }
.cine-link { font-size: 16px; font-weight: 600; text-decoration: none; margin-top: 4px; }
.cine-milestone { margin: 0; font-size: 15px; color: #e6e6e6; max-width: 52ch; }
.cine-milestone a { color: inherit; }
.cine-milestone-k { font-weight: 600; color: #fff; margin-right: 6px; }
.cine-credit { margin: 0; position: absolute; right: max(28px, calc(50vw - 660px)); bottom: 52px; font-size: 12px; color: rgba(255,255,255,.7); }
.cine.cine-type { min-height: 0; background: var(--black); color: var(--on-black); }
.cine.cine-type .cine-kicker { color: var(--on-black-dim); }
.cine.cine-type p { color: var(--on-black); }
.cine.cine-type .cine-body { padding-top: 56px; }

/* ---------- the front page: the working grid ---------- */
.front { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding: 40px 0 0; }
.front > * { min-width: 0; }
.front-brief { grid-column: span 5; padding-right: 32px; border-right: 1px solid var(--rule); }
.front-soon { grid-column: span 4; }
.front-week { grid-column: span 3; }
.front h3.front-label { font-size: 13px; font-weight: 600; color: var(--ink-dim); margin: 0 0 12px; }
.front h3.front-label:not(:first-child) { margin-top: 22px; }
.week-list .due { font-size: 14px; color: var(--ink-dim); }
.front-brief h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.front-brief h2 a { text-decoration: none; }
.front-brief p { margin: 0 0 12px; color: var(--ink-dim); font-size: 16px; }
.front-link { font-size: 15px; font-weight: 600; text-decoration: none; }
.soon-list { list-style: none; margin: 0; padding: 0; }
.soon-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.soon-list a { font-size: 16px; font-weight: 600; text-decoration: none; }
.soon-list .due { font-size: 15px; white-space: nowrap; color: var(--ink-dim); }
.soon-list .due.is-soon { color: var(--signal); font-weight: 600; }
.week-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.week-list strong { font-weight: 700; }
.front-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ink-dim); text-decoration: none; }

/* ---------- the front page: the black band (claims ledger) ---------- */
.band { margin: 44px calc(50% - 50vw) 0; background: var(--black); color: var(--on-black); padding: 36px max(28px, calc(50vw - 660px)) 40px; }
.band a { color: inherit; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.band-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--on-black-dim); }
.band-head a { font-size: 14px; font-weight: 500; color: var(--on-black-dim); text-decoration: none; }
.ledger { display: flex; flex-direction: column; }
.ledger-row { text-decoration: none; display: grid; grid-template-columns: 170px 1fr 120px 110px; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--on-black-rule); font-size: 15px; line-height: 1.4; align-items: baseline; }
.ledger-row strong { font-weight: 600; }
.ledger-row:hover { text-decoration: none; }
.ledger-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.ledger-row .ledger-claim { color: var(--on-black-dim); }
.ledger-row .ledger-due { color: var(--on-black-dim); }
.ledger-state { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ledger-state svg { flex: none; }
.ledger-state.is-alert { color: var(--signal-on-black); }

/* ---------- today module (R22) ---------- */
.today { margin: 40px 0 0; border-top: 3px solid var(--ink); padding: 18px 0 0; }
.today-head { display: flex; align-items: baseline; gap: 12px; }
.today-head .count { margin-left: auto; color: var(--ink-dim); font-size: 14px; }
.today-list { display: flex; flex-direction: column; margin: 4px 0 10px; }
.today-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; }
.today-item:last-child { border-bottom: 0; }
.today-item:hover { text-decoration: none; }
.today-item:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.today-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.today-main strong { font-size: 15px; font-weight: 600; }
.today-sub { font-size: 13px; color: var(--ink-dim); }
.today-time { font-size: 14px; color: var(--ink-dim); white-space: nowrap; }
.week-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; border-top: 1px solid var(--rule-soft); scrollbar-width: none; }
.week-scroll::-webkit-scrollbar { display: none; }
.week-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 1px solid var(--rule); padding: 6px 10px; font-size: 13px; }
.week-chip:hover { border-color: var(--ink); text-decoration: none; }
.week-day { font-size: 12px; color: var(--ink-dim); }
.week-chip .ico { width: 13px; height: 13px; }
.week-t { white-space: nowrap; }

/* countdowns: urgency is red or it is plain */
.due.is-soon { color: var(--signal); }
.due.is-live { color: var(--ink); font-weight: 600; }

/* ---------- sections & cards ---------- */
.section { margin: 44px 0; }
.section-head { display: flex; align-items: baseline; gap: 14px; border-top: 3px solid var(--ink); margin-bottom: 18px; padding-top: 10px; }
.section-head h2 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.section-head p { color: var(--ink-dim); margin: 0; font-size: 14px; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; }
.card-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-content: start; }

.card { background: var(--base); border-top: 1px solid var(--rule); display: flex; flex-direction: column; }
.card-img { background: var(--panel2); aspect-ratio: 16/9; overflow: hidden; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img.noimg img { display: none; }
.card-img.noimg::after { content: ''; position: absolute; inset: 0; background: var(--panel2); }
.card-body { padding: 12px 0 14px; }
.card h3 { font-size: 18px; line-height: 1.25; margin: 6px 0 6px; font-weight: 600; letter-spacing: -.01em; }
.card-big h3 { font-size: 26px; line-height: 1.15; }
.card h3 a { text-decoration: none; }
.card p { font-size: 14px; color: var(--ink-dim); margin: 0; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-meta time { font-size: 13px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.chip { color: var(--ink-dim); font-weight: 500; }
.chip-hot { color: var(--signal); font-weight: 600; }
.chip-new { color: var(--ink); font-weight: 600; }
.chip-open { color: var(--ink); font-weight: 600; }
.chip-closed { color: var(--ink-faint); }
.chip-dim { color: var(--ink-faint); }

/* ---------- page heads ---------- */
.page-head { margin: 32px 0 8px; max-width: 900px; }
.page-head h2 { font-size: 40px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.page-head p { color: var(--ink-dim); font-size: 17px; }
.rule-head { font-size: 20px; font-weight: 700; letter-spacing: -.01em; border-top: 3px solid var(--ink); padding-top: 10px; margin: 40px 0 16px; }
.rule-head .count { font-size: 14px; color: var(--ink-dim); font-weight: 400; margin-left: 8px; }
.rule-head-sm { font-size: 15px; font-weight: 600; border-top: 1px solid var(--rule); padding-top: 8px; margin: 28px 0 12px; }
.rule-head-sm .count { font-size: 13px; color: var(--ink-dim); font-weight: 400; margin-left: 8px; }
/* ---------- toolbars & filters ---------- */
.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0;
  position: sticky; top: 0; background: var(--base); padding: 10px 0; z-index: 5;
  border-bottom: 1px solid var(--rule);
}
.toolbar input, .toolbar select, .filter-bar input[type="search"] {
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
 padding: 8px 11px; font: inherit; font-size: 13px;
}
.toolbar input { flex: 1 1 250px; }
.count { color: var(--ink-dim); font-size: 12px; margin-left: auto; }

.filter-bar { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input[type="search"] { flex: 0 1 210px; }
.fmenu { position: relative; }
.fbtn { display: inline-flex; align-items: center; gap: 7px; background: none; color: var(--ink); border: 1px solid var(--rule); padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.fbtn:hover, .fbtn[aria-expanded="true"] { border-color: var(--accent-ink); }
.fbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.caret { font-size: 9px; color: var(--ink-dim); transition: transform var(--t-fast); }
.fbadge {
  background: var(--accent); color: var(--base);
  font-size: 10.5px; font-weight: 600; padding: 0 6px; line-height: 16px;
}
.fpanel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; width: 270px;
  background: var(--panel); border: 1px solid var(--rule);
  padding: 7px;
}
.fclear { background: none; border: none; color: var(--accent-ink); font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px; }
.fclear:hover { text-decoration: underline; }
.facet-rows { display: flex; flex-direction: column; gap: 1px; }
.facet-scroll { max-height: 300px; overflow-y: auto; }
.facet-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
 font-size: 13px; cursor: pointer;
}
.facet-row:hover { background: var(--panel2); }
.facet-row.zero { opacity: .38; }
.facet-row input { accent-color: var(--accent); margin: 0; }
.facet-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-n { color: var(--ink-dim); letter-spacing: 0; }
.swatch { width: 9px; height: 9px; flex: 0 0 auto; }
/* Agency and company marks. Most are dark artwork on transparency, so on a dark
   panel they disappear: SpaceX's averages luminance 77 against a panel at 26. A
   light chip behind the mark makes every one legible, dark or light, which
   inverting or tinting cannot do. They are also wordmarks rather than squares
   (SpaceX's is 1774x187), so the height is fixed and the width follows. */
.orglogo {
  object-fit: contain; flex: 0 0 auto; vertical-align: -3px;
  width: auto; max-width: 74px;
  background: #fff; padding: 1px 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
/* In a light theme the chip would vanish into the page, so it gets an edge. */
:root[data-theme="light"] .orglogo { box-shadow: 0 0 0 1px var(--rule); }
.orglogo-gap { width: 15px; flex: 0 0 auto; }
.k-launch { background: var(--k-launch); }
.k-test { background: var(--k-test); }
.k-event { background: var(--k-event); }
.k-hearing { background: var(--k-hearing); }
.k-rfp { background: var(--k-rfp); }
/* Conferences and earnings are context around the schedule rather than
   operations on it, and the five categorical hues are the most a reader with
   colour vision deficiency can tell apart. Rather than spend a sixth and
   seventh hue and collapse that separation, these two stay neutral and let
   their icons carry the meaning. */
.k-conference, .k-earnings { background: var(--ink-faint); }
.sw-ok { background: var(--go); }
.sw-mid { background: var(--caution); }
.sw-bad { background: var(--alarm); }
.sw-test { background: var(--k-test); }

/* ---------- RFP list (cold register) ---------- */
.rfp-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 36px; }
.rfp { display: flex; gap: 14px; border-top: 1px solid var(--rule); padding: 12px 0; }
.rfp:hover { border-color: var(--ink-faint); }
/* A flex item defaults to min-width:auto, which means it refuses to shrink below
   the widest thing inside it. A notice whose subject chip reads "Response date
   passed" is wider than a phone, so the whole index scrolled sideways at 375px
   and the cards ran off the right edge. This is the fix for that, and the
   wrapping below is what lets the meta row use the space it gets. */
.rfp-body { min-width: 0; flex: 1; }
.rfp-body .card-meta { flex-wrap: wrap; row-gap: 4px; }
.rfp h3, .rfp-org, .rfp-desc { overflow-wrap: anywhere; }
.rfp-mono {
  flex: 0 0 52px; height: 52px; background: var(--panel2);
  border: 1px solid var(--rule); display: grid; place-items: center;
 font-weight: 600; color: var(--accent-ink); font-size: 12.5px;
}
.rfp h3 { margin: 5px 0 3px; font-size: 15px; font-weight: 600; }
.rfp h3 a { text-decoration: none; }
.rfp-org { color: var(--ink-dim); font-size: 12px; margin: 0 0 4px; }
.rfp-org .sol { font-size: 11.5px; }
.rfp-desc { color: var(--ink-dim); font-size: 12.5px; margin: 0; }

/* ---------- calendar ---------- */
.cal-app { margin: 14px 0 36px; }
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.cal-head h3 { font-size: 19px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.cal-head .count { margin-left: auto; }
.cal-nav { display: flex; gap: 5px; }
.cal-nav button {
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
 padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.cal-nav button:hover:not(:disabled) { border-color: var(--accent-ink); color: var(--accent-ink); }
.cal-nav button:disabled { opacity: .32; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 10px; color: var(--ink-dim); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-cell {
  background: var(--panel); border: 1px solid var(--rule);
  min-height: 88px; padding: 5px; text-align: left; color: var(--ink); font: inherit;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.cal-cell:hover:not(.empty) { border-color: var(--ink-faint); }
.cal-cell.empty { background: none; border-color: transparent; cursor: default; }
.cal-cell.is-out { opacity: .42; }
.cal-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cal-num { font-size: 11.5px; color: var(--ink-dim); }
.cal-cell.is-today .cal-num { color: var(--accent-ink); font-weight: 600; }
.cal-chip {
  font-size: 10px; line-height: 1.4; padding: 1px 5px;
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.cal-chip.k-launch { color: var(--k-launch-on); }
.cal-chip.k-test { color: var(--k-test-on); }
.cal-chip.k-event { color: var(--k-event-on); }
.cal-chip.k-hearing { color: var(--k-hearing-on); }
.cal-chip.k-rfp { color: var(--k-rfp-on); }
.cal-chip.k-conference, .cal-chip.k-earnings { color: var(--ink); background: var(--panel2); border-left-color: var(--ink-faint); }
.cal-chip .ico { width: 10px; height: 10px; stroke-width: 2.2; }
.cal-more { font-size: 10px; color: var(--ink-dim); }
.cal-drawer { grid-column: 1 / -1; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 13px 0; margin-bottom: 4px; }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.drawer-head h4 { font-size: 15px; margin: 0; font-weight: 600; }
.cal-rel { color: var(--ink-dim); }
.drawer-close {
  margin-left: auto; background: none; border: 1px solid var(--rule); color: var(--ink-dim);
 width: 26px; height: 26px; font-size: 14px; cursor: pointer;
}
.drawer-close:hover { color: var(--ink); border-color: var(--ink-faint); }
.drawer-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 9px;
 text-decoration: none;
}
.drawer-item:hover { background: var(--panel); }
.drawer-item .swatch { width: 7px; height: 7px; }
.k-ink-launch { color: var(--k-launch-ink); }
.k-ink-test { color: var(--k-test-ink); }
.k-ink-event { color: var(--k-event-ink); }
.k-ink-hearing { color: var(--k-hearing-ink); }
.k-ink-rfp { color: var(--k-rfp-ink); }
.k-ink-conference, .k-ink-earnings { color: var(--ink-dim); }
.drawer-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.drawer-main strong { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-sub { color: var(--ink-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-kind { color: var(--ink-dim); }
.drawer-time { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.drawer-empty { color: var(--ink-dim); font-size: 13px; margin: 4px 2px; }

/* ---------- scoreboard ---------- */
.scorestats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: 18px 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; margin: 4px 0 14px; }
.stat { border-top: 1px solid var(--rule); padding: 12px 0 10px; text-align: left; }
.stat .bignum { font-size: 28px; display: block; line-height: 1.1; }
.stat span:last-child { color: var(--ink-dim); }
.ok-t { color: var(--go); } .mid-t { color: var(--caution); } .bad-t { color: var(--alarm); }
.tl { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 8px; }
.tl-t { width: 8px; height: 22px; display: block; transition: transform var(--t-fast); }
.tl-t:hover { transform: scaleY(1.3); }
.tl-ok { background: var(--go); }
.tl-mid { background: var(--caution); }
.tl-bad { background: var(--alarm); }
.tl-test { box-shadow: 0 4px 0 -1px var(--k-test); }
.tl-legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-dim); font-size: 12px; margin: 10px 0 4px; }
.tl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cadence { width: 100%; max-width: 780px; height: auto; display: block; margin: 8px 0 10px; }
.cbar:hover path, .cbar:hover rect { opacity: .8; }
/* A month with flights in it opens them. The hit area is a transparent rect wider than the
   bar, so a short month is as easy to press as a tall one. */
.cbar-live { cursor: pointer; }
.cbar-live:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cbar-live:hover .cbar-hit { fill: var(--panel); }
/* A row that opens a card, rather than one that goes nowhere. The colour on hover is the
   same signal a link gives, scoped to the row so it cannot leak to an ancestor. */
.archive tr.row-card { cursor: pointer; }
.archive tr.row-card:hover > td { background: var(--panel); color: var(--accent-ink); }
.archive tr.row-card:hover > td a { color: var(--accent-ink); }
.archive tr.row-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
/* The card itself reuses the drill panel's measure; only its own head needs setting. */
.dcard > h2 { font-size: 21px; margin: 0 0 6px; }
.dcard > h2 + .finePrint { margin-bottom: 14px; }
.dcard .tiles { margin-bottom: 4px; }
.meter { display: inline-block; width: 58px; height: 6px; background: var(--panel2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.meter span { display: block; height: 100%; background: var(--go); }
.dim-row td { color: var(--ink-dim); }
.score-row {
  display: grid; grid-template-columns: 190px 1fr 118px; gap: 16px;
  background: var(--panel); border: 1px solid var(--rule);
  margin: 10px 0; overflow: hidden;
}
.score-row .card-img { aspect-ratio: auto; height: 100%; min-height: 128px; }
.score-body { padding: 13px 4px 13px 0; }
.score-body h3 { margin: 5px 0; font-size: 17px; font-weight: 600; }
.score-body p { color: var(--ink-dim); font-size: 13px; margin: 3px 0; }
.fail-note { color: var(--alarm) !important; }
.coverage { font-size: 12px !important; }
/* One decoration, not two: these sit in prose, so the shared underline covers them. */
.coverage a { color: var(--ink); text-decoration: none; }
.coverage a:hover { text-decoration: underline; }
.score-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border-left: 1px solid var(--rule); padding: 12px;
}
.score-badge .grade { font-size: 34px; font-weight: 600; }
.score-badge .pts { font-size: 13px; color: var(--ink-dim); }
.score-badge .lbl { font-size: 10px; color: var(--ink-dim); text-align: center; }
.score-ok .grade { color: var(--go); }
.score-mid .grade { color: var(--caution); }
.score-bad .grade { color: var(--alarm); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 12px 0 28px; }
.archive { width: 100%; border-collapse: collapse; font-size: 13px; }
.archive th { text-align: left; color: var(--ink); padding: 9px 13px; border-bottom: 1px solid var(--ink); background: var(--base); position: sticky; top: 0; font-weight: 600; }
.archive td { padding: 7px 13px; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
.archive td:nth-child(2) { white-space: normal; min-width: 210px; }
.archive td:nth-child(n+4) { font-size: 12.5px; }
.org-cell { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.archive tr:hover td { background: var(--panel); }
.archive a { text-decoration: none; }
.archive a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.archive tbody tr:last-child td { border-bottom: 0; }
/* Row cap, driven by assets/tables.js. Hiding by position rather than by tagged
   rows keeps a sorted table honest: the ten on show are always the top ten. */
.archive.cap-on tbody tr:nth-child(n+11) { display: none; }
.row-more { display: block; width: 100%; margin: 0 0 4px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink-dim); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.row-more:hover { color: var(--ink); text-decoration: underline; }

/* A statistic tile is a doorway: every number on a profile is the size of a set we
   hold, so it carries the affordance of going there. */
.stat-link { position: relative; text-decoration: none; display: block; }
.stat-link:hover { border-top-color: var(--ink); }
.stat-go { position: absolute; top: 10px; right: 12px; color: var(--accent-ink);
  font-size: 13px; opacity: 0; transition: opacity var(--t-fast); }
.stat-link:hover .stat-go, .stat-link:focus-visible .stat-go { opacity: 1; }

/* The shared faceted filter, wherever it is hosted. The jobs index styles the
   same class names; this adds only what a hosted instance needs. */
.facet-host { margin: 8px 0 12px; }
.facet-host .filter-bar { margin: 0; flex-wrap: wrap; }
.facet-host .fq {
  flex: 1 1 240px; min-width: 0; padding: 8px 11px; font: inherit; font-size: 13px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule);

}
.facet-host .fq:focus { outline: none; border-color: var(--accent-ink); }
.fcount { color: var(--ink-dim); font-size: 12px; margin-left: auto; }
/* Elements a facet fades instead of hiding, so a slice reads against the whole. */
.faded { opacity: .12; }

/* ---------- collecting and sharing ---------- */

/* The selection checkbox, added to any row that declares itself shareable. It stays
   quiet until hovered or ticked, so a page of rows does not read as a form. */
.cbox {
  flex: 0 0 auto; width: 19px; height: 19px; padding: 0; margin-right: 9px;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: transparent; background: transparent;
  border: 1px solid var(--rule);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  vertical-align: -4px;
}
/* Present, hidden, until a reader asks to select. A ticked box stays visible either
   way: a selection you cannot see is a selection you cannot undo. */
body.selecting .cbox, .cbox.on { display: inline-flex; }
.has-cbox:hover .cbox { border-color: var(--ink-faint); }
.cbox:hover { border-color: var(--accent-ink); color: var(--ink-faint); }
.cbox.on { color: var(--base); background: var(--accent); border-color: var(--accent); }
tr .cbox { margin-right: 7px; }
/* Outside a table the box sits in its own gutter, and the gutter only exists while a
   reader is selecting. Making the host a flexbox instead laid a supplier card's name,
   location and description out in a row, which is a layout change every reader paid
   for so that a few could tick a box. */
.has-cbox:not(td) { position: relative; }
.has-cbox:not(td) > .cbox { position: absolute; left: 9px; top: 13px; margin: 0; }
body.selecting .has-cbox:not(td),
.has-cbox:not(td):has(> .cbox.on) { padding-left: 38px; }

/* The tray: only present once something is selected, and it says what it holds. */
.ctray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; background: var(--panel2);
  border: 1px solid var(--accent-dim);

}
.ctray-n { font-size: 13px; color: var(--ink); }
@media (max-width: 700px) {
  .ctray { left: 10px; right: 10px; transform: none; bottom: 66px; justify-content: space-between; }
  .ctray-n { font-size: 12px; }
}

/* The share panel. Same furniture as the drill panel, narrower, since it is a list
   and a row of targets rather than a page. */
.cshare {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.98);
  width: min(560px, calc(100vw - 28px)); max-height: min(80vh, 720px); overflow: auto;
  z-index: 70; padding: 0 20px 20px;
  background: var(--base); border: 1px solid var(--rule);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast);
}
.cshare.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cshare-bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 0 12px; margin-bottom: 4px;
  background: var(--base); border-bottom: 1px solid var(--rule-soft);
}
.cshare-bar strong { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.cshare-list { margin: 6px 0 14px; padding-left: 22px; font-size: 13px; }
.cshare-list li { margin-bottom: 7px; }
.cshare-list a { text-decoration: none; }
.cshare-sub, .cshare-sub2 { display: block; color: var(--ink-dim); font-size: 12px; }
.cshare-sub { margin: 4px 0 14px; }
.cshare-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cshare-t {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  font: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule);

}
.cshare-t:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* Share the view you are looking at, wherever there is a filter or a search box. */
.share-view {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px;
  font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--rule);

}
.share-view:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.share-view[aria-pressed="true"] { color: var(--base); background: var(--accent); border-color: var(--accent); }
.share-tools { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }

/* ---------- the map ---------- */
.mapwrap { position: relative; margin: 6px 0 20px; }
.mp-head { display: flex; align-items: baseline; gap: 12px; }
.mp-head .rule-head-sm { flex: 1; margin-bottom: 6px; }
.mp-scale { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.mp-ctl { display: flex; gap: 5px; }
.mp-ctl button {
  font: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer; line-height: 1.5;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--rule);

}
.mp-ctl button:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* The map itself: no fill anywhere, one stroke weight at every zoom. The background is
   the page, which is what makes it sit in either theme without a plate. */
.mapchart {
  display: block; width: 100%; height: auto; background: transparent;
  border: 1px solid var(--rule-soft);
  touch-action: none;                       /* dragging the map is not scrolling the page */
}
[data-map] .mapchart { cursor: grab; }
[data-map] .mapchart:active { cursor: grabbing; }
/* vector-effect is not inherited, so it has to land on the paths themselves. */
.mp-land path { vector-effect: non-scaling-stroke; stroke-width: 1; }
.mp-pins circle {
  fill: var(--accent); fill-opacity: .8; stroke: var(--base); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mp-pin.is-hq circle { fill: var(--accent-ink); fill-opacity: .95; }
.mp-pin.is-many circle { fill-opacity: .95; }
.mp-pins text { fill: #fff; font-weight: 600; pointer-events: none; }
.mp-pin { cursor: pointer; }
.mp-pin:hover circle, .mp-pin:focus-visible circle { fill: var(--k-rfp-ink); fill-opacity: 1; }

/* The panel a pin opens: who is at this place, with their mark. */
.mp-list {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: min(320px, calc(100% - 24px)); max-height: 62%; overflow: auto;
  padding: 12px 14px; background: var(--panel2);
  border: 1px solid var(--accent-dim);

}
.mp-list-h { margin: 0 22px 8px 0; font-size: 12px; color: var(--ink-dim); }
.mp-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mp-list li { font-size: 13px; }
.mp-list a { display: flex; align-items: center; gap: 7px; text-decoration: none; }
.mp-kind { display: block; color: var(--ink-dim); font-size: 11.5px; margin-top: 1px; }
.mp-close {
  position: absolute; top: 8px; right: 9px; width: 24px; height: 24px; padding: 0;
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--ink-dim); background: none; border: 1px solid var(--rule);
}
.mp-close:hover { color: var(--ink); border-color: var(--accent-ink); }
.mapwrap-mini .mapchart { border-color: var(--rule-soft); }
.mapwrap-mini { margin: 0 0 18px; }

/* ---------- what moved ---------- */
.ch-list { display: flex; flex-direction: column; margin-bottom: 18px; }
.ch-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 116px 84px;
  gap: 12px; align-items: baseline; padding: 9px 12px;
  text-decoration: none; border-bottom: 1px solid var(--rule-soft);
}
a.ch-row:hover { background: var(--panel); }
a.ch-row:hover .ch-text { color: var(--accent-ink); }
.ch-kind { font-size: 12px; font-weight: 600; text-align: left; color: var(--ink-dim); }
/* The three kinds read differently at a glance: something appeared, something went, something
   about a thing we already had is now different. */
.ch-arrived { color: var(--go); border-color: color-mix(in oklab, var(--go) 40%, transparent); }
.ch-left { color: var(--ink-faint); }
.ch-cluster { color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent-ink) 40%, transparent); }
.ch-changed { color: var(--k-rfp-ink); border-color: color-mix(in oklab, var(--k-rfp-ink) 40%, transparent); }
.ch-text { font-size: 13.5px; }
.ch-unit, .ch-when { color: var(--ink-dim); font-size: 11.5px; }
.ch-when { text-align: right; }
@media (max-width: 760px) {
  .ch-row { grid-template-columns: auto 1fr; row-gap: 3px; }
  .ch-text { grid-column: 1 / -1; }
  .ch-unit { grid-column: 1; }
  .ch-when { grid-column: 2; text-align: right; }
}

/* The front-page digest: the same rows, a shorter list, and a way to the rest. */
.ch-digest { margin: 0 0 22px; }
.ch-digest .ch-row:first-child { border-top: 1px solid var(--rule-soft); }

/* A notice's subject, so a reader can see on the card whether it is space work, missile work,
   or something that matched only on a manufacturing code the two share. */
.chip-subj-space { border-color: color-mix(in oklab, var(--go) 45%, transparent); color: var(--go); }
.chip-subj-missile { border-color: color-mix(in oklab, var(--k-hearing-ink) 45%, transparent); color: var(--k-hearing-ink); }
.chip-subj-code { border-color: var(--rule); color: var(--ink-dim); }

/* The blocks that put a notice next to the rest of the record. */
.related-blocks { margin-top: 26px; padding-top: 4px; border-top: 1px solid var(--rule); }
.related-blocks .desk-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---------- calendar reminders ---------- */
.ics-btn { display: inline-flex; align-items: center; gap: 8px; }
.ics-btn .ico { width: 16px; height: 16px; }
.cal-import { margin: 0 0 12px; }
.ics-mini {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  font-size: 11.5px; text-decoration: none; white-space: nowrap;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--rule);

}
.ics-mini:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.ics-mini .ico { width: 13px; height: 13px; }

/* Share a figure. The tile is already a link to its context, so the share control is
   its own small target in the corner rather than a competing click on the number. */
.stat, .kpi, .metric-head { position: relative; }
.fig-share {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-faint); background: var(--panel2);
  border: 1px solid var(--rule);
  opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fig-share .ico { width: 15px; height: 15px; }
.stat:hover .fig-share, .kpi:hover .fig-share, .metric-head:hover .fig-share,
.fig-share:focus-visible { opacity: 1; }
.fig-share:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
/* On a touch screen there is no hover to reveal it. */
@media (hover: none) { .fig-share { opacity: .7; } }
/* The linked tile already reserves its top-right for an arrow. */
.stat-link .stat-go, a.kpi .kpi-go { right: 40px; }

/* ---------- site search ---------- */
.site-search { margin: 4px 0 18px; }
.ss-row { display: flex; gap: 8px; align-items: stretch; }
.ss-input {
  flex: 1; min-width: 0; padding: 13px 16px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule);

}
.ss-input:focus { outline: none; border-color: var(--accent-ink); }
.ss-adv {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 15px;
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--rule);

}
.ss-adv:hover, .ss-adv[aria-expanded="true"] { color: var(--ink); border-color: var(--accent-ink); }
.ss-panel { margin-top: 9px; }
.ss-panel .filter-bar { margin: 0; flex-wrap: wrap; }
.ss-sort {
  font: inherit; font-size: 12.5px; color: var(--ink); background: var(--base);
  border: 1px solid var(--rule); padding: 4px 6px; margin-left: 6px;
}
.ss-count { color: var(--ink-dim); font-size: 12.5px; margin: 11px 0 0; }
.ss-results { display: flex; flex-direction: column; }
.ss-hit {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 190px 92px;
  gap: 12px; align-items: baseline; padding: 10px 12px;
  text-decoration: none; border-bottom: 1px solid var(--rule-soft);
}
.ss-hit:hover { background: var(--panel); }
.ss-kind {
  font-size: 10.5px;
  color: var(--ink-dim);
}
.ss-title { font-size: 13.5px; }
.ss-org, .ss-date { color: var(--ink-dim); font-size: 12px; }
.ss-date { text-align: right; }
@media (max-width: 760px) {
  .ss-hit { grid-template-columns: 1fr auto; row-gap: 3px; }
  .ss-kind { grid-column: 1; }
  .ss-date { grid-column: 2; grid-row: 1; }
  .ss-title { grid-column: 1 / -1; }
  .ss-org { grid-column: 1 / -1; }
}

/* Applications a reader is tracking, with their own notes. */
.applied { margin: 14px 0 20px; }
.applied-btn {
  flex: 0 0 auto; margin-left: 10px; padding: 4px 9px; font: inherit; font-size: 11px;
  cursor: pointer; color: var(--ink-dim); background: transparent;
  border: 1px solid var(--rule); white-space: nowrap;
}
.applied-btn:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.applied-btn.on { color: var(--go); border-color: var(--go); }
.job-row.is-applied { border-left: 2px solid var(--go); padding-left: 9px; }
.applied-list { display: flex; flex-direction: column; gap: 8px; }
.applied-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--rule);
}
.applied-main a { text-decoration: none; }
.applied-sub { display: block; color: var(--ink-dim); font-size: 11.5px; margin-top: 2px; }
.applied-note {
  width: 100%; min-width: 0; padding: 7px 10px; font: inherit; font-size: 12.5px;
  color: var(--ink); background: var(--base); border: 1px solid var(--rule);
}
.applied-note:focus { outline: none; border-color: var(--accent-ink); }
@media (max-width: 700px) {
  .applied-row { grid-template-columns: 1fr auto; }
  .applied-note { grid-column: 1 / -1; }
}
body.has-ctray .tabbar { bottom: 0; }

/* Sortable columns. The header carries the affordance and the current direction,
   because a table that reorders on click has to say that it will. */
.archive.sortable th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.archive.sortable th.th-sort:hover { color: var(--ink); }
.archive.sortable th.th-sort::after {
  content: ' \2195'; opacity: .28; font-size: 10px; padding-left: 3px;
}
.archive.sortable th.th-sort:hover::after { opacity: .6; }
.archive.sortable th[data-dir="asc"]::after { content: ' \25B2'; opacity: 1; color: var(--accent-ink); }
.archive.sortable th[data-dir="desc"]::after { content: ' \25BC'; opacity: 1; color: var(--accent-ink); }

/* ---------- desks, jobs, suppliers ---------- */
.desk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-bottom: 8px; }
.desk { border-top: 1px solid var(--rule); padding: 12px 0 10px; text-decoration: none; }
.desk:hover { border-top-color: var(--ink); }
.desk h3 { margin: 7px 0 4px; font-size: 15px; font-weight: 600; }
.desk p { color: var(--ink-dim); font-size: 12px; margin: 0; }
.sup-hq { color: var(--ink-dim) !important; font-size: 10.5px !important; margin-bottom: 4px !important; }
.job { border-top: 1px solid var(--rule); padding: 12px 0; }
.job h3 { margin: 7px 0 4px; font-size: 16px; font-weight: 600; }
.job h3 a { text-decoration: none; }
.empty-note { border-top: 1px solid var(--rule); padding: 14px 0; color: var(--ink-dim); }
.job-org { margin-bottom: 24px; }
.job-rows { display: flex; flex-direction: column; }
.job-row {
  display: grid; grid-template-columns: 1.6fr 1fr .9fr 88px; gap: 12px;
  align-items: baseline; padding: 7px 9px; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; font-size: 13px;
}
.job-row:hover { background: var(--panel); }
.job-title { font-weight: 500; }
.job-dept, .job-loc { color: var(--ink-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-dept { letter-spacing: 0; text-transform: none; }
.job-date { color: var(--ink-dim); font-size: 11.5px; text-align: right; }

/* ---------- detail pages ---------- */
.detail { margin: 20px 0 36px; }
.detail-hero .card-img { aspect-ratio: 21/8; border: 1px solid var(--rule); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: 24px; margin-top: 18px; }
.detail-grid > * { min-width: 0; }
.detail-main h2 { font-size: 32px; margin: 10px 0; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.lede { font-size: 15.5px; line-height: 1.6; }
.cover-list { list-style: none; padding: 0; margin: 0; }
.cover-list li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.cover-list a { text-decoration: none; font-size: 15px; font-weight: 500; }
.cover-list a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.cover-meta { display: block; color: var(--ink-dim); font-size: 11.5px; margin: 2px 0; }
.cover-list p { color: var(--ink-dim); font-size: 12.5px; margin: 2px 0 0; }
.detail-side { border-top: 3px solid var(--ink); padding: 12px 0 0; height: fit-content; position: sticky; top: 14px; }
.facts { margin: 0; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.fact dt { color: var(--ink-dim); flex: 0 0 auto; padding-top: 2px; }
.fact dd { margin: 0; font-size: 13px; text-align: left; }
.detail-side .fact dd { text-align: right; }
.detail-score { border-bottom: 1px solid var(--rule); margin-bottom: 12px; padding: 0 0 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.btn { display: inline-block; background: none; border: 1px solid var(--ink); color: var(--ink); padding: 8px 14px; font-size: 13px; font-weight: 500; text-decoration: none; }
.btn:hover { background: var(--ink); color: var(--base); text-decoration: none; }

/* ---------- story pages ---------- */
.story { margin: 18px 0 36px; max-width: 1100px; }
.crumb { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 12px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.crumb span { margin: 0 6px; opacity: .6; }
.story-head h2 { font-size: 33px; line-height: 1.15; margin: 12px 0 0; font-weight: 600; letter-spacing: -.02em; max-width: 24ch; }
.story-art { margin: 18px 0 6px; }
.story-art .card-img { aspect-ratio: 21/9; border: 1px solid var(--rule); }
.credit { font-size: 11px; color: var(--ink-dim); margin: 6px 0 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: 26px; margin-top: 18px; }
.story-grid > * { min-width: 0; }
.story-summary { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; margin: 0 0 18px; }
.story-summary p { margin: 0; font-size: 16px; line-height: 1.6; }
.story-summary cite {
  display: block; margin-top: 10px; font-style: normal; font-size: 11px;
 color: var(--ink-dim);
}
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--base); font-weight: 600; }
.btn-primary:hover { background: var(--ink-dim); border-color: var(--ink-dim); color: var(--base); }
.mission-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.mission-card { display: flex; align-items: center; gap: 12px; text-decoration: none; border-top: 1px solid var(--rule); padding: 11px 0; }
.mission-card:hover { border-top-color: var(--ink); }
.mission-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mission-main strong { font-size: 14.5px; font-weight: 500; }
.mission-sub { font-size: 11.5px; color: var(--ink-dim); }
.mission-score { font-size: 20px; font-weight: 600; display: flex; align-items: baseline; gap: 5px; }
.mission-score small { font-size: 11px; color: var(--ink-dim); }
/* primary-source rows */
.chip-primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
:root[data-theme="light"] .chip-primary { color: var(--accent); }
.src-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.src-row { display: flex; align-items: center; gap: 11px; text-decoration: none; border-top: 1px solid var(--rule); padding: 10px 0; }
.src-row:hover { border-top-color: var(--ink); }
.src-tag {
  font-size: 9.5px; font-weight: 600;
  color: var(--accent-ink); border: 1px solid var(--accent-dim);
  padding: 2px 7px; flex: 0 0 auto;
}
.src-match { border-left-color: var(--go); }
.src-verified { color: var(--go); border-color: var(--go); }
.src-main { display: flex; flex-direction: column; min-width: 0; }
.src-main strong { font-size: 14px; font-weight: 500; }
.src-sub { font-size: 11.5px; color: var(--ink-dim); }

.side-head { font-size: 11px; color: var(--ink-dim); margin: 0 0 9px; }
.side-head:not(:first-child) { margin-top: 20px; }
.card-img-link { display: block; text-decoration: none; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-head h2 { font-size: 26px; max-width: none; }
}

/* ---------- story drill (floating panel) ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(6, 8, 12, .68);
  opacity: 0; pointer-events: none; transition: opacity var(--t-med); z-index: 40;
  backdrop-filter: blur(2px);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drill {
  position: fixed; z-index: 41; top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.99);
  width: min(920px, calc(100vw - 40px)); max-height: min(86vh, 900px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--base); border: 1px solid var(--rule);

  padding: 0 26px 26px; opacity: 0; pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}
.drill.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.drill .story, .drill .detail { margin: 0; max-width: none; }
/* Lifted detail pages keep their own two-column grid, but inside the panel the
   sidebar has less room than it does on the page. */
.drill .detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: 22px; margin-top: 14px; }
.drill .detail-hero .card-img { max-height: 300px; }
.drill .detail h2 { font-size: 26px; }
.drill .story-head h2 { font-size: 27px; max-width: none; }
.drill .story-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr); gap: 22px; }
.drill .detail-side { position: static; }
/* The scroll lock while a panel is open. This used to be called drill-open, the same
   name as the panel's "Open full page" button, and the button's hover rule therefore
   matched body.drill-open:hover: with a scrim open, the mouse anywhere on the page made
   the whole document inherit the accent colour, which is every report of "mouseover
   turns all the text purple". One class, two jobs, and the collision was invisible
   because each rule read correctly on its own. */
body.drill-lock { overflow: hidden; }

.drill-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 14px 0 12px; margin-bottom: 2px;
  background: var(--base); border-bottom: 1px solid var(--rule);
}
/* Preview: the same panel, held small. Opened from the calendar, where the
   day view and filters behind it are worth keeping in place. Expand drops the
   constraint rather than loading anything, so it grows without a flicker. */
.drill.drill-mini { width: min(560px, calc(100vw - 32px)); max-height: min(64vh, 620px); }
.drill-mini .detail-grid, .drill-mini .story-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.drill-mini .detail-hero .card-img { max-height: 190px; }
.drill-mini .detail h2, .drill-mini .story-head h2 { font-size: 21px; }
.drill-expand { border-color: var(--accent) !important; color: var(--accent-ink) !important; }

/* Scoped to the bar, so a class name shared with a body state cannot reach the body. */
.drill-bar .drill-share, .drill-bar .drill-close, .drill-bar .drill-open, .drill-bar .drill-expand,
.cshare-bar .drill-close {
  background: var(--panel); border: 1px solid var(--rule); color: var(--ink);
 padding: 7px 13px; font: inherit; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
.drill-bar :is(.drill-share, .drill-close, .drill-open, .drill-expand):hover,
.cshare-bar .drill-close:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.drill-close { margin-left: auto; }
@media (max-width: 900px) {
  .drill { width: calc(100vw - 20px); max-height: 92vh; padding: 0 16px 20px; }
  .drill .story-grid, .drill .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .drill .story-head h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .drill, .scrim { transition: none; }
  .drill { transform: translate(-50%, -50%); }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--rule); margin-top: 44px; padding-top: 18px; padding-bottom: 34px; color: var(--ink-dim); font-size: 13px; }
.footer a { color: var(--ink); }
.footer p a { margin-right: 14px; }

/* ---------- telemetry motion (R85) ---------- */
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.is-today .cal-num::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  background: var(--accent-ink); margin-left: 5px; vertical-align: 1px;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; scroll-behavior: auto !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .section-grid, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .grid3, .desk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scorestats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-side { position: static; }
  .fpanel { width: min(300px, 86vw); }
  .cal-cell { min-height: 54px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 3px; }
  .cal-num { width: 100%; }
  .cal-chip { font-size: 0; width: 8px; height: 8px; padding: 0; gap: 0; }
  .cal-chip .ico { display: none; }
  .cal-more { font-size: 9px; }
}
@media (max-width: 640px) {
  .card-stack, .grid3, .desk-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr; }
  .score-row .card-img { aspect-ratio: 16/9; }
  .score-badge { flex-direction: row; border-left: 0; border-top: 1px solid var(--rule); }
  .masthead-top { font-size: 10px; }
  .masthead-mid { flex-wrap: wrap; }
  .tagline { display: none; }
  .job-row { grid-template-columns: 1fr 92px; }
  .job-dept, .job-date { display: none; }
}

/* ---------- print (R51) ---------- */
@media print {
  :root {
    --base: #fff; --panel: #fff; --panel2: #fff; --rule: #bbb; --rule-soft: #ddd;
    --ink: #000; --ink-dim: #333; --ink-faint: #666; --accent: #000; --accent-ink: #000;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .nav, .ticker, .toolbar, .filter-bar, .theme-btn, .cal-nav, .drawer-close, .hero-side { display: none !important; }
  .card-img, .detail-hero { display: none; }
  a { text-decoration: none; color: #000; }
  .detail-main a[href^="http"]::after, .rfp h3 a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; word-break: break-all; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side, .card, .rfp, .stat, .table-wrap { border-color: #bbb; break-inside: avoid; }
  .rule-head, .page-head h2 { break-after: avoid; }
  .footer { border-top: 1px solid #bbb; }
}

/* paywall and free-to-read signalling */
.chip-wall { color: var(--caution); border-color: var(--caution); }
.src-free { border-left-color: var(--go); }
.src-freetag { color: var(--go); border-color: var(--go); }

/* Stand-in imagery is labelled, so a library frame is never mistaken for a
   photograph of the story it sits beside. */
.lib-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  background: rgba(10, 12, 16, .78); color: #e6e8ee;
  /* A fixed px size does not shrink with the image the way everything around it
     does: on a narrow phone the picture scales down but the label does not, so
     it reads as a banner stuck on top rather than a caption sized to it. Scaling
     by viewport width keeps the 8.5px/2.5px/6px figures as the ceiling (today's
     desktop size, unchanged) and lets it shrink toward the floor on a phone. */
  font-size: clamp(6.5px, 1.9vw, 8.5px);
  padding: clamp(2px, .6vw, 2.5px) clamp(4px, 1.3vw, 6px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

/* ---------- desk summary (R89) ----------
   Our own summary sits above the publisher's, and says so. The label is part of
   the block rather than a footnote, so a reader knows which words are ours
   before reading them. */
.desk-summary { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0 14px; margin: 0 0 16px; }
.desk-summary p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; }
.desk-label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; color: var(--ink-dim);
  font-size: 11px;
}
.desk-label .ico { color: var(--accent-ink); }
.story-summary { font-size: 14px; }
/* The accent rule marks our words. Quoted publisher text takes the neutral one. */
.story-summary { border-left-color: var(--rule); }

/* ---------- stats desk (S9) ---------- */
.tiles.rolling .stat { align-items: flex-start; }
.stat-note { font-size: 11px; color: var(--ink-dim); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.bignum .delta { font-size: 15px; margin-left: 6px; font-weight: 500; color: var(--ink-dim); }
.bignum .delta.up { color: var(--go); }
.bignum .delta.down { color: var(--caution); }
.bad-t { color: var(--alarm); }
.station-log li { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.station-log .due { color: var(--ink-dim); white-space: nowrap; }
.rule-head-sm {
  font-size: 12px; color: var(--ink);
  margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--rule-soft);
}

/* ---------- calendar memory (S9) ---------- */
/* Local time sits under the UTC time rather than beside it: UTC is the record,
   the local rendering is a convenience. */
.t-local { display: block; font-size: 10px; color: var(--ink-dim); }
.drawer-outcome { font-size: 9.5px; font-weight: 600; }
.drawer-outcome.o-ok { color: var(--go); }
.drawer-outcome.o-mid { color: var(--caution); }
.drawer-outcome.o-bad { color: var(--alarm); }
/* A completed day reads as a record, so its chips take the outcome colour and
   the cell loses the forward-looking accent. */
.cal-cell.is-past { opacity: .88; }
.cal-chip.o-ok { border-left-color: var(--go); }
.cal-chip.o-mid { border-left-color: var(--caution); }
.cal-chip.o-bad { border-left-color: var(--alarm); }

/* ---------- personal layer (S7) ---------- */
/* Pin and watch controls. Both read as off by default and take the accent when
   on, so a glance down a list shows what is tracked without reading labels. */
.pin-btn, .watch-btn {
  background: none; border: 1px solid var(--rule); color: var(--ink-dim);
 font: inherit; font-size: 12px; cursor: pointer;
  padding: 4px 9px; line-height: 1.4; flex: 0 0 auto;
}
.pin-btn { font-size: 14px; padding: 2px 8px; }
.pin-btn:hover, .watch-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.pin-btn.on, .watch-btn.on { border-color: var(--accent); color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.watch-lg { padding: 6px 14px; font-size: 13px; }
.btn-mini {
  background: none; border: 1px solid var(--rule); color: var(--ink-dim);
 font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.btn-mini:hover { border-color: var(--alarm); color: var(--alarm); }

.rfp { position: relative; }
/* The save control floats over the card, so the meta row and the heading have to
   leave room for it rather than running underneath. A thumb needs 44px; the glyph
   does not, so the padding makes up the difference and the border stays small. */
.rfp .pin-btn {
  position: absolute; top: 8px; right: 8px;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
}
.rfp-body .card-meta, .rfp h3 { padding-right: 48px; }
.sup-wrap { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding: 12px 0 10px; }
.sup-wrap .sup { flex: 1; border-top: 0; padding-top: 0; }
.sup-wrap .watch-btn { align-self: flex-start; margin-top: 8px; }
/* The watch button floats over the card, so the last line of the description has to
   leave room for it. Without this, "New Glenn, New Shepard, BE-4 engines, Blue Moon."
   ran underneath the button. */
.sup-wrap .sup p:last-of-type { min-height: 0; }
.page-head .watch-lg { margin-top: 10px; }

/* Pinned solicitations */
.pinned { margin: 18px 0 8px; }
.pinned-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pinned-head h3 { font-size: 12px; color: var(--ink-dim); margin: 0; }
.pinned-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.pinned-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; background: var(--panel);
}
.pinned-row:last-child { border-bottom: 0; }
.pinned-row:hover { background: var(--panel2); }
.pinned-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pinned-main strong { font-size: 13.5px; font-weight: 500; }
.pinned-sub { font-size: 11px; color: var(--ink-dim); }
.pinned-due { font-size: 11.5px; color: var(--caution); white-space: nowrap; }
.pinned-due.is-closed { color: var(--ink-faint); }
.pinned-empty { border-top: 1px solid var(--rule); padding: 14px 0; }
.pinned-empty p { margin: 0; color: var(--ink-dim); font-size: 13px; }

/* Watched companies */
.watch-strip { margin: 18px 0; }
.watch-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.watch-head h3 { font-size: 12px; color: var(--ink-dim); margin: 0; }
.watch-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.watch-row::-webkit-scrollbar { display: none; }
.watch-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; text-decoration: none; border-top: 1px solid var(--rule); padding: 9px 0; min-width: 168px; }
.watch-card:hover { border-top-color: var(--ink); }
.watch-card strong { font-size: 13.5px; font-weight: 500; }
.watch-nums { font-size: 11px; color: var(--ink-dim); }

/* Jobs: pay column and the toggle facets */
.job-pay { font-size: 11.5px; color: var(--go); white-space: nowrap; }
.ftoggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim);
  border: 1px solid var(--rule); padding: 6px 11px; cursor: pointer;
  white-space: nowrap;
}
.ftoggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.ftoggle:has(input:checked) { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- mobile tab bar (S7) ----------
   Hidden on anything with room for the masthead nav. Where it shows, the page
   gets bottom padding so the last row is not sitting under it. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--panel); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tab-more {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px 7px; text-decoration: none; color: var(--ink-dim);
    font: inherit; font-size: 10px;
    background: none; border: 0; cursor: pointer;
  }
  .tabbar a.active, .tab-more.active, .tab-more[aria-expanded="true"] { color: var(--accent-ink); }
  .tabbar a .ico, .tab-more .ico { width: 19px; height: 19px; }
  body { padding-bottom: 58px; }
  body.drill-lock .tabbar { display: none; }

  /* The sections sheet: everything the four-slot bar cannot hold, named and described,
     because a section a reader has never seen needs more than an icon to be chosen. */
  .more-sheet {
    position: fixed; left: 0; right: 0; bottom: 58px; z-index: 40;
    max-height: 72vh; overflow: auto;
    padding: 4px 10px calc(10px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--rule);

  }
  .more-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 6px 8px; font-size: 11px;
    color: var(--ink-dim);
  }
  .more-close {
    width: 30px; height: 30px; padding: 0; font: inherit; font-size: 19px; line-height: 1;
    cursor: pointer; color: var(--ink-dim); background: none;
    border: 1px solid var(--rule);
  }
  .more-sheet a {
    display: flex; align-items: flex-start; gap: 11px; padding: 11px 8px;
    text-decoration: none; border-top: 1px solid var(--rule-soft);
  }
  .more-sheet a .ico { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--ink-dim); }
  .more-sheet a.active { color: var(--accent-ink); }
  .more-sheet a.active .ico { color: var(--accent-ink); }
  .more-t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
  .more-b { color: var(--ink-dim); font-size: 12px; line-height: 1.4; }
  body.sheet-open { overflow: hidden; }

  /* The masthead nav holds every section and used to clip at whichever one ran off the
     edge. It scrolls now, with the active one brought into view. */
  .nav {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* The share tray sat above the bar and wrapped onto three lines, taking a third of
     the screen. It sits flush and states the count in one line. */
  .ctray { bottom: 62px; gap: 8px; padding: 8px 12px; }
  body.sheet-open .ctray { display: none !important; }
  .ctray-n { flex: 1; min-width: 0; }
  .ctray .btn { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .ctray .btn-mini { white-space: nowrap; }
}
/* About: the source list reads as definitions, wider than the fact rows on a
   detail page because each entry is a sentence rather than a value. */
.src-facts .fact { grid-template-columns: 220px 1fr; align-items: start; gap: 14px; }
.src-facts dt { padding-top: 1px; }
.src-facts dd { color: var(--ink); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 720px) { .src-facts .fact { grid-template-columns: 1fr; gap: 3px; } }

/* The front page's change brief: a paragraph of what the week held, not a cut-off table. */
.ch-brief p { color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }
.ch-brief p:first-of-type { font-size: 15.5px; }
.ch-brief-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.ch-brief-links a { color: var(--accent-ink); }

/* Flags are drawn, not typed: see pipeline/flags.mjs for why. In their own colours, so a
   1px hairline keeps a white flag visible against a white cell in the light theme. */
.flag { display: block; box-shadow: 0 0 0 1px var(--rule); }
.flag-cell { width: 34px; }
.flag-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 14px; font-size: 9px; letter-spacing: -.02em;
  background: var(--panel2); color: var(--ink-dim); box-shadow: 0 0 0 1px var(--rule);
}
.flag-none { display: inline-block; width: 20px; text-align: center; color: var(--ink-dim); }
.dcard > h2 .flag { display: inline-block; vertical-align: middle; margin-right: 6px; }
/* The execution index: the number, with the bar behind it so a column of numbers reads as a
   ranking at a glance rather than as arithmetic to be done by the reader. */
.idx-cell { position: relative; min-width: 62px; }
.idx-bar {
  position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px;
  background: linear-gradient(to right, var(--go) var(--w), transparent var(--w));
  opacity: .55;
}
.idx-v { position: relative; }
.idx-bar-sm {
  display: inline-block; width: 54px; height: 4px; margin-right: 6px;
  vertical-align: middle;
  background: linear-gradient(to right, var(--go) var(--w), var(--panel2) var(--w));
}

/* Saved searches: a shelf above the results, each row a link back to the search it
   came from plus the standing feed that covers it, where one does. */
.ss-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.ss-saved { margin: 18px 0 6px; }
.saved-list { display: grid; gap: 8px; }
.saved-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  border: 1px solid var(--rule); padding: 10px 12px; background: var(--panel);
}
.saved-q { grid-column: 1; font-size: 14.5px; color: var(--accent-ink); }
.saved-del { grid-column: 2; grid-row: 1; justify-self: end; background: none; border: 0; cursor: pointer;
  color: var(--ink-dim); font-size: 12px; padding: 2px 4px; }
.saved-del:hover { color: var(--alarm); }
.saved-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-dim); }
.saved-feed { grid-column: 1 / -1; font-size: 12.5px; }
.saved-none { color: var(--ink-dim); }
.saved-wider { color: var(--caution); }

/* A KPI card that opens its own detail. Same affordance as the ones that are links,
   because to a reader they do the same thing. */
.bignum-link { display: inline-block; text-decoration: none; }
.bignum-link:hover .bignum { color: var(--accent-ink); }
.kpi-card, .stat-card { cursor: pointer; }
.stat-card:hover { border-color: var(--accent-ink); }
.stat-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.stat-card::after {
  content: '\2192'; position: absolute; right: 10px; top: 8px; font-size: 12px;
  color: var(--accent-ink); opacity: 0; transition: opacity var(--t-fast);
}
.stat-card { position: relative; }
.stat-card:hover::after { opacity: 1; }
.kpi-card:hover { border-color: var(--accent-ink); }
.kpi-card:hover .kpi-go { opacity: 1; transform: translateX(0); }
.kpi-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* A failure reads as an entry, not a table row: the cause is a sentence of someone else's. */
.fail-item { border-left: 2px solid var(--alarm); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.fail-item h4 { font-size: 15px; margin: 0 0 2px; }
.fail-item p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.fail-item .due { color: var(--ink-dim); font-size: 12px; margin-bottom: 4px; }

/* ---------- launch scorecard (S15) ----------
   Share of flights as one bar rather than a pie: the eye reads length against
   length, and the segments stay in the table's order. Colours come from the
   palette's own steps, so nothing here introduces a hue the tokens do not hold. */
.ms-bar {
  display: flex; height: 22px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--panel2); margin: 4px 0 8px;
}
.ms-seg { display: block; height: 100%; min-width: 2px; }
.ms-0 { background: var(--go); }
.ms-1 { background: var(--k-event-ink); }
.ms-2 { background: var(--k-rfp-ink); }
.ms-3 { background: var(--k-launch-ink); }
.ms-4 { background: var(--k-hearing-ink); }
.ms-5 { background: var(--ink-dim); }
.ms-key { font-size: 11.5px; gap: 12px 16px; }
/* Definitions read as sentences, so the term column is narrow and the value wraps. */
.method-facts .fact { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.method-facts dd { text-align: left; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink); }
@media (max-width: 720px) {
  .method-facts .fact { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- business desk (S12) ---------- */
.archive td.num, .archive th.num { text-align: right; }
.tape-head th {
  font-size: 10.5px;
  color: var(--accent-ink); background: var(--panel2);
  padding-top: 12px; border-bottom: 1px solid var(--rule);
}
.tape td.up { color: var(--go); }
.tape td.down { color: var(--alarm); }
.award-desc { color: var(--ink-dim); font-size: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
/* An estimated figure carries a mark that leads to the estimate's basis. */
.est-mark { color: var(--caution); text-decoration: none; font-weight: 600; padding-left: 1px; }
.est-mark:hover { text-decoration: underline; }

/* ---------- business dashboard (S12 redesign) ---------- */
/* A figure is a link to the page that shows how it was reached, so the whole
   tile is the target and it says so on hover. */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; margin: 16px 0 22px;
}
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rule); padding: 12px 0 10px; text-decoration: none; }
a.kpi:hover { border-top-color: var(--ink); }
a.kpi:hover .kpi-go { opacity: 1; transform: translateX(0); }
.kpi-v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.kpi-v.up { color: var(--go); }
.kpi-v.down { color: var(--alarm); }
.kpi-l { font-size: 13px; color: var(--ink); }
.kpi-n { font-size: 12px; color: var(--ink-dim); }
.kpi-go {
  position: absolute; top: 12px; right: 13px; color: var(--accent-ink); font-size: 13px;
  opacity: 0; transform: translateX(-3px); transition: opacity var(--t-fast), transform var(--t-fast);
}

.dash-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin: 8px 0 4px; }
.dash-2col > * { min-width: 0; }
@media (max-width: 860px) { .dash-2col { grid-template-columns: 1fr; } }

.chart { margin: 6px 0 14px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.chart-legend .swatch { width: 9px; height: 9px; display: inline-block; margin-right: 5px; }
.spark { display: block; }
.spark-cell { width: 96px; padding-right: 4px; }
.grp-dot { width: 8px; height: 8px; display: inline-block; margin-right: 7px; vertical-align: 1px; }

/* Metric pages: the number is the headline, the sourcing is right under it. */
.metric-head { margin: 6px 0 14px; }
.metric-unit { font-size: 11px; color: var(--ink-dim); margin: 0 0 4px; }
.metric-big { font-size: 54px; font-weight: 600; letter-spacing: -.03em; margin: 0; color: var(--ink); }
.metric-trend { font-size: 14px; margin: 6px 0 0; color: var(--ink-dim); }
.metric-trend.up { color: var(--go); }
.metric-trend.down { color: var(--alarm); }
.metric-extra { font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 0; }
.metric-blurb { max-width: 68ch; }
.metric-source {
  font-size: 12px; color: var(--ink-dim); border-left: 2px solid var(--accent);
  padding: 6px 0 6px 12px; margin: 12px 0 18px;
}
.metric .table-wrap { margin-bottom: 16px; }

/* Share row in the drill bar */
.drill-shares { display: flex; align-items: center; gap: 4px; }
.drill-s, .drill-card {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  background: none; border: 1px solid var(--rule);
  color: var(--ink-dim); cursor: pointer; text-decoration: none; padding: 0;
}
.drill-s:hover, .drill-card:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.drill-share { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .drill-s-t { display: none; }
  .drill-share { width: 30px; justify-content: center; padding: 0; }
}

/* ---------- company blurb ---------- */
.co-blurb { border-top: 3px solid var(--ink); padding: 14px 0 4px; margin: 4px 0 18px; }
.co-lead { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.blurb-rows { display: grid; gap: 4px; margin: 0 0 10px; }
.blurb-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
.blurb-row dt {
  font-size: 10.5px; color: var(--ink-dim);
}
.blurb-row dd { margin: 0; font-size: 13.5px; }
.cite { font-size: 10.5px; color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
.cite:hover { color: var(--accent-ink); }
.co-blurb .btn-row { margin: 0; }
@media (max-width: 620px) { .blurb-row { grid-template-columns: 1fr; gap: 1px; } }

/* A company reference: mark plus name, a link when we hold a profile for it and
   plain text when we do not, so a link never leads to a page that is not there. */
.org-ref { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; min-width: 0; }
a.org-ref:hover span { color: var(--accent-ink); }
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--accent-ink); color: var(--accent-ink); }


/* The Tuesday brief: kickers, evidence links, the watch list, the front-page pointer. */
.brief-section { margin: 18px 0 22px; max-width: 720px; }
.brief-kicker { font-size: 11px; color: var(--ink-dim); margin: 0 0 2px; }
.brief-section p { line-height: 1.6; }
.brief-links a { font-size: 13px; margin-right: 14px; }
.brief-watch .due { margin-left: 8px; }
.brief-pointer { font-size: 13px; color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 6px 0 14px; line-height: 1.5; }

/* Predictions: claim cards, status chips, the quote as the centerpiece. */
.claim { border-top: 1px solid var(--rule); padding: 14px 0; margin: 0 0 6px; max-width: 760px; }
.claim-quote { margin: 8px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent-ink);
  font-size: 15px; line-height: 1.55; }
.claim-source { font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 10px; }
.claim-chip { color: var(--cc); border-color: color-mix(in oklab, var(--cc) 45%, transparent); }

/* A claim closed is the company, the outcome and the first lines of what was
   said. Eighty-odd assessments at full length made this page a wall of text with
   nowhere to stand. */
.claim > summary { cursor: pointer; list-style: none; }
.claim > summary::-webkit-details-marker { display: none; }
.claim > summary::after { content: 'Read the assessment'; display: inline-block;
  font-size: 12.5px; color: var(--accent-ink); margin-top: 4px; }
.claim[open] > summary::after { content: 'Close'; }
.claim-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.claim-head .rule-head-sm { margin: 0; }
.claim > summary .claim-source { display: block; margin-bottom: 2px; }
/* Two lines when closed, all of it when open. The quote is the part a reader is
   scanning for, so it is never hidden outright. */
.claim:not([open]) .claim-quote { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

.claim-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 10px; }
.claim-count { margin: 0; font-size: 14px; color: var(--ink-dim); }
.claim-count strong { font-size: 30px; color: var(--accent-ink);
  margin-right: 8px; }
.claim-toolbar .filter-bar { margin: 0; }
.cell-wide { min-width: 260px; }

.claim-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.claim-list .due { margin-left: auto; white-space: nowrap; }

/* Original reporting: green outline marks what this desk wrote itself. */
.card-original { border-top: 3px solid var(--ink); }
.chip-orig { color: var(--ink); font-weight: 600; }
.originals { margin: 6px 0 10px; }

.report-callout { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 16px; text-decoration: none; margin: 0 0 16px; max-width: 760px; }
.report-callout strong { font-size: 15px; }
.report-callout span:last-child { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
/* The word-count chart on the SpaceX report. */
.wordbar { max-width: 640px; margin: 10px 0; }
.wordbar-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.wordbar-label { flex: 0 0 110px; font-size: 13px; text-align: right; color: var(--ink-dim); }
.wordbar-track { flex: 1; background: color-mix(in oklab, var(--rule) 50%, transparent); height: 14px; }
.wordbar-fill { display: block; height: 100%; background: var(--accent-ink); }
.wordbar-n { flex: 0 0 52px; font-size: 12.5px; }

/* The analysis block: four segments, two columns; the report is a small square card. */
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.analysis-grid .card-img { aspect-ratio: 16 / 9; }
.analysis-grid .card-img img { object-fit: cover; width: 100%; height: 100%; }
/* Match the sourced cards' balance: a strong title, a short line of text, no sprawl. */
.analysis-grid .card-body h3 { font-size: 20px; line-height: 1.25; margin: 8px 0 6px; }
.analysis-grid .card-body p { font-size: 13.5px; line-height: 1.5; margin: 0; }
.analysis-grid .card-body { padding-bottom: 16px; }
.card-mini { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 4px; }
.card-mini .card-img, .card-img-sq { aspect-ratio: 1 / 1; height: 84px; }
.card-mini .card-body { padding: 10px 12px; }
.card-mini h3 { font-size: 14px; margin: 2px 0 0; }
@media (max-width: 900px) { .analysis-grid { grid-template-columns: 1fr; } }

/* The support button: visible from the masthead on every page. */
.support-btn { display: inline-block; padding: 7px 14px; border: 1px solid var(--go);
 color: var(--go); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; align-self: center; transition: background var(--t-fast); }
.support-btn:hover { background: color-mix(in oklab, var(--go) 12%, transparent); }
@media (max-width: 700px) { .support-btn { font-size: 12px; padding: 6px 10px; } }

/* A watched state a reader cannot miss, and a note about where it went. */
.watch-btn.on { background: color-mix(in oklab, var(--go) 16%, transparent);
  border-color: var(--go); color: var(--go); font-weight: 600; }
.watch-lg.on::after { content: " · shown on your front page"; font-weight: 400;
  font-size: 12px; opacity: .85; }

/* Donation buttons: big, filled, two text rows so they stay narrow. */
.donate-btn { background: var(--go); border-color: var(--go); color: var(--base);
  font-size: 16px; font-weight: 700; padding: 10px 20px;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.donate-btn:hover { background: var(--go); color: var(--base); }
@media (max-width: 700px) { .donate-btn { width: 100%; margin-bottom: 10px; } }
/* The masthead support button matches: two rows, narrow. */
.support-btn { font-size: 13px; font-weight: 700; padding: 7px 14px;
  background: var(--go); border-color: var(--go); color: var(--base);
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; }
.support-btn:hover { background: var(--go); }

/* The bookshelf: title links, one plain line each. */
.bookshelf li { padding: 10px 0; }
.bookshelf a { font-weight: 600; }
.book-detail { display: block; font-size: 13px; color: var(--ink-dim); margin-top: 2px; line-height: 1.5; }

/* ---------- the personal layer: RFP workspace, save box, deltas ---------- */
/* Local-only state gets its own visual register: a dotted left rule and a lock of
   colour that never appears on source facts, so a reader can tell at a glance
   which parts of a page are ours and which are theirs. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.btn-danger { color: var(--alarm); border-color: color-mix(in oklab, var(--alarm) 45%, var(--rule)); }
.btn-danger:hover { border-color: var(--alarm); background: color-mix(in oklab, var(--alarm) 12%, transparent); }

.pinned-empty { border-top: 1px solid var(--rule); padding: 16px 0; }
.pinned-empty h3 { margin: 0 0 6px; font-size: 14px; }
.pinned-empty p { margin: 0 0 6px; color: var(--ink-dim); font-size: 13.5px; }

.ws-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ws-actions .btn-mini { min-height: 44px; padding: 6px 12px; }
.ws-note { margin: 0 0 10px; }

.ws-filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ws-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
 color: var(--ink-dim); }
.ws-filters select, .rfp-state select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule);
  padding: 8px 10px; min-height: 44px; max-width: 100%;
}
.ws-filters select:focus-visible, .rfp-state select:focus-visible,
.ws-note textarea:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.ws-list { display: flex; flex-direction: column; gap: 10px; }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; border-top: 1px solid var(--rule); padding: 12px 0; }
.ws-main { min-width: 0; }
.ws-main h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ws-main h4 a { color: var(--ink); text-decoration: none; }
.ws-main h4 a:hover { color: var(--accent-ink); text-decoration: underline; }
.ws-sub { margin: 0 0 4px; font-size: 12px; color: var(--ink-dim); }
.ws-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; }
.ws-due { color: var(--caution); font-weight: 600; }
.ws-due.is-closed { color: var(--ink-dim); font-weight: 400; }
.ws-saved { color: var(--ink-dim); }
.ws-moved { color: var(--accent-ink); font-weight: 600; }
.ws-moved::before { content: "\25CF  "; }              /* not colour alone */
.ws-moved.is-gone { color: var(--alarm); }

.ws-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ws-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ws-btns .btn-mini { min-height: 44px; padding: 6px 12px; }

.ws-note { grid-column: 1 / -1; display: block; }
.ws-note textarea {
  width: 100%; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink);
  background: var(--base); border: 1px solid var(--rule-soft);
  padding: 8px 10px; resize: vertical;
}
.ws-note textarea::placeholder { color: var(--ink-faint); }

/* What moved since they saved it. */
.since { grid-column: 1 / -1; border-top: 1px solid var(--rule-soft); padding-top: 8px; }
.since h4 { margin: 0 0 4px; font-size: 11px;
 color: var(--ink-dim); }
.since p { margin: 0; font-size: 12.5px; color: var(--ink-dim); }
.since-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 4px; }
.since-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12.5px; }
.since-field { color: var(--ink-dim); min-width: 150px; }
.since-from { color: var(--ink-dim); text-decoration: line-through; }
.since-to { color: var(--ink); font-weight: 600; }
.since-arrow { color: var(--ink-faint); }
.since-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.since-changed { border-top-color: var(--accent); }
.since-gone p strong { color: var(--alarm); }

/* The save box on a single notice's page. */
.save-box { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; margin: 0 0 16px; }
.save-box-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.save-box .ws-btns { justify-content: flex-start; margin-top: 8px; }
.save-box .since { grid-column: auto; margin-top: 10px; }
.save-box .ws-note { margin-top: 10px; }
.btn-save { min-height: 44px; }
.btn-save.on { border-color: var(--accent); color: var(--accent-ink);
  background: color-mix(in oklab, var(--accent) 12%, transparent); }
.btn-save.on .p-label::before { content: "\2713  "; }   /* not colour alone */

/* Transient confirmations: announced to a screen reader, never blocking. */
.personal-flash {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
  max-width: min(560px, calc(100vw - 32px)); z-index: 60;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--accent);
  padding: 10px 16px; font-size: 13.5px; line-height: 1.5;

  opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med);
}
.personal-flash.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .ws-row { grid-template-columns: minmax(0, 1fr); }
  .ws-side { align-items: stretch; }
  .ws-btns { justify-content: flex-start; }
  .ws-filters label { flex: 1 1 140px; }
  .since-field { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-flash { transition: none; }
}

/* The iOS reader, offered where it finishes the job. Corner card, never a modal:
   nothing behind it is blocked, and the page keeps scrolling underneath. */
.app-prompt {
  position: fixed; right: 16px; bottom: 84px; z-index: 55;
  width: min(360px, calc(100vw - 32px));
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
 padding: 14px 16px;

  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med);
}
.app-prompt.on { opacity: 1; transform: translateY(0); }
.app-prompt-body strong { display: block; font-size: 14px; margin-bottom: 4px; }
.app-prompt-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.app-prompt-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.app-prompt-acts .btn { min-height: 44px; display: inline-flex; align-items: center; }
.app-prompt-acts .btn-mini { min-height: 44px; }
@media (max-width: 700px) {
  .app-prompt { left: 16px; right: 16px; width: auto; bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-prompt { transition: none; }
}

/* A citation whose page has rotated out of the index. The evidence still stands;
   only the link to our copy of it is gone, and a dotted underline says so without
   pretending to be clickable. */
.evidence-gone { color: var(--ink-dim); border-bottom: 1px dotted var(--rule); cursor: help; }

/* Both of these are filled by assets/personal.js. With JavaScript off they stay
   empty, and an empty bordered card is a hole in the page rather than a feature
   nobody asked for, so they collapse instead. */
.save-box:empty, .pinned:empty { display: none; }

/* The Monday brief's issue image, credited under it and sized so it leads the
   page without pushing the standfirst off a phone screen.
   The tag inherits .lib-tag's own bottom-left position. Overriding it with
   top/right without clearing left/bottom set all four edges, which stretched the
   label to fill the whole picture: a solid block with one word in the corner. */
.brief-hero { margin: 0 0 22px; }
/* The tag anchors to the image, not to the whole figure. Against the figure,
   bottom:8px is below the picture and lands on top of the credit line. */
.brief-hero-frame { position: relative; display: block; }
.brief-hero img {
  display: block; width: 100%; height: clamp(180px, 34vw, 340px);
  object-fit: cover; background: var(--panel2);
}
.brief-hero figcaption { margin-top: 6px; }
/* A generated image says so as plainly as a library one does, and in its own
   colour so the two are not mistaken for each other at a glance. */
.lib-tag.gen-tag { background: color-mix(in oklab, var(--accent) 82%, black); color: var(--base); }

/* ---------- figure panels on the Monday brief ---------- */
/* A tile is a button now, so it has to keep looking like the link it replaced. */
button.stat.stat-link { border: 1px solid var(--rule); background: var(--panel); cursor: pointer;
  font: inherit; text-align: center; width: 100%; }
button.stat.stat-link:hover { border-color: var(--accent); }
button.stat.stat-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.panel {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 780px);
  padding: 0; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink);
  overflow: hidden;
}
.panel::backdrop { background: rgb(0 0 0 / .62); }
/* display belongs on [open] and nowhere else. A closed <dialog> is hidden by the
   browser with display:none, so setting display on the element itself overrides
   that and every panel renders inline, in the page, stacked and unclosable:
   close() flips the open attribute and the CSS keeps them all visible anyway. */
.panel[open] { display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 10px;
  border-bottom: 1px solid var(--rule-soft); }
.panel-head strong { font-size: 22px; color: var(--accent-ink); }
.panel-head span { color: var(--ink-dim); font-size: 13px; }
.panel-close { margin-left: auto; background: none; border: 0; color: var(--ink-dim);
  font-size: 24px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.panel-close:hover { color: var(--ink); }
.panel-all { margin: 12px 18px 4px; align-self: flex-start; min-height: 44px;
  display: inline-flex; align-items: center; }
.panel-body { overflow-y: auto; padding: 8px 18px 4px; }
.panel .finePrint { padding: 0 18px 16px; margin: 8px 0 0; }
.panel-group { margin-bottom: 16px; }
.panel-group h4 { font-size: 12px;
  color: var(--ink-dim); margin: 0 0 6px; }
.panel-group .count { color: var(--ink-faint); margin-left: 6px; }
.panel-list li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
.panel-list li > :first-child { flex: 1; min-width: 0; }
.panel-list .due { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.panel-more summary { cursor: pointer; font-size: 12.5px; color: var(--accent-ink);
  padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
/* One label at a time. Closed shows the invitation, open shows the way back. */
.panel-more .more-shut, .panel-more[open] .more-open { display: none; }
.panel-more[open] .more-shut { display: block; }
@media (max-width: 700px) { .panel { max-height: 88vh; } }

/* Email capture (pipeline/build.mjs's subscribeForm) -- was an inline <style> block
   scoped to the form, moved here because style-src has no 'unsafe-inline' and nothing
   hashes inline style blocks the way script blocks are hashed, so it was being silently
   dropped by the content policy on every page that renders the form. */
.subscribe { margin: 26px 0; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.subscribe label { font-weight: 650; }
.subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.subscribe input[type=email] { flex: 1; min-width: 220px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--rule); }
.subscribe button { padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer; }

/* Special-report figures (reports.mjs): the wide/tall layout swap and text
   tiers live here because the CSP (style-src 'self') blocks inline style
   elements in production - a lesson learned when every figure label rendered
   black-on-black for a week. Fills ride SVG presentation attributes, which
   CSP does not govern; these rules carry only layout and emphasis. */
.report-fig { margin: 15px 0; }
.report-fig .fig-tall { display: none; }
@media (max-width: 700px) {
  .report-fig .fig-wide { display: none; }
  .report-fig .fig-tall { display: block; }
}
.report-fig svg text { fill: currentColor; }
.report-fig svg .dim { opacity: 0.72; }
.report-fig svg .b { font-weight: 600; }

/* ---------- responsive: the front page ---------- */
@media (max-width: 980px) {
  .front { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .front > * { grid-column: auto; }
  .front-brief { grid-column: 1 / -1; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
  .front-soon, .front-week { grid-column: span 1; }
  .cine h2 { font-size: 44px; }
  .ledger-row { grid-template-columns: 130px 1fr 110px; }
  .ledger-row .ledger-due { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .cine { min-height: 440px; }
  .cine-body { padding: 0 18px 28px; gap: 10px; }
  .cine h2 { font-size: 32px; }
  .cine p { font-size: 16px; }
  .cine-credit { position: static; padding: 0 18px 12px; }
  .front { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .front > * { grid-column: 1 / -1; }
  .front-brief h2 { font-size: 24px; }
  .band { padding: 28px 18px 32px; }
  .ledger-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .ledger-row .ledger-claim { grid-column: 1 / -1; }
  .brand { font-size: 18px; }
  .tagline { display: none; }
  .masthead-mid { flex-wrap: nowrap; gap: 10px; padding: 12px 0 8px; }
  .support-btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .support-btn span:last-child { display: none; }
}

/* ---------- the reports archive: two across, photograph over text ---------- */
.grid.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.grid.cards .card { border-top: 0; }
.grid.cards .card-body h3 { font-size: 22px; }
@media (max-width: 640px) { .grid.cards { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .due, .mini-list .due, .mini-list li .due { white-space: normal; } }