/* ── Severity tier legend ─────────────────────────── */
.si-tier-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.si-tier-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.si-tier-icon {
  flex-shrink: 0;
}

.si-tier-pass { color: #16a34a; }
.si-tier-advisory { color: #b45309; }
.si-tier-attention { color: #c2410c; }
.si-tier-urgent { color: #dc2626; }

/* ── Intro screen ─────────────────────────────────── */
.si-intro-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block: 1rem;
}

.si-intro-field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.si-radio-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.si-radio-row label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.92rem;
}

/* Fixed to the bottom of the viewport, rather than sticky near the top,
   so it never overlaps a freshly-scrolled-to accordion heading. This
   stylesheet is only loaded on the self-inspection page. */
body {
  padding-bottom: 5.5rem;
}

.si-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 0.85rem max(1.25rem, calc((100% - var(--max-w)) / 2 + 1.25rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

.si-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface);
  border-radius: 999px;
  overflow: hidden;
}

.si-progress__fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

.si-progress__counts {
  white-space: nowrap;
  color: var(--color-muted);
}

.si-progress__counts strong.si-flag { color: #dc2626; }

.si-autosave-note {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: -0.75rem;
  margin-bottom: 1rem;
}

/* ── Accordion (namespaced separately from the homepage accordion so this
   page's items can open independently of each other) ─────────────────── */
.si-accordion {
  border-top: 1px solid var(--color-border);
}

.si-accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.si-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  font-family: inherit;
}

.si-accordion-trigger__left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.si-accordion-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.si-accordion-standard {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: #eff6ff;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.si-accordion-badge {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.si-accordion-badge.si-flag {
  color: #dc2626;
  font-weight: 600;
}

.si-accordion-chevron {
  flex-shrink: 0;
  color: var(--color-muted);
  transition: transform 0.25s ease;
}

.si-accordion-item.open .si-accordion-chevron {
  transform: rotate(180deg);
}

.si-accordion-body {
  overflow-anchor: none;
}

.si-accordion-body[hidden] {
  display: none;
}

.si-accordion-content {
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.si-section-intro {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.si-section-callout {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #991b1b;
  line-height: 1.6;
}

/* ── Item row ─────────────────────────────────────── */
.si-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.si-item__text {
  font-size: 0.92rem;
  font-weight: 500;
}

.si-item__hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

.si-severity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.si-severity-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.si-severity-btn[data-state="pass"].active { background: #16a34a; border-color: #16a34a; color: #fff; }
.si-severity-btn[data-state="fail"].active { background: #dc2626; border-color: #dc2626; color: #fff; }
.si-severity-btn[data-state="not_applicable"].active { background: #94a3b8; border-color: #94a3b8; color: #fff; }
.si-severity-btn[data-state="not_inspected"].active { background: var(--color-muted); border-color: var(--color-muted); color: #fff; }

.si-item-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.si-item-note {
  flex: 1 1 220px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.85rem;
}

.si-photo-btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  color: var(--color-muted);
}

.si-photo-btn.has-photo {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.si-item-warning {
  font-size: 0.82rem;
  font-weight: 600;
  color: #dc2626;
}

.si-item-warning.si-sev-advisory { color: #b45309; }
.si-item-warning.si-sev-attention { color: #c2410c; }
.si-item-warning.si-sev-urgent { color: #dc2626; }

/* ── Report / lead capture ────────────────────────── */
.si-report {
  background: #eff6ff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-block: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.si-report__summary {
  font-size: 0.92rem;
  color: var(--color-muted);
}

/* ── Four-pane summary panel ──────────────────────── */
.si-summary-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.si-summary-header {
  background: var(--color-text);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.75rem;
}

.si-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.si-summary-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem 0.5rem;
  border-right: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.si-summary-pane:nth-child(2n) {
  border-right: none;
}

.si-summary-pane:nth-child(n+3) {
  border-bottom: none;
}

.si-summary-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.si-summary-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.si-summary-count {
  font-size: 1.6rem;
  font-weight: 800;
}

.si-summary-pass { background: #f0fdf4; color: #166534; }
.si-summary-advisory { background: #fffbeb; color: #92400e; }
.si-summary-attention { background: #fff7ed; color: #9a3412; }
.si-summary-urgent { background: #fef2f2; color: #991b1b; }

/* ── Recommended actions table ────────────────────── */
.si-action-checklist {
  margin-top: 0.5rem;
}

.si-action-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.85rem;
  background: #fff;
}

.si-action-table th,
.si-action-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.si-action-table th {
  background: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.si-action-table tbody tr:last-child td {
  border-bottom: none;
}

/* Stack into cards on narrow screens instead of forcing the table wider
   than the viewport, which was pushing the whole page into horizontal
   overflow (and dragging the fixed bottom bar off-screen with it). */
@media (max-width: 640px) {
  .si-action-table thead {
    display: none;
  }

  .si-action-table,
  .si-action-table tbody,
  .si-action-table tr,
  .si-action-table td {
    display: block;
    width: 100%;
  }

  .si-action-table tr {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0.85rem;
  }

  .si-action-table tbody tr:last-child {
    border-bottom: none;
  }

  .si-action-table td {
    border: none;
    padding: 0.2rem 0;
  }

  .si-action-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 0.4rem;
  }

  .si-action-table td:first-child::before {
    margin-top: 0;
  }

  .si-action-severity {
    white-space: normal;
  }
}

.si-action-severity {
  white-space: nowrap;
  font-weight: 600;
}

.si-action-difficulty {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.si-action-difficulty.si-diff-easy { background: #dcfce7; color: #166534; }
.si-action-difficulty.si-diff-medium { background: #dbeafe; color: #1e40af; }
.si-action-difficulty.si-diff-advanced { background: #fef3c7; color: #92400e; }
.si-action-difficulty.si-diff-professional { background: #1f2937; color: #fff; }

.si-data-policy {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.si-inspector-same-row {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.si-inspector-same {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.si-inspector-same input {
  flex: none;
  width: auto;
  margin: 0;
}

.si-signature-field {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.si-signature-field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.si-signature-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
}

#si-signature-pad {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  /* Scrolls normally until "armed" via the overlay tap; only then does the
     JS switch this to touch-action: none so drawing doesn't fight scroll. */
  touch-action: pan-y;
  cursor: crosshair;
}

.si-signature-wrap.armed #si-signature-pad {
  touch-action: none;
}

.si-signature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
}

.si-signature-wrap.armed .si-signature-overlay {
  display: none;
}

.si-signature-field .btn {
  align-self: flex-start;
}

.si-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  flex-basis: 100%;
  width: 100%;
}

.si-consent input {
  flex: none;
  width: auto;
  margin: 0.2rem 0 0 0;
}

#si-report-status {
  width: 100%;
  font-size: 0.8rem;
}

#si-report-status.ok { color: #16a34a; }
#si-report-status.err { color: #dc2626; }