/* 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; --ball:#4b5158; --ball-hi:#ccd2d8; --ghost:#767d85;
  /* 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}
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}
#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}
.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}

#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%}

.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)}

/* 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)}
.pv-note{display:flex;align-items:flex-start;gap:9px;margin:20px 16px;
  padding:11px 12px;background:var(--sunk);border:1px solid var(--line);border-radius:4px}
.pv-note span{font-size:11.5px;line-height:1.5;color:var(--amber-dim)}

/* 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-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)}
}