.public-exposure-page {
  background: var(--bg-0);
}

.per-hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line-soft);
}

.per-hero h1 {
  margin-top: 12px;
  max-width: 760px;
}

.per-hero-copy {
  max-width: 860px;
}

.per-subtitle {
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--fg-1);
  max-width: 780px;
}

.per-preview-note,
.per-safe-note,
.per-limit-card,
.per-future-card,
.per-panel,
.per-mode-card,
.per-overall-card,
.per-issue-card,
.per-fix-card,
.per-module-card,
.per-related-card,
.per-technical-group,
.per-check-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, oklch(0.18 0.018 250 / 0.82), oklch(0.14 0.016 250 / 0.9));
  border-radius: var(--r-md);
}

.per-mode-form {
  margin-top: 26px;
}

.per-path-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: oklch(0.12 0.014 250 / 0.72);
}

.per-path-toggle span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 800;
}

.per-path-toggle .is-active {
  color: var(--fg-0);
  background: oklch(0.80 0.095 190 / 0.18);
  box-shadow: 0 0 0 1px var(--acc-line) inset;
}

.per-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.per-scan-start-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
  align-items: stretch;
}

.per-simple-start-grid {
  grid-template-columns: minmax(0, 760px);
}

.per-mode-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px;
}

.per-primary-scan-card {
  border-color: var(--acc-line);
  background:
    linear-gradient(180deg, oklch(0.80 0.095 190 / 0.12), oklch(0.14 0.016 250 / 0.90)),
    var(--bg-elev);
}

.per-primary-scan-card h2 {
  font-size: clamp(28px, 4vw, 40px);
}

.per-secondary-scan-card {
  gap: 12px;
  background:
    linear-gradient(180deg, oklch(0.96 0.01 250 / 0.055), oklch(0.14 0.016 250 / 0.86)),
    var(--bg-elev);
}

.per-mode-card.is-selected {
  border-color: var(--acc-line);
  box-shadow: 0 0 0 1px var(--acc-line);
}

.per-mode-card h2 {
  margin: 4px 0 8px;
  font-family: var(--ui);
  font-size: 24px;
  letter-spacing: 0;
}

.per-mode-card label,
.per-advanced-body label {
  color: var(--fg-0);
  font-weight: 600;
}

.per-mode-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.per-safe-start-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.per-safe-start-strip span,
.per-safe-start-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--fg-2);
  background: oklch(0.13 0.014 250 / 0.62);
  font-size: 12px;
  font-weight: 800;
}

.per-safe-start-strip a {
  color: var(--acc);
}

.per-advanced-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: oklch(0.13 0.014 250 / 0.48);
}

.per-advanced-toggle-row p {
  margin: 0;
  color: var(--fg-2);
}

.per-advanced-toggle-row .per-card-label {
  margin-bottom: 4px;
  color: var(--fg-3);
}

.per-advanced-toggle-row .btn {
  flex: 0 0 auto;
}

.per-preview-note,
.per-safe-note {
  padding: 18px;
}

.per-preview-note strong,
.per-safe-note strong {
  display: block;
  color: var(--fg-0);
  margin-bottom: 6px;
}

.per-future-form,
.per-scan-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.per-future-form label,
.per-scan-form label {
  color: var(--fg-0);
  font-weight: 600;
}

.per-scan-form h2 {
  margin: 4px 0 0;
  font-family: var(--ui);
  font-size: 22px;
  letter-spacing: 0;
}

.per-context-options {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.per-context-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  background: oklch(0.13 0.014 250 / 0.62);
}

.per-context-options input {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
}

.per-future-input-row,
.per-website-target-row,
.per-domain-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.per-future-input-row input,
.per-website-target-row input,
.per-website-target-row select,
.per-domain-target-row input,
.per-advanced-body input,
.per-advanced-body select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--fg-0);
  padding: 12px 14px;
  font: inherit;
}

.per-advanced-options {
  margin-top: 2px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.per-advanced-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: oklch(0.13 0.014 250 / 0.48);
}

.per-advanced-shell[hidden] {
  display: none;
}

.per-advanced-options summary {
  cursor: pointer;
  width: fit-content;
  color: var(--fg-0);
  font-weight: 700;
}

.per-advanced-options summary:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.per-advanced-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.per-advanced-grid {
  grid-template-columns: minmax(280px, 0.9fr) minmax(240px, 0.7fr) minmax(280px, 1fr);
  gap: 18px;
}

.per-advanced-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.per-disabled-button {
  opacity: 0.72;
  cursor: not-allowed;
}

.per-section {
  padding: 42px 0;
}

.per-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.per-section-head h2 {
  margin: 4px 0 0;
}

.per-section-head p {
  margin: 0;
  color: var(--fg-2);
}

.per-overall-card {
  padding: 22px;
}

.per-overall-top {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}

.per-score {
  display: grid;
  gap: 8px;
}

.per-card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.per-score strong {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1;
  color: var(--fg-0);
}

.per-score small,
.per-muted,
.per-issue-card small,
.per-module-card small {
  color: var(--fg-2);
}

.per-overall-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.per-overall-meta div,
.per-counts div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px;
  background: oklch(0.13 0.014 250 / 0.62);
}

.per-overall-meta dt,
.per-counts span {
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.per-overall-meta dd {
  margin: 4px 0 0;
  color: var(--fg-0);
  overflow-wrap: anywhere;
}

.per-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.per-counts strong {
  display: block;
  color: var(--fg-0);
  font-size: 28px;
  margin-top: 4px;
}

.per-issues-grid,
.per-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.per-fix-list {
  display: grid;
  gap: 12px;
}

.per-issue-card,
.per-module-card,
.per-related-card,
.per-check-card {
  padding: 18px;
  min-width: 0;
}

.per-issue-card h3,
.per-module-card h3,
.per-fix-card h3,
.per-related-card h3,
.per-check-card h3 {
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 12px 0 8px;
}

.per-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.per-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--fg-0);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-2);
}

.per-status-critical,
.per-status-high {
  border-color: oklch(0.68 0.18 30 / 0.55);
  background: oklch(0.68 0.18 30 / 0.14);
}

.per-status-warning,
.per-status-medium {
  border-color: oklch(0.82 0.11 92 / 0.55);
  background: oklch(0.82 0.11 92 / 0.14);
}

.per-status-info,
.per-status-passed,
.per-status-low {
  border-color: oklch(0.78 0.13 145 / 0.55);
  background: oklch(0.78 0.13 145 / 0.12);
}

.per-status-preview,
.per-status-not-connected,
.per-status-unknown {
  border-color: var(--acc-line);
  background: var(--acc-soft);
}

.per-module-id,
.per-module-score {
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 12px;
}

.per-next-step {
  color: var(--fg-0);
}

.per-fix-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.per-fix-priority {
  width: 42px;
  height: 42px;
  border: 1px solid var(--acc-line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--fg-0);
  font-family: var(--mono);
  background: var(--acc-soft);
}

.per-card-actions,
.per-copy-actions,
.per-future-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.per-details-grid {
  display: grid;
  gap: 12px;
}

.per-technical-group {
  overflow: hidden;
}

.per-technical-group summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--fg-0);
}

.per-check-list {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.per-raw-preview {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px;
  background: oklch(0.10 0.012 250 / 0.74);
  color: var(--fg-1);
  font-family: var(--mono);
  font-size: 12px;
}

.per-limit-grid,
.per-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.per-limit-card,
.per-future-card {
  padding: 18px;
}

.per-copy-panel {
  display: grid;
  gap: 14px;
}

.per-result-disclosure {
  margin-top: 14px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(0.18 0.018 250 / 0.72), oklch(0.14 0.016 250 / 0.86));
}

.per-result-disclosure summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--fg-0);
  font-weight: 800;
}

.per-result-disclosure > :not(summary) {
  margin-left: 18px;
  margin-right: 18px;
}

.per-result-disclosure > :last-child {
  margin-bottom: 18px;
}

.per-copy-status {
  min-height: 24px;
  color: var(--fg-2);
}

.per-copy-fallback {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--fg-0);
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
}

.per-related-card ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.per-related-card a {
  color: var(--acc);
  overflow-wrap: anywhere;
}

.per-related-card a:hover {
  color: var(--fg-0);
}

@media (max-width: 900px) {
  .per-mode-grid,
  .per-scan-start-grid,
  .per-overall-top,
  .per-limit-grid,
  .per-related-grid {
    grid-template-columns: 1fr;
  }

  .per-advanced-grid {
    grid-template-columns: 1fr;
  }

  .per-issues-grid,
  .per-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .per-hero {
    padding-top: 36px;
  }

  .per-future-input-row,
  .per-website-target-row,
  .per-domain-target-row,
  .per-overall-meta,
  .per-counts,
  .per-issues-grid,
  .per-module-grid {
    grid-template-columns: 1fr;
  }

  .per-section {
    padding: 30px 0;
  }

  .per-section-head {
    display: grid;
    gap: 8px;
  }

  .per-fix-card {
    grid-template-columns: 1fr;
  }

  .per-advanced-toggle-row {
    display: grid;
    justify-items: stretch;
  }

  .per-copy-actions .btn,
  .per-card-actions .btn,
  .per-scan-form .btn,
  .per-advanced-toggle-row .btn,
  .per-website-target-row .btn,
  .per-domain-target-row .btn,
  .per-future-input-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase 1 P0: keep the primary report flow inside narrow mobile viewports. */
@media (max-width: 720px) {
  .public-exposure-page {
    overflow-x: clip;
  }

  .public-exposure-page .wrap,
  .public-exposure-page .wrap.l-report,
  .public-exposure-page .wrap:not(.l-report) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: clamp(14px, 4.5vw, 20px);
    padding-right: clamp(14px, 4.5vw, 20px);
  }

  .public-exposure-page .per-hero-copy,
  .public-exposure-page .per-mode-form,
  .public-exposure-page .per-path-toggle,
  .public-exposure-page .per-mode-grid,
  .public-exposure-page .per-mode-card,
  .public-exposure-page .per-advanced-toggle-row,
  .public-exposure-page .per-domain-target-row,
  .public-exposure-page .per-future-input-row,
  .public-exposure-page .per-website-target-row,
  .public-exposure-page .per-advanced-body,
  .public-exposure-page .per-section,
  .public-exposure-page .per-section-head,
  .public-exposure-page .per-overall-card,
  .public-exposure-page .per-issues-grid,
  .public-exposure-page .per-module-grid,
  .public-exposure-page .per-limit-grid,
  .public-exposure-page .per-related-grid,
  .public-exposure-page .per-copy-panel,
  .public-exposure-page .per-copy-actions {
    min-width: 0;
    max-width: 100%;
  }

  .public-exposure-page .per-path-toggle {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }

  .public-exposure-page .per-path-toggle span {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .public-exposure-page .per-mode-grid,
  .public-exposure-page .per-scan-start-grid,
  .public-exposure-page .per-advanced-toggle-row,
  .public-exposure-page .per-domain-target-row,
  .public-exposure-page .per-future-input-row,
  .public-exposure-page .per-website-target-row,
  .public-exposure-page .per-overall-meta,
  .public-exposure-page .per-counts,
  .public-exposure-page .per-issues-grid,
  .public-exposure-page .per-module-grid,
  .public-exposure-page .per-limit-grid,
  .public-exposure-page .per-related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .public-exposure-page .btn,
  .public-exposure-page .btn-lg {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .public-exposure-page .per-mode-actions .btn,
  .public-exposure-page .per-advanced-toggle-row .btn,
  .public-exposure-page .per-domain-target-row .btn,
  .public-exposure-page .per-copy-actions .btn,
  .public-exposure-page .per-card-actions .btn,
  .public-exposure-page .per-future-input-row .btn,
  .public-exposure-page .per-website-target-row .btn {
    width: 100%;
    justify-content: center;
  }

  .public-exposure-page input,
  .public-exposure-page select,
  .public-exposure-page textarea {
    min-width: 0;
    max-width: 100%;
  }

  .public-exposure-page h1,
  .public-exposure-page h2,
  .public-exposure-page h3,
  .public-exposure-page p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .public-exposure-page .per-mode-card {
    padding: 16px;
  }

  .public-exposure-page .per-primary-scan-card h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .public-exposure-page .per-advanced-panel {
    padding: 14px;
  }
}