/* ============================================================
   Development Potential — the design system.
   See DESIGN-STANDARD.md. Every page links this file; no page
   defines its own type, spacing or colour. Builders Intelligence
   uses this same file with --blue/--teal swapped for its own two.
   ============================================================ */
:root{
  color-scheme: light;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  --blue:#0089ba;
  --teal:#00c9a7;
  --link:#00708f;
  --down:#a8422c;

  --blue-w:#e2f1f7;
  --teal-w:#dff7f1;
  --down-w:#f8e9e4;

  --ink:#0a0e11;
  --ink-2:#4b545c;
  --ink-3:#7d868d;
  --line:#d8d5cc;
  --hair:#c3bfb4;
  --grid:#e6e4dd;
  --bg:#e9e7df;
  --surface:#f7f6f1;

  --wrap:1240px;
  --ax:11px;              /* chart label size, in viewBox units */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --blue:#3fbde5; --teal:#45e0c4; --link:#7fd4ee; --down:#e88066;
    --blue-w:#0d2c38; --teal-w:#0b2f2a; --down-w:#331c16;
    --ink:#f0efe9; --ink-2:#a7afb5; --ink-3:#7c858c;
    --line:#242a2f; --hair:#333a40; --grid:#1d2328; --bg:#0b0e11; --surface:#12171b;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --blue:#3fbde5; --teal:#45e0c4; --link:#7fd4ee; --down:#e88066;
  --blue-w:#0d2c38; --teal-w:#0b2f2a; --down-w:#331c16;
  --ink:#f0efe9; --ink-2:#a7afb5; --ink-3:#7c858c;
  --line:#242a2f; --hair:#333a40; --grid:#1d2328; --bg:#0b0e11; --surface:#12171b;
}
*{box-sizing:border-box}
img{max-width:100%}
/* Android Chrome inflates text in wide blocks ("font boosting"), which pushed
   grid columns wider than the screen and clipped the right-hand cells on a real
   phone. Pin it so the layout controls the size, not the browser. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--s4)}
.lab{font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.chip{display:inline-block; vertical-align:top; line-height:1.1; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.chip.b{background:var(--blue-w); color:var(--link)}
.chip.t{background:var(--teal-w); color:#0a7a66}
.chip.d{background:var(--down-w); color:var(--down)}
.num{font-variant-numeric:tabular-nums}

/* ---- nav ---- */
.top{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:var(--s3); min-height:60px; flex-wrap:wrap; padding-block:10px}
.brand{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.brand i{width:11px; height:11px; border-radius:3px; background:linear-gradient(135deg,var(--blue),var(--teal)); flex:none; font-style:normal}
.nav{display:flex; gap:var(--s3); margin-left:auto; flex-wrap:wrap}
.nav a{font-size:13.5px; color:var(--ink-2); text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink); font-weight:500; border-bottom-color:var(--blue)}

/* ---- page opening ---- */
.open{padding-block:var(--s10) 0; background:linear-gradient(170deg,var(--blue-w) 0%,rgba(0,0,0,0) 62%)}
.open h1{margin:var(--s3) 0 0; font-weight:700; font-size:clamp(40px,9vw,104px); line-height:.99; letter-spacing:-.05em; max-width:14ch; text-wrap:balance}
.open h1 em{font-style:normal; background:linear-gradient(100deg,var(--blue),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent}
.open .sub{margin:var(--s3) 0 0; font-size:19px; line-height:1.55; color:var(--ink-2); max-width:52ch}

/* ---- sections ---- */
.sec{padding-block:var(--s10)}
.sec-top{border-top:3px solid var(--blue); padding-top:var(--s4); margin-bottom:var(--s5)}
.sec-top.t{border-top-color:var(--teal)}
.sec-top.d{border-top-color:var(--down)}
.sec-top h2{margin:var(--s2) 0 0; font-size:clamp(27px,4.2vw,42px); line-height:1.12; letter-spacing:-.035em; font-weight:700; max-width:20ch}
.lead{margin:var(--s3) 0 0; font-size:17.5px; line-height:1.65; color:var(--ink-2); max-width:66ch}
.lead b{color:var(--ink); font-weight:600}
.src{margin:var(--s3) 0 0; font-size:13px; color:var(--ink-3); line-height:1.6}
.src a{color:var(--link); font-weight:600}

/* ---- figure grid (the signal chain, stat rows) ---- */
.chain{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); margin-top:var(--s6); border-radius:10px; overflow:hidden}
.step{background:var(--surface); padding:var(--s3) var(--s3) var(--s4); min-width:0}
.step .lab,.step .v,.step .d{overflow-wrap:anywhere}
.step .lab{display:block; margin-bottom:var(--s2)}
.step .v{display:block; font-size:clamp(22px,5.6vw,29px); font-weight:700; letter-spacing:-.03em; line-height:1.1}
.step .d{display:inline-block; margin-top:var(--s2); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:999px}
.step .d.up{background:var(--teal-w); color:#0a7a66}
.step .d.dn{background:var(--down-w); color:var(--down)}
.step .d.flat{background:var(--blue-w); color:var(--link)}
.step.break{background:var(--down-w)}

/* ---- charts ---- */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:var(--s8) var(--s6); margin-top:var(--s8)}
.charts.one{grid-template-columns:1fr}
.chart{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:var(--s4); display:flex; flex-direction:column}
.chart h3{margin:var(--s2) 0 var(--s1); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
.chart .why{margin:0 0 var(--s3); font-size:15px; color:var(--ink-2); line-height:1.55}
.plot{width:100%; height:auto; display:block; overflow:visible}
.plot .gl{stroke:var(--grid); stroke-width:1; fill:none}
.plot .ax{fill:var(--ink-3); font-size:var(--ax); font-family:inherit; font-variant-numeric:tabular-nums}
.plot .nm{fill:var(--ink); font-size:var(--ax); font-family:inherit}
.plot .ln{fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.plot .dot{stroke:var(--surface); stroke-width:2}
.plot .ref{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; fill:none}
.key{display:flex; gap:var(--s2) var(--s3); flex-wrap:wrap; margin-top:var(--s2); font-size:12.5px; color:var(--ink-2)}
.key i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; font-style:normal}

/* ---- folds: 44px tap targets ---- */
details{border-top:1px solid var(--line); margin-top:var(--s2)}
details summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:var(--s1); font-size:14.5px; font-weight:500; color:var(--link)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; margin-left:auto; font-size:18px; line-height:1; color:var(--ink-3)}
details[open] summary::after{content:"\2013"}
details .body{padding-bottom:var(--s3); font-size:15.5px; color:var(--ink-2); line-height:1.65; max-width:64ch}
details .body p{margin:0 0 var(--s2)}
details .body p:last-child{margin:0}

/* ---- bands ---- */
.band{padding-block:var(--s8); border-top:1px solid var(--line)}
.band-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8)}
.band h3{margin:var(--s3) 0 0; font-weight:700; font-size:clamp(29px,5vw,52px); line-height:1.05; letter-spacing:-.045em; text-wrap:balance}
.band .say{margin:var(--s3) 0 0; font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:42ch}
.band .go{display:inline-block; margin-top:var(--s4); font-size:15px; font-weight:600; padding:12px 20px; border-radius:999px; background:var(--blue); color:#fff; text-decoration:none}
.band.teal .go{background:#0a9c83}
.rows{border-radius:12px; overflow:hidden}
.row{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:var(--s3); padding:var(--s3); border-bottom:1px solid var(--line); background:var(--surface)}
.row:last-of-type{border-bottom:0}
.row .k{font-size:15px; font-weight:600; min-width:9.5rem; overflow-wrap:anywhere}
.row .t{font-size:15.5px; color:var(--ink-2); line-height:1.6}
.row .t b{color:var(--ink); font-weight:600}

.close{border-top:3px solid var(--teal); padding-block:var(--s6) var(--s10)}
.close p{margin:var(--s3) 0 0; font-size:clamp(21px,3vw,28px); line-height:1.3; letter-spacing:-.03em; max-width:26ch; font-weight:600}
.foot{border-top:1px solid var(--line); padding-block:var(--s5); font-size:13px; color:var(--ink-3); line-height:1.7}

/* ---- PHONE: the primary layout ---- */
@media(max-width:880px){
  body{font-size:16.5px}
  .wrap{padding-inline:var(--s3)}
  .open{padding-block:var(--s8) 0}
  .sec,.band{padding-block:var(--s8)}
  .charts{grid-template-columns:1fr; gap:var(--s5)}
  .band-in{grid-template-columns:1fr; gap:var(--s5)}
  .row{grid-template-columns:1fr; gap:4px}
  .row .k{min-width:0}
  :root{--ax:17px}          /* viewBox units shrink with the SVG — push labels up */
  .plot .ln{stroke-width:3.5}
  .chart{padding:var(--s3)}
}
@media(max-width:560px){
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Brad, 24 Sep: no scrolling inside the page. The nav is a grid of pills
     that always fits the screen — four across on a phone, nothing hidden. */
  .top{position:static}
  .nav{width:100%; margin-left:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
  .nav a{font-size:12px; line-height:1.2; text-align:center; padding:7px 4px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; white-space:normal; min-height:40px}
  .nav a.on{border-color:var(--blue); background:var(--blue-w); color:var(--link)}
}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- tables never scroll inside the page ----
   Brad, 24 Sep: "i dont want any inside scrolling". Wide tables stack into
   cards on a phone; charts.js stamps each cell with its column heading. */
.scroll,.panel{overflow:visible}
@media(max-width:880px){
  table.tbl thead{display:none}
  table.tbl,table.tbl tbody{display:block; min-width:0}
  table.tbl tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; padding:12px var(--s2); border-bottom:1px solid var(--line)}
  table.tbl tr:last-child{border-bottom:0}
  table.tbl td{display:block; padding:0; border:0; text-align:left; min-width:0; overflow-wrap:anywhere}
  table.tbl td:first-child{grid-column:1/-1}
  table.tbl td.num{text-align:left}
  table.tbl td.nm{grid-column:1/-1; font-size:16px; font-weight:700}
  table.tbl td.nm::before{display:none}
  table.tbl tr[hidden]{display:none}
  table.tbl td[data-l]::before{content:attr(data-l); display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px}
  table.tbl td:empty{display:none}
}
.showmore{display:block; width:100%; margin-top:var(--s2); font:inherit; font-size:14.5px; font-weight:600; min-height:48px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--link); cursor:pointer}
.showmore:hover{border-color:var(--blue)}
.pick[hidden],.dev[hidden],.showmore[hidden]{display:none}