/* Drilling Simulator - premium dashboard skin, layered after style.css and premium-apps.css.
   Colour, depth, type, icons and motion only: no panel layout, no simulation logic.
   Design basis: dense dark instrument panel (hairline surfaces, layered neutral shadows, recessed channels,
   uppercase micro-labels, tabular numerals, one accent per job, 150-250 ms state changes, visible focus). */
:root{
  --r-sm:7px;--r-md:11px;--ease:cubic-bezier(.2,.7,.2,1);
  --hair:rgba(255,255,255,.075);
  --surface:linear-gradient(180deg,#1b2733 0%,#141e27 100%);
  --well:linear-gradient(180deg,#090f14,#0d151c);
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-card:0 0 0 1px rgba(0,0,0,.4),0 1px 1px -.5px rgba(0,0,0,.3),0 3px 3px -1.5px rgba(0,0,0,.28),0 8px 8px -4px rgba(0,0,0,.3),0 16px 16px -8px rgba(0,0,0,.32);
}
body{font-feature-settings:"tnum" 1,"lnum" 1}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.mode-btn,.panel-tab,#run-btn,.act-btn,.wc-btn,.add-btn,.icon-btn,.nw-btn,select,label.chk-row,.mini-switch{cursor:pointer}

/* ── header ── */
#header{background:linear-gradient(180deg,var(--ink-3),var(--ink-1))!important;border-bottom:0!important;position:relative;box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
#header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--sand) 0 22%,var(--shale) 22% 47%,var(--lime) 47% 63%,var(--water) 63% 82%,var(--mud) 82%)}
#header .logo{font-family:var(--f-head);font-weight:700;letter-spacing:.01em}
#well-tag{font-family:var(--f-head);letter-spacing:.04em;color:var(--steel);background:var(--ink-0);border-color:var(--line);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
#well-tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:1px;box-shadow:0 0 7px var(--ok)}
.mode-btn{border-radius:var(--r-sm);background:var(--ink-2);border-color:var(--line);font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--hi);transition:background .18s var(--ease),border-color .18s,color .18s,box-shadow .18s,transform .12s}
.mode-btn:hover{background:var(--ink-3);border-color:var(--mud);color:var(--paper)}
.mode-btn:active{transform:scale(.97)}
.mode-btn.active{background:linear-gradient(180deg,#f2b955,var(--mud-d));border-color:#f2b955;color:#1a1204;box-shadow:0 2px 12px rgba(232,163,61,.32),var(--hi)}
.mode-btn.warn{border-color:rgba(232,163,61,.55)}
.mode-btn.warn.on{background:linear-gradient(180deg,#f2b955,var(--mud-d));color:#1a1204}
.mode-btn.prime{background:linear-gradient(180deg,#78dbec,#2f9fb5);border-color:#78dbec;color:#04161b;font-weight:800;box-shadow:0 2px 14px rgba(79,195,217,.38),var(--hi)}
.mode-btn.prime:hover{filter:brightness(1.08);background:linear-gradient(180deg,#78dbec,#2f9fb5);color:#04161b}
#run-btn{border-radius:9px;font-family:var(--f-head);font-size:13px;letter-spacing:.09em;color:#06180d;
  background:linear-gradient(180deg,#86e3a9,#43b273);box-shadow:0 4px 16px rgba(111,207,151,.3),var(--hi);transition:filter .18s,transform .12s,box-shadow .18s}
#run-btn:active{transform:scale(.97)}
#run-btn.running{background:linear-gradient(180deg,#f0725f,#c53b28);color:#fff;box-shadow:0 4px 16px rgba(229,83,61,.35),var(--hi)}
#sim-time{padding:4px 13px;background:var(--ink-0);border:1px solid var(--line);border-radius:999px;color:var(--steel);font-size:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}
.hdr-sel{border-radius:var(--r-sm)!important;background:var(--ink-2)!important;border-color:var(--line)!important;font-family:var(--f-body)}

/* ── side panels ── */
#left-panel,#right-panel{background:linear-gradient(180deg,var(--ink-1),#0d151c)!important;border-color:var(--line)!important}
.panel-tab{font-family:var(--f-head);font-size:10px;letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;transition:color .18s,background .18s}
.panel-tab:hover{background:rgba(255,255,255,.035)}
.panel-tab.on{color:var(--mud);background:linear-gradient(180deg,transparent,rgba(232,163,61,.13))}

/* ── cards: hairline edge, top highlight, layered neutral depth ── */
.ctrl-group,.gauge-card,.alarm-card,.evt-log{background:var(--surface)!important;border:1px solid var(--hair)!important;border-radius:var(--r-md)!important;box-shadow:var(--hi),var(--sh-card)}
.wc-panel,#buckling-card{background:var(--surface)!important;border-radius:var(--r-md)!important;box-shadow:var(--hi),var(--sh-card)}
.wc-panel{border-color:rgba(229,83,61,.6)!important}
.ctrl-group-title,.gauge-title{font-family:var(--f-head);font-size:10.5px!important;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)!important}
.ctrl-group-title:not(.grp-head){display:flex;align-items:center;gap:7px}
.ctrl-group-title:not(.grp-head)::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--mud);flex-shrink:0}
.wc-title{font-family:var(--f-head);letter-spacing:.12em;text-transform:uppercase}
.gauge-num,#rp-bitdepth,#rp-holedepth,#rp-togo{font-family:var(--f-head)!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gauge-num{font-size:24px}
.gauge-unit{font-size:10px;color:var(--muted);letter-spacing:.05em}
.kv .k{color:var(--muted)}
.bar-gauge{height:7px;background:var(--well);box-shadow:inset 0 1px 2px rgba(0,0,0,.65)}
.bar-fill{box-shadow:0 0 8px rgba(255,255,255,.12)}
.alarm-item{border-radius:6px}
.evt-item{border-bottom-color:rgba(255,255,255,.05)}
.flag{border-radius:4px;letter-spacing:.07em}
.act-btn,.wc-btn{border-radius:8px;transition:filter .18s,transform .12s}
.act-btn:hover,.wc-btn:hover:not(:disabled){filter:brightness(1.1)}
.act-btn:active,.wc-btn:active:not(:disabled){transform:scale(.98)}
#bottom-strip{background:linear-gradient(180deg,var(--ink-1),#0d151c)!important;border-top-color:var(--line)!important}
.bs-dot{box-shadow:0 0 6px currentColor}
#depth-scale{background:var(--ink-1)!important;border-right-color:var(--line)!important}

/* ── horizontal sliders: grooved track, ringed cap ── */
.ctrl-slider{height:6px;background:var(--well);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04)}
.ctrl-slider::-webkit-slider-thumb{width:16px;height:16px;background:radial-gradient(circle at 35% 30%,#ffe0a0,var(--mud) 58%,var(--mud-d));
  box-shadow:0 0 0 3px rgba(232,163,61,.18),0 2px 5px rgba(0,0,0,.55);transition:box-shadow .15s}
.ctrl-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(232,163,61,.22),0 2px 5px rgba(0,0,0,.55)}
.ctrl-val{font-family:var(--f-head);color:var(--mud)}

/* ── drilling-parameter faders: recessed channel, scale ticks, metal cap with a gold index line ── */
.fader{background:var(--well)!important;border:1px solid rgba(255,255,255,.05);border-radius:var(--r-md);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04)}
.fader .ctrl-val{font-size:19px;color:var(--mud);text-shadow:0 0 14px rgba(232,163,61,.28)}
.fader .ctrl-lbl{font-family:var(--f-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.fader .ctrl-unit{color:var(--muted)}
.fader .ctrl-slider{box-shadow:none;
  background:
    linear-gradient(90deg,transparent 19px,rgba(0,0,0,.85) 19px 20px,#0a1117 20px 24px,rgba(255,255,255,.1) 24px 25px,transparent 25px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,transparent 1px 17px) 3px 0/10px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,transparent 1px 17px) 31px 0/10px 100% no-repeat}
.fader .ctrl-slider::-webkit-slider-thumb{width:42px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.6);
  background:linear-gradient(180deg,#f8fbfd 0,#d3dde6 38%,var(--mud) 43% 57%,#c5d1db 62%,#e8eef3 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.45),0 4px 7px rgba(0,0,0,.5),0 12px 16px -4px rgba(0,0,0,.55);transition:box-shadow .15s}
.fader .ctrl-slider:hover::-webkit-slider-thumb{box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(232,163,61,.28),0 4px 7px rgba(0,0,0,.5),0 12px 16px -4px rgba(0,0,0,.55)}
.fader .ctrl-slider:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px 0 #fff,0 0 0 3px var(--water),0 4px 7px rgba(0,0,0,.5)}
.fader .ctrl-slider::-moz-range-thumb{width:42px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.6);
  background:linear-gradient(180deg,#f8fbfd 0,#d3dde6 38%,var(--mud) 43% 57%,#c5d1db 62%,#e8eef3 100%)}
.wob-bar{border-radius:5px;font-family:var(--f-head);font-size:10px;letter-spacing:.1em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.35)}
.wob-bar.safe{background:linear-gradient(180deg,#86e3a9,#43b273)}
.wob-bar.risk{background:linear-gradient(180deg,#f6c25e,#d58a1c)}
.wob-bar.crit{background:linear-gradient(180deg,#f0725f,#c53b28);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 14px rgba(229,83,61,.45)}

/* ── dialogs ── */
#well-dlg,#nw-warn{background:var(--surface);box-shadow:var(--hi),0 2.8px 2.2px rgba(0,0,0,.034),0 12.5px 10px rgba(0,0,0,.06),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12)}
.nw-head,.nww-head{font-family:var(--f-head);letter-spacing:.02em}
.nw-sec{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--hi)}
.nw-sec h3{font-family:var(--f-head);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.nw-btn{border-radius:var(--r-sm);font-family:var(--f-head);letter-spacing:.06em;text-transform:uppercase;transition:filter .18s,transform .12s}
.nw-btn:hover{filter:brightness(1.1)}.nw-btn:active{transform:scale(.97)}
.nw-btn.go{background:linear-gradient(180deg,#f2b955,var(--mud-d));border-color:#f2b955;color:#1a1204}
.nw-btn.danger{background:linear-gradient(180deg,#f0725f,#c53b28);border-color:#f0725f}

/* ── delete-row icon: SVG instead of an emoji ── */
.icon-btn.del{position:relative;width:26px;height:26px;font-size:0;color:var(--muted);border-radius:6px;transition:background .15s,color .15s}
.icon-btn.del::before{content:"";position:absolute;inset:5px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat}
.icon-btn.del:hover{background:rgba(229,83,61,.16);color:var(--kick)}

/* icons that replace emoji (shared/premium-icons.js) */
.pi{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;margin-right:.3em;flex-shrink:0}
.pi:last-child{margin-right:0}
.pi svg{display:block;width:100%;height:100%}

/* ── header buttons: one solid, glossy "key cap" style, one colour per job ──
   gold = drilling, violet = tripping, coral = flow check (well control), pink = test mode, cyan = new well, steel = manual, green = start.
   On/selected = a gap ring plus glow; the inactive mode button is dimmed. */
#mb-drill{--c1:#f7c869;--c2:#c98a1f;--g:242,185,85;--tx:#1a1204}
#mb-trip{--c1:#c4aefa;--c2:#8664de;--g:169,139,240;--tx:#170c33}
#flow-check-btn{--c1:#ff9b7e;--c2:#e0502f;--g:255,122,89;--tx:#2a0b04}
#test-btn{--c1:#f7a0d5;--c2:#d0509f;--g:238,116,192;--tx:#2b0a1d}
#manual-btn{--c1:#cfdce7;--c2:#7f95a8;--g:159,180,199;--tx:#0b1117}
#new-well-btn{--c1:#82def0;--c2:#2f9fb5;--g:79,195,217;--tx:#04161b}
#mb-drill,#mb-trip,#flow-check-btn,#test-btn,#manual-btn,#new-well-btn{
  background:linear-gradient(180deg,var(--c1),var(--c2));border:1px solid var(--c1);color:var(--tx);text-shadow:0 1px 0 rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.2),0 3px 12px rgba(var(--g),.3);
  transition:filter .18s,transform .12s,box-shadow .18s}
#mb-drill:hover,#mb-trip:hover,#flow-check-btn:hover,#test-btn:hover,#manual-btn:hover,#new-well-btn:hover{
  background:linear-gradient(180deg,var(--c1),var(--c2));border-color:var(--c1);color:var(--tx);filter:brightness(1.1);transform:translateY(-1px)}
#mb-drill:active,#mb-trip:active,#flow-check-btn:active,#test-btn:active,#manual-btn:active,#new-well-btn:active{
  transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px rgba(0,0,0,.4),0 1px 4px rgba(var(--g),.25)}
#mb-drill.active,#mb-trip.active,#flow-check-btn.on,#test-btn.on{
  background:linear-gradient(180deg,var(--c1),var(--c2));border-color:var(--c1);color:var(--tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 2px var(--ink-1),0 0 0 4px var(--c1),0 0 18px rgba(var(--g),.6)}
#mb-drill:not(.active),#mb-trip:not(.active){filter:brightness(.72) saturate(.85)}
#mb-drill:not(.active):hover,#mb-trip:not(.active):hover{filter:brightness(1)}
#flow-check-btn.on{animation:fcPulse 1s ease-in-out infinite}
@keyframes fcPulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 2px var(--ink-1),0 0 0 4px var(--c1),0 0 28px rgba(var(--g),.95)}}
@media (prefers-reduced-motion:reduce){#flow-check-btn.on{animation:none}}
/* START / STOP share the same key-cap depth */
#run-btn{border:1px solid #86e3a9;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.2),0 3px 14px rgba(111,207,151,.34);text-shadow:0 1px 0 rgba(255,255,255,.2)}
#run-btn.running{border-color:#f0725f;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25),0 3px 14px rgba(229,83,61,.4);text-shadow:none}
#run-btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}

/* ── manual dialog ── */
#man-dlg{margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--ink-1);color:var(--paper);width:min(1100px,96vw);height:min(92vh,900px);overflow:hidden;
  box-shadow:var(--hi),0 12.5px 10px rgba(0,0,0,.06),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.14)}
#man-dlg::backdrop{background:rgba(0,0,0,.7)}
#man-dlg[open]{display:flex;flex-direction:column}
.man-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(180deg,var(--ink-3),var(--ink-1));border-bottom:1px solid var(--line);flex-shrink:0}
.man-bar b{font-family:var(--f-head);font-size:15px;letter-spacing:.02em}
.man-bar a,.man-bar button{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);text-decoration:none;background:none;border:1px solid var(--line);border-radius:7px;padding:5px 12px;cursor:pointer}
.man-bar button{margin-left:0}
.man-bar a:hover,.man-bar button:hover{color:var(--paper);border-color:var(--steel)}
#man-frame{flex:1;width:100%;border:0;background:var(--ink-0)}