/* ==========================================================================
   TRPHY — one stylesheet, no build step.

   Raw titanium, one anodised edge.

   The ground is cool grey, never neutral: a neutral grey reads as
   unconsidered, and raw titanium is genuinely blue-biased. The accents are
   real anodising colours — the shade titanium turns at a given voltage, the
   same physics as an oil slick — one per discipline, used like a component
   rather than a background.

   Pages alternate between a dark surface and a light one, the way Apple's
   do. That is not decoration: the dark bands are for the object and the
   story, and the light bands are for anything you have to actually read —
   a price list, a form, a catalogue. Reading a price list on black is
   unpleasant and no amount of art direction fixes it.

   Both surfaces are implemented as *scoped token sets* on `.band`, so a
   component is written once and works on either. Never style a component
   with a literal colour; take it from a token.
   ========================================================================== */

:root{
  /* ---- raw titanium -------------------------------------------------- */
  --void:#0B0D0F;
  --graphite:#131619;
  --steel:#1B1F23;
  --edge-d:#272C31;
  --edge-d2:#343A40;
  --mist:#C6CCD2;
  --titanium:#8C949B;
  --dim:#666E75;

  /* ---- paper --------------------------------------------------------- */
  --paper:#F2F1ED;
  --paper-2:#E8E6E0;
  --card:#FFFFFF;
  --ink:#101315;
  --ink-2:#4F555A;
  --ink-3:#797F85;
  --edge-l:#DCD9D2;
  --edge-l2:#C9C5BC;

  /* ---- anodised: one voltage per discipline -------------------------- */
  --bronze:#B87333;        /* 22V — runners, and the house accent */
  --bronze-hi:#D9A05B;
  --bronze-lo:#5A3A1A;
  --teal:#3FA9A0;          /* 65V — cyclists */
  --teal-hi:#6FD6CB;
  --teal-lo:#1B4A48;
  --violet:#8A7BC8;        /* 45V — trekkers and climbers */
  --violet-hi:#B4A8E4;
  --violet-lo:#3B3560;

  /* semantic, kept away from the accents on purpose */
  --ok:#4E9E6A;
  --warn:#C08A2E;
  --bad:#C25A45;

  /* the house accent, inherited everywhere until an .acc-* overrides it */
  --acc:var(--bronze);
  --acc-hi:var(--bronze-hi);
  --acc-lo:var(--bronze-lo);

  --max:1240px;
  --gut:26px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
[hidden]{display:none!important}

/* ---- typefaces ------------------------------------------------------
   A grotesque, set against a monospace codex. The sans carries the voice
   and the mono carries the machine: route codes, serials, dimensions,
   prices. Two registers, one object, which is what the product itself is.

   Archivo has a width axis, which is what earns it the display sizes -
   the wide cut gives a big line the settled, confident set that Apple
   gets from SF Pro Display, without a second typeface being dragged in.
   See the note on the display rule: the wide cut is an axis on this same
   family, not a face called "Archivo Expanded". */
:root{
  --sans:Archivo,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

body{
  margin:0;background:var(--void);color:var(--mist);
  font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.band{
  --bg:var(--void); --fg:#F3F5F7; --muted:var(--titanium); --faint:var(--dim);
  --line:var(--edge-d); --line-2:var(--edge-d2); --panel:#15181B;
  --panel-2:#1B1F23; --well:#0E1114;
  background:var(--bg);color:var(--muted);
  position:relative;
}
.band.light{
  --bg:var(--paper); --fg:var(--ink); --muted:var(--ink-2); --faint:var(--ink-3);
  --line:var(--edge-l); --line-2:var(--edge-l2); --panel:var(--card);
  --panel-2:var(--paper-2); --well:var(--paper-2);
}
.band.deep{ --bg:#07090A; }
.band + .band{border-top:1px solid var(--line)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:720px}
.mid{max-width:940px}

/* Vertical only. Using the `padding` shorthand here resets left and right to
   zero and silently wipes .wrap's gutter - which looks fine on a desktop,
   where the max-width leaves a margin anyway, and puts every word hard
   against the edge of a phone. */
.pad-xl{padding-block:120px}
.pad-l{padding-block:88px}
.pad-m{padding-block:60px}
.pad-s{padding-block:36px}
@media (max-width:760px){
  .pad-xl{padding-block:72px}
  .pad-l{padding-block:56px}
  .pad-m{padding-block:42px}
}

/* ==========================================================================
   Type
   ========================================================================== */

h1,h2,h3,h4{margin:0;color:var(--fg);font-family:var(--sans);font-weight:600;
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}

/* Archivo's wide cut for display sizes. It is a width axis on the same
   family, not a separate face - naming "Archivo Expanded" silently falls
   back to normal width and the headline quietly loses its authority. */
.display,h1{font-weight:700;letter-spacing:-.035em;font-stretch:125%}
h1{font-size:clamp(2.5rem,6.4vw,5rem);line-height:.99}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.028em}
h3{font-size:1.16rem;letter-spacing:-.012em}
h4{font-size:.98rem;letter-spacing:-.005em}

p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--muted);max-width:56ch;
  line-height:1.55}
.big{font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.4;color:var(--fg);
  font-weight:500;letter-spacing:-.018em;max-width:24ch}
small,.small{font-size:.86rem}

a{color:inherit}
a:hover{color:var(--bronze)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}

/* ---- the codex: everything numeric or coded is mono --------------------- */
.mono,.code,.serial,.spec{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.code{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint)}
.code.on{color:var(--acc)}
.serial{font-size:.74rem;letter-spacing:.12em;color:var(--faint)}
.eyebrow{font-family:var(--mono);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  margin:0 0 1.1em;display:block}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ==========================================================================
   Discipline accents
   ========================================================================== */

/* Bronze is the house accent, so it is the inherited default and lives on
   :root - NOT on .band. Putting it on .band gave it the same specificity as
   .acc-cycle and, being later in the file, it won: every section came out
   bronze however it was labelled. */
.acc-runners{--acc:var(--bronze);--acc-hi:var(--bronze-hi);--acc-lo:var(--bronze-lo)}
.acc-cycle{--acc:var(--teal);--acc-hi:var(--teal-hi);--acc-lo:var(--teal-lo)}
.acc-trekkers{--acc:var(--violet);--acc-hi:var(--violet-hi);--acc-lo:var(--violet-lo)}

/* The anodised edge. One or two pixels, at the start of a thing. Never a
   field of colour - that is what makes it read as a finish rather than a
   brand splash. */
.edge-top{border-top:2px solid var(--acc)}
.edge-left{border-left:2px solid var(--acc)}

/* ==========================================================================
   Header
   ========================================================================== */

header.top{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,15,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge-d);color:var(--mist);
}
header.top .wrap{display:flex;align-items:center;gap:26px;height:62px}
.brand{
  font-family:var(--sans);font-weight:700;font-stretch:112%;
  letter-spacing:.26em;font-size:1.02rem;text-decoration:none;color:#F3F5F7;
  white-space:nowrap;
}
.brand span{color:var(--bronze)}
/* For a label a screen reader needs and the design does not. Clipped
   rather than `display:none`, which would take it out of the accessibility
   tree along with everything else. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{
  text-decoration:none;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--titanium);
  padding:8px 11px;border-radius:2px;white-space:nowrap;
}
nav.main a:hover{color:#F3F5F7;background:rgba(255,255,255,.05)}
nav.main a.on{color:#F3F5F7}
nav.main a.on::after{content:"";display:block;height:2px;background:var(--bronze);
  margin-top:6px;border-radius:2px}
nav.main a.soon::after{content:" SOON";font-size:.72em;color:var(--dim);
  letter-spacing:.1em}
/* The areas the shop is not leading with. Still in the nav, still one
   click, just not competing with the sport that pays for the stand. The
   demotion is weight and colour only - a link somebody cannot find is not
   a demoted link, it is a deleted one. */
nav.main a.quiet{color:var(--dim);font-size:.64rem}
nav.main a.quiet:hover{color:var(--titanium)}
/* The rule before the first quiet one. `:first-of-type` would be wrong
   here - it means the first <a> among ITS siblings, which is Routes, so it
   would never match. This matches the first quiet link that follows a loud
   one, which is the seam we actually want to draw. */
nav.main a:not(.quiet) + a.quiet{margin-left:10px;
  border-left:1px solid var(--edge-d2);padding-left:15px}
@media (max-width:900px){
  nav.main a.quiet{font-size:.74rem}
  nav.main a:not(.quiet) + a.quiet{margin-left:0;border-left:0;
    padding-left:12px;border-top:1px solid var(--edge-d2)}
}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--edge-d2);
  color:var(--mist);border-radius:2px;padding:7px 11px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.14em;cursor:pointer;text-transform:uppercase}
@media (max-width:900px){
  .navtoggle{display:block}
  nav.main{
    display:none;position:absolute;top:62px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--graphite);border-bottom:1px solid var(--edge-d);padding:8px;
  }
  nav.main.open{display:flex}
  nav.main a{padding:13px 12px;font-size:.78rem}
  nav.main a.on::after{display:none}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500;
  padding:14px 24px;border-radius:2px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;background:var(--acc);color:#0B0D0F;
  transition:filter .15s ease,background .15s ease,color .15s ease;
  position:relative;overflow:hidden;
}
.btn:hover{filter:brightness(1.09);color:#0B0D0F}
/* The oil-slick sheen. Exactly two places on the whole site: here, and the
   hero edge. It is worth nothing if it is everywhere. */
.btn::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.34) 46%,
    rgba(180,168,228,.28) 58%,transparent 78%);
}
.btn:hover::after{opacity:1}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);filter:none}
.btn.ghost::after{display:none}
.btn.quiet{background:transparent;color:var(--muted);border-color:transparent;
  padding-left:0;padding-right:0}
.btn.quiet:hover{color:var(--acc)}
.btn.quiet::after{display:none}
.btn.wide{width:100%}
.btn.sm{padding:9px 15px;font-size:.64rem}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   Panels, tiles, specs
   ========================================================================== */

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:26px;
}
.band:not(.light) .panel{
  /* a shallow gradient so a surface reads as brushed rather than flat */
  background:linear-gradient(163deg,#1A1E22,#131619);
}
.panel h3{margin-bottom:.5em}
.panel p{color:var(--muted);font-size:.95rem}
.panel p:last-child{margin-bottom:0}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.split.top{align-items:start}
.split.wide-left{grid-template-columns:1.25fr .75fr}
.split.flip > *:first-child{order:2}
.split.flip > *:last-child{order:1}
@media (max-width:900px){
  .split.flip > *:first-child,.split.flip > *:last-child{order:0}
}
@media (max-width:900px){
  .split,.split.wide-left{grid-template-columns:1fr;gap:32px}
}

/* the spec strip - mono figures with a hairline between, used everywhere a
   set of numbers has to feel measured rather than marketed */
.specs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.specs > div{padding:15px 26px 15px 0;margin-right:26px;
  border-right:1px solid var(--line)}
.specs > div:last-child{border-right:0;margin-right:0}
.specs b{display:block;font-family:var(--mono);font-weight:500;
  font-size:1.32rem;color:var(--fg);line-height:1.15;font-variant-numeric:tabular-nums}
.specs span{display:block;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:6px}
@media (max-width:600px){
  .specs > div{padding:12px 16px 12px 0;margin-right:16px}
  .specs b{font-size:1.1rem}
}

.tag{
  display:inline-block;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:2px;
  border:1px solid var(--line-2);color:var(--muted);background:transparent;
}
.tag.acc{color:var(--acc);border-color:var(--acc-lo)}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--warn);border-color:var(--warn)}
.tag.bad{color:var(--bad);border-color:var(--bad)}

/* ---- product tile ------------------------------------------------------ */
.tile{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;transition:border-color .16s ease,transform .16s ease;
}
.tile:hover{border-color:var(--acc);transform:translateY(-2px);color:inherit}
.tile .shot{aspect-ratio:4/5;background:var(--well);position:relative;
  border-bottom:1px solid var(--line);overflow:hidden}
.tile .shot img{width:100%;height:100%;object-fit:cover;display:block}
.tile .shot img.fit{object-fit:contain;padding:9%}
.tile .body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:3px;flex:1}
.tile .code{margin-bottom:3px}
.tile h3{font-size:1rem}
.tile .foot{margin-top:auto;padding-top:11px;display:flex;justify-content:space-between;
  align-items:baseline;gap:10px}
.tile .price{font-family:var(--mono);color:var(--fg);font-weight:500;
  font-size:.92rem}
.tile .dist{font-family:var(--mono);font-size:.72rem;color:var(--faint)}

/* ==========================================================================
   Asset slots
   ========================================================================== */

.slot{
  position:relative;background:var(--well);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;display:block;
}
.slot > img,.slot > video{width:100%;height:100%;object-fit:cover;display:block}
.slot.fit > img{object-fit:contain;padding:6%}
.slot.empty{
  border-style:dashed;border-color:var(--line-2);
  background:repeating-linear-gradient(135deg,
    var(--well),var(--well) 10px,var(--panel-2) 10px,var(--panel-2) 20px);
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.slot .note{max-width:38ch}
.slot .note .k{font-family:var(--mono);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.slot .note h4{margin:9px 0 6px;color:var(--fg)}
.slot .note p{font-size:.85rem;color:var(--muted);margin:0 0 11px}
.slot .note .p{font-family:var(--mono);font-size:.7rem;
  color:var(--faint);word-break:break-all}

/* A thumbnail box, on any page. This rule used to live only under
   `body.admin`, so on the design page the box had a width from an inline
   style and the image inside it had nothing at all - and an 800px render of
   a disc drew at 800px, straight across the copy beside it. A box that
   sizes its own contents is the whole job of a thumbnail. */
.thumb{
  background:var(--panel-2); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; display:block; flex:0 0 auto;
}
.thumb > img{width:100%; height:100%; object-fit:contain; display:block}
.thumb.photo > img{object-fit:cover}

/* ==========================================================================
   Forms
   ========================================================================== */

form.panel{padding:28px}
fieldset{border:0;padding:0;margin:0 0 26px}
fieldset:last-of-type{margin-bottom:18px}
legend{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);padding:0 0 14px}
label{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
input[type=text],input[type=email],input[type=number],input[type=date],
input[type=password],input[type=file],select,textarea{
  width:100%;padding:12px 13px;font:inherit;font-size:.95rem;color:var(--fg);
  background:var(--bg);border:1px solid var(--line-2);border-radius:2px;
}
.band.light input,.band.light select,.band.light textarea{background:var(--card)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);
  outline-offset:-1px;border-color:var(--acc)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:17px}
.field .hint{font-size:.82rem;color:var(--faint);margin-top:6px;
  text-transform:none;letter-spacing:0;font-family:var(--sans)}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.row3{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr}
@media (max-width:640px){.row,.row3{grid-template-columns:1fr}}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.check input{width:auto;margin-top:4px}
.check label{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--fg);
  font-family:var(--sans);margin:0}
.check label .muted{color:var(--muted)}

/* ==========================================================================
   Tables, progress, misc
   ========================================================================== */

.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;
  background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:500;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--fg);font-weight:600}

.bar{height:5px;background:var(--line);border-radius:100px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;background:var(--acc);
  transition:width .4s ease}

.banner{font-size:.86rem;padding:10px 0;background:#2A2113;color:#E4C48C;
  border-bottom:1px solid #4A3A1E}
.banner.bad{background:#2E1714;color:#E8A395;border-color:#5A2C24}
.banner.ok{background:#15251C;color:#96D2AC;border-color:#28492F}
.banner .wrap{display:flex;gap:11px;align-items:baseline}
.banner b{font-family:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;font-size:.62rem;font-weight:500}

.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{counter-increment:step;padding:0 0 22px 50px;position:relative;
  color:var(--muted)}
.steps li::before{
  content:"0" counter(step);position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--acc);border:1px solid var(--acc-lo);border-radius:2px;
  padding:3px 7px;
}
.steps li b{display:block;color:var(--fg);margin-bottom:2px}

.placeholder{color:var(--faint);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:22px}

footer.bottom{background:#07090A;border-top:1px solid var(--edge-d);
  color:var(--titanium);padding:56px 0 76px;font-size:.9rem}
footer.bottom a{text-decoration:none;color:var(--titanium)}
footer.bottom a:hover{color:var(--bronze)}
footer.bottom .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media (max-width:800px){footer.bottom .cols{grid-template-columns:1fr 1fr}}
footer.bottom h4{color:#F3F5F7;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:14px;font-weight:500}
footer.bottom ul{list-style:none;margin:0;padding:0}
footer.bottom li{margin-bottom:8px}
footer.bottom .fine{margin-top:40px;padding-top:24px;border-top:1px solid var(--edge-d);
  color:var(--dim);font-size:.8rem;display:flex;gap:20px;flex-wrap:wrap}

/* ==========================================================================
   Admin — deliberately plainer than the shop
   ========================================================================== */

/* The admin screens predate the shop's rebuild and are deliberately plainer
   than it. Rather than restyle a working back office to match a storefront it
   is not part of, the tokens are simply provided at body level and the few
   class names it uses are mapped onto the new ones below. */
body.admin{
  background:var(--paper);color:var(--ink-2);
  --bg:var(--paper); --fg:var(--ink); --muted:var(--ink-2); --faint:var(--ink-3);
  --line:var(--edge-l); --line-2:var(--edge-l2); --panel:var(--card);
  --panel-2:var(--paper-2); --well:var(--paper-2);
  --acc:var(--bronze); --acc-hi:var(--bronze-hi); --acc-lo:var(--bronze-lo);
}
body.admin section{padding:34px 0;border-bottom:0}
body.admin section.tight{padding:26px 0}
body.admin h1,body.admin h2{font-stretch:100%}
body.admin .split{gap:34px;align-items:start}
body.admin .pane{background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:22px}
body.admin .pane + .pane{margin-top:16px}
body.admin .eyebrow{margin-bottom:.7em}
body.admin .muted{color:var(--ink-2)}
body.admin .proof{background:var(--paper-2);border:1px solid var(--line);
  border-radius:3px;display:grid;place-items:center;overflow:hidden}
body.admin .proof img{width:100%;height:100%;object-fit:contain}
body.admin .thumbs{display:flex;gap:10px;flex-wrap:wrap}
body.admin .thumb{width:74px;height:74px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;padding:0}
body.admin .thumb img{width:100%;height:100%;object-fit:contain}
body.admin .thumb.photo img{object-fit:cover}
body.admin .thumb.on{border-color:var(--bronze)}
body.admin .btn.primary{background:var(--bronze);border-color:var(--bronze);color:#0B0D0F}
body.admin .btn.small{padding:8px 13px;font-size:.62rem}
body.admin .tag.good{color:var(--ok);border-color:var(--ok)}
body.admin .tag.on{color:var(--bronze);border-color:var(--bronze)}
body.admin .grid.g2{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
body.admin .band{--bg:var(--paper);--fg:var(--ink);--muted:var(--ink-2);
  --faint:var(--ink-3);--line:var(--edge-l);--line-2:var(--edge-l2);
  --panel:var(--card);--panel-2:var(--paper-2);--well:var(--paper-2)}
body.admin .band .panel{background:var(--card)}
.admin-bar{background:var(--void);color:var(--mist);font-size:.8rem}
.admin-bar .wrap{display:flex;gap:18px;align-items:center;height:46px;flex-wrap:wrap}
.admin-bar a{color:#B4BBC1;text-decoration:none;font-family:var(--mono);
  letter-spacing:.13em;text-transform:uppercase;font-size:.64rem}
.admin-bar a:hover,.admin-bar a.on{color:#fff}
.admin-bar .sp{margin-left:auto}

/* ---- range inputs -------------------------------------------------------
   The Studio panel is forty of these, so leaving them at the browser default
   means the single most-used surface in the product is the one place that
   looks like nobody chose anything. Both engines need explicit rules: WebKit
   wants a track and a thumb, Firefox wants its own two. */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; background:transparent;
  margin:6px 0 2px; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; background:var(--line-2); border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  margin-top:-6.5px; border-radius:50%; background:var(--acc);
  border:2px solid var(--panel); box-shadow:0 0 0 1px var(--acc)}
input[type=range]::-moz-range-track{
  height:3px; background:var(--line-2); border-radius:2px}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--acc);
  border:2px solid var(--panel)}
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--acc-lo)}

/* ---- the Studio viewer --------------------------------------------------
   A fixed black stage, because a 3D scene that resizes when a new build
   lands makes the page jump under the cursor mid-drag. The near-black is
   ui/common.py's BG, so the web engine and the desktop tool are the same
   dark rather than two different ones. */
/* The controls take a fixed, readable column and the viewer takes the rest.
   Not two equal halves: scene_figure's camera is framed for a LANDSCAPE plot,
   and in a tall narrow one the disc fills the width and runs off the top and
   bottom. The layout is what keeps the model in frame - there is no zoom
   setting that fixes a portrait viewport. */
.studio-grid{display:grid; gap:32px; align-items:start}
@media (min-width:1000px){
  .studio-grid{grid-template-columns:minmax(300px,340px) minmax(0,1fr)}
}

/* ---- The workbench ----------------------------------------------------- */
/* A full-viewport, three-region app: a bar of facts across the top, the
   controls down the left, the model taking everything that is left. It does
   not scroll - the controls column scrolls inside itself and the model is
   pinned - because the whole point is that the object stays in front of you
   while you work on it. A page that scrolls the model off screen when you
   reach for the fortieth slider is a page that makes you choose between the
   control and the thing it controls. */
/* The token set lives on `.band`, and the workbench has no band wrapping it -
   it IS the surface. So it declares the dark set itself, with the same values
   `.band` uses, rather than inheriting nothing and rendering as unstyled text
   on white. */
body.workbench{
  --bg:var(--void); --fg:#F3F5F7; --muted:var(--titanium); --faint:var(--dim);
  --line:var(--edge-d); --line-2:var(--edge-d2); --panel:#15181B;
  --panel-2:#1B1F23; --well:#0E1114;
  height:100vh; height:100dvh; overflow:hidden;
  background:#1A1A1C; color:var(--muted);
}
.bench{display:flex; flex-direction:column; height:100%}

.benchbar{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:0 20px; min-height:58px; background:var(--panel-2);
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.benchbar .brand{font-size:.95rem; letter-spacing:.24em; text-decoration:none}
.benchbar .route{display:flex; flex-direction:column; gap:2px; min-width:0}
.benchbar .route b{font-size:.95rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:26ch}
.benchbar .metrics{display:flex; gap:26px; margin-left:auto; flex-wrap:wrap}
.benchbar .metrics div{display:flex; flex-direction:column; gap:2px}
.benchbar .metrics span{font-family:var(--mono); font-size:.55rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.benchbar .metrics b{font-size:.86rem; white-space:nowrap}

.gpxbtn{cursor:pointer; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  border:1px dashed var(--line-2); border-radius:4px; padding:8px 12px}
.gpxbtn:hover{color:var(--fg); border-color:var(--acc)}

/* The days of a journey. A single-day route is one line and the button to
   add the next; a trek is the list of what it was made of. */
.days{padding:14px 18px 4px; border-bottom:1px solid var(--line)}
.days h4{margin:0 0 8px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.daylist{list-style:none; margin:0 0 10px; padding:0}
.daylist li{display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--line); font-size:.8rem}
.daylist li:last-child{border-bottom:0}
.daylist .n{flex:0 0 auto; width:18px; font-family:var(--mono);
  font-size:.62rem; color:var(--faint)}
.daylist .nm{flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.daylist .km{flex:0 0 auto; font-family:var(--mono); font-size:.66rem;
  color:var(--faint)}
.daylist .x{flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:var(--faint); font-size:1rem; line-height:1; padding:0 2px}
.daylist .x:hover{color:var(--acc)}

.demobar{
  flex:0 0 auto; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  padding:11px 20px; background:#3A2A0C; border-bottom:1px solid #6A4E12;
  color:#F0DCA8; font-size:.8rem; line-height:1.5;
}
.demobar > b{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:#FFD37A; white-space:nowrap}
.demobar code{font-family:var(--mono); font-size:.76rem; color:#FFD37A}

.benchbody{display:flex; flex:1 1 auto; min-height:0}

.controls{
  flex:0 0 336px; max-width:336px; overflow-y:auto; overflow-x:hidden;
  border-right:1px solid var(--line); background:var(--panel);
  padding-bottom:20px;
}
.controls .field{padding:0 18px}
.cgroup{border-top:1px solid var(--line); margin-top:14px; padding-top:2px}
.cgroup summary{
  cursor:pointer; padding:12px 18px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  list-style:none;
}
.cgroup summary::-webkit-details-marker{display:none}
.cgroup summary::before{content:"+ "; color:var(--acc)}
.cgroup[open] summary::before{content:"\2212 "}
.cgroup summary:hover{color:var(--fg)}
.cgroup .lock{color:var(--acc); letter-spacing:.14em}
.cgroup .lockbox{padding:0 18px 14px}

.stagewrap{flex:1 1 auto; display:flex; flex-direction:column; min-width:0}

/* The stage is whatever is left after the tabs and the footer, not a fixed
   aspect box. scene_figure's camera is framed for a landscape plot, and the
   window is landscape, so this is the shape it was drawn for. */
#stage{
  position:relative; flex:1 1 auto; min-height:0;
  background:#1A1A1C; border-bottom:1px solid var(--line);
}
.benchfoot{
  flex:0 0 auto; padding:10px 20px; background:var(--panel-2);
  border-top:1px solid var(--line); display:flex; align-items:center;
  gap:20px; flex-wrap:wrap; min-height:44px; color:var(--faint);
}
.benchfoot .warnline{margin:0; color:var(--warn)}

.viewtabs .live{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); padding:0 6px 0 18px;
}
.viewtabs .btn.sm{margin:7px 6px 7px 0}
.viewtabs .btn[disabled]{opacity:.45; pointer-events:none}

#busy{
  position:absolute; left:16px; bottom:14px; display:flex; align-items:center;
  gap:10px; background:rgba(11,13,15,.82); border:1px solid var(--line-2);
  border-radius:5px; padding:9px 14px; color:var(--muted); font-size:.72rem;
}
.spin{
  width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--line-2); border-top-color:var(--acc);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

@media (max-width:900px){
  body.workbench{height:auto; overflow:auto}
  .bench{height:auto}
  .benchbody{flex-direction:column}
  .controls{flex:1 1 auto; max-width:none; border-right:0;
    border-bottom:1px solid var(--line); overflow:visible}
  #stage{height:60vh; flex:0 0 auto}
  .benchbar .metrics{gap:16px; width:100%; margin-left:0}
}
#viewer{position:absolute; inset:0}
#placeholder{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#6B7075; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; pointer-events:none;
}
.viewtabs{display:flex; gap:0; border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.viewtabs button{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--faint); font-family:var(--mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; padding:13px 18px;
  cursor:pointer;
}
.viewtabs button.on{color:var(--fg); border-bottom-color:var(--acc)}
.viewtabs button:hover{color:var(--fg)}
@media (max-width:760px){ #stage{height:52vh} }

/* ---- Detail and the slot legend ---------------------------------------- */
#detailpane{position:absolute; inset:0; overflow:auto; padding:22px 24px;
  background:var(--panel); color:var(--muted)}
#detailpane h4{color:var(--fg); margin:20px 0 8px; font-size:.9rem}
#detailpane h4:first-child{margin-top:0}
#detailpane table{width:100%; border-collapse:collapse; font-size:.8rem;
  min-width:0; font-family:var(--mono)}
#detailpane td,#detailpane th{padding:6px 10px; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top}
#detailpane th{color:var(--faint); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500}
.slotrow{display:flex; flex-wrap:wrap; gap:14px; padding:16px 22px;
  border-bottom:1px solid var(--line)}
.slotchip{display:flex; align-items:center; gap:8px; font-size:.76rem}
.slotchip b{color:var(--fg); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; white-space:nowrap}
.slotchip span:not(.sw){color:var(--faint); font-size:.74rem}
.slotchip .sw{width:16px; height:16px; border-radius:3px;
  border:1px solid var(--line-2); flex:0 0 auto}

/* ==========================================================================
   The Studio tabs, and the tutorial
   --------------------------------------------------------------------------
   The Studio is four pages that belong together - the engine, the tutorial,
   the plan and the account - and until now the only way between them was a
   single "Your account" button in the corner. A strip of tabs is what a
   person expects of an application inside a website, and it is the thing
   that makes the tutorial findable at the moment somebody needs it.
   ========================================================================== */

.studionav{
  display:flex; flex-wrap:wrap; gap:2px; margin:0 0 30px;
  border-bottom:1px solid var(--line);
}
.studionav a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--faint);
  padding:11px 16px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.studionav a:hover{color:var(--fg)}
.studionav a.on{color:var(--fg); border-bottom-color:var(--acc)}

/* ---- the labelled drawings ---------------------------------------------
   A wireframe of the actual screen with numbered pins in it, drawn rather
   than screenshotted: a screenshot of a interface goes stale the first time
   a button moves, and it cannot be read by anything. This is text and
   rectangles, it restyles itself with the rest of the page, and the numbers
   in it are the numbers in the list underneath. */
.wire{
  width:100%; height:auto; display:block; margin:0;
  background:var(--well); border:1px solid var(--line); border-radius:4px;
}
.wire text{font-family:var(--sans); font-size:11px; fill:var(--muted)}
.wire text.t-strong{fill:var(--fg); font-weight:600}
.wire text.t-mono{font-family:var(--mono); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; fill:var(--faint)}
.wire .pane{fill:var(--panel); stroke:var(--line)}
.wire .well{fill:var(--well); stroke:var(--line)}
.wire .ctl{fill:var(--panel-2); stroke:var(--line-2)}
.wire .acc{fill:var(--acc)}
.wire .accline{stroke:var(--acc); fill:none}
.wire .rule{stroke:var(--line); fill:none}
.wire .pin circle{fill:var(--acc)}
.wire .pin text{fill:#0B0D0F; font-weight:700; font-size:11px;
  font-family:var(--mono)}

figure.shot{margin:0 0 8px}
figure.shot figcaption{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:10px;
}

/* A numbered key under a drawing. The number is the pin in the picture, so
   it is set in the same mono at the same weight and cannot drift. */
ol.pins{list-style:none; padding:0; margin:18px 0 0; counter-reset:pin}
ol.pins li{
  counter-increment:pin; position:relative; padding:0 0 16px 44px;
  color:var(--muted); font-size:.95rem;
}
ol.pins li::before{
  content:counter(pin); position:absolute; left:0; top:1px;
  width:26px; height:26px; border-radius:50%;
  background:var(--acc); color:#0B0D0F;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
ol.pins li b{display:block; color:var(--fg); margin-bottom:2px}
ol.pins li code{font-size:.86em}

/* ---- the four types, side by side --------------------------------------- */
.typegrid{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){ .typegrid{grid-template-columns:1fr} }
.typecard{
  border:1px solid var(--line); border-left:2px solid var(--acc);
  background:var(--panel); padding:22px 24px;
}
.typecard h3{margin:.35em 0 .5em; font-size:1.15rem; color:var(--fg)}
.typecard p{margin:0 0 .8em; font-size:.93rem}
.typecard p:last-child{margin-bottom:0}
.typecard dl{margin:14px 0 0; display:grid; grid-template-columns:auto 1fr;
  gap:6px 14px; font-size:.86rem}
.typecard dt{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); padding-top:3px}
.typecard dd{margin:0; color:var(--muted)}

/* ---- the button reference, and any other list of pairs -----------------
   A definition list rather than a table: it is one column of pairs, and a
   table of two columns collapses into an unreadable stack on a phone.
   `dl.pairs` is the same thing under a name that is not about buttons -
   the privacy page uses it for "what we collect, and why". */
dl.buttons, dl.pairs{margin:0; display:grid; grid-template-columns:minmax(150px,220px) 1fr;
  gap:0; border-top:1px solid var(--line)}
dl.buttons dt, dl.pairs dt{
  padding:14px 16px 14px 0; border-bottom:1px solid var(--line);
  color:var(--fg); font-weight:600; font-size:.92rem;
}
dl.buttons dd, dl.pairs dd{
  margin:0; padding:14px 0; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:.93rem;
}
dl.buttons dt .where{
  display:block; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:400; margin-top:3px;
}
@media (max-width:700px){
  dl.buttons, dl.pairs{grid-template-columns:1fr}
  dl.buttons dt, dl.pairs dt{padding-bottom:2px; border-bottom:0}
  dl.buttons dd, dl.pairs dd{padding-top:4px}
}

/* ==========================================================================
   The guided tour
   --------------------------------------------------------------------------
   A scrim with a hole in it, a ring round the control being described, and a
   note beside it. The note is the one thing on this site that is white on
   both bands: it is not part of the page, it is somebody leaning over and
   pointing at it, and it has to read as a different register from whatever
   is underneath.
   ========================================================================== */

.tourveil{
  position:fixed; z-index:9000; display:none;
  background:rgba(6,8,10,.84);
}
.tourring{
  position:fixed; z-index:9001; display:none; pointer-events:none;
  border:2px solid var(--bronze-hi); border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(217,160,91,.35);
}
.tourbox{
  position:fixed; z-index:9002; display:none;
  width:min(340px, calc(100vw - 24px));
  background:#FFFFFF; color:#15181B;
  border-radius:8px; padding:22px 24px 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  font-family:var(--sans);
}
.tourbox h4{
  margin:0 0 8px; padding-right:24px;
  font-size:1.12rem; font-weight:700; color:#0B0D0F; line-height:1.25;
}
.tourbox p{
  margin:0 0 16px; font-size:.95rem; line-height:1.5; color:#33383D;
}
.tourfoot{display:flex; align-items:center; gap:12px}
.tourcount{
  font-family:var(--mono); font-size:.72rem; color:#6B7177;
  font-variant-numeric:tabular-nums;
}
.tourbtns{margin-left:auto; display:flex; gap:8px}
.tourbox button{
  font-family:var(--sans); font-size:.86rem; cursor:pointer;
  border:1px solid #C9CDD2; background:#fff; color:#15181B;
  border-radius:4px; padding:6px 14px;
}
.tourbox button:hover{background:#F1F3F5}
.tourbox button:disabled{color:#AAB0B6; cursor:default; background:#fff}
.tourbox .tournext{border-color:#15181B; background:#15181B; color:#fff}
.tourbox .tournext:hover{background:#000}
.tourbox .tourx{
  position:absolute; top:10px; right:10px; border:0; background:none;
  font-size:1.2rem; line-height:1; color:#6B7177; padding:4px 8px;
}
.tourbox .tourx:hover{background:none; color:#0B0D0F}
.tourcaret{
  position:absolute; width:14px; height:14px; background:#fff;
  transform:rotate(45deg); pointer-events:none;
}
body.touring{overflow:hidden}

/* The two starters: a button on the tutorial page, and the pill that
   replays it from the workbench's top bar. */
.tourstart{
  display:inline-flex; align-items:center; gap:10px;
}
.tourstart::before{
  content:"1"; width:22px; height:22px; border-radius:50%;
  background:currentColor; color:var(--bg,#0B0D0F);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ---- the hotspots over the drawings -------------------------------------
   The tutorial page has no workbench on it, so the tour is pinned to the
   drawing of one instead: an invisible box over each numbered pin, at the
   same fraction of the frame the pin sits at, so it tracks the drawing when
   the drawing scales. One list of steps, two sets of anchors. */
.shotframe{position:relative}
.hot{position:absolute; display:block; pointer-events:none}

/* ---- the AMS tab -------------------------------------------------------
   The legend became the control. A row per filament the model needs, and
   the swatch on it is a colour input - because the question somebody has
   in front of an AMS is not "what colour is the water" but "which of the
   four spools I own is going in slot three", and the only honest way to
   answer it is to let them say. */
.ams{display:block}
.amshead{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:12px 22px 0;
}
.amshead b{color:var(--fg); font-size:.86rem}
.amshead .hint{margin:0}
.amshead .btn{margin-left:auto}
.slotchip{cursor:pointer}
.slotchip:hover b{color:var(--acc)}
/* A colour input, dressed as the swatch it replaced. Both vendor rules are
   needed: WebKit paints the colour in a child pseudo-element and Firefox
   paints it on the control itself. */
.slotchip input.sw{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:0; margin:0; cursor:pointer; background:none;
}
.slotchip input.sw::-webkit-color-swatch-wrapper{padding:0}
.slotchip input.sw::-webkit-color-swatch{border:0; border-radius:2px}
.slotchip input.sw::-moz-color-swatch{border:0; border-radius:2px}
.slotchip.custom b::after{
  content:"\00b7 yours"; color:var(--acc); margin-left:6px;
  letter-spacing:.08em;
}

/* The slot preset, on the tab it decides the shape of. */
.amspreset{display:flex; align-items:center; gap:10px}
.amspreset > span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
.amspreset select{
  width:auto; min-width:190px; padding:5px 10px; font-size:.82rem;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--fg);
  border-radius:3px;
}
.amsnote{margin:6px 22px 0; max-width:70ch}

/* The filaments toggle, in the tab bar. */
.viewtabs .amstoggle{
  margin-left:auto; appearance:none; background:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:3px;
  color:var(--faint); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; display:flex; align-items:center; gap:9px;
}
.viewtabs .amstoggle:hover{color:var(--fg)}
.viewtabs .amstoggle.on{color:var(--fg); border-color:var(--acc-lo)}
.viewtabs .amstoggle ~ .live{margin-left:0}
.amstoggle .dots{display:flex; gap:3px}
.amstoggle .dots i{
  width:9px; height:9px; border-radius:2px; display:block;
  border:1px solid rgba(0,0,0,.35);
}

/* ---- Type 05: the map you draw on -------------------------------------
   The pane fills the stage like the 3D viewer does, and every piece of
   furniture floats over the canvas rather than taking height from it - a
   map with a toolbar above it is a map that is shorter than the thing it
   is competing with, and this one has to feel like the whole screen. */
.mapdraw{position:absolute;inset:0;overflow:hidden;background:#14171c}
.mapdraw .mdcanvas{position:absolute;inset:0;display:block;touch-action:none}
.mapdraw .mdtools{
  position:absolute;left:14px;top:62px;display:flex;flex-direction:column;
  gap:8px;z-index:2;max-width:calc(100% - 28px)}
/* ---- finding a place ---- */
.mapdraw .mdfind{position:absolute;left:14px;top:14px;z-index:4;width:min(360px,calc(100% - 28px))}
.mapdraw .mdq{
  width:100%;box-sizing:border-box;font:400 .82rem/1.2 inherit;color:#fff;
  background:rgba(16,19,24,.94);border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:10px 13px;backdrop-filter:blur(6px)}
.mapdraw .mdq::placeholder{color:rgba(255,255,255,.40)}
.mapdraw .mdq:focus{outline:0;border-color:var(--acc,#e0601a)}
.mapdraw .mdhits{
  margin-top:6px;max-height:min(46vh,340px);overflow:auto;border-radius:9px;
  background:rgba(16,19,24,.97);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.42)}
.mapdraw .mdhit{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:9px 13px;background:transparent;border:0;cursor:pointer;color:#fff;
  font:400 .8rem/1.3 inherit}
.mapdraw .mdhit+.mdhit{border-top:1px solid rgba(255,255,255,.07)}
.mapdraw .mdhit:hover{background:rgba(255,255,255,.07)}
.mapdraw .mdhit b{font-weight:600;white-space:nowrap}
.mapdraw .mdhit span{
  flex:1;color:rgba(255,255,255,.52);font-size:.74rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mapdraw .mdhit i{
  font:600 .56rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.34);font-style:normal}
.mapdraw .mdnone{padding:11px 13px;font-size:.76rem;color:rgba(255,255,255,.55)}
.mapdraw .mdgroup{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  background:rgba(16,19,24,.92);border:1px solid rgba(255,255,255,.10);
  border-radius:9px;padding:5px 8px;backdrop-filter:blur(6px)}
.mapdraw .mdlabel{
  font:600 .58rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.40);padding:0 6px 0 2px}
.mapdraw .mdgroup button{
  font:500 .74rem/1 inherit;color:rgba(255,255,255,.78);cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:6px;
  padding:6px 10px}
.mapdraw .mdgroup button:hover{
  background:rgba(255,255,255,.07);color:#fff}
.mapdraw .mdgroup button.on{
  background:var(--acc,#e0601a);border-color:var(--acc,#e0601a);color:#fff}
.mapdraw .mdzoom{
  position:absolute;left:14px;bottom:52px;display:flex;flex-direction:column;
  z-index:2;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10)}
.mapdraw .mdzoom button{
  width:34px;height:32px;font-size:1.05rem;line-height:1;cursor:pointer;
  background:rgba(16,19,24,.92);color:#fff;border:0}
.mapdraw .mdzoom button+button{border-top:1px solid rgba(255,255,255,.10)}
.mapdraw .mdzoom button:hover{background:rgba(40,46,56,.95)}
.mapdraw .mdreadout{
  position:absolute;right:14px;bottom:14px;z-index:2;display:flex;
  align-items:center;gap:16px;
  background:rgba(16,19,24,.92);border:1px solid rgba(255,255,255,.10);
  border-radius:8px;padding:7px 12px;
  font:500 .72rem/1.2 var(--mono,ui-monospace,monospace);
  color:rgba(255,255,255,.82)}
.mapdraw .mdscale{display:flex;align-items:center;gap:7px}
.mapdraw .mdscale i{
  display:block;height:5px;border:1px solid rgba(255,255,255,.55);
  border-top:0;min-width:20px}
.mapdraw .mdcredit{
  position:absolute;left:58px;bottom:16px;z-index:2;max-width:min(46ch,48%);
  font:400 .66rem/1.4 inherit;color:rgba(255,255,255,.40);
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
@media (max-width:760px){
  .mapdraw .mdlabel{display:none}
  .mapdraw .mdgroup button{padding:6px 8px;font-size:.7rem}
  .mapdraw .mdcredit{display:none}
}

/* The draw-a-route sheet on the upload page. Full screen, because drawing a
   marathon in a 300px box is not drawing it. */
.drawalt{margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line,rgba(0,0,0,.10))}
.drawalt>span{display:block;margin-bottom:10px;
  font:600 .62rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint,#888)}
#drawwrap{position:fixed;inset:0;z-index:80;background:rgba(8,10,13,.72)}
#drawwrap .drawsheet{position:absolute;inset:3vh 3vw;display:flex;
  flex-direction:column;border-radius:12px;overflow:hidden;
  background:#14171c;box-shadow:0 24px 60px rgba(0,0,0,.45)}
#drawwrap .drawhead{display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.10);color:#fff}
#drawwrap .drawhead .hint{flex:1;color:rgba(255,255,255,.55)}
#drawwrap #drawmap{position:relative;flex:1;min-height:0}