/* ataxi.cab / cybertaxi.llc — one sheet, two editions, two skins.
   Paper is the default; html[data-dark] is the moon. The edition is a choice the
   reader makes and we remember — never prefers-color-scheme, which would take the
   choice away from them. */

/* --ink3 carries small print — footer meta, card lines, stat captions. At its
   first values it measured 3.07:1 on paper and 3.89:1 in the moon, under the
   4.5:1 that small text needs. Both are now measured against BOTH of their own
   backgrounds, not just the card. */
:root{
  --bg:#f3f4f1; --bg2:#fbfbf9; --ink:#15181b; --ink2:#565c62; --ink3:#656b72;
  --line:#dcdcd5; --line2:#eaeae4;
  --acc:#0d6d7d; --acc2:#0a5764; --accbg:#e2f0f2;
  --ok:#1c6f43; --okbg:#e3f2e9; --warn:#8a5300; --warnbg:#fbf0dd;
  --hot:#a1391f; --hotbg:#fceae5;
  --cab:#e8b53a; --cabline:#8a6c17;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 14px 34px -22px rgba(20,25,30,.4);
  --disp:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
html[data-skin="cab"]{ --acc:#8a5a00; --acc2:#6d4700; --accbg:#f8efdb; }
html[data-dark]{
  --bg:#0b0e12; --bg2:#11161c; --ink:#e9eae5; --ink2:#a3aab1; --ink3:#8b949c;
  --line:#212831; --line2:#181e25;
  --acc:#5fd8e8; --acc2:#8ae7f3; --accbg:#0d2a30;
  --ok:#68d495; --okbg:#0e2a1b; --warn:#e8b160; --warnbg:#2b2010;
  --hot:#f2937a; --hotbg:#2e1611;
  --cab:#f0c04a; --cabline:#f0c04a;
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 14px 34px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}
html[data-dark][data-skin="cab"]{ --acc:#f0b642; --acc2:#f7ce74; --accbg:#2b2110; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.6 var(--sans);
  min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--acc);color:var(--bg);padding:8px 12px;z-index:99;border-radius:6px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.sep{color:var(--ink3)}

/* ---- masthead ---- */
.mast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:14px clamp(16px,4vw,44px);border-bottom:1px solid var(--line);background:var(--bg2);
  position:sticky;top:0;z-index:20}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink);
  font:700 22px/1 var(--disp);letter-spacing:.005em;text-transform:lowercase}
.wordmark span{display:inline-flex;align-items:baseline}
/* the TLD sits back so the name reads first — ataxi .cab, cybertaxi .llc */
.wordmark .tld{color:var(--acc);font-weight:600}
.wordmark .mk{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:2.1}
.wordmark .mk rect{fill:var(--accbg)}
.wordmark .mk-b{stroke:var(--acc);stroke-width:2.6}
.mastnav{display:flex;flex-wrap:wrap;gap:2px 18px;font:600 12.5px/1 var(--disp);
  letter-spacing:.07em;text-transform:uppercase}
.mastnav a{color:var(--ink2)}
.mastnav a:hover{color:var(--acc);text-decoration:none}
.pill.edition{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);padding:2px;gap:2px}
.pill.edition button{width:28px;height:24px;border:0;background:transparent;border-radius:999px;
  cursor:pointer;color:var(--ink3);font-size:13px;line-height:1}
.pill.edition button[aria-pressed="true"]{background:var(--accbg);color:var(--acc);
  box-shadow:inset 0 0 0 1.5px var(--acc)}

/* ---- shell ---- */
.app{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,44px) 60px}
.view{padding-top:26px}
h1{font:700 clamp(28px,4.6vw,44px)/1.08 var(--disp);letter-spacing:-.01em;margin:.1em 0 .35em;
  text-wrap:balance}
h2{font:600 clamp(19px,2.3vw,25px)/1.2 var(--disp);letter-spacing:.005em;margin:2.2em 0 .6em;
  padding-bottom:.32em;border-bottom:1px solid var(--line)}
h3{font:600 16px/1.35 var(--sans);margin:0 0 3px}
.lede{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--ink2);max-width:62ch;margin:0 0 1.3em}
.lede b{color:var(--ink);font-variant-numeric:tabular-nums}
.pnote{font-size:13.5px;line-height:1.6;color:var(--ink3);max-width:68ch;margin:.3em 0 1.2em}
.prose p{max-width:68ch;line-height:1.68;color:var(--ink2)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--line2);padding:1px 5px;border-radius:4px}

/* ---- hero + the cab ---- */
.hero{padding:10px 0 4px;border-bottom:1px solid var(--line);margin-bottom:24px}
.cab{display:block;width:100%;max-width:640px;height:auto;margin:.5em 0 1.4em}
.cab .road,.cab .dashes{stroke:var(--line);stroke-width:2}
.cab .dashes{stroke-dasharray:26 22;stroke-width:3;stroke-linecap:round;
  animation:roll 1.4s linear infinite}
.cab .body{fill:var(--cab);stroke:var(--cabline);stroke-width:2.4;stroke-linejoin:round}
html[data-dark] .cab .body{fill:none;stroke:var(--cab);stroke-width:2.6}
.cab .glass{fill:var(--accbg);stroke:var(--cabline);stroke-width:2;stroke-linejoin:round}
html[data-dark] .cab .glass{fill:var(--accbg);stroke:var(--acc)}
.cab .pillar{stroke:var(--cabline);stroke-width:2;opacity:.55}
html[data-dark] .cab .pillar{stroke:var(--acc);opacity:.5}
.cab .sill{fill:var(--cabline);opacity:.25}
.cab .wheel circle{fill:var(--bg2);stroke:var(--ink);stroke-width:2.6}
.cab .hub{fill:none;stroke:var(--ink2);stroke-width:2}
.cab .spokes{stroke:var(--ink2);stroke-width:2;stroke-linecap:round}
.cab .wheel{transform-box:fill-box;transform-origin:center;animation:spin 1.15s linear infinite}
.cab .lamp{fill:var(--hot);animation:glow 2.6s ease-in-out infinite}
.cab .lamp.rear{fill:var(--hot);opacity:.75;animation-delay:.5s}
.cab .lidar{fill:var(--acc)}
.cab .ping{fill:none;stroke:var(--acc);stroke-width:2;transform-box:fill-box;transform-origin:center;
  animation:ping 2.4s ease-out infinite}
.cab .post rect{fill:var(--bg2);stroke:var(--ink2);stroke-width:2.2}
.cab .post line{stroke:var(--ink2);stroke-width:2.2}
.cab .post .cell{fill:var(--line2);stroke:var(--ink3);stroke-width:1.6}
.cab .post .fill{fill:var(--ok);animation:charge 3.2s ease-in-out infinite}
.cab .lead{fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:5 7;animation:roll 1.1s linear infinite reverse}
.cab .bolt{fill:var(--ok);animation:flick 3.2s ease-in-out infinite}
.cab .port{fill:var(--bg2);stroke:var(--ink2);stroke-width:2}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes roll{to{stroke-dashoffset:-48}}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}}
@keyframes charge{0%{transform:translateY(76px)}65%,100%{transform:translateY(0)}}
@keyframes flick{0%,45%{opacity:.25}55%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .cab *{animation:none!important}
  .cab .post .fill{transform:translateY(26px)}
}

/* ---- figures ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:12px;margin:1.5em 0}
.statgrid--sm{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.statcard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.statcard b{display:block;font:700 29px/1 var(--disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.statcard span{display:block;margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--ink3)}

/* ---- lists ---- */
.rg{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rg.cols{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.rg li{min-width:0}
.rg a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.rg a:hover{border-color:var(--acc);text-decoration:none}
.rgn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rgc{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink3);font-size:13px}
.rg small{display:block;padding:3px 14px 0;font-size:12px;color:var(--ink3)}

.cards{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:9px}
.card{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:10px;padding:13px 15px}
.card:hover{border-left-color:var(--acc)}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--acc)}
.cmeta{margin:0 0 7px;font-size:13.5px;color:var(--ink2)}
.cline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:12.5px;color:var(--ink3)}
.kw{font:600 13px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.conn{color:var(--ink2)}
.dist{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--acc);font-weight:600}
.tag{padding:2px 8px;border-radius:999px;background:var(--line2);color:var(--ink2);font-size:11.5px}
.tag.ok{background:var(--okbg);color:var(--ok)}
.tag.warn{background:var(--warnbg);color:var(--warn)}
.tag.hot{background:var(--hotbg);color:var(--hot);font-weight:600}
.plain{list-style:none;padding:0;margin:.6em 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink2)}

/* ---- chips, filters, facts ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:13.5px}
a.chip:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
.chip span{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.chip--flat{background:transparent}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0 .4em}
.tg{padding:7px 14px;border:1px solid var(--line);background:var(--bg2);border-radius:999px;
  cursor:pointer;font-size:13.5px;color:var(--ink2)}
.tg:hover{border-color:var(--acc)}
.tg.is-on{background:var(--accbg);border-color:var(--acc);color:var(--acc);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 1.4em}
.f{background:var(--bg2);padding:13px 16px}
.f span{display:block;font:600 11px/1.4 var(--disp);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.f b{display:block;margin-top:5px;font-size:15.5px}
.station .jorg{margin:-.2em 0 1.2em;font-size:16px;color:var(--ink2)}

/* ---- geolocation bar ---- */
.geobar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.2em 0 .4em}
.geostat{font-size:13.5px;color:var(--ink3)}

/* ---- actions, crumbs, footer ---- */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.3em 0}
.actions a,.pri{padding:10px 18px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);
  cursor:pointer;font-size:14.5px}
.actions a:hover{border-color:var(--acc);text-decoration:none}
a.pri,button.pri{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:600}
a.pri:hover,button.pri:hover{background:var(--acc2);border-color:var(--acc2);text-decoration:none}
.crumbs{margin:0 0 1em;font-size:13px;color:var(--ink3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink3)}
.empty{padding:34px 0;max-width:60ch}
.foot{border-top:1px solid var(--line);background:var(--bg2);
  padding:24px clamp(16px,4vw,44px) 38px;font-size:13px;line-height:1.6;color:var(--ink3)}
.foot p{max-width:82ch;margin:0 0 .7em}
.fine{margin-top:1em;padding-top:.9em;border-top:1px solid var(--line2)}
.fine a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.fine a:hover{color:var(--acc)}

@media (max-width:640px){
  .mast{grid-template-columns:auto auto;gap:10px}
  .mastnav{grid-column:1/-1;order:3}
  .cline .dist{margin-left:0}
}