/* Drilling Tools - skin for the app-style tools (kill sheet, well planner, simulator). Colours, fonts, borders, motion only:
   no sizes or layout rules, so each tool keeps its own layout. Loaded after the tool's style.css. */
@import url("fonts.css");
:root{
  --ink-0:#0b1117;--ink-1:#111a22;--ink-2:#17222c;--ink-3:#1e2c38;--line:#27394a;--paper:#e8edf1;--muted:#8fa2b3;
  --mud:#e8a33d;--mud-d:#b97c1e;--water:#4fc3d9;--steel:#9fb4c7;--kick:#e5533d;--ok:#6fcf97;--amber:#f2c14e;
  --sand:#c9a36b;--shale:#5f7587;--lime:#d8d2c0;
  --f-head:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;--f-body:"Barlow",system-ui,-apple-system,sans-serif;
  /* well planner */
  --bg:var(--ink-0);--panel:var(--ink-1);--panel2:var(--ink-2);--hdr:var(--ink-1);--row-alt:#131d26;--inp:var(--ink-0);--inp-border:var(--line);--inp-focus:var(--mud);
  --border:var(--line);--blue:var(--water);--blue2:var(--mud);--gold:var(--mud);--green:var(--ok);--green2:var(--ok);--orange:var(--mud);--red:var(--kick);--teal:var(--water);
  --text:var(--paper);--text2:var(--steel);--text3:var(--muted);
  /* simulator */
  --bg2:var(--ink-1);--bg3:var(--ink-2);--bg4:var(--ink-3);--text1:var(--paper);--cyan:var(--water);--grn:var(--ok);--purple:#b79cf0;--ui:var(--f-body);--num:var(--f-head);
}
html{color-scheme:dark}
body{font-family:var(--f-body)!important;background:var(--ink-0)!important;color:var(--paper)}
::selection{background:var(--mud);color:var(--ink-0)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--water);outline-offset:2px}

/* ── top bars with a strata stripe ── */
#topbar,#hdr{background:linear-gradient(180deg,var(--ink-2),var(--ink-1))!important;border-bottom:0!important;position:relative}
#topbar::after,#hdr::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%)}
#topbar h1,#hdr h1{font-family:var(--f-head)!important;font-weight:700!important;letter-spacing:.01em;color:var(--paper)!important}
#hdr h1 span{color:var(--muted)!important}

/* ── toggles and tabs ── */
.utog,.mtog{background:var(--ink-0)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:2px}
.utog button,.mtog button{font-family:var(--f-body)!important;font-weight:600!important;border-radius:7px!important;border:0!important;transition:background .2s,color .2s,box-shadow .2s}
.utog button.on,.mtog button.on{background:var(--mud)!important;color:var(--ink-0)!important;box-shadow:0 2px 10px rgba(232,163,61,.35)}
.m-dm .mtog button[data-m=dm].on,.m-ww .mtog button[data-m=ww].on,.m-vol .mtog button[data-m=vol].on,.m-bh .mtog button[data-m=bh].on,.m-lb .mtog button[data-m=lb].on{background:var(--mud)!important;color:var(--ink-0)!important}
#tabbar,#tabs{background:var(--ink-1)!important;border-bottom:1px solid var(--line)!important}
.tab-btn{font-family:var(--f-head)!important;font-weight:600!important;font-size:1rem!important;color:var(--muted)!important;background:transparent!important;border-bottom:3px solid transparent!important;transition:color .2s,background .2s,border-color .2s}
.tab-btn:hover{color:var(--paper)!important;background:var(--ink-2)!important}
.tab-btn.on{color:var(--paper)!important;border-bottom-color:var(--mud)!important;background:linear-gradient(180deg,transparent,rgba(232,163,61,.13))!important}

/* ── panels and cards ── */
.card,.well-info-box,.calc-info-box,.status-box,.plan-section,.plan-output,#chartWrap,.proc-section{background:linear-gradient(180deg,var(--ink-2),var(--ink-1))!important;border:1px solid var(--line)!important;border-radius:14px!important;position:relative;overflow:hidden}
.card h3,.well-info-box h3,.calc-info-box h3,.status-box h3,.plan-section h3,.plan-output h3,#chartWrap h3,.proc-section h3{font-family:var(--f-head)!important;font-weight:600!important;color:var(--paper)!important;letter-spacing:.01em}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sand)}
.card:nth-of-type(4n+2)::before{background:var(--shale)}.card:nth-of-type(4n+3)::before{background:var(--lime)}.card:nth-of-type(4n+4)::before{background:var(--water)}

/* ── inputs and buttons ── */
input[type=number],input[type=text],select,.fi input,.fi select{background:var(--ink-0)!important;border:1px solid var(--line)!important;border-radius:9px!important;color:var(--paper)!important;font-family:var(--f-body)!important;font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s}
input[type=number]:focus,input[type=text]:focus,select:focus{outline:none!important;border-color:var(--mud)!important;box-shadow:0 0 0 3px rgba(232,163,61,.22)!important}
label{color:var(--muted)}
.btn,.print-btn,.preset-btn,.sec-add-btn{font-family:var(--f-head)!important;font-weight:700!important;letter-spacing:.02em;border-radius:9px!important;transition:transform .12s,filter .2s,box-shadow .2s!important}
.btn:hover,.print-btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.975)}
.btn.grn,#calc-btn{background:linear-gradient(180deg,var(--mud),var(--mud-d))!important;color:var(--ink-0)!important;border:0!important;box-shadow:0 4px 14px rgba(232,163,61,.28)}

/* ── live result tiles ── */
.res-box{background:var(--ink-0)!important;border:1px solid var(--line)!important;border-radius:12px!important;transition:border-color .3s,box-shadow .3s}
.res-box .rv{font-family:var(--f-head)!important;font-weight:700!important;font-variant-numeric:tabular-nums}
.res-box.green{border-color:rgba(111,207,151,.55)!important}.res-box.yellow{border-color:rgba(242,193,78,.6)!important}.res-box.red{border-color:rgba(229,83,61,.65)!important}.res-box.blue{border-color:rgba(79,195,217,.55)!important}
.flash{animation:flash .9s ease-out}
@keyframes flash{0%{text-shadow:0 0 14px var(--mud);color:var(--mud)}100%{text-shadow:none}}

/* ── tables ── */
.sched-table th,table.sv th,.sec-tbl th,table.plan-tbl th{background:var(--ink-3)!important;color:var(--steel)!important;font-family:var(--f-head);font-weight:600}
.sched-table td,table.sv td,.sec-tbl td,table.plan-tbl td{font-variant-numeric:tabular-nums;border-color:var(--line)!important}
.sched-table tr:nth-child(even) td,table.sv tr:nth-child(even) td{background:rgba(255,255,255,.02)!important}
.sched-table tr.hl td{background:rgba(232,163,61,.14)!important}

/* ── procedure steps and status bar ── */
.step-num{background:var(--mud)!important;color:var(--ink-0)!important;font-family:var(--f-head);font-weight:700}
.proc-val{color:var(--mud)!important}
#statusbar{background:var(--ink-1)!important;border-top:1px solid var(--line)!important}
.vol-step.active{border-color:var(--mud)!important}.vol-step.done{border-color:var(--ok)!important}

/* ── live schematic panel (kill sheet) ── */
.kz{display:flex;flex-direction:column;gap:6px}
.kz svg{width:100%;max-width:340px;height:auto;margin:0 auto;display:block}
.kz svg text{font-family:var(--f-body);fill:var(--muted);font-size:9.5px}
.kz svg .strong{fill:var(--paper);font-weight:600}
.kz svg .rise{animation:rise 2.6s linear infinite}
@keyframes rise{from{transform:translateY(0);opacity:.9}to{transform:translateY(-34px);opacity:0}}
.kz .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--muted)}
.kz .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}