/* Oarkit Placas — Borneo-style board viewer, phone first. Dark instrument chrome, red tab strip, gold pads. */
:root{
  color-scheme:dark;
  --bg:#0f1214; --chrome:#171b1f; --chrome-2:#1f252a; --line:#2c343a; --fg:#e4e9ec; --muted:#8d9aa3;
  --board:#0b0d0e; --edge:#d9b35a; --pad:#c9a24c; --pad-hi:#ffe066; --net:#3fd0ff; --body:#1c2226; --silk:#e8e2cf; --shield:#2a3035;
  --accent:#e2403b; --blue:#2f6fe0; --lcd:#2a3320; --lcd-fg:#d6ecb0;
  --ok:#3fbf74; --warn:#f2a93b; --bad:#ff5a5f;
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"Chivo Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:15px;line-height:1.4;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--net)}
[hidden]{display:none!important}
.app{max-width:900px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-bottom:calc(64px + var(--sab))}
.ibtn{width:40px;height:38px;flex:none;border-radius:8px;background:var(--chrome-2);border:1px solid var(--line);display:grid;place-items:center;font-size:17px;padding:0}
.ibtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.btn{background:var(--blue);border:0;border-radius:8px;padding:11px 14px;font-weight:600;color:#fff}
.btn2{background:var(--chrome-2);border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-weight:600}
.btn.sm,.btn2.sm{padding:7px 10px;font-size:13px}
.btn:disabled,.btn2:disabled{opacity:.5;cursor:default}
:is(button,input,a):focus-visible{outline:2px solid var(--net);outline-offset:2px}
input[type=search],input[type=text]{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:0}
.mono{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px;font-weight:700;white-space:nowrap}
.c-ok{background:#173325;color:var(--ok)}.c-warn{background:#3a2a12;color:var(--warn)}.c-bad{background:#3d1a1b;color:var(--bad)}.c-idle{background:var(--line);color:var(--muted)}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(8px + var(--sat)) 12px 8px;background:var(--chrome);border-bottom:1px solid var(--line)}
.brand{font-weight:700;flex:1;white-space:nowrap}.brand span{color:var(--accent)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.seg button{border:0;background:transparent;color:var(--muted);padding:8px 11px;font-weight:600;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.tabbar{padding:8px 12px;background:var(--chrome-2);border-bottom:1px solid var(--line)}
.tabtitle{display:inline-block;max-width:100%;background:var(--accent);color:#fff;font-weight:600;font-size:12px;letter-spacing:.03em;padding:5px 10px;border-radius:6px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.views{display:flex;background:var(--chrome);border-bottom:1px solid var(--line)}
.view{flex:1;background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 6px;font-weight:600;color:var(--muted)}
.view[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}

.tools{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:none;background:var(--chrome-2);border-bottom:1px solid var(--line)}
.tools::-webkit-scrollbar{display:none}
.tools input{flex:1 0 170px}
.stage{position:relative;height:calc(100vh - 290px);min-height:300px;max-height:640px;background:radial-gradient(circle at 50% 40%,#161b1f,#0b0e10 70%);overflow:hidden;touch-action:none;user-select:none}
svg#cv{width:100%;height:100%;display:block}
.edge{fill:var(--board);stroke:var(--edge);stroke-width:3}
.hole{fill:#050607}.ring{fill:none;stroke:var(--pad);stroke-width:10}.ringbig{fill:none;stroke:var(--pad);stroke-width:26;opacity:.85}
.body{fill:var(--body);stroke:#56606a;stroke-width:1.5}
.chipb{fill:#14181b;stroke:#6a747d;stroke-width:1.5}
.shield{fill:var(--shield);stroke:#5d666e;stroke-width:1.5;stroke-dasharray:6 4}
.lbl{fill:var(--silk);font-family:var(--f-num);font-size:13px;pointer-events:none;opacity:.9}
.lbl.big{font-size:34px;font-weight:600;opacity:.75}
.reflbl{fill:var(--silk);font-family:var(--f-num);font-size:10px;pointer-events:none;opacity:.8}
.pad{fill:var(--pad);cursor:pointer}
.pad.linked{fill:var(--pad-hi);stroke:#fff;stroke-width:.6}
.pad.net{fill:var(--net)}
.pad.match{fill:#fff}
.pad.v-ok{fill:var(--ok)}.pad.v-warn{fill:var(--warn)}.pad.v-bad{fill:var(--bad)}
.pad.sel{fill:#fff;stroke:var(--accent);stroke-width:1.5}
.hit{fill:transparent;cursor:pointer}
.photo-on .edge{fill:rgba(11,13,14,.15)}.photo-on .chipb,.photo-on .shield,.photo-on .body{fill-opacity:.12;stroke-opacity:.9}.photo-on .lbl{opacity:.95;paint-order:stroke;stroke:#000;stroke-width:3px}
.untraced{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted)}
.untraced b{color:var(--fg)}
.status{display:flex;gap:14px;flex-wrap:wrap;padding:7px 12px;background:var(--chrome);border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-family:var(--f-num)}
.status b{color:var(--fg)}

.lsearch{padding:10px 12px 6px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;background:var(--chrome);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12px;color:var(--muted)}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.list{display:flex;flex-direction:column}
.lhead{display:grid;grid-template-columns:minmax(0,1fr) 64px 70px;gap:8px;padding:6px 12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:calc(55px + var(--sat));background:var(--bg);z-index:5}
.row{display:grid;grid-template-columns:minmax(0,1fr) 64px 70px;gap:2px 8px;align-items:center;padding:9px 12px;border:0;border-bottom:1px solid #1a2024;background:transparent;text-align:left;width:100%}
.row .n{font-family:var(--f-num);font-size:13px;overflow-wrap:anywhere}
.row .z{grid-column:1;font-size:11px;color:var(--muted)}
.row .d{font-family:var(--f-num);color:var(--pad-hi);grid-row:1/3;grid-column:2}
.row .cl{font-family:var(--f-num);font-size:13px;grid-row:1/3;grid-column:3;text-align:right}
.row.sel{background:#15202b}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;background:var(--line)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.empty{padding:28px 16px;color:var(--muted);text-align:center}

.drawer{position:fixed;inset:0 auto 0 0;width:min(88vw,340px);z-index:60;background:var(--chrome);border-right:1px solid var(--line);overflow:auto;padding:calc(10px + var(--sat)) 10px calc(16px + var(--sab));box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}
.tree{list-style:none;margin:0;padding:0;font-size:14px}
.tree ul{list-style:none;margin:0;padding-left:14px}
.tree li{padding:2px 0}
.tree .fold{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 4px;border-radius:5px}
.tree .fold::before{content:"▾ ";color:var(--accent)}
.tree li.closed>.fold::before{content:"▸ "}
.tree li.closed>ul{display:none}
.tree .file{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 6px;border-radius:5px;font-family:var(--f-num);font-size:12.5px}
.tree .file::before{content:"▤ ";color:var(--muted)}
.tree .file.on{background:var(--blue);color:#fff}
.tree .tag{font-size:10px;background:var(--accent);color:#fff;border-radius:3px;padding:0 4px;margin-left:4px}
.dnote{color:var(--muted);font-size:12px;line-height:1.45;padding:12px 4px 0}
.dnote p{margin:0 0 8px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:900px;margin:0 auto;background:rgba(22,27,32,.98);border:1px solid #3a444c;border-bottom:0;border-radius:16px 16px 0 0;padding:10px 16px calc(14px + var(--sab));max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:9px;box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.sheet h3{margin:0;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sheet .x{background:none;border:0;color:var(--muted);font-size:30px;line-height:1;padding:0 6px}
.pi{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-family:var(--f-num);font-size:13px}
.pi b{font-family:var(--f-ui);font-weight:600;color:var(--muted)}
.pi .vd{color:var(--pad-hi)}.pi .vn{color:var(--net);overflow-wrap:anywhere}
.pi i{color:var(--muted)}
.sheet hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}
.lcd{background:var(--lcd);color:var(--lcd-fg);border-radius:10px;padding:9px 14px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-num)}
.lcd .val{font-size:2rem;font-weight:600;line-height:1}
.lcd small{font-size:11px;letter-spacing:.08em;opacity:.75;align-self:flex-start}
.verd{display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.4;min-height:28px}
.inrow{display:flex;gap:8px;align-items:center}.inrow input{flex:1}
.num{font-family:var(--f-num)!important;font-size:17px!important}
.note{font-size:12px;color:var(--muted);margin:0;line-height:1.45}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.picklist{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.picklist button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #1a2024;padding:9px 10px;font-family:var(--f-num);font-size:12.5px}
.picklist button b{color:var(--pad-hi);font-weight:600}
.danger{color:var(--bad)}

.meter{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:900px;margin:0 auto;background:var(--chrome);border-top:1px solid var(--line);padding:8px 12px calc(8px + var(--sab));display:flex;align-items:center;gap:10px}
.meter .st{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter .st b{color:var(--fg)}
.meter .live{font-family:var(--f-num);font-size:19px;color:var(--lcd-fg);background:var(--lcd);padding:4px 10px;border-radius:6px;min-width:80px;text-align:right}
.toast{position:fixed;left:50%;bottom:calc(80px + var(--sab));transform:translateX(-50%);background:#111;color:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-size:13px;z-index:70;max-width:90vw}
@media (min-width:760px){.stage{height:calc(100vh - 270px)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}