/* ═══ Fire Stopping — the read-only penetration card ═════════════════════════
   `fire-stopping/surveys/_pen_detail_modal.php`, fetched from
   `?page=fire-stopping-penetration-detail`. MOVED VERBATIM out of
   fire-stopping-survey-show.css (2026-09-14) so the property workspace can open
   the same card from its Items section without loading that page's stylesheet,
   which carries unscoped `.floorplan-modal*` rules that collide with the fire-door
   floorplan modal on `?page=property`.
   ⛔ LOAD ORDER IS PRESERVED, NOT CHANGED: every page that had these rules loads
   this file immediately BEFORE fire-stopping-survey-show.css, and no rule earlier
   in that file targeted these classes — so the cascade on the survey page is the
   one it had. The in-modal EDIT form stays in fire-stopping-survey-show.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Status + severity chips — fork of .pass-chip / .sev-chip (rounded-rect, 5px). */
.fss-pen-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--rule-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fss-pen-chip--pass { background: var(--success-soft); color: var(--success); border-color: rgba(30, 122, 69, 0.2); }
.fss-pen-chip--fail { background: var(--danger-soft); color: var(--danger); border-color: rgba(176, 48, 48, 0.18); }
.fss-pen-chip--defective { background: var(--accent-soft); color: var(--accent); border-color: rgba(196, 149, 16, 0.22); }
/* ⚠ `no_access` needs its own line in each of these. The class is built from the
   raw status (`fss-pen-chip--<?= $st ?>`, and the timeline's regex-slugged
   equivalent), and every family defined pass / fail / defective / na and stopped
   — so a seal nobody could reach rendered an untoned chip on the register, in the
   reports modal and on the timeline. It shares the neutral treatment with `na`
   deliberately: both mean "no assessment happened", and it is exactly how the
   capture entry meter paints it — neither green nor red. */
.fss-pen-chip--na,
.fss-pen-chip--no_access { background: var(--surface-inset); color: var(--ink-3); border-color: var(--rule-strong); }
.fss-pen-chip--sev-low { background: var(--surface-inset); color: var(--ink-4); border-color: var(--rule-strong); }
.fss-pen-chip--sev-medium { background: var(--accent-soft); color: var(--accent); border-color: rgba(196, 149, 16, 0.22); }
.fss-pen-chip--sev-high { background: var(--danger-soft); color: var(--danger); border-color: rgba(176, 48, 48, 0.18); }

/* ⛔ THE STACKING TRAP, FIXED. `.fss-pen-modal` carried no z-index of its own, so it
   inherited plain `.modal` — 2130 (style.css), or 2110 above 1367px (desktop.css).
   `.fss-cap.is-capturing` is 2200 and, while capturing, `startCapture()` PORTALS the
   whole `.fss-cap` root to <body>, so it is a full-viewport sibling overlay. Anything
   that opens this modal from inside capture — a scan hit, most obviously — therefore
   opened it BEHIND the overlay: invisible, focus-trapped, and reading to the user as
   "the scan did nothing".
   Latent until now only because the sole trigger lived in the QR tab, outside capture.
   2210 clears the capture overlay and stays BELOW `.photo-lightbox` (2600), which is
   required: evidence photos are opened FROM this modal and must paint over it. */
.fss-pen-modal {
  z-index: 2210;
}

.fss-pen-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The view + edit form are the article's direct children (gapped above); the
   view's own sections (summary, gallery, status bar, actions) need their own
   column gap or they sit flush. */
.fss-pen-detail__view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fss-pen-detail__loading {
  padding: 28px 8px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
}

/* ---- Summary card (inset, sectioned with separators — mirrors the door) --- */
.fss-pen-detail__summary {
  background: var(--surface-inset);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
}

.fss-pen-detail__summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--rule);
}

.fss-pen-detail__name {
  color: var(--ink);
  font-family: var(--font-display, "Space Grotesk", "Inter", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  min-width: 0;
}

.fss-pen-detail__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fss-pen-detail__alert {
  padding: 10px 16px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.55;
  border-bottom: 1px solid var(--rule);
}

.fss-pen-detail__alert code {
  background: var(--surface-card);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}

.fss-pen-detail__alert--defect {
  color: var(--danger);
  background: var(--danger-soft);
}

.fss-pen-detail__spec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
}

.fss-pen-detail__spec-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-card);
  border: 1px solid var(--rule-strong);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 400;
}

.fss-pen-detail__spec-pill--muted { color: var(--ink-4); }

.fss-pen-detail__meta-row {
  padding: 10px 16px 12px;
}

.fss-pen-detail__notes {
  color: var(--ink-4);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
}

/* ---- Auto-loaded evidence gallery (the penetration-specific addition) ----- */
.fss-pen-detail__gallery-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fss-pen-detail__gallery-label {
  margin: 0 0 8px;
  color: var(--ink-4);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fss-pen-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.fss-pen-detail__photo {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--surface-inset);
  cursor: zoom-in;
}

.fss-pen-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fss-pen-detail__empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  text-align: center;
  color: var(--ink-4);
  font-size: 12.5px;
}

/* ---- Status bar (mirrors the door status bar) ----------------------------- */
.fss-pen-detail__status-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--success);
  background: var(--success-soft);
}

.fss-pen-detail__status-bar--fail {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.fss-pen-detail__status-metric p {
  margin: 0 0 2px;
  color: var(--ink-4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fss-pen-detail__status-metric strong {
  color: var(--success);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fss-pen-detail__status-bar--fail .fss-pen-detail__status-metric strong { color: var(--danger); }
/* Non-defect: the metric renders an em-dash, so it needs a muted colour of its
   own rather than inheriting whichever severity tint happened to be last. */
.fss-pen-detail__severity-value--none { color: var(--ink-4, #6b6458); }
.fss-pen-detail__severity-value--low { color: var(--ink-4); }
.fss-pen-detail__severity-value--medium { color: var(--accent); }
.fss-pen-detail__severity-value--high { color: var(--danger); }

.fss-pen-detail__status-sep {
  width: 1px;
  height: 28px;
  background: var(--success);
  opacity: 0.4;
  flex-shrink: 0;
}

.fss-pen-detail__status-bar--fail .fss-pen-detail__status-sep { background: var(--danger); }

.fss-pen-detail__status-note {
  margin: 0 0 0 auto;
  color: var(--success);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fss-pen-detail__status-bar--fail .fss-pen-detail__status-note { color: var(--danger); }

/* An item still on the list: not a result, so neither green nor red (capture forms review O4). */
.fss-pen-detail__status-bar--listed {
  border-color: var(--rule-strong);
  background: var(--surface-subtle);
}

.fss-pen-detail__status-bar--listed .fss-pen-detail__status-metric strong,
.fss-pen-detail__status-bar--listed .fss-pen-detail__status-note { color: var(--ink-2); }

.fss-pen-detail__status-bar--listed .fss-pen-detail__status-sep { background: var(--rule-strong); }

/* ---- Actions ------------------------------------------------------------- */
.fss-pen-detail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fss-pen-detail__danger-btn {
  color: var(--danger);
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fss-pen-detail__danger-btn:hover,
.fss-pen-detail__danger-btn:focus-visible {
  color: #851d1d;
  outline: none;
}