/* Shared chrome for the published pages: home, AI access and the pipeline
 * diagram. One stylesheet rather than three copies, because three copies of a
 * palette drift into three palettes.
 *
 * The map applications (index.html, cost.html) deliberately do NOT use this:
 * they are dark instrument panels, not documents, and sharing a stylesheet
 * between the two would make every change to one a risk to the other.
 */

:root{
  --paper:#F1F3F2; --card:#FFFFFF; --card-2:#F7F9F8;
  --ink:#15191B; --ink-2:#4E5A60; --ink-3:#78868C;
  --rule:#CBD4D5; --rule-soft:#E0E7E6;
  --accent:#1D4E89; --accent-soft:#E7EDF5; --accent-ink:#FFFFFF;
  --measured:#1B6B58; --inferred:#8C6810; --modelled:#9E4429;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1315; --card:#171C1F; --card-2:#1C2225;
    --ink:#E7ECEB; --ink-2:#A4B1B5; --ink-3:#7B898E;
    --rule:#2C3639; --rule-soft:#232B2E;
    --accent:#79ACDD; --accent-soft:#16232E; --accent-ink:#0F1315;
    --measured:#54C2A3; --inferred:#D8AB40; --modelled:#E58A69;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1315; --card:#171C1F; --card-2:#1C2225;
  --ink:#E7ECEB; --ink-2:#A4B1B5; --ink-3:#7B898E;
  --rule:#2C3639; --rule-soft:#232B2E;
  --accent:#79ACDD; --accent-soft:#16232E; --accent-ink:#0F1315;
  --measured:#54C2A3; --inferred:#D8AB40; --modelled:#E58A69;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); margin:0; padding:0;
  font-family:"Source Serif 4",Georgia,serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
.shell{max-width:1100px;margin:0 auto;padding:0 22px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.eyebrow{font-family:"Barlow Semi Condensed",Barlow,system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--ink-3)}
h1,h2,h3,.btn,.stat .n,.nav{font-family:Barlow,system-ui,sans-serif}

/* ---- sticky bar: the map is never more than one click away, at any scroll ---- */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--rule-soft)}
.bar .in{max-width:1100px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:16px}
.bar .who{font-family:Barlow,sans-serif;font-weight:600;font-size:13.5px;letter-spacing:-.01em;
  white-space:nowrap}
.bar .who span{color:var(--ink-3);font-weight:400}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:13px}
.nav a{color:var(--ink-2);text-decoration:none;padding:6px 9px;border-radius:6px;white-space:nowrap}
.nav a:hover{background:var(--accent-soft);color:var(--accent)}
/* The page you are on is named, not linked. A nav that links to itself is a nav
   that will not tell you where you are. */
.nav .current{color:var(--ink);padding:6px 9px;border-radius:6px;white-space:nowrap;
  background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:7px;
  white-space:nowrap;border:1px solid transparent}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn.ghost:hover{background:var(--accent-soft)}

/* ---- masthead ---- */
header.mast{padding:40px 0 4px}
h1{font-weight:700;font-size:clamp(30px,5.2vw,52px);line-height:1.03;letter-spacing:-.028em;
  margin:9px 0 0;max-width:17ch;text-wrap:balance}
.standfirst{font-size:clamp(16.5px,1.9vw,19px);line-height:1.52;color:var(--ink-2);
  max-width:62ch;margin:18px 0 0}
.standfirst b{color:var(--ink);font-weight:600}

/* ---- the primary call to action, above the fold by construction ---- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin:26px 0 0}
@media (max-width:860px){ .hero{grid-template-columns:1fr} }
.hero a{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:12px;
  padding:20px 22px;background:var(--card);display:flex;flex-direction:column;
  transition:border-color .15s, transform .15s}
.hero a:hover{border-color:var(--accent);transform:translateY(-1px)}
.hero .primary{background:linear-gradient(135deg,var(--accent-soft),var(--card));
  border-color:var(--accent)}
.hero h2{margin:6px 0 0;font-size:clamp(21px,2.6vw,27px);letter-spacing:-.02em;font-weight:700}
.hero p{margin:9px 0 0;color:var(--ink-2);font-size:15px;line-height:1.5}
.hero .go{margin-top:auto;padding-top:16px;font-family:Barlow,sans-serif;font-weight:600;
  font-size:14px;color:var(--accent)}
.hero .side{display:grid;gap:14px}
.hero .side a{padding:15px 18px}
.hero .side h2{font-size:17px}
.hero .side p{font-size:13.5px;margin-top:5px}

/* ---- numbers ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:12px;
  overflow:hidden;margin:36px 0 0}
.stat{background:var(--card);padding:15px 17px}
.stat .n{display:block;font-weight:700;font-size:clamp(23px,3vw,30px);letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.55em;font-weight:600;color:var(--ink-3);letter-spacing:0}
.stat .l{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.stat .l em{display:block;font-style:normal;color:var(--ink-3);font-size:11.5px;margin-top:2px}

h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:600;margin:52px 0 0;padding-bottom:9px;border-bottom:1px solid var(--rule)}
.lede{font-size:17px;line-height:1.62;margin:18px 0 0;max-width:66ch}
.lede + .lede{margin-top:14px}
.lede b{font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin:20px 0 0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:17px 19px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card .kind{font-family:"Barlow Semi Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;color:var(--ink-3);font-weight:600}
.card h3{margin:6px 0 0;font-size:17.5px;letter-spacing:-.015em;font-weight:600}
.card p{margin:8px 0 0;font-size:13.8px;line-height:1.5;color:var(--ink-2)}
.card .go{margin-top:auto;padding-top:13px;font-family:Barlow,sans-serif;font-weight:600;
  font-size:13px;color:var(--accent)}

/* ---- metadata ---- */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin:20px 0 0}
.meta dl{margin:0;font-size:13.8px}
.meta dt{font-family:"Barlow Semi Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:13px}
.meta dt:first-child{margin-top:0}
.meta dd{margin:3px 0 0;color:var(--ink-2)}
.meta dd b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px}
code{background:var(--card-2);border:1px solid var(--rule-soft);border-radius:4px;padding:1px 5px}
.mix{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:9px 0 5px;border:1px solid var(--rule-soft)}
.mix i{display:block}
.mixkey{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.mixkey span{display:flex;align-items:center;gap:5px}
.mixkey i{width:9px;height:9px;border-radius:2px;display:inline-block}
.callout{border-left:3px solid var(--accent);background:var(--card-2);padding:13px 17px;
  border-radius:0 8px 8px 0;margin:20px 0 0;font-size:14.5px;color:var(--ink-2)}
.callout b{color:var(--ink)}
footer{margin:64px 0 0;padding:22px 0 60px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-3)}
footer a{color:var(--ink-2)}

/* ====================================================================
 * Small screens
 *
 * Measured rather than guessed: headless Chromium at 390x844 and 360x800,
 * DPR 2, mobile:true. The three document pages never overflowed horizontally;
 * their faults were a nav that deleted itself, text under 12px, and tap
 * targets under 40px. Those are what this block fixes.
 *
 * The nav mattered most. `.nav a { display:none }` under 820px left a phone
 * reader with a brand, a button into the map, and no route to any other page
 * -- the same chromeless-map mistake in a narrower window. It is now a
 * horizontally scrolling chip row. Six links do not fit across 390px and do
 * not need to: a scroller shows that there is more, where a hamburger hides
 * it, and it needs no JavaScript, so it cannot break differently on each of
 * the three pages that share this file.
 * ==================================================================== */
@media (max-width:820px){
  .bar .in{flex-wrap:wrap;padding:8px 14px 0;gap:9px 12px}
  .bar .who{font-size:13px;white-space:normal}
  .bar .btn{margin-left:auto}

  /* Full-bleed inside the padded bar, so the row scrolls edge to edge and the
     last chip is visibly clipped -- the clipping is what says "there is more". */
  .nav{order:3;width:calc(100% + 28px);margin:0 -14px;padding:1px 14px 8px;
    gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity}
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav .current{display:inline-flex;align-items:center;min-height:44px;
    padding:8px 13px;font-size:13.5px;scroll-snap-align:start;flex:0 0 auto;
    border:1px solid var(--rule-soft);background:var(--card)}
  /* The brand links back to the summary on every page but the summary itself.
     At 16px tall it was a link only a mouse could hit. */
  .bar .who a{display:inline-flex;align-items:center;min-height:40px}
  .nav .current{border-color:var(--accent)}

  .btn{min-height:42px;padding:10px 15px;font-size:14px}
  header.mast{padding:26px 0 4px}
  h2.sec{margin-top:40px}

  /* 40px is the floor for a finger; these were 10.5-11.5px labels in 20-25px
     boxes. Raising the type is what raises the box. */
  .stat{padding:14px 15px}
  .stat .l em{font-size:12px}
  .card{padding:16px 17px}
  .card .kind{font-size:12px;letter-spacing:.1em}
  .card .go,.hero .go{font-size:14px;padding-top:14px}
  .meta{gap:22px}
  .meta dt{font-size:12px}
  .meta dl,.meta dd{font-size:14.5px}
  /* These are link *lists* separated by middots, not links inside a sentence,
     so they get a target height. Links in running prose deliberately do not:
     a 44px box on every inline link overlaps the line above it. */
  .meta dd a{display:inline-block;padding:9px 0}
  .mixkey{font-size:12.5px;gap:12px}
  .lede{font-size:16.5px}
  code,.mono{font-size:13px}
  footer{margin-top:48px;font-size:13px}
  footer a{display:inline-block;padding:10px 0}
}

@media (max-width:560px){
  .shell{padding:0 16px}
  .bar .in{padding:8px 12px 0}
  /* Brand, the map button and the nav row: three rows of sticky chrome is a
     third of a phone screen given over to navigation on every scroll. Dropping
     the qualifier -- "geeksare.cool" on the summary, the page name elsewhere --
     puts the brand and the button back on one row, and the nav underneath
     already says which page this is. */
  .bar .who span{display:none}
  .btn{font-size:13.5px;padding:10px 13px}
  .nav{width:calc(100% + 24px);margin:0 -12px;padding:1px 12px 8px}
  /* Two 158px columns will not fit 360px once the shell padding is taken, and
     auto-fit would drop to one very tall column. 132px keeps the pairs. */
  .stats{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));margin-top:26px}
  .hero a{padding:17px 18px}
}

/* A wide element inside prose -- a table, a diagram, a code block -- scrolls
 * inside its own box. The page body must never scroll horizontally: a reader
 * who has dragged the whole page sideways has lost the left margin of every
 * paragraph, not just the wide thing. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The hint rides inside the scroller pinned to its left edge, so it stays put
   while the table is dragged, and it exists only where the clipping does. */
@media (max-width:820px){
  .scroller::before{content:"Scroll sideways →";position:sticky;left:0;
    display:block;width:max-content;font-family:Barlow,system-ui,sans-serif;
    font-size:12px;color:var(--ink-3);letter-spacing:.04em;padding:2px 0 6px}
}