@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
   Pulse look "B · Soft cards" (Oct 2026). Loaded LAST, after style.css and bni-ui.css,
   so it only restyles: no page logic depends on it. Remove the <link> to go back.
   ========================================================================== */
:root{
  --bg:#F3F5F9; --surface:#FFFFFF;
  --ink:#18202E; --ink-soft:#5B667A; --ink-faint:#8A94A6;
  --line:#E5E9F0; --line-strong:#D3DAE5;
  --red:#CF2030; --red-dark:#A3172A; --red-tint:#FCE3E6;
  --green:#17643E; --green-tint:#E3F4EA; --amber:#9A5B05; --amber-tint:#FBF0DE;
  --radius:16px; --card-radius:20px; --card-shadow:0 1px 3px rgba(24,32,46,.06), 0 1px 1px rgba(24,32,46,.03);
  --font-display:'Plus Jakarta Sans', Arial, sans-serif; --font-body:'Plus Jakarta Sans', Arial, sans-serif; --font-mono:'Plus Jakarta Sans', Arial, sans-serif;
}
html body{font-family:var(--font-body); background:var(--bg); color:var(--ink); font-size:14.5px;}
html body h1, html body .topbar h1, html body .dh-head h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; color:var(--ink);}
html body h2, html body .panel-head h2, html body h3{font-family:var(--font-display); font-weight:700; color:var(--ink);}
html body .btn, html body .btn-outline, html body .btn-sm, html body button.btn{font-family:var(--font-body);}

/* ---- top bar: white, pill tabs ---- */
.topnav{background:#fff; color:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(24,32,46,.02);}
.nav-brand{color:var(--ink);} .nav-brand small{color:var(--ink-soft);} .nav-brand b{font-weight:800; font-size:16px;}
.nav-btn{color:#3B4558; font-weight:600; padding:9px 16px;}
.nav-btn:hover, .nav-grp[open]>summary:not(.on){background:#EEF1F6;}
.nav-btn.on{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:none;}
.nav-jump select{background:#fff; color:var(--ink); border:1px solid var(--line-strong);}
.nav-out, .bni-portals>summary{color:var(--ink); border:1px solid var(--line-strong); background:#fff;}
.nav-out:hover, .bni-portals[open]>summary, .bni-portals>summary:hover{background:#EEF1F6; color:var(--ink);}
.nav-panel, .bni-portals-panel{border-radius:16px; box-shadow:0 12px 32px rgba(24,32,46,.16); border:1px solid var(--line);}
.nav-panel a.here, .bni-portals-panel a.here{color:var(--red-dark); background:var(--red-tint);}

/* ---- cards ---- */
.panel{border:0; border-radius:var(--card-radius); box-shadow:var(--card-shadow);}
.panel-head{border-bottom:1px solid #EEF1F6; padding:18px 22px;}
.panel-body{padding:20px 22px;}
.kpi-card{border:0; border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:18px 20px;}
.kpi-label{text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--ink-soft);}
.kpi-value{font-weight:800; font-size:30px; letter-spacing:-.02em; color:var(--ink);}
.overview-filter, .auth-card{border:0; border-radius:var(--card-radius); box-shadow:var(--card-shadow);}

/* ---- buttons: solid = main action, outlined = second action; both pills ---- */
.btn{border-radius:999px; padding:10px 20px; font-weight:700;}
.btn-outline{background:#fff; color:var(--ink); border:1px solid var(--line-strong); border-radius:999px; font-weight:600;}
.btn-outline:hover{background:#EEF1F6; border-color:#C4CDDA;}
.btn-nav{color:var(--ink); border-color:var(--line-strong); font-weight:600;}
.btn-nav:hover{background:#EEF1F6; border-color:#C4CDDA;}
.month-chip, .length-chip{border-color:var(--line-strong); color:#3B4558;}
.month-chip.active{background:var(--ink); border-color:var(--ink);}
.length-chip.active{background:var(--ink); border-color:var(--ink);}

/* ---- tables ---- */
table.chapters th{color:var(--ink-soft); font-weight:600; letter-spacing:.02em;}
table.chapters td{border-bottom-color:#EEF1F6;}
table.chapters tr:hover td{background:#FAFBFD;}

/* ---- misc ---- */
.field input, .field select{border-radius:12px; border-color:var(--line-strong);}
.crumbs a{color:var(--red-dark);}
.badge{font-family:var(--font-body); font-weight:600;}

/* ---- period slider (pulse_range.js), shared by Home and the chapter page ---- */
.prange{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; background:#fff; border-radius:20px; box-shadow:var(--card-shadow); padding:18px 22px; margin:0 0 18px;}
.prange-label{display:flex; flex-direction:column; gap:2px; min-width:180px;}
.prange-label span{font-size:12px; color:var(--ink-soft); font-weight:700; letter-spacing:.04em;}
.prange-label b{font-size:16px; color:var(--ink);}
.prange-box{flex:1 1 360px; position:relative; height:46px;}
.prange-track{position:absolute; left:0; right:0; top:14px; height:6px; border-radius:999px; background:#E7EBF2;}
.prange-fill{position:absolute; top:14px; height:6px; border-radius:999px; background:var(--red);}
.prange-box input{position:absolute; left:0; right:0; top:4px; width:100%; margin:0; height:26px; background:none; pointer-events:none; -webkit-appearance:none; appearance:none;}
.prange-box input::-webkit-slider-thumb{pointer-events:auto; -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:grab;}
.prange-box input::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:grab;}
.prange-box input::-webkit-slider-runnable-track{background:none;} .prange-box input::-moz-range-track{background:none;}
.prange-ticks{position:absolute; left:0; right:0; top:30px; height:14px; font-size:11px; color:var(--ink-soft);}
.prange-ticks span{position:absolute; transform:translateX(-50%); white-space:nowrap;}
.prange-quick{display:flex; gap:6px; flex-wrap:wrap;}
.prange-quick button{height:36px; padding:0 13px; border-radius:999px; border:0; background:#EEF1F6; color:#3B4558; font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.prange-quick button.on{background:var(--ink); color:#fff;} .prange-quick button:hover:not(.on){background:#E2E7EF;}
.prange-play{width:36px; height:36px; border-radius:50%; border:0; background:#EEF1F6; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.prange-play:hover{background:#E2E7EF;}
@media (max-width:600px){ .prange-ticks span.mid{display:none;} }

/* the chart's "Members only / Show all" were underlined words: now small buttons */
html body .metric-picker .mp-link{height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); text-decoration:none; font-weight:600; font-size:12px;}
html body .metric-picker .mp-link:hover{background:#EEF1F6;}
.focus-line{font-size:13px; color:var(--ink-soft); margin:0 0 10px;} .focus-line b{color:var(--ink);}