/* NewSpace RFP — mission-control system (PRMD R79-R87).
   One system, two registers: .reg-warm (front page: bigger art, longer measure,
   more air) and .reg-cold (tool pages: dense rows, tabular data, mono numbers).
   Tokens live in tokens.css. */

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The hidden attribute has to beat a class that sets display, or an element the script
   has hidden stays on screen. The share tray declares display:flex and was therefore
   visible and empty on every page, and the watch strip had the same shape. A reset line
   is the fix, because the next component to do this will not announce itself. */
[hidden] { display: none !important; }

a { color: inherit; }
/* Hovering a link turns its text to the accent step, block links included: on a card
   the whole card lights up, which is the point. --accent-ink is the text-safe step at
   6.9:1 on --base, so the hover state stays legible rather than trading contrast for
   colour. Links in prose also take an underline, so the affordance survives for a
   reader who cannot separate the two colours. */
a:hover { color: var(--accent-ink); }
/* A block link is a card, and the paragraph inside a card is not the link's label. On
   those, hovering lifts the heading and the border and leaves the supporting copy at
   its own colour, so a card lights up without a wall of body text turning purple. */
:is(.desk, .card, .rfp, .job-row, .ss-hit, .kpi, .stat-link, .watch-card, .mission-card,
    .tick, .pinned-row, .res, .week-chip, .cal-cell, .sup, .src-row):hover {
  color: var(--ink);
}
: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 {
  color: var(--accent-ink);
}
:is(p, li, dd, dt, td, th, figcaption, blockquote, .finePrint, .crumb) a:hover,
a.inline:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-underline-offset: 3px;
}
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* micro-label: the console's workhorse text style */
.eyebrow, .card-meta, .chip, .facet-n, .drawer-kind, .cal-rel, .stat span:last-child,
.sup-hq, .job-dept, .archive th, .fact dt, .nav a, .masthead-top {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- 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(--panel); }
.masthead-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--ink-dim); padding: 7px 0; border-bottom: 1px solid var(--rule-soft);
}
.masthead-mid { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; }
.brand {
  font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.brand a { text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand svg { width: 26px; height: 26px; }
.tagline { color: var(--ink-dim); margin: 0; font-size: 13px; flex: 1; }
.reg-warm .masthead-mid { padding: 22px 0 18px; }
.reg-warm .brand { font-size: 27px; }
.reg-warm .brand svg { width: 32px; height: 32px; }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 10px 13px; text-decoration: none; color: var(--ink-dim);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

.theme-btn {
  background: none; border: 1px solid var(--rule); color: var(--ink-dim);
  border-radius: var(--r-md); width: 30px; height: 30px; cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------- ticker ---------- */
.ticker { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.ticker::-webkit-scrollbar { display: none; }
.tick {
  flex: 0 0 auto; background: var(--panel); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent); border-radius: var(--r-sm);
  padding: 7px 12px; font-size: 12.5px; text-decoration: none; white-space: nowrap;
}
.tick:hover { border-color: var(--accent-ink); color: var(--ink); }
.tick-t { color: var(--accent-ink); font-family: var(--mono); font-weight: 600; margin-right: 7px; }
.tick-s { color: var(--ink-dim); font-family: var(--mono); margin-left: 8px; font-size: 11.5px; }

/* ---------- hero (warm register) ---------- */
.hero {
  display: grid; grid-template-columns: 1.5fr 1fr .85fr;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; margin: 10px 0 8px;
}
/* Grid items default to min-width:auto, so an image's intrinsic width would
   push past its track and cover the next column. */
.hero > *, .score-row > *, .detail-grid > *, .section-grid > *, .job-row > * { min-width: 0; }
/* Cap the row so a portrait lead photo cannot stretch the hero; the image crops.
   The rail scrolls internally when it carries more than the cap allows. */
.hero { max-height: 560px; }
.hero .card-img { min-height: 340px; height: 100%; aspect-ratio: auto; }
.hero-body, .hero-side { overflow-y: auto; scrollbar-width: thin; }
.hero-body { padding: 26px 28px; }
.hero-body h2 { font-size: 30px; line-height: 1.18; margin: 12px 0 10px; letter-spacing: -.02em; font-weight: 600; }
.hero-body h2 a { text-decoration: none; }
.hero-body p { color: var(--ink-dim); font-size: 14.5px; }
.hero-side { border-left: 1px solid var(--rule); background: var(--panel2); padding: 20px; }
.hero-side h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px; }
.hero-side h3:not(:first-child) { margin-top: 22px; }
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; }
.mini-list a { text-decoration: none; display: block; }
.mini-list a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.mini-list .due { color: var(--caution); font-family: var(--mono); font-size: 11px; }
.more { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--accent-ink); text-decoration: none; }
.more:hover { text-decoration: underline; }
.bignum { font-family: var(--mono); font-size: 40px; font-weight: 600; margin: 0; color: var(--go); letter-spacing: -.02em; }
.bignum span, .bignum small { font-size: 16px; color: var(--ink-dim); font-weight: 400; }
.finePrint { font-size: 12px; color: var(--ink-dim); }

/* ---------- results strip (R23) ---------- */
.strip-head {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 8px; font-weight: 600;
}
.results { margin: 4px 0 12px; }
.res-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.res-row::-webkit-scrollbar { display: none; }
.res {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 8px 12px; max-width: 340px;
}
.res:hover { border-color: var(--ink-faint); }
.res-dot { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; }
.res-main { display: flex; flex-direction: column; min-width: 0; }
.res-main strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-sub { font-size: 11px; color: var(--ink-dim); font-family: var(--mono); }
.res-badge { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; font-weight: 600; }
.res-ok, .res-dot.res-ok { color: var(--go); background-color: var(--go); }
.res-badge.res-ok { background: none; color: var(--go); }
.res-mid, .res-dot.res-mid { background-color: var(--caution); }
.res-badge.res-mid { background: none; color: var(--caution); }
.res-bad, .res-dot.res-bad { background-color: var(--alarm); }
.res-badge.res-bad { background: none; color: var(--alarm); }

/* ---------- today module (R22) ---------- */
.today {
  margin: 22px 0; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.today-head { display: flex; align-items: baseline; gap: 12px; }
.today-head .count { margin-left: auto; }
.today-list { display: flex; flex-direction: column; margin: 4px 0 10px; }
.today-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 6px;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; border-radius: var(--r-sm);
}
.today-item:last-child { border-bottom: 0; }
.today-item:hover { background: var(--panel2); }
.today-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.today-main strong { font-size: 14px; font-weight: 500; }
.today-sub { font-size: 11.5px; color: var(--ink-dim); }
.today-time { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.week-scroll {
  display: flex; gap: 7px; 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;
  background: var(--panel2); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 5px 10px; font-size: 12px;
}
.week-chip:hover { border-color: var(--ink-faint); }
.week-day { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); text-transform: uppercase; }
.week-chip .ico { width: 13px; height: 13px; }
.week-t { white-space: nowrap; }

/* countdowns */
.due[data-countdown] { font-family: var(--mono); }
.due.is-soon { color: var(--alarm); }
.due.is-live { color: var(--go); }

/* ---------- sections & cards ---------- */
.section { margin: 34px 0; }
.section-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule); margin-bottom: 16px; padding-bottom: 8px;
}
.section-head h2 { font-size: 19px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.section-head h2::before {
  content: ''; display: inline-block; width: 3px; height: 14px;
  background: var(--accent); margin-right: 9px; vertical-align: -1px;
}
.section-head p { color: var(--ink-dim); margin: 0; font-size: 12.5px; }
.section-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.card-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }

.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--t-fast);
}
.card:hover { border-color: var(--ink-faint); }
.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:
    repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, var(--rule-soft) 0 1px, transparent 1px 14px);
  opacity: .5;
}
.card-body { padding: 13px 15px 15px; }
.card h3 { font-size: 16px; line-height: 1.3; margin: 7px 0 6px; font-weight: 600; letter-spacing: -.01em; }
.card-big h3 { font-size: 21px; }
.card h3 a { text-decoration: none; }
.card p { font-size: 13px; color: var(--ink-dim); margin: 0; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-dim); }
.card-meta time { font-family: var(--mono); font-size: 11px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.chip {
  background: var(--panel2); border: 1px solid var(--rule); color: var(--ink-dim);
  padding: 2px 8px; border-radius: var(--r-sm); font-weight: 500;
}
.chip-hot { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-open { color: var(--go); border-color: var(--go); }
.chip-closed { color: var(--ink-dim); }
.chip-dim { opacity: .8; text-transform: none; letter-spacing: 0; }

/* ---------- page heads ---------- */
.page-head { margin: 26px 0 4px; max-width: 900px; }
.page-head h2 { font-size: 28px; margin: 0 0 8px; font-weight: 600; letter-spacing: -.02em; }
.page-head p { color: var(--ink-dim); font-size: 14px; }
.rule-head {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  border-bottom: 1px solid var(--rule); padding-bottom: 7px; margin: 34px 0 14px;
}
.rule-head::before {
  content: ''; display: inline-block; width: 3px; height: 13px;
  background: var(--accent); margin-right: 9px; vertical-align: -1px;
}
.rule-head .count { font-size: 12px; color: var(--ink-dim); font-family: var(--mono); margin-left: 8px; }
.rule-head-sm { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--rule-soft); padding-bottom: 6px; margin: 24px 0 12px; }
.rule-head-sm .count { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono); 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);
  border-radius: var(--r-md); padding: 8px 11px; font: inherit; font-size: 13px;
}
.toolbar input { flex: 1 1 250px; }
.count { color: var(--ink-dim); font-family: var(--mono); 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: var(--panel);
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-md);
  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: #fff; border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 600; padding: 0 6px; line-height: 16px; font-family: var(--mono);
}
.fpanel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; width: 270px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 7px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.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;
  border-radius: var(--r-sm); 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); font-family: var(--mono); letter-spacing: 0; }
.swatch { width: 9px; height: 9px; border-radius: 2px; 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; border-radius: 3px; 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; background: var(--panel); border: 1px solid var(--rule);
  padding: 12px 14px; border-radius: var(--r-sm);
}
.rfp:hover { border-color: var(--ink-faint); }
.rfp-mono {
  flex: 0 0 52px; height: 52px; border-radius: var(--r-sm); background: var(--panel2);
  border: 1px solid var(--rule); display: grid; place-items: center;
  font-family: var(--mono); 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-family: var(--mono); 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);
  border-radius: var(--r-md); 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, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-cell {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm);
  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 { background: var(--panel2); border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.cal-num { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono); }
.cal-cell.is-today .cal-num { color: var(--accent-ink); font-weight: 600; }
.cal-chip {
  font-size: 10px; line-height: 1.4; border-radius: 2px; 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); font-family: var(--mono); }
.cal-drawer {
  grid-column: 1 / -1; background: var(--panel2); border: 1px solid var(--accent-ink);
  border-radius: var(--r-md); padding: 13px 15px; 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);
  border-radius: var(--r-sm); 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;
  border-radius: var(--r-sm); text-decoration: none;
}
.drawer-item:hover { background: var(--panel); }
.drawer-item .swatch { width: 7px; height: 7px; border-radius: 99px; }
.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-family: var(--mono); 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, 1fr); gap: 10px; margin: 18px 0 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.stat { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px; text-align: center; }
.stat .bignum { font-size: 32px; display: block; }
.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; border-radius: 1px; 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); border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.meter span { display: block; height: 100%; background: var(--go); border-radius: 99px; }
.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); border-radius: var(--r-md);
  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-family: var(--mono); font-size: 34px; font-weight: 600; }
.score-badge .pts { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.score-badge .lbl { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; 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: 1px solid var(--rule); border-radius: var(--r-md); margin: 12px 0 28px; }
.archive { width: 100%; border-collapse: collapse; font-size: 13px; }
.archive th {
  text-align: left; color: var(--ink-dim); padding: 9px 13px;
  border-bottom: 1px solid var(--rule); background: var(--panel2);
  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-family: var(--mono); 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 13px;
  background: var(--panel); border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--ink-dim); font: inherit; font-size: 12.5px; text-align: center; cursor: pointer;
}
.row-more:hover { color: var(--ink); border-color: var(--accent-ink); }

/* 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-color: var(--accent-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);
  border-radius: var(--r-sm);
}
.facet-host .fq:focus { outline: none; border-color: var(--accent-ink); }
.fcount { color: var(--ink-dim); font-size: 12px; font-family: var(--mono); 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); border-radius: 4px;
  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: #fff; 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); border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.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); border-radius: var(--r-lg);
  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);
  border-radius: var(--r-sm);
}
.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);
  border-radius: var(--r-sm);
}
.share-view:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.share-view[aria-pressed="true"] { color: #fff; 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-family: var(--mono); 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);
  border-radius: var(--r-sm);
}
.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); border-radius: var(--r-md);
  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-family: var(--mono); 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); border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}
.mp-list-h { margin: 0 22px 8px 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; 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); border-radius: var(--r-sm);
}
.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: 10px; letter-spacing: .07em; text-transform: uppercase; font-family: var(--mono);
  padding: 2px 6px; border-radius: var(--r-sm); text-align: center;
  border: 1px solid var(--rule); 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 { font-family: var(--mono); 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);
  border-radius: 999px;
}
.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); border-radius: var(--r-sm);
  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);
  border-radius: var(--r-sm);
}
.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);
  border-radius: var(--r-sm);
}
.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); border-radius: var(--r-sm); 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; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); font-family: var(--mono);
}
.ss-title { font-size: 13.5px; }
.ss-org, .ss-date { color: var(--ink-dim); font-size: 12px; }
.ss-date { font-family: var(--mono); 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); border-radius: 999px; 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); border-radius: var(--r-sm);
}
.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); border-radius: var(--r-sm);
}
.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, 1fr); gap: 10px; margin-bottom: 8px; }
.desk {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 13px 15px; text-decoration: none; transition: border-color var(--t-fast);
}
.desk:hover { border-color: var(--accent-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 { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px; }
.job h3 { margin: 7px 0 4px; font-size: 16px; font-weight: 600; }
.job h3 a { text-decoration: none; }
.empty-note { background: var(--panel); border: 1px dashed var(--rule); border-radius: var(--r-md); padding: 20px; 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; border-radius: var(--r-sm); 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-family: var(--mono); font-size: 11.5px; text-align: right; }

/* ---------- detail pages ---------- */
.detail { margin: 20px 0 36px; }
.detail-hero .card-img { aspect-ratio: 21/8; border-radius: var(--r-lg); border: 1px solid var(--rule); }
.detail-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 24px; margin-top: 18px; }
.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; font-family: var(--mono); }
.cover-list p { color: var(--ink-dim); font-size: 12.5px; margin: 2px 0 0; }
.detail-side { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 16px; 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: right; font-family: var(--mono); }
.detail-score { border: 1px solid var(--rule); border-radius: var(--r-md); margin-bottom: 12px; padding: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.btn {
  display: inline-block; background: var(--panel2); border: 1px solid var(--rule);
  color: var(--ink); border-radius: var(--r-md); padding: 8px 14px; font-size: 13px; text-decoration: none;
}
.btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ---------- story pages ---------- */
.story { margin: 18px 0 36px; max-width: 1100px; }
.crumb { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 12px; font-family: var(--mono); }
.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-radius: var(--r-lg); border: 1px solid var(--rule); }
.credit { font-size: 11px; color: var(--ink-dim); margin: 6px 0 0; font-family: var(--mono); }
.story-grid { display: grid; grid-template-columns: 1.7fr .8fr; gap: 26px; margin-top: 18px; }
.story-grid > * { min-width: 0; }
.story-summary {
  margin: 0 0 16px; padding: 16px 18px; background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--r-md);
}
.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;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.btn-primary:hover { filter: brightness(1.12); color: #fff; border-color: var(--accent); }
.mission-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.mission-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 11px 13px;
}
.mission-card:hover { border-color: var(--accent-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); font-family: var(--mono); }
.mission-score { font-family: var(--mono); 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;
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 10px 13px;
}
.src-row:hover { border-color: var(--accent-ink); border-left-color: var(--accent); }
.src-tag {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-ink); border: 1px solid var(--accent-dim); border-radius: var(--r-sm);
  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); font-family: var(--mono); }

.side-head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; 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: 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);
  border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  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: 1.5fr .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: 1.6fr .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: 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);
  border-radius: var(--r-md); 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; border-radius: var(--r-md); }
  .drill .story-grid, .drill .detail-grid { grid-template-columns: 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: 18px 0 34px; color: var(--ink-dim); font-size: 12.5px; }
.footer a { color: var(--accent-ink); }

/* ---------- 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; border-radius: 99px;
  background: var(--accent-ink); margin-left: 5px; vertical-align: 1px;
  animation: live-pulse 2.4s ease-in-out infinite;
}
.tick-t { animation: none; }
.tick:first-child .tick-t::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 99px;
  background: var(--go); margin-right: 6px; 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) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
  .section-grid, .detail-grid { grid-template-columns: 1fr; }
  .grid3, .desk-grid { grid-template-columns: 1fr 1fr; }
  .scorestats { grid-template-columns: 1fr 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; border-radius: 99px; gap: 0; }
  .cal-chip .ico { display: none; }
  .cal-more { font-size: 9px; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .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: 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;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-sm); 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: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--panel2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.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; letter-spacing: .07em; text-transform: uppercase;
}
.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; letter-spacing: .08em; text-transform: uppercase; 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); letter-spacing: .04em; }
.drawer-outcome { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; 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);
  border-radius: var(--r-md); 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);
  border-radius: var(--r-sm); font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.btn-mini:hover { border-color: var(--alarm); color: var(--alarm); }

.rfp { position: relative; }
.rfp .pin-btn { position: absolute; top: 12px; right: 12px; }
.sup-wrap { position: relative; display: flex; }
.sup-wrap .sup { flex: 1; }
.sup-wrap .watch-btn { position: absolute; bottom: 12px; right: 12px; }
/* 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 { padding-right: 76px; min-height: 30px; }
.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; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.pinned-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.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-family: var(--mono); font-size: 11.5px; color: var(--caution); white-space: nowrap; }
.pinned-due.is-closed { color: var(--ink-faint); }
.pinned-empty { border: 1px dashed var(--rule); border-radius: var(--r-md); padding: 14px 16px; }
.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; letter-spacing: .08em; text-transform: uppercase; 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;
  background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--r-sm); padding: 9px 13px; min-width: 168px;
}
.watch-card:hover { border-color: var(--accent-ink); }
.watch-card strong { font-size: 13.5px; font-weight: 500; }
.watch-nums { font-size: 11px; color: var(--ink-dim); font-family: var(--mono); }

/* Jobs: pay column and the toggle facets */
.job-pay { font-family: var(--mono); 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); border-radius: var(--r-md); 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; letter-spacing: .04em; text-transform: uppercase;
    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);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
  }
  .more-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 6px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    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); border-radius: var(--r-sm);
  }
  .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; border-radius: var(--r-md); }
  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; border-radius: 1px; 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-family: var(--mono); font-size: 9px; letter-spacing: -.02em;
  background: var(--panel2); color: var(--ink-dim); border-radius: 1px; box-shadow: 0 0 0 1px var(--rule);
}
.flag-none { display: inline-block; width: 20px; text-align: center; color: var(--ink-dim); font-family: var(--mono); }
.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; border-radius: 2px;
  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; border-radius: 2px; 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); border-radius: var(--r-md); 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); font-family: var(--mono); }
.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; border-radius: var(--r-sm); 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; letter-spacing: .09em; text-transform: uppercase;
  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;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 13px 15px 12px; text-decoration: none;
}
a.kpi:hover { border-color: var(--accent-ink); }
a.kpi:hover .kpi-go { opacity: 1; transform: translateX(0); }
.kpi-v { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--go); }
.kpi-v.up { color: var(--go); }
.kpi-v.down { color: var(--alarm); }
.kpi-l { font-size: 12px; color: var(--ink); }
.kpi-n { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .02em; }
.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: 1fr 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; border-radius: 2px; display: inline-block; margin-right: 5px; }
.spark { display: block; }
.spark-cell { width: 96px; padding-right: 4px; }
.grp-dot { width: 8px; height: 8px; border-radius: 2px; 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; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 4px; }
.metric-big { font-family: var(--mono); 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); border-radius: var(--r-md);
  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: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--r-md); background: var(--panel); padding: 14px 16px; 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; letter-spacing: .08em; text-transform: uppercase; 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); }
a.org-ref::after { content: ' →'; color: var(--accent-ink); opacity: 0; font-size: 11px; transition: opacity var(--t-fast); }
a.org-ref:hover::after { opacity: 1; }
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* S14d: the five doors. One row of jobs-to-be-done, each with a live number; the reader
   picks their desk instead of inferring it from a magazine layout. */
.doors {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0 4px;
}
.door {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel);
  text-decoration: none; transition: border-color var(--t-fast);
}
.door:hover { border-color: var(--accent-ink); }
.door-verb { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.door-num { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--go); }
.door-sub { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; }
@media (max-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } .door:last-child { grid-column: 1 / -1; } }
.provenance { font-size: 12px; color: var(--ink-dim); margin: 6px 0 14px; line-height: 1.5; }
/* The anatomy card: one real notice with its parsed structure showing. */
.anatomy-card { display: block; }
.anatomy-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-dim); margin: 8px 0 0; }

/* 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; letter-spacing: .08em; text-transform: uppercase; 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: 1px solid var(--rule); border-left: 3px solid var(--accent-ink);
  border-radius: var(--r-md); background: var(--panel); padding: 10px 14px; margin: 6px 0 14px; line-height: 1.5; }

/* Predictions: claim cards, status chips, the quote as the centerpiece. */
.claim { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--panel);
  padding: 14px 16px; margin: 0 0 14px; 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); }
.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: 1px solid color-mix(in oklab, var(--go) 65%, transparent); }
.card-original:hover { border-color: var(--go); }
.chip-orig { color: var(--go); border-color: color-mix(in oklab, var(--go) 45%, transparent); }
.originals { margin: 6px 0 10px; }

.report-callout { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--panel); 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); border-radius: 3px; height: 14px; }
.wordbar-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent-ink); }
.wordbar-n { flex: 0 0 52px; font-family: var(--mono); 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: 1fr 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);
  border-radius: var(--r-md); 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: #0b1016;
  font-size: 16px; font-weight: 700; padding: 10px 20px; border-radius: 10px;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.donate-btn:hover { filter: brightness(1.1); background: var(--go); color: #0b1016; }
@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: #0b1016;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; }
.support-btn:hover { filter: brightness(1.1); 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; }