/* Drilling Tools - shared premium skin. Loaded AFTER each tool's own style.css: it re-maps the tools' colour
   variables and restyles shared components. Tool logic, ids and markup are untouched. */
@import url("fonts.css");

:root{
  /* palette taken from the subject: mud log paper, formation strata, drilling fluid, steel, well-control red */
  --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; --warn:#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;
  --f-math:"Cambria Math",Cambria,Georgia,serif;

  /* bridge: every tool's own variable names -> the shared palette */
  --bg:var(--ink-0); --surface:var(--ink-1); --card:var(--ink-2); --border:var(--line); --text:var(--paper);
  --accent:var(--mud); --accent2:var(--ok); --input-bg:var(--ink-0); --result:var(--ink-0);
  --green:var(--ok); --amber:var(--warn); --red:var(--kick); --tag:var(--ink-3);
  --acc:var(--mud); --brd:var(--line); --grn:var(--ok); --inp:var(--ink-0); --met:var(--water); --mut:var(--muted); --res:var(--ink-0); --surf:var(--ink-1); --txt:var(--paper); --yel:var(--warn);
}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::selection{background:var(--mud);color:var(--ink-0)}
html{color-scheme:dark}
body{font-family:var(--f-body)!important;color:var(--paper);font-size:14.5px;
  background:
    linear-gradient(rgba(79,195,217,.035) 1px,transparent 1px) 0 0/100% 48px,
    linear-gradient(90deg,rgba(79,195,217,.035) 1px,transparent 1px) 0 0/48px 100%,
    var(--ink-0)!important;}

/* ── header: strata stripe along the bottom edge ── */
header{background:linear-gradient(180deg,var(--ink-2),var(--ink-1))!important;border-bottom:0!important;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--sand) 0 22%,var(--shale) 22% 47%,var(--lime) 47% 63%,var(--water) 63% 82%,var(--mud) 82%)}
header h1{font-family:var(--f-head)!important;font-weight:700!important;font-size:1.65rem!important;letter-spacing:.01em;color:var(--paper)!important}
header p{color:var(--muted)!important;font-size:.82rem!important}

/* ── unit switch ── */
.unit-toggle,.utog{background:var(--ink-0)!important;border:1px solid var(--line);border-radius:10px!important;padding:3px;gap:2px!important}
.unit-toggle button,.utog button,.toggle-btn{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}
.unit-toggle button.active,.utog button.on,.toggle-btn.active{background:var(--mud)!important;color:var(--ink-0)!important;box-shadow:0 2px 10px rgba(232,163,61,.35)}
.unit-toggle button:not(.active),.utog button:not(.on),.toggle-btn:not(.active){background:transparent!important;color:var(--muted)!important}
.unit-toggle label{color:var(--muted)}

/* ── navigation: a depth ruler runs down the edge ── */
nav{background:var(--ink-1)!important;border-right:1px solid var(--line)!important;position:relative}
nav::after{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(180deg,var(--shale) 0 1px,transparent 1px 12px) right/6px 100% no-repeat,
             repeating-linear-gradient(180deg,var(--steel) 0 1px,transparent 1px 60px) right/12px 100% no-repeat}
nav .nav-section,nav .ns{display:flex;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-family:var(--f-head);font-weight:600!important;font-size:.95rem!important;color:var(--paper)!important;margin-top:14px!important}
nav .nav-section::before,nav .ns::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--sand)}
nav .nav-section:nth-of-type(4n+2)::before,nav .ns:nth-of-type(4n+2)::before{background:var(--shale)}
nav .nav-section:nth-of-type(4n+3)::before,nav .ns:nth-of-type(4n+3)::before{background:var(--lime)}
nav .nav-section:nth-of-type(4n+4)::before,nav .ns:nth-of-type(4n+4)::before{background:var(--water)}
nav a{color:var(--muted)!important;font-weight:500;border-left:3px solid transparent!important;transition:color .15s,background .15s,padding-left .2s!important}
nav a:hover{color:var(--paper)!important;background:var(--ink-2)!important;padding-left:24px!important}
nav a.active,nav a.on{color:var(--paper)!important;background:linear-gradient(90deg,rgba(232,163,61,.16),transparent)!important;border-left-color:var(--mud)!important}

/* ── tabs (pressure calculator) ── */
.tabs{background:var(--ink-1)!important;border-bottom:1px solid var(--line)!important}
.tab{font-family:var(--f-head);font-weight:600;font-size:.95rem;color:var(--muted)!important;border-bottom:3px solid transparent!important;transition:color .2s,border-color .2s,background .2s}
.tab:hover{color:var(--paper)!important;background:var(--ink-2)!important}
.tab.active{color:var(--paper)!important;border-bottom-color:var(--mud)!important;background:linear-gradient(180deg,transparent,rgba(232,163,61,.12))!important}

/* ── section titles ── */
.section-title,.sec-hd{font-family:var(--f-head)!important;font-weight:700!important;font-size:1.5rem!important;color:var(--paper)!important;border-bottom:1px solid var(--line)!important}
.sec-hd span{color:var(--muted)!important;font-family:var(--f-body)}

/* ── cards: a thin strata band on top, lifts on hover ── */
.card,.info-card{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;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sand)}
.cards>.card:nth-child(4n+2)::before,.grid>.card:nth-child(4n+2)::before{background:var(--shale)}
.cards>.card:nth-child(4n+3)::before,.grid>.card:nth-child(4n+3)::before{background:var(--lime)}
.cards>.card:nth-child(4n+4)::before,.grid>.card:nth-child(4n+4)::before{background:var(--water)}
.card:hover{border-color:#3a5368!important;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.card h3,.info-card h3{font-family:var(--f-head)!important;font-weight:600!important;font-size:1.12rem!important;letter-spacing:.005em;color:var(--paper)!important}
.card .sub{color:var(--muted)!important}

/* ── formulas read like typeset equations ── */
.card .formula,.formula,.fml{font-family:var(--f-math)!important;font-style:italic;font-size:.9rem!important;color:var(--lime)!important;
  background:rgba(216,210,192,.07)!important;border-left:3px solid var(--mud);border-radius:0 8px 8px 0!important;padding:7px 11px!important}
.fml .f,.fml .s,.fml .m{font-family:inherit}

/* ── inputs ── */
.field label,.fl label{color:var(--muted)!important;font-size:.8rem!important;font-weight:500}
.field input,.field select,.fl input,.fl select,.row input,.row 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);font-size:.95rem!important;padding:9px 11px!important;font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.fl input:focus,.fl select:focus{outline:none!important;border-color:var(--mud)!important;box-shadow:0 0 0 3px rgba(232,163,61,.22)}
.field input::placeholder,.fl input::placeholder{color:#556a7b}
.unit-label{color:var(--mud)!important;font-weight:600}

/* ── calculate button ── */
.btn{background:linear-gradient(180deg,var(--mud),var(--mud-d))!important;color:var(--ink-0)!important;font-family:var(--f-head);font-weight:700!important;font-size:1rem!important;letter-spacing:.02em;
  border-radius:9px!important;box-shadow:0 4px 14px rgba(232,163,61,.28);transition:transform .12s,box-shadow .2s,filter .2s!important}
.btn:hover{opacity:1!important;filter:brightness(1.1);box-shadow:0 6px 20px rgba(232,163,61,.4)}
.btn:active{transform:scale(.975)}
.btn:focus-visible,nav a:focus-visible,.tab:focus-visible,button:focus-visible{outline:2px solid var(--water);outline-offset:2px}

/* ── result readout ── */
.result-box,.result,.rb{background:var(--ink-0)!important;border:1px solid var(--line)!important;border-left:4px solid var(--ok)!important;border-radius:10px!important;color:var(--ok)!important;
  font-family:var(--f-head);font-weight:600!important;font-size:1.08rem!important;font-variant-numeric:tabular-nums;transition:border-color .3s,color .3s}
.result-box.warn,.result.warn,.rb.w{border-left-color:var(--warn)!important;color:var(--warn)!important}
.result-box.error,.result.err,.rb.e{border-left-color:var(--kick)!important;color:var(--kick)!important}
.rb.i{border-left-color:var(--water)!important;color:var(--water)!important}
.note{color:#6f8496!important}

/* ── visual result panel (injected by shared/viz.js) ── */
.dv{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(120% 90% at 50% 0,var(--ink-3),var(--ink-0));padding:10px 10px 8px;
  animation:dvIn .45s cubic-bezier(.2,.8,.2,1) both}
.dv[hidden]{display:none}
.dv-hero{display:flex;align-items:baseline;gap:8px;padding:0 4px 2px}
.dv-hero b{font-family:var(--f-head);font-weight:700;font-size:2rem;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.dv-hero span{color:var(--mud);font-weight:600}
.dv-hero em{margin-left:auto;font-style:normal;font-size:.72rem;color:var(--muted)}
.dv svg{display:block;width:100%;height:auto}
.dv svg text{font-family:var(--f-body);fill:var(--muted);font-size:9.5px}
.dv svg .strong{fill:var(--paper);font-weight:600}
.dv .cap{font-size:.72rem;color:var(--muted);padding:2px 4px 0}
.dv.is-warn .dv-hero b{color:var(--warn)} .dv.is-err .dv-hero b{color:var(--kick)}
@keyframes dvIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dvFlow{to{stroke-dashoffset:-48}}
@keyframes dvWave{to{transform:translateX(-60px)}}
@keyframes dvDraw{from{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}
@keyframes dvPulse{0%,100%{opacity:.35}50%{opacity:1}}

@media(max-width:700px){header h1{font-size:1.3rem!important}.dv-hero b{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}