*{box-sizing:border-box} body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:#f1f5f9;color:#0f172a}
header.top{display:flex;align-items:center;gap:24px;background:#0f172a;color:#fff;padding:10px 20px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:700}.brand .sub{font-size:13px;font-weight:400;color:#94a3b8;margin-right:8px}
nav a{color:#e2e8f0;text-decoration:none;margin-left:16px;font-size:15px}nav a:hover{color:#38bdf8}
.who{margin-right:auto;font-size:14px;display:flex;gap:8px;align-items:center}.who a{color:#93c5fd}
.pill{background:#334155;border-radius:999px;padding:3px 12px;font-size:12px}
.pill.ok{background:#166534}.pill.warn{background:#92400e}
main{max-width:1200px;margin:18px auto;padding:0 16px}
footer{text-align:center;color:#64748b;font-size:12px;padding:20px}
h2{font-size:18px;margin:18px 0 8px}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:16px}
.card.narrow{max-width:420px;margin:60px auto}
.grid2{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:10px}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tile{display:block;background:#fff;border:2px solid #cbd5e1;border-radius:14px;padding:22px 14px;text-align:center;
 font-size:16px;font-weight:600;color:#0f172a;text-decoration:none;transition:.15s}
.tile:hover{border-color:#0ea5e9;transform:translateY(-2px)}
.tile.fault{border-color:#dc2626;background:#fef2f2}.tile.param{border-color:#7c3aed;background:#f5f3ff}
.tile.ok{border-color:#16a34a;background:#f0fdf4}.tile.warn{border-color:#d97706;background:#fffbeb}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;font-size:14px}
.tbl th{background:#e2e8f0;text-align:right;padding:8px}.tbl td{padding:7px 8px;border-top:1px solid #f1f5f9;vertical-align:top}
.tbl a{color:#0369a1;text-decoration:none;font-weight:600}
.sev-Critical td:first-child{border-right:5px solid #dc2626}.sev-High td:first-child{border-right:5px solid #f97316}
.sev-Medium td:first-child{border-right:5px solid #eab308}
.flash{padding:10px 16px;border-radius:10px;margin:10px 0;font-size:14px}
.flash.ok{background:#dcfce7;color:#14532d}.flash.err{background:#fee2e2;color:#7f1d1d}
.flash.warn{background:#fef3c7;color:#78350f}
form label{display:block;margin:10px 0 4px;font-size:14px;font-weight:600}
input,select,textarea{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;font-family:inherit}
textarea{min-height:70px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1;min-width:160px}
.btn{background:#e2e8f0;border:none;border-radius:9px;padding:10px 22px;font-size:15px;font-weight:600;cursor:pointer;margin-top:10px}
.btn.primary{background:#0ea5e9;color:#fff}.btn.danger{background:#dc2626;color:#fff}.btn.ok{background:#16a34a;color:#fff}
.btn.tiny{padding:3px 10px;font-size:12px;margin:0}
.muted{color:#94a3b8}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.chip{border:2px solid #cbd5e1;border-radius:999px;padding:6px 14px;cursor:pointer;user-select:none;background:#fff}
.chip input{display:none}.chip:has(input:checked){background:#0ea5e9;color:#fff;border-color:#0284c7}
fieldset{border:1px solid #e2e8f0;border-radius:10px;margin:12px 0;padding:12px}
legend{font-weight:700;font-size:14px;padding:0 8px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:4px 14px;font-size:14px}.kv dt{font-weight:700;color:#475569}
.checklist label{font-weight:400;display:flex;gap:10px;align-items:center;margin:6px 0}
.checklist input{width:20px;height:20px}
pre.sum{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px;white-space:pre-wrap;font-family:inherit;font-size:14px}
@media print{header,footer,.noprint{display:none}main{max-width:100%}body{background:#fff}}
.settbl input,.settbl select{padding:5px;font-size:13px}
.settbl td{padding:4px}
h3{font-size:15px;margin:8px 0 4px}

/* Sequence step-matrix, styled to resemble the real HMI's Sequences screen (2.4,
   docs/POST_DEPLOYMENT_WORK_PLAN.md) -- scoped to this one table, not a site-wide
   dark theme; reuses the header's existing dark navy (#0f172a) rather than a new color. */
.seq-matrix{background:#0f172a;border-radius:10px;padding:6px}
.seq-matrix table{width:100%;border-collapse:collapse;font-size:14px}
.seq-matrix th{background:#1e293b;color:#94a3b8;text-align:center;padding:8px 10px;font-weight:600;white-space:nowrap}
.seq-matrix td{padding:8px 10px;text-align:center;border:1px solid #1e293b;color:#fff;font-weight:700}
.seq-matrix td:first-child{background:#1e293b;color:#cbd5e1;font-weight:600}
.seq-matrix td.empty{color:#475569;font-weight:400;background:#0f172a}
.seq-matrix select{background:#1e293b;color:#fff;border:1px solid #334155;border-radius:6px;padding:4px}
.seq-matrix select option{background:#1e293b;color:#fff}
.infragrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 14px}
.infragrid label{margin:4px 0 0;font-size:13px}
.kv2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;font-size:14px}

/* mobile-first pre-startup checklist */
.chk-sticky{position:sticky;top:0;background:#fff;z-index:10;padding:8px 4px;border-bottom:2px solid #e2e8f0}
.chk-head{display:flex;justify-content:space-between;font-size:17px;padding:2px 6px}
.chk-bar{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.chk-bar div{height:100%;background:#16a34a;transition:width .3s}
.chk-cat{background:#0f172a;color:#fff;padding:8px 14px;border-radius:10px;font-size:16px}
.chk-item{background:#fff;border:2px solid #e2e8f0;border-radius:14px;padding:12px;margin:10px 0}
.chk-item.res-ok{border-color:#16a34a;background:#f0fdf4}
.chk-item.res-fail{border-color:#dc2626;background:#fef2f2}
.chk-item.res-na{border-color:#94a3b8;background:#f8fafc}
.chk-text{font-size:16px;font-weight:600;margin-bottom:8px}
.chk-btns{display:flex;gap:8px;flex-wrap:wrap}
.cb{flex:1;min-width:96px;min-height:48px;border:2px solid #cbd5e1;border-radius:12px;background:#fff;
 font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px}
.cb.ok.sel{background:#16a34a;color:#fff;border-color:#15803d}
.cb.fail.sel{background:#dc2626;color:#fff;border-color:#b91c1c}
.cb.na.sel{background:#64748b;color:#fff;border-color:#475569}
.cb.photo{flex:0;min-width:110px;background:#f1f5f9}
.chk-note,.chk-val{margin-top:8px;font-size:15px}
.chk-row2{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:13px}
.chk-status{margin-right:auto;color:#16a34a;font-weight:700}
@media(max-width:600px){main{padding:0 8px}.chk-text{font-size:17px}.cb{min-height:54px}}
/* --- mobile-first pre-start checklist --- */
.cl-sticky{position:sticky;top:0;background:#0f172a;color:#fff;padding:10px 14px;border-radius:0 0 12px 12px;z-index:50;margin:-18px -16px 12px}
.cl-head{display:flex;justify-content:space-between;font-size:17px}
.cl-bar{background:#334155;border-radius:99px;height:8px;margin-top:8px;overflow:hidden}
.cl-bar div{background:#22c55e;height:100%;transition:width .3s}
.cl-cat{font-weight:800;font-size:16px;margin:18px 2px 6px;color:#0f172a;border-right:5px solid #0ea5e9;padding-right:8px}
.cl-row{background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cl-row[data-state="ok"]{border-right:6px solid #16a34a}
.cl-row[data-state="fail"]{border-right:6px solid #dc2626;background:#fef2f2}
.cl-row[data-state="na"]{border-right:6px solid #94a3b8;opacity:.85}
.cl-text{font-size:15px;margin-bottom:8px}
.cl-crit{background:#fee2e2;color:#991b1b;border-radius:6px;font-size:11px;padding:1px 7px;font-weight:700}
.cl-btns{display:flex;gap:8px}
.cb{flex:1;padding:14px 4px;font-size:15px;font-weight:700;border:2px solid #cbd5e1;border-radius:10px;background:#f8fafc;cursor:pointer;min-height:48px}
.cb.ok.on{background:#16a34a;color:#fff;border-color:#15803d}
.cb.fail.on{background:#dc2626;color:#fff;border-color:#b91c1c}
.cb.na.on{background:#64748b;color:#fff;border-color:#475569}
.cl-note{margin-top:8px}
.cl-done{margin:20px 0}
@media(max-width:640px){
 main{padding:0 10px}
 header.top{padding:8px 10px;gap:8px}
 nav a{margin-left:10px;font-size:13px}
 .brand{font-size:16px}.brand .sub{display:none}
 .tiles{grid-template-columns:repeat(2,1fr)}
 .settbl,.tbl{font-size:12px}
}

.ts-note{font-size:11px;color:#64748b;text-align:left}
.sigblock{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:10px 14px;margin:8px 0;font-size:13px}
.sigblock code{background:#e0f2fe;padding:1px 6px;border-radius:5px;direction:ltr;display:inline-block}
.sig-ok{color:#15803d;font-weight:700}.sig-bad{color:#b91c1c;font-weight:700}