/* ==========================================================================
   Signal Academy — shared stylesheet
   Loaded by every page via includes/header.php
   ========================================================================== */
:root{
  --bg:#0F1420; --bg-raised:#161C2C; --bg-card:#131826; --bg-card-hover:#171E30;
  --line:#232B40; --line-soft:#1B2233;
  --ink:#E9ECF5; --ink-soft:#9BA3BD; --ink-faint:#5C6480;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'Manrope', -apple-system, sans-serif;

  --crawl:#6FA8DC;    --crawl-soft:rgba(111,168,220,.12);
  --cite:#B08CE8;     --cite-soft:rgba(176,140,232,.12);
  --discover:#E8955F; --discover-soft:rgba(232,149,95,.12);
  --social:#5AD1A0;   --social-soft:rgba(90,209,160,.12);
  --gold:#F2C879;     --gold-soft:rgba(242,200,121,.12);
  --danger:#E8697A;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cite-soft); color:var(--ink);}
a{color:inherit;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(15,20,32,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none;}
.brand-mark{font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.1em;}
.brand-name{font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}

.mini-console{display:flex; align-items:center; gap:10px;}
.mc-bar{display:flex; align-items:center; gap:4px;}
.mc-track{width:38px; height:4px; background:var(--line-soft); border-radius:2px; overflow:hidden;}
.mc-fill{height:100%; border-radius:2px; transition:width .4s ease;}
.mc-label{font-family:var(--mono); font-size:9px; color:var(--ink-faint); width:34px;}
.mc-overall{
  font-family:var(--mono); font-size:11px; color:var(--ink-soft); padding-left:10px;
  border-left:1px solid var(--line);
}

/* ---------- tab bar ---------- */
.tabbar{background:var(--bg-raised); border-bottom:1px solid var(--line); overflow-x:auto;}
.tabbar-inner{
  max-width:1180px; margin:0 auto; padding:0 24px; display:flex; gap:2px; min-width:max-content;
}
.tab{
  display:flex; align-items:center; gap:7px; padding:13px 16px; font-size:13.5px; font-weight:700;
  color:var(--ink-faint); text-decoration:none; border-bottom:2.5px solid transparent; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--ink-soft);}
.tab .tab-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5;}
.tab.active{color:var(--tabcolor, var(--ink));}
.tab.active{border-bottom-color:var(--tabcolor, var(--gold));}
.tab.active .tab-dot{opacity:1;}

/* ---------- page shell ---------- */
.page{max-width:840px; margin:0 auto; padding:56px 24px 90px;}
.page-wide{max-width:1180px;}

.layer-tag{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:20px;
  margin-bottom:18px; font-weight:600;
}
.layer-tag.crawl{background:var(--crawl-soft); color:var(--crawl);}
.layer-tag.cite{background:var(--cite-soft); color:var(--cite);}
.layer-tag.discover{background:var(--discover-soft); color:var(--discover);}
.layer-tag.social{background:var(--social-soft); color:var(--social);}
.layer-tag.measure{background:var(--gold-soft); color:var(--gold);}

.mod-num{font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:8px;}
h1.hero-h{font-size:38px; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 16px;}
h2.sec-h{font-size:27px; font-weight:800; line-height:1.2; letter-spacing:-.015em; margin:0 0 14px;}
h3.sub-h{font-size:17px; font-weight:700; margin:32px 0 10px; color:var(--ink);}
p{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 16px;}
p strong{color:var(--ink); font-weight:700;}
.lede{font-size:17px; line-height:1.65; color:var(--ink-soft); margin-bottom:26px;}
a.inline-link{color:var(--cite); text-decoration:underline; text-decoration-color:rgba(176,140,232,.35);}

ul.plain{margin:0 0 16px; padding-left:20px;}
ul.plain li{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:8px;}
ul.plain li strong{color:var(--ink);}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0 30px;}
.stat{background:var(--bg-card); border:1px solid var(--line); border-radius:10px; padding:16px;}
.stat-num{font-family:var(--mono); font-size:21px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.stat-label{font-size:12px; color:var(--ink-faint); line-height:1.4;}

.callout{border-radius:10px; padding:18px 20px; margin:22px 0; border:1px solid; font-size:14.5px; line-height:1.65;}
.callout-title{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:7px;}
.callout.field{background:var(--bg-card); border-color:var(--line);}
.callout.field .callout-title{color:var(--gold);}
.callout.field p{color:var(--ink-soft); margin-bottom:0;}
.callout.warn{background:rgba(232,105,122,.07); border-color:rgba(232,105,122,.3);}
.callout.warn .callout-title{color:var(--danger);}
.callout.warn p{color:var(--ink-soft); margin-bottom:0;}

.code-block{
  background:#0A0E17; border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.7; color:#9FE3C4; overflow-x:auto;
  margin:18px 0 24px; white-space:pre;
}

table.cmp{width:100%; border-collapse:collapse; margin:20px 0 28px; font-size:13.5px; table-layout:fixed;}
table.cmp td, table.cmp th{overflow-wrap:break-word;}
table.cmp th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; border-bottom:1px solid var(--line);}
table.cmp td{padding:11px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top;}
table.cmp tr:last-child td{border-bottom:none;}
table.cmp td strong{color:var(--ink);}
table.cmp td.pill{white-space:normal;}
@media (min-width:641px){ table.cmp td.pill{white-space:nowrap;} }

.checklist{margin:26px 0 8px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:20px 22px;}
.checklist-h{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;}
.chk-item{display:flex; align-items:flex-start; gap:11px; padding:8px 0; cursor:pointer; min-width:0;}
.chk-box{width:19px; height:19px; border-radius:5px; border:1.5px solid var(--line); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:11px; transition:.15s;}
.chk-item.on .chk-box{background:var(--dotcolor, var(--social)); border-color:var(--dotcolor, var(--social)); color:#0A0E17;}
.chk-item span{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.chk-item.on span{color:var(--ink);}

/* ---------- video slot ---------- */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); margin:22px 0 28px;
}
.video-embed iframe{width:100%; height:100%; border:0; display:block;}
.video-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:20px;
}
.video-play{
  width:52px; height:52px; border-radius:50%; background:var(--bg-raised); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
}
.video-placeholder .vp-title{font-size:13.5px; font-weight:700; color:var(--ink-soft);}
.video-placeholder .vp-sub{font-family:var(--mono); font-size:11px; color:var(--ink-faint); max-width:340px; line-height:1.6;}

/* ---------- deep dive ---------- */
details.deepdive{
  margin:28px 0; border:1px solid var(--line); border-radius:12px; background:var(--bg-card); overflow:hidden;
}
details.deepdive summary{
  list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:14.5px; color:var(--ink);
}
details.deepdive summary::-webkit-details-marker{display:none;}
details.deepdive summary .dd-icon{
  font-family:var(--mono); font-size:11px; color:var(--dd-color, var(--gold)); flex-shrink:0;
  width:20px; height:20px; border-radius:5px; background:var(--dd-bg, var(--gold-soft));
  display:flex; align-items:center; justify-content:center; transition:transform .2s;
}
details.deepdive[open] summary .dd-icon{transform:rotate(45deg);}
details.deepdive .dd-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dd-color, var(--gold)); margin-right:2px;}
.dd-body{padding:2px 20px 20px 50px; border-top:1px solid var(--line-soft);}
.dd-body h4{font-size:14px; font-weight:700; color:var(--ink); margin:18px 0 8px;}
.dd-body h4:first-child{margin-top:16px;}
.dd-body p, .dd-body li{font-size:14.5px;}

/* ---------- sprint + glossary shared ---------- */
.sprint-grid{display:grid; gap:10px; margin:22px 0 8px;}
.sprint-row{display:grid; grid-template-columns:90px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-soft);}
.sprint-wk{font-family:var(--mono); font-size:12px; color:var(--ink-faint); padding-top:2px;}
.sprint-body strong{display:block; color:var(--ink); font-size:14.5px; margin-bottom:3px;}
.sprint-body span{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

.hero-badges{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.hbadge{font-family:var(--mono); font-size:11px; padding:5px 11px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); min-width:0;}

/* ---------- next/prev page nav ---------- */
.page-flow{display:flex; justify-content:space-between; gap:16px; margin-top:50px; padding-top:26px; border-top:1px solid var(--line-soft);}
.flow-link{flex:1; text-decoration:none; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--bg-card); transition:border-color .15s;}
.flow-link:hover{border-color:var(--line);}
.flow-link .fl-label{font-family:var(--mono); font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px;}
.flow-link .fl-title{font-size:14.5px; font-weight:700; color:var(--ink);}
.flow-link.next{text-align:right;}

footer.site-footer{border-top:1px solid var(--line-soft); padding:34px 24px 60px;}
footer.site-footer .footer-inner{max-width:1180px; margin:0 auto;}
footer.site-footer p{font-size:12.5px; color:var(--ink-faint); margin:0;}

@media (max-width:640px){
  .page{padding:40px 18px 70px;}
  h1.hero-h{font-size:28px;}
  .stat-row{grid-template-columns:1fr;}
  .mini-console{display:none;} /* shown only in a compact form on module pages via .mc-mobile */
  .topbar-inner{padding:12px 16px;}
  .dd-body{padding-left:20px;}
  .page-flow{flex-direction:column;}
}