/* ═══════════════════════════════════════════════════════════════════
   OPSVOICE UI — portal component kit
   The Two Shot · August 2026 · matches the approved reference-mock.html
   and the approved opsvoice.com redesign (site-v5, locked Aug 13 2026).

   HOW TO USE: paste this whole block into the <style> section of each
   template being restyled (or, if JBIT approves a shared stylesheet,
   serve it once and link it). Then swap the page's markup onto these
   classes. Do not re-derive colors — use the variables.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ground and housings */
  --paper:#E7EBEE; --paper-hi:#F9FBFC; --paper-lo:#D5DCE1;
  --edge:#B7C2C9; --edge-2:#96A4AD;
  --ink:#07090C; --ink-2:#262E36; --grey:#5F6B74;
  --case:#12181D; --case-hi:#28323B; --case-lo:#080C10;
  --face:#060A0D; --face-hi:#05080B; --face-lo:#0E1418;
  --btn-hi:#FDFEFE; --btn-lo:#D8DFE4;
  /* the green: data, status, "live" */
  --green:#3DF59F; --green-hi:#8AFFC8;
  --disp:#F2FBF6; --disp-dim:#B2C6BC; --disp-dim2:#84958D;
  /* the orange: actions, warnings, "you are here" */
  --orange:#FF4D1F; --or-hi:#FF6B2E; --or-lo:#F03D00; --or-edge:#D63500;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --sans:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  --r:14px;
}

/* page ground: dark, with a slight top light */
.ov-body{background-color:#161D24;
  background-image:linear-gradient(180deg,#242D35 0%,#161D24 40%,#0C1218 100%);
  background-attachment:fixed;
  font-family:var(--sans);color:var(--ink);min-height:100vh}

/* mono annotation label (orange = structural label) */
.ov-ann{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;
  color:var(--orange);text-transform:uppercase;line-height:1}
.ov-ann.dim{color:var(--grey)}

/* ── wordmark keycap (the "Ops" key) ── */
.ov-logo{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;
  font-size:24px;letter-spacing:-1px;color:var(--disp);line-height:1;text-decoration:none}
.ov-logo .cap{display:inline-block;padding:3px;border-radius:9px;
  background:linear-gradient(180deg,#2A353E 0%,#171F26 55%,#0A0F14 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 0 #000306,0 8px 12px -4px rgba(0,0,0,.6)}
.ov-logo .cap i{display:block;border-radius:6px;padding:4px 9px 6px;font-style:normal;
  color:var(--green);text-shadow:0 0 12px rgba(61,245,159,.4);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75)}
.ov-logo .lt{font-weight:400;padding-left:9px}

/* ── keycap buttons and tabs ── */
.ov-key{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);padding:9px 15px;border-radius:8px;font-weight:500;
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 rgba(0,0,0,.35);
  cursor:pointer;text-decoration:none}
.ov-key:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.ov-key.on,.ov-key.hot{background:linear-gradient(180deg,var(--or-hi),var(--or-lo));
  color:#fff;border-color:var(--or-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 0 rgba(0,0,0,.35)}
.ov-key.sm{padding:4px 10px;font-size:9.5px;font-weight:600;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1.5px 0 rgba(0,0,0,.3)}
.ov-key.sm.ok{color:#0B6B41;border-color:#6BCB9C}

/* ── light plastic card (the housing everything sits in) ── */
.ov-card{background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:var(--r);padding:20px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 36px -18px rgba(0,0,0,.55)}
.ov-card h1{font-family:var(--sans);font-size:24px;letter-spacing:-.8px;font-weight:700;margin:0}

/* inset panel inside a card */
.ov-inset{border:1px solid var(--edge);border-radius:10px;padding:13px 16px;
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo))}

/* ── dark display (numbers live here, in green) ── */
.ov-disp{border-radius:10px;padding:13px 16px 12px;
  background:linear-gradient(180deg,var(--face-hi),var(--face));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.7),inset 0 0 0 1px rgba(61,245,159,.08)}
.ov-disp .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  color:var(--disp-dim2);text-transform:uppercase}
.ov-disp .v{font-family:var(--mono);font-size:27px;font-weight:600;color:var(--green);
  letter-spacing:-1px;margin-top:5px;text-shadow:0 0 16px rgba(61,245,159,.4)}
.ov-disp .v small{font-size:11px;color:var(--disp-dim);font-weight:500;letter-spacing:0}

/* ── section heading inside cards ── */
.ov-h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin:0 0 12px}
.ov-h2 span{font-size:9px;color:var(--grey);font-weight:500;letter-spacing:.1em;text-transform:none}

/* ── tables ── */
.ov-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ov-table th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);padding:7px 9px;
  border-bottom:1px solid var(--edge-2);font-weight:600}
.ov-table td{padding:8px 9px;border-bottom:1px solid var(--edge);color:var(--ink-2)}
.ov-table td.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink)}

/* ── status pills ── */
.ov-pill{display:inline-block;border-radius:6px;padding:3px 8px;font-family:var(--mono);
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ov-pill.ok{color:#0B6B41;border:1px solid #6BCB9C;background:rgba(61,245,159,.15)}
.ov-pill.ok::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--green);margin-right:6px;box-shadow:0 0 4px rgba(61,245,159,.8);vertical-align:1px}
.ov-pill.warn{color:#A33A00;border:1px solid var(--or-hi);background:rgba(255,77,31,.10)}
.ov-pill.off{color:var(--grey);border:1px solid var(--edge-2);background:rgba(0,0,0,.04)}

/* ── LED dot (live/enabled state) ── */
.ov-led{display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--green);
  box-shadow:0 0 5px rgba(61,245,159,.7);vertical-align:1px}
.ov-led.off{background:var(--edge-2);box-shadow:none}

/* ── form fields ── */
.ov-fld{display:block;margin-bottom:14px}
.ov-fld span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.ov-fld input,.ov-fld select,.ov-fld textarea{width:100%;font-family:var(--sans);font-size:15px;
  color:var(--ink);background:var(--paper-hi);border:1px solid var(--edge);border-radius:9px;
  padding:11px 13px;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.ov-fld input:focus,.ov-fld select:focus,.ov-fld textarea:focus{outline:none;
  border-color:var(--green);box-shadow:inset 0 1px 3px rgba(0,0,0,.08),0 0 0 3px rgba(61,245,159,.18)}

/* ── big action button (submit) ── */
.ov-btnhot{display:inline-block;background:linear-gradient(180deg,var(--or-hi),var(--or-lo));
  color:#fff;border:1px solid var(--or-edge);border-radius:9px;padding:13px 24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 3px rgba(0,0,0,.3)}
.ov-btnhot:active{transform:translateY(1px)}

/* ── footer strip ── */
.ov-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--disp-dim2)}
.ov-foot b{color:var(--green);font-weight:600}