* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overscroll-behavior: none; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: #f0f2f5; color: #1a1a1a; }

.header { background: #111; color: #fff; padding: 12px 14px; }
.header-scanned { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; margin-bottom: 4px; }
.header-asset-pill { display: inline-block; background: #fff; color: #111; font-size: 15px; font-weight: 800; padding: 4px 12px; border-radius: 6px; letter-spacing: 1px; }
.header-desc { font-size: 12px; opacity: 0.85; margin-top: 5px; }

.cards { padding: 10px 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card { background: #fff; border-radius: 8px; padding: 10px 12px; border-left: 4px solid #111; }
.card-full { grid-column: 1 / -1; }
.card-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }
.card-value { font-size: 14px; font-weight: 600; margin-top: 2px; color: #1a1a1a; }

.card-split { display: flex; justify-content: space-between; align-items: center; }
.card-split-divider { width: 1px; background: #eee; align-self: stretch; margin: 0 12px; }
.card-split-right { text-align: right; }

.section-title { display: inline-flex; align-items: center; justify-content: center; background: #111; color: #F5C400; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 16px; border-radius: 20px; margin: 10px 12px 4px; }
.step-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #000; padding: 8px 12px 2px; font-weight: 800; }

.buttons { padding: 0 10px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { width: 100%; padding: 13px 8px; border: none; border-left: 4px solid #FF6B00; border-radius: 8px; background: #fff; color: #000; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.btn-disabled { background: #fff; color: #111; border-left: 4px solid #FF6B00; cursor: not-allowed; opacity: 0.4; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.btn-scope { padding: 13px 8px; border: none; border-left: 4px solid #2A7ED0; border-radius: 8px; background: #e8f0fb; color: #111; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; display: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin: 0 10px 6px; width: calc(100% - 20px); }
a { text-decoration: none; }

.fed-from-wrap { padding: 6px 10px 12px; }
.fed-from-btn { width: 100%; padding: 11px 14px; border: none; border-left: 5px solid #111; border-radius: 8px; background: #fff; text-align: left; box-shadow: 0 1px 4px rgba(26,43,74,0.12); cursor: pointer; }
.fed-from-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #111; font-weight: 700; margin-bottom: 7px; }
.fed-from-pill { font-size: 11px; font-weight: 700; color: #111; background: #fff; padding: 4px 10px; border-radius: 6px; border: 2px solid #111; display: inline-block; }
.fed-from-desc { font-size: 11px; font-weight: 700; color: #111; margin-top: 6px; }
.fed-from-tap  { font-size: 10px; color: #999; font-style: italic; margin-top: 3px; }

.footer { padding: 14px 12px; text-align: center; font-size: 11px; color: #999; }
.footer-org { font-size: 11px; font-weight: 600; color: #555; margin-bottom: 8px; }
.footer a { color: #111; }
.ai-pill { display: inline-flex; align-items: center; gap: 5px; background: #111; color: #fff; padding: 5px 14px; border-radius: 20px; font-size: 10px; font-weight: 600; margin-bottom: 8px; }

/* PPE Poster Modal */
.ppe-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 500; display: none; flex-direction: column; }
.ppe-modal.active { display: flex; }

/* ── Training Overlay ───────────────────────────────────────────────────── */
.training-overlay { position:fixed;inset:0;background:#f0f2f5;z-index:800;display:none;flex-direction:column;overflow:hidden; }
.training-overlay.active { display:flex; }
.tr-header { background:#111;color:#fff;padding:12px 14px 10px;flex-shrink:0; }
.tr-eyebrow { font-size:9px;text-transform:uppercase;letter-spacing:1.5px;opacity:0.6;margin-bottom:3px; }
.tr-title { font-size:17px;font-weight:800;letter-spacing:-0.3px; }
.tr-sub { font-size:10px;opacity:0.65;margin-top:2px; }
.tr-close-btn { float:right;background:#333;color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:14px;font-weight:700;cursor:pointer;line-height:24px;text-align:center;margin-top:-1px; }
.tr-body { flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 0 40px; }
.tr-sec { padding:8px 10px 0; }
.tr-lbl { font-size:9px;text-transform:uppercase;letter-spacing:0.8px;color:#666;font-weight:700;margin-bottom:4px;padding:0 2px; }
.tr-sel { width:100%;background:#fff;border:1.5px solid #111;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:600;color:#111;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center; }
.tr-spill { display:inline-flex;align-items:center;background:#111;color:#F5C400;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin:8px 10px 5px; }
/* Roster */
.tr-roster-card { background:#fff;border:1.5px solid #ddd;border-radius:10px;margin:0 10px 6px;padding:11px 12px;display:flex;align-items:center;gap:10px;cursor:pointer; }
.tr-roster-card:active { background:#f9f9f9; }
.tr-avatar { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0; }
.tr-av-pend { background:#fff8e1;color:#856a00; }
.tr-av-active { background:#e8f5e9;color:#1A8A4A; }
.tr-rc-name { font-size:13px;font-weight:700;color:#111; }
.tr-rc-sub { font-size:9px;color:#888;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px; }
.tr-rc-right { margin-left:auto;text-align:right;flex-shrink:0; }
.tr-prog-bar { width:52px;height:4px;background:#eee;border-radius:2px;margin-bottom:3px; }
.tr-prog-fill { height:4px;border-radius:2px;background:#F5C400; }
.tr-prog-fill-done { background:#1A8A4A; }
.tr-rc-prog { font-size:9px;color:#888; }
.tr-status-pill { font-size:8px;font-weight:800;padding:2px 8px;border-radius:20px;display:inline-block;margin-top:3px; }
.tr-sp-pend { background:#fff8e1;color:#856a00; }
.tr-sp-active { background:#e8f5e9;color:#1A8A4A; }
.tr-new-btn { width:calc(100% - 20px);margin:0 10px 10px;padding:11px 14px;background:#111;color:#F5C400;border:1.5px solid #111;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box; }
.tr-new-icon { width:22px;height:22px;border-radius:50%;background:#F5C400;color:#111;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex-shrink:0; }
/* Trainee detail */
.tr-back-btn { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#111;padding:10px 10px 8px;cursor:pointer;background:#fff;border:none;border-bottom:1px solid #e8e8e8;width:100%; }
.tr-trainee-hdr { background:#fff;border:1.5px solid #111;border-radius:10px;margin:6px 10px 0;padding:11px 12px; }
.tr-th-row { display:flex;align-items:center;gap:10px; }
.tr-th-av { width:40px;height:40px;border-radius:50%;background:#fff8e1;color:#856a00;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0; }
.tr-th-av-active { background:#e8f5e9;color:#1A8A4A; }
.tr-th-name { font-size:14px;font-weight:800;color:#111; }
.tr-th-sub { font-size:9px;color:#888;margin-top:1px; }
.tr-th-meta { display:flex;gap:14px;margin-top:8px;padding-top:8px;border-top:1px solid #eee; }
.tr-th-meta-item { font-size:9px;color:#888; }
.tr-th-meta-item span { color:#111;font-weight:700; }
/* ── Node-map progress card ── */
.tr-progress-card { background:#fff;border:1.5px solid #ddd;border-radius:10px;margin:8px 10px 0;padding:10px 12px; }
.tr-prog-eyebrow { display:inline-flex;align-items:center;background:#111;color:#F5C400;font-size:9px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:1px;margin-bottom:8px; }
.tr-prog-hint { font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#aaa;margin-bottom:8px;font-weight:700; }
.tr-prog-svg { display:block;width:100%;overflow:visible; }
.tr-prog-status { font-size:10px;color:#666;text-align:center;margin-top:6px;font-style:italic; }
/* ── Node inline log card ── */
.tr-node-card { background:#fff;border:1.5px solid #111;border-radius:10px;margin:6px 10px 8px;overflow:hidden; }
.tr-nc-hdr { background:#111;padding:9px 12px; }
.tr-nc-hdr-done { background:#1A8A4A;padding:9px 12px; }
.tr-nc-id { font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:1px; }
.tr-nc-name { font-size:13px;font-weight:800;color:#fff; }
.tr-nc-sub { font-size:9px;color:rgba(255,255,255,.55);margin-top:1px; }
.tr-nc-sub-done { font-size:9px;color:rgba(255,255,255,.65);margin-top:1px; }
.tr-nc-body { padding:10px 12px; }
.tr-nc-field-lbl { font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:4px; }
.tr-nc-date { width:100%;border:1.5px solid #111;border-radius:6px;padding:7px 9px;font-size:12px;font-weight:600;color:#111;background:#fff;outline:none;margin-bottom:10px;box-sizing:border-box; }
.tr-photo-zone { border:1.5px dashed #ccc;border-radius:8px;padding:10px;text-align:center;background:#fafafa; }
.tr-photo-zone-done { border:1.5px solid #1A8A4A;background:#f0faf4; }
.tr-photo-name { font-size:10px;color:#888; }
.tr-photo-name-ok { color:#1A8A4A;font-weight:700; }
.tr-photo-sub { font-size:8px;color:#aaa;margin-top:2px; }
.tr-photo-actions { display:flex;gap:6px;margin-top:7px; }
.tr-photo-btn { flex:1;padding:7px;background:#111;color:#fff;border:none;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer; }
.tr-photo-btn-ghost { flex:1;padding:7px;background:#fff;color:#111;border:1.5px solid #111;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer; }
.tr-nc-confirm { width:100%;padding:11px;border-radius:8px;font-size:12px;font-weight:800;text-align:center;margin-top:8px;cursor:not-allowed;background:#f0f0f0;border:1.5px solid #ddd;color:#bbb; }
.tr-nc-confirm-on { background:#111;color:#F5C400;border-color:#111;cursor:pointer; }
/* read-only done rows */
.tr-ro-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.tr-ro-lbl { font-size:9px;color:#888; }
.tr-ro-val { font-size:11px;font-weight:700;color:#111; }
.tr-ro-val-green { font-size:11px;font-weight:700;color:#1A8A4A; }
.tr-drive-link { background:#e8f0fb;border-radius:6px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer; }
.tr-drive-link-txt { font-size:10px;color:#185FA5;font-weight:700; }
.tr-drive-link-arrow { font-size:10px;color:#185FA5; }
/* QEW assigned banner */
.tr-qew-assigned { background:#F5C400;border:1.5px solid #111;border-radius:10px;margin:6px 10px 10px;padding:13px 14px; }
.tr-qew-assigned-eye { font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:#856a00;margin-bottom:3px; }
.tr-qew-assigned-id { font-size:22px;font-weight:900;color:#111;letter-spacing:2px;margin-bottom:2px; }
.tr-qew-assigned-sub { font-size:9px;color:#666; }
.tr-success-banner { background:#fff;border:1.5px solid #1A8A4A;border-radius:8px;padding:9px 12px;margin:0 10px 10px; }
.tr-success-hd { font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#1A8A4A;font-weight:700;margin-bottom:4px; }
.tr-success-body { font-size:10px;color:#444;line-height:1.5; }
/* New trainee form */
.tr-form-card { background:#fff;border:1.5px solid #111;border-radius:10px;margin:6px 10px 8px;padding:10px 12px; }
.tr-field-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px; }
.tr-field-lbl { font-size:8px;text-transform:uppercase;letter-spacing:0.8px;color:#888;font-weight:700;margin-bottom:3px; }
.tr-field-in { width:100%;border:1.5px solid #ddd;border-radius:6px;padding:8px 10px;font-size:12px;font-weight:600;color:#111;outline:none;box-sizing:border-box; }
.tr-field-in:focus { border-color:#111; }
.tr-start-btn { width:100%;padding:10px;background:#F5C400;border:1.5px solid #111;border-radius:8px;font-size:12px;font-weight:800;color:#111;cursor:pointer;text-align:center; }
.tr-start-btn-off { background:#f0f0f0;border-color:#ddd;color:#bbb;cursor:not-allowed; }
/* Login overlay */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.72); z-index: 100; display: flex; align-items: center; justify-content: center; }
.prompt-box { background: #f0f2f5; border-radius: 12px; width: 88%; max-width: 360px; overflow: hidden; border: 1.5px solid #111; }
.prompt-header { background: #111; padding: 14px 16px 12px; }
.prompt-eyebrow { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
.prompt-title { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.prompt-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.prompt-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.prompt-site-row { background: #fff; border: 1.5px solid #111; border-radius: 8px; padding: 9px 12px; }
.prompt-site-lbl { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 3px; }
.prompt-site-val { font-family: monospace; font-size: 13px; font-weight: 700; color: #111; }
.prompt-input { width: 100%; padding: 12px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: monospace; color: #111; background: #fff; letter-spacing: 1px; box-sizing: border-box; }
.prompt-input:focus { border-color: #111; outline: none; }
.prompt-input-hint { font-size: 10px; color: #888; margin-top: -6px; padding-left: 2px; }
.prompt-btn { width: 100%; padding: 14px; background: #F5C400; color: #111; border: none; border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase; }
.prompt-btn:active { background: #e6b800; }
.prompt-cancel { display: flex; justify-content: center; }
.prompt-cancel-btn { font-size: 11px; color: #888; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 2px 0; }
.prompt-footer { border-top: 1px solid #ddd; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prompt-sta-row { display: flex; align-items: center; gap: 6px; }
.prompt-sta-pill { font-size: 8px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.prompt-sta-stop  { background: #fdecea; color: #CC0000; }
.prompt-sta-think { background: #fff3cd; color: #856404; }
.prompt-sta-act   { background: #e8f5e9; color: #1A8A4A; }
.prompt-tagline { font-size: 9px; color: #aaa; letter-spacing: 0.5px; text-transform: uppercase; }
.prompt-error { color: #CC0000; font-size: 12px; display: none; font-weight: 700; }
.prompt-spinner { display: none; text-align: center; padding: 4px 0; font-size: 12px; color: #111; font-weight: 600; }
@keyframes spin { 0%{transform:rotate(0deg)}100%{transform:rotate(360deg)} }
.spinner-icon { display: inline-block; animation: spin 1s linear infinite; font-size: 18px; margin-right: 6px; }

/* JSP Modal */
.jsp-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 200; display: none; overflow-y: auto; }
.jsp-modal.active { display: block; }
/* Node JSP modal — solid white, full viewport, above everything */
#nodeJspModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 500; display: none; overflow: hidden; border-radius: 14px; }
#nodeJspModal.active { display: flex; flex-direction: column; }
/* Active card pointer arrow */
.nj-awrap { position: relative; margin-top: 5px; margin-bottom: 4px; }
.nj-ptr { position: absolute; left: -9px; top: 13px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 9px solid #111; }
.jsp-inner { background: #f0f2f5; min-height: 100%; border-radius: 16px; border: 2px solid #111; overflow: hidden; }
.jsp-header { background: #111; color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.jsp-header-title { font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.jsp-header-sub { font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.jsp-close { font-size: 24px; color: #fff; opacity: 0.8; cursor: pointer; padding: 4px 8px; }
.auto-banner { background: #2A7ED0; color: #fff; padding: 7px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.scope-change-banner { background: #FF6B00; color: #fff; padding: 7px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; display: none; }
.auto-fields { background: #111; padding: 10px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.auto-field-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); }
.auto-field-value { font-size: 11px; font-weight: 700; color: #fff; margin-top: 1px; }
.auto-field-full { grid-column: 1 / -1; }
.jsp-body { padding: 12px 14px 30px; }

.jsp-step { margin: 18px 0 10px; }
.jsp-step-num { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #FF6B00; font-weight: 800; margin-bottom: 2px; }
.jsp-step-title { font-size: 14px; font-weight: 800; color: #111; }
.jsp-step-sub { font-size: 11px; color: #666; margin-top: 3px; line-height: 1.4; }

.field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; font-weight: 600; margin-bottom: 4px; }
.field-select { width: 100%; padding: 11px 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 13px; font-weight: 600; color: #111; background: #fff; -webkit-appearance: none; appearance: none; }
.field-select:focus { border-color: #111; outline: none; }
.field-textarea { width: 100%; padding: 10px 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 13px; color: #111; background: #fff; resize: none; line-height: 1.5; margin-top: 4px; }
.field-textarea:focus { border-color: #111; outline: none; }

.tier-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin-top: 6px; }
.tier-badge-1 { background: #e8f5e9; color: #2e7d32; }
.tier-badge-2 { background: #fff3cd; color: #856404; border: 1px solid #F5C300; }
.tier-badge-3 { background: #fdecea; color: #CC0000; }

/* Tier 2 specific */
.tier2-upstream-stop { background: #fdecea; border-left: 4px solid #CC0000; border-radius: 8px; padding: 12px 14px; margin-top: 8px; display: none; }
.tier2-upstream-stop.active { display: block; }
.tier2-scope-advisory { background: #fff8e1; border-left: 4px solid #F5C300; border-radius: 8px; padding: 11px 14px; margin-top: 8px; display: none; }
.tier2-scope-advisory.active { display: block; }
.tier2-scope-advisory-text { font-size: 11px; font-weight: 700; color: #856404; line-height: 1.6; }
.tier2-label-callout { background: #e8f0fb; border-left: 4px solid #2A7ED0; border-radius: 8px; padding: 11px 14px; margin-bottom: 10px; }
.tier2-label-callout-text { font-size: 11px; font-weight: 700; color: #111; line-height: 1.6; }
.tier2-boundary-display { background: #111; border-radius: 8px; padding: 10px 14px; margin-top: 6px; display: none; }
.tier2-boundary-display.active { display: block; }
.tier2-noc-baseline { background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.tier2-andon-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eee; }
.tier2-andon-row:last-child { border-bottom: none; }
.tier2-andon-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tier2-andon-label { font-size: 11px; color: #111; }

.eswc-advisory { background: #e8f0fb; border-left: 4px solid #111; border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 10px; display: none; }
.eswc-advisory.active { display: block; }
.eswc-advisory-text { font-size: 12px; font-weight: 700; color: #111; line-height: 1.6; }

.scope-change-field { background: #fff3cd; border-left: 4px solid #FF6B00; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; display: none; }
.scope-change-field.active { display: block; }
.scope-change-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #856404; margin-bottom: 6px; }

/* Risk questions */
.risk-question { background: #fff; border-radius: 8px; padding: 11px 12px; border-left: 4px solid #FF6B00; margin-bottom: 8px; }
.risk-question-text { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 4px; line-height: 1.4; }
.risk-question-ref { font-size: 10px; color: #666; margin-bottom: 8px; }
.risk-question-hint { font-size: 10px; color: #666; margin-bottom: 8px; font-style: italic; }
.yn-row { display: flex; gap: 8px; }
.yn-btn { flex: 1; padding: 10px 8px; border: 2px solid #111; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; color: #111; transition: all 0.15s; }
.yn-btn.yes-active { background: #111; border-color: #111; color: #fff; }
.yn-btn.no-active  { background: #CC0000; border-color: #111; color: #fff; }
.yn-btn.yn-green   { background: #2e7d32; border-color: #111; color: #fff; }
.yn-btn.yn-yellow  { background: #F5C300; border-color: #F5C300; color: #000; }

.ie-btn { padding: 10px 12px; border: 2px solid #ddd; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; color: #555; }
.ie-options { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ie-btn.ie-active-low    { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.ie-btn.ie-active-medium { background: #F5C300; border-color: #F5C300; color: #856404; }
.ie-btn.ie-active-high   { background: #CC0000; border-color: #CC0000; color: #fff; }

/* PPE pill inside JSP */

/* Voltage advisory */
.voltage-advisory { border-left: 4px solid #F5C300; border-radius: 0 8px 8px 0; padding: 9px 12px; margin-top: 6px; display: none; background: #fff8e1; }
.voltage-advisory.active { display: block; }
.voltage-advisory-text { font-size: 11px; font-weight: 700; color: #856404; line-height: 1.6; }

/* IE discrepancy blink */
@keyframes mismatch-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.35; }
}
.mismatch-blink { animation: mismatch-blink 1.1s ease-in-out 4; }
.ie-discrepancy-ack { background:#fff;border:1.5px solid #CC0000;border-radius:8px;padding:10px 12px;margin-top:8px;display:flex;align-items:flex-start;gap:10px;cursor:pointer; }
.ie-discrepancy-ack.checked { border-color:#111; }
.ie-discrepancy-ack-box { width:22px;height:22px;min-width:22px;border:2px solid #CC0000;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.ie-discrepancy-ack-box.checked { background:#111;border-color:#111;color:#fff; }
.ie-discrepancy-ack-label { font-size:11px;font-weight:700;color:#CC0000;line-height:1.4; }
.ie-discrepancy-ack.checked .ie-discrepancy-ack-label { color:#111; }

/* Mismatch advisories */
.mismatch-advisory { border-radius: 8px; padding: 10px 12px; margin-top: 8px; display: none; }
.mismatch-advisory.active { display: block; }
.mismatch-yellow { background: #fff8e1; border-left: 4px solid #F5C300; }
.mismatch-red    { background: #fdecea; border-left: 4px solid #CC0000; }
.mismatch-text   { font-size: 11px; font-weight: 700; line-height: 1.5; }
.mismatch-yellow .mismatch-text { color: #856404; }
.mismatch-red    .mismatch-text { color: #CC0000; }

/* Inline advisories */
.inline-advisory { border-radius: 8px; padding: 10px 12px; margin-top: 6px; margin-bottom: 4px; display: none; }
.inline-advisory.active { display: block; }
.advisory-yellow { background: #fff8e1; border-left: 4px solid #F5C300; }
.advisory-red    { background: #fdecea; border: 2px solid #111; border-left: 4px solid #CC0000; }
.advisory-text   { font-size: 12px; font-weight: 700; line-height: 1.5; }
.advisory-yellow .advisory-text { color: #856404; }
.advisory-red    .advisory-text { color: #CC0000; }

/* Emergency prep */
.emerg-block { background: #fff; border-radius: 8px; border-left: 4px solid #111; padding: 12px 14px; margin-bottom: 8px; }
.emerg-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #111; margin-bottom: 10px; }
.emerg-check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; border-bottom: 1px solid #f0f2f5; }
.emerg-check-row:last-child { border-bottom: none; padding-bottom: 0; }
.emerg-check-box { width: 22px; height: 22px; min-width: 22px; border: 2px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.emerg-check-box.checked { background: #111; border-color: #111; color: #fff; }
.emerg-check-label { font-size: 12px; font-weight: 600; color: #111; line-height: 1.4; }

/* Risk result */
.risk-result { border-radius: 8px; padding: 14px 16px; margin-top: 12px; display: none; }
.risk-result.active { display: block; }
.risk-result-low    { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.risk-result-medium { background: #fff8e1; border-left: 4px solid #F5C300; }
.risk-result-high   { background: #fdecea; border-left: 4px solid #CC0000; }
.risk-result-eyebrow { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.risk-result-low    .risk-result-eyebrow { color: #2e7d32; }
.risk-result-medium .risk-result-eyebrow { color: #856404; }
.risk-result-high   .risk-result-eyebrow { color: #CC0000; }
.risk-result-label { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.risk-result-low    .risk-result-label { color: #2e7d32; }
.risk-result-medium .risk-result-label { color: #856404; }
.risk-result-high   .risk-result-label { color: #CC0000; }
.risk-result-action { font-size: 12px; font-weight: 600; line-height: 1.6; }
.risk-result-low    .risk-result-action { color: #2e7d32; }
.risk-result-medium .risk-result-action { color: #856404; }
.risk-result-high   .risk-result-action { color: #CC0000; }

/* HoRC */
.horc-header { background: #111; color: #fff; border-radius: 8px 8px 0 0; padding: 10px 14px; }
.horc-header-eyebrow { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.65; margin-bottom: 2px; }
.horc-header-title { font-size: 12px; font-weight: 800; }
.horc-list { background: #fff; border-radius: 0 0 8px 8px; overflow: hidden; }
.horc-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #f0f2f5; cursor: pointer; }
.horc-item:last-child { border-bottom: none; }
.horc-item.required    { border-left: 4px solid #111; }
.horc-item.conditional { border-left: 4px solid #FF6B00; }
.horc-check { width: 22px; height: 22px; min-width: 22px; border: 2px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 2px; }
.horc-check.checked { background: #111; border-color: #111; color: #fff; }
.horc-text { flex: 1; }
.horc-control { font-size: 12px; font-weight: 700; color: #111; line-height: 1.3; }
.horc-detail { font-size: 10px; color: #666; margin-top: 2px; line-height: 1.4; }
.horc-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; display: inline-block; margin-top: 4px; }
.badge-always { background: #e8f0fb; color: #111; }
.badge-cond   { background: #fff3cd; color: #856404; }
.badge-when   { background: #f0f0f0; color: #555; }

.t2-eswc-modal { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);z-index:300;display:none;align-items:center;justify-content:center;padding:20px; }
.t2-eswc-modal.active { display:flex; }
.t2-eswc-inner { background:#fff;border-radius:12px;overflow:hidden;width:100%;max-width:380px; }
.t2-eswc-header { background:#CC0000;padding:14px 16px; }
.t2-eswc-body { padding:14px 16px; }
/* Tier 2 collapse pattern */
.t2-q { background:#fff;border-radius:8px;margin-bottom:6px;overflow:hidden;border:1.5px solid #ddd; }
.t2-q.t2-q-active { border-color:#111; }
.t2-q.t2-q-done { border-color:#ddd; }
.t2-q.t2-q-locked { opacity:0.4;pointer-events:none; }
.t2-q.t2-q-stop { border-color:#CC0000; }
.t2-q-collapsed { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer; }
.t2-q-clabel { font-size:11px;font-weight:700;color:#666; }
.t2-q-pill { font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px; }
.t2-pill-yes { background:#e8f5e9;color:#2e7d32; }
.t2-pill-no  { background:#fdecea;color:#CC0000; }
.t2-pill-val { background:#e8f0fb;color:#185FA5; }
.t2-pill-warn{ background:#fff3cd;color:#856404; }
.t2-pill-stop{ background:#fdecea;color:#CC0000; }
.t2-q-edit { font-size:9px;color:#bbb;margin-left:6px; }
.t2-q-expanded { padding:12px 12px 14px; }
.t2-eswc-inline { background:#fdecea;border-left:4px solid #CC0000;border-radius:0;padding:12px 14px;margin-top:6px; }
.t2-eswc-inline-label { font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:#CC0000;margin-bottom:4px; }
.t2-eswc-inline-text { font-size:12px;font-weight:700;color:#CC0000;line-height:1.5;margin-bottom:10px; }
.t2-eswc-ack-row { display:flex;align-items:flex-start;gap:10px;background:#fff;border:1.5px solid #ddd;border-radius:8px;padding:10px 12px;cursor:pointer;margin-bottom:8px; }
.t2-eswc-ack-row.checked { border-color:#111; }
.t2-eswc-ack-box { width:22px;height:22px;min-width:22px;border:2px solid #ddd;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.t2-eswc-ack-box.checked { background:#111;border-color:#111;color:#fff; }
.t2-route-btn { width:100%;padding:12px;background:#CC0000;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;letter-spacing:0.5px; }
.ppe-confirm-box { background: #fff; border-radius: 8px; padding: 14px; border-left: 4px solid #111; }
.ppe-confirm-text { font-size: 13px; font-weight: 700; color: #111; line-height: 1.5; margin-bottom: 12px; }
.ppe-confirm-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ppe-confirm-check { width: 26px; height: 26px; min-width: 26px; border: 2px solid #111; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ppe-confirm-check.checked { background: #111; color: #fff; }
.ppe-confirm-label { font-size: 12px; font-weight: 700; color: #111; }

/* Acknowledge */
.ack-box { background: #fff; border-radius: 8px; padding: 12px 14px; border-left: 4px solid #111; margin-top: 8px; }
.ack-text { font-size: 11px; color: #555; line-height: 1.5; margin-bottom: 10px; }
.ack-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ack-check-box { width: 26px; height: 26px; min-width: 26px; border: 2px solid #111; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ack-check-box.checked { background: #111; color: #fff; }
.ack-check-label { font-size: 12px; font-weight: 700; color: #111; }

.validation-msg { background: #fdecea; border-left: 4px solid #CC0000; border-radius: 8px; padding: 10px 12px; margin-top: 10px; display: none; font-size: 12px; color: #CC0000; font-weight: 600; line-height: 1.6; }
.jsp-submit { width: 100%; padding: 15px; background: #111; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; margin-top: 14px; letter-spacing: 1px; }
.jsp-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.jsp-note { font-size: 10px; color: #999; text-align: center; padding: 10px 0 4px; line-height: 1.5; }
.jsp-success { background: #d4edda; border: 1px solid #28a745; border-radius: 8px; padding: 14px; text-align: center; margin-top: 12px; display: none; }
.jsp-success-text { font-size: 13px; font-weight: 700; color: #155724; }

  /* ── GUEST PAGE STYLES ── */

  .g-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

  .g-guest-bar {
background: #fff; border-bottom: 1px solid #E0E0E0;
padding: 8px 16px; display: none;
align-items: center; justify-content: space-between;
  }
  .g-guest-label { font-size: 10px; font-weight: 700; color: #888; letter-spacing: 0.08em; text-transform: uppercase; }
  .g-close-btn { width: 26px; height: 26px; border-radius: 50%; background: #F0F0F0; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: #555; display: flex; align-items: center; justify-content: center; }

  #guestContent { display: none; }
  .g-page-body { padding: 10px 10px 32px; display: flex; flex-direction: column; gap: 8px; }

  .g-section-label { display: inline-flex; align-items: center; justify-content: center; background: #111; color: #F5C400; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 16px; border-radius: 20px; margin: 10px 12px 4px; }

  .g-card { background: #fff; border-radius: 8px; border: 1.5px solid #111; overflow: hidden; margin: 0 12px 12px; }

  .g-pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #bbb; }
  .g-pill-grid.three { grid-template-columns: 1fr 1fr 1fr; }
  .g-pill { background: #fff; padding: 11px 13px; }
  .g-pill.full  { grid-column: 1 / -1; }
  .g-pill.span2 { grid-column: 1 / span 2; }

  .g-pill-label { font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #111; margin-bottom: 5px; }
  .g-pill-value { font-size: 15px; font-weight: 700; color: #1A1A1A; }
  .g-pill-value.mono { font-family: monospace; font-size: 13px; }
  .g-pill-value.lg   { font-size: 18px; }

  .g-asset-badge { display: inline-flex; align-items: center; justify-content: center; background: #F5C400; color: #111; font-family: monospace; font-size: 15px; font-weight: 500; padding: 4px 12px; border-radius: 4px; border: 1.5px solid #fff; letter-spacing: 0.04em; }
  .g-fed-badge   { display: inline-block; font-family: monospace; font-size: 13px; font-weight: 600; border: 2px solid #111; border-radius: 6px; padding: 3px 9px; color: #111; margin-top: 2px; }

  .g-tap-row { padding: 6px 13px 9px; border-top: 1px solid #E0E0E0; cursor: pointer; }
  .g-tap-hint { font-size: 11px; font-weight: 600; color: #2563EB; }

  .g-expand-divider { height: 1px; background: #E0E0E0; margin: 0 13px; display: none; }
  .g-expand-divider.visible { display: block; }

  .g-expand-list { padding: 4px 13px 12px; display: none; flex-direction: column; }
  .g-expand-list.open { display: flex; }

  .g-close-row { display: flex; justify-content: flex-end; padding: 4px 0; }
  .g-close-sm  { width: 22px; height: 22px; border-radius: 50%; background: #F0F0F0; border: none; cursor: pointer; font-size: 11px; font-weight: 700; color: #555; display: flex; align-items: center; justify-content: center; }

  .g-andon-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #E0E0E0; }
  .g-andon-item:last-child { border-bottom: none; }
  .g-andon-dot  { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
  .g-andon-dot.green { background: #EAF7EE; color: #1A8A4A; }
  .g-andon-dot.red   { background: #FFF0EE; color: #CC2200; }
  .g-andon-dot.gray  { background: #EFEFEF; color: #BBBBBB; }
  .g-andon-text  { flex: 1; }
  .g-andon-label { font-size: 13px; font-weight: 600; color: #1A1A1A; margin-bottom: 2px; }
  .g-andon-sub   { font-size: 11px; line-height: 1.3; color: #555; }
  .g-andon-sub.green { color: #1A8A4A; font-weight: 500; }
  .g-andon-sub.red   { color: #CC2200; font-weight: 500; }
  .g-andon-sub.gray  { color: #BBBBBB; }

  .g-esp-btn { width: 100%; background: #F5C400; color: #111; border: 1.5px solid #111; border-radius: 20px; padding: 14px 24px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
  .g-esp-btn:active { background: #e6b800; transform: scale(0.98); }

  /* ── Guest page v4.8 — new layout ──────────────────────────────────────── */
  .g-top-bar { background: #111; border-radius: 14px; padding: 10px 16px; text-align: center; margin: 8px 12px 10px; }
  .g-top-bar-label { color: #F5C400; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; }
  .g-card-equipment { overflow: hidden; padding: 0 !important; }
  .g-equip-top { display: flex; border-bottom: 1.5px solid #eee; min-height: 115px; }
  .g-equip-top-left { flex: 1; padding: 11px 13px; border-right: 1.5px solid #eee; display: flex; flex-direction: column; gap: 9px; }
  .g-photo-thumb { width: 110px; min-width: 110px; display: flex; flex-direction: column; background: #f5f5f5; }
  .g-photo-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; gap: 5px; overflow: hidden; }
  .g-photo-icon { color: #bbb; font-size: 20px; line-height: 1; }
  .g-photo-no-file { font-size: 9.5px; color: #999; text-align: center; line-height: 1.3; }
  .g-photo-footer { background: #111; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-align: center; padding: 7px 4px; cursor: pointer; text-transform: uppercase; flex-shrink: 0; }
  .g-card-row { display: flex; border-bottom: 1.5px solid #eee; }
  .g-card-row:last-child { border-bottom: none; }
  .g-card-row-three { display: flex; }
  .g-card-cell { flex: 1; padding: 8px 13px; border-right: 1.5px solid #eee; }
  .g-card-cell:last-child { border-right: none; }
  .g-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #666; margin-bottom: 3px; }
  .g-fed-from-row { padding: 9px 13px 12px; }
  .g-fed-from-header { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
  .g-section-pill-header { background: #111; border-radius: 14px; padding: 8px 16px; text-align: center; margin: 0 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F5C400; display: block; }
  .g-dash { color: #ccc; }

/* LOTO / EEWP shell modals — z-index 400 sits above JSP (200) */
.sub-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 400; display: none; overflow-y: auto; }
.sub-modal.active { display: block; }
.sub-modal-inner { background: #f0f2f5; min-height: 100%; }
.sub-modal-header { background: #111; color: #fff; padding: 13px 16px; position: sticky; top: 0; z-index: 10; }
.sub-modal-eyebrow { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
.sub-modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sub-modal-title { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.sub-modal-sub { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.sub-modal-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; cursor: pointer; font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sub-modal-badge-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sub-modal-asset-badge { display: inline-block; background: #F5C400; color: #111; font-family: monospace; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 5px; letter-spacing: 0.5px; }
.sub-modal-body { padding: 14px 14px 40px; }
.placeholder-block { background: #fff; border-radius: 8px; border-left: 4px solid #FF6B00; padding: 16px; margin-bottom: 12px; }
.placeholder-title { font-size: 12px; font-weight: 800; color: #111; margin-bottom: 6px; }
.placeholder-text { font-size: 11px; color: #666; line-height: 1.6; }
.sub-modal-step-card { background: #fff; border: 1.5px solid #111; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.sub-modal-step-card-header { background: #111; padding: 7px 12px; }
.sub-modal-step-card-eyebrow { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #F5C400; }
.sub-modal-step-card-title { font-size: 12px; font-weight: 800; color: #fff; }
.sub-modal-step-card-body { padding: 4px 12px 8px; }
.sub-modal-step-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; }
.sub-modal-step-row:last-child { border-bottom: none; }
.sub-modal-step-num { width: 22px; height: 22px; border-radius: 50%; background: #111; color: #F5C400; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.sub-modal-step-text { font-size: 11px; font-weight: 700; color: #111; line-height: 1.4; }
.sub-modal-step-sub { font-size: 10px; color: #666; margin-top: 2px; line-height: 1.3; }
.sub-modal-return-btn { width: 100%; padding: 13px; background: #111; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; letter-spacing: 0.5px; }

/* ESWC YES/NO inline in HoRC */
.eswc-yn-wrap { margin-top: 10px; }
.eswc-yn-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #111; margin-bottom: 6px; }
.eswc-yn-row { display: flex; gap: 8px; }
.eswc-yn-btn { flex: 1; padding: 10px 8px; border: 2px solid #ddd; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; color: #555; }
.eswc-yn-btn.active-yes { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.eswc-yn-btn.active-no  { background: #CC0000; border-color: #CC0000; color: #fff; }
.eswc-result { border-radius: 8px; padding: 11px 13px; margin-top: 10px; display: none; }
.eswc-result.active { display: block; }
.eswc-result-yellow { background: #fff8e1; border-left: 4px solid #F5C300; }
.eswc-result-red    { background: #fdecea; border-left: 4px solid #CC0000; }
.eswc-result-text { font-size: 11px; font-weight: 700; line-height: 1.6; }
.eswc-result-yellow .eswc-result-text { color: #856404; }
.eswc-result-red    .eswc-result-text { color: #CC0000; }
.eswc-confirm-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 10px; padding: 10px 12px; background: #fff; border-radius: 8px; border-left: 4px solid #CC0000; }
.eswc-confirm-check { width: 22px; height: 22px; min-width: 22px; border: 2px solid #CC0000; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px; }
.eswc-confirm-check.checked { background: #CC0000; border-color: #CC0000; color: #fff; }
.eswc-confirm-label { font-size: 11px; font-weight: 700; color: #CC0000; line-height: 1.5; }
.eswc-open-btn { width: 100%; padding: 11px; background: #111; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; margin-top: 8px; display: none; }
.eswc-open-btn.active { display: block; }

/* NOC findings field */
.noc-findings { margin-top: 10px; display: none; }
.noc-findings.active { display: block; }

/* Task-specific advisories */
.task-advisory { border-radius: 8px; padding: 11px 13px; margin-top: 8px; display: none; }
.task-advisory.active { display: block; }
.task-advisory-blue { background: #e8f0fb; border-left: 4px solid #2A7ED0; }
.task-advisory-yellow { background: #fff8e1; border-left: 4px solid #F5C300; }
.task-advisory-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.task-advisory-blue .task-advisory-title { color: #111; }
.task-advisory-yellow .task-advisory-title { color: #856404; }
.task-advisory-text { font-size: 11px; font-weight: 600; line-height: 1.6; }
.task-advisory-blue .task-advisory-text { color: #111; }
.task-advisory-yellow .task-advisory-text { color: #856404; }

/* Tier 1 simplified step 2 */
.tier1-check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.tier1-check-row:last-child { border-bottom: none; }
.tier1-check-box { width: 22px; height: 22px; min-width: 22px; border: 2px solid #111; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px; }
.tier1-check-box.checked { background: #111; border-color: #111; color: #fff; }
.tier1-check-label { font-size: 12px; font-weight: 600; color: #111; line-height: 1.4; }

/* NOC criteria collapsible panel */
.noc-criteria-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #2A7ED0; cursor: pointer; margin-top: 4px; margin-bottom: 6px; text-decoration: none; border: none; background: none; padding: 0; }
.noc-criteria-toggle-icon { font-size: 12px; transition: transform 0.2s; }
.noc-criteria-toggle-icon.open { transform: rotate(90deg); }
.noc-criteria-panel { display: none; background: #f0f6ff; border-left: 3px solid #2A7ED0; border-radius: 0 6px 6px 0; padding: 10px 12px; margin-bottom: 8px; }
.noc-criteria-panel.active { display: block; }
.noc-criteria-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #111; margin-bottom: 7px; }
.noc-criteria-item { display: flex; align-items: flex-start; gap: 7px; padding: 4px 0; border-bottom: 1px solid #dce8f8; }
.noc-criteria-item:last-child { border-bottom: none; padding-bottom: 0; }
.noc-criteria-dot { width: 6px; height: 6px; min-width: 6px; background: #2A7ED0; border-radius: 50%; margin-top: 5px; }
.noc-criteria-text { font-size: 11px; font-weight: 600; color: #111; line-height: 1.4; }

/* Investigation advisory (Overload / CB Reset) */
.invest-advisory { background: #fff8e1; border-left: 4px solid #F5C300; border-radius: 8px; padding: 11px 13px; margin-top: 8px; display: none; }
.invest-advisory.active { display: block; }
.invest-advisory-text { font-size: 11px; font-weight: 700; color: #856404; line-height: 1.6; }

/* Upstream isolation advisory inside JSP Step 2 */
.upstream-advisory { background: #fdecea; border-left: 4px solid #CC0000; border-radius: 8px; padding: 11px 13px; margin-top: 8px; display: none; }
.upstream-advisory.active { display: block; }
.upstream-advisory-text { font-size: 11px; font-weight: 700; color: #CC0000; line-height: 1.6; }

/* Scope change lightweight modal */
.scope-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 500; display: none; overflow-y: auto; }
.scope-modal.active { display: block; }

/* Action buttons in HoRC — ESWC, EEWP, LOTO */
.horc-action-row { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #f0f2f5; }
.horc-action-btn { width: 100%; padding: 12px 14px; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; }
.horc-action-btn.eswc-active  { background: #111; color: #fff; border-left: 4px solid #2e7d32; }
.horc-action-btn.eswc-gray    { background: #f5f5f5; color: #aaa; border-left: 4px solid #ddd; cursor: not-allowed; }
.horc-action-btn.eewp-active  { background: #fdecea; color: #CC0000; border-left: 4px solid #CC0000; }
.horc-action-btn.loto-gray    { background: #f5f5f5; color: #aaa; border-left: 4px solid #ddd; cursor: not-allowed; }
.horc-action-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; display: block; margin-bottom: 1px; }

/* PPE confirm as HoRC row */
.horc-ppe-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #f0f2f5; cursor: pointer; border-left: 4px solid #111; }
.horc-ppe-confirm:last-child { border-bottom: none; }

/* ── Voice input button ─────────────────────────────────────────────────── */
.voice-wrap { position: relative; }
.voice-wrap .field-textarea { padding-right: 44px; }
.voice-btn { position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:#111;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
.voice-btn.listening { background:#CC0000; animation: vb-pulse 1s infinite; }
.voice-btn.listening::after { content:'';position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid #CC0000;animation:vb-ring 1s infinite; }
@keyframes vb-pulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.08);} }
@keyframes vb-ring  { 0%{transform:scale(1);opacity:0.8;}100%{transform:scale(1.6);opacity:0;} }
.voice-status { font-size:10px;font-weight:700;color:#CC0000;margin-top:5px;display:none;letter-spacing:0.3px; }
.voice-status.show { display:block; }

/* ── Work Complete modal ────────────────────────────────────────────────── */
.wc-modal { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:500;display:none;overflow-y:auto; }
.wc-modal.active { display:block; }

/* ── Done bar — fades out ───────────────────────────────────────────────── */
#njDoneBar { position:fixed;bottom:0;left:0;right:0;z-index:400;background:#1a7a3c;padding:10px 14px;display:none;align-items:center;justify-content:center;gap:8px; }
#njDoneBar.show { display:flex; }
#njDoneBar.fade { animation: donefade 0.6s ease forwards; }
@keyframes donefade { 0%{opacity:1;} 100%{opacity:0;} }
.njdone-txt { font-size:11px;font-weight:700;color:#fff; }