/* * Fire Stopping — on-site Capture: MOBILE STEPPER flow (<=1024px). * * Mirrors the fire-door inspection mobile capture design system (icm-mobile-*), * rebuilt on global :root tokens with fss-cap-* classes so the two modules feel * like one app. The full-screen overlay has three phases (intro / flow / label) * driven by features/fire-stopping-capture.js: * - intro : white setup bar + welcome card + "Start" CTA * - flow : dark command bar (count, Save, progress, tappable pill strip) over * one step screen at a time, fire-door-style Assessment screen * (status banner + big toggles + reason chips + severity pills) * - label : post-save QR-label placeholder + "Capture next penetration" * Plus an exit-confirm sheet (canonical modal--sheet) and a device-Back guard. * * 1024px (NOT 900px) is intentional — the stepper is tablet-first, matching the * fire-door capture breakpoint. Shared component styling (cards/fields/photos/ * review) lives in fire-stopping-capture-desktop.css. * * `(any-pointer: coarse)` mirrors the fire-door capture: any touch device keeps the * stepper, including a tablet in landscape whose width exceeds 1024px. It is the * exact complement of the desktop gate in fire-stopping-capture-desktop.css * (`min-width: 1025px and not (any-pointer: coarse)`) — every device hits one or * the other, never both/neither, so the desktop form is hidden at all times. */ @media (max-width: 1024px), (any-pointer: coarse) { /* Desktop grid stacks; the JS shows one step at a time. */ .fss-cap-grid, .fss-cap-grid__primary, .fss-cap-grid__secondary { display: block; } /* ====================================================================== */ /* Entry card (before the stepper is started) */ /* ====================================================================== */ .fss-cap-entry { display: block; text-align: center; padding: 24px 18px; background: var(--surface-card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-card); } .fss-cap-entry[hidden] { display: none !important; } .fss-cap-entrybtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 18px; border: none; border-radius: 10px; background: var(--ink); color: var(--surface-card); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .fss-cap-entrybtn svg { width: 16px; height: 16px; } .fss-cap-entrybtn:active { transform: scale(0.98); } .fss-cap-entry__hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-4); } /* ====================================================================== */ /* Full-screen overlay + phase visibility */ /* ====================================================================== */ /* Off until capture starts. */ .fss-cap-setupbar, .fss-cap-mbar, .fss-cap-intro, .fss-cap-form, .fss-cap-labelscreen, .fss-cap-foot { display: none; } /* Full-viewport overlay. The JS also portals .fss-cap to while capturing so it can never be clipped by an ancestor scroll container (.content is overflow:auto). !important forces it past any inherited box metrics; width:100% (NOT 100vw) avoids over-constraining against inset:0 and the scrollbar-width gotcha. overflow-x:hidden kills any horizontal spill. */ .fss-cap.is-capturing { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow-x: hidden; z-index: 2200; display: flex; flex-direction: column; background: var(--canvas); } .fss-cap.is-capturing .fss-cap-entry { display: none !important; } /* Scroll regions (one active per phase) share the same scroll chrome. */ .fss-cap.is-capturing.is-intro .fss-cap-intro, .fss-cap.is-capturing.is-flow .fss-cap-form, .fss-cap.is-capturing.is-label .fss-cap-labelscreen { display: block; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); } /* Headers/footer span the full overlay (no inherited radius/margin). */ .fss-cap-setupbar, .fss-cap-mbar { width: 100%; box-sizing: border-box; margin: 0; border-radius: 0; } /* Container chain must be able to shrink so nothing (incl. selects/datalist popups) is pushed off-screen. */ .fss-cap.is-capturing .fss-cap-section, .fss-cap.is-capturing .fss-cap-sec-body, .fss-cap.is-capturing .fss-cap-field { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Headers per phase. */ .fss-cap.is-capturing.is-intro .fss-cap-setupbar { display: grid; } .fss-cap.is-capturing.is-flow .fss-cap-mbar, .fss-cap.is-capturing.is-label .fss-cap-mbar { display: block; } /* Footer is present throughout the active capture. */ .fss-cap.is-capturing .fss-cap-foot { display: flex; } body.fss-cap-open { overflow: hidden; } /* ====================================================================== */ /* Setup bar (white) — intro phase (mirrors icm-mobile-setupbar) */ /* ====================================================================== */ .fss-cap-setupbar { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px; background: var(--surface-card); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-sm); } /* White-bar close button (top-left of the intro screen) — mirrors the fire-door icm-mobile-setupclose. Sits in the setup bar's first grid column. The dark command-bar exit uses .fss-cap-mbar__icon instead. */ .fss-cap-iconbtn { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface-card); color: var(--ink-2); box-shadow: var(--shadow-sm); cursor: pointer; } .fss-cap-iconbtn svg { width: 14px; height: 14px; } .fss-cap-iconbtn:active { transform: scale(0.97); } .fss-cap-setupbar__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fss-cap-setupbar__eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fss-cap-setupbar__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fss-cap-pill--ready { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(30, 122, 69, 0.2); background: rgba(30, 122, 69, 0.08); color: var(--success); font-size: 11px; font-weight: 500; } .fss-cap-pill__dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; } /* ====================================================================== */ /* Command bar (dark) — flow + label phases (mirrors icm-mobile-compbar) */ /* ====================================================================== */ .fss-cap-mbar { padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: var(--ink); color: var(--surface-card); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-sm); } .fss-cap-mbar[hidden] { display: none !important; } .fss-cap-mbar__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .fss-cap-mbar__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .fss-cap-mbar__eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .fss-cap-mbar__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--surface-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fss-cap-mbar__count { flex-shrink: 0; color: rgba(255, 255, 255, 0.42); font-size: 11.5px; font-weight: 500; } .fss-cap-mbar__btn { flex-shrink: 0; min-height: 44px; padding: 0 14px; border: none; border-radius: 7px; background: rgba(255, 255, 255, 0.1); color: var(--surface-card); font-size: 12.5px; font-weight: 600; cursor: pointer; } .fss-cap-mbar__icon { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 7px; background: rgba(255, 255, 255, 0.1); color: var(--surface-card); cursor: pointer; } .fss-cap-mbar__icon svg { width: 15px; height: 15px; } .fss-cap-mbar__btn:active, .fss-cap-mbar__icon:active { transform: scale(0.97); } /* Label phase: hide the step-flow controls, keep title + exit. */ .fss-cap.is-capturing.is-label .fss-cap-mbar__count, .fss-cap.is-capturing.is-label .fss-cap-mbar__btn, .fss-cap.is-capturing.is-label .fss-cap-progress, .fss-cap.is-capturing.is-label .fss-cap-pillstrip { display: none; } /* Progress (inside the dark bar). */ .fss-cap-progress { height: 2px; margin-bottom: 9px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.1); } .fss-cap-progress__fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Pill strip (mirrors icm-mobile-pillstrip). */ .fss-cap-pillstrip { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .fss-cap-pillstrip::-webkit-scrollbar { display: none; } .fss-cap-pillbtn { position: relative; flex-shrink: 0; min-height: 44px; padding: 6px 12px; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.38); font-size: 11px; font-weight: 500; white-space: nowrap; cursor: pointer; scroll-snap-align: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .fss-cap-pillbtn:active { transform: scale(0.98); } .fss-cap-pillbtn.is-done { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.7); } .fss-cap-pillbtn.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); } /* ====================================================================== */ /* Stage copy + setup card (mirrors icm-mobile-stagecopy / setupcard) */ /* ====================================================================== */ .fss-cap-stagecopy { display: flex; flex-direction: column; gap: 4px; } .fss-cap-stagecopy__eyebrow { margin: 0 0 2px; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .fss-cap-stagecopy__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); } .fss-cap-stagecopy__sub { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--ink-4); } .fss-cap-setupcard { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, var(--surface-card) 0%, var(--canvas) 100%); box-shadow: var(--shadow-card); } .fss-cap-setupcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .fss-cap-setupcard__badge, .fss-cap-setupcard__status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; } .fss-cap-setupcard__badge { background: rgba(196, 149, 16, 0.08); border: 1px solid rgba(196, 149, 16, 0.18); color: var(--accent); } .fss-cap-setupcard__status { background: rgba(30, 122, 69, 0.08); border: 1px solid rgba(30, 122, 69, 0.18); color: var(--success); } .fss-cap-setupcard__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } .fss-cap-setupcard__copy { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); } .fss-cap-setupcard__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .fss-cap-setupcard__list li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; } .fss-cap-setupcard__list li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } /* ====================================================================== */ /* One step at a time + section card chrome */ /* ====================================================================== */ .fss-cap.is-capturing .fss-cap-section { border: 1px solid var(--rule); border-radius: 12px; } .fss-cap.is-capturing .fss-cap-section[hidden] { display: none !important; } /* Save lives in the footer on mobile; the desktop badge/save row is hidden. */ .fss-cap.is-capturing .fss-cap-section--review .fss-cap-statusrow { display: none; } /* Bigger touch targets for fields. */ .fss-cap :where(input[type="text"], input[type="number"], input[type="search"], select) { min-height: 44px; font-size: 16px; } .fss-cap textarea { min-height: 80px; font-size: 16px; } /* Touch-first: fields stack to one column in the stepper so nothing (and no native select/datalist popup) is squeezed off-screen on a phone. */ .fss-cap.is-capturing .fss-cap-row { flex-direction: column; gap: 14px; } .fss-cap.is-capturing .fss-cap-row .fss-cap-field, .fss-cap.is-capturing .fss-cap-row .fss-cap-field--sm { flex: 1 1 auto; width: 100%; } .fss-cap :where(input, select, textarea) { max-width: 100%; min-width: 0; } /* ====================================================================== */ /* Assessment: status banner (mirrors icm-mobile-statusbanner) */ /* ====================================================================== */ /* On mobile, the desktop guidance banner gives way to the live banner. */ .fss-cap-banner--desktoponly { display: none; } .fss-cap-statusbanner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; box-shadow: var(--shadow-card); background: var(--surface-card); } .fss-cap-statusbanner.is-pass { background: rgba(30, 122, 69, 0.08); border-color: rgba(30, 122, 69, 0.2); } .fss-cap-statusbanner.is-fail { background: rgba(176, 48, 48, 0.07); border-color: rgba(176, 48, 48, 0.18); } .fss-cap-statusbanner.is-defective { background: var(--accent-soft); border-color: rgba(196, 149, 16, 0.25); } .fss-cap-statusbanner.is-na { background: var(--surface-inset); border-color: var(--rule-strong); } .fss-cap-statusbanner__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--surface-card); background: var(--success); } .fss-cap-statusbanner.is-fail .fss-cap-statusbanner__icon { background: var(--danger); } .fss-cap-statusbanner.is-defective .fss-cap-statusbanner__icon { background: var(--accent); } .fss-cap-statusbanner.is-na .fss-cap-statusbanner__icon { background: var(--ink-3); } .fss-cap-statusbanner__icon svg { width: 14px; height: 14px; } .fss-cap-statusbanner__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fss-cap-statusbanner__copy strong { font-size: 13px; font-weight: 600; color: var(--ink); } .fss-cap-statusbanner__copy p { margin: 0; font-size: 11.5px; font-weight: 300; line-height: 1.45; color: var(--ink-4); } /* ====================================================================== */ /* Assessment: big toggle grid (mirrors icm-mobile-togglegrid) */ /* ====================================================================== */ .fss-cap-togglegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fss-cap-toggle { min-height: 46px; font-size: 15px; } /* ====================================================================== */ /* Assessment: reason chips (mirrors icm-mobile-chipgrid / chip) */ /* ====================================================================== */ .fss-cap-reasonchips { display: flex; flex-direction: column; gap: 8px; } .fss-cap-reasonchip { position: relative; min-height: 48px; padding: 12px 40px 12px 16px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface-card); box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .fss-cap-reasonchip:active { transform: scale(0.97); } .fss-cap-reasonchip.is-active { border-color: var(--ink); background: var(--surface-inset); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 2px rgba(26, 24, 21, 0.08); } .fss-cap-reasonchip.is-active::after { content: ""; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 999px; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5,9.2 7.6,12 13.5,6'/%3E%3C/svg%3E") center / 12px no-repeat; } /* ====================================================================== */ /* Assessment: severity pills (mirrors icm-mobile-severitypill) */ /* ====================================================================== */ /* The native severity select gives way to the pills on mobile. */ .fss-cap.is-capturing .fss-cap-sevfield > select { display: none; } .fss-cap-sevpills { display: flex; gap: 8px; flex-wrap: wrap; } .fss-cap-sevpill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface-card); color: var(--ink-3); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .fss-cap-sevpill:active { transform: scale(0.96); } .fss-cap-sevpill--low.is-active { background: var(--ink-3); border-color: var(--ink-3); color: var(--surface-card); } .fss-cap-sevpill--medium.is-active { background: var(--accent); border-color: var(--accent); color: var(--surface-card); } .fss-cap-sevpill--high.is-active { background: var(--danger); border-color: var(--danger); color: var(--surface-card); } /* ====================================================================== */ /* Post-save QR label placeholder (mirrors icm-post-label-step) */ /* ====================================================================== */ .fss-cap-labelph { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 16px; padding: 28px 20px; border-radius: 16px; border: 1px dashed var(--rule-strong); background: var(--surface-subtle); } .fss-cap-labelph__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-inset); color: var(--ink-3); } .fss-cap-labelph__icon svg { width: 24px; height: 24px; } .fss-cap-labelph strong { font-size: 15px; font-weight: 700; color: var(--ink); } .fss-cap-labelph p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-4); } /* ====================================================================== */ /* Sticky footer (per-phase buttons, mirrors icm-mobile-footer) */ /* ====================================================================== */ .fss-cap.is-capturing .fss-cap-foot { gap: 8px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2210; padding: 12px 32px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--rule); background: var(--surface-card); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07); } .fss-cap-footbtn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 46px; padding: 0 16px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .fss-cap-footbtn:active { transform: scale(0.98); } .fss-cap-footbtn[hidden] { display: none !important; } .fss-cap-footbtn--primary { background: var(--ink); color: var(--surface-card); } .fss-cap-footbtn--ghost { flex: 0 0 auto; min-width: 92px; background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-2); } .fss-cap-footbtn--full { flex: 1 1 auto; width: 100%; } /* ====================================================================== */ /* Exit-confirm + step-guide sheets sit above the capture overlay/footer. */ /* ====================================================================== */ .fss-cap-exitmodal, .fss-cap-guidemodal { z-index: 2400; } .fss-cap-guidemodal__body ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; } .fss-cap-guidemodal__body li { font-size: 14px; line-height: 1.5; color: var(--ink-2); } }