/* Shot Vectors — the project's only stylesheet.
   Every colour, type stack and shared component lives here.

   NOT covered: design/*.dc.html. Those artboards render in sandboxed iframes with
   no network egress and must carry literal inline values so they paint while
   streaming. ELEMENTS.md is what keeps them from drifting from these tokens. */

:root{
  /* ground + chrome */
  --bg:#0a0b0c; --panel:#121417; --sunk:#0e1114; --raise:#21252a; --hover:#15181c;
  --line:#262b31; --line2:#333940; --rule:#171a1e;
  /* ink */
  --txt:#e6e4df; --txt2:#9ba1a8; --txt3:#646a71; --txt4:#4b5158;
  /* state */
  --amber:#e3a53c; --teal:#34c39c; --red:#e5544b; --blue:#5b9dd9;
  --amber-dim:#8a7343; --amber-well:#15120c; --amber-edge:#4a3c24;
  --red-well:#1a1012; --red-edge:#4a2529; --blocked:#7a2f2a;
  /* playfield illustration */
  --icon-dim:#3f4449;
  --txt-soft:#c2c6ca;   /* unselected row name — between --txt and --txt2 */
  --post:#2b3138; --post-edge:#5b6570;   /* post bodies in the aperture diagram */
  --pf-wood:#15181b; --pf-edge:#3a4148; --ghost:#767d85;
  /* a chrome ball, lit from the backbox: highlight, sheen, body, shadowed rim */
  --ball-hi:#eef1f4; --ball-mid:#a8b0b8; --ball:#4b5158; --ball-lo:#1b1f23;
  /* type */
  --sans:'IBM Plex Sans','Helvetica Neue',Helvetica,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* The UA rule is [hidden]{display:none} at the lowest specificity, so ANY author rule
   with a display (e.g. #stale{display:flex}) silently defeats el.hidden = true.
   That shipped once as "the banner never goes away". */
[hidden]{display:none !important}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans)}
button,input,select{font-family:inherit;color:inherit}
a{color:var(--amber);text-decoration:none}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#2a2f35;border-radius:4px}

/* ---- shared chrome ---- */
.mark{display:flex;align-items:center;gap:9px}
.mark span{font-size:11px;font-weight:600;letter-spacing:.17em}
.vr{width:1px;height:22px;background:var(--line)}
.grow{flex:1}
.lab{font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--txt3)}
.row{display:flex;align-items:center;gap:8px}
.mono{font-family:var(--mono)}

.btn{background:var(--raise);border:1px solid var(--line2);border-radius:3px;
  padding:6px 13px;font-size:11.5px;font-weight:500;cursor:pointer}
.btn.pri{background:var(--amber);border-color:var(--amber);color:var(--amber-well);font-weight:600}
.btn:disabled{opacity:.4;cursor:default}
.ghost{background:none;border:1px solid var(--line2);border-radius:3px;
  padding:5px 9px;font-size:10.5px;color:var(--txt2);cursor:pointer}
.ghost:hover{border-color:var(--amber);color:var(--amber)}
.chip{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--txt2);
  background:var(--hover);border:1px solid var(--line);border-radius:2px;padding:3px 7px;cursor:pointer}
.chip:hover{border-color:var(--amber);color:var(--amber)}

.fld{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.fld>span{font-size:9px;letter-spacing:.1em;color:var(--txt3)}
.fld input,.fld select{background:var(--sunk);border:1px solid var(--line2);border-radius:3px;
  padding:6px 8px;font-family:var(--mono);font-size:12px;width:100%;outline:none}
.fld input:focus,.fld select:focus{border-color:var(--amber)}

.kv{display:flex;align-items:baseline;font-family:var(--mono);font-size:11px}
.kv b{color:var(--txt3);flex:1;font-weight:400}
.kv u{text-decoration:none;color:var(--txt)}
.kv i{color:var(--txt4);font-style:normal;margin-left:4px}

/* the amber measurement well — the one thing the eye should land on */
.hero{background:var(--amber-well);border:1px solid var(--amber-edge);border-radius:3px;padding:10px 12px}
.hero .big{font-family:var(--mono);font-size:32px;font-weight:500;color:var(--amber);line-height:1}
.hero .cap{font-size:9.5px;font-weight:600;letter-spacing:.13em;color:var(--amber-dim);margin-top:5px}
.warn{background:var(--red-well);border:1px solid var(--red-edge);color:var(--red);
  border-radius:3px;padding:8px 10px;font-size:11px;line-height:1.5}

/* ================= annotator (/table) ================= */
body.annotator{height:100%;overflow:hidden}
html:has(body.annotator){height:100%}
#app{display:flex;flex-direction:column;height:100vh}
#app>header{flex:0 0 48px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 14px;gap:14px}
.modes{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.modes button{background:none;border:0;padding:6px 13px;font-size:11.5px;color:var(--txt3);
  cursor:pointer;display:flex;align-items:center;gap:7px}
.modes button .n{font-family:var(--mono);font-size:10px;color:var(--txt4)}
.modes button.on{background:var(--raise);color:var(--amber)}
.modes button.on .n{color:var(--amber)}
.modes button.done{color:#5c6b68}

main{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;overflow:hidden;background-color:var(--bg);
  background-image:linear-gradient(#131619 1px,transparent 1px),linear-gradient(90deg,#131619 1px,transparent 1px);
  background-size:26px 26px}
/* a canvas is a replaced element: inset:0 alone will NOT stretch it, so set both */
#cv{position:absolute;top:0;left:0;width:100%;height:100%;display:block;cursor:crosshair}
#stale{position:absolute;left:14px;right:14px;top:14px;display:flex;align-items:flex-start;
  gap:9px;background:var(--amber-well);border:1px solid var(--amber-edge);border-radius:4px;
  padding:10px 12px;color:var(--amber-dim);font-size:11.5px;line-height:1.5;z-index:5}
#stale b{color:var(--amber);font-weight:600}
#stale span{flex:1}
#staleGo{flex:0 0 auto;background:none;border:1px solid var(--amber-edge);border-radius:3px;
  padding:5px 10px;font-size:11px;color:var(--amber);cursor:pointer;white-space:nowrap}
#staleGo:hover{background:rgba(227,165,60,.12)}
#staleX{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--amber-dim);border-radius:3px}
#staleX:hover{color:var(--amber);background:rgba(227,165,60,.12)}
#hint{position:absolute;left:14px;bottom:14px;background:var(--sunk);border:1px solid var(--line);
  border-radius:3px;padding:8px 11px;font-size:11px;color:var(--txt2);max-width:420px;
  line-height:1.5;pointer-events:none}
#hint b{color:var(--amber);font-weight:500}
#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px}
#empty p{margin:0;font-size:12.5px;color:var(--txt3)}

aside{flex:0 0 348px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.sec{border-bottom:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
#shots{flex:1;min-height:60px}
.shot{display:flex;align-items:center;gap:9px;padding:7px 14px;border-bottom:1px solid var(--rule);cursor:pointer}
.shot:hover{background:var(--hover)}
.shot.on{background:#191c20}
.shot .bar{width:3px;height:22px;border-radius:2px;flex:0 0 3px}
.delrow{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--txt4);border-radius:3px}
.delrow:hover:not(:disabled){color:var(--red);background:var(--red-well)}
/* Inert until the row is the one being edited, so a stray click cannot destroy a shot.
   pointer-events:none lets the click fall through and SELECT the row instead of hitting
   a dead zone — one click to select, a second to delete. */
.delrow:disabled{opacity:.22;cursor:default;pointer-events:none}
.shot .nm{flex:1;min-width:0}
.shot .nm div:first-child{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .nm div:last-child{font-size:9px;letter-spacing:.07em;color:var(--txt4)}
.shot .tw{font-family:var(--mono);font-size:13px;font-weight:500}
/* the playfield picker inside a flipper row — same well as a .fld select, row height */
.shot .rowsel{background:var(--sunk);border:1px solid var(--line2);border-radius:3px;
  padding:3px 4px;font-family:var(--mono);font-size:10px;outline:none;color:var(--txt2);
  max-width:124px}
.shot .rowsel:focus{border-color:var(--amber)}
.shot .rowfrom{font-family:var(--mono);font-size:10px;color:var(--txt2);white-space:nowrap}

#app>footer{flex:0 0 30px;background:var(--panel);border-top:1px solid var(--line);
  display:flex;align-items:center;padding:0 14px;gap:20px;
  font-family:var(--mono);font-size:10px;color:var(--txt3)}

/* ================= player view (/) ================= */
body.player{margin:0;height:100dvh;overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#player{display:flex;flex-direction:column;height:100%;position:relative}

.pv-head{flex:0 0 56px;display:flex;align-items:center;gap:4px;
  padding:0 6px 0 4px;border-bottom:1px solid var(--line)}
.pv-head .ttl{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-head .ttl b{font-size:16px;font-weight:600;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-head .ttl span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--txt3);line-height:1}
.tap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;flex:0 0 44px}
.pv-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pv-lab{font-size:9px;font-weight:600;letter-spacing:.13em;color:var(--txt3)}
.pv-fold{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:2px 16px 4px;background:none;border:0;
  color:inherit;text-align:left;cursor:pointer}
.pv-fold .pv-lab{flex:1}
.pv-fold .n{font-family:var(--mono);font-size:9.5px;color:var(--txt4)}
.pv-fold svg{transform:rotate(90deg);transition:transform .15s}
.pv-fold.shut svg{transform:none}

/* search */
.pv-search{padding:14px 16px 12px}
.pv-search div{height:48px;background:var(--sunk);border:1px solid var(--line2);
  border-radius:4px;display:flex;align-items:center;gap:10px;padding:0 13px}
.pv-search input{flex:1;background:none;border:0;outline:none;font-size:15px;font-family:var(--sans)}
.pv-search input::placeholder{color:var(--txt4)}

/* list rows */
.pv-row{display:flex;align-items:center;gap:13px;min-height:66px;padding:0 16px;
  border-bottom:1px solid var(--rule);cursor:pointer;background:none;border-left:0;
  border-right:0;border-top:0;width:100%;text-align:left;color:inherit}
.pv-row:active{background:var(--hover)}
.pv-row .nm{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pv-row .nm b{font-size:15.5px;font-weight:400}
.pv-row .nm span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--txt4)}
.pv-row .ms{font-family:var(--mono);font-size:21px;font-weight:500}
.pv-row .bar{width:4px;height:26px;border-radius:2px;flex:0 0 4px}

/* machine screen */
.pv-median{padding:12px 16px 13px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;gap:14px}
.pv-median .big{font-family:var(--mono);font-size:34px;font-weight:500;line-height:1}
.pv-stats{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:11px}
.pv-stats div{display:flex;gap:8px;justify-content:flex-end}
.pv-stats span:first-child{color:var(--txt3)}
.pv-stats span:last-of-type{width:38px;text-align:right}
.pv-stats em{font-style:normal;color:var(--txt4);width:20px;text-align:left;margin-left:6px}
.pv-map{padding:14px 16px 12px;display:flex;gap:16px;border-bottom:1px solid var(--line)}
.pv-map svg{flex:0 0 126px;width:126px;display:block}
.pv-sel{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.pv-sel .nm{font-size:16px;font-weight:500;line-height:1.2}
.pv-sel .sub{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--txt4)}
.pv-hero .n{font-family:var(--mono);font-size:27px;font-weight:500;color:var(--amber);line-height:1}
.pv-idx{display:flex;align-items:center;gap:8px}
.pv-idx .track{flex:1;height:5px;background:var(--rule);border-radius:3px;overflow:hidden;display:flex}
.pv-idx .fill{height:5px}
.pv-idx .v{font-family:var(--mono);font-size:12px}

/* shot detail */
.pv-big{margin:16px 16px 0;background:var(--amber-well);border:1px solid var(--amber-edge);
  border-radius:4px;padding:16px 17px}
.pv-big .n{font-family:var(--mono);font-size:52px;font-weight:500;color:var(--amber);
  line-height:1;letter-spacing:-.01em}
.pv-big .u{font-family:var(--mono);font-size:19px;color:var(--amber)}
.pv-big .cap{font-size:9.5px;font-weight:600;letter-spacing:.13em;color:var(--amber-dim);margin-top:8px}
.pv-ap{margin:14px 16px 0;background:var(--sunk);border:1px solid var(--line);
  border-radius:4px;overflow:hidden}
.pv-ap svg{width:100%;display:block}
.pv-deriv{padding:16px 16px 20px;display:flex;flex-direction:column;gap:9px}
.pv-deriv .r{display:flex;align-items:baseline;font-family:var(--mono);font-size:13px}
.pv-deriv .r b{color:var(--txt3);flex:1;font-weight:400}
.pv-deriv .r b i{font-size:10.5px;color:var(--icon-dim);font-style:normal}
.pv-deriv .r u{text-decoration:none}
.pv-deriv .r s{text-decoration:none;color:var(--txt4);margin-left:5px}

/* strategy */
.pv-grp{display:flex;align-items:center;gap:9px;padding:18px 16px 8px}
.pv-grp .dot{width:8px;height:8px;border-radius:2px}
.pv-grp b{font-size:11px;font-weight:600;letter-spacing:.12em;flex:1}
.pv-grp span{font-family:var(--mono);font-size:10px;color:var(--txt4)}

/* bottom bar */
.pv-bar{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.pv-bar button{flex:1;min-height:64px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.pv-bar span{font-size:10px;letter-spacing:.04em;color:var(--txt3)}
.pv-bar .on span{color:var(--amber)}

.pv-warnbar{display:flex;align-items:flex-start;gap:9px;padding:10px 16px;
  background:var(--amber-well);border-bottom:1px solid var(--amber-edge)}
.pv-warnbar span{font-size:11.5px;line-height:1.45;color:var(--amber-dim)}
.pv-warnbar b{color:var(--amber);font-weight:600}
.pv-refs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
.pv-ref{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
  background:var(--sunk);border:1px solid var(--line2);border-radius:4px;
  font-size:12.5px;color:var(--txt);text-decoration:none}
.pv-ref:active{border-color:var(--amber)}
.pv-ref i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--txt4)}
.pv-empty{padding:40px 24px;text-align:center;color:var(--txt3);font-size:13px;line-height:1.6}

/* The player view is phone-first; centre it in a phone-width column on anything wider. */
@media (min-width: 520px){
  body.player{background:#08090a}
  #player{max-width:430px;margin:0 auto;border-left:1px solid var(--line);
    border-right:1px solid var(--line);background:var(--bg)}
}

/* ---- full-screen shot editor (mobile) ---- */
.ed{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.ed-head{flex:0 0 56px;display:flex;align-items:center;gap:4px;padding:0 6px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.ed-head .t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:4px}
.ed-head .t b{font-size:15px;font-weight:600}
.ed-head .t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-head .t span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--txt3)}
.ed-file{display:flex;align-items:center;gap:0;min-width:0}
.ed-file select{max-width:112px;min-width:0;background:var(--sunk);border:1px solid var(--line2);border-radius:3px;
  padding:6px 4px 6px 8px;font-family:var(--mono);font-size:10px;color:var(--txt2);outline:none;
  text-overflow:ellipsis}
.ed-file .tap{width:36px}
.ed-file .tap:disabled{opacity:.35}
.ed-canvas{flex:1;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;
  background-color:var(--bg);
  background-image:linear-gradient(#131619 1px,transparent 1px),linear-gradient(90deg,#131619 1px,transparent 1px);
  background-size:26px 26px}
.ed-canvas canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.ed-tip{position:absolute;left:12px;right:12px;bottom:12px;background:var(--sunk);
  border:1px solid var(--line);border-radius:4px;padding:9px 6px 9px 11px;font-size:11.5px;
  line-height:1.45;color:var(--txt2);pointer-events:none;display:flex;align-items:flex-start;gap:8px}
.ed-tip span{flex:1}
.ed-tip b{color:var(--amber);font-weight:500}
/* the one part of the tip that takes a tap: pointer events come back on here only */
.ed-tip .x{pointer-events:auto;flex:0 0 28px;width:28px;height:28px;margin:-6px -2px -6px 0;
  display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.ed-pill{display:flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:3px;
  padding:5px 9px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--txt2)}
.ed-bar{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);
  display:flex;align-items:stretch;gap:0}
.ed-bar button{flex:1;min-height:60px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.ed-bar button span{font-size:10.5px;color:var(--txt3);letter-spacing:.04em}
.ed-bar button.on{background:var(--raise)}
.ed-bar button.on span{color:var(--amber)}
.ed-sel{flex:0 0 auto;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;gap:10px}
.ed-sel input{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--line2);
  border-radius:3px;padding:8px 9px;font-size:14px;outline:none;color:var(--txt)}
.ed-sel select{background:var(--sunk);border:1px solid var(--line2);border-radius:3px;
  padding:8px 6px;font-family:var(--mono);font-size:12px;outline:none;color:var(--txt)}
.ed-sel .ms{font-family:var(--mono);font-size:18px;font-weight:500}
.pv-tapmap{cursor:pointer;position:relative}
.pv-tapmap .hint{position:absolute;inset:auto 0 0 0;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;color:var(--txt4)}
.pv-noshots{padding:14px 16px;font-size:12.5px;line-height:1.55;color:var(--txt3)}
.pv-noshots b{color:var(--amber);font-weight:500}

/* submissions (README section 5.1) */
.pv-subrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;
  border:0;border-bottom:1px solid var(--line);background:none;width:100%;text-align:left;
  color:inherit;cursor:pointer}
.pv-subrow .ref{font-family:var(--mono);font-size:11px;color:var(--txt)}
.pv-subrow .dim{font-family:var(--mono);font-size:10px;color:var(--txt3)}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.07em;border:1px solid var(--line);
  border-radius:2px;padding:2px 6px;color:var(--txt2);white-space:nowrap}
.tag.amber{color:var(--amber);border-color:var(--amber-edge)}
.tag.teal{color:var(--teal);border-color:var(--line2)}
.pv-row.sub{padding:10px 16px;gap:12px;cursor:pointer}
.pv-row.sub .ref{font-family:var(--mono);font-size:14px;font-weight:500}
.cnt{width:44px;height:44px;flex:0 0 44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border:1px solid var(--line2);border-radius:4px}
.cnt span{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--txt3);line-height:1}
.cnt.on{border-color:var(--amber-edge);background:var(--amber-well)}
.cnt.on span{color:var(--amber)}
.coll{background:none;border:0;padding:0;cursor:pointer;flex:0 0 44px}
.pv-row .coll{margin-right:-12px}

/* collapsed fold in the annotator sidebar (imported-geometry sliders) */
.fold summary{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;cursor:pointer;
  list-style:none;user-select:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--txt4);
  border-bottom:1.5px solid var(--txt4);transform:rotate(-45deg);margin-right:3px;transition:transform .12s}
.fold[open] summary::before{transform:rotate(45deg)}
.fold .gs{display:flex;align-items:center;gap:8px;padding:2px 14px 2px 26px}
.fold .gs label{flex:1;font-size:11px;color:var(--txt3);cursor:pointer;display:flex;gap:6px;align-items:baseline}
.fold .gs label i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--txt4)}
.fold .gs input[type=range]{width:96px;accent-color:var(--amber);cursor:pointer;margin:0}
.fold .gs .v{font-family:var(--mono);font-size:10px;color:var(--txt4);width:30px;text-align:right}
.fold[open]{padding-bottom:8px}
.fold .sw{display:flex;gap:5px;align-items:center}
.fold .sw button{width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);padding:0;cursor:pointer}
.fold .sw button.on{border-color:var(--txt);box-shadow:0 0 0 1.5px var(--txt)}
.fold input[type=color]{width:22px;height:18px;padding:0;border:1px solid var(--line2);border-radius:3px;
  background:var(--sunk);cursor:pointer}
.fold input[type=color].on{border-color:var(--txt);box-shadow:0 0 0 1.5px var(--txt)}

/* the machine index (README section 5.1): tiles, filters, the machine screen's columns */
.tile{flex:0 0 40px;width:40px;height:34px;border-radius:3px;border:1px solid var(--line2);background:var(--pf-wood);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.pv-head .tile{margin-right:6px}
.pv-none{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--txt4)}
.pv-filt{display:flex;align-items:center;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.pv-filt::-webkit-scrollbar{display:none}
.fbtn{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;background:var(--hover);border:1px solid var(--line2);
  border-radius:3px;font-size:11.5px;color:var(--txt2);cursor:pointer;flex:0 0 auto;font-family:var(--sans)}
.fbtn .n{font-family:var(--mono);font-size:10px;color:var(--amber)}
.pv-filt .chip{min-height:32px;display:flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap}
.pv-filt .chip.on{color:var(--amber);border-color:var(--amber-edge);background:var(--amber-well)}
.pv-filt .chip span{color:var(--txt4)}
.fsec{display:flex;flex-direction:column;gap:9px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.seg{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:4px;overflow:hidden;height:44px}
.seg button{flex:1;background:none;border:0;font-size:12px;letter-spacing:.06em;color:var(--txt3);cursor:pointer;font-family:var(--sans)}
.seg button.on{background:var(--raise);color:var(--amber);font-weight:600}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fgrid .fchip{flex-direction:column;justify-content:center;min-height:44px;gap:3px}
.fchip{display:flex;align-items:center;gap:6px;min-height:32px;min-width:44px;padding:0 10px;border-radius:3px;
  background:var(--hover);border:1px solid var(--line);color:var(--txt2);font-size:11.5px;cursor:pointer;font-family:var(--sans)}
.fchip b{font-weight:600;letter-spacing:.06em;font-size:12px}
.fchip i{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--txt4)}
.fchip.on{color:var(--amber);border-color:var(--amber-edge);background:var(--amber-well)}
.pv-foot{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel)}
.pv-head{position:relative}
.pv-map .pv-tapmap{flex:0 0 50%;max-width:50%;display:flex;flex-direction:column;gap:6px}
.pv-map .pv-tapmap svg{flex:0 0 auto;width:100%;height:auto}
.pv-map .pv-tapmap .hint{position:static}
.pv-links{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.pv-links .pv-lab{margin-bottom:2px}
.pv-links .pv-ref{min-height:40px;padding:0 10px;font-size:12px;white-space:nowrap}
.pv-warnbar .x{pointer-events:auto;flex:0 0 28px;width:28px;height:28px;margin:-6px -6px -6px 0;display:flex;align-items:center;
  justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.ed-head .tile{margin-right:2px}
.ed-sheet{flex:0 0 auto;max-height:46vh;overflow-y:auto;border-top:1px solid var(--line);background:var(--panel);border-radius:8px 8px 0 0}
.ed-sheet .grip{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:8px auto 2px}
.ed-sheet .fsec{border-bottom:0;padding:10px 16px 6px}
.ed-sheet .gs{display:flex;align-items:center;gap:10px;min-height:36px}
.ed-sheet .gs label{flex:1;font-size:11.5px;color:var(--txt2);display:flex;gap:6px;align-items:baseline}
.ed-sheet .gs label i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--txt4)}
.ed-sheet .gs input[type=range]{width:116px;accent-color:var(--amber);margin:0}
.ed-sheet .gs input[type=number]{width:72px;background:var(--sunk);border:1px solid var(--line2);border-radius:3px;padding:6px 8px;
  font-family:var(--mono);font-size:12px;color:var(--txt);outline:none}
.ed-sheet .gs .v{font-family:var(--mono);font-size:10px;color:var(--txt4);width:30px;text-align:right}
.ed-sheet .sw{display:flex;gap:6px}
.ed-sheet .sw button{width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);padding:0;cursor:pointer}
.ed-sheet .sw button.on{border-color:var(--txt);box-shadow:0 0 0 1.5px var(--txt)}