:root{
  --navy:#1F4E5F; --navy-d:#163a47; --navy-l:#2c6b80;
  --ink:#1a2327; --muted:#5c6b72; --line:#e2e8ea; --bg:#f4f7f8; --card:#ffffff;
  --amber:#b7791f; --amber-bg:#fdf3e2; --red:#b3261e; --green:#1f7a4d; --green-bg:#e6f4ec;
  --radius:14px; --shadow:0 1px 3px rgba(16,40,48,.08),0 8px 24px rgba(16,40,48,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1{font-size:1.7rem;margin:0 0 .4rem;letter-spacing:-.01em}
h2.section-h{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);
  margin:2rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.lede{color:var(--muted);max-width:60ch}
.hidden{display:none!important}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--navy);color:#fff;padding:.8rem 1.4rem}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{height:40px;width:40px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.brand-name{font-weight:700;font-size:1.05rem}
.brand-sub{font-size:.78rem;opacity:.8}
.investor{font-size:.82rem;opacity:.9;text-align:right}
.investor b{display:block;font-size:.95rem;opacity:1}

main{max-width:1000px;margin:0 auto;padding:1.6rem 1.4rem 3rem}
.view{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow)}
.centered{text-align:center;max-width:440px;margin:3rem auto}

.intro{margin-bottom:1.4rem}
.fineprint{color:var(--muted);font-size:.8rem;margin-top:1.6rem;max-width:66ch}

/* case cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.case:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(16,40,48,.13);border-color:var(--navy-l)}
.case h3{margin:.2rem 0 .5rem;font-size:1.12rem;color:var(--navy)}
.case .unit{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.case p{font-size:.9rem;color:var(--ink);flex:1;margin:.6rem 0 1rem}
.case .hl{font-size:.78rem;color:var(--navy-d);background:#eef4f5;border-radius:20px;
  padding:.3rem .7rem;align-self:flex-start;font-weight:600}
.case .go{margin-top:.9rem;color:var(--navy-l);font-weight:600;font-size:.9rem}

/* chips */
.chip{display:inline-block;font-size:.78rem;padding:.28rem .7rem;border-radius:20px;
  background:#eef2f3;color:var(--navy-d);font-weight:600}
.chip.amber{background:var(--amber-bg);color:var(--amber)}
.chip.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

.back{background:none;border:none;color:var(--navy-l);font-size:.9rem;cursor:pointer;
  padding:.3rem 0;margin-bottom:.6rem;font-weight:600}
.run-head{margin-bottom:1.2rem}
.run-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 .9rem}
.run-error{margin-top:.8rem;color:var(--red);background:#fbe9e7;border:1px solid #f3cfca;
  border-radius:8px;padding:.6rem .9rem;font-size:.9rem;max-width:48ch}

/* buttons */
.primary{background:var(--navy);color:#fff;border:none;border-radius:10px;padding:.8rem 1.6rem;
  font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s}
.primary:hover{background:var(--navy-d)}
.primary:disabled{opacity:.5;cursor:default}
.secondary{display:inline-block;background:#fff;color:var(--navy);border:1.5px solid var(--navy);
  border-radius:10px;padding:.65rem 1.2rem;font-weight:600;text-decoration:none;cursor:pointer}
.secondary:hover{background:#eef4f5}
.actions{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* spinner + progress */
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--navy);
  border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
#progress{text-align:center;max-width:520px;margin:1.4rem auto}
.progress-track{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:1rem}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--navy-l),var(--navy));
  transition:width .5s ease}

/* results */
.result-topline{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.stat{text-align:center;padding-right:1.4rem;border-right:1px solid var(--line)}
.stat-val{font-size:1.9rem;font-weight:700;color:var(--green)}
.stat-lbl{font-size:.74rem;color:var(--muted);max-width:130px}
.summary{font-size:1.05rem;font-weight:600;color:var(--ink);flex:1;min-width:220px}

.findings{display:flex;flex-direction:column;gap:.9rem}
.finding{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--navy-l);
  border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.finding.sev-trip-risk{border-left-color:var(--red)}
.finding.sev-mechanical{border-left-color:var(--amber)}
.finding.sev-instrument{border-left-color:var(--navy-l)}
.finding.sev-info{border-left-color:var(--green)}
.finding .f-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.finding h3{margin:0;font-size:1.08rem;color:var(--navy-d)}
.finding .when{font-size:.82rem;color:var(--muted)}
.finding .sevtag{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:.2rem .6rem;border-radius:6px;background:#eef2f3;color:var(--navy-d)}
.finding.sev-trip-risk .sevtag{background:#fbe9e7;color:var(--red)}
.finding.sev-mechanical .sevtag{background:var(--amber-bg);color:var(--amber)}
.finding .action{margin:.7rem 0 .5rem;font-size:.95rem}
.finding .advisory{font-size:.8rem;color:var(--muted);font-style:italic}

/* what-if */
.whatif-grid{display:grid;grid-template-columns:220px 1fr;gap:1.4rem;align-items:start}
.stat-tiles{display:flex;flex-direction:column;gap:.8rem}
.tile{background:var(--green-bg);border:1px solid #cfe7d9;border-radius:12px;padding:.9rem 1rem}
.tile .tv{font-size:1.5rem;font-weight:700;color:var(--green)}
.tile .tl{font-size:.76rem;color:var(--muted)}
.tile.warn{background:#fbe9e7;border-color:#f3cfca}
.tile.warn .tv{color:var(--red)}
.chart-wrap{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.6rem;box-shadow:var(--shadow)}

.methodology{margin-top:1.8rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.4rem 1.1rem}
.methodology summary{cursor:pointer;font-weight:600;color:var(--navy);padding:.7rem 0}
.methodology ul{margin:.2rem 0 1rem;padding-left:1.1rem}
.methodology li{font-size:.84rem;color:var(--muted);margin:.4rem 0}

.footer{text-align:center;color:var(--muted);font-size:.78rem;padding:1.4rem;border-top:1px solid var(--line)}

@media(max-width:640px){
  .whatif-grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line);padding:0 0 .8rem}
  .result-topline{flex-direction:column;align-items:stretch}
}

/* ---------- pipeline ---------- */
#pipe-title{margin-top:.2rem}
#pipe-sub{margin-bottom:1.1rem}

/* step rail */
.rail{display:flex;align-items:center;gap:.2rem;margin:0 0 1.6rem;flex-wrap:wrap}
.rail-node{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:78px;opacity:.55}
.rail-node.current,.rail-node.done{opacity:1}
.rail-node.clickable{cursor:pointer}
.rail-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-size:.85rem;background:#e6edee;color:var(--muted);border:2px solid transparent}
.rail-node.current .rail-dot{background:var(--navy);color:#fff}
.rail-node.done .rail-dot{background:var(--green);color:#fff}
.rail-label{font-size:.72rem;text-align:center;color:var(--muted);max-width:88px}
.rail-node.current .rail-label{color:var(--navy);font-weight:600}
.rail-line{flex:1;height:2px;background:var(--line);min-width:12px;margin-top:-18px}

/* stage cards */
.stage-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow)}
.stage-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-l);font-weight:700;margin-bottom:.5rem}
.stage-card>p{color:var(--ink);max-width:70ch}
.stage-actions{margin-top:1.4rem;display:flex;gap:.7rem}
.stage-actions.wrap{flex-wrap:wrap}
.muted{color:var(--muted);font-size:.9rem}

/* file row + chip */
.file-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0;
  padding:.8rem 1rem;background:#f7fafa;border:1px solid var(--line);border-radius:12px}
.file-chip{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink);margin-right:auto}
.file-ic{color:var(--navy-l);font-size:1.1rem}

/* dropzone / feed */
.feed{margin-top:1.2rem;border-top:1px dashed var(--line);padding-top:1.1rem}
.feed-title{font-weight:700;color:var(--navy-d);margin-bottom:.2rem}
.dropzone{display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  min-height:74px;margin-top:.7rem;border:2px dashed #c4d4d7;border-radius:12px;cursor:pointer;
  color:var(--muted);font-size:.92rem;padding:.8rem;transition:border-color .15s,background .15s;position:relative}
.dropzone:hover{border-color:var(--navy-l);background:#f5fafb}
.dropzone.drag{border-color:var(--navy);background:#eef6f8}
.dropzone.has-file{border-style:solid;border-color:var(--green);background:var(--green-bg);color:var(--green)}
.dz-flash{position:absolute;bottom:-1.6rem;left:0;right:0;text-align:center;color:var(--red);font-size:.8rem}

/* P&ID — constructed from the design file on demand (tank units) */
.pid-build{margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
#pid-out:empty{display:none}
#pid-out{margin-top:1rem}
.pid-figure{margin:0}
.pid-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  font-size:.9rem;color:var(--muted);margin:0 0 .6rem}
.pid-cap b{color:var(--navy-d)}
.pid-full{font-size:.85rem;color:var(--navy-l);font-weight:600;text-decoration:none;white-space:nowrap}
.pid-full:hover{text-decoration:underline}
.pid-frame{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.7rem;overflow-x:auto}
.pid-img{display:block;width:100%;min-width:660px;height:auto}
.pid-img.reveal{animation:pidReveal .55s ease}
@keyframes pidReveal{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* design-source tabs */
.src-tabs{display:flex;gap:.4rem;margin:1.1rem 0 .9rem;border-bottom:2px solid var(--line)}
.src-tab{background:none;border:none;cursor:pointer;font-size:.92rem;font-weight:600;
  color:var(--muted);padding:.5rem .9rem;border-bottom:3px solid transparent;margin-bottom:-2px}
.src-tab.active{color:var(--navy);border-bottom-color:var(--navy)}
.src-tab:hover{color:var(--navy-d)}
.src-pane{min-height:70px}

/* example-plant presets */
.preset-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.preset{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;text-align:left;
  background:#f7fafa;border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem;
  cursor:pointer;transition:border-color .15s,transform .15s}
.preset:hover{border-color:var(--navy-l);transform:translateY(-2px)}
.preset b{color:var(--navy);font-size:.95rem}
.preset span{color:var(--muted);font-size:.8rem}

/* per-finding evidence chart (from the blind record) */
.finding-fig{margin:.9rem 0 0}
.finding-fig img{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}

/* what-if scope (the supervisory simulation answers ONE finding) */
.whatif-for{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.whatif-scope{max-width:70ch;margin:-.3rem 0 .9rem}

/* sealed truth-key note */
.lock-note{margin:1rem 0 0;padding:.75rem 1rem;background:var(--amber-bg);
  border:1px solid #ecd9b0;border-radius:12px;font-size:.9rem;color:#6b4e12}

/* scorecard */
.score-tiles{margin:1.1rem 0}
.score-table table{border-collapse:collapse;width:100%;font-size:.9rem}
.score-table th{text-align:left;background:var(--navy);color:#fff;padding:.5rem .7rem;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em}
.score-table td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.sc-fam{white-space:nowrap}
.sc-note{color:var(--muted);font-size:.85rem}
.verdict{display:inline-block;font-weight:700;font-size:.8rem;padding:.22rem .65rem;border-radius:20px}
.v-GREEN{background:#e6f4ec;color:#1f7a4d}
.v-AMBER{background:#fdf3e2;color:#8a6414}
.v-RED{background:#fdecea;color:#b3261e}

/* distribution bars */
.dist{display:flex;flex-direction:column;gap:.4rem;margin:1.1rem 0}
.bar-row{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:.7rem;font-size:.85rem}
.bar-lab{color:var(--ink);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:#eef2f3;border-radius:6px;height:14px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--navy-l),var(--navy));border-radius:6px}
.bar-fill.healthy{background:linear-gradient(90deg,#3a9d6b,var(--green))}
.bar-val{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.dist-note{margin:.2rem 0 1rem;font-size:.8rem}

/* model stat */
.model-row{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.stat.big{padding:1.1rem 1.5rem;background:var(--green-bg);border:1px solid #cfe7d9;border-radius:14px;border-right:1px solid #cfe7d9;text-align:center}
.stat.big .stat-val{font-size:2.4rem}
.model-row p{flex:1;min-width:240px}

/* progress card inside a stage */
.progress-card{margin-top:1.2rem;text-align:center}

/* inspector modal */
.modal{position:fixed;inset:0;background:rgba(16,32,38,.55);display:grid;place-items:center;z-index:50;padding:1.2rem}
.modal-card{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:86vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;
  background:var(--navy);color:#fff}
.modal-head h3{margin:0;font-size:1.05rem}
.modal-close{background:none;border:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 .3rem}
.insp-meta{color:var(--muted);font-size:.82rem;padding:.7rem 1.3rem 0;margin:0}
.insp-tabs{display:flex;gap:.3rem;flex-wrap:wrap;padding:.6rem 1.3rem;border-bottom:1px solid var(--line)}
.insp-tab{background:#eef2f3;border:none;border-radius:7px 7px 0 0;padding:.35rem .7rem;font-size:.8rem;
  cursor:pointer;color:var(--navy-d)}
.insp-tab.active{background:var(--navy);color:#fff}
.insp-body{padding:1rem 1.3rem;overflow:auto}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.insp-body table{border-collapse:collapse;font-size:.8rem;min-width:100%}
.insp-body td,.insp-body th{border:1px solid var(--line);padding:.3rem .55rem;text-align:left;
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.insp-body th{background:#f2f6f7;font-weight:700;position:sticky;top:0}
.insp-body tr:nth-child(even) td{background:#fafcfc}

@media(max-width:640px){
  .rail-label{display:none}
  .rail-line{margin-top:0}
  .bar-row{grid-template-columns:96px 1fr 52px}
  .model-row{flex-direction:column;align-items:stretch}
  .stat.big{border-right:1px solid #cfe7d9}
}