/* TRUMP360 design system — "Apple designing Reuters"
   One accent (signal red) that always means live/breaking.
   Confidence: gold = single-source, slate = confirmed.
   Status grammar everywhere: a dot on a line. */

:root {
  --paper: #FAFAF8;
  --ink: #131211;
  --ink-2: #4B4843;
  --ink-3: #6E6A64;
  --hairline: rgba(19, 18, 17, 0.12);
  --card: #FFFFFF;
  --red: #B3261E;
  --gold: #85691F;
  --slate: #45586B;
  --serif: "Fraunces", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --w: 1280px;
  --read: 680px;
}
[data-theme="dark"] {
  --paper: #141414;
  --ink: #F2EFE9;
  --ink-2: #B5B0A6;
  --ink-3: #979186;
  --hairline: rgba(242, 239, 233, 0.10);
  --card: #1C1B1A;
  --red: #D64541;
  --gold: #C9A45C;
  --slate: #8FA6BC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.read { max-width: var(--read); margin-inline: auto; }

/* ---------- Pulse Bar (signature) ---------- */
.pulse {
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.pulse .wrap { display: flex; gap: 28px; align-items: center; height: 40px; overflow-x: auto; scrollbar-width: none; }
.pulse .wrap::-webkit-scrollbar { display: none; }
.pulse b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pulse .live b { color: var(--red); }
.pulse .live b::before { content: "●"; font-size: 8px; margin-right: 6px; vertical-align: 2px; animation: blink 2.4s ease infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.pulse .date { margin-left: auto; white-space: nowrap; }

/* ---------- Masthead & nav ---------- */
header.mast { border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); z-index: 50; }
header.mast .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0.06em; }
.brand span { color: var(--red); }
nav.primary { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); overflow-x: auto; scrollbar-width: none; }
nav.primary::-webkit-scrollbar { display: none; }
nav.primary a { white-space: nowrap; padding: 4px 0; }
nav.primary a.on { color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.mast .tools { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.tool { font-size: 13px; color: var(--ink-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 14px; }
.tool:hover { color: var(--ink); }

/* ---------- Type ---------- */
h1.display { font-family: var(--serif); font-weight: 560; font-size: clamp(32px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
h2.section { font-family: var(--serif); font-size: 26px; font-weight: 560; margin-bottom: 18px; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.kicker { font-size: 15px; color: var(--ink-2); }
.smallcaps { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Labels: confidence & category ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-2); }
.chip.conf-confirmed { color: var(--slate); border-color: var(--slate); border-color: color-mix(in srgb, var(--slate) 40%, transparent); }
.chip.conf-multi-source { color: var(--slate); }
.chip.conf-single-source { color: var(--gold); border-color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.chip.conf-disputed { color: var(--red); border-color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.chip.breaking { color: var(--red); border-color: var(--red); }

/* ---------- Dot-on-line status (one grammar everywhere) ---------- */
.statusline { position: relative; height: 2px; background: var(--hairline); border-radius: 2px; margin: 14px 0 6px; }
.statusline i { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); transform: translate(-50%, -50%); transition: left 0.3s ease; }
.statusline i.hot { background: var(--gold); }
.statusline i.alert { background: var(--red); }
.statusmeta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; }

/* ---------- Home ---------- */
.hero { padding: clamp(36px, 6vw, 72px) 0 44px; border-bottom: 1px solid var(--hairline); }
.hero .meta { display: flex; gap: 12px; align-items: center; margin: 18px 0 10px; }
.hero .tldr { margin-top: 22px; display: grid; gap: 10px; max-width: 780px; }
.hero .tldr li { list-style: none; padding-left: 22px; position: relative; color: var(--ink-2); font-size: 16px; }
.hero .tldr li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--ink-3); }

.brief { border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); padding: 26px 28px; margin: 40px 0; }
.brief .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.brief ol { counter-reset: n; display: grid; gap: 12px; }
.brief li { list-style: none; counter-increment: n; display: flex; gap: 16px; align-items: baseline; }
.brief li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.cols { display: grid; grid-template-columns: 1fr 330px; gap: 56px; padding: 44px 0; }
.river article { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.river h3 { font-family: var(--serif); font-size: 22px; font-weight: 560; line-height: 1.2; margin: 6px 0; }
.river p { color: var(--ink-2); font-size: 15.5px; }
.river .meta { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.rail { display: grid; gap: 18px; align-content: start; }
.railcard { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; background: var(--card); }
.railcard h4 { font-family: var(--serif); font-size: 17px; font-weight: 560; margin-top: 8px; line-height: 1.3; }

.fin { text-align: center; padding: 56px 0 72px; color: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.fin::before { content: ""; display: block; width: 40px; height: 1px; background: var(--hairline); margin: 0 auto 18px; }

/* ---------- Rivers / Latest ---------- */
.daydivider { padding: 34px 0 10px; }
.entry { display: grid; grid-template-columns: 88px 1fr; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.entry time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); padding-top: 5px; font-variant-numeric: tabular-nums; }
.entry h3 { font-family: var(--serif); font-size: 20px; font-weight: 560; line-height: 1.25; }
.entry p { color: var(--ink-2); font-size: 15px; margin-top: 5px; }
.entry .meta { display: flex; gap: 10px; margin-top: 9px; align-items: center; }
.entry.new { animation: arrive 0.9s ease; }
@keyframes arrive { from { background: color-mix(in srgb, var(--gold) 10%, transparent); } }

/* ---------- Breaking spine ---------- */
.spinewrap { border-left: 2px solid var(--red); padding-left: 26px; margin: 26px 0; }
.spinewrap .entry { grid-template-columns: 74px 1fr; border-bottom-color: var(--hairline); border-bottom-color: color-mix(in srgb, var(--red) 18%, transparent); }

/* ---------- Timeline (gallery mode) ---------- */
.timeline { padding: 40px 0 80px; }
.tfilters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.tfilters a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-2); }
.tfilters a.on { border-color: var(--ink); color: var(--ink); }
.spine { position: relative; margin-left: 8px; }
.spine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.tev { position: relative; padding: 0 0 34px 34px; }
.tev::before { content: ""; position: absolute; left: -4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.tev.cat-Legal::before { background: var(--slate); }
.tev.cat-Policy::before { background: var(--gold); }
.tev.breaking::before { background: var(--red); }
.tev .when { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.08em; }
.tev h3 { font-family: var(--serif); font-size: 21px; font-weight: 560; margin: 5px 0 4px; line-height: 1.25; }
.tev.dim { opacity: 0.22; }

/* ---------- Tracker cards ---------- */
.trackergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 30px 0 60px; }
.tcard { border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.tcard h3 { font-family: var(--serif); font-size: 19px; font-weight: 560; line-height: 1.28; flex: 1; }
.tcard .foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-3); }

/* ---------- Article ---------- */
.article { padding: clamp(36px, 6vw, 64px) 0 40px; }
.article .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 20px 0 8px; font-size: 13px; color: var(--ink-3); }
.article .body { font-size: 18.5px; line-height: 1.72; margin-top: 30px; color: var(--ink); }
.article .tldrbox { border-block: 1px solid var(--hairline); padding: 20px 0; margin: 30px 0; display: grid; gap: 10px; }
.article .tldrbox li { list-style: none; padding-left: 22px; position: relative; color: var(--ink-2); }
.article .tldrbox li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--ink-3); }
.receipts { margin: 44px 0; }
.receipts h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.receipts a.src { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; }
.receipts .t1 { color: var(--slate); font-family: var(--mono); font-size: 11px; }
.changelog { font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: grid; gap: 6px; margin: 30px 0; }
.related { border-top: 1px solid var(--hairline); padding: 40px 0 70px; }
.related .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }

/* ---------- Search ---------- */
.searchpage { padding: 60px 0; min-height: 50vh; }
.searchbox { display: flex; border-bottom: 2px solid var(--ink); padding-bottom: 10px; max-width: 620px; margin: 0 auto 50px; }
.searchbox input { flex: 1; border: none; background: none; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.searchbox input:focus { outline: none; }
.searchbox input::placeholder { color: var(--ink-3); }

/* ---------- Archive year wall ---------- */
.yearwall { padding: 50px 0 80px; display: grid; gap: 16px; }
.monthrow { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--hairline); padding: 18px 4px; }
.monthrow .m { font-family: var(--serif); font-size: 30px; font-weight: 560; }
.monthrow .c { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* ---------- Newsletter ---------- */
.newsletter { border-top: 1px solid var(--hairline); padding: 54px 0; }
.newsletter form { display: flex; gap: 12px; max-width: 460px; margin-top: 18px; }
.newsletter input { flex: 1; border: 1px solid var(--hairline); background: var(--card); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--ink); }
.newsletter button { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 600; }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--hairline); padding: 40px 0 60px; color: var(--ink-3); font-size: 13px; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Admin ---------- */
.adminwrap { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 26px 0; }
.stat { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; background: var(--card); }
.stat b { font-family: var(--mono); font-size: 28px; display: block; }
.stat span { font-size: 12px; color: var(--ink-3); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 16px 0 34px; }
table.data th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.btn { display: inline-block; border: 1px solid var(--hairline); border-radius: 8px; padding: 7px 14px; font-size: 13px; background: var(--card); }
.btn.danger { color: var(--red); border-color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 20px; }
  .entry { grid-template-columns: 64px 1fr; gap: 14px; }
  header.mast .wrap { gap: 18px; }
  nav.primary { gap: 16px; }
}

/* ---------- QA additions ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 0 0 8px 0; z-index: 100; font-size: 14px; }
.skip:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { font-size: 14.5px; margin: 14px 0 4px; }
.toast.ok { color: var(--slate); }
.toast.err { color: var(--red); }
kbd { font-family: var(--mono); font-size: 11px; }

/* ---------- v2 additions ---------- */
.filterrow { display: flex; gap: 18px; justify-content: center; align-items: end; flex-wrap: wrap; margin: -26px 0 44px; font-size: 13px; color: var(--ink-2); }
.filterrow label { display: grid; gap: 5px; }
.filterrow select, .filterrow input { border: 1px solid var(--hairline); background: var(--card); color: var(--ink); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13.5px; }
.entry > time, .entry time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); padding-top: 5px; font-variant-numeric: tabular-nums; }
.settingsform { display: grid; gap: 16px; max-width: 640px; margin: 10px 0 40px; }
.settingsform label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.settingsform input[type=text], .settingsform input[type=number], .settingsform select, .settingsform textarea { border: 1px solid var(--hairline); background: var(--card); color: var(--ink); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; }
.settingsform .row { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

/* ---------- QA round 2 ---------- */
.article .body { white-space: pre-line; }                     /* 12: evergreen paragraphs */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }  /* 20 */
.filterrow { margin: 8px 0 44px; }                            /* 22: no negative overlap */
.searchbox { margin-bottom: 16px; }
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }     /* 21: no iOS auto-zoom */
  .hubcols aside.rail { order: -1; }                          /* 23: briefings first */
  .hubcols { display: flex; flex-direction: column; }
}