:root{
  --blue:#0067df;
  --deep:#06376f;
  --cyan:#20b6d9;
  --aqua:#e7f7fb;
  --gold:#f7b928;
  --red:#d71920;
  --orange:#f57921;
  --ink:#152336;
  --muted:#627186;
  --line:#d9e8f6;
  --panel:#ffffffd9;
  --bg:#f5f9fd;
  --shadow:0 18px 45px rgba(6,55,111,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(135deg,#fff 0%,#f3f9ff 45%,#eef8fb 100%);color:var(--ink)}
button{font:inherit}
.app-shell{max-width:1720px;margin:0 auto;padding:22px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:24px;padding:18px 22px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.brand{display:flex;gap:18px;align-items:center}.dropmark{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--blue),#0aa3b1);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:900;box-shadow:0 12px 26px rgba(0,103,223,.22)}
h1{margin:.1rem 0 .25rem;font-size:31px;letter-spacing:-.03em;color:var(--deep)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#0870a6;font-weight:800}.brand p{margin:0;color:var(--muted)}
.linklike{border:0;background:none;color:var(--blue);text-decoration:underline;cursor:pointer;padding:0}.status-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.status-strip>div{min-width:118px;background:#f8fbff;border:1px solid var(--line);border-radius:16px;padding:9px 12px}.status-strip .label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.status-strip strong{display:block;color:var(--deep);font-size:15px}.pill{display:inline-flex!important;align-items:center;justify-content:center;min-width:auto!important;font-weight:800}.pill.good{background:#eaf8ef;border-color:#bce5c6;color:#197044}.tabs{display:flex;gap:8px;margin:18px 0;overflow:auto;padding-bottom:2px}.tab{border:1px solid var(--line);background:#fff;color:var(--deep);border-radius:999px;padding:10px 15px;font-weight:800;white-space:nowrap;cursor:pointer}.tab.active{background:linear-gradient(135deg,var(--deep),var(--blue));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(0,103,223,.2)}
.view{display:none}.view.active{display:block}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}.visual-card,.detail-panel,.card,.metric-card,.control-card,.quality-card,.nexus-card,.endorsement-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.visual-card{overflow:hidden}.visual-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.visual-toolbar h2,.section-header h2{margin:0;color:var(--deep);letter-spacing:-.02em}.visual-toolbar p,.section-header p{margin:5px 0 0;color:var(--muted)}.secondary{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;color:var(--deep);font-weight:800;cursor:pointer}.diagram-wrap{position:relative;background:#fff}.diagram-wrap img{display:block;width:100%;height:auto}.hotspot{position:absolute;border:2px solid transparent;border-radius:16px;background:rgba(0,103,223,.01);cursor:pointer}.hotspot:hover,.hotspot.active{border-color:var(--blue);background:rgba(32,182,217,.08);box-shadow:0 0 0 4px rgba(32,182,217,.15)}.hotspot.danger:hover,.hotspot.danger.active{border-color:var(--red);background:rgba(215,25,32,.1);box-shadow:0 0 0 4px rgba(215,25,32,.16)}
.detail-panel{position:sticky;top:18px;padding:22px;min-height:560px}.detail-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#0f7ea5;font-weight:900}.detail-panel h2{margin:8px 0;color:var(--deep);font-size:27px}.detail-panel p{color:var(--muted);line-height:1.55}.meta-list{display:grid;gap:10px;margin:18px 0}.meta{border:1px solid var(--line);border-radius:16px;padding:12px;background:#f9fcff}.meta span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.meta strong{display:block;margin-top:4px;color:var(--ink)}.detail-actions{display:grid;gap:10px}.action-link{border:0;border-radius:16px;background:linear-gradient(135deg,#fff3d0,#ffe7a2);color:#6e4700;padding:12px;text-align:left;font-weight:800;cursor:pointer}.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.metric-card{padding:18px}.metric-card span{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:900;letter-spacing:.1em}.metric-card strong{display:block;font-size:28px;color:var(--deep);margin:6px 0}.metric-card em{font-style:normal;color:var(--muted)}.metric-card.good{border-left:5px solid #2cb36d}.metric-card.warning{border-left:5px solid var(--gold)}.metric-card.alert{border-left:5px solid var(--red)}
.section-header{margin:10px 0 18px;padding:20px 4px}.section-header.split{display:flex;justify-content:space-between;align-items:center;gap:12px}.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.strategy-item{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;grid-template-columns:44px 1fr;gap:14px;box-shadow:var(--shadow)}.check-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:900}.check-icon.good{background:#eaf8ef;color:#197044}.check-icon.warn{background:#fff4d2;color:#8a5a00}.strategy-item h3{margin:0 0 5px;color:var(--deep)}.strategy-item p{margin:0;color:var(--muted);line-height:1.45}.strategy-item .source{margin-top:12px;color:var(--blue);font-size:13px;font-weight:800}.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:800;color:var(--deep);cursor:pointer}.filter.active{background:var(--deep);color:#fff}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.control-card{padding:18px;position:relative;overflow:hidden}.control-card.critical{border-color:#f3d26f;background:linear-gradient(180deg,#fffde9,#fff)}.control-card.process{border-color:#dce5ef}.control-card .tag{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900}.tag.critical{background:#fff1a6;color:#795100}.tag.process{background:#eaf4ff;color:#075dae}.tag.monitoring{background:#eff6f8;color:#23616d}.control-card h3{margin:12px 0 6px;color:var(--deep)}.control-card p{color:var(--muted);line-height:1.45}.limits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.limit{border:1px solid var(--line);background:#f8fbff;border-radius:14px;padding:10px}.limit span{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:900}.limit strong{display:block;color:var(--ink);margin-top:5px}.small-list{margin:10px 0 0;padding-left:18px;color:var(--muted)}.small-list li{margin:4px 0}.assign-btn{margin-top:12px;border:0;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer}
.action-table-wrap{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:auto}.action-table{width:100%;border-collapse:collapse;min-width:980px}.action-table th{background:#eff6fd;color:var(--deep);text-align:left;padding:13px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.action-table td{padding:13px;border-top:1px solid var(--line);vertical-align:top}.status-select{border:1px solid var(--line);border-radius:12px;padding:7px;background:#fff}.priority{font-weight:900;border-radius:999px;padding:5px 9px;display:inline-block}.priority.high{background:#ffe5e7;color:#a10f15}.priority.medium{background:#fff4d2;color:#805400}.priority.low{background:#eaf8ef;color:#197044}.storage-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:16px}.card{padding:20px}.card h3{margin:0 0 14px;color:var(--deep)}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left}th{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.07em}.note{color:var(--muted);font-size:13px}.bar-chart{display:grid;gap:8px}.bar-row{display:grid;grid-template-columns:38px 1fr 44px;gap:10px;align-items:center}.bar-track{height:16px;border-radius:999px;background:#edf5fb;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:999px}.quality-grid,.nexus-grid,.endorsement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.quality-card,.nexus-card,.endorsement-card{padding:18px}.quality-card h3,.nexus-card h3,.endorsement-card h3{margin:0 0 10px;color:var(--deep)}.quality-card .reading{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0;color:var(--muted)}.exceed{color:var(--red)!important;font-weight:900}.nexus-card button{margin-top:12px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:9px 11px;color:var(--blue);font-weight:900;cursor:pointer}.workflow{display:flex;gap:8px;margin-bottom:18px;overflow:auto}.step{position:relative;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--muted);font-weight:900}.step.done{background:#eaf8ef;color:#197044;border-color:#bce5c6}.step.active{background:linear-gradient(135deg,var(--deep),var(--blue));color:#fff}.endorsement-card{display:grid;gap:6px}.endorsement-card .date{font-weight:900;color:#197044}.modal-backdrop{position:fixed;inset:0;background:rgba(10,25,45,.45);display:grid;place-items:center;padding:20px;z-index:20}.modal{max-width:560px;width:100%;background:#fff;border-radius:24px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.25);position:relative}.modal-close{position:absolute;right:16px;top:12px;border:0;background:#f1f6fb;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}.modal h2{color:var(--deep);margin:10px 0}.modal p{color:var(--muted);line-height:1.55}.modal-foot{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;color:var(--muted);font-size:13px}
@media(max-width:1100px){.hero-grid,.storage-grid{grid-template-columns:1fr}.detail-panel{position:static;min-height:auto}.summary-row,.checklist,.control-grid,.quality-grid,.nexus-grid,.endorsement-grid{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}

/* Ensure prototype modals are actually hidden until opened. */
[hidden] { display: none !important; }

/* ── v2 additions ───────────────────────────────────────────── */

/* Threshold bar in detail panel */
.threshold-bar-wrap{margin:6px 0 4px}
.threshold-bar{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,#dc2626 0%,#f59e0b 18%,#16a34a 35%,#16a34a 65%,#f59e0b 82%,#dc2626 100%);overflow:visible}
.threshold-needle{position:absolute;top:-4px;width:4px;height:18px;background:var(--deep);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 0 2px #fff}
.threshold-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px}

/* Bore warning callout */
.bore-warning{background:#fff4d2;border:1px solid var(--gold);border-radius:16px;padding:14px;margin-top:14px}
.bore-warning strong{color:#7a4800;display:block;margin-bottom:4px}
.bore-warning p{margin:0;color:#5a3800;font-size:13px;line-height:1.5}

/* Safety chain status in detail */
.chain-status{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;margin-top:14px;font-weight:700}
.chain-ok{background:#eaf8ef;color:#197044;border:1px solid #bce5c6}
.chain-fail{background:#ffe5e7;color:#a10f15;border:1px solid #f5b8bb}
.chain-warn{background:#fff4d2;color:#7a4800;border:1px solid #f7d48a}

/* Open valve button in detail panel */
.valve-open-btn{width:100%;margin-top:16px;padding:13px;border:0;border-radius:16px;background:linear-gradient(135deg,#a10f15,#d71920);color:#fff;font-weight:900;font-size:15px;cursor:pointer;letter-spacing:.02em}
.valve-open-btn:hover{opacity:.88}
.valve-approved-banner{background:#fff4d2;border:1px solid var(--gold);border-radius:16px;padding:12px;margin-top:12px;font-size:13px;color:#7a4800;font-weight:700}

/* Critical valve overlay */
.cv-overlay{position:fixed;inset:0;background:rgba(120,0,0,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:30}
.cv-modal{max-width:520px;width:100%;background:#fff;border-radius:28px;padding:32px;box-shadow:0 40px 100px rgba(0,0,0,.4);text-align:center}
.cv-icon{font-size:52px;line-height:1;margin-bottom:12px}
.cv-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900;color:#a10f15;margin-bottom:8px}
.cv-modal h2{color:var(--deep);margin:0 0 12px;font-size:22px}
.cv-modal p{color:var(--muted);line-height:1.55;margin:0 0 16px}
.cv-sdm{background:#fff4d2;border:1px solid var(--gold);border-radius:16px;padding:14px;margin:16px 0}
.cv-sdm-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800;margin-bottom:4px}
.cv-sdm strong{display:block;font-size:22px;color:#a10f15}
.cv-sdm-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cv-note{font-size:13px;color:var(--ink);font-weight:700;margin-bottom:20px!important}
.cv-actions{display:grid;gap:10px}
.cv-btn-approve{padding:13px;border:0;border-radius:16px;background:linear-gradient(135deg,#b45309,var(--gold));color:#fff;font-weight:900;cursor:pointer;font-size:14px}
.cv-btn-close{padding:13px;border:0;border-radius:16px;background:linear-gradient(135deg,#197044,#2cb36d);color:#fff;font-weight:900;cursor:pointer;font-size:14px}

/* Full chemical sampling table */
.chem-table-wrap{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:auto;margin-top:8px}
.chem-table{width:100%;border-collapse:collapse;min-width:900px;font-size:13px}
.chem-table thead tr:first-child th{background:var(--deep);color:#fff;padding:12px 10px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.chem-table thead tr:last-child th{background:#eef5fb;color:var(--muted);padding:8px 10px;font-size:10px;text-align:center;border-bottom:2px solid var(--line)}
.chem-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center;color:var(--ink)}
.chem-table td:first-child{text-align:left;font-weight:600;color:var(--deep)}
.chem-table td:nth-child(2),.chem-table td:nth-child(3){color:var(--muted);font-size:12px}
.chem-table tr:hover td{background:#f8fbff}
.chem-exceed{background:rgba(215,25,32,.08);color:#a10f15;font-weight:900}
.chem-warn{background:rgba(247,185,40,.12);color:#7a4800;font-weight:700}

/* Micro grid */
#microGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.micro-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:18px}
.micro-card h3{margin:0 0 10px;color:var(--deep)}
.micro-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0;color:var(--muted)}
.micro-detect{color:var(--red);font-weight:900}
.micro-clear{color:#197044;font-weight:700}