/* IndySled — 1994 Polaris graphics, as a UI.
   Reference is the sled itself: black hood, hard-angled magenta->purple swooshes
   cut across it, white pinstripe splitting the colours, everything raked forward.
   So: sharp corners not soft ones, skewed slashes, heavy italic condensed caps,
   saturated colour on near-black. Desktop first; phone falls back under 760px. */

:root{
  --mag:#ff2d8f; --pur:#7b2ff7; --blu:#2f86ff; --cyan:#00d4d8;
  --slash:linear-gradient(100deg,var(--mag) 0%,var(--pur) 55%,var(--blu) 100%);
  --sled:var(--mag); --sled2:var(--pur);
  --sled-slash:linear-gradient(100deg,var(--sled) 0%,var(--sled2) 100%);

  --bg:#07090d; --bg-2:#0c0f16;
  --panel:#11151f; --panel-2:#161b28;
  --ink:#f2f5fa; --ink-2:#b9c4d8; --muted:#7b88a3;
  --line-2:#2c3549;
  --hair:rgba(255,255,255,.86);

  --ok:#2fe08a; --ok-bg:rgba(47,224,138,.12);
  --warn:#ffc247; --warn-bg:rgba(255,194,71,.12);
  --err:#ff4757; --err-bg:rgba(255,71,87,.12);

  --cond:"Arial Narrow","Roboto Condensed",Haettenschweiler,"Franklin Gothic Bold",system-ui,sans-serif;
  --tabh:0px;
  --cut:14px;                        /* corner cut on panels */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,45,143,.2);}

body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);line-height:1.5;font-size:15px;-webkit-text-size-adjust:100%;
  background:var(--bg);
  background-image:
    repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.014) 38px 39px),
    radial-gradient(900px 420px at 6% -12%,rgba(255,45,143,.13),transparent 60%),
    radial-gradient(760px 380px at 96% -6%,rgba(47,134,255,.11),transparent 60%);
  background-attachment:fixed;
}
a{color:var(--blu);text-decoration:none;}

/* ---------- header: the hood ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:2rem;
  padding:.85rem 2rem;background:#05070a;
  border-bottom:2px solid #000;
  /* The swoosh below is positioned right:-60px on purpose, and the browser
     counts that overhang as scrollable width — on a phone you could drag the
     whole page sideways into 49px of nothing (Cody 9/1: "the page is to wide").
     overflow-x:clip trims it WITHOUT making a scroll container, so the sticky
     bar and the settings dropdown both still work. overflow:hidden here would
     clip the dropdown shut, which is why it was avoided before. */
  overflow-x:clip;
  overflow-y:visible;
}
.topbar::before{                       /* the swoosh, raked like the decal */
  content:"";position:absolute;right:-60px;top:0;bottom:0;width:46%;
  background:var(--slash);transform:skewX(-19deg);opacity:.9;
  clip-path:inset(0 0 0 0);
}
.topbar::after{                        /* white pinstripe splitting it */
  content:"";position:absolute;right:calc(46% - 74px);top:0;bottom:0;width:5px;
  background:var(--hair);transform:skewX(-19deg);opacity:.85;
}
.brand{
  position:relative;z-index:2;
  font-family:var(--cond);font-style:italic;font-weight:800;font-size:1.7rem;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
  text-shadow:2px 2px 0 var(--mag),4px 4px 0 rgba(0,0,0,.5);
}
.tabs{display:flex;gap:.2rem;flex:1;position:relative;z-index:2;}
.tabs a{
  display:flex;align-items:center;gap:.4rem;padding:.4rem .9rem;
  color:var(--muted);font-family:var(--cond);font-size:.98rem;font-weight:700;
  font-style:italic;text-transform:uppercase;letter-spacing:.09em;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.tabs a i{font-style:normal;font-size:.9rem;}
.tabs a:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.tabs a.on{color:#0a0c11;background:var(--slash);}
.topbar .menu{margin-left:auto;position:relative;z-index:3;}

.wrap{padding:1.9rem 2rem 4rem;max-width:1220px;margin:0 auto;}

/* ---------- type ---------- */
h1{
  font-family:var(--cond);font-size:2.6rem;font-weight:800;font-style:italic;
  letter-spacing:0;text-transform:uppercase;margin:0;line-height:.95;
  text-shadow:3px 3px 0 rgba(0,0,0,.6);
}
h3{
  font-family:var(--cond);font-size:1.02rem;font-weight:800;font-style:italic;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 .85rem;
  display:flex;align-items:center;gap:.6rem;padding-left:.7rem;
  border-left:4px solid var(--sled);
}
.muted{color:var(--muted);} .small{font-size:.85rem;}
.eyebrow{
  display:inline-block;font-family:var(--cond);font-size:.78rem;font-weight:800;
  font-style:italic;letter-spacing:.2em;text-transform:uppercase;color:#0a0c11;
  background:var(--sled);padding:.1rem .55rem;transform:skewX(-12deg);
}
.eyebrow > *{display:inline-block;transform:skewX(12deg);}

.pagehead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1rem;position:relative;
}
.pagehead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--slash);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.headfigs{display:flex;gap:2.2rem;flex-wrap:wrap;font-size:.7rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
.headfigs span{display:flex;flex-direction:column-reverse;gap:.2rem;}
.headfigs b{font-family:var(--cond);font-size:1.85rem;color:#fff;font-weight:800;
  font-style:italic;line-height:1;}

/* ---------- panels: cut corner, slash edge ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  padding:1.15rem 1.3rem;margin-bottom:1rem;position:relative;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.panel h3 .more{margin-left:auto;font-size:.72rem;color:var(--blu);letter-spacing:.06em;
  font-style:normal;font-family:system-ui,sans-serif;font-weight:700;}
.panel h3 .count{background:var(--err);color:#12040a;padding:0 .45rem;font-size:.8rem;}
.h3cost{font-family:var(--cond);color:var(--sled);}
.warnpanel{border-color:rgba(255,194,71,.4);}

/* ---------- fleet cards: the hood graphic ---------- */
.sledlist{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));}
.sledrow{
  display:block;position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(150deg,#191f2d 0%,#0e121b 62%);
  border:1px solid var(--line);padding:1.35rem 1.4rem 1.25rem;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  transition:transform .14s;
}
.sledrow::before{                     /* raked two-colour slash, low-left behind the text */
  content:"";position:absolute;left:-18%;bottom:-72%;width:58%;height:140%;
  background:linear-gradient(160deg,var(--sled),var(--sled2));transform:skewX(-19deg);opacity:.2;
}
.sledrow::after{                      /* the pinstripe that edges it */
  content:"";position:absolute;left:calc(40% - 18%);bottom:-72%;width:3px;height:140%;
  background:var(--sled2);transform:skewX(-19deg);opacity:.9;
}
.sledrow:hover{transform:translateY(-3px);}
.sr-bar{display:none;}
.sr-name{position:relative;z-index:2;display:block;font-family:var(--cond);font-style:italic;
  font-size:1.65rem;font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:.6rem;
  padding-right:2rem;              /* clear the chevron */
  text-shadow:2px 2px 0 rgba(0,0,0,.55);}
.sr-meta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;
  font-size:.8rem;color:var(--ink-2);}
.sr-status{font-family:var(--cond);font-style:italic;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;}
.sr-go{position:absolute;right:1.15rem;top:1.1rem;z-index:2;color:var(--sled);font-size:1.5rem;line-height:1;}

/* ---------- lists ---------- */
.tasklist,.lowlist,.loglist,.ridelist,.hitlist,.manlist,.buylist,.shelflist,.joblist{list-style:none;margin:0;padding:0;}
.tasklist li,.buyrow{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);font-size:.92rem;}
.tasklist li:last-child,.buyrow:last-child{border-bottom:none;}
.buyrow{align-items:flex-start;}
.pri{width:14px;height:14px;flex:0 0 14px;background:#0a0d14;border:1px solid var(--line-2);
  transform:skewX(-12deg);}
.pri.blocker{background:var(--err);border-color:var(--err);color:#180509;font-weight:900;
  font-size:.6rem;text-align:center;line-height:13px;}
.tl-title{flex:1;min-width:0;}
.tl-cost,.b-cost,.ridefigs,.qty,.lowqty{font-family:var(--cond);font-style:italic;font-weight:800;
  font-size:1.05rem;white-space:nowrap;}
.lowqty{color:var(--err);}
.tl-sled{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.lowlist li,.loglist li,.ridelist li,.manlist li,.joblist li{display:flex;gap:.7rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.lowlist li:last-child,.loglist li:last-child,.ridelist li:last-child,.manlist li:last-child,.joblist li:last-child{border-bottom:none;}
.lowlist li,.manlist li{justify-content:space-between;}
.joblist li{flex-direction:column;gap:.1rem;align-items:stretch;}
.log-date{font-family:var(--cond);font-style:italic;font-size:.85rem;color:var(--sled);
  white-space:nowrap;font-weight:700;}
.log-note,.ridemain{flex:1;min-width:0;}
.xbtn{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:0 .25rem;line-height:1;}
.xbtn:hover{color:var(--err);}

.buy-check button{width:24px;height:24px;padding:0;background:#0a0d14;border:2px solid var(--line-2);
  cursor:pointer;transform:skewX(-12deg);border-radius:0;}
.buy-check button:hover{border-color:var(--ok);background:var(--ok-bg);}
.buy-check.is-done button{background:var(--ok);border-color:var(--ok);color:#04140b;font-weight:900;font-size:.78rem;}
.buymain{flex:1;min-width:0;}
.buymain > summary{list-style:none;cursor:pointer;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;}
.buymain > summary::-webkit-details-marker{display:none;}
.buymain.plain{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;}
.b-title{flex:1;min-width:9rem;font-size:.94rem;}
.b-sled{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;}
.pn{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--cyan);background:#0a0d14;
  border:1px solid var(--line-2);padding:.03rem .3rem;}
.chip{display:inline-block;padding:.05rem .45rem;font-size:.6rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;transform:skewX(-12deg);}
.chip-red{background:var(--err);color:#180509;}
.buydetail{padding:.55rem 0 .2rem;font-size:.87rem;color:var(--ink-2);}
.buydetail p{margin:.1rem 0 .45rem;}
.buylist.done .b-title{color:var(--muted);}
.donewrap > summary,.secthead{cursor:pointer;list-style:none;font-family:var(--cond);font-style:italic;
  font-size:1rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:1.3rem 0 .6rem;}
.donewrap > summary::-webkit-details-marker{display:none;}

/* ---------- sled page ---------- */
.sledhead-wrap{margin-bottom:1.2rem;position:relative;padding-bottom:1rem;}
.sledhead-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--sled-slash);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);}
.sledhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;}
.sledhead h1{margin:.35rem 0 .45rem;font-size:2.9rem;}
.sledhead-right{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.specstrip{display:flex;gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--muted);
  font-family:ui-monospace,monospace;}
.statuspill{display:inline-block;padding:.28rem .8rem;font-family:var(--cond);font-style:italic;
  font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  transform:skewX(-12deg);}
.statuspill > *{display:inline-block;transform:skewX(12deg);}
.figstrip{display:flex;gap:2.6rem;flex-wrap:wrap;padding:1.15rem 1.4rem;background:var(--panel);
  border:1px solid var(--line);border-left:5px solid transparent;
  border-image:var(--sled-slash) 1;margin-bottom:1rem;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);}
.figstrip b{display:block;font-family:var(--cond);font-style:italic;font-size:2rem;font-weight:800;
  line-height:1;color:#fff;}
.figstrip span{font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:700;}
.slednotes{font-size:.88rem;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--sled);padding:.85rem 1rem;margin:0 0 1rem;}

/* ---------- reference ---------- */
.reflinks,.refscroll{display:flex;gap:.45rem;flex-wrap:wrap;}
.refscroll{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem;}
.reflinks a,.refscroll a{flex:0 0 auto;padding:.5rem .95rem;background:var(--panel-2);
  border:1px solid var(--line-2);font-family:var(--cond);font-style:italic;font-size:.95rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.reflinks a:hover,.refscroll a:hover{background:var(--sled);color:#0a0c11;border-color:var(--sled);}
.refscroll::-webkit-scrollbar{height:3px;}
.refscroll::-webkit-scrollbar-thumb{background:var(--line-2);}
.docnav{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.9rem;}
.docnav a{padding:.32rem .8rem;border:1px solid var(--line);font-family:var(--cond);font-style:italic;
  font-size:.88rem;font-weight:700;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);}
.docnav a.on{background:var(--sled);color:#0a0c11;border-color:transparent;}
.docbody{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--sled);
  padding:1.1rem 1.3rem;font-size:.92rem;line-height:1.6;overflow-wrap:anywhere;}
.docbody h1{font-size:1.5rem;font-style:italic;text-transform:uppercase;font-family:var(--cond);}
.docbody h2{font-family:var(--cond);font-style:italic;font-size:1.2rem;text-transform:uppercase;
  color:var(--sled);margin-top:1.6rem;}
.docbody table{display:block;overflow-x:auto;width:100%;font-size:.84rem;border-collapse:collapse;}
.docbody th,.docbody td{border-bottom:1px solid var(--line);padding:.45rem .55rem;text-align:left;min-width:5.5rem;}
.docbody th{font-family:var(--cond);font-style:italic;text-transform:uppercase;color:var(--ink-2);letter-spacing:.05em;}
.docbody code{background:#0a0d14;border:1px solid var(--line-2);padding:.05rem .3rem;font-size:.85em;color:var(--cyan);}
.docbody img{max-width:100%;}
.docbody blockquote{border-left:4px solid var(--sled);margin:.7rem 0;padding:.15rem .9rem;color:var(--muted);}

/* ---------- lookup ---------- */
.bigsearch{display:flex;gap:.5rem;margin-bottom:.6rem;}
.bigsearch input{flex:1;font-size:1.05rem;padding:.8rem .9rem;}
.hitlist li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.88rem;}
.hitlist li:last-child{border-bottom:none;}
.hit-head{display:block;font-family:var(--cond);font-style:italic;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--sled);}
.hit-text{color:var(--ink-2);overflow-wrap:anywhere;}

/* ---------- forms ---------- */
label{display:block;font-family:var(--cond);font-style:italic;font-size:.8rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin:.6rem 0 .25rem;}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line-2);border-radius:0;
  font:inherit;font-size:16px;background:#0a0d14;color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sled);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sled) 25%,transparent);}
input::placeholder,textarea::placeholder{color:#5a6580;}
textarea{min-height:4.4rem;resize:vertical;}
input[type=color]{padding:.15rem;height:2.6rem;}
.row{display:flex;gap:.55rem;flex-wrap:wrap;}
.row > div{flex:1;min-width:7.5rem;}
button,.btn{display:inline-block;cursor:pointer;border:none;background:var(--slash);color:#fff;
  padding:.62rem 1.3rem;font-family:var(--cond);font-style:italic;font-weight:800;font-size:1.02rem;
  letter-spacing:.06em;text-transform:uppercase;border-radius:0;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
button:hover,.btn:hover{filter:brightness(1.12);color:#fff;}
.btn-ghost{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-2);}
.btn-danger{background:var(--err);}
.btn-sm{padding:.36rem .9rem;font-size:.88rem;}
.inline{display:inline;}
details.editor > summary{list-style:none;cursor:pointer;color:var(--blu);font-family:var(--cond);
  font-style:italic;font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
details.editor > summary::-webkit-details-marker{display:none;}
.filterbar{display:flex;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap;}
.filterbar input{flex:1;min-width:8rem;}
.filterbar select,.filterbar button{width:auto;}

/* ---------- misc ---------- */
.flash{padding:.65rem .9rem;margin-bottom:.8rem;font-size:.92rem;border-left:4px solid;
  font-weight:600;}
.flash-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);}
.flash-info{background:rgba(47,134,255,.12);color:#7db4ff;border-color:var(--blu);}
.flash-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn);}
.flash-error{background:var(--err-bg);color:var(--err);border-color:var(--err);}
.authbox{max-width:23rem;margin:3rem auto;}
.menu > summary{list-style:none;cursor:pointer;font-size:1.2rem;color:#fff;padding:.15rem .4rem;}
.menu > summary::-webkit-details-marker{display:none;}
.menu-pop{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;min-width:12rem;background:#12151f;
  border:1px solid var(--line-2);padding:.35rem;box-shadow:0 18px 40px rgba(0,0,0,.7);
  display:flex;flex-direction:column;}
.menu-pop a{padding:.5rem .6rem;color:var(--ink-2);font-size:.9rem;}
.menu-pop a:hover{background:var(--sled);color:#0a0c11;}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:.3rem .2rem;}
.menu-who{padding:.3rem .6rem;font-family:var(--cond);font-style:italic;font-size:.8rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.pwform{display:flex;gap:.3rem;padding:.2rem .5rem;}
.pwform input{font-size:.85rem;padding:.35rem .45rem;}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;align-items:start;}

/* ======================================================================
   Phone fallback (<760px): bottom tab bar, one column. Keeps the graphics.
   ====================================================================== */
@media (max-width:759px){
  :root{--tabh:60px;--cut:10px;}
  body{font-size:16px;background-attachment:scroll;}
  .topbar{justify-content:space-between;gap:.5rem;padding:.6rem .9rem;}
  .topbar::before{width:64%;right:-40px;}
  .topbar::after{right:calc(64% - 52px);}
  .brand{font-size:1.35rem;}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
    grid-template-columns:repeat(3,1fr);gap:0;flex:none;background:#05070a;
    border-top:2px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom);}
  .tabs a{flex-direction:column;justify-content:center;gap:.15rem;height:var(--tabh);
    font-size:.7rem;letter-spacing:.05em;padding:0;clip-path:none;}
  .tabs a.on{background:none;color:var(--mag);border-top:3px solid var(--mag);}
  .tabs a.on i{color:var(--mag);}
  .topbar .menu{margin-left:0;}
  .wrap{padding:1rem .85rem calc(var(--tabh) + 1.6rem);}
  h1{font-size:1.85rem;}
  .pagehead{display:block;margin-bottom:1rem;}
  .headfigs{gap:1.1rem;margin-top:.5rem;font-size:.62rem;}
  .headfigs b{font-size:1.25rem;}
  .sledlist{grid-template-columns:1fr;gap:.6rem;}
  .sledrow{padding:1rem 1.1rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));}
  .sr-name{font-size:1.3rem;}
  .sr-go{top:.9rem;right:.95rem;}
  .panel{padding:.9rem 1rem;margin-bottom:.8rem;}
  .figstrip{gap:1.4rem;padding:.9rem 1rem;}
  .figstrip b{font-size:1.5rem;}
  .sledhead{display:block;}
  .sledhead h1{font-size:1.95rem;}
  .cols{grid-template-columns:1fr;}
  .refscroll{flex-wrap:nowrap;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- the garage: fleet page is the sleds and nothing else ---------- */
.garage{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));}
.bay{
  display:block;position:relative;overflow:hidden;color:var(--ink);
  background:#0d1119;border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  transition:transform .15s;
}
.bay:hover{transform:translateY(-3px);}
/* ---- the decal plates: each sled's REAL decal, drawn ----
   Built from Cody's photos of the actual decals (sleds/decals-reference/MAP.md):
   Storm = teal INDY over pink STORM · 500 = chrome italic, red-sheen 500 ·
   XLT = chrome-pink fat italic on a magenta swoosh · Ultra SP = red INDY,
   white SP, crossed checkered flags, lavender spike. Black hood behind all. */
.decal{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  position:relative;overflow:hidden;height:210px;
  background:linear-gradient(150deg,#131722 0%,#07090d 70%);
}
.decal::before{ content:"";position:absolute;left:-12%;bottom:-30%;width:44%;height:130%;
  background:linear-gradient(160deg,var(--sled),var(--sled2));
  transform:skewX(-19deg);opacity:.12; }
.decal-sub{ position:absolute;right:1.1rem;bottom:.75rem;z-index:2;
  font-family:var(--cond);font-style:italic;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45); }
.dm{ position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  line-height:.9;font-family:var(--cond);font-style:italic;font-weight:800;
  text-transform:uppercase; }
.dm i,.dm b,.dm s,.dm u{ font-style:italic;text-decoration:none;display:block; }

/* STORM — teal INDY over hot-pink STORM, white-keyed outlines */
.dm-indy{ font-size:1.5rem;letter-spacing:.42em;color:#33c9dd;
  text-shadow:1px 1px 0 #063a42,2px 2px 0 rgba(0,0,0,.6); }
.dm-storm{ font-size:4.3rem;letter-spacing:.015em;color:#ff4fa3;
  -webkit-text-stroke:1.5px #fff;
  text-shadow:4px 4px 0 #3a0a24,7px 7px 0 rgba(0,0,0,.55); }

/* INDY 500 — chrome italic, the 500 catching a red sheen */
.mark-indy50096 .dm{ flex-direction:row;align-items:baseline;gap:.55rem; }
.dm-500a{ font-size:3.4rem;letter-spacing:.01em;
  background:linear-gradient(178deg,#f4f7fb 0%,#c3ccd8 42%,#7d8899 50%,#dfe5ee 58%,#98a3b3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #39404d;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6)); }
.dm-500b{ font-size:3.4rem;letter-spacing:0;
  background:linear-gradient(178deg,#ffe9ee 0%,#f3b6c2 40%,#c74a5e 52%,#ffd7de 60%,#b34959 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px #4d2930;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6)); }

/* XLT — fat chrome letters, pink-edged, magenta swoosh behind */
.mark-xlt96 .decal::before{ opacity:.1; }
.mark-xlt96 .dm::before{ content:"";position:absolute;left:-30%;right:-30%;top:52%;height:14px;
  background:linear-gradient(90deg,transparent,#e33fa0 18%,#e33fa0 82%,transparent);
  transform:rotate(-7deg);z-index:-1;box-shadow:0 0 18px rgba(227,63,160,.5); }
.dm-xlt{ font-size:4.6rem;letter-spacing:.03em;transform:skewX(-8deg);
  background:linear-gradient(178deg,#ffffff 0%,#dbe7ff 45%,#8fb0e8 55%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #e33fa0;
  filter:drop-shadow(4px 4px 0 rgba(58,8,38,.85)); }

/* ULTRA SP — red INDY, white SP, crossed checkered flags, lavender spike */
.dm-ultra{ padding-top:1.4rem; }
.dm-uindy{ font-size:2rem;letter-spacing:.3em;color:#e02525;
  text-shadow:1.5px 1.5px 0 #500, 3px 3px 0 rgba(0,0,0,.6); }
.dm-usp{ font-size:3rem;letter-spacing:.12em;color:#fff;
  text-shadow:2px 2px 0 #2a2f3c,4px 4px 0 rgba(0,0,0,.6); }
.dm-spike{ width:26px;height:64px;margin-top:.2rem;
  background:linear-gradient(180deg,#a79bf0,#8b7fd8 70%,#6f63c0);
  clip-path:polygon(0 0,100% 0,54% 100%); }
.flag{ position:absolute;top:0;width:34px;height:22px;z-index:3;
  background:repeating-conic-gradient(#0a0a0a 0 25%,#f2f2f2 0 50%) 0 0/8px 8px;
  border:1px solid #222; }
.fl{ left:calc(50% - 40px);transform:rotate(-24deg) skewX(-8deg); }
.fr{ left:calc(50% + 6px);transform:rotate(24deg) skewX(8deg); }

.dm-generic{ font-size:3.4rem;color:#fff;-webkit-text-stroke:2px var(--sled);
  text-shadow:4px 4px 0 rgba(0,0,0,.6); }
@media (max-width:759px){
  .decal{height:150px;}
  .dm-storm{font-size:3rem;} .dm-500a,.dm-500b{font-size:2.4rem;}
  .dm-xlt{font-size:3.2rem;} .dm-usp{font-size:2.2rem;} .dm-uindy{font-size:1.4rem;}
}
.bay-body{display:block;position:relative;padding:1rem 1.25rem 1.15rem;}
.bay-body::before{                 /* pinstripe under the decal plate */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--sled),var(--sled2));
}
.bay-tag{display:inline-block;font-family:ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.08em;color:#0a0c11;background:var(--sled);padding:.08rem .45rem;
  transform:skewX(-12deg);margin-bottom:.45rem;}
.bay-name{display:block;font-family:var(--cond);font-style:italic;font-size:1.95rem;
  font-weight:800;text-transform:uppercase;line-height:1;margin-bottom:.5rem;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);}
.bay-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.8rem;color:var(--muted);}
.bay-meta b{font-family:var(--cond);font-style:italic;font-size:.92rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;}
@media (max-width:759px){
  .garage{grid-template-columns:1fr;gap:.75rem;}
  .bay{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));}
  .bay-name{font-size:1.5rem;}
  .bay-body{padding:.85rem 1rem 1rem;}
}

/* ---------- model wordmark: the badge as it reads on the hood ----------
   Drawn in type rather than pulled as artwork — Polaris badges are trademarked,
   and a raked italic wordmark in the sled's own livery is the same read. */
.badge-mark{
  display:inline-block;position:relative;z-index:2;
  font-family:var(--cond);font-style:italic;font-weight:800;
  font-size:2.1rem;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:2px var(--sled);
  padding:0 .1rem;margin-bottom:.15rem;
  text-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.badge-mark::after{                 /* the underscore slash every 90s badge had */
  content:"";position:absolute;left:0;right:-14%;bottom:-2px;height:4px;
  background:linear-gradient(90deg,var(--sled),var(--sled2));
  transform:skewX(-24deg);
}
.badge-lg{font-size:3.2rem;-webkit-text-stroke-width:3px;margin-bottom:.35rem;}
@media (max-width:759px){ .badge-mark{font-size:1.7rem;} .badge-lg{font-size:2.3rem;} }

/* ---------- gtable: the aligned data grid every list now uses ----------
   Fixed columns = your eye runs straight down a number column instead of
   hunting through prose. Category subheads carve the list into systems. */
.gtable{padding-top:.6rem;}
.ghead,.gr{display:grid;grid-template-columns:30px minmax(0,1fr) 100px 118px;
  gap:.35rem .6rem;align-items:baseline;}
.ghead{font-family:var(--cond);font-style:italic;font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:0 0 .4rem;border-bottom:2px solid var(--line-2);}
.ghead span:last-child,.gnum{text-align:right;}
.gr{padding:.42rem 0;border-bottom:1px solid var(--line);}
.gr:last-child{border-bottom:none;}
.gr:hover{background:rgba(255,255,255,.02);}
.gcat{font-family:var(--cond);font-style:italic;font-size:.85rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sled);
  margin:.9rem 0 .1rem;padding:.25rem 0 .25rem;border-bottom:1px solid var(--line-2);}
.gcat-dim{color:var(--muted);}
.gmain{min-width:0;}
.gmain > summary{list-style:none;cursor:pointer;font-size:.93rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gmain[open] > summary{white-space:normal;}
.gmain > summary::-webkit-details-marker{display:none;}
.gmain-s{min-width:0;font-size:.93rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gdetail{padding:.5rem 0 .3rem;font-size:.87rem;color:var(--ink-2);}
.gdetail p{margin:.1rem 0 .45rem;}
.gtag{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  white-space:nowrap;text-align:right;}
.gtag i{font-style:normal;font-weight:800;}
.gnum{font-family:var(--cond);font-style:italic;font-weight:800;font-size:1.02rem;
  white-space:nowrap;}
.gr.done .gmain-s{color:var(--muted);}
.gr.done .gnum{color:var(--ink);}
.gspace{width:24px;}
@media (max-width:759px){
  .ghead{display:none;}
  .ghead,.gr{grid-template-columns:26px minmax(0,1fr) auto;}
  .gtag{display:none;}
  .gr.done{grid-template-columns:26px minmax(0,1fr) auto;}
}

/* PN browser: five aligned columns, notes as quiet sub-rows */
.ghead.pn4,.gr.pn4{grid-template-columns:34px minmax(0,1fr) 110px 150px 130px;}
.gref{font-family:ui-monospace,monospace;font-size:.74rem;color:var(--muted);}
.gpn{font-family:ui-monospace,monospace;font-size:.82rem;color:var(--cyan);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.gnla{color:var(--err);font-size:.78rem;}
.gnote{grid-column:1/-1;font-size:.78rem;color:var(--warn);padding:.1rem 0 .35rem 34px;
  border-bottom:1px solid var(--line);}
.gr.has-note{border-bottom:none;}
.chip-note{background:var(--warn-bg);color:var(--warn);}
.eyebrow a{color:inherit;}
/* eyebrow was pink-on-pink — key the text dark on the colour block, readable */
.eyebrow{color:#0a0c11;}
@media (max-width:759px){
  .ghead.pn4,.gr.pn4{grid-template-columns:minmax(0,1fr) 96px 96px;}
  .gr.pn4 .gref,.gr.pn4 .gpn.muted{display:none;}
  .ghead.pn4 span:nth-child(1),.ghead.pn4 span:nth-child(4){display:none;}
  .gnote{padding-left:0;}
}

/* doc tables carry the same aligned look as the app tables */
.docbody table{border:none;margin:.4rem 0 1.1rem;}
.docbody th{font-family:var(--cond);font-style:italic;font-size:.72rem;letter-spacing:.12em;
  color:var(--muted);border-bottom:2px solid var(--line-2);}
.docbody td{font-size:.86rem;vertical-align:top;}
.docbody td:last-child,.docbody th:last-child{}
.docbody tr:hover td{background:rgba(255,255,255,.02);}
.docbody h2{border-bottom:1px solid var(--line-2);padding-bottom:.25rem;}
.docbody ul{padding-left:1.1rem;margin:.3rem 0 .9rem;}
.docbody li{margin:.15rem 0;font-size:.88rem;}

/* everything-page: raw doc tables, per section */
.subhead{font-family:var(--cond);font-style:italic;font-size:.82rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:1rem 0 .3rem;}
.tblwrap{overflow-x:auto;margin-bottom:.5rem;}
table.dt{width:100%;border-collapse:collapse;font-size:.84rem;}
table.dt th{font-family:var(--cond);font-style:italic;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:.3rem .5rem;
  border-bottom:2px solid var(--line-2);white-space:nowrap;}
table.dt td{padding:.32rem .5rem;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--ink-2);}
table.dt tr:hover td{background:rgba(255,255,255,.02);}
.ghead.b3,.gr.b3{grid-template-columns:minmax(0,1fr) 140px 120px;}
.gr.b3 a.gmain-s{color:var(--ink);}
.gr.b3 a.gmain-s:hover{color:var(--sled);}
@media (max-width:759px){ .ghead.b3,.gr.b3{grid-template-columns:minmax(0,1fr) 92px 92px;} }

/* per-sled tab strip */
.sledtabs{display:flex;gap:.22rem;flex-wrap:wrap;margin-bottom:1rem;
  border-bottom:2px solid var(--line-2);padding-bottom:.5rem;}
.sledtabs a{padding:.3rem .6rem;font-family:var(--cond);font-style:italic;font-weight:800;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);}
.sledtabs a b{font-weight:800;opacity:.6;margin-left:.25rem;}
.sledtabs a:hover{color:var(--ink);border-color:var(--sled);}
.sledtabs a.on{background:var(--sled);color:#0a0c11;border-color:transparent;}
.sledtabs a.on b{opacity:.75;}

/* status block: label beside value, not stacked on top of it */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.5rem 1.6rem;}
.kv > div{display:grid;grid-template-columns:104px minmax(0,1fr);
  gap:.6rem;align-items:baseline;padding:.28rem 0;
  border-bottom:1px solid var(--line);}
.kv .k{font-family:var(--cond);font-style:italic;font-size:.74rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0;}
.kv .v{font-size:.92rem;margin:0;}
.tbd{font-family:var(--cond);font-style:italic;font-size:.8rem;font-weight:800;
  letter-spacing:.08em;color:var(--warn);opacity:.75;}

/* subject tabs — the systems row: clutching, carbs, suspension … */
.subjtabs{margin-top:-.72rem;margin-bottom:.72rem;}
.subjtabs a{border-color:color-mix(in srgb,var(--sled) 30%,var(--line-2));
  color:color-mix(in srgb,var(--sled) 55%,var(--muted));}
.subjtabs a:hover{color:var(--fg);border-color:var(--sled);}

/* system-section part numbers: both fiches merged */
.ghead.pn5,.gr.pn5{grid-template-columns:30px minmax(0,1fr) 104px minmax(0,1fr) 94px 94px;}
.gr.pn5 .gnum{text-align:right;font-family:var(--mono);font-size:.78rem;font-style:normal;
  font-weight:600;color:var(--muted);}
.gsub{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:.7rem 0 .25rem;border-bottom:1px solid var(--line-2);}
.fnote{display:block;font-style:normal;font-size:.78rem;color:var(--sled);opacity:.8;}
@media (max-width:899px){
  .ghead.pn5,.gr.pn5{grid-template-columns:minmax(0,1fr) 100px 88px 88px;}
  .ghead.pn5 span:nth-child(1),.ghead.pn5 span:nth-child(4),
  .gr.pn5 .gtag,.gr.pn5 span:nth-child(4){display:none;}
}

/* aftermarket cross-reference, from sleds/crossref.md */
.repl{display:block;font-style:normal;font-size:.72rem;color:var(--muted);opacity:.75;}
.alt{min-width:0;font-size:.78rem;line-height:1.35;}
.alt i{display:block;font-style:normal;color:var(--ok,#4ade80);}
.alt i.xplanned{color:#facc15;}
.alt i.xoption{color:var(--muted);}
.alt i.xruledout{color:#f87171;text-decoration:line-through;opacity:.7;}
.alt i.xinhand{color:var(--ok,#4ade80);}

/* summary: one row per system */
.ghead.s4,.gr.s4{grid-template-columns:112px minmax(0,1fr) 116px 62px;}
a.gr.s4{color:inherit;text-decoration:none;}
a.gr.s4:hover{background:color-mix(in srgb,var(--sled) 8%,transparent);}
a.gr.s4:hover .gtag{color:var(--sled);}
.morelink{display:block;padding:.55rem 0 .1rem;font-family:var(--cond);font-style:italic;
  font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sled);}
.headfigs .proj b{color:var(--sled);}
@media (max-width:759px){ .ghead.s4,.gr.s4{grid-template-columns:96px minmax(0,1fr) 78px;}
  .ghead.s4 span:nth-child(4),.gr.s4 span:nth-child(4){display:none;} }

/* part-number assemblies fold shut — one line each until you open one */
.assy > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;}
.assy > summary::-webkit-details-marker{display:none;}
.assy > summary::before{content:"\25B8";color:var(--sled);font-size:.7rem;
  transition:transform .12s;}
.assy[open] > summary::before{transform:rotate(90deg);}
.assy > summary:hover{color:var(--fg);}
.assy > summary i{margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:.72rem;color:var(--muted);}
.assy + .assy > summary{border-top:0;}

/* SUMMARY — one desktop screen, no scrolling */
.sumbar{display:flex;flex-wrap:wrap;gap:0 1.5rem;align-items:baseline;
  padding:.38rem .9rem;margin-bottom:.5rem;border:1px solid var(--line-2);
  background:var(--panel);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.sumbar span{display:flex;gap:.45rem;align-items:baseline;min-width:0;}
.sumbar i{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.7rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.sumbar b{font-size:.88rem;font-weight:600;}
.sumbar .lastlog{flex:1 1 auto;min-width:0;}
.sumbar .lastlog b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:400;color:var(--muted);}

.sysgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.4rem;padding:.35rem .9rem .5rem;}
a.sys{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.6rem;
  align-items:baseline;padding:.32rem 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;min-width:0;}
a.sys:hover .sysname{color:var(--sled);}
a.sys:hover .syshead{color:var(--fg);}
.sysname{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.syshead{font-size:.82rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;}
.sysnum{font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap;}

.panel.tight{padding-top:.5rem;padding-bottom:.5rem;}
.panel.tight .gr{padding:.3rem 0;}
.gcat .morelink{float:right;padding:0;font-size:.7rem;}
@media (max-width:899px){ .sysgrid{grid-template-columns:minmax(0,1fr);} }

/* the sled screens run a tighter header so the summary clears a 768px desktop */
body:has(.sledtabs) .wrap{padding-top:1.05rem;}
body:has(.sledtabs) .pagehead{margin-bottom:.42rem;padding-bottom:.42rem;}
body:has(.sledtabs) .pagehead h1{font-size:2.2rem;line-height:1.04;}
body:has(.sledtabs) .headfigs{gap:1.5rem;}
body:has(.sledtabs) .headfigs b{font-size:1.45rem;}
body:has(.sledtabs) .headfigs span{font-size:.68rem;}
.sledtabs{margin-bottom:.55rem;}
.subjtabs{margin-top:-.3rem;margin-bottom:.6rem;}
.sysgrid{padding:.25rem .9rem .35rem;}
a.sys{padding:.26rem 0;}
.panel.tight .gr{padding:.26rem 0;}

/* summary part numbers, coloured by where the part stands */
.syspns{display:flex;flex-wrap:nowrap;gap:.3rem;overflow:hidden;min-width:0;}
.syspns i{font-style:normal;font-family:var(--mono);font-size:.7rem;line-height:1.5;
  padding:0 .3rem;border:1px solid var(--line-2);white-space:nowrap;}
.syspns i.p-used{color:#4ade80;border-color:#4ade8055;}
.syspns i.p-need{color:#facc15;border-color:#facc1555;}
.syspns i.p-tbd {color:var(--muted);border-style:dashed;}
.syspns i.p-shop{color:#60a5fa;border-color:#60a5fa55;}
.syspns i.p-more{color:var(--muted);border:0;padding-left:.1rem;
  overflow:hidden;text-overflow:ellipsis;}
.pnkey{display:flex;gap:1rem;padding:.05rem 0 .35rem;font-family:var(--cond);
  font-style:italic;font-weight:800;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;}
.pnkey b{font-weight:800;}

/* back out of an item to the system tab it belongs to */
.backlink{display:inline-block;margin:0 0 .5rem;padding:.25rem .7rem;
  font-family:var(--cond);font-style:italic;font-weight:800;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.backlink:hover{color:var(--sled);border-color:var(--sled);}

/* a paid item keeps its estimate — folded away, not deleted */
.estfold{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.5rem;}
.estfold > summary{list-style:none;cursor:pointer;font-family:var(--cond);
  font-style:italic;font-weight:800;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);}
.estfold > summary::-webkit-details-marker{display:none;}
.estfold > summary::before{content:"\25B8 ";color:var(--sled);}
.estfold[open] > summary::before{content:"\25BE ";}
.estfold span{display:block;padding-top:.3rem;font-family:var(--mono);font-size:.82rem;
  color:var(--muted);}
.estfold i{font-style:normal;margin-left:.6rem;}
.estfold i.over{color:#f87171;}
.estfold i.under{color:#4ade80;}

/* per-system notes — Cody's text, saved against the sled + system */
.panel.note textarea{width:100%;margin-top:.4rem;padding:.5rem .6rem;resize:vertical;
  background:var(--bg);color:var(--fg);border:1px solid var(--line-2);
  font-family:inherit;font-size:.9rem;line-height:1.45;}
.panel.note textarea:focus{outline:none;border-color:var(--sled);}
.noterow{display:flex;align-items:center;gap:.8rem;justify-content:flex-end;
  margin-top:.4rem;}
.noterow .muted{margin-right:auto;}

/* SUMMARY — where the sled stands, one line per system */
.panel.prog{padding:.3rem .9rem .4rem;}
a.pline{display:grid;grid-template-columns:12px 118px 130px minmax(0,1fr) 74px;
  gap:.7rem;align-items:baseline;padding:.28rem 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;}
a.pline:last-child{border-bottom:0;}
a.pline:hover{background:color-mix(in srgb,var(--sled) 8%,transparent);}
a.pline:hover .pname{color:var(--sled);}
.pdot{width:8px;height:8px;border-radius:50%;align-self:center;background:var(--line-2);}
.pname{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;}
.pstate{font-family:var(--cond);font-style:italic;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);}
.pwhat{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;}
.pcost{font-family:var(--mono);font-size:.78rem;text-align:right;color:var(--ink);}
.s-shop    .pdot{background:#60a5fa;box-shadow:0 0 8px #60a5fa88;}
.s-shop    .pstate{color:#60a5fa;}
.s-waiting .pdot{background:#facc15;}
.s-waiting .pstate{color:#facc15;}
.s-done    .pdot{background:#4ade80;}
.s-done    .pstate{color:#4ade80;}
.s-none    .pstate{color:var(--line-2);}
@media (max-width:899px){
  a.pline{grid-template-columns:10px 96px minmax(0,1fr) 68px;}
  .pwhat{display:none;}
}

/* rides table: date · time · sled · rider · from -> to · miles · fill · mpg */
.ghead.r7,.gr.r7{grid-template-columns:92px 56px 84px 56px minmax(0,1fr) minmax(0,1fr) 62px 26px;}
.rtime{font-family:var(--mono);font-size:.78rem;color:var(--muted);}
.rsled{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;}
.rwho{font-size:.8rem;color:var(--muted);}
.gr.r7 .gmain-s{font-size:.86rem;}
.gnum.mpg{color:var(--sled);font-weight:700;}
@media (max-width:899px){
  .ghead.r7,.gr.r7{grid-template-columns:84px 74px 52px minmax(0,1fr) minmax(0,1fr) 52px 24px;}
  .ghead.r7 span:nth-child(2),.gr.r7 .rtime{display:none;}
}

/* admin */
.invlink{font-size:.72rem;word-break:break-all;color:var(--sled);}
.riderbox{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.35rem 0;}
.rider{font-size:.85rem;color:var(--ink);display:flex;align-items:center;gap:.3rem;}
.sledpeople{border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.3rem;}
.sledpeople:last-child{border-bottom:0;}

/* ---- phone: kill the sideways scroll, and respect the notch ---------------
   Cody 8/31: installed to the Home Screen, so the app runs full-screen and the
   status bar overlaps the top bar without these insets. */
/* clip, NOT hidden: overflow-x:hidden on an ancestor breaks position:sticky,
   which detached the top bar on phones. */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { min-width: 0; }
/* Backstop: nothing decorative should ever make the page draggable sideways. */
html, body { overflow-x: clip; }
.wrap { max-width: 100%; }
@supports (padding: max(0px)) {
  .topbar { padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
            padding-top: max(0px, env(safe-area-inset-top)); }
  .wrap  { padding-left: max(1rem, env(safe-area-inset-left));
           padding-right: max(1rem, env(safe-area-inset-right));
           padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .gtable, .panel { overflow-x: auto; }
  .pagehead h1 { font-size: 1.9rem; word-break: break-word; }
  .headfigs { gap: .9rem 1.4rem; }
  .sledtabs a { font-size: .78rem; padding: .28rem .55rem; }
}

/* ---- phone home screen ---------------------------------------------------- */
.apphead{display:flex;flex-direction:column;gap:.15rem;margin:.2rem 0 .9rem;}
.apphead h1{font-size:2rem;margin:0;}
.tiles{display:grid;grid-template-columns:1fr;gap:.6rem;}
@media (min-width:700px){ .tiles{grid-template-columns:1fr 1fr;} }
a.tile{display:grid;gap:.15rem;padding:.85rem .95rem;text-decoration:none;color:inherit;
  border:1px solid var(--line-2);background:
  linear-gradient(135deg,color-mix(in srgb,var(--sled) 16%,var(--panel)) 0%,var(--panel) 62%);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);}
a.tile:active{transform:scale(.99);}
.t-tag{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sled);}
.t-name{font-family:var(--cond);font-style:italic;font-weight:800;font-size:1.35rem;
  letter-spacing:.01em;line-height:1.05;}
.t-state{font-family:var(--cond);font-style:italic;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);}
.t-figs{font-size:.82rem;color:var(--muted);margin-top:.2rem;}
.t-figs b{color:var(--ink);font-weight:700;}

.actgroup{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem;}
.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0 0 .3rem;}
@media (min-width:700px){ .acts{grid-template-columns:repeat(4,1fr);} }
a.act{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.9rem .4rem;
  text-decoration:none;color:var(--ink);border:1px solid var(--line-2);background:var(--panel);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
a.act i{font-style:normal;font-size:1.35rem;color:var(--sled);line-height:1;}
a.act span{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;}
a.act em{font-style:normal;font-size:.68rem;color:var(--muted);text-align:center;line-height:1.2;}
a.act.soon{opacity:.5;position:relative;}
a.act.soon::after{content:"soon";position:absolute;top:.3rem;right:.4rem;font-family:var(--mono);
  font-size:.55rem;letter-spacing:.06em;color:var(--sled);opacity:.9;}
a.act:active{border-color:var(--sled);}

.applist{border:1px solid var(--line-2);background:var(--panel);padding:.6rem .9rem .5rem;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);}
.appline{display:grid;grid-template-columns:46px 74px minmax(0,1fr) 46px;gap:.5rem;
  align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--line);}
.appline:last-child{border-bottom:0;}
.l-date{font-family:var(--mono);font-size:.74rem;color:var(--muted);}
.l-sled{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.7rem;
  letter-spacing:.04em;text-transform:uppercase;}
.l-where{font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.l-mi{font-family:var(--mono);font-size:.8rem;text-align:right;}

/* the top bar must never wrap onto the page on a phone */
.topbar{flex-wrap:nowrap;}
.topbar .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.topbar .tabs::-webkit-scrollbar{display:none;}
@media (max-width:560px){
  .topbar{gap:.5rem;}
  .brand{font-size:1.15rem;}
  .topbar .tabs a{padding:.3rem .5rem;}
  .topbar .tabs a span{display:none;}      /* icons only, keeps it on one line */
  .topbar .tabs a i{font-size:1.05rem;}
}

/* ---- route planner -------------------------------------------------------- */
.routewrap{display:flex;flex-direction:column;gap:.5rem;}
.routebar{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.rb-title{font-family:var(--cond);font-style:italic;font-weight:800;font-size:1.5rem;
  letter-spacing:.01em;text-transform:uppercase;}
.rb-figs{margin-left:auto;font-family:var(--mono);font-size:.95rem;}
.rb-figs b{color:var(--sled);font-size:1.25rem;}
.rb-figs i{font-style:normal;color:var(--muted);font-size:.8rem;}
.quickpick{display:flex;gap:.4rem;flex-wrap:wrap;}
.qp{font-family:var(--cond);font-style:italic;font-weight:800;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.3rem .65rem;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-2);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.qp:active{border-color:var(--sled);color:var(--sled);}
#map{height:58vh;min-height:340px;border:1px solid var(--line-2);background:#0b0e15;}
@media (max-width:560px){ #map{height:52vh;} }
.routelegs{display:flex;flex-direction:column;}
.leg{display:grid;grid-template-columns:minmax(0,1fr) 74px 110px;gap:.5rem;align-items:baseline;
  padding:.32rem 0;border-bottom:1px solid var(--line);font-size:.86rem;}
.leg b{font-family:var(--mono);text-align:right;}
.leg i{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:right;}
.routesave{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding-top:.3rem;}
.leaflet-container{background:#0b0e15;}

/* Safari's bottom toolbar / the iPhone home indicator sits over the last controls,
   so every page gets room to clear it (Cody 2026-09-01). */
.wrap{padding-bottom:5.5rem;}
@supports (padding: max(0px)) {
  .wrap{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom));}
}

/* route planner: search + my-location */
.routesearch{position:relative;}
.routesearch input{width:100%;padding:.5rem .7rem;background:var(--panel);color:var(--fg);
  border:1px solid var(--line-2);font-family:inherit;font-size:.95rem;}
.routesearch input:focus{outline:none;border-color:var(--sled);}
.sresults{position:absolute;z-index:1150;left:0;right:0;top:100%;background:var(--panel);
  border:1px solid var(--line-2);max-height:260px;overflow:auto;}
.sresults div{padding:.45rem .7rem;border-bottom:1px solid var(--line);cursor:pointer;font-size:.9rem;}
.sresults div:hover{background:color-mix(in srgb,var(--sled) 14%,transparent);}
.sresults small{display:block;color:var(--muted);font-size:.72rem;}
.opts{display:flex;flex-direction:column;gap:.3rem;}
.opt{display:grid;grid-template-columns:22px minmax(0,1fr) 70px;gap:.5rem;align-items:baseline;
  padding:.4rem .6rem;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;font-size:.86rem;}
.opt.on{border-color:var(--sled);}
.opt b{font-family:var(--mono);text-align:right;}
.opt i{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:.72rem;}
.locbtn{position:absolute;right:12px;bottom:26px;z-index:800;width:42px;height:42px;
  border-radius:50%;background:var(--panel);border:1px solid var(--line-2);color:var(--sled);
  font-size:1.2rem;cursor:pointer;}

/* On a phone the three top tabs are redundant — the app home has big tiles for
   Fleet / Shelf / Rides, and in standalone mode they were landing at the bottom
   of the screen. Cody 2026-09-01: "dont need them". Brand + settings stay. */
@media (max-width:700px){
  .topbar .tabs{display:none;}
  .brand{cursor:default;}
  .topbar{justify-content:space-between;}
  .brand{font-size:1.25rem;}
}

/* Numbered stop pin, drawn in CSS so no marker image is fetched. */
.stoppin{background:none;border:none;}
.stoppin b{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--slash,#ff6b1a);
  color:#0b0e15;font-size:.8rem;font-weight:700;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.6);}
.locbtn.on{background:#4ade80;color:#0b0e15;border-color:#4ade80;}

/* Phone: the topbar is just a home link and settings, so give the map the room. */
@media (max-width:700px){
  .topbar{padding-left:.75rem;padding-right:.75rem;
    padding-top:calc(.5rem + env(safe-area-inset-top));padding-bottom:.5rem;}
  .routebar{flex-wrap:wrap;gap:.4rem .6rem;}
  #map{height:58vh;}
  .quickpick{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .quickpick .qp{flex:0 0 auto;}
}

/* ---- phone: the map is the screen ---------------------------------------
   Cody 2026-09-01: the phone UI should be easier. On a narrow screen the map
   fills what is left under the topbar and the controls float over it, instead
   of a letterbox map wedged into a page that scrolls. Desktop is untouched. */
@media (max-width:700px){
  .routewrap{position:fixed;inset:0;display:block;overflow:hidden;
    top:calc(3.1rem + env(safe-area-inset-top));}
  .routewrap .mapbox{position:absolute;inset:0;}
  .routewrap #map{position:absolute;inset:0;height:auto;min-height:0;width:auto;
    border:none;border-radius:0;}

  .routebar{position:absolute;z-index:1100;top:.5rem;left:.5rem;right:.5rem;
    flex-wrap:nowrap;white-space:nowrap;
    background:rgba(11,14,21,.92);border:1px solid var(--line);border-radius:.5rem;
    padding:.4rem .6rem;backdrop-filter:blur(6px);}
  .routebar .rb-title{display:none;}
  .routesearch{position:absolute;z-index:1100;top:3.9rem;left:.5rem;right:.5rem;}
  .quickpick{position:absolute;z-index:1100;top:7.4rem;left:.5rem;right:.5rem;
    padding:0;margin:0;background:none;border:none;}
  .locbtn{position:absolute;z-index:1100;right:.6rem;bottom:8.2rem;
    width:2.9rem;height:2.9rem;border-radius:50%;font-size:1.3rem;
    transform:none;clip-path:none;}   /* the site's slash shape clips a circle */
  .locbtn::before,.locbtn::after{display:none;}

  /* Everything you read rather than tap lives in a sheet you pull up. */
  /* The OSM credit sat right on the sheet arrow — lift it clear of the peek. */
  .leaflet-control-attribution{bottom:6.6rem !important;font-size:9px;opacity:.75;}
  .sheet{position:absolute;z-index:1200;left:0;right:0;bottom:0;
    max-height:70%;overflow-y:auto;transform:translateY(calc(100% - 2.6rem));
    transition:transform .25s ease;
    background:rgba(11,14,21,.97);border-top:1px solid var(--line);
    border-radius:.9rem .9rem 0 0;padding:0 .6rem;
    padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));}
  .sheet.open{transform:translateY(0);}
  .grab{display:block;width:100%;height:2.6rem;background:none;border:none;
    cursor:pointer;position:sticky;top:0;z-index:1;
    background:linear-gradient(rgba(11,14,21,.97) 70%, transparent);}
  .grab::before{content:"\25B2  Route";display:block;text-align:center;
    line-height:2.6rem;font-size:.8rem;font-weight:600;
    color:var(--ink,#e8ecf5);letter-spacing:.06em;}
  .sheet.open .grab::before{content:"\25BC  Hide";}
}
@media (min-width:701px){ .grab{display:none;} }

.mapbox{position:relative;}

/* ---- places to stop (OpenStreetMap, within a mile of a trail) ------------ */
.poipin{background:none;border:none;}
.poipin b{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--pc);
  font-size:11px;line-height:1;border:1.5px solid rgba(0,0,0,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.5);}
.poitoggles{display:flex;flex-wrap:wrap;gap:.35rem;padding:.2rem 0 .6rem;}
.poit{font-size:.78rem;padding:.25rem .55rem;border-radius:999px;cursor:pointer;
  background:#0a0d14;color:var(--muted);border:1px solid var(--line);
  transform:none;clip-path:none;}
.poit::before,.poit::after{display:none;}
.poit.on{color:#0a0d14;background:var(--pc);border-color:var(--pc);font-weight:600;}

/* ---- the house ----------------------------------------------------------
   Cody 9/1: "a house button on the phone app in the center of teh screeen".
   Bottom centre, where the three tabs he removed used to be. Phone only. */
.homefab{display:none;}
@media (max-width:700px){
  .homefab{display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:1400;left:50%;transform:translateX(-50%);
    top:calc(.35rem + env(safe-area-inset-top));
    width:2.4rem;height:2.4rem;border-radius:50%;
    background:rgba(11,14,21,.55);color:#fff;
    border:1px solid rgba(255,255,255,.35);text-decoration:none;
    backdrop-filter:blur(4px);}
  .homefab svg{width:20px;height:20px;}
  .homefab:active{background:#fff;color:#0b0e15;}
}

/* ---- "which way?" -------------------------------------------------------
   Appears only when the router found more than one way between the two points.
   The arrows step through them; Use accepts the one on screen. */
.routeask{display:flex;align-items:center;gap:.5rem;margin:.6rem 0;
  padding:.45rem .5rem;background:var(--panel,#12161f);
  border:1px solid var(--slash,#ff2d8f);border-radius:.55rem;}
.routeask[hidden]{display:none;}
.askbody{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.askbody b{font-size:.82rem;color:var(--slash,#ff2d8f);letter-spacing:.04em;}
.askbody span{font-size:.8rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.askarrow{width:2.1rem;height:2.1rem;flex:0 0 2.1rem;border-radius:50%;
  background:#0a0d14;color:var(--ink,#e8ecf5);border:1px solid var(--line-2);
  font-size:1.2rem;line-height:1;cursor:pointer;transform:none;clip-path:none;}
.askuse{padding:.3rem .7rem;border-radius:.4rem;cursor:pointer;font-size:.8rem;
  font-weight:700;background:var(--slash,#ff2d8f);color:#0b0e15;border:none;
  transform:none;clip-path:none;}
.askarrow::before,.askarrow::after,.askuse::before,.askuse::after{display:none;}

@media (max-width:700px){
  /* Floats under the quick-picks, where the bottom of the screen is already full. */
  .routeask{position:absolute;z-index:1150;top:7.4rem;left:.5rem;right:.5rem;
    margin:0;background:rgba(11,14,21,.96);backdrop-filter:blur(6px);}
}

@media (max-width:700px){
  .routebar .rb-figs b{font-size:1.15rem;}
  .routebar .rb-figs i{font-size:.75rem;}
  .routebar .btn-sm{font-size:.72rem;padding:.2rem .5rem;}
  .leaflet-control-attribution{bottom:3rem !important;}
  .locbtn{bottom:4.6rem !important;}
}

/* Frozen-water crossings are off until Cody says the ice is in. */
.icebtn.on{background:#7dd3fc;color:#06202e;border-color:#7dd3fc;}
.iceleg{display:block;width:100%;font-style:normal;font-size:.75rem;color:#7dd3fc;}

/* ---- narrow screens: every grid table stacks, no per-table tuning ---------
   Cody 9/1, on fixing the wide rows: "without having to pre do them all".
   Switching .gr from grid to a wrapping flex row makes every
   grid-template-columns variant (b3, pn4, pn5, and anything added later)
   irrelevant at once — the main cell takes the width and the figures sit under
   it. The column headings go, because they can no longer line up with anything. */
@media (max-width:700px){
  .ghead{display:none;}
  .gtable{overflow-x:visible;}
  .gr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .55rem;
      padding:.55rem 0;}
  .gr > *{min-width:0;}
  .gmain,.gmain-s,.gr > details{flex:1 1 100%;white-space:normal;}
  .gmain-s{overflow:visible;text-overflow:clip;}
  .gnum,.gpn,.gref,.gtag{flex:0 0 auto;text-align:left;}
  /* Part numbers are the long ones — let them break rather than push the row
     out, and drop the ellipsis clipping now that they have a line of their own. */
  .gpn,.pn{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;}
  /* Same for the item name: it is the whole first line now, so let it wrap. */
  .gmain > summary,.gmain-s{white-space:normal;overflow:visible;text-overflow:clip;}
  .gnote{padding-left:0;}
  /* Any control cluster inside a row wraps too, rather than forcing the row wide. */
  .gr form{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-start !important;}
  .gr select,.gr input[type=text]{max-width:100%;}
  /* These variants hide cells at narrow widths; with the row stacked there is
     room for them again. */
  .gr.pn4 .gref,.gr.pn4 .gpn.muted,.gr.pn5 .gtag,.gr.pn5 span:nth-child(4){display:revert;}
}