/* ═══════════════════════════════════════════════════════════════
   TelemetryLoop — site.css
   Single source of truth for design tokens and shared chrome.
   Linked from every page. Page-specific styles go inline in the page.
   Tokens match index.html v3 (cream/navy/gold art deco).
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Syne:wght@700;800&family=Jost:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  background:var(--cream);
  overscroll-behavior-y:none;
  text-rendering:optimizeLegibility;
}
html[data-theme="dark"]{background:#0f1828}

:root{
  --navy:#18243a;--navy2:#1f2d47;--navy3:#243454;
  --gold:#b8913a;--gold-b:#c9a84c;--gold-l:#e4c97e;
  --gold-soft:#f7f0e0;--gold-rule:#c4a05a;
  --cream:#faf6ee;--cream2:#f4ede0;--cream3:#ede4d3;--card:#fffdf9;
  --border:#e0d4b8;--border2:#cbbf9f;--border3:#bfaf8a;
  --text:#1a1610;--text2:#4a3f2f;--text3:#8a7a62;--text4:#b8a88a;
  --live:#2d8a4e;--live-soft:#e6f5ec;
  --warn:#8a5c0a;--warn-soft:#fdf3df;
  --danger:#8b1c1c;--danger-soft:#fbeded;
  --info:#1e3a6e;--info-soft:#e8eef8;

  /* ISO regional tints */
  --r-wecc:#b8c7d6; --r-caiso:#9bb3c8; --r-spp:#d6b78f; --r-ercot:#d68f8f;
  --r-miso:#a8c6a3; --r-pjm:#c0a3c6; --r-isone:#b89f99; --r-nyiso:#7fb8b0;
  --r-se:#cdb59a; --r-akhi:#d6b78f;

  /* Aliases used by older inline CSS — preserved for compatibility */
  --text-2:#4a3f2f; --text-3:#8a7a62; --text-4:#b8a88a;
  --bg:#faf6ee;
  --brand:#b8913a; --brand-dark:#8a6c2a; --brand-mid:#dbc78a; --brand-soft:#f7f0e0; --brand-dim:rgba(184,145,58,.18);
  --accent:#b8913a;
  --sans:'Jost',sans-serif;

  --display:'Syne',sans-serif;
  --body:'Jost',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1280px;
  --content:740px;
  --pad:clamp(16px,3.5vw,32px);
  --r:4px;

  --s1:4px;--s2:8px;--s3:12px;--s4:20px;--s5:32px;--s6:56px;
  --safe-bottom:env(safe-area-inset-bottom,0px);

  --shadow-sm:0 1px 4px rgba(24,36,58,.07);
  --shadow-md:0 4px 16px rgba(24,36,58,.09);
  --shadow-gold:0 2px 16px rgba(184,145,58,.12);
}

html[data-theme="dark"]{
  --cream:#0f1828;--cream2:#162338;--cream3:#1d2d48;--card:#162338;
  --gold:#c9a84c;--gold-b:#e4c97e;--gold-l:#f0deb0;
  --border:rgba(228,201,126,.16);--border2:rgba(228,201,126,.24);--border3:rgba(228,201,126,.34);
  --text:#e8e4d6;--text2:#c8c2b0;--text3:#8a8470;--text4:#5e5a4a;
  --live:#3aa15c;--live-soft:rgba(58,161,92,.14);
  --warn:#e4c97e;--warn-soft:rgba(228,201,126,.14);
  --r-wecc:#3a4d62;--r-caiso:#33495e;--r-spp:#5a4a30;--r-ercot:#5a3030;
  --r-miso:#324a30;--r-pjm:#4a3550;--r-isone:#4a3a36;--r-nyiso:#2a4a48;
  --r-se:#3a3528;--r-akhi:#3d3322;
  --text-2:#c8c2b0;--text-3:#8a8470;--text-4:#5e5a4a;
  --bg:#0f1828;
  --brand:#c9a84c;--brand-soft:rgba(228,201,126,.12);
}

body{
  background:var(--cream);color:var(--text);
  font-family:var(--body),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  min-height:100vh;
  transition:background-color .25s,color .25s;
}
a{color:var(--gold);text-decoration:none;transition:color .14s}
a:hover{color:var(--text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img,svg{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ═══ TOP NAV ═══ */
.topnav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 94%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topnav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;gap:var(--s4);justify-content:space-between}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex-shrink:0}
.brand-mark{width:30px;height:30px;background:var(--navy);color:var(--gold-l);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em}
html[data-theme="dark"] .brand-mark{background:var(--gold);color:var(--navy)}
.brand-name{font-family:var(--display);font-size:15px;font-weight:800;color:var(--text);letter-spacing:.01em}
.brand-name span{color:var(--gold)}

.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text2);text-transform:uppercase;font-weight:500;transition:.15s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-cta{padding:7px 14px;border:1px solid var(--gold);color:var(--gold) !important;font-weight:600 !important}
.nav-cta:hover{background:var(--gold);color:var(--cream) !important}

.theme-btn{background:transparent;border:1px solid var(--border2);color:var(--text);width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .ico-moon{display:none}
html[data-theme="dark"] .theme-btn .ico-sun{display:none}
html[data-theme="dark"] .theme-btn .ico-moon{display:block}

.menu-btn{display:none;background:transparent;border:1px solid var(--border2);color:var(--text);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:760px){
  .menu-btn{display:flex}
  .nav-links{display:none;position:fixed;inset:60px 0 auto 0;background:var(--card);flex-direction:column;align-items:stretch;padding:var(--s3);gap:0;border-bottom:1px solid var(--border);z-index:49}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px;border-bottom:1px solid var(--border);font-size:13px}
  .nav-links a:last-child{border-bottom:none}
}

/* ═══ PAGE HERO (article / tool pages) ═══ */
.page-hero{
  background:var(--cream);
  border-bottom:1px solid var(--border);
  padding:44px var(--pad) 36px;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 85% 100% at 50% 50%,black 30%,transparent 85%);
  opacity:.4;pointer-events:none;
}
.page-hero-inner{max-width:var(--content);margin:0 auto;position:relative;z-index:1}
.page-hero.wide .page-hero-inner{max-width:var(--max)}

.breadcrumb{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--text4);margin-bottom:14px;
}
.breadcrumb a{color:var(--text3)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:var(--border3)}

.page-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-rule);
  padding:4px 12px;margin-bottom:12px;
}

.page-hero h1{
  font-family:var(--display);
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;
  color:var(--text);margin-bottom:12px;
  overflow-wrap:break-word;
}
.page-hero h1 .hl,.page-hero h1 em{color:var(--gold);font-style:normal}
.page-hero h1 br + .hl{display:inline}

.page-deck{
  font-family:var(--body);font-size:16px;
  color:var(--text2);line-height:1.65;margin-bottom:16px;
}

.art-meta{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--text3);
  margin-top:12px;
}
.art-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--border);
  padding:4px 10px;letter-spacing:.04em;color:var(--text2);
}

/* Tool-page accent (subtle differentiator vs article pages) */
body[data-page-type="tool"] .page-tag{
  background:var(--gold-soft);
}

/* ═══ SECTION LABEL ═══ */
.sec-label{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text3);
  border-bottom:1px solid var(--border);
  padding-bottom:9px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;
}
.sec-label::before{content:'◆';color:var(--gold-rule);font-size:9px;margin-right:8px}
.sec-label a{font-size:11px;color:var(--gold);font-weight:500}

/* ═══ PANEL ═══ */
.panel{background:var(--card);border:1px solid var(--border);overflow:hidden;margin-bottom:16px}
.panel-hd{
  background:var(--navy);padding:10px 16px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-body{padding:20px 18px}

/* ═══ CALLOUTS ═══ */
.callout{padding:14px 18px;margin:20px 0;border-left:3px solid;border:1px solid var(--border)}
.callout-label{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;display:block;
}
.callout p,.callout li{font-size:14px;line-height:1.65;margin:0 0 5px;color:var(--text2)}
.callout ul{padding-left:16px}
.callout-gold{background:var(--gold-soft);border-left:3px solid var(--gold-rule)}
.callout-gold .callout-label{color:var(--gold)}
.callout-navy{background:rgba(24,36,58,.04);border-left:3px solid var(--navy)}
.callout-navy .callout-label{color:var(--navy)}
html[data-theme="dark"] .callout-navy{background:rgba(228,201,126,.05)}
html[data-theme="dark"] .callout-navy .callout-label{color:var(--gold-l)}
.callout-warn{background:var(--warn-soft);border-left:3px solid var(--warn)}
.callout-warn .callout-label{color:var(--warn)}
.callout-danger{background:var(--danger-soft);border-left:3px solid var(--danger)}
.callout-danger .callout-label{color:var(--danger)}
.callout-info{background:var(--info-soft);border-left:3px solid var(--info)}
.callout-info .callout-label{color:var(--info)}

/* ═══ ARTICLE BODY TYPOGRAPHY ═══ */
.article-body{max-width:var(--content);margin:0 auto;padding:32px var(--pad) 64px}
.article-body.wide{max-width:var(--max)}
.article-body h2{
  font-family:var(--display);font-size:1.4rem;font-weight:700;
  color:var(--text);margin:40px 0 14px;padding-top:10px;
  border-top:1px solid var(--border);letter-spacing:.01em;
}
.article-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.article-body h3{
  font-family:var(--body);font-size:1.05rem;font-weight:600;
  color:var(--text);margin:26px 0 8px;
}
.article-body p{color:var(--text2);margin-bottom:14px;font-size:15px;line-height:1.75;font-weight:400}
.article-body ul,.article-body ol{color:var(--text2);padding-left:22px;margin-bottom:14px}
.article-body li{margin-bottom:6px;font-size:15px;line-height:1.7}
.article-body strong{color:var(--text);font-weight:600}
.article-body code{
  background:var(--cream2);color:var(--info);
  font-family:var(--mono);font-size:.85em;padding:2px 6px;
  border:1px solid var(--border);
}
html[data-theme="dark"] .article-body code{background:var(--cream2);color:var(--gold-l)}
.article-body pre{
  background:var(--navy);color:var(--gold-l);
  font-family:var(--mono);font-size:13px;line-height:1.6;
  padding:14px 16px;overflow-x:auto;border:1px solid var(--navy2);
  margin:16px 0;
}
.article-body pre code{background:transparent;border:none;color:inherit;padding:0}

/* ═══ COMPARISON TABLE ═══ */
.table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--border)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap thead tr{background:var(--navy);color:var(--gold-l)}
.table-wrap thead th{
  padding:10px 14px;text-align:left;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.table-wrap tbody tr:nth-child(even){background:var(--cream2)}
html[data-theme="dark"] .table-wrap tbody tr:nth-child(even){background:rgba(228,201,126,.03)}
.table-wrap tbody tr:hover{background:var(--gold-soft)}
html[data-theme="dark"] .table-wrap tbody tr:hover{background:rgba(228,201,126,.06)}
.table-wrap tbody td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
.table-wrap tbody td strong{color:var(--text);font-weight:600}

/* ═══ TOC ═══ */
.toc{
  background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--gold-rule);
  padding:16px 20px;margin:24px 0;
}
.toc-label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);margin-bottom:10px;
}
.toc ol,.toc ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.toc li{margin:0;padding:0}
.toc a{
  font-size:14px;color:var(--text2);
  display:flex;align-items:baseline;gap:8px;
  padding:2px 0;font-weight:400;
}
.toc a:hover{color:var(--gold)}
.toc-n,.toc-num{font-family:var(--mono);font-size:11px;color:var(--text4);min-width:24px}

@media(max-width:760px){
  .toc{padding:12px 14px}
  .toc a{font-size:13px}
}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:12px 22px;cursor:pointer;border:none;
  transition:.15s;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--navy);color:var(--gold-l);border:1px solid var(--navy)}
.btn-primary:hover{background:var(--navy2);color:var(--gold-l)}
.btn-gold{background:var(--gold);color:var(--cream);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--text);color:var(--cream)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--text2)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:7px 14px;font-size:10px}

/* ═══ STATUS / LIVE DOT ═══ */
.live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--live);
  animation:tl-pulse 2.5s infinite;flex-shrink:0;
}
@keyframes tl-pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ═══ SITE FOOTER ═══ */
.footer{padding:var(--s5) var(--pad) calc(var(--s5) + var(--safe-bottom));background:var(--navy);color:#a09070;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-rule),transparent)}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3)}
.footer-brand{font-family:var(--display);font-size:15px;font-weight:700;color:var(--gold-l);letter-spacing:.02em}
.footer-brand span{color:var(--gold)}
.footer-meta{font-family:var(--mono);font-size:10px;color:#6a5e4a;letter-spacing:.06em}
.footer-links{display:flex;gap:16px}
.footer-links a{font-family:var(--mono);font-size:10px;color:#a09070;letter-spacing:.08em;text-transform:uppercase}
.footer-links a:hover{color:var(--gold-l)}

/* ═══ MOBILE BOTTOM SAFE AREA ═══ */
body{padding-bottom:var(--safe-bottom)}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .live-dot{animation:none}
}