/* ============================================================ BLE RTLS assist UX — toast stack, incident modal, rail strip. Shared by index.html, pulse.html and tracking.html. ============================================================ */ /* ---------- toast stack (direct child — survives kiosk mode) ---------- */ .pn-toasts{ position:fixed;top:calc(var(--nav-h) + 14px);right:16px;z-index:400; display:flex;flex-direction:column;gap:10px;width:min(360px, calc(100vw - 32px)); pointer-events:none; } .pn-toast{ pointer-events:auto; border-radius:var(--r-sm);padding:10px 12px; background:rgba(12,16,28,.97);border:1px solid var(--stroke-2); box-shadow:var(--shadow); animation:pn-in .25s var(--ease); } .pn-toast.urgent{ border-color:color-mix(in srgb, var(--red) 65%, transparent); box-shadow:0 0 30px -6px var(--red), var(--shadow); animation:pn-in .25s var(--ease), pn-throb 1.6s ease-in-out infinite .3s; } .pn-toast.out{opacity:0;transform:translateX(12px);transition:all .25s} @keyframes pn-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} @keyframes pn-throb{ 0%,100%{box-shadow:0 0 22px -8px var(--red), var(--shadow)} 50%{box-shadow:0 0 38px -4px var(--red), var(--shadow)} } @media (prefers-reduced-motion:reduce){.pn-toast,.pn-toast.urgent{animation:none}} .pn-toast header{display:flex;align-items:baseline;gap:8px} .pn-toast-kind{ font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.08em; color:var(--red); } .pn-toast:not(.urgent) .pn-toast-kind{color:var(--amber)} .pn-toast-ago{margin-left:auto;font-size:.68rem;color:var(--dim)} .pn-toast-x{ background:none;border:0;color:var(--dim);cursor:pointer;font-size:.8rem;padding:0 0 0 6px; } .pn-toast-x:hover{color:var(--text)} .pn-toast-body{display:flex;flex-direction:column;gap:2px;margin:6px 0 8px} .pn-toast-body b{font-family:var(--font-display);font-size:.92rem} .pn-toast-body span{font-size:.76rem;color:var(--muted)} .pn-toast-actions{display:flex;gap:8px;justify-content:flex-end} /* wall displays: kiosk mode gets bigger, louder toasts */ body.kiosk .pn-toasts{width:min(480px, calc(100vw - 32px))} body.kiosk .pn-toast-body b{font-size:1.2rem} body.kiosk .pn-toast-body span{font-size:.95rem} body.kiosk .pn-toast-kind{font-size:.9rem} /* ---------- incident modal ---------- */ .pim-modal{max-width:640px;padding:18px 20px 16px} .pim-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .pim-glyph{ flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px; font-size:1.05rem;color:var(--tc,var(--red)); background:color-mix(in srgb, var(--tc,var(--red)) 16%, transparent); border:1px solid color-mix(in srgb, var(--tc,var(--red)) 45%, transparent); } .pim-title{flex:1;min-width:0} .pim-title > div{display:flex;flex-direction:column} .pim-title b{font-family:var(--font-display);font-size:1.05rem} .pim-title span{font-size:.78rem;color:var(--muted)} .pim-pill{flex:none} .pim-head .modal-close{position:static;flex:none} .pim-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .pim-chip{ display:inline-flex;flex-direction:column;gap:1px; padding:6px 10px;border-radius:var(--r-xs); background:var(--surface);border:1px solid var(--stroke);font-size:.78rem; } .pim-chip i{font-style:normal;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)} .pim-step{ padding:8px 12px;margin-bottom:8px;border-radius:var(--r-xs); background:var(--surface);border-left:3px solid var(--teal);font-size:.78rem; } .pim-step b{display:block;font-size:.8rem} .pim-step span{color:var(--dim);font-size:.7rem} .pim-step p{margin:4px 0 0;color:var(--muted)} .pim-actions{display:flex;gap:8px;margin-bottom:12px} .pim-form{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--stroke);padding-top:12px} .pim-form-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end} .pim-form-actions .form-note{margin:0 auto 0 0} .pim-reports{margin-top:12px;font-size:.76rem} .pim-reports summary{cursor:pointer;color:var(--muted)} .pim-reports-table{width:100%;border-collapse:collapse;margin-top:8px} .pim-reports-table th{ text-align:left;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase; color:var(--dim);padding:4px 8px;border-bottom:1px solid var(--stroke); } .pim-reports-table td{padding:4px 8px;border-bottom:1px solid var(--stroke)} /* ---------- map-rail assist strip (above the tabs — can't be missed) ---------- */ .rail-assist{ border-radius:var(--r-sm);padding:10px 12px;margin-bottom:10px; background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid color-mix(in srgb, var(--red) 55%, transparent); box-shadow:inset 0 0 30px -18px var(--red); } .rail-assist-head{ display:flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.08em; color:var(--red);margin-bottom:6px; } .rail-assist-row{ display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer; font:inherit;font-size:.78rem;color:var(--text); background:none;border:0;border-radius:var(--r-xs);padding:5px 6px; } .rail-assist-row:hover{background:var(--surface-2)} .rail-assist-row b{font-family:var(--font-display);flex:none;white-space:nowrap} .rail-assist-row .pn-where{ color:var(--muted);font-size:.72rem;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .rail-assist-row .pn-ago{margin-left:auto;flex:none;font-size:.68rem;color:var(--dim)} .rail-assist-row .pill{flex:none} /* map pin: assist outranks alert */ .map-pin.assist{--c:var(--red)} .map-pin.assist::after{ content:"";position:absolute;inset:-3px;border-radius:50%; border:3px solid var(--red);animation:pin-pulse 0.9s ease-out infinite; }