/* ==========================================================================
   PEEKWELL PORTAL · LAYOUT GLUE
   Page frames for the app shell, the public pages and the auth pages.
   Components come from peekwell.css; this file uses tokens only.
   ========================================================================== */

/* ---- Contrast (QA): small captions and hints read at 4.5:1 or better in both themes. ------------- */
:root { --text-3: #5C6270; --graph-axis-text: #5C6270; }
:root[data-theme="dark"] { --text-3: var(--ink-500); --graph-axis-text: var(--ink-500); }


.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: var(--z-tooltip); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--bg-inverse); color: var(--text-inverse); text-decoration: none; }
.skip-link:focus { top: var(--s-3); }
main:focus { outline: none; box-shadow: none; }

/* ---- App shell ---------------------------------------------------------- */
.app-shell { min-height: 100dvh; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 901px) {
  .app-shell > .pw-sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
.pw-sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-top { min-height: 60px; display: flex; align-items: center; gap: var(--s-4); padding: 8px var(--s-8); border-bottom: 1px solid var(--line); background: var(--bg); }
.app-top__crumbs { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
/* Each crumb shrinks with an ellipsis instead of being cut mid-word; the current page shrinks last. */
.app-top__crumbs > a, .app-top__crumbs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.app-top__crumbs > span:last-child { flex-shrink: 0.4; }
.app-top__crumbs > .ph { flex-shrink: 0; }
@media (max-width: 640px) {
  /* On a phone only the parent and the current page are shown. */
  .app-top__crumbs > :not(:nth-last-child(-n+3)) { display: none; }
}
.app-top__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.app-user { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 12px 4px 4px; border-radius: var(--r-md); color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background var(--t-fast); }
.app-user:hover { background: var(--line-soft); color: var(--text); }
.app-user .pw-avatar { width: 32px; height: 32px; }

.app-body { width: 100%; max-width: calc(var(--content-max) + 2 * var(--s-8)); padding: var(--s-8) var(--s-8) var(--s-16); display: grid; gap: var(--s-6); align-content: start; min-width: 0; }
.app-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.app-head__title:empty, .app-head__actions:empty { display: none; }
.app-head:has(.app-head__title:empty):has(.app-head__actions:empty) { display: none; }
.app-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.app-body form.form-stack { max-width: 560px; }

.impersonation { align-items: center; }
.impersonation > div { flex: 1; }
.impersonation__stop { margin: 0; }

@media (max-width: 900px) {
  /* Mobile bar then main; without this the implicit rows share the spare height and short pages get a gap. */
  .app-shell { grid-template-rows: auto 1fr; }
  .app-top { padding: 8px var(--s-6); }
  .app-body { padding: var(--s-6) var(--s-6) var(--s-12); }
}
@media (max-width: 640px) {
  .app-top { padding: 6px var(--s-4); min-height: 52px; }
  .app-user__name { display: none; }
  .app-user { padding: 4px; }
  .app-body { padding: var(--s-5) var(--s-4) var(--s-12); gap: var(--s-5); }
}

/* ---- Theme toggle: the reading lamp ------------------------------------ */
.theme-toggle i { font-size: 1.3em; }
.theme-toggle__on { display: none; color: var(--brass-400); }
:root[data-theme="dark"] .theme-toggle__on { display: inline-block; }
:root[data-theme="dark"] .theme-toggle__off { display: none; }

/* ---- Toasts and modals ------------------------------------------------- */
.toast-stack { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: var(--z-toast); display: grid; gap: var(--s-2); justify-items: end; pointer-events: none; }
.toast-stack .pw-toast { pointer-events: auto; animation: pw-settle var(--t-slow) var(--ease-soft) both; transition: opacity var(--t-base), transform var(--t-base); }
.toast-stack .pw-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.pw-toast__action .ph { color: inherit; font-size: 16px; }
@media (max-width: 640px) { .toast-stack { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); justify-items: stretch; } .toast-stack .pw-toast { min-width: 0; max-width: none; } }

/* HTMX swaps a .pw-modal-overlay (holding a .pw-modal) into #modal-root; app.js closes it. */
.pw-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-4); overflow-y: auto; background: var(--bg-overlay); animation: pw-settle var(--t-base) var(--ease-soft) both; }
.pw-modal-overlay > .pw-modal { animation: pw-settle var(--t-slow) var(--ease-soft) both; max-height: none; }
body.has-modal { overflow: hidden; }

/* ---- Forms ------------------------------------------------------------- */
.form-stack { gap: var(--s-4); }
.form-actions { margin-top: var(--s-2); }
.field-choices { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.table-wrap { overflow-x: auto; }
/* File inputs: the picker button looks like a small outline pw-btn. */
input[type="file"].pw-input { height: auto; min-height: 46px; padding: 5px 6px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: var(--s-3); min-height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--bg-sheet); color: var(--text);
  font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
input[type="file"]::file-selector-button:hover { background: var(--paper-100); border-color: var(--ink-500); }
.confirm-text { margin: 0; font-weight: 500; }
.is-resizing .pw-sidebar { transition: none !important; }
/* Score history: the status pill stays on one line next to the title. */
.pw-history__head .pw-sev { flex-shrink: 0; white-space: nowrap; }

/* ---- Public pages ------------------------------------------------------ */
body.public { min-height: 100dvh; display: flex; flex-direction: column; }
.public-top__actions { margin-left: auto; gap: var(--s-2); }
.public-main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-10) var(--gutter); display: grid; gap: var(--s-6); align-content: start; }
.public-foot { padding: var(--s-5) var(--gutter) var(--s-6); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-base); }
.public-foot p { margin: 0 auto; max-width: var(--content-max); }
@media (max-width: 640px) {
  .public-top { padding: 0 var(--s-4); }
  .public-top .theme-toggle.pw-btn--ghost { display: inline-flex; }
  .public-top .public-top__signin { display: inline-flex; padding: 0 10px; }
  .public-top__actions { gap: var(--s-1); flex-wrap: nowrap; }
  .public-top__actions .pw-btn { white-space: nowrap; }
}
@media (max-width: 420px) {
  /* Room for "Sign in" and "Create account" side by side: the mark stays, the word goes. */
  .public-top .pw-brand__word { display: none; }
}

/* ---- Auth pages: form on the left, Peeky on a stage on the right ------- */
.auth { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-12); padding: var(--s-10) var(--gutter) var(--s-12); }
.auth__panel { display: grid; align-content: center; justify-items: center; min-width: 0; }
.auth__form { width: 100%; max-width: 440px; display: grid; gap: var(--s-6); animation: pw-settle var(--t-slow) var(--ease-soft) both; }
.auth__intro { display: grid; gap: var(--s-3); }
.auth__intro .pw-lead { margin: 0; font-size: var(--fs-md); }
.auth__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.auth__art { min-height: 580px; border-radius: var(--r-3xl); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pw-stage > img.auth__figure { inset: 0 0 14% 0; height: 66%; width: auto; filter: drop-shadow(0 16px 24px rgba(31, 36, 48, 0.18)); animation: pw-peek var(--t-story) var(--ease-peek) 120ms both; }
.auth__caption { position: absolute; left: var(--s-8); right: var(--s-8); bottom: var(--s-8); margin: 0; font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.3; color: var(--ink-700); text-align: center; }
.auth-submit { width: 100%; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.auth-link { font-size: var(--fs-sm); }
.auth-or { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-rule { margin: var(--s-2) 0; }
.auth-switch { margin: 0; font-size: var(--fs-sm); color: var(--text-2); text-align: center; }
.provider-btn .ph { font-size: 1.3em; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; gap: var(--s-8); padding-top: var(--s-8); }
  .auth__form { max-width: 520px; }
  .auth__art { min-height: 0; aspect-ratio: 4 / 3; max-height: 380px; }
}
@media (max-width: 640px) {
  .auth { padding: var(--s-6) var(--s-4) var(--s-8); gap: var(--s-6); }
  .auth__form { gap: var(--s-5); }
  .auth__art { aspect-ratio: 5 / 4; border-radius: var(--r-2xl); }
  .pw-stage > img.auth__figure { height: 64%; inset: 0 0 18% 0; }
  .auth__caption { font-size: 1.15rem; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
}

/* ---- Dashboard placeholder, error pages -------------------------------- */
.dash-empty { padding-block: var(--s-12) var(--s-10); }
.error-page { width: 100%; max-width: 520px; margin: var(--s-10) auto; }

/* ---- Companies and organizations --------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pw-tag--observer { gap: 5px; background: var(--sev-watch-bg); color: var(--sev-watch-text); }
.pw-tag--observer .ph { font-size: 14px; }
.pw-sidebar__observer { margin-left: auto; flex-shrink: 0; font-size: 16px; opacity: 0.8; }

.co-logo { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; background: var(--sev-info-bg); color: var(--sev-info-text); font: 600 var(--fs-sm)/1 var(--font-ui); border: 1px solid var(--line-soft); }
.co-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-sheet); }
.co-logo--lg { width: 88px; height: 88px; border-radius: var(--r-xl); font-size: var(--fs-xl); }
.co-head { display: flex; gap: var(--s-6); align-items: flex-start; }
.co-head__body { min-width: 0; flex: 1; display: grid; gap: var(--s-3); }
.co-head__text { margin: 0; color: var(--text-2); line-height: var(--lh-loose); max-width: 70ch; overflow-wrap: anywhere; }
.co-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3) var(--s-6); }
.co-facts dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.co-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.co-form { max-width: 640px; }
.co-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.co-sub { margin: var(--s-6) 0 var(--s-2); }
.co-leave { margin: 0; }
.co-staff { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.co-staff form { margin: 0; }
.pw-code { overflow-wrap: anywhere; }
.pw-select--compact { min-height: 36px; height: 36px; padding-block: 0; font-size: var(--fs-sm); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.rows__item:last-child { border-bottom: 0; }
.rows__who { min-width: 0; flex: 1 1 200px; display: grid; }
.rows__who b, .rows__who span { overflow-wrap: anywhere; }
.rows__role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }
.rows__role form { margin: 0; }
.rows__form { display: flex; align-items: center; gap: var(--s-2); }
.rows__icon { font-size: 22px; color: var(--text-3); width: 36px; text-align: center; }

@media (max-width: 640px) {
  .co-head { flex-direction: column; gap: var(--s-4); }
  .co-logo--lg { width: 64px; height: 64px; }
  .co-form__pair { grid-template-columns: 1fr; }
  .rows__role { margin-left: 0; width: 100%; }
}

/* ---- Billing ----------------------------------------------------------- */
.bill-tag--good { background: var(--sev-pass-bg); color: var(--sev-pass-text); }
.bill-tag--warn { background: var(--sev-high-bg); color: var(--sev-high-text); }
.bill-tag--bad { background: var(--sev-critical-bg); color: var(--sev-critical-text); }
.bill-tag--brand { background: var(--sev-info-bg); color: var(--sev-info-text); }

.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); align-items: start; }
.bill-grid > .pw-card { min-width: 0; }
.bill-summary { display: grid; gap: var(--s-3); }
.bill-summary p { margin: 0; }
.bill-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.bill-price .pw-stat__value { font-size: var(--fs-2xl); }
.bill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bill-actions form { margin: 0; }
.bill-note { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-base); max-width: 62ch; }

.bill-upsell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; }
.bill-upsell img { width: 120px; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.14)); }

.bill-options { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.bill-option { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-sheet); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.bill-option:hover { border-color: var(--line-strong); }
.bill-option:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.bill-option:has(input:focus-visible) { box-shadow: var(--lens); }
.bill-option.is-disabled { cursor: not-allowed; opacity: 0.6; }
.bill-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.bill-option__body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.bill-option__body b, .bill-option__body span { overflow-wrap: anywhere; }
/* Money: one face everywhere in running text and tables (the UI face, tabular figures); headline prices keep the
   display face of .pw-stat__value. */
.bill-option__amount { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); white-space: nowrap; }

.bill-cardicon { flex-shrink: 0; width: 44px; height: 30px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--paper-200); color: var(--text-2); font-size: 20px; }
.bill-table .num { white-space: nowrap; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.bill-table td small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .bill-upsell { grid-template-columns: 1fr; }
  .bill-upsell img { width: 96px; order: -1; }
  .bill-table thead { display: none; }
  .bill-table, .bill-table tbody, .bill-table tr, .bill-table td { display: block; width: 100%; }
  .bill-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
  .bill-table tbody tr:last-child { border-bottom: 0; }
  .bill-table td { padding: 2px 0; border: 0; text-align: left; }
  .bill-table td.num { text-align: left; }
  .bill-table td[data-label]::before { content: attr(data-label) " · "; color: var(--text-3); font-size: var(--fs-xs); }
  .bill-table tbody tr:hover td { background: none; }
}

.stripe-element { min-height: 120px; padding: var(--s-2) 0; }
.fake-checkout { max-width: 520px; }
.bill-banner-action { margin-top: var(--s-3); }
ul.bill-note { padding-left: 1.2em; display: grid; gap: var(--s-1); }
.bill-sheet { display: grid; gap: var(--s-4); }
.bill-sheet > .pw-card__header { margin-bottom: 0; }
.bill-note + .rows { margin-top: var(--s-3); }
.bill-option:has(input:checked) .pw-check__box { background: var(--action); border-color: var(--action); }
.bill-option:has(input:checked) .pw-check--radio .pw-check__box::after { transform: scale(1); }
.bill-options > legend { margin-bottom: var(--s-2); }

/* ---- Scans: contexts, targets, requests -------------------------------- */
.scan-tag--good { background: var(--sev-pass-bg); color: var(--sev-pass-text); }
.scan-tag--warn { background: var(--sev-high-bg); color: var(--sev-high-text); }
.scan-tag--bad { background: var(--sev-critical-bg); color: var(--sev-critical-text); }
.scan-tag--brand { background: var(--sev-info-bg); color: var(--sev-info-text); }
.scan-intro { margin: 0; color: var(--text-2); line-height: var(--lh-base); max-width: 70ch; }
.scan-note { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-base); max-width: 62ch; }
.scan-sub { margin: var(--s-6) 0 var(--s-2); }
.scan-url { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: break-word; }

.scan-score { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.scan-score .pw-ring { flex-shrink: 0; }
.scan-score__basis { display: grid; gap: 2px; min-width: 0; }
.scan-score__basis b { font-size: var(--fs-sm); overflow-wrap: anywhere; }

.scan-ctx { display: grid; gap: var(--s-4); align-content: start; }
.scan-ctx > .pw-card__header { margin-bottom: 0; }
.scan-ctx__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.scan-ctx__title { display: grid; gap: var(--s-2); min-width: 0; }
.scan-ctx__title a { color: inherit; text-decoration: none; }
.scan-ctx__title a:hover { text-decoration: underline; }
.scan-ctx__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scan-ctx__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.scan-section-actions { margin-top: var(--s-4); }

.scan-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.scan-grid > * { min-width: 0; }
.scan-stack { display: grid; gap: var(--s-6); min-width: 0; }
.scan-details { margin-top: var(--s-6); }
.scan-details summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.scan-empty { padding-block: var(--s-6); }
.scan-form-card { max-width: 640px; }

.bill-option:has(input[type="checkbox"]:checked) .pw-check__box { background: var(--action); border-color: var(--action); }
.bill-option:has(input[type="checkbox"]:checked) .pw-check:not(.pw-check--radio) .pw-check__box::after { transform: rotate(-45deg) scale(1); }
.bill-option:has(input:focus-visible) .pw-check__box { box-shadow: var(--lens); }
.scan-pay { display: none; gap: var(--s-3); }
.scan-priority:has(#id_is_priority:checked) .scan-pay { display: grid; }
.scan-request .bill-options + .pw-field { margin-top: var(--s-2); }

.scan-table .num { white-space: nowrap; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.scan-table td small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.scan-table td:last-child { text-align: right; }

@media (max-width: 900px) {
  .scan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scan-table thead { display: none; }
  .scan-table, .scan-table tbody, .scan-table tr, .scan-table td { display: block; width: 100%; }
  .scan-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
  .scan-table tbody tr:last-child { border-bottom: 0; }
  .scan-table td { padding: 2px 0; border: 0; text-align: left; }
  .scan-table td:last-child { text-align: left; padding-top: var(--s-2); }
  .scan-table td.num { text-align: left; }
  .scan-table td:last-child:empty { display: none; }
  .scan-table td[data-label]::before { content: attr(data-label) " · "; color: var(--text-3); font-size: var(--fs-xs); }
  .scan-table td small { display: inline; margin-left: var(--s-2); }
  .scan-table tbody tr:hover td { background: none; }
}

/* ---- Reports: score header, findings, history ------------------------- */
.rpt-lead { margin: calc(-1 * var(--s-3)) 0 0; color: var(--text-2); font-size: var(--fs-md); overflow-wrap: anywhere; }
.rpt-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.rpt-summary__score { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.rpt-basis { margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.rpt-summary__right { display: grid; gap: var(--s-4); min-width: 0; }
.rpt-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.rpt-stat--bad { color: var(--sev-critical-text); }
.rpt-stat--good { color: var(--sev-pass-text); }
.pw-stat__delta.rpt-delta--down { color: var(--sev-critical-text); }
.rpt-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-3) var(--s-5); font-size: var(--fs-sm); }
.rpt-facts dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.rpt-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.rpt-summary .pw-caption { margin: 0; }

.rpt-brief { display: grid; gap: var(--s-4); }
.rpt-brief .pw-card__title { margin: 0; }
.rpt-md { color: var(--text); line-height: var(--lh-loose); max-width: 72ch; overflow-wrap: anywhere; }
.rpt-md > :first-child { margin-top: 0; }
.rpt-md > :last-child { margin-bottom: 0; }
.rpt-md p, .rpt-md ul, .rpt-md ol { margin: 0 0 var(--s-3); }
.rpt-md ul, .rpt-md ol { padding-left: 1.3em; }
.rpt-md li + li { margin-top: 4px; }
.rpt-md code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-recessed); border-radius: var(--r-xs); padding: 1px 5px; }
.rpt-md pre { background: var(--bg-recessed); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre-wrap; }
.rpt-md pre code { background: none; padding: 0; }
.rpt-md--plain p { font-size: var(--fs-sm); }

.rpt-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; background: var(--butter-100); border-color: var(--butter-300); }
.rpt-cta__text { display: grid; gap: var(--s-3); min-width: 0; }
.rpt-cta__text h2, .rpt-cta__text p { margin: 0; }
.rpt-cta__text p { color: var(--text-2); max-width: 62ch; }
.rpt-cta__actions { flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.rpt-cta__art { width: auto; height: 150px; max-width: 160px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.14)); }
:root[data-theme="dark"] .rpt-cta { background: var(--bg-card); border-color: var(--line); }

.rpt-findings { display: grid; gap: var(--s-5); min-width: 0; }
.rpt-findings__title { margin: var(--s-2) 0 0; }
.rpt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); min-width: 0; }
.rpt-tabs { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rpt-tabs::-webkit-scrollbar { display: none; }
.rpt-tabs a { white-space: nowrap; }
.rpt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-chips .pw-chip { text-decoration: none; }
.rpt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sev-info); }
.rpt-dot--critical { background: var(--sev-critical); } .rpt-dot--high { background: var(--sev-high); }
.rpt-dot--medium { background: var(--sev-medium); } .rpt-dot--low { background: var(--sev-low); }
.rpt-group { display: grid; gap: var(--s-3); min-width: 0; }
.rpt-group__head { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.rpt-group__head h3 { margin: 0; }
.rpt-group__items { display: grid; gap: var(--s-3); min-width: 0; }

.rpt-card .pw-finding__body { padding: var(--s-4) var(--s-5); gap: var(--s-2); }
.rpt-card .pw-finding__title { font-size: var(--fs-md); }
.rpt-card .pw-finding__text { font-size: var(--fs-sm); }
.rpt-card__link { color: inherit; text-decoration: none; }
.rpt-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rpt-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.rpt-card__meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-family: var(--font-mono); }
.rpt-card--quiet { box-shadow: none; background: var(--bg); }
.rpt-card--quiet .pw-finding__title { font-size: var(--fs-sm); font-weight: 500; }
.rpt-card--quiet .pw-finding__text { color: var(--text-3); font-size: var(--fs-xs); }
.rpt-card--quiet .pw-btn--outline { border-color: transparent; }
.rpt-card--withdrawn .pw-finding__title { text-decoration: line-through; text-decoration-color: var(--text-3); }
.rpt-ai { gap: 5px; background: var(--sev-watch-bg); color: var(--sev-watch-text); }
.rpt-disposition { background: var(--sev-info-bg); color: var(--sev-info-text); }

.rpt-locked { box-shadow: none; }
.rpt-locked__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s-4) var(--s-5); }
.rpt-locked__lines { display: grid; gap: 8px; }
.rpt-locked__lines span { display: block; height: 12px; border-radius: 6px; background: var(--paper-200); }
.rpt-locked__lines span:first-child { width: min(70%, 420px); height: 14px; }
.rpt-locked__lines span:last-child { width: min(92%, 620px); }
.rpt-locked__lock { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
:root[data-theme="dark"] .rpt-locked__lines span { background: var(--ink-700); }

.rpt-prompt-slot:empty { display: none; }
.rpt-prompt { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--bg-sheet); }
.rpt-prompt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.rpt-prompt__head .ph { color: var(--sev-pass-text); }
.rpt-prompt__text { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: var(--fs-xs); }

.rpt-history { display: grid; gap: var(--s-4); min-width: 0; }
.rpt-history > .pw-card__header { margin-bottom: 0; }
.rpt-history__graph { min-width: 0; }
.rpt-history__graph .pw-history { box-shadow: none; border: 0; padding: 0; background: none; }
.rpt-history__list { list-style: none; margin: 0; padding: 0; display: grid; }
.rpt-history__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.rpt-history__row:last-child { border-bottom: 0; }
.rpt-history__row.is-current .rpt-history__basis { color: var(--text); }
.rpt-history__date { min-width: 96px; color: var(--text-2); }
.rpt-history__basis { flex: 1 1 180px; color: var(--text-2); font-weight: 600; }
.rpt-history__changes { padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); }
.rpt-history__changes h3 { margin: 0 0 var(--s-2); display: flex; align-items: center; gap: var(--s-2); }
.rpt-history__changes ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-2); }
.rpt-marker__line { stroke: var(--brass-500); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rpt-marker__tag rect { fill: var(--brass-100); stroke: var(--brass-500); }
.rpt-marker__tag text { fill: var(--brass-700); font: 600 11px/1 var(--font-ui); }
:root[data-theme="dark"] .rpt-marker__tag rect { fill: var(--ink-700); }
:root[data-theme="dark"] .rpt-marker__tag text { fill: var(--brass-200); }

.rpt-notrun summary { margin-bottom: var(--s-2); }

/* A report card that folds shut: the card header is the <summary>. */
.rpt-fold > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.rpt-fold > summary::-webkit-details-marker { display: none; }
.rpt-fold__meta { display: flex; align-items: center; gap: var(--s-2); }
.rpt-fold__caret { color: var(--text-2); transition: transform 0.2s; }
.rpt-fold[open] .rpt-fold__caret { transform: rotate(180deg); }
.rpt-fold__body { display: grid; gap: var(--s-4); margin-top: var(--s-4); min-width: 0; }

.rpt-share { border-style: dashed; }
.rpt-share__title { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.rpt-share__art { width: auto; height: 44px; flex: none; filter: drop-shadow(0 3px 5px rgba(31, 36, 48, 0.14)); }
.rpt-share .scan-sub { margin: var(--s-2) 0 0; }
.rpt-share__link { display: grid; gap: var(--s-2); }
/* The label sits above, not floating inside, so the URL centres in the field. */
.rpt-share__link .pw-input { padding: 0 18px; font-family: var(--font-mono); font-size: var(--fs-sm); min-width: 0; text-overflow: ellipsis; }
.rpt-share__link .pw-caption { margin: 0; }
.rpt-share__create, .rpt-share__add { display: grid; gap: var(--s-3); }
.rpt-share__revoke { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.rpt-share__code--off { opacity: 0.6; }
.rpt-share__codes .rows__who b { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; }

/* ---- Finding detail (modal and page) ------------------------------------ */
.fnd { box-shadow: var(--shadow-1); }
.fnd__body { gap: var(--s-4); }
.fnd__title { font-size: var(--fs-xl); }
.fnd__flag { margin: 0; }
.fnd__section { display: grid; gap: var(--s-2); min-width: 0; }
.fnd__label { margin: 0; font: 600 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.fnd__copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.fnd__foot { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.fnd__more { border-top: 1px solid var(--line-soft); padding-top: var(--s-3); }
.fnd__more summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.fnd__more[open] summary { margin-bottom: var(--s-3); }
.fnd-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: var(--fs-sm); }

.fnd-ev { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-sheet); min-width: 0; }
.fnd-ev + .fnd-ev { margin-top: var(--s-2); }
.fnd-ev > summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; }
.fnd-ev__url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: break-word; }
.fnd-ev__rows { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-3); display: grid; gap: var(--s-3); }
.fnd-ev__row { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); min-width: 0; }
.fnd-ev__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fnd-ev__phase { background: var(--sev-info-bg); color: var(--sev-info-text); }
.fnd-ev__summary { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fnd-ev__data summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); font-weight: 500; }
.fnd-ev__dl { margin: var(--s-2) 0 0; display: grid; gap: 6px; padding: var(--s-3); background: var(--bg-recessed); border-radius: var(--r-md); }
.fnd-ev__dl > div { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.fnd-ev__dl dt { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.fnd-ev__dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fnd-ev__dl .pw-code { font-size: var(--fs-xs); }
.fnd-ev__dl .pw-evidence { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-xs); background: var(--bg-sheet); }
.fnd-ev__shot { justify-self: start; display: block; max-width: min(100%, 420px); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-recessed); }
.fnd-ev__shot img { display: block; width: 100%; height: auto; min-height: 60px; object-fit: contain; image-rendering: auto; }

.fnd-locked { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--bg-recessed); }
.fnd-locked > .ph { font-size: 22px; color: var(--sev-high-text); margin-top: 2px; }
.fnd-locked > div { display: grid; gap: var(--s-2); justify-items: start; }
.fnd-locked p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }

.fnd-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.fnd-refs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }

.fnd-thread { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); min-width: 0; }
.fnd-thread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.fnd-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.fnd-reply__avatar { width: 34px; height: 34px; font-size: var(--fs-2xs); }
.fnd-reply--staff .fnd-reply__avatar { background: var(--peeky-200); color: var(--peeky-800); }
:root[data-theme="dark"] .fnd-reply--staff .fnd-reply__avatar { background: var(--peeky-700); color: var(--peeky-100); }
.fnd-reply__body { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); min-width: 0; }
.fnd-reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.fnd-reply__text { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-loose); overflow-wrap: anywhere; }
.fnd-reply__file { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); }
.fnd-respond { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-sheet); }
.fnd-respond__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); }
.fnd-respond .pw-field { margin: 0; }
.fnd-thread > .pw-caption { margin: 0; }

.fnd-overlay { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; padding-block: var(--s-8); overflow-x: hidden; }
.pw-modal.fnd-modal { width: min(900px, 100%); padding: var(--s-4); gap: var(--s-3); }
.fnd-modal:focus { outline: none; }
.fnd-modal__bar { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1); }
.fnd-modal__crumb { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnd-modal .fnd { box-shadow: none; }

/* ---- Demo share: gate and public report --------------------------------- */
.share-gate__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--sev-info-text); }
.share-gate .auth__intro .pw-lead { line-height: var(--lh-loose); }
.share-head { display: grid; gap: var(--s-6); }
/* Peeky sits on the score card. Narrow: the heading stacks above his reserve. Wide: the heading fills that reserve,
   left of him, with its last line just above the card edge. --char-w matches the card's --char-base. */
.share-top { display: grid; gap: var(--s-6); --char-w: calc(96px * var(--char-scale, 1)); }
@media (min-width: 641px) {
  .share-top { gap: 0; }
  .share-top > .share-head { min-height: calc(var(--char-w) * 1.4); align-content: end; padding: 0 calc(var(--char-w) + 22px + var(--s-6)) var(--s-5) 0; }
  .share-top > .rpt-summary { margin-top: 0; }
}
.share-head__text { display: grid; gap: var(--s-2); min-width: 0; }
.share-head__text h1, .share-head__text p { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .rpt-summary { grid-template-columns: 1fr; justify-items: stretch; gap: var(--s-5); }
  .rpt-summary__score { justify-self: center; }
}
@media (max-width: 640px) {
  .rpt-lead { font-size: var(--fs-sm); }
  .rpt-stats { gap: var(--s-3) var(--s-6); }
  .rpt-cta { grid-template-columns: 1fr; }
  .rpt-cta__art { height: 110px; order: -1; }
  .rpt-card .pw-finding__body { padding: var(--s-4); }
  .rpt-card__meta { margin-left: 0; width: 100%; }
  .rpt-locked__body { padding: var(--s-4); }
  .rpt-filters { flex-direction: column; align-items: stretch; }
  .rpt-history__date { min-width: 0; }
  .fnd__title { font-size: var(--fs-lg); }
  .fnd-ev > summary { padding: var(--s-3); }
  .fnd-ev__rows { padding: 0 var(--s-3) var(--s-3); }
  .fnd-ev__dl > div { grid-template-columns: 1fr; gap: 2px; }
  .fnd-overlay { padding: var(--s-2); }
  .pw-modal.fnd-modal { padding: var(--s-2); border-radius: var(--r-xl); }
  .rpt-share__link .pw-input-group { flex-direction: column; align-items: stretch; }
}