/* Layout: the map is the page; one card floats over it with the two inputs,
   the slider and the result. On a phone the card docks to the bottom. */
/* Self-hosted IBM Plex (SIL OFL 1.1): the woff2 files live in flatlo/vendor/
   fonts/ and ship under fonts/ with a content hash, OFL.txt beside them.  Each
   src() below carries a placeholder that viz_interactive fills at build time --
   the hashed site path in the linked build, a data: URI in the self-contained
   page -- so the page never asks a third party for a font.  font-display: swap
   keeps the text readable while the file arrives. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal-248289744b.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal-4d42c785b6.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal-90d9c22697.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal-d32f0e0701.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal-ce9a5ca3a8.woff2) format("woff2")}
:root{
  --paper:#f6f6f3; --ink:#1a1f26; --muted:#5f6b78; --line:#d9dcd9;
  --card:#ffffff; --field:#f1f2ef;
  --route:#0f8f6f; --mid:#d9961f; --route-casing:#ffffff; --short:#d1452c; --family:#8f99a3;
  --accent:#0f8f6f; --focus:#1f5fd0;
  --font:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --street:#c4c7c3;
  --shade-filter:none;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15191e; --ink:#eceff2; --muted:#9aa5b1; --line:#2e353d;
    --card:#1c2128; --field:#242a32; --route:#3ccfa5; --mid:#f0b43a; --route-casing:#0f1317;
    --short:#ff7a5c; --family:#5b6672; --accent:#6ea0ff; --focus:#6ea0ff;
    --street:#3a424b;
    --shade-filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15191e; --ink:#eceff2; --muted:#9aa5b1; --line:#2e353d;
  --card:#1c2128; --field:#242a32; --route:#3ccfa5; --mid:#f0b43a; --route-casing:#0f1317;
  --short:#ff7a5c; --family:#5b6672; --accent:#6ea0ff; --focus:#6ea0ff;
  --street:#3a424b;
  --shade-filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(.9);
  color-scheme:dark;
}
/* Static content pages (routes, lifts, FAQ): a reading column in the app's
   palette.  contentpages.py prepends the @font-face rules and the colour
   tokens of simple.css, so the whole site keeps one palette and one set of
   fonts and this file only lays out prose. */
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:15px/1.62 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem}

header.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.25rem;
  padding:1.1rem 0 0.9rem;border-bottom:1px solid var(--line)}
.brand{font:600 15px/1 var(--mono);letter-spacing:.01em;color:var(--ink);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-left:auto}
nav a{color:var(--muted);text-decoration:none;font-size:13.5px}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);font-weight:500}

main{padding:1.5rem 0 2rem}
h1{font-size:1.5rem;line-height:1.28;margin:0 0 .7rem;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:1.9rem 0 .2rem}
p{margin:.55rem 0}
.intro{color:var(--ink)}
.note{color:var(--muted);font-size:13.5px}

ol.rows{list-style:none;margin:.7rem 0 0;padding:0}
ol.rows li{border-bottom:1px solid var(--line)}
ol.rows a{display:block;padding:.55rem .4rem;color:var(--ink);text-decoration:none}
ol.rows a:hover{background:var(--card);color:var(--accent)}
ol.rows .n{font:500 13px/1 var(--mono);color:var(--muted);margin-right:.55rem}

footer{border-top:1px solid var(--line);margin-top:2.4rem;padding:1rem 0 2.2rem;
  color:var(--muted);font-size:12.5px;line-height:1.55}
footer p{margin:.45rem 0}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
footer details{margin:.45rem 0}
footer summary{cursor:pointer}

@media (max-width:640px){
  header.top{gap:.55rem}
  nav{margin-left:0}
  h1{font-size:1.32rem}
}