:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12151a;
  --border: #23272e;
  --text: #d7dbe0;
  --muted: #7c8794;
  --high: #e0a030;
  --critical: #e0453f;
  --normal: #3d8ff2;
  --low: #5a6270;
  --bitcoin: #f7931a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
header {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; position: sticky; top: 0;
  background: var(--bg); z-index: 5;
}
header h1 { font-size: 16px; margin: 0; }
header h1 a { color: var(--text); text-decoration: none; }
header .tag { color: var(--muted); font-weight: normal; font-size: 12px; }
nav { font-size: 12px; color: var(--muted); }
nav a { color: var(--muted); text-decoration: none; }
nav a.active, nav a:hover { color: var(--text); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px; }
.mode a { color: var(--muted); text-decoration: none; margin-right: 4px; }
.mode a.active { color: var(--text); font-weight: bold; }
#tip-btn { background: var(--bg); color: var(--bitcoin); border: 1px solid var(--bitcoin); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
#tip-btn:hover { background: var(--bitcoin); color: var(--bg); }
/* In-flow, not absolute: when open it takes its own line under the toolbar and pushes rows down,
   so it can never sit on top of the feed or the outage rail. [hidden] must beat display:flex
   (author display rules override the UA hidden rule) or the card shows permanently. */
.tip-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; padding-top: 2px; }
.tip-menu[hidden] { display: none; }
.tip-menu button { background: transparent; color: var(--bitcoin); border: 1px solid var(--bitcoin); border-radius: 999px; padding: 3px 10px; font: inherit; cursor: pointer; }
.tip-menu button:hover { background: var(--bitcoin); color: var(--bg); }
.tip-menu #tip-status { font-size: 12px; }
.watch-ctl { display: flex; }
#watch-btn { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
#watch-btn:hover { border-color: var(--text); }
/* Same in-flow, flex-basis:100% pattern as .tip-menu just above (see its comment) — a dropdown that
   floats over the feed is the exact bug that pattern was written to avoid. */
.watch-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-top: 2px; }
.watch-menu[hidden] { display: none; }
.watch-check { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.watch-clear-btn { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font: inherit; cursor: pointer; }
.watch-clear-btn:hover { color: var(--text); border-color: var(--text); }
.layout { display: flex; gap: 16px; padding: 0 16px 24px; align-items: flex-start; }
main { flex: 1 1 auto; min-width: 0; }
.row { border-bottom: 1px solid var(--border); padding: 8px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.row-below-cutoff { opacity: 0.72; }
.row.kbd-focus { outline: 1px solid var(--normal); outline-offset: 2px; background: var(--panel); }
.row.unread .title { color: var(--high); }
.unread-divider { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px dashed var(--border); padding: 10px 0 4px; margin-top: 4px; }
.ts { color: var(--muted); font-size: 12px; width: 60px; flex: 0 0 auto; }
.chip { font-size: 10px; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; border: 1px solid; flex: 0 0 auto; }
.chip-high { color: var(--high); border-color: var(--high); }
.chip-critical { color: var(--critical); border-color: var(--critical); }
.chip-normal { color: var(--normal); border-color: var(--normal); }
.chip-low { color: var(--low); border-color: var(--low); }
.chip-sources { color: var(--muted); border-color: var(--border); cursor: pointer; }
.chip-sources:hover, .chip-sources:focus { color: var(--text); border-color: var(--muted); }
.chip-mentions { color: var(--muted); border-color: var(--border); border-style: dashed; }
.chip-entity { font-size: 10px; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.chip-entity:hover, .chip-entity:focus { color: var(--text); border-color: var(--muted); }
.title { color: var(--text); text-decoration: none; font-weight: 600; }
/* REVIEW #3: one flex item for title + diff + permalink, so the `#` never wraps onto its own line.
   REVIEW #1 (10-05): it takes the rest of the ts/chip line and wraps inside it, so a long title
   never drops below the chip as a whole item. */
.headline { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }
.title:hover { text-decoration: underline; }
.summary { flex-basis: 100%; color: var(--muted); font-size: 12px; margin-left: 68px; min-width: 0; overflow-wrap: anywhere; }
.src { color: var(--muted); }
.src-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border); }
.src-link:hover { color: var(--text); text-decoration-color: var(--muted); }
.search-box input[type=search] { font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; width: 220px; max-width: 60vw; }
.rss-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.rss-link:hover { color: var(--text); }
.also { color: var(--low); }
.empty, .muted { color: var(--muted); }
.sidebar { flex: 0 0 260px; display: flex; flex-direction: column; gap: 16px; }
/* M7a (REVIEW #1): squawk, watch and tip live here, after the tape in the HTML, so row 1 is near the top. */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.controls .squawk-header-btn { margin-left: 0; }
.controls .squawk-popout-link { margin-left: 0; }
.controls .tip-menu { justify-content: flex-start; }
header h1 .logo { color: var(--text); }
.outage-rail { border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: var(--panel); }
.outage-rail h2 { font-size: 13px; margin: 0 0 8px; }
.outage-rail h3 { font-size: 11px; color: var(--muted); margin: 12px 0 6px; }
.outage-item { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.outage-item a { color: var(--text); text-decoration: none; display: block; }
.outage-item.open { color: var(--critical); }
.outage-item.open a { color: var(--critical); }
.outage-item .duration { color: var(--muted); }
.calendar-item { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.calendar-item a { color: var(--text); text-decoration: none; display: block; }
.cal-when { color: var(--normal); font-size: 10px; letter-spacing: .04em; }
.cal-note { color: var(--muted); }
/* /calendar page rows (ROADMAP #38): distinct from .calendar-item (the sidebar rail, above) — that
   rule's `a { display: block }` would stack the date/chip/title line onto separate lines here. */
.cal-row { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cal-date { color: var(--muted); }
.card { max-width: 720px; margin: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.score-explain { max-width: 720px; margin: 0 16px 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); font-size: 12px; }
.score-explain h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.score-explain ul { margin: 0; padding: 0 0 0 16px; line-height: 1.7; }
.score-explain .explain-note { color: var(--muted); }
.diff-link { color: var(--normal); font-size: 11px; text-decoration: none; border: 1px solid var(--normal); border-radius: 3px; padding: 1px 5px; }
.diff-link:hover { background: var(--normal); color: var(--bg); }
.permalink { color: var(--dim, #888); font-size: 12px; text-decoration: none; padding: 0 2px; }
.permalink:hover { text-decoration: underline; }
.diff-block { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; border: 1px solid var(--border); border-radius: 4px; padding: 10px; background: var(--bg); }
.diff-add { color: #3fb950; display: block; }
.diff-del { color: var(--critical); display: block; }
.diff-ctx { color: var(--muted); display: block; }
.value-changes { margin: 0 0 12px; padding: 0 0 0 18px; font-size: 13px; line-height: 1.7; }
table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.pricing-table th { user-select: none; white-space: nowrap; }
.pricing-table th.num, .pricing-table td:nth-child(3), .pricing-table td:nth-child(4),
.pricing-table td:nth-child(5), .pricing-table td:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; }
.pricing-table td { font-size: 13px; }
.data-table th { user-select: none; white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td { font-size: 13px; }
/* ROADMAP #15 (one-handed mobile), next slice: pricing/status/models tables have 5-7 columns and were
   sized to shrink-to-fit at any viewport — auto table layout wrapped cell text (even letter-by-letter
   in the narrowest columns) instead of scrolling. white-space:nowrap forces natural column widths so
   the table overflows its wrapper, which scrolls horizontally instead of squeezing text illegible. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: auto; min-width: 100%; }
.table-wrap td, .table-wrap th { white-space: nowrap; }
#sub-form input[type=url], #unsub-form input[type=url], #sub-form select {
  font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 5px 8px; width: 100%; max-width: 420px; margin-top: 4px;
}
#sub-form fieldset { border: 1px solid var(--border); border-radius: 4px; margin: 10px 0; }
#sub-form legend { color: var(--muted); font-size: 12px; padding: 0 4px; }
.cat-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cat-check { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
#sub-form button, #unsub-form button {
  background: transparent; color: var(--normal); border: 1px solid var(--normal); border-radius: 999px;
  padding: 5px 14px; font: inherit; cursor: pointer; margin-top: 8px;
}
#sub-form button:hover, #unsub-form button:hover { background: var(--normal); color: var(--bg); }
#sub-status, #unsub-status { margin-left: 10px; color: var(--muted); font-size: 12px; }
footer { padding: 16px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--border); }
nav.subnav { padding: 4px 16px 0; }
nav.footnav { margin-bottom: 6px; font-size: 12px; }
.squawk-page { max-width: 640px; }
.squawk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.squawk-controls select, .squawk-controls input[type=range] { font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.squawk-ctl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.squawk-start-btn { background: var(--bg); color: var(--normal); border: 1px solid var(--normal); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.squawk-start-btn:disabled { opacity: 0.6; cursor: default; }
.squawk-log { font-size: 12px; }
.squawk-log p { padding: 4px 0; border-bottom: 1px solid var(--border); margin: 0; }
.squawk-log a { color: var(--text); text-decoration: none; }
.squawk-log a:hover { text-decoration: underline; }
/* Compact header control (PLAN.md ROADMAP #1 step c, ceo wake-48 spec): one button, no menu, pinned
   to the right of the nav (header is display:flex — margin-left:auto pushes it past the last nav item). */
.squawk-header-btn { background: var(--bg); color: var(--normal); border: 1px solid var(--normal); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.squawk-header-btn:hover { background: var(--normal); color: var(--bg); }
/* Live indicator: off = invisible (no dot rendered) until Start is clicked, then a solid pulsing red
   dot while actually listening, or a dim static dot while muted-but-running. Sized and colored to read
   at a glance — the owner reported the old text-only "listening" status was too easy to miss. */
.squawk-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.squawk-dot-live { background: var(--critical); box-shadow: 0 0 0 0 rgba(224, 69, 63, 0.8); animation: squawk-pulse 1.4s ease-in-out infinite; }
.squawk-dot-muted { background: var(--muted); }
.squawk-dot-pending { background: var(--high); }
.squawk-status-live { color: var(--critical); font-weight: bold; }
@keyframes squawk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 69, 63, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(224, 69, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 69, 63, 0); }
}
@media (max-width: 700px) {
  .layout { flex-direction: column; }
  main { align-self: stretch; }
  .sidebar { flex: 1 1 auto; width: 100%; }
  .summary { margin-left: 0; }
  /* ROADMAP #15 (one-handed mobile): nav/chip/permalink tap targets were sized for a mouse pointer
     (12px text, 0-2px padding) — too small to hit reliably with a thumb. Bump padding so each link's
     hit box clears a thumb-tip without growing the on-screen text (density stays the same). */
  nav a { display: inline-block; padding: 6px 2px; }
  .mode a { display: inline-block; padding: 6px 4px; }
  .chip-sources { padding: 5px 8px; }
  .permalink { padding: 6px; margin-left: -6px; }
  .rss-link { display: inline-block; padding: 4px 0; }
}

/* /pricing/models cross-host comparison (PLAN.md ROADMAP #7) */
.compare-card { max-width: 900px; }
/* REVIEW #1 (2026-10-22): the 6-column tracker table overflowed the 720px card at 1280px, hiding
   "Days left" and "Replacement" behind a scrollbar while half the viewport sat empty. */
.deprecations-card { max-width: 1200px; }
.deprecations-card > p { max-width: 720px; }
.deprecations-card .pricing-table td:nth-child(6) { text-align: left; }
.data-table td.cheapest { color: var(--normal); font-weight: 600; }
.two-col { column-count: 2; column-gap: 24px; }
.two-col li { break-inside: avoid; }
/* ROADMAP #48 (2): squawk pop-out link (header ↗, /squawk button) and the bare pop-out window */
.squawk-popout-link { color: var(--normal); text-decoration: none; margin-left: 6px; padding: 2px 6px; }
.squawk-popout-link:hover { color: var(--bg); background: var(--normal); border-radius: 4px; }
.squawk-popout-btn { border: 1px solid var(--normal); border-radius: 999px; padding: 3px 10px; margin-left: 0; }
body.squawk-popout { padding: 8px; }
body.squawk-popout .squawk-log { max-height: 60vh; overflow-y: auto; }