/* Methanol Ship — Simulator-specific styles (extends shared/simulator-theme.css) */

/* HEADER */

/* LAYOUT */
#main {
  display: grid;
  grid-template-columns: 210px 1fr 220px;
  grid-template-rows: 1fr 210px;
  gap: 4px; padding: 4px;
  height: calc(100vh - 44px);
}

@keyframes fireblink { 0%,100%{background:rgba(255,61,0,.15)} 50%{background:rgba(255,61,0,.45)} }
@keyframes igblink   { 0%,100%{background:rgba(255,171,0,.1)} 50%{background:rgba(255,171,0,.3)} }

/* GAUGES */

/* VALVES */

/* BUTTONS */

.btn-esd   { background:rgba(255,61,0,.15); border-color:var(--red); color:var(--red); }
.btn-esd:hover { background:rgba(255,61,0,.35); }
.btn-esd.fired { background:var(--red2); color:#fff; animation:fireblink .5s infinite; }
.btn-fire  { background:rgba(255,109,0,.12); border-color:var(--orange); color:var(--orange); }
.btn-fire:hover { background:rgba(255,109,0,.3); }
.btn-fire.active { background:var(--orange); color:#000; }
.btn-bunk  { background:rgba(100,255,218,.07); border-color:var(--cyan); color:var(--cyan); }
.btn-bunk:hover { background:rgba(100,255,218,.18); }
.btn-rst   { background:rgba(255,255,255,.04); border-color:var(--muted); color:var(--muted); }
.btn-rst:hover { color:var(--white); border-color:var(--white); }

/* ALARM */

.alm-item.fire { border-left-color:var(--red); animation:fireblink 1s infinite; }
.alm-item.warn { border-left-color:var(--amber); background:rgba(255,171,0,.07); }

.alm-item.clear{ border-left-color:var(--green); opacity:.6; }

.alm-tag.F { background:rgba(255,61,0,.3); color:var(--red); }

.alm-tag.A { background:rgba(100,255,218,.15); color:var(--cyan); }

/* PPM / LEL GRID */
.det-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.det-cell { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:3px; padding:5px 7px; }
.det-cell.w10  { border-color:var(--amber); background:rgba(255,171,0,.07); }
.det-cell.w50  { border-color:var(--red); background:rgba(255,61,0,.1); animation:fireblink 1s infinite; }
.det-zone { font-size:9px; color:var(--muted); }
.det-val  { font-family:var(--font-mono); font-size:17px; color:var(--green); margin:1px 0; }
.det-val.warn  { color:var(--amber); }
.det-val.alarm { color:var(--red); }
.det-unit { font-size:9px; color:var(--muted); }
.det-bar  { height:4px; border-radius:2px; background:var(--green); transition:width .3s,background .3s; }

/* INERT GAS */
.ig-cell {
  border:1px solid var(--border2); border-radius:3px; padding:5px 7px;
  margin-bottom:5px; background:rgba(100,255,218,.04);
}
.ig-cell.danger { animation:igblink 1.2s infinite; border-color:var(--amber); }
.ig-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.ig-val   { font-family:var(--font-mono); font-size:16px; color:var(--cyan); }
.ig-val.warn { color:var(--amber); }

/* SCENARIO */

/* FIRE BANNER */
#fire-banner {
  display:none; position:absolute; top:48px; left:0; right:0;
  background:#cc2200; color:#fff; text-align:center; padding:8px;
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:3px;
  z-index:50; animation:blink .5s infinite;
}

/* MODAL */

/* ── PIPELINE LINE-UP ── */
.pl-sec{font-size:9px;font-family:monospace;color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase;padding:4px 8px 1px;border-bottom:1px dashed rgba(255,255,255,.06);}
.pl-row{display:flex;align-items:center;gap:4px;padding:2px 8px;border-bottom:1px solid rgba(255,255,255,.03);}
.pl-id{font-family:monospace;font-size:10px;color:rgba(255,255,255,.7);min-width:60px;}
.pl-desc{font-size:10px;color:rgba(255,255,255,.75);flex:1;}
.pl-vbtn{padding:1px 7px;font-size:8px;font-family:monospace;border-radius:2px;cursor:pointer;border:1px solid;transition:all .12s;flex-shrink:0;}
.pl-vbtn.open{border-color:#00e676;color:#00e676;background:rgba(0,230,118,.1);}
.pl-vbtn.closed{border-color:#ff4444;color:#ff4444;background:rgba(255,68,68,.08);}
.pl-vbtn.transitioning { background: rgba(255,171,0,0.12); border-color: var(--amber,#ffab00); color: var(--amber,#ffab00); }
.pl-vbtn.req{animation:plreq .8s infinite;}
.pl-status{margin:4px 8px;padding:3px 8px;border-radius:2px;font-family:monospace;font-size:9px;text-align:center;}
.pl-status.ok{border:1px solid #00e676;color:#00e676;background:rgba(0,230,118,.06);}
.pl-status.fault{border:1px solid #ff4444;color:#ff4444;background:rgba(255,68,68,.07);}
.pl-status.idle{border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.3);}
.pl-toggle{padding:3px 8px;font-size:9px;font-family:monospace;color:rgba(255,255,255,.4);background:rgba(0,0,0,.3);border:none;border-top:1px solid rgba(255,255,255,.06);cursor:pointer;width:100%;text-align:left;}
.pl-toggle:hover{color:rgba(255,255,255,.8);}