/* ==========================================================================
   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; }
/* "Refer a friend": an outline button beside the account; on phones only its gift icon stays. */
.app-refer { flex-shrink: 0; }
/* "Feedback" sits before it, the same kind of button. */
.app-feedback { flex-shrink: 0; }
@media (max-width: 640px) {
  .app-refer, .app-feedback { width: 36px; padding: 0; }
  .app-refer__label, .app-feedback__label { display: none; }
}
/* The feedback icon: a speech bubble with a heart in it, stacked from two Phosphor glyphs. */
.pw-ico-chat-heart { display: inline-grid; place-items: center; line-height: 1; font-size: 1.2em; }
.pw-ico-chat-heart > i { grid-area: 1 / 1; }
.pw-ico-chat-heart .ph-heart { font-size: 0.4em; color: var(--brick-500); transform: translate(0.04em, -0.08em); }
.pw-sidebar .pw-ico-chat-heart { font-size: 18px; }
/* In the sidebar's wall it keeps a quiet ring, one step darker than the wall, and the heart beats now and then. */
.pw-sidebar__wall a.pw-sidebar__feedback { box-shadow: inset 0 0 0 1px var(--paper-400); }
@keyframes pw-heartbeat { 0%, 86%, 100% { transform: translate(0.04em, -0.08em) scale(1); } 90% { transform: translate(0.04em, -0.08em) scale(1.35); } 94% { transform: translate(0.04em, -0.08em) scale(1.05); } 97% { transform: translate(0.04em, -0.08em) scale(1.25); } }
.pw-sidebar__feedback .ph-heart { animation: pw-heartbeat 7s ease-in-out 2s infinite; }
@media (prefers-reduced-motion: reduce) { .pw-sidebar__feedback .ph-heart { animation: none; } }

.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); }
/* A destructive action in the page head (its form, or the button alone when it is held back) stands a step apart
   from the everyday ones. On a phone it wraps onto a line of its own instead. */
@media (min-width: 641px) { .app-head__actions > :has(> .pw-btn--danger), .app-head__actions > .pw-btn--danger { margin-left: 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); }
.field-choices .pw-check[hidden] { display: none; }   /* the data-filters-group filter hides choices; .pw-check is display:flex */
.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); }
/* The purge question on the server's own page (scans/_purge_confirm.html). The page's title already names the
   action, so the question reads as plain body text: at eight to fifteen lines a heavier weight is a wall. No
   one-word last line, and a long name breaks inside the card. */
.confirm-text { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
/* The confirm modal: the question is the heading, what the action does follows close under it. A heading that
   takes two lines splits evenly instead of leaving "Union)?" alone, and a website address in it (one long word)
   breaks inside the modal instead of pushing the buttons out of it. */
.confirm-title { margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.confirm-more { margin: calc(var(--s-2) * -1) 0 0; line-height: var(--lh-loose); text-wrap: pretty; overflow-wrap: anywhere; }
.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-back { justify-self: start; margin: 0 0 calc(-1 * var(--s-2)) -14px; }
.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; }
/* Portrait viewports stack too: a phone in desktop mode is ~980px wide but twice as tall,
   which would leave the art a tall, thin column. Stacked, Peeky and the caption sit in flow,
   so a long caption wraps onto more lines and the stage grows instead of covering the art. */
@media (max-width: 900px), (max-aspect-ratio: 4 / 5) {
  .auth { grid-template-columns: 1fr; align-content: start; gap: var(--s-8); padding-top: var(--s-8); }
  .auth__form { max-width: 520px; }
  .auth__art { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-6) var(--s-6); }
  .pw-stage > img.auth__figure { position: relative; inset: auto; margin: 0; height: clamp(150px, 47vw, 250px); width: auto; max-width: 100%; }
  .auth__caption { position: static; max-width: 34ch; }
}
@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 { border-radius: var(--r-2xl); padding: var(--s-6) var(--s-4) var(--s-5); gap: var(--s-3); }
  .auth__caption { font-size: 1.15rem; }
}

/* ---- A character perched behind a card --------------------------------
   The figure stands behind the card that follows it, and the card's top edge
   hides the lowest --char-bury of it (a bust's rounded cut, a desk, a bench).
   On the wrapper set --char-base (desktop width), --char-aspect (height / width
   of the trimmed image) and --char-bury; --char-scale shrinks it on phones. */
.char-perch { position: relative; --char-w: calc(var(--char-base, 120px) * var(--char-scale, 1)); padding-top: calc(var(--char-w) * var(--char-aspect, 1) * (1 - var(--char-bury, 0.2))); }
.char-perch__fig { position: absolute; top: 0; right: var(--char-inset, 36px); width: var(--char-w); height: auto; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.16)); animation: char-rise var(--t-story) var(--ease-peek) 160ms both; }
.char-perch--left .char-perch__fig { right: auto; left: var(--char-inset, 36px); }
.char-perch > .pw-card { min-width: 0; }
@keyframes char-rise { from { opacity: 0; transform: translateY(28%); } to { opacity: 1; transform: none; } }

/* ---- 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-logo--sm { width: 32px; height: 32px; border-radius: var(--r-sm); }
.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); }

/* ---- Members: the plan's places and the invite form with its role guide ------------------------------------ */
.seats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-5); }
.seats__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.seats__seat { width: 14px; height: 14px; border-radius: var(--r-round); box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--bg-recessed); }
.seats__seat--member { background: var(--mint-400); box-shadow: inset 0 0 0 1.5px var(--mint-700); }
.seats__seat--invitation { background: var(--bg-sheet); box-shadow: none; border: 1.5px dashed var(--mint-600); }
.seats__text { margin: 0; flex: 1 1 280px; font-size: var(--fs-sm); color: var(--text-2); }
.seats__text b { color: var(--text); font-weight: 600; }
:root[data-theme="dark"] .seats__seat--member { background: var(--mint-500); box-shadow: inset 0 0 0 1.5px var(--mint-300); }
:root[data-theme="dark"] .seats__seat--invitation { border-color: var(--mint-400); }

.invite { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px); grid-template-areas: "email guide" "role guide" "actions guide"; align-items: start; gap: var(--s-4) var(--s-8); }
.invite__email { grid-area: email; }
.invite__role { grid-area: role; }
.invite__guide { grid-area: guide; }
.invite__actions { grid-area: actions; }
.role-guide { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: var(--s-4); padding-top: var(--s-2); }
.role-guide[hidden] { display: none; }
.role-guide__art { justify-self: center; max-width: 100%; height: auto; animation: role-hop 360ms steps(3, end); transform-origin: 50% 100%; }
.role-guide__text { padding-top: var(--s-3); }
.role-guide__name { margin: 0 0 var(--s-1); font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 600; font-size: var(--fs-lg); }
.role-guide__text p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-2); }
@keyframes role-hop {
  0% { transform: translateY(14px) rotate(-4deg) scale(0.94); opacity: 0; }
  55% { transform: translateY(-6px) rotate(2deg) scale(1.02); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .role-guide__art { animation: none; } }
@media (max-width: 900px) {
  .invite { grid-template-columns: minmax(0, 1fr); grid-template-areas: "email" "role" "guide" "actions"; }
  .invite__email, .invite__role, .invite__guide { max-width: 560px; }
}
@media (max-width: 420px) {
  .role-guide { grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-3); }
}
.co-leave { margin: 0; }
.co-staff { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.co-staff form { margin: 0; }
.co-staff__table td { vertical-align: middle; }
.co-staff__table td b { display: block; }
.co-staff__table td p { margin: 2px 0 0; color: var(--text-2); max-width: 64ch; }
.co-staff__table td p.co-staff__why { display: flex; align-items: baseline; gap: 6px; color: var(--warning); }
:root[data-theme="dark"] .co-staff__table td p.co-staff__why { color: var(--sev-high-text); }
.co-staff__run { width: 1%; }
.co-staff__run .pw-btn { width: 180px; justify-content: center; }
@media (max-width: 640px) {
  .co-staff__table thead { display: none; }
  .co-staff__table, .co-staff__table tbody, .co-staff__table tr, .co-staff__table td { display: block; width: 100%; }
  .co-staff__table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
  .co-staff__table tbody tr:last-child { border-bottom: 0; }
  .co-staff__table td { padding: 0; border: 0; }
  .co-staff__table .co-staff__run { padding-top: var(--s-3); }
  .co-staff__run .pw-btn { width: 100%; }
  .co-staff__table tbody tr:hover td { background: none; }
}
.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; }
/* An enabled row: rows__icon--on and a tone, on a filled or bold glyph, put the icon in its colour on a soft disc.
   The disc is a 200 tint on paper (a 100 tint is as light as the card and all but vanishes) and the sev tint on
   slate. Grey stays the default, and rows__icon--warn alone only recolours. On the company page the blue (--brand)
   is kept for the accreditation section and the green (--good) for billing. The icon is hidden from assistive tech,
   so say the state in the row's text or in an .sr-only word after the icon. */
.rows__icon--on { display: grid; place-items: center; flex: none; height: 36px; border-radius: 50%; background: var(--rows-disc); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent); }
.rows__icon--brand { --rows-disc: var(--peeky-200); color: var(--peeky-700); }
.rows__icon--good { --rows-disc: var(--mint-200); color: var(--mint-700); }
.rows__icon--warn { color: var(--warning); }
:root[data-theme="dark"] .rows__icon--brand { --rows-disc: var(--sev-info-bg); color: var(--peeky-300); }
:root[data-theme="dark"] .rows__icon--good { --rows-disc: var(--sev-pass-bg); color: var(--mint-400); }
:root[data-theme="dark"] .rows__icon--warn { color: var(--brass-400); }
/* A row that ends in a written-out link and its copy button (rows__item--link, rows__role--link): the link wraps
   inside the slot and the button keeps its size. The slot's left padding is the icon column, so a slot that drops
   to its own line starts under the row's text (on one line it only takes spare room from the text); on a phone it
   starts at the left edge, where the address has the full width. The link sets its own hover colour on slate,
   where the a:hover blue of peekwell.css is too dim to read. */
.rows__item--link .rows__who { flex-grow: 999; }
.rows__role--link { flex: 1 1 auto; flex-wrap: nowrap; gap: var(--s-1); min-width: 0; padding-left: calc(36px + var(--s-4)); }
.rows__link { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
:root[data-theme="dark"] .rows__link:hover { color: var(--peeky-200); }
/* Icon-only copy button: app.js sets is-copied for a moment, and the check takes the copy icon's place on the
   same green tint as an enabled icon. It is drawn at 36px and takes a tap 4px beyond that on every side (44px);
   on slate it sets its own hover tint, where the ghost button's ink tint does not show. */
.rows__copy { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; min-height: 36px; margin-right: -8px; border-radius: var(--r-sm); }
.rows__copy::after { content: ""; position: absolute; inset: calc(-4px - 1.5px); }   /* 4px past the button's 1.5px border */
:root[data-theme="dark"] .rows__copy { --btn-hover: var(--line); }
.rows__copy .ph-copy, .rows__copy .ph-check { grid-area: 1 / 1; font-size: 18px; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-soft); }
.rows__copy .ph-check { color: var(--mint-700); opacity: 0; transform: scale(0.6); }
.rows__copy.is-copied { --btn-bg: var(--mint-200); --btn-hover: var(--mint-200); }
.rows__copy.is-copied .ph-copy { opacity: 0; transform: scale(0.6); }
.rows__copy.is-copied .ph-check { opacity: 1; transform: none; }
:root[data-theme="dark"] .rows__copy .ph-check { color: var(--mint-400); }
:root[data-theme="dark"] .rows__copy.is-copied { --btn-bg: var(--sev-pass-bg); --btn-hover: var(--sev-pass-bg); }
@media (prefers-reduced-motion: reduce) { .rows__copy .ph-copy, .rows__copy .ph-check { transition: none; } }

@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%; }
  .rows__role--link { padding-left: 0; }
}

/* ---- Info tip: an (i) button whose box opens on hover or focus ---------------------------------
   The box hangs under its host (.pw-tip-host, usually the row), right-aligned, so it has the row's
   width to work with on a phone instead of whatever is left beside the button. It may hold links:
   the bridge above it keeps the pointer inside the tip on the way down. */
.pw-tip-host { position: relative; }
.pw-tip { display: inline-flex; }
.pw-tip__btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px -2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-3); font-size: 18px; cursor: help; transition: background 120ms ease, color 120ms ease; }
.pw-tip__btn:hover, .pw-tip:focus-within .pw-tip__btn { background: var(--bg-recessed); color: var(--text); }
.pw-tip__btn:focus-visible { border-radius: 50%; }
.pw-tip__box { position: absolute; z-index: var(--z-tooltip); top: calc(100% - 6px); right: 0; width: max-content; max-width: min(340px, 100%); padding: 12px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5; text-align: left; font-weight: 400; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 240ms; transition-delay: 100ms, 100ms, 240ms; }
.pw-tip__box::before { content: ""; position: absolute; right: 0; bottom: 100%; width: 72px; height: 30px; }
.pw-tip__box a { color: var(--brass-300); font-weight: 600; text-underline-offset: 2px; }
.pw-tip__more { display: block; margin-top: var(--s-2); }
:root[data-theme="dark"] .pw-tip__box { background: var(--paper-0); color: var(--ink-800); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-3); }
:root[data-theme="dark"] .pw-tip__box a { color: var(--text-link); }
.pw-tip:hover .pw-tip__box, .pw-tip:focus-within .pw-tip__box { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .pw-tip__box { transition: none; transform: none; } }

/* ---- 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); }
/* Options and a code's summary priced for a quantity other than the one picked wait hidden (request-scan.js). */
.bill-options[hidden], .bill-promo__summary[hidden] { display: none; }
.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); }
/* A list price struck through next to the price a code gives. */
.bill-was { margin-right: 2px; color: var(--text-3); font-weight: 400; text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  /* On phones the struck price sits above the new one, leaving the option's name and note their width. */
  .bill-option__amount:has(.bill-was) { display: grid; justify-items: end; }
  .bill-option__amount .bill-was { margin-right: 0; font-size: var(--fs-xs); }
}
/* "Have a code?": a compact field with Apply on the same row (also on phones), the error under both, then what the
   code does. The summary is the visible label; the field's own label stays for screen readers. */
.bill-promo > summary { display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; list-style: none; cursor: pointer; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; transition: color var(--t-fast); }
.bill-promo > summary::-webkit-details-marker { display: none; }
.bill-promo > summary:hover, .bill-promo[open] > summary { color: var(--text); }
.bill-promo > summary:focus-visible { outline: none; box-shadow: var(--lens); }
.bill-promo > summary .ph { font-size: 18px; }
.bill-promo__caret { transition: transform var(--t-fast); }
.bill-promo[open] .bill-promo__caret { transform: rotate(180deg); }
.bill-promo__body { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.bill-promo__group { grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: var(--s-2); }
.bill-promo__group > .pw-field { display: contents; }
.bill-promo__group .pw-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bill-promo__group .pw-input { grid-row: 1; grid-column: 1; min-width: 0; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.bill-promo__group .pw-input::placeholder { font-family: var(--font-ui); letter-spacing: 0; text-transform: none; }
.bill-promo__group > .pw-btn { grid-row: 1; grid-column: 2; min-height: 46px; padding: 0 var(--s-5); border-radius: var(--r-md); }
.bill-promo__group .pw-error, .bill-promo__group .pw-hint { grid-column: 1 / -1; }
.bill-promo__summary { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-base); }
.bill-promo__summary .ph { flex-shrink: 0; margin-top: 2px; color: var(--sev-pass-text); font-size: 18px; }
/* What tokens buy, the count in ink. The buy-tokens form shows the total of the pack picked and what one token
   comes to in it; the other packs' totals wait hidden (token-packs.js). */
.bill-costs b { color: var(--text); font-weight: 600; white-space: nowrap; }
.bill-total { display: grid; gap: var(--s-1); }
.bill-total[hidden] { display: none; }
.bill-total .pw-stat__value { font-size: var(--fs-2xl); }
.bill-total .bill-was { font-family: var(--font-ui); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bill-total__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.bill-buy { display: grid; justify-items: start; gap: var(--s-2); margin-top: var(--s-2); }
.bill-buy p { margin: 0; }
/* "Apply" comes back to the wallet (#wallet-h): leave its card's edge and the phone's top bar above the title. */
#wallet-h { scroll-margin-top: 88px; }

/* ---- 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--note { background: var(--sev-medium-bg); color: var(--sev-medium-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-signin { display: grid; gap: var(--s-4); }
.scan-signin[hidden] { display: none; }
.scan-signin--row { flex-basis: 100%; margin-top: var(--s-2); padding-bottom: var(--s-2); }
.scan-signin__clear { margin: calc(-1 * var(--s-2)) 0 0; }
.scan-signin__note { max-width: 72ch; }
.rows__who .scan-tag--brand { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.rows__item--site .rows__who { flex-basis: 320px; }
.rpt-members { background: var(--sev-info-bg); color: var(--sev-info-text); }
.rpt-members .ph { font-size: 14px; vertical-align: -2px; }
.scan-sub { margin: var(--s-6) 0 var(--s-2); }
.scan-sites__end { gap: var(--s-2); flex-wrap: nowrap; }
.scan-add-toggle { border-radius: 50%; }
.scan-add-toggle .ph { transition: transform var(--t-base) var(--ease-soft); }
.scan-add-toggle[aria-expanded="true"] .ph { transform: rotate(45deg); }
.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); }
/* Email notifications: the context page's card, the request page's per scan, and the staff list in each. */
.scan-emails form { margin: 0; }
.scan-emails__scan + .scan-emails__scan { border-top: 1px solid var(--line-soft); padding-top: var(--s-2); }
.scan-emails__people { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); }
.scan-emails__scan .scan-emails__people { margin-bottom: var(--s-4); }
.scan-emails__head { display: flex; align-items: center; gap: var(--s-2); }
.scan-emails__title { margin: 0 auto 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.scan-emails__people .rows__item { flex-wrap: nowrap; gap: var(--s-3); padding-block: var(--s-2); }
.scan-emails__people .rows__who { flex: 1 1 auto; }
.scan-emails__people .rows__role { flex: none; width: auto; margin-left: auto; }
.scan-emails__people .rows__icon { width: 20px; font-size: 18px; flex: none; }
.scan-emails__add { display: grid; gap: var(--s-2); }
.scan-emails__add .pw-input-group .pw-btn { min-height: 48px; }
.scan-emails__add .pw-input { min-height: 48px; }
.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-priority:has(#id_waive_fee:checked) .scan-pay { display: none; }
.scan-request .bill-options + .pw-field { margin-top: var(--s-2); }
.scan-request .bill-option > .pw-tag { flex: none; white-space: nowrap; }
/* A context's text and its tag share one slot (scan-pick): side by side while the text has 11rem, and on a
   narrower card the tag drops under the text, so the jurisdiction's name keeps to one line on a phone. */
.scan-pick { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.scan-pick > .bill-option__body { flex: 1 1 11rem; }
.scan-pick > .pw-tag { flex: none; white-space: nowrap; }
.scan-request a.pw-tag { text-decoration: none; }
.scan-request a.pw-tag:hover { filter: brightness(0.96); }
.pw-tag .scan-tag__go { margin: 0 0 0 4px; font-size: 12px; }
/* A context with a scan open is dimmed, but its tag is the link to that request and keeps its full strength. */
.scan-request .bill-option.is-disabled:has(a.pw-tag) { opacity: 1; }
.scan-request .bill-option.is-disabled:has(a.pw-tag) > .pw-check,
.scan-request .bill-option.is-disabled:has(a.pw-tag) .bill-option__body { opacity: 0.6; }
/* An error that runs over several lines keeps its icon on the first one. */
.scan-request .bill-options > .pw-error, .scan-request .scan-rescan-hint { align-items: flex-start; }
.scan-request .bill-options > .pw-error > .ph, .scan-request .scan-rescan-hint > .ph { flex: none; margin-top: 3px; }
/* A context that has had its scan request takes another only as a priority. Its note shows while it is picked
   (the server renders that state and scans/js/request-scan.js keeps it, holding the Priority option on); the hint
   is what is left without the script. */
.scan-rescan-note { display: none; justify-items: start; gap: var(--s-3); max-width: none; margin: 0; }
.scan-rescan-note:has(p:not([hidden])) { display: grid; }
.scan-rescan-note p { margin: 0; }
.scan-rescan-note p[hidden] { display: none; }
.scan-rescan-hint { display: none; margin: 0; }
.scan-request:has([data-rescan]:checked):not(:has(#id_is_priority:checked)) .scan-rescan-hint { display: flex; }
.bill-option.is-held { cursor: default; }
/* A click on the held option changes nothing, so the note that says why lifts for a moment (request-scan.js). */
@keyframes scan-nod { 35% { transform: translateY(-3px); } 70% { transform: translateY(1px); } }
.scan-rescan-note.is-nodding { animation: scan-nod var(--t-slow) var(--ease-settle); }
@media (prefers-reduced-motion: reduce) { .scan-rescan-note.is-nodding { animation: none; } }
/* Trial: the Priority option as a locked row, not a control. Its text and the upgrade button share a scan-pick
   slot, so the button drops under the text on a narrow card. The dashed edge is the stronger line, as on a locked
   finding, and the lock takes a tick box's width so the text starts where an option's text does. */
.scan-priority-lock { cursor: default; border-style: dashed; border-color: var(--line-strong); }
.scan-priority-lock:hover { border-color: var(--line-strong); }
.scan-priority-lock > .ph { flex: none; width: 22px; text-align: center; font-size: 20px; color: var(--text-3); }
.scan-priority-lock .scan-pick { row-gap: var(--s-3); }
.scan-pick > .pw-btn { flex: none; }

.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; }
.scan-table td form { margin: 0; }
.scan-table .pw-tag { white-space: nowrap; }
.scan-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.scan-tags .pw-tag { gap: 4px; }
/* "Will retry after 22 Oct 04:00" outgrows a narrow Status column: it takes a second line, breaking only before the
   moment (the words between are joined by no-break spaces). */
.scan-table .pw-tag.scan-retry { height: auto; min-height: 24px; padding-block: 4px; line-height: 1.3; white-space: normal; }
/* A row's View button and its menu share one line, in the staff table too. */
.scan-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
/* Under the company's scan table: the pages of the full list, and the way in and out of it. */
.scan-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.scan-more__pages { display: flex; align-items: center; gap: var(--s-2); }
.scan-more > .pw-btn:last-child { margin-left: auto; }

@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 .pw-when { display: inline-flex; align-items: baseline; gap: var(--s-2); vertical-align: baseline; }
  .scan-table td[data-label="Score"] { display: flex; align-items: center; }
  .scan-table td[data-label="Score"]::before { white-space: pre; }
  .scan-table .scan-tags { display: inline-flex; vertical-align: middle; }
  .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-how { font-size: var(--fs-xs); }
.rpt-held { margin: 0; display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-2); max-width: 62ch; }
.rpt-held b { color: var(--text); font-weight: 600; }
.rpt-held i { color: var(--sev-critical); flex: none; transform: translateY(1px); }
.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; }

/* Staff-only run details: dashed like the share panel, numbers in mono, tables scroll on a phone. */
.rpt-run { border-style: dashed; }
.rpt-run__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3) var(--s-4); margin: 0; }
.rpt-run__facts > div { display: grid; gap: 2px; min-width: 0; }
.rpt-run__facts dt { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.rpt-run__facts dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rpt-run__scroll { overflow-x: auto; }
.rpt-run__table { font-size: var(--fs-sm); white-space: nowrap; }
.rpt-run__table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.rpt-run__table td:not(.num) { white-space: normal; }
.rpt-run__table td:first-child { white-space: nowrap; }
.rpt-run__table .pw-code { overflow-wrap: normal; }
.rpt-run__outcome { min-width: 22ch; }
.rpt-run__table tfoot { font-weight: 600; }
.rpt-run__muted { color: var(--text-2); }
.rpt-run__error { display: block; color: var(--sev-high-text); font-size: var(--fs-xs); max-width: 36ch; white-space: normal; }

.rpt-share { border-style: dashed; }
.rpt-share__summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art title meta" "art sub meta"; gap: 2px var(--s-3); align-items: center; }
.rpt-share__art { grid-area: art; width: auto; height: 44px; filter: drop-shadow(0 3px 5px rgba(31, 36, 48, 0.14)); }
.rpt-share__summary > .pw-card__title { grid-area: title; align-self: end; }
.rpt-share__summary > .rpt-fold__meta { grid-area: meta; }
.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__add .pw-textarea { width: 100%; }
.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; }
.rpt-share__sub { grid-area: sub; align-self: start; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }

/* "Find people with AI": the run button, its progress, and the suggested people. */
.rpt-share__create .pw-row { flex-wrap: wrap; }
/* The two create fields sit at the top of their row, so the one without a hint keeps its own height. */
.rpt-share__create .co-form__pair { align-items: start; }
.rpt-share__finding { display: grid; gap: var(--s-2); margin: 0; }
.rpt-share__finding-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; }
.rpt-share__finding-pick .pw-field { min-width: 0; }
.rpt-share__finding-pick .pw-select { width: 100%; text-overflow: ellipsis; }
.rpt-share__finding .pw-caption { margin: 0; }
.rpt-share__why { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--mint-100) 45%, var(--bg-card)); border: 1px solid var(--mint-300); font-size: var(--fs-sm); line-height: 1.45; }
.rpt-share__why .pw-tag { gap: 4px; white-space: nowrap; }
:root[data-theme="dark"] .rpt-share__why { background: color-mix(in srgb, var(--mint-500) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--mint-500) 45%, transparent); }
.rpt-people { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--mint-300); border-radius: var(--r-xl); background: color-mix(in srgb, var(--mint-100) 45%, var(--bg-card)); }
.rpt-people__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rpt-people__title { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.rpt-people__title .ph { color: var(--mint-700); }
.rpt-people__rerun { margin: 0; }
.rpt-people__run { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-people__run[aria-busy="true"] { opacity: 1; cursor: progress; }
.rpt-people__run[aria-busy="true"] .ph { animation: prospect-spark 1.4s ease-in-out infinite; }
.rpt-people__status { display: grid; gap: var(--s-2); }
.rpt-people__status[hidden] { display: none; }
.rpt-people__bar { height: 6px; }
.rpt-people__status.is-busy .rpt-people__bar > span { width: 34%; animation: prospect-sweep 1.8s var(--ease-soft) infinite; }
.rpt-people__status:not(.is-busy) .rpt-people__bar { display: none; }
.rpt-people__msg { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.rpt-people__status.is-error .rpt-people__msg { color: var(--sev-critical-text); }
.rpt-people__form { display: grid; gap: var(--s-3); margin: 0; }
.rpt-people__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rpt-person { display: grid; grid-template-columns: 30px minmax(0, 1fr); 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); }
.rpt-person.is-invited { opacity: 0.7; }
.rpt-person__rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--mint-100); color: var(--mint-700); font: 600 var(--fs-sm)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.rpt-person__body { display: grid; gap: 4px; min-width: 0; }
.rpt-person__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.rpt-person__name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.rpt-person__remove { margin-left: auto; }
.rpt-person__role { font-size: var(--fs-sm); color: var(--text-2); }
.rpt-person__why { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text); max-width: 72ch; }
.rpt-person__picks { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.rpt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); min-width: 0; }
.rpt-pick .pw-check { gap: 8px; min-width: 0; }
.rpt-pick .pw-check .ph { color: var(--text-3); font-size: 18px; }
.rpt-pick .pw-check:has(input:disabled) { cursor: default; opacity: 0.6; }
.rpt-pick__value { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rpt-pick__meta { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); }
.rpt-pick__meta .ph { vertical-align: -2px; }
.rpt-pick__meta.is-found { color: var(--sev-pass-text); }
.rpt-pick__meta.is-guess { color: var(--sev-high-text); }
.rpt-pick__meta a { color: inherit; }
.rpt-pick__url { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.rpt-people__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.rpt-people__actions .pw-caption { margin: 0; flex: 1 1 260px; }
.rpt-people__more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.rpt-people__notes { margin: var(--s-2) 0 0; font-size: var(--fs-sm); line-height: var(--lh-base); white-space: pre-line; max-width: 72ch; }
.rpt-people__more ul { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: var(--fs-xs); overflow-wrap: anywhere; }
:root[data-theme="dark"] .rpt-people { background: color-mix(in srgb, var(--mint-500) 8%, var(--bg-card)); border-color: color-mix(in srgb, var(--mint-500) 45%, transparent); }
:root[data-theme="dark"] .rpt-people__run { --btn-fg: var(--text-inverse); }
:root[data-theme="dark"] .rpt-people__title .ph, :root[data-theme="dark"] .rpt-person__rank { color: var(--mint-400); }
:root[data-theme="dark"] .rpt-person__rank { background: color-mix(in srgb, var(--mint-500) 22%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .rpt-people__status.is-busy .rpt-people__bar > span, .rpt-people__run[aria-busy="true"] .ph { animation: none; }
}

/* ---- 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-respond__ruling:not([hidden]) { display: contents; }
.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; }
  .rpt-share__summary { grid-template-areas: "art title meta" "sub sub sub"; row-gap: var(--s-2); }
  .rpt-share__art { height: 36px; }
  .rpt-people { padding: var(--s-3); }
  .rpt-share__finding-pick { grid-template-columns: 1fr; align-items: stretch; }
  .rpt-share__finding-pick .pw-btn { justify-content: center; }
  .rpt-person { position: relative; grid-template-columns: minmax(0, 1fr); padding: var(--s-3); }
  .rpt-person__head { padding-right: 38px; }
  .rpt-person__remove { position: absolute; top: var(--s-2); right: var(--s-2); width: 36px; padding: 0; justify-content: center; }
  .rpt-person__remove-label { display: none; }
  .rpt-person__rank { display: none; }
  .rpt-people__run { width: 100%; justify-content: center; }
  .rpt-people__rerun { width: 100%; }
}