/* Atlas v2 theme: Direction C, Index, over the copied Atlas and pathway pages. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root, [data-theme="day"], [data-theme="dark"] {
  /* Grounds and panels. Direction C names only ground and paper
     (c.html swatches, lines 56 and 58); mid and deep are re-set to
     paper and rule so a panel still steps darker than the page. */
  --abyss:#FFFFFF; /* c.html swatch, line 56: "#FFFFFF, Ground" */
  --mid:#F6F5F0;   /* c.html swatch, line 58: "#F6F5F0, Paper: text on ink" */
  --deep:#DDE1DC;  /* c.html swatch, line 60: "#DDE1DC, Grid and rules" */

  /* Brand and data colours. c.html has no separate accent swatch: the
     index.html comparison table (row "Brand colour") reads "Ink #14201A
     with the three-colour bar", so the ink is the signal. Model and life
     are not defined by Direction C (it only names eco, soc, cap, loss),
     so they are kept at gdr-tokens.css's day values. */
  --signal:#14201A; /* c.html swatch, line 57: "#14201A, Ink: text, header, closing band" */
  --model:#41566A;  /* not set by Direction C; kept at gdr-tokens.css day value */
  --life:#6F5017;   /* not set by Direction C; kept at gdr-tokens.css day value */
  --loss:#9A4A38;   /* c.html swatch, line 64: "#9A4A38, Loss or drawdown only" */
  --eco:#3F6A4C;    /* c.html swatch, line 61: "#3F6A4C, Ecology pillar" */
  --soc:#8A6520;    /* c.html swatch, line 62: "#8A6520, Society pillar" */
  --cap:#3F5E7D;    /* c.html swatch, line 63: "#3F5E7D, Capital pillar" */

  /* Text. Direction C names one secondary tone, soft (line 59), so
     muted and faint both take it. */
  --text:#14201A;   /* c.html swatch, line 57 */
  --muted:#56615B;  /* c.html swatch, line 59: "#56615B, Soft: eyebrows, labels" */
  --faint:#56615B;  /* Direction C has one secondary tone; see --muted above */

  /* Rules. Line takes the rule tone; line-strong takes ink, matching
     c.css's use of var(--ink) for its heavier dividers (.dsec-label,
     .stats border-top). */
  --line:#DDE1DC;        /* c.html swatch, line 60 */
  --line-strong:#14201A; /* c.html swatch, line 57, used as a rule in c.css */

  /* Type. c.html #text: "IBM Plex Sans, Plex Mono for numbers." Serif
     and display both take the sans, since Direction C is sans throughout. */
  --display:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:var(--sans); /* Bita, 17:31: one family. Collapses every var(--mono) rule to Plex Sans. */
  --serif:var(--display);

  --w-display:600; /* c.css line 111: .h1 { font-weight: 600 } */
}
body{font-variant-numeric:tabular-nums} /* keeps columns of numbers aligned now that they are not mono */

/* Site header and footer, in Direction C's ink header and close (c.html
   #elements "Site header bar" and #elements "Footer"; c.css lines 251-263
   and 346-362), with tokens resolved to literal values so they work
   without site.css loaded. */
.skip{
  position:absolute;
  left:32px;
  top:-100px;
  z-index:10;
  background:#14201A;
  color:#F6F5F0;
  padding:10px 16px;
  border-radius:0;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.skip:focus{top:12px}

.site-head{background:#14201A;border-bottom:1px solid #26352D;color:#F6F5F0}
.site-head .wrap, .site-foot .wrap{
  width:100%;
  max-width:calc(1200px + 2 * 24px);
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:599px){
  .site-head .wrap, .site-foot .wrap{padding:0 16px}
}
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  flex-wrap:wrap;
  row-gap:12px;
}
.mark{
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:21px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  color:#F6F5F0;
  text-decoration:none;
  white-space:nowrap;
}
.mark:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
.site-nav{display:flex;align-items:center;gap:24px}
.site-nav a:not(.btn){
  font-size:15px;
  font-weight:500;
  color:#F6F5F0;
  text-decoration:none;
  padding:4px 0;
  border-bottom:1px solid transparent;
}
.site-nav a:not(.btn):hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
.site-nav a[aria-current="page"]:not(.btn){color:#FFFFFF;border-bottom-color:#FFFFFF}
.site-nav .btn[aria-current="page"]{
  background:transparent;
  color:#F6F5F0;
  border-color:#F6F5F0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#F6F5F0;
  color:#14201A;
  border:1px solid #F6F5F0;
  border-radius:0;
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  padding:14px 20px;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:#FFFFFF;border-color:#FFFFFF;color:#14201A;text-decoration:none}
.btn--small{font-size:13px;padding:8px 14px}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* index.html's bare `footer{max-width:94ch}` rule (a type selector) constrains
   this element with no margin:auto, so it renders left-aligned at about half
   the page width; this class selector overrides it back to full width. */
.site-foot{background:#FFFFFF;border-top:0;max-width:none;width:100%;color:#14201A}
.site-foot .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px 48px;
  padding-top:32px;
  padding-bottom:40px;
}
.foot-id .mark{font-size:19px}
.foot-id .attr{margin:10px 0 0}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:4px}
.foot-nav a{
  font-size:14px;
  color:#14201A;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.foot-nav a:hover{color:#14201A;text-decoration:underline}
.attr{font-size:14px;color:#C9CEC8;margin:0}
.site-foot .attr{color:#56615B}

/* Phone-only floor for the Atlas views and Programs (pathway.html): no text
   under 12px, bigger tap targets. Desktop is untouched, since everything
   here sits inside the 640px query. The classes come from index.html's and
   pathway.html's own inline styles, which sit after this stylesheet in the
   document and so win at equal specificity without !important. */
@media (max-width:640px){
  .an, .bindtag, .bkd, .bkn, .chip, .cite, .clampbtn, .combnote, .cta.small,
  .eyebrow, .fchip, .fn, .fwhy, .gap, .gk, .hint, .hz, .kd, .kl, .kpi2,
  .laytag, .legendrow, .lvl, .lvs, .lvx, .m, .mini, .pg, .pgo, .plink,
  .plink2, .pr, .ps, .sk, .snum, .src, .sub, .sub2, .tg, .tipbadge,
  .unplaced, .v, .vertag, .who, .wk, .wlab,
  .add, .backlink, .budget, .ceil, .clock, .dn, .fa, .fd, .ft, .fv,
  .ladname, .lvd, .msline, .needs, .note, .num, .pi, .pl, .pm, .raise,
  .rt, .sg, .shutchip, .ss, .stagegain, .stg, .tog, .tool, .unlocked,
  .vw, .warn, .whyshut,
  .vnav a, th, .axsel label, .road-cap, .road-reset,
  .roadmap-title, .roadmap-hint, .roadmap-caret, .tog, td.mono2{
    font-size:12px !important;
  }

  /* Tap targets: the view tabs, the Programs backlink and the pathway
     viewer toggles reported under 24px. */
  .vnav a{
    min-height:44px;
    padding:12px 10px !important;
    display:inline-flex !important;
    align-items:center;
  }
  .vw, .add, .tog{
    min-height:32px;
    padding:8px 10px !important;
    display:inline-flex !important;
    align-items:center;
  }
  .backlink a{
    min-height:32px;
    padding:8px 10px !important;
    display:inline-flex !important;
    align-items:center;
  }

  /* The Compare view head overflowed past the right edge at 320px because
     its h2 could not wrap. */
  .vhead h2{
    overflow-wrap:anywhere;
    min-width:0;
    font-size:18px !important;
  }

  .leaflet-control-attribution a{display:inline-block;padding:5px 2px}

  /* Programs (pathway.html): the year-by-year legend labels and the
     nudge/move/remove buttons reported under 24px or under 12px text. */
  .road-legend span{font-size:12px}
  .road-legend{flex-wrap:wrap}
  button.nudge{
    font-size:12px;
    min-width:32px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  button.rm{
    min-width:32px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .grow-lbl{flex-wrap:wrap}
}

/* Header and footer tap targets, mirroring site.css. */
.site-nav a{min-height:44px;display:inline-flex;align-items:center}
.foot-nav a{min-height:44px;display:inline-flex;align-items:center}
a.ix-lockup{min-height:44px}

/* Programs (pathway.html) on the Index kit, gauntlet 2026-09-16 rows 19 to 23.
   Scoped by body[data-kind="tool"], which only pathway.html carries, so the
   Atlas (index.html) is untouched. The page's own inline styles come later
   in the document; the attribute selector outranks their single classes. */
body[data-kind="tool"] .warn, body[data-kind="tool"] .panel,
body[data-kind="tool"] .lcol, body[data-kind="tool"] .kpi,
body[data-kind="tool"] .pstep, body[data-kind="tool"] .sc,
body[data-kind="tool"] .chip, body[data-kind="tool"] .add,
body[data-kind="tool"] .tog, body[data-kind="tool"] .vw,
body[data-kind="tool"] .tool, body[data-kind="tool"] .stg,
body[data-kind="tool"] .shutchip, body[data-kind="tool"] .ceil,
body[data-kind="tool"] .stagegain, body[data-kind="tool"] .roadmap-panel,
body[data-kind="tool"] .road-reset, body[data-kind="tool"] .nudge,
body[data-kind="tool"] .nr, body[data-kind="tool"] .track,
body[data-kind="tool"] .fill, body[data-kind="tool"] .gain,
body[data-kind="tool"] .gc, body[data-kind="tool"] .ybar{border-radius:0}

/* Row 19: the notice as a kit note. */
body[data-kind="tool"] .warn{
  background:#F6F5F0;
  border:0;
  border-left:3px solid #14201A;
  color:#14201A;
}
body[data-kind="tool"] .warn b{color:#14201A}

/* Row 19: chips are ink on white with a rule border, no rose fill. */
body[data-kind="tool"] .chip, body[data-kind="tool"] .chip.local,
body[data-kind="tool"] .chip.systemic, body[data-kind="tool"] .chip.lvl,
body[data-kind="tool"] .chip.lvl.live, body[data-kind="tool"] .add.on,
body[data-kind="tool"] .tool, body[data-kind="tool"] .tool.built,
body[data-kind="tool"] .vw, body[data-kind="tool"] .vw.on,
body[data-kind="tool"] .stg, body[data-kind="tool"] .ceil{
  color:#14201A;
  background:#FFFFFF;
  border:1px solid #DDE1DC;
}
body[data-kind="tool"] .vw.on{border-color:#14201A}
body[data-kind="tool"] .add, body[data-kind="tool"] .add.route{
  color:#14201A;
  background:#FFFFFF;
  border-color:#14201A;
}
body[data-kind="tool"] .sc[aria-pressed="true"]{background:#FFFFFF;border-color:#14201A}
body[data-kind="tool"] .kpi.over{border-color:#9A4A38}

/* Row 19: headings weight 600 in ink. The pillar colour stays on the
   column's top rule. */
body[data-kind="tool"] h1, body[data-kind="tool"] h2,
body[data-kind="tool"] .lcol h3, body[data-kind="tool"] .lvn{
  font-weight:600;
  color:#14201A;
}

/* Row 20: lever columns no narrower than 280px, so the grid wraps to
   fewer columns instead of wrapping headings to eight lines. */
body[data-kind="tool"] .lev{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* Row 22: the projected band is a dashed outline, not the grey fill a
   measured interval uses. It is the only path in the chart with a
   fill-opacity attribute. */
body[data-kind="tool"] #chart svg path[fill-opacity]{
  fill:none;
  stroke:#14201A;
  stroke-width:1;
  stroke-dasharray:4 3;
}

@media (max-width:640px){
  /* Row 21: the right column kept overflow:auto after going static, so it
     stayed a scroll container, and at 390 a tile of it painted blank over
     the Capital bar and the chart. */
  body[data-kind="tool"] .colR{overflow:visible;max-height:none;position:static}

  /* Grid items default to min-width:auto, so the lever grid and the plan
     rows pushed the single column past 390; let the column shrink and
     the Levers head wrap. */
  body[data-kind="tool"] .cols{grid-template-columns:minmax(0,1fr)}
  body[data-kind="tool"] .colL, body[data-kind="tool"] .colR{min-width:0}
  body[data-kind="tool"] .sechd .sub{flex-wrap:wrap}

  /* Row 23: the phone floor for the year-by-year block and the cap slider. */
  body[data-kind="tool"] .road-track-title,
  body[data-kind="tool"] .ynum,
  body[data-kind="tool"] .ylbl{font-size:12px}
  body[data-kind="tool"] #capSlider{min-height:32px}
}

@media (max-width:640px){body[data-kind="tool"] .nr-y,body[data-kind="tool"] .nr-theme,body[data-kind="tool"] .nr-theme b,body[data-kind="tool"] .nr-eu{font-size:12px}}
@media (max-width:640px){body .na,body .mono2{font-size:12px !important}}

/* Round 4, phone-04/05 and desktop-02: chart legibility, the cap chart's
   crowded value labels, the lone Capital lever column, and the cap slider
   thumb. Scoped to body[data-kind="tool"], which only pathway.html carries. */
@media (max-width:640px){
  /* Row: the trend chart and the pillar chart shrink with their viewBox at
     phone width, driven by the page's own `svg{max-width:100%}` rule, until
     tick labels and the strip caption render near 6px. Holding the SVG at a
     fixed minimum width keeps the text at design size; the container scrolls
     sideways for it instead of the page. */
  body[data-kind="tool"] #chart,
  body[data-kind="tool"] #pillarchart{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body[data-kind="tool"] #chart svg,
  body[data-kind="tool"] #pillarchart svg{
    min-width:600px;
    max-width:none;
  }

  /* Row: the cap chart's per-bar value labels run together at phone width;
     the year labels below them stay. */
  body[data-kind="tool"] .ynum{display:none}

  /* Row: the cap slider's thumb is about 15px on a phone. */
  body[data-kind="tool"] #capSlider{
    height:32px;
  }
  body[data-kind="tool"] #capSlider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:28px;
    height:28px;
    border-radius:0;
    background:#14201A;
  }
}

/* Row: at desktop the lever grid leaves the last (Capital) column alone on
   its row when the count of groups is odd; let it span the full row. */
body[data-kind="tool"] .lev > *:last-child:nth-child(odd){
  grid-column:1 / -1;
}

/* Atlas tab row, shared by the views, Programs and Methodology */
.topbar{position:sticky;top:0;z-index:1300;background:var(--abyss);border-bottom:1px solid var(--line)}
.barrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px;padding-bottom:10px}
.vnav{display:flex;gap:2px;flex-wrap:wrap}
.vnav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:7px}
.vnav a.on{color:var(--signal);background:rgba(217,160,142,.10)}
.vnav a:hover{color:var(--text)}
@media (max-width:640px){
  .vnav{flex-wrap:wrap;row-gap:0}
  .vnav a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
}

/* Source asterisk and page footnote: the white paper is cited by asterisk, never inline (Sean, 2026-09-17) */
.src{padding:5px 10px;margin:0 -10px 0 -9px;color:inherit;text-decoration:none}
.src:hover,.src:focus-visible{text-decoration:underline}
.source-note{margin:32px 0 0;padding:0 0 32px;font:400 12px/1.5 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;color:#56615B;scroll-margin-top:120px}
main > .source-note{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
@media (max-width:640px){main > .source-note{padding-left:16px;padding-right:16px}}
/* Footer, dark ink band in the Growth Lab pattern (Sean, 2026-09-17 09:34) */
.site-foot{background:#14201A;color:#F6F5F0;border-top:0;max-width:none;width:100%;margin:0;padding:0;font-size:14px;line-height:1.5}
.site-foot .wrap{display:block;padding-top:48px;padding-bottom:32px}
.site-foot .foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:32px 48px;align-items:start;padding-bottom:40px}
.site-foot .ix-lockup,.site-foot .ix-lockup:hover{color:#F6F5F0}
.site-foot .foot-id .attr{margin:12px 0 0;color:#C9CEC8;font-size:14px}
.site-foot .foot-label{margin:0 0 4px;color:#C9CEC8;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.site-foot .foot-contact a{display:inline-flex;align-items:center;min-height:44px;color:#F6F5F0;font-size:14px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;gap:4px 28px;padding-top:0}
.site-foot .foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:#F6F5F0;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.site-foot .foot-contact a:hover,.site-foot .foot-nav a:hover{color:#FFFFFF;text-decoration-thickness:2px}
.site-foot a:focus-visible{outline:2px solid #F6F5F0;outline-offset:2px}
.site-foot .foot-base{border-top:1px solid rgba(246,245,240,.18);padding-top:20px}
.site-foot .foot-legal{margin:0;color:#C9CEC8;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:640px){
  .site-foot .wrap{padding-top:40px;padding-bottom:28px}
  .site-foot .foot-top{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:32px}
}
/* ix-lockup:start */
.ix-lockup{display:inline-flex;align-items:flex-end;gap:12px;color:inherit;text-decoration:none}
.ix-lockup:hover{color:inherit;text-decoration:none}
.ix-mark{display:inline-flex;flex-direction:column;align-items:stretch;font-size:22px;line-height:1}
.ix-mark-word{font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-weight:600;line-height:0.74;padding-top:0.02em}
.ix-mark .ix-pillar-bar{height:3px;margin-top:3px}
.ix-lockup-name{font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:18px;line-height:1;padding-bottom:1px;white-space:nowrap}
.ix-pillar-bar{display:flex;height:4px}
.ix-pillar-bar > span{flex:1 1 0}
.ix-pillar-bar > span:nth-child(1){background:#3F6A4C}
.ix-pillar-bar > span:nth-child(2){background:#8A6520}
.ix-pillar-bar > span:nth-child(3){background:#3F5E7D}
@media (max-width:640px){.ix-lockup-name{font-size:16px}}
/* ix-lockup:end */