/* ============================================================
   Insights report — The Great Entry-Level Extinction
   Page-scoped styles. Extends the global design system in
   /styles.css; adds nothing to it. Palette and type are
   inherited from :root there.
   ============================================================ */

/* ---------- report shell ---------- */
.r-lede-block{max-width:44rem}
.r-lede-block p{font-size:1.08rem;color:#26314A;margin-bottom:1.2rem}
.r-byline{margin:.9rem 0 1.6rem}

.r-hero{padding:clamp(2.2rem,4vw,3.4rem) 0 clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.r-hero::after{
  content:"";position:absolute;right:-9rem;top:-12rem;width:32rem;height:32rem;border-radius:50%;
  background:radial-gradient(circle,rgba(253,225,116,.34),rgba(253,225,116,0) 68%);pointer-events:none;z-index:0;
}
.r-hero .wrap{position:relative;z-index:1}

/* ---------- headline stat strip ---------- */
.r-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.4rem 1.8rem;margin-top:2.6rem;padding-top:2rem;border-top:2px dotted var(--navy-tint-2);
}
.r-stat{padding-left:.9rem;border-left:3px solid var(--gold)}
.r-stat b{
  display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.6vw,2.15rem);line-height:1;color:var(--navy);
}
.r-stat span{
  display:block;font-size:.76rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin-top:.5rem;line-height:1.45;
}

/* ---------- part headers ---------- */
.r-part{max-width:48rem}
.r-part h2{margin:.85rem 0 .7rem}
.r-part p{color:var(--slate);font-size:1.05rem}

/* ---------- panels & splits ---------- */
.r-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.25rem;margin-top:2.4rem;align-items:start}
.r-split.r-split-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:940px){.r-split,.r-split.r-split-even{grid-template-columns:1fr}}

.r-panel{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,1.9rem);box-shadow:var(--shadow);
}
.r-panel h3{font-size:1.12rem;font-weight:700;margin-bottom:.7rem}
.r-panel p{color:#26314A;font-size:1rem}
.r-panel p+p{margin-top:.85rem}
.r-panel-head{border-bottom:1px solid var(--rule);padding-bottom:1rem;margin-bottom:1.2rem}
.r-panel-head h3{margin-bottom:.25rem}
.r-panel-head p{font-size:.9rem;color:var(--slate)}

/* ---------- tinted callouts ---------- */
.r-note{border-radius:var(--r-sm);padding:1.1rem 1.2rem;margin-top:1.3rem;font-size:.96rem}
.r-note b{
  display:block;font-family:var(--text);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:.5rem;
}
.r-note-gold{background:#FEF7E0;border:1px solid #F3DFA0}
.r-note-gold b{color:var(--gold-ink)}
.r-note-teal{background:var(--teal-tint);border:1px solid #B4DDE2}
.r-note-teal b{color:#0E5F6B}
.r-note-navy{background:var(--navy-tint);border:1px solid var(--navy-tint-2)}
.r-note-navy b{color:var(--navy-mid)}

/* ---------- checklist ---------- */
.r-checklist{list-style:none;margin-top:1.2rem}
.r-checklist li{position:relative;padding-left:1.6rem;font-size:1rem;color:#26314A}
.r-checklist li+li{margin-top:.85rem}
.r-checklist li::before{
  content:"";position:absolute;left:0;top:.5em;width:.65rem;height:.65rem;
  border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg);
}
.r-checklist strong{color:var(--navy)}

/* ---------- figures & charts ---------- */
.r-figure{margin:0}
.r-chart{width:100%}
.r-chart svg{display:block;width:100%;height:auto;overflow:visible}
.r-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin-bottom:1rem}
.r-legend span{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--slate);font-weight:500}
.r-legend i{width:.85rem;height:.85rem;border-radius:3px;flex:none}
.r-legend i.line{height:0;border-top:3px solid currentColor;border-radius:0}
.r-figure figcaption{font-size:.8rem;color:var(--slate);margin-top:1rem;line-height:1.5}

.r-toggle{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--navy-tint);border-radius:999px;margin-top:.9rem}
.r-toggle button{
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--navy-mid);
  background:transparent;border:0;border-radius:999px;padding:.4rem .95rem;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.r-toggle button:hover{color:var(--navy)}
.r-toggle button[aria-pressed="true"]{background:var(--paper);color:var(--navy);box-shadow:0 1px 2px rgba(23,40,69,.12)}

/* data-behind-the-chart disclosure */
.r-data{margin-top:1rem;border-top:1px solid var(--rule);padding-top:.9rem}
.r-data summary{
  font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--navy);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.4rem;
}
.r-data summary::-webkit-details-marker{display:none}
.r-data summary::after{content:"+";color:var(--gold-ink);font-size:1.15rem;line-height:1}
.r-data[open] summary::after{content:"\2013"}
.r-data table{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.86rem}
.r-data caption{text-align:left;font-size:.8rem;color:var(--slate);padding-bottom:.5rem}
.r-data th,.r-data td{text-align:right;padding:.45rem .5rem;border-bottom:1px solid var(--rule)}
.r-data th:first-child,.r-data td:first-child{text-align:left}
.r-data thead th{font-family:var(--text);font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.r-data tbody th{font-weight:600;color:var(--navy)}

/* ---------- the calculator (on navy) ---------- */
.r-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;margin-top:2.6rem;align-items:start}
@media(max-width:940px){.r-calc{grid-template-columns:1fr}}

.r-calc-box{
  background:rgba(255,255,255,.045);border:1px solid var(--navy-line);
  border-radius:var(--r);padding:clamp(1.3rem,2.4vw,1.8rem);
}
.r-calc-box h3{
  font-size:.78rem;font-family:var(--text);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.4rem;padding-bottom:.8rem;border-bottom:1px solid var(--navy-line);
}
.r-calc-box h3.teal{color:#7FD3DC}
.r-calc-box h3+h3{margin-top:2rem}

.r-field+.r-field{margin-top:1.5rem}
.r-field-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.r-calc label{
  display:block;font-family:var(--display);font-weight:600;font-size:.95rem;color:#E6EBF4;margin-bottom:0;
}
.r-field output{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--gold);white-space:nowrap}
.r-field output.teal{color:#7FD3DC}
.r-hint{font-size:.83rem;color:#9FB0C9;margin-top:.5rem;line-height:1.5}

/* range inputs: reset the global input styling, then rebuild */
.r-range{
  -webkit-appearance:none;appearance:none;width:100%;height:1.4rem;margin-top:.6rem;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.r-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(255,255,255,.16)}
.r-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.16)}
.r-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--gold);border:2px solid var(--navy-deep);margin-top:-.36rem;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.r-range::-moz-range-thumb{
  width:1.15rem;height:1.15rem;border-radius:50%;background:var(--gold);
  border:2px solid var(--navy-deep);box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.r-range.teal::-webkit-slider-thumb{background:#7FD3DC}
.r-range.teal::-moz-range-thumb{background:#7FD3DC}

.r-calc select{
  margin-top:.6rem;background:var(--navy-deep);border:1.5px solid var(--navy-line);color:#fff;
  border-radius:var(--r-sm);font-size:.95rem;padding:.7rem .85rem;
}
.r-calc select:hover{border-color:var(--gold-mid)}

/* ledger */
.r-ledger{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.r-ledger{grid-template-columns:1fr}}
.r-ledger-col{background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:var(--r-sm);padding:1.1rem}
.r-ledger-col>span{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9FB0C9}
.r-ledger-col strong{
  display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3vw,2rem);line-height:1.1;margin:.5rem 0 .25rem;color:var(--gold);
}
.r-ledger-col.teal strong{color:#7FD3DC}
.r-ledger-col em{display:block;font-style:normal;font-size:.8rem;color:#9FB0C9}
.r-ledger-col ul{list-style:none;margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.r-ledger-col li{display:flex;justify-content:space-between;gap:.6rem;color:#C9D4E6}
.r-ledger-col li+li{margin-top:.4rem}
.r-ledger-col li b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

.r-verdict{
  margin-top:1.2rem;padding:1.1rem 1.2rem;border-radius:var(--r-sm);
  background:rgba(23,128,143,.18);border:1px solid rgba(127,211,220,.4);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.r-verdict span{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7FD3DC;display:block}
.r-verdict strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin-top:.3rem}
.r-verdict b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#7FD3DC;white-space:nowrap}
.r-verdict.over{background:rgba(253,225,116,.14);border-color:rgba(253,225,116,.42)}
.r-verdict.over span{color:var(--gold)}
.r-verdict.over b{color:var(--gold)}

.r-assumptions{margin-top:1.2rem}
.r-assumptions summary{
  font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--gold);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.4rem;
}
.r-assumptions summary::-webkit-details-marker{display:none}
.r-assumptions summary::after{content:"+";font-size:1.15rem;line-height:1}
.r-assumptions[open] summary::after{content:"\2013"}
.r-assumptions ul{list-style:none;margin-top:.8rem;font-size:.86rem;color:#C9D4E6}
.r-assumptions li{padding-left:1rem;position:relative}
.r-assumptions li+li{margin-top:.4rem}
.r-assumptions li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold-mid)}

/* ---------- pyramid to diamond ---------- */
.r-shift{
  margin-top:2.4rem;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(1.6rem,3vw,2.4rem);
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
}
@media(max-width:760px){.r-shift{grid-template-columns:1fr;text-align:center}}
.r-shift-col{text-align:center}
.r-shift-col span{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);margin-bottom:1.1rem;
}
.r-shift-col p{font-size:.92rem;color:var(--slate);margin-top:1.1rem;max-width:22rem;margin-left:auto;margin-right:auto}
.r-shape{width:9.5rem;height:7rem;margin:0 auto;position:relative}
.r-shape-pyramid{
  background:linear-gradient(to bottom,var(--navy) 0%,var(--navy-mid) 45%,var(--gold-mid) 100%);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.r-shape-diamond{
  background:linear-gradient(135deg,var(--teal) 0%,var(--navy-mid) 52%,var(--gold-mid) 100%);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.r-shift-arrow{
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);text-align:center;
}
.r-shift-arrow::after{content:"";display:block;width:100%;border-top:2px dotted var(--gold-mid);margin-top:.7rem;min-width:3.5rem}
@media(max-width:760px){.r-shift-arrow::after{display:none}}

/* ---------- settlement rows ---------- */
.r-rows{margin-top:1.2rem;background:var(--paper);border:1px solid #F3DFA0;border-radius:var(--r-sm);padding:1.1rem 1.2rem}
.r-rows>b{
  display:block;font-family:var(--text);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem;
}
.r-rows dl{margin:0}
.r-rows div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.93rem}
.r-rows div:last-child{border-bottom:0;padding-bottom:0}
.r-rows dt{color:var(--slate)}
.r-rows dd{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- takeaway ---------- */
.r-takeaway{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.2rem;text-align:left}
@media(max-width:760px){.r-takeaway{grid-template-columns:1fr}}

/* ---------- SVG chart internals (rendered by report.js) ---------- */
.r-chart text{font-family:var(--text);fill:var(--slate)}
.r-chart .c-axis{font-size:11px}
.r-chart .c-cat{font-size:13px;font-weight:600;fill:var(--navy)}
.r-chart .c-val{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--navy)}
.r-chart .c-val-alt{font-family:var(--display);font-weight:700;font-size:12px;fill:var(--gold-ink)}
.r-chart .c-grid{stroke:var(--rule);stroke-dasharray:2 4;stroke-width:1}
.r-chart .c-base{stroke:var(--navy-tint-2);stroke-width:1.5}
.r-chart .c-bar,.r-chart .c-mark{transition:opacity .18s ease}
.r-chart g:hover>.c-bar,.r-chart g:hover>.c-mark{opacity:.78}

/* ---------- anchor chips (the site uses static spans elsewhere) ---------- */
.chips a.chip{text-decoration:none;transition:border-color .18s ease,background .18s ease,color .18s ease}
.chips a.chip:hover{border-color:var(--navy);background:var(--navy);color:#fff}

/* white panels sit on tinted bands, so soften the shadow there */
.band-tint .r-panel{box-shadow:0 1px 2px rgba(23,40,69,.05),0 14px 30px -22px rgba(23,40,69,.3)}

/* headline sized to match the other article pages, not the marketing pages */
.r-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.06}