/* Team Kori — Drill & Tap
 * Variables, layout and class names follow Maria's mock (team-kori-tap-drill-mock/mock.html)
 * so her finishing pass drops in: .wrap header .logo h1 .units .panel .lbl .seg .on .cu .row
 * .field .hero .readouts .ro(.t/.c) .chip .code .k .demo .cmp
 * Added here (scaffold only): .chip.amber/.red, .opts, .info, .conv, .help, form controls. */
:root{--bg:#0a0e11;--panel:#10161b;--line:#1f2a33;--text:#eef4f6;--dim:#93a4ad;--teal:#2dd4bf;--teal2:#14b8a6;
  --cu:#e8894a;--cu2:#f2a66f;--gold:#e8c547;--green:#34d399;--amber:#fbbf24;--red:#f87171;--hatch:#2a3a44;--wall:#3a4c57;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:'Space Grotesk',Inter,system-ui,sans-serif;--sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);font-family:var(--sans);color:var(--text);min-height:100vh;
  background-image:linear-gradient(rgba(45,212,191,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.05) 1px,transparent 1px);background-size:22px 22px}
.wrap{padding:18px 16px calc(28px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;background:var(--panel);padding:6px 10px;z-index:9}
header{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#0f3d39,#123);border:1.5px solid var(--teal);display:grid;place-items:center;flex:none}
h1{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.01em}
h1 span{color:var(--teal)}
.units{margin-left:auto;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 4px;color:var(--dim);display:flex;align-items:center}
.units button{background:none;border:0;color:var(--dim);font:inherit;padding:3px 7px;cursor:pointer;border-radius:999px}
.units button.on{color:var(--teal);font-weight:700}
.units .sep{opacity:.6}
.panel{background:rgba(16,22,27,.92);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:12px}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.seg{display:flex;background:#0b1115;border:1px solid var(--line);border-radius:10px;padding:3px;margin-top:8px}
.seg button{flex:1;text-align:center;font:600 13px var(--sans);padding:7px 0;border-radius:8px;color:var(--dim);background:none;border:0;cursor:pointer}
.seg .on{background:rgba(45,212,191,.16);color:var(--teal);box-shadow:inset 0 0 0 1px rgba(45,212,191,.5)}
.seg .on.cu{background:rgba(232,137,74,.16);color:var(--cu2);box-shadow:inset 0 0 0 1px rgba(232,137,74,.55)}
.seg.sm{margin-top:4px;padding:2px}.seg.sm button{font-size:11px;padding:3px 0}
.row{display:flex;gap:8px;margin-top:10px}
.field{flex:1;min-width:0;background:#0b1115;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.field .v,.field input,.field select{font-family:var(--mono);font-size:16px;margin-top:3px;color:var(--text);background:none;border:0;width:100%;outline:none}
.field select{font-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer}
.field select option,.field select optgroup{background:var(--panel);color:var(--text)}
.field:focus-within{border-color:rgba(45,212,191,.6)}
.field .hint{font-size:11px;color:var(--dim);margin-top:2px}
.hero{position:relative}
.hero svg{display:block;width:100%;height:auto;margin-top:6px}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ro{background:#0b1115;border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.ro .v{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ro .v small{font-size:12px;color:var(--dim);font-weight:400}
.ro .s{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}
.ro.t .v{color:var(--teal)} .ro.c .v{color:var(--cu2)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;margin-top:10px;background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.4)}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:none}
.chip.amber{background:rgba(251,191,36,.12);color:var(--amber);border-color:rgba(251,191,36,.45)}
.chip.red{background:rgba(248,113,113,.12);color:var(--red);border-color:rgba(248,113,113,.45)}
.code{font-family:var(--mono);font-size:13px;background:#071012;border:1px solid #16413c;border-radius:10px;padding:10px 12px;margin-top:8px;color:#bff5ec;line-height:1.6;white-space:pre-wrap}
.code .k{color:var(--cu2)}
.info{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.45}
.info b{color:var(--text)}
.info.warn{color:var(--amber)}.info.bad{color:var(--red)}
.opts{width:100%;border-collapse:collapse;margin-top:10px;font-family:var(--mono);font-size:12.5px}
.opts th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;text-align:left;font-weight:400;padding:4px 4px}
.opts td{padding:6px 4px;border-top:1px solid var(--line)}
.opts td.g{color:var(--green)}.opts td.a{color:var(--amber)}.opts td.r{color:var(--red)}
.opts tr.rec td:first-child{color:var(--cu2);font-weight:700}
details.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"▸";color:var(--dim);transition:transform .15s}
details.acc[open]>summary::after{transform:rotate(90deg)}
.help p,.help li{font-size:13px;line-height:1.5;color:#cfdade;margin-top:8px}
.help ul{padding-left:18px}
.help b{color:var(--text)}
.conv .row{align-items:end}
.conv .eq{font-family:var(--mono);color:var(--dim);align-self:center}
.demo{border-color:rgba(232,197,71,.4)}
.demo .lbl{color:var(--gold)}
.demo .field{border-color:rgba(232,197,71,.18)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cmp .ro .v{font-size:19px;color:var(--gold)}
.cmp .ro.win{border-color:var(--gold);box-shadow:0 0 0 1px rgba(232,197,71,.35)}
.cmp .ro .line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:4px}
.toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);cursor:pointer}
.toggle input{accent-color:var(--gold)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-top:12px}
footer{font-size:11px;color:var(--dim);text-align:center;margin-top:18px;line-height:1.5}
[hidden]{display:none!important}
.field .hint input{width:auto;margin:0 4px 0 0;vertical-align:middle;accent-color:var(--teal)}

/* ---------- Maria finishing pass (mf1) ---------- */
/* selects: chevron + ellipsis instead of clipped text */
.field select{padding-right:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232dd4bf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center}
.help code{font-family:var(--mono);font-size:12px;color:var(--teal);background:#0b1115;border:1px solid var(--line);border-radius:5px;padding:0 4px}
.hero svg#xsec{max-width:100%;aspect-ratio:358/240}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* thread picker button */
.tp-field{cursor:pointer}
.tp-btn{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);cursor:pointer;padding:0;margin-top:3px;
  font:500 16px var(--mono);position:relative;padding-right:20px;-webkit-tap-highlight-color:transparent}
.tp-btn::after{content:"";position:absolute;right:0;top:4px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%232dd4bf' stroke-width='1.6'/%3E%3Cpath d='M9.2 9.2l3.3 3.3' stroke='%232dd4bf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
.tp-btn #thread-btn-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-meta{display:block;font:400 10.5px var(--mono);color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-meta .cu,.tag.cu{color:var(--cu2)}

/* picker sheet */
html.tp-open,html.tp-open body{overflow:hidden}
.tp{position:fixed;inset:0;z-index:50}
.tp-scrim{position:absolute;inset:0;background:rgba(3,6,8,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.tp-sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;height:min(82vh,680px);height:min(82dvh,680px);
  display:flex;flex-direction:column;background:#0d1317;border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(45,212,191,.08) inset;padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tp.in .tp-scrim{opacity:1}.tp.in .tp-sheet{transform:none}
.tp-grab{width:38px;height:4px;border-radius:4px;background:#2a3a44;margin:2px auto 8px}
.tp-hd{display:flex;align-items:center;justify-content:space-between}
.tp-hd #tp-count{color:var(--teal)}
.tp-x{background:#0b1115;border:1px solid var(--line);color:var(--dim);width:30px;height:30px;border-radius:9px;font-size:13px;cursor:pointer}
.tp-search{display:flex;align-items:center;gap:8px;margin-top:10px;background:#071012;border:1px solid rgba(45,212,191,.45);border-radius:12px;padding:10px 12px;
  box-shadow:0 0 0 3px rgba(45,212,191,.08)}
.tp-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:16px var(--mono)} /* 16px = no iOS zoom */
.tp-search input::placeholder{color:#55666f}
.tp-search input::-webkit-search-cancel-button{filter:hue-rotate(140deg)}
.tp-filt{display:flex;gap:6px;margin-top:10px}
.tp-filt button{flex:1;font:600 12px var(--sans);padding:6px 0;border-radius:999px;border:1px solid var(--line);background:#0b1115;color:var(--dim);cursor:pointer}
.tp-filt button.on{color:var(--teal);border-color:rgba(45,212,191,.55);background:rgba(45,212,191,.12)}
.tp-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:10px -14px 0;padding:0 14px 8px;position:relative}
.tp-g{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cu2);
  background:#0d1317;padding:10px 2px 6px;border-bottom:1px solid var(--line)}
.tp-g span{color:#55666f}
.tp-opt{display:flex;align-items:center;gap:8px;padding:11px 10px;margin:2px 0;border-radius:10px;cursor:pointer;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.tp-opt:hover,.tp-opt.act{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.25)}
.tp-opt.cur{background:rgba(232,137,74,.10);border-color:rgba(232,137,74,.45)}
.tp-opt.cur .tp-l::before{content:"● ";color:var(--cu2);font-size:9px;vertical-align:2px}
.tp-l{font:500 15px var(--mono);color:var(--text);white-space:nowrap}
.tp-l mark{background:none;color:var(--teal);text-decoration:underline;text-decoration-color:rgba(45,212,191,.5);text-underline-offset:3px}
.tp-m{margin-left:auto;font:11px var(--mono);color:var(--dim);white-space:nowrap}
.tag{font:700 8.5px var(--mono);letter-spacing:.1em;font-style:normal;color:var(--dim);border:1px solid currentColor;border-radius:5px;padding:1px 4px;opacity:.9}
.tp-none{padding:28px 8px;text-align:center;color:var(--dim);font-size:13px;line-height:1.7}
.tp-none b{color:var(--teal);font-family:var(--mono);font-weight:500}
@media (min-width:700px){.tp-sheet{bottom:auto;top:8vh;border-radius:20px;border-bottom:1px solid var(--line);height:min(76vh,680px)}}
@media (prefers-reduced-motion:reduce){.tp-sheet,.tp-scrim{transition:none}}
.logo{background:none;border:0;overflow:hidden}.logo img{display:block;width:34px;height:34px}
/* header + footer flow matched to Chip Thinning (mf2) */
header{align-items:center}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand-mark{width:14px;height:42px;border-radius:4px;background:linear-gradient(180deg,var(--teal),var(--cu));flex:none;box-shadow:0 0 14px rgba(45,212,191,.25)}
.brand-kicker{font:700 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
header h1{margin-top:2px;font-size:clamp(20px,5.4vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
header h1 span{color:var(--cu2)}
.units{align-self:flex-start;margin-top:4px}
.site-footer{font-size:12.5px;color:var(--dim);text-align:center;margin-top:22px;line-height:1.5}
.site-footer p{margin:4px 0}
.site-footer .fine{opacity:.75;font-size:11.5px}
.cat-mark{height:1.25em;width:auto;vertical-align:-.25em;margin-right:6px}

/* Example tag on first load */
.example-tag{margin:2px 0 10px}
.example-tag[hidden]{display:none}

#tp:focus{outline:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--teal);text-decoration:underline;cursor:pointer}
.codewrap{margin-top:8px}
.codebar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0a1a1a;border:1px solid #16413c;border-bottom:0;border-radius:10px 10px 0 0;padding:6px 8px 6px 12px}
.codebar .lbl{font-size:9.5px;color:#5fbfb2}
.codewrap .code{margin-top:0;border-radius:0 0 10px 10px}
.copybtn{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.35);border-radius:7px;padding:5px 10px;cursor:pointer;flex:none}
.copybtn:active{transform:scale(.97)}
.copybtn.ok{color:var(--cu2);border-color:rgba(232,155,107,.5);background:rgba(232,155,107,.08)}
/* keep each G-code block on one line; scroll sideways instead of wrapping */
.codewrap .code{white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:400px){.codewrap .code{font-size:12px;padding:10px}}
/* editable drill readouts */
.ro.ed{display:block;cursor:text}
.ro.ed:focus-within{border-color:rgba(45,212,191,.6)}
.ro .vin{display:flex;align-items:baseline;gap:6px;margin-top:4px;min-width:0}
.ro .vin input{flex:0 1 auto;min-width:2ch;max-width:100%;font:600 24px var(--mono);font-variant-numeric:tabular-nums;color:var(--text);background:none;border:0;border-bottom:1px dashed rgba(45,212,191,.35);border-radius:0;padding:0 0 1px;outline:none;-moz-appearance:textfield;appearance:textfield}
.ro .vin input::-webkit-inner-spin-button,.ro .vin input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ro .vin input:focus{border-bottom-color:var(--teal)}
.ro .vin input:disabled{border-bottom-color:transparent;color:var(--dim)}
.ro .vin small{font-size:12px;color:var(--dim);flex:none}
/* wide screens (PC): tap + drill side by side */
@media (min-width:1000px){
  .wrap{max-width:1120px}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .hero svg#xsec{display:block;max-width:620px;margin:0 auto}
}
/* Home Screen (standalone, black-translucent status bar): keep the header below the clock/notch (sa1) */
.wrap{padding-top:calc(18px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:rgba(10,14,17,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:40;pointer-events:none}
.tp-sheet{max-height:calc(100% - env(safe-area-inset-top) - 12px)}

/* --- Round 1 visual pass (Maria, r1v) --- */
/* thread class: one framed strip, chip pinned right */
.clsrow{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(90deg,rgba(52,211,153,.06),rgba(11,17,21,.6))}
.clsrow .lbl{margin:0;flex:none}
.clsrow .seg{margin-top:0;min-width:92px;flex:none}
.clsrow .chip{margin:0 0 0 auto;white-space:nowrap}
#cls-info{font-size:11.5px;margin-top:6px;padding-left:2px}
/* clearance drill: two cards, label / big size / decimal */
.clrrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.clrrow>.lbl{grid-column:1/-1;margin:0}
.panel.clr .clrrow{margin-top:0}
.panel.clr .clrrow>.lbl{margin-bottom:2px}
.pill{display:flex;flex-direction:column;gap:3px;padding:9px 12px 10px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#0e151a,#0b1115);position:relative;overflow:hidden}
.pill::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--cu)}
#clr-free::before{background:var(--teal)}
.pill .pk{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pill b{font:700 20px var(--disp);color:var(--cu2);line-height:1.1}
#clr-free b{color:var(--teal)}
.pill .ps{font:11.5px var(--mono);color:var(--dim)}
/* favorites star in the picker */
.tp-star{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px -6px 2px;border-radius:9px;background:none;border:0;color:#4d6170;font-size:17px;line-height:1;cursor:pointer;transition:color .15s,background .15s,transform .15s}
.tp-star:hover{color:var(--gold);background:rgba(232,197,71,.08)}
.tp-star.on{color:var(--gold);text-shadow:0 0 10px rgba(232,197,71,.45)}
.tp-star:active{transform:scale(.88)}
/* hole depth panel */
.zstack{display:block;width:100%;height:auto;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(120% 140% at 50% 0%,rgba(45,212,191,.05),transparent 60%),#0b1115}
#z-info .info:first-child{margin-top:10px}
/* DEMO: tap-change sub-line under wear */
.cmp .ro .line.mut{font-size:10.5px;color:var(--dim);opacity:.85;margin-top:0;padding-left:10px;border-left:1px solid rgba(232,197,71,.35);margin-left:2px}
/* code boxes: "?" = fill this in (amber, Maria q1) */
.code .q{color:var(--amber);font-weight:800;background:rgba(251,191,36,.14);border-radius:4px;padding:0 3px;margin:0 1px;box-shadow:inset 0 0 0 1px rgba(251,191,36,.45)}
/* --- Troubleshoot panel (Maria, ts1) --- */
.ts details.acc>summary{gap:10px}
.ts details.acc>summary .lbl{color:var(--text)}
.ts-badge{margin-left:auto;font:700 10.5px var(--mono);letter-spacing:.08em;color:var(--amber);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);padding:2px 8px;border-radius:999px}
.ts-badge.ok{color:var(--green);background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.4)}
.ts-badge.red{color:var(--red);background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.5)}
.ts-sub{font-size:12px;color:var(--dim);margin-top:8px}
.ts-sample{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px dashed rgba(232,197,71,.5);border-radius:8px;padding:4px 8px;margin-top:8px;text-align:center}
.ts-sym{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ts-sym button{font:600 12px var(--sans);color:var(--dim);background:#0b1115;border:1px solid var(--line);border-radius:999px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .15s}
.ts-sym button:hover{color:var(--text);border-color:#2c3b46}
.ts-sym button .n{font:700 10px var(--mono);color:var(--amber)}
.ts-sym button.on{color:var(--teal);background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.55);box-shadow:0 0 12px rgba(45,212,191,.15)}
.ts-sym button.cu.on{color:var(--cu2);background:rgba(232,137,74,.12);border-color:rgba(232,137,74,.55);box-shadow:0 0 12px rgba(232,137,74,.15)}
.ts-sym .ic{font-size:13px}
.ts-hint{font-size:12px;color:var(--dim);margin-top:12px;font-style:italic}
.ts-h{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.ts-h .lbl.a{color:var(--amber)}.ts-h .lbl.g{color:var(--green)}
.fx{position:relative;margin-top:8px;padding:11px 12px 11px 14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#0e151a,#0b1115)}
.fx::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:#3a4c57}
.fx.live{border-color:rgba(251,191,36,.5);background:linear-gradient(180deg,rgba(251,191,36,.07),#0b1115)}
.fx.live::before{background:var(--amber);box-shadow:0 0 10px rgba(251,191,36,.6)}
.fx.ok::before{background:var(--green)}
.fx .t{display:flex;align-items:center;gap:8px;font:600 13.5px var(--sans)}
.fx .tag{margin-left:auto;font:700 9.5px var(--mono);letter-spacing:.1em;padding:2px 7px;border-radius:999px;white-space:nowrap}
.fx.live .tag{color:var(--amber);border:1px solid rgba(251,191,36,.5)}
.fx.ok .tag{color:var(--green);border:1px solid rgba(52,211,153,.45)}
.fx .why{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.45}
.fx .do{font-size:12.5px;margin-top:6px;line-height:1.45}
.fx .do b{color:var(--teal)}
.fx .you{display:inline-block;margin-top:7px;font:12px var(--mono);color:var(--amber);background:rgba(251,191,36,.08);border-radius:6px;padding:3px 7px}
.fx .s{margin-top:7px;font-size:11px;color:var(--mut,#8b98a5)}
.fx .s a{color:#7fd8cc;text-decoration:underline;text-decoration-color:rgba(45,212,191,.4);text-underline-offset:2px}
.fx.ok .you{color:var(--green);background:rgba(52,211,153,.08)}
.fx.red{border-color:rgba(248,113,113,.55);background:linear-gradient(180deg,rgba(248,113,113,.09),#0b1115)}
.fx.red::before{background:var(--red);box-shadow:0 0 10px rgba(248,113,113,.6)}
.fx.red .tag{color:var(--red);border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.1)}
.fx.red .you{color:var(--red);background:rgba(248,113,113,.08)}
.hint.bad{color:var(--red);font-weight:600;padding-left:16px;position:relative}
.hint.bad::before{content:"!";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--red);color:#0b1115;font:800 9px/12px var(--mono);text-align:center}
.ts-cost{margin-top:10px;padding:10px 12px;border:1px dashed rgba(232,197,71,.55);border-radius:12px;background:rgba(232,197,71,.05);font-size:12px;color:#e9dca0;line-height:1.45}
.ts-cost .lbl{color:var(--gold);margin-bottom:3px}
.ts-cost b{color:var(--gold);font:700 14px var(--mono)}

/* --- Insert (STI) switch + Repair or scrap? (Maria, ins1) --- */
.ins-sw{display:flex;align-items:center;gap:11px;margin-top:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#0b1115;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ins-sw input{position:absolute;opacity:0;width:1px;height:1px}
.ins-sw .trk{flex:none;width:38px;height:22px;border-radius:999px;background:#1c262d;border:1px solid var(--line);position:relative;transition:background .15s}
.ins-sw .trk i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:transform .15s,background .15s}
.ins-sw input:checked + .trk{background:rgba(232,137,74,.25);border-color:rgba(232,137,74,.6)}
.ins-sw input:checked + .trk i{transform:translateX(16px);background:var(--cu2);box-shadow:0 0 8px rgba(232,137,74,.6)}
.ins-sw input:focus-visible + .trk{outline:2px solid var(--teal);outline-offset:2px}
.ins-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ins-t b{font:600 13.5px var(--sans);color:var(--text)}
.ins-t small{font-size:11.5px;color:var(--dim);line-height:1.35}
.ins-t small.wait{color:var(--amber)}
body.is-ins .ins-sw{border-color:rgba(232,137,74,.55);background:linear-gradient(180deg,rgba(232,137,74,.08),#0b1115)}
body.is-ins .ins-t b{color:var(--cu2)}
.ins-chip{display:inline-block;margin-left:8px;vertical-align:middle;font:700 9.5px var(--mono);letter-spacing:.1em;color:var(--cu2);border:1px solid rgba(232,137,74,.6);background:rgba(232,137,74,.12);border-radius:999px;padding:2px 7px}
.rep{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(232,197,71,.35)}
.rep .rep-min input{border-color:rgba(232,197,71,.6);box-shadow:0 0 0 1px rgba(232,197,71,.25)}
.rep .rep-min .lbl{color:var(--gold)}
.rep-out{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(232,197,71,.45);background:rgba(232,197,71,.06)}
.rep-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rep-v b{font:700 18px var(--mono);color:var(--gold)}
.rep-verdict{margin-top:4px;font:700 13px var(--sans)}
.rep-out.win .rep-verdict{color:var(--green)}
.rep-out.lose .rep-verdict{color:var(--red)}
.rep-line{margin-top:3px;font-size:11.5px;color:#cbbf86}
.ts-rep{margin-top:10px;padding:10px 12px;border:1px solid rgba(232,137,74,.45);border-radius:12px;background:rgba(232,137,74,.05)}
.ts-rep-hd .lbl{color:var(--cu2)}
.ts-rep-btn{display:block;width:100%;margin-top:8px;padding:9px 0;border-radius:10px;font:700 13px var(--sans);color:var(--cu2);background:rgba(232,137,74,.14);border:1px solid rgba(232,137,74,.6);cursor:pointer}
.ts-rep-btn.on{color:var(--green);background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.5)}
.ts-rep .ts-cost{margin-top:9px}
.ts-rep .ts-cost .lbl{display:block}
/* Inserts · STI section (Maria, ins2) */
.ins-badge{margin-left:auto;font:700 10.5px var(--mono);letter-spacing:.08em;color:var(--cu2);background:rgba(232,137,74,.12);border:1px solid rgba(232,137,74,.5);padding:2px 8px;border-radius:999px}
.ins .zstack{margin-top:10px}
.ins-len button{font-family:var(--mono)}
.ins-tbl{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font:12.5px var(--mono)}
.ins-tbl .r{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;padding:7px 12px;border-top:1px solid var(--line);color:var(--text)}
.ins-tbl .r:first-child{border-top:0}
.ins-tbl .r.h{font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:#0b1115}
.ins-tbl .r b{color:var(--cu2);margin-right:4px}
.ins-tbl .r.on{background:rgba(232,137,74,.1);box-shadow:inset 3px 0 0 var(--cu)}
.ins .codewrap{margin-top:12px}
.code .dimc{display:block;white-space:normal;color:var(--dim);font-family:var(--sans);font-size:12px;line-height:1.45}
.ins-steps{margin:6px 0 0;padding-left:20px;font-size:13px;line-height:1.55;color:var(--text)}
.ins-steps li::marker{color:var(--cu2);font-family:var(--mono);font-weight:700}
.ins .rep{margin-top:14px}
.ins-chartrow{margin-top:10px}
.ins-chart button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0}
.ins-chart button b{font:600 12.5px var(--sans)}
.ins-chart button small{font:600 11px var(--mono);color:var(--dim)}
.ins-chart button.on small{color:var(--cu2)}
.ins-fill{font:600 9.5px var(--sans);font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--cu2);border:1px solid rgba(232,137,74,.55);border-radius:6px;padding:0 4px;margin-left:4px;vertical-align:1px}
.ins-fillnote{margin:8px 0 0;font:12px/1.4 var(--sans);color:var(--cu2)}
.ins-fill.sm{font-size:8.5px;padding:0 3px;margin-left:3px}

/* Jump to Inserts button under the STI switch (Jenny, tc2) */
.ins-jump{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(232,137,74,.6);background:rgba(232,137,74,.12);color:var(--cu2);font:600 13px var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ins-jump:active{background:rgba(232,137,74,.22)}
.ins-jump:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ins-jump[hidden]{display:none}
#ins-acc{scroll-margin-top:12px}
/* phones: thread-class row wraps instead of pushing the chip off-screen (Maria, QA Oct 8) */
.clsrow{flex-wrap:wrap;row-gap:6px}
.clsrow .chip{max-width:100%}