/* SIFintel content pages — shared styles (articles, about, contact, learn hub).
   Standards-mode CSS (these pages use <!doctype html>; the dashboard stays as-is). */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#eef1fb; --panel:#ffffff; --panel2:#f5f7fd; --line:#e5e9f4; --line2:#d3daec;
  --ink:#1c2338; --ink-dim:#4a5578; --ink-faint:#8a93b2;
  --navy:#1c3f77; --teal:#17a67a; --accent:#5b5bf0; --accent2:#0e9aa7;
  --pos:#12a150; --amber:#d9820b;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:820px;
}
:root[data-theme="dark"]{
  --bg:#0d1014; --panel:#141a21; --panel2:#0f141a; --line:#2a3542; --line2:#3a4a5c;
  --ink:#eef3f9; --ink-dim:#aab6c6; --ink-faint:#7c8798;
  --navy:#9fbcff; --teal:#4fe0d8; --accent:#9a9aff; --accent2:#4fe0d8;
}
html{-webkit-text-size-adjust:100%}
/* Any explicit `display` (the .subopt flex row, for one) outranks the UA stylesheet's
   [hidden]{display:none}, so elements toggled via el.hidden stay visible. Settle it once. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}

/* ---- site header / nav ---- */
header.site{position:sticky;top:0;z-index:20;background:var(--panel);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
/* 1180, not 1100: the header carries ten nav links plus Contact / Sign in / Subscribe, which
   needs ~1185px of run. The gaps below are tightened for the same reason. Content stays at
   --maxw (820px) — a header bar wider than its column is normal, a wrapping one is not. */
.navwrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:11px 18px;flex-wrap:wrap}
.wm{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.5px;
  color:var(--navy);margin:0;display:inline-flex;align-items:baseline;line-height:1}
.wm .in{position:relative;color:var(--teal)}
.wm .star{position:absolute;left:-.10em;top:-.42em;width:.5em;height:.5em;fill:var(--teal)}
nav.main{display:flex;gap:14px;flex-wrap:wrap;font-size:14.5px;font-weight:500}
nav.main a{color:var(--ink-dim)} nav.main a:hover{color:var(--ink);text-decoration:none}
nav.main a.active{color:var(--teal)}
.navspace{flex:1}
.navcta{font-size:13px;font-weight:600;color:#fff;background:var(--accent);
  padding:7px 13px;border-radius:8px} .navcta:hover{filter:brightness(1.08);text-decoration:none}
/* Secondary header links (Contact, Sign in) — present but quieter than the Subscribe CTA. */
.navmini{font-size:13px;font-weight:500;color:var(--ink-dim);white-space:nowrap}
.navmini:hover{color:var(--ink);text-decoration:none}

/* ---- layout ---- */
main.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 60px}
.crumb{font-size:12.5px;color:var(--ink-faint);margin:4px 0 18px;font-family:var(--mono)}
.crumb a{color:var(--ink-faint)}
article.doc h1{font-size:30px;line-height:1.2;letter-spacing:-.6px;margin:.1em 0 .1em;color:var(--ink)}
article.doc .lede{font-size:18px;color:var(--ink-dim);margin:.4em 0 1.2em}
article.doc h2{font-size:22px;margin:1.7em 0 .4em;letter-spacing:-.3px;
  padding-top:.5em;border-top:1px solid var(--line)}
article.doc h3{font-size:17px;margin:1.3em 0 .3em}
article.doc p,article.doc li{font-size:16px}
article.doc ul,article.doc ol{padding-left:22px} article.doc li{margin:.28em 0}
article.doc strong{color:var(--ink)}
.meta{font-size:13px;color:var(--ink-faint);font-family:var(--mono);margin:.2em 0 1.4em}

/* callouts, tables, cards */
.callout{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:8px;padding:12px 15px;margin:16px 0;font-size:15px}
.callout.warn{border-left-color:var(--amber)}
.callout b{color:var(--ink)}
table.data{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
table.data th,table.data td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.data th{background:var(--panel2);color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 17px;display:block}
.card:hover{border-color:var(--line2);text-decoration:none}
.card h3{margin:.1em 0 .3em;font-size:16px;color:var(--ink)}
.card p{margin:0;font-size:14px;color:var(--ink-dim)}
.card .tag{font-family:var(--mono);font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.5px}
.qa{margin:14px 0} .qa .q{font-weight:600;color:var(--ink)} .qa .a{color:var(--ink-dim);margin:.15em 0 .9em}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--ink-dim);
  background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:2px 10px;margin:0 4px 4px 0}

/* ---- news feed (/news) & commentary index (/commentary/) ---- */
main.wrap.wide{max-width:1080px}
.newsbar{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin:18px 0 6px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:60%}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.2px;color:var(--ink-dim);
  background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:4px 11px;
  cursor:pointer;line-height:1.5}
.chip b{color:var(--ink-faint);font-weight:500}
.chip:hover{border-color:var(--accent2);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on b{color:rgba(255,255,255,.75)}
.newssearch{flex:0 1 230px;padding:7px 12px;border:1px solid var(--line2);border-radius:20px;
  background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:14px}
.daydiv{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink-faint);margin:26px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.daydiv:first-child{margin-top:16px}
.nitem{padding:13px 0;border-bottom:1px solid var(--line)}
.nhead{font-size:16.5px;font-weight:600;line-height:1.4;color:var(--ink);display:block}
.nhead:hover{color:var(--accent2);text-decoration:none}
.nsum{margin:.3em 0 0;font-size:14px;color:var(--ink-dim);line-height:1.55}
.nmeta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;
  font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.nsrc{color:var(--ink-dim);font-weight:500}
.nsrc.official{color:var(--teal)}
.nsrc.official::after{content:" ★";font-size:9px}
.nsep{opacity:.5}
.ntag{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.warnspan{color:var(--amber)}
.postlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:20px 0}
.postcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:17px 18px;display:block}
.postcard:hover{border-color:var(--accent2);text-decoration:none}
.postcard .tag{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:.5px}
.postcard h3{margin:.25em 0 .35em;font-size:17px;color:var(--ink);line-height:1.35}
.postcard p{margin:0 0 9px;font-size:14px;color:var(--ink-dim)}
.bars{margin:16px 0}
.barrow{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(80px,2fr) minmax(110px,auto);
  gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.barlabel{font-size:14.5px;color:var(--ink);line-height:1.3}
.barlabel span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.bartrack{background:var(--panel2);border-radius:20px;height:9px;overflow:hidden}
.barfill{background:var(--teal);height:100%;border-radius:20px;min-width:2px}
.barval{text-align:right;font-family:var(--mono);font-size:13px;color:var(--ink)}
.barval span{display:block;font-size:11px;color:var(--ink-faint)}
@media(max-width:560px){ .barrow{grid-template-columns:1fr auto;gap:6px}
  .bartrack{grid-column:1/-1;order:3} }
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:20px 0 8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat b{display:block;font-size:26px;line-height:1.15;letter-spacing:-.5px;color:var(--teal);font-family:var(--sans)}
.stat span{font-size:12.5px;color:var(--ink-dim)}
.tablewrap{overflow-x:auto;margin:16px 0}
.tablewrap table.data{margin:0}
article.doc blockquote.callout{margin:16px 0;font-style:normal}
article.doc pre{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.5}
article.doc code{font-family:var(--mono);font-size:13.5px;background:var(--panel2);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
article.doc pre code{background:none;border:0;padding:0}
article.doc hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* forms (contact) */
.field{margin:12px 0} .field label{display:block;font-size:13px;color:var(--ink-dim);margin-bottom:4px}
.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:15px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;border:0;
  padding:10px 18px;border-radius:8px;cursor:pointer;font-size:15px} .btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:default;filter:none}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--ink-dim);font-weight:500}
.btn.ghost:hover{color:var(--ink);filter:none;border-color:var(--ink-faint)}

/* ---- accounts: subscribe / sign-in / preferences ---- */
/* Each newsletter is a whole clickable card, not a bare checkbox — the choice is the entire
   point of the page, so it gets the tap target and the explanation to match. */
.optlist{display:grid;gap:12px;margin:18px 0}
.opt{display:flex;gap:13px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:15px 16px;cursor:pointer;transition:border-color .12s}
.opt:hover{border-color:var(--line2)}
.opt input[type=checkbox]{margin:2px 0 0;width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt h3{margin:0 0 3px;font-size:15.5px;color:var(--ink);font-weight:600}
.opt p{margin:0;font-size:13.5px;color:var(--ink-dim);line-height:1.55}
.opt .cadence{font-family:var(--mono);font-size:11px;color:var(--teal);text-transform:uppercase;
  letter-spacing:.5px;display:block;margin-bottom:4px}
.subopt{margin:10px 0 0 0;font-size:13.5px;color:var(--ink-dim);display:flex;gap:16px;flex-wrap:wrap}
.subopt label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.subopt input[type=radio]{accent-color:var(--accent);cursor:pointer}
.alert{border-radius:9px;padding:12px 14px;margin:16px 0;font-size:14.5px;line-height:1.55;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink-dim)}
.alert.ok{border-left:3px solid var(--teal)}
.alert.err{border-left:3px solid #e5484d}
.alert.warn{border-left:3px solid var(--amber)}
.alert b{color:var(--ink)}
.authbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 22px 24px;
  margin:20px 0;max-width:540px}
.whoami{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);margin:0 0 2px}
.whoami b{color:var(--ink);font-weight:500}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--panel);margin-top:30px}
.footwrap{max-width:1100px;margin:0 auto;padding:26px 20px;display:flex;gap:26px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-dim)}
.footcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-faint);margin:0 0 8px}
.footcol a{display:block;color:var(--ink-dim);margin:3px 0}
.footcol{min-width:150px}
.legal{max-width:1100px;margin:0 auto;padding:0 20px 26px;font-size:12px;color:var(--ink-faint);line-height:1.6}
.themebtn{background:none;border:1px solid var(--line2);color:var(--ink-dim);border-radius:7px;
  padding:5px 10px;font-size:12px;cursor:pointer;font-family:var(--mono)}
@media(max-width:1150px){ .navmini{display:none} }
@media(max-width:640px){ article.doc h1{font-size:25px} .navwrap{gap:12px} nav.main{gap:13px;font-size:14px}
  .newssearch{flex:1 1 100%} .chips{min-width:100%} .nhead{font-size:16px} }