/* ============================================================================
 * Impulse AI · Fed Rate Predictor — dark editorial design system.
 * Ported from the Claude Design handoff (FOMC Interest Rate Predictions).
 * Kept verbatim where possible; the drivers section is reworked from a
 * dovish↔hawkish diverging spectrum into ranked feature-importance magnitudes
 * (the model emits unsigned importances, so we show influence, not direction).
 * ==========================================================================*/

/* ============================ TOKENS ============================ */
:root{
  --deep-blue:#024C77; --teal:#018196; --cyan:#04ABC2; --pink:#FF97A6;
  --navy:#0B2738; --steel:#2E7096; --dark-teal:#0E434B; --aqua:#35ACC0; --sky:#59CEDE;
  --crimson:#A73243; --blush:#F9BEC7;
  --white:#FFFFFF;
  /* dark surfaces */
  --bg:#08161F;
  --bg-2:#0B1B25;
  --surface:#0E2530;
  --surface-2:#102B38;
  --ink:#EAF1F4;
  --muted:#8AA2AF;
  --muted-2:#5E7686;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  /* outcome colors — refined map: Cut Cyan · Hold Teal · Raise Pink */
  --cut:#04ABC2; --hold:#018196; --raise:#FF97A6;
  --serif:'Averia Serif Libre', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.app{
  position:relative; min-height:100vh;
  background:
    radial-gradient(1300px 760px at 86% -14%, rgba(1,129,150,.30), transparent 58%),
    radial-gradient(1000px 620px at -6% 112%, rgba(255,151,166,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(4,171,194,.05), transparent 70%),
    var(--bg);
}
/* faint technical grid */
.app::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(135% 105% at 50% -5%, #000 0%, transparent 78%);
          mask:radial-gradient(135% 105% at 50% -5%, #000 0%, transparent 78%);
}
.page{position:relative; z-index:1;}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:-.04em; margin:0;}
a{color:inherit;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px clamp(20px,4vw,56px);
  background:rgba(8,22,31,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header::after{content:""; position:absolute; left:0; bottom:-1px; width:84px; height:2px; background:var(--pink);}
.imp-logo{display:inline-flex; align-items:center; text-decoration:none; border-radius:3px;}
.imp-logo:hover{opacity:.82;}
.brand-logo{width:auto; display:block; height:46px;}
.header-right{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px);}
.last-updated{display:flex; align-items:center; gap:8px; font-size:12px;}
.lu-dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 1px rgba(4,171,194,.8); animation:lupulse 2.4s infinite;}
@keyframes lupulse{0%{box-shadow:0 0 10px 1px rgba(4,171,194,.7);}50%{box-shadow:0 0 4px 0 rgba(4,171,194,.35);}100%{box-shadow:0 0 10px 1px rgba(4,171,194,.7);}}
.lu-label{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:600; color:var(--muted-2);}
.lu-time{font-family:var(--mono); color:var(--ink); font-weight:500; font-size:12px;}

/* model static label (single model) */
.model-static{display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--line-strong);}
.model-dd-label{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:600; color:var(--cyan);}
.model-static-name{color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap;}

/* ============================ HERO ============================ */
.hero{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,80px) clamp(20px,4vw,56px) clamp(44px,6vw,84px);}
.hero-eyebrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted); margin-bottom:16px;}
.hero-eyebrow-main{font-family:var(--mono); font-weight:600; font-size:clamp(12px,1.2vw,15px); text-transform:uppercase; letter-spacing:.14em; color:var(--cyan);}
.hero-eyebrow-sep{color:var(--muted-2);}
.hero-eyebrow-date{font-size:clamp(14px,1.4vw,18px); color:var(--muted);}
.hero-question{
  color:var(--ink); font-size:clamp(30px,5vw,64px); line-height:1.02; max-width:13ch;
  margin-bottom:clamp(26px,3.5vw,44px); text-wrap:balance;
}

/* color-block split */
.hero-split{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(14px,1.6vw,20px);}
.lead-panel{
  position:relative; border-radius:10px; padding:clamp(26px,3.2vw,48px) clamp(28px,3.4vw,52px);
  color:var(--white); display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(320px,40vw,540px); overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(1,129,150,.7);
}
.lead-panel::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 90% 6%, rgba(255,255,255,.18), transparent 58%); pointer-events:none;}
.lead-panel::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:rgba(255,255,255,.5); z-index:3;}
.lead-top{display:flex; flex-direction:column; gap:8px; position:relative; z-index:2;}
.lead-rank{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:clamp(11px,1vw,13px); font-weight:600; color:rgba(255,255,255,.82);}
.lead-name{font-family:var(--serif); font-size:clamp(34px,4.4vw,72px); line-height:.95; letter-spacing:-.04em;}
.lead-figure{position:relative; z-index:2; margin-top:auto;}
.lead-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; position:relative; z-index:2; color:rgba(255,255,255,.84); font-size:clamp(13px,1.2vw,16px);}

/* big number */
.big-num{font-family:var(--serif); line-height:.82; letter-spacing:-.05em; display:inline-flex; align-items:flex-start; font-variant-numeric:tabular-nums;}
.lead-figure .big-num-val{font-size:clamp(96px,17vw,260px); text-shadow:0 6px 50px rgba(255,255,255,.18);}
.lead-figure .big-num-suffix{font-size:clamp(40px,6vw,96px); margin-top:.12em; margin-left:.04em; opacity:.78;}
.minor-figure .big-num-val{font-size:clamp(56px,8.5vw,128px);}
.minor-figure .big-num-suffix{font-size:clamp(26px,3.4vw,52px); margin-top:.1em; opacity:.72;}

/* minor column */
.minor-col{display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px);}
.minor-panel{
  position:relative; flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:clamp(20px,2.4vw,34px) clamp(22px,2.6vw,36px);
  display:flex; flex-direction:column; justify-content:space-between; color:var(--ink);
  overflow:hidden;
}
.minor-panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--cyan));}
.minor-panel.out-cut{--accent:var(--cut);}
.minor-panel.out-hold{--accent:var(--hold);}
.minor-panel.out-raise{--accent:var(--raise);}
.minor-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.minor-swatch{width:13px; height:13px; border-radius:3px; flex:none;}
.minor-name{font-family:var(--serif); font-size:clamp(22px,2.2vw,34px); letter-spacing:-.03em; color:var(--ink);}
.minor-figure{color:var(--ink);}
.out-cut .minor-figure .big-num-val{color:var(--cut);}
.out-raise .minor-figure .big-num-val{color:var(--raise);}
.out-hold .minor-figure .big-num-val{color:var(--sky);}

/* bp breakdown (optional secondary detail) */
.bp-break{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;}
.bp-tag{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:600; color:var(--muted-2);}
.bp-item{display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px; border-radius:4px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-size:12px;}
.bp-bp{font-family:var(--mono); font-weight:600;}
.bp-pct{font-family:var(--mono); font-variant-numeric:tabular-nums; opacity:.85;}
.minor-panel .bp-break{margin-top:14px;}
.lead-panel .bp-tag{color:rgba(255,255,255,.7);}
.lead-panel .bp-item{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.2); color:#fff;}

/* ============================ SECTIONS (shared) ============================ */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,118px) clamp(20px,4vw,56px);}
.section-head{display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,32px); margin-bottom:clamp(36px,5vw,60px); flex-wrap:wrap;}
.section-index{font-family:var(--mono); font-size:clamp(20px,2.2vw,30px); color:var(--cyan); letter-spacing:-.02em; line-height:1; flex:none; padding-top:6px; font-weight:500;}
.section-head-text{flex:1; min-width:280px;}
.section-title{font-size:clamp(34px,5vw,72px); line-height:1; color:var(--ink); letter-spacing:-.045em;}
.section-lede{font-size:clamp(16px,1.7vw,22px); color:var(--muted); margin:16px 0 0; max-width:48ch; text-wrap:pretty; line-height:1.45;}

/* legend */
.legend{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.legend-item{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted);}
.legend-swatch{width:13px; height:13px; border-radius:3px;}

/* ============================ MARKET COMPARISON ============================ */
.cmp-section{background:transparent; border-top:1px solid var(--line);}
.cmp-list{display:flex; flex-direction:column; gap:clamp(28px,3.2vw,40px);}
.cmp-row{display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center;}
.cmp-track-wrap{position:relative;}
.cmp-callouts{position:absolute; left:0; right:0; top:0; height:0; pointer-events:none; z-index:3;}
.cmp-callout{position:absolute; bottom:2px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; line-height:1; transition:opacity .45s;}
.cmp-callout-pct{font-family:var(--serif); font-size:clamp(15px,1.6vw,21px); letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.cmp-callout-line{width:1px; height:9px; margin-top:3px; background:currentColor; opacity:.55;}
.cmp-meta{display:flex; flex-direction:column; gap:4px;}
.cmp-source{font-family:var(--serif); font-size:clamp(22px,2.4vw,32px); letter-spacing:-.03em; color:var(--ink); line-height:1;}
.cmp-row.is-primary .cmp-source{color:var(--cyan);}
.cmp-badge{font-family:var(--mono); display:inline-block; width:fit-content; white-space:nowrap; text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:600; color:var(--bg); background:var(--cyan); padding:3px 8px; border-radius:4px; margin-top:2px;}
.cmp-track{display:flex; height:clamp(56px,6vw,76px); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line);}
.cmp-seg{position:relative; display:flex; align-items:center; padding-left:13px; min-width:0; transition:width 1s cubic-bezier(.2,.7,.2,1);}
.cmp-row.is-primary .cmp-track{box-shadow:inset 0 0 0 1px rgba(4,171,194,.55), 0 0 24px -6px rgba(4,171,194,.5);}
.cmp-seg-pct{font-family:var(--serif); color:rgba(255,255,255,.96); font-size:clamp(18px,2vw,28px); letter-spacing:-.03em; white-space:nowrap; transition:opacity .4s; text-shadow:0 1px 3px rgba(0,0,0,.35); font-variant-numeric:tabular-nums;}
.cmp-seg-suffix{font-size:.6em; opacity:.85;}
.cmp-seg.out-raise .cmp-seg-pct{color:var(--bg);}

.not-advice{
  display:flex; align-items:baseline; gap:18px; margin:clamp(40px,5vw,64px) 0 0;
  padding-top:22px; border-top:1px solid var(--line); max-width:840px;
}
.not-advice-tag{
  font-family:var(--mono); flex:none; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crimson); white-space:nowrap; transform:translateY(1px);
}
.not-advice-text{margin:0; font-size:clamp(14px,1.45vw,18px); line-height:1.55; color:var(--muted); text-wrap:pretty;}
.not-advice-text strong{color:var(--ink); font-weight:700;}

/* ============================ DRIVERS (ranked magnitudes) ============================ */
.drv-section{background:transparent; border-top:1px solid var(--line);}
.drv-note{
  display:flex; align-items:baseline; gap:16px; margin:0 0 clamp(28px,3.4vw,40px);
  padding-bottom:22px; border-bottom:1px solid var(--line); max-width:920px;
}
.drv-note-tag{font-family:var(--mono); flex:none; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); transform:translateY(1px); white-space:nowrap;}
.drv-note-text{margin:0; font-size:clamp(13px,1.3vw,16px); line-height:1.5; color:var(--muted); text-wrap:pretty;}
.drv-list{display:flex; flex-direction:column;}
.drv-row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,2vw,26px);
  align-items:start; padding:clamp(20px,2.4vw,30px) 0; border-top:1px solid var(--line);
}
.drv-row:last-child{border-bottom:1px solid var(--line);}
.drv-rank{font-family:var(--mono); font-size:clamp(13px,1.3vw,16px); font-weight:600; color:var(--muted-2); padding-top:6px; letter-spacing:.04em;}
.drv-body{min-width:0;}
.drv-head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.drv-name{font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); color:var(--ink); letter-spacing:-.03em; line-height:1.05;}
.drv-weight{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(12px,1.2vw,14px); font-weight:600; color:var(--cyan); white-space:nowrap;}
.drv-weight-unit{color:var(--muted-2); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:.8em; margin-left:6px;}
.drv-detail{font-size:clamp(13px,1.3vw,16px); color:var(--muted); margin-top:4px;}
.drv-track{position:relative; height:14px; margin-top:16px; border-radius:3px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden;}
.drv-bar{
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--teal), var(--cyan));
  box-shadow:0 0 18px -4px var(--cyan);
  transition:width 1s cubic-bezier(.2,.7,.2,1);
}

/* ============================ FOOTER ============================ */
.site-footer{position:relative; z-index:1; background:rgba(4,12,18,.7); border-top:1px solid var(--line);}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,64px) clamp(20px,4vw,56px); display:flex; flex-direction:column; gap:24px;}
.footer-disclaimer{margin:0; max-width:900px; color:var(--muted-2); font-size:14px; line-height:1.6;}
.footer-meta{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line);}
.footer-link{color:var(--cyan); text-decoration:none; font-weight:600; font-size:16px; transition:color .15s;}
.footer-link:hover{color:var(--sky);}
.footer-copy{font-family:var(--mono); color:var(--muted-2); font-size:13px;}

/* ============================ SKELETON ============================ */
.sk{display:block; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04)); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.sk-line{height:18px;}
.sk-panel{align-items:flex-start; justify-content:flex-end;}
.lead-panel.sk-panel{background:var(--surface); box-shadow:0 0 0 1px var(--line);}
.lead-panel.sk-panel::before,.lead-panel.sk-panel::after{display:none;}
.minor-panel.sk-panel::before{display:none;}
.sk-figure{width:62%; height:clamp(80px,14vw,200px); border-radius:10px;}
.sk-figure.sm{height:clamp(48px,8vw,110px); width:50%;}

/* ============================ ERROR ============================ */
.fatal-error{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,8vw,96px) clamp(20px,4vw,56px); color:var(--muted);}
.fatal-error h2{font-size:clamp(28px,4vw,48px); color:var(--ink); margin-bottom:12px;}

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr;}
  .lead-panel{min-height:auto;}
  .minor-col{flex-direction:row;}
  .minor-panel{flex:1;}
  .cmp-row{grid-template-columns:1fr; gap:10px;}
  .cmp-meta{flex-direction:row; align-items:center; gap:10px;}
  /* the source label moves above the bar here, so reserve room for the
     narrow-segment callouts that sit above the track (avoids overlap). */
  .cmp-track-wrap{margin-top:30px;}
  .lead-figure .big-num-val{font-size:clamp(84px,26vw,150px);}
}
@media (max-width:560px){
  .minor-col{flex-direction:column;}
  .header-right{gap:12px;}
  .lu-time{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .lu-dot{animation:none;}
}