/* ==========================================================================
   PEEKWELL PORTAL · DASHBOARD, ACCOUNT AND STAFF PAGES
   Tokens and design-system components only. The onboarding story has its own file.
   ========================================================================== */

/* ---- Sidebar: buttons that sit with the links ---------------------------- */
.pw-sidebar__btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: 500 var(--fs-sm)/1.2 var(--font-ui); text-align: left; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.pw-sidebar__btn .ph, .pw-sidebar__btn .ph-fill { font-size: 18px; color: var(--text-3); }
.pw-sidebar__btn:hover { color: var(--text); background: var(--line-soft); }
.pw-sidebar__btn .theme-toggle__on { display: none; color: var(--brass-400); }
:root[data-theme="dark"] .pw-sidebar__btn .theme-toggle__on { display: inline-block; }
:root[data-theme="dark"] .pw-sidebar__btn .theme-toggle__off { display: none; }

/* ---- Impersonation banner on public-layout pages ------------------------ */
.public-impersonation { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: var(--s-4) auto 0; padding: 0 var(--gutter); }

/* ---- Dashboard ------------------------------------------------------------ */
.dash-section { display: grid; gap: var(--s-4); }
.dash-section__head { display: flex; align-items: center; gap: var(--s-3); }
.dash-section__head h2 { margin: 0; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }
.dash-co { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.dash-co__head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dash-co__name { display: grid; gap: 2px; min-width: 0; }
.dash-co__name h3 { margin: 0; overflow-wrap: anywhere; }
.dash-co__name a { color: inherit; text-decoration: none; }
.dash-co__name a:hover { text-decoration: underline; }
.dash-co__name .pw-small { overflow-wrap: anywhere; }
.dash-co__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dash-co__empty { margin: 0; color: var(--text-2); }
.dash-co__open { justify-self: start; }
.dash-ctx { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.dash-ctx__item { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-recessed); min-width: 0; }
.dash-ctx__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.dash-invites .rows__who .pw-small { color: var(--text-2); }
.dash-invites__hint { max-width: 42ch; }

/* ---- Account -------------------------------------------------------------- */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.acct-side { display: grid; gap: var(--s-6); min-width: 0; }
.acct-card { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.acct-card > .pw-card__header { margin-bottom: 0; }
.acct-card p { margin: 0; }
.acct-who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.acct-who__avatar { width: 64px; height: 64px; font-size: var(--fs-lg); flex-shrink: 0; }
.acct-who__avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-who__text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.acct-who__text b, .acct-who__text .pw-small { overflow-wrap: anywhere; }
.acct-facts { margin: 0; display: grid; gap: var(--s-3); }
.acct-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.acct-facts dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.acct-facts dd { margin: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.acct-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acct-verify { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-4); border-radius: var(--r-lg); background: var(--brass-100); }
.acct-verify p { margin: 0; color: var(--brass-700); }
:root[data-theme="dark"] .acct-verify { background: var(--sev-high-bg); }
:root[data-theme="dark"] .acct-verify p { color: var(--sev-high-text); }
.acct-story { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.acct-story > div { display: grid; gap: var(--s-2); justify-items: start; }
.acct-story__art { width: 72px; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.16)); }
.acct-danger { border-color: var(--brick-200); }
:root[data-theme="dark"] .acct-danger { border-color: color-mix(in srgb, var(--brick-500) 55%, transparent); }
.acct-danger form { margin: 0; }
.acct-blockers, .acct-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); }
.acct-confirm { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-6); align-items: start; max-width: 760px; }
.acct-confirm__art { width: 120px; filter: drop-shadow(0 6px 10px rgba(31, 36, 48, 0.16)); }
.acct-confirm p { margin: 0; }
.acct-manage { max-width: 640px; display: grid; gap: var(--s-4); }
.acct-manage h1, .acct-manage h2, .acct-manage p { margin: 0; }
.acct-manage .pw-tag { margin-left: var(--s-1); white-space: nowrap; }

/* ---- Staff ---------------------------------------------------------------- */
.staff-tabs { overflow-x: auto; scrollbar-width: none; }
.staff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.staff-stat { display: grid; gap: var(--s-3); align-content: space-between; color: inherit; text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast); }
a.staff-stat:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.staff-stat .pw-stat__value { font-size: var(--fs-2xl); }
.staff-stat__trend { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); display: grid; justify-items: start; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.staff-counts { margin: 0; display: grid; gap: var(--s-2); align-content: start; }
.staff-counts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.staff-counts > div:last-child { border-bottom: 0; }
.staff-counts dt { font-size: var(--fs-sm); color: var(--text-2); }
.staff-counts dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.staff-counts a { color: var(--text); }
.staff-revenue dd { display: flex; align-items: center; gap: var(--s-3); }
.staff-revenue__note { margin: var(--s-3) 0 0; }
.staff-audit .pw-mono { font-size: var(--fs-xs); }
.staff-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.staff-search .pw-field { margin: 0; }
.staff-search__q { flex: 1 1 260px; }
.staff-chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }

/* ---- Staff stats ---------------------------------------------------------- */
/* Series colours, checked for colour-blind separation and 3:1 on the card in each theme: the period in blue, a
   second measure in brass, the earlier period in muted ink. */
.stats-filters { display: grid; gap: var(--s-4); justify-items: start; }
/* A pill group keeps to one line and scrolls sideways on a phone rather than wrapping inside its tray. */
.stats-filters .pw-tabs--pills { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.stats-filters .pw-tabs--pills a { flex: none; white-space: nowrap; }
.stats-filter { display: grid; gap: var(--s-2); }
.stats-filter .pw-label { margin: 0; }
.stats-filter-row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.stats-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.stats-chips .pw-chip { text-decoration: none; }
.stats-caption { margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; --stats-current: #3B6FA8; --stats-second: #A07828; --stats-compared: var(--ink-400); }
:root[data-theme="dark"] .stats-grid { --stats-current: #5F8FCB; --stats-second: #B8862A; }
.stats-card { display: grid; gap: var(--s-3); min-width: 0; }
.stats-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.stats-card__head .pw-card__title { margin: 0; }
.stats-card__figures { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.stats-card__value { font: 600 var(--fs-xl)/1 var(--font-ui); color: var(--text); }
.stats-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--fs-xs); color: var(--text-2); }
.stats-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.stats-legend b { color: var(--text); font-weight: 600; }
.stats-key { flex: none; display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--stats-current); }
.stats-key--compared { background: var(--stats-compared); }
.stats-key--second { background: var(--stats-second); }
.stats-plot { position: relative; border-radius: var(--r-sm); outline: none; touch-action: pan-y; }
.stats-plot:focus-visible { box-shadow: var(--lens); }
.stats-svg { display: block; overflow: visible; }
.stats-grid-lines line { stroke: var(--graph-divider); stroke-width: 1; }
.stats-axis text { fill: var(--graph-axis-text); font: 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.stats-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stats-line--current { stroke: var(--stats-current); }
.stats-line--compared { stroke: var(--stats-compared); stroke-width: 1.5; }
.stats-line--second { stroke: var(--stats-second); }
.stats-fade stop { stop-color: var(--stats-current); }
.stats-dot--current { fill: var(--stats-current); }
.stats-dot--compared { fill: var(--stats-compared); }
.stats-dot--second { fill: var(--stats-second); }
.stats-end, .stats-cross circle { stroke: var(--graph-surface); stroke-width: 2; }
.stats-cross line { stroke: var(--line-strong); stroke-width: 1; }
.stats-tip { position: absolute; top: 4px; z-index: 2; display: grid; gap: 4px; min-width: 140px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-sheet); box-shadow: var(--shadow-2); font-size: var(--fs-xs); color: var(--text-2); pointer-events: none; }
.stats-tip[hidden] { display: none; }
.stats-tip__row { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.stats-tip__row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats-table summary { width: fit-content; cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); }
.stats-table__scroll { max-height: 280px; margin-top: var(--s-2); overflow: auto; }
.stats-table .pw-table { font-size: var(--fs-xs); }
.staff-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }
.staff-actions form { margin: 0; }
.staff-needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
/* Deleting sits apart from the everyday actions, so it is never one slip away from "View as". */
.staff-actions .staff-actions__danger { margin-left: var(--s-4); }
.staff-pages { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.staff-row--overdue > td:first-child { box-shadow: inset 3px 0 0 var(--sev-critical); }
.staff-table .pw-tag, .staff-nowrap { white-space: nowrap; }
.staff-table td[colspan] { text-align: left; }   /* the "nothing matches" row is its row's last cell, which .scan-table sets right */
.staff-co { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.staff-co__text { min-width: 0; }
@media (max-width: 640px) {
  /* the logo and name lead the stacked row, so the "Company ·" label is dropped */
  .scan-table td:has(> .staff-co) { padding-bottom: var(--s-2); }
  .scan-table td:has(> .staff-co)::before { content: none; }
  .scan-table .staff-co small { display: block; margin-left: 0; overflow-wrap: anywhere; }
}
.staff-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.staff-links .ph { color: var(--text-3); }
.staff-flag { display: flex; gap: var(--s-1); align-items: baseline; margin: var(--s-1) 0 0; font-size: var(--fs-xs); line-height: 1.45; }
.staff-flag--bad { color: var(--sev-critical-text); }
.staff-flag--warn { color: var(--sev-high-text); }
/* Staff dashboard: the note of a full-width card (Payments to refund, Purged scans) keeps a readable line instead
   of running the card's whole width (130 characters). Keyed on the cards' headings: they have no class of their own. */
[aria-labelledby="orphan-h"] > .pw-small, [aria-labelledby="purged-h"] > .pw-small { max-width: 76ch; text-wrap: pretty; }

/* ---- Account · Claude card ------------------------------------------------ */
/* Scan emails: the contexts the person gets them for, and the latest sent, folded. */
.acct-emails form { margin: 0; }
.acct-emails__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.acct-emails__sent[open] > .acct-emails__summary { margin-bottom: var(--s-2); }
.acct-emails__sent .rows__who .pw-small { color: var(--text-2); }
.acct-emails .rows__item { flex-wrap: nowrap; gap: var(--s-3); }
.acct-emails .rows__who { flex: 1 1 auto; }
/* The phone layout puts a row's actions on a line of their own (.rows__role); these rows keep one small button inline. */
.acct-emails .rows__role { flex: none; width: auto; margin-left: auto; }
.acct-emails__mark { flex: none; width: 44px; display: grid; place-items: center; font-size: 26px; color: var(--warning); }

/* The Claude tile is a design-system part (.pw-ico-claude); the card around it is the account page's. */
.acct-eyebrow { margin: 0; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.acct-claude__head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.acct-claude__text { display: grid; gap: 2px; min-width: 0; }
.acct-claude__apps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.acct-claude__apps li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--bg-recessed); }
.acct-claude__apps form { margin: 0; }
.acct-claude__app { display: grid; gap: 2px; min-width: 0; }
.acct-claude__app b { font-weight: 600; }
.acct-claude__app .pw-small { overflow-wrap: anywhere; }

/* ---- Connect Claude ------------------------------------------------------- */
/* The install page: the steps in the wide column, the checklists beside them, the account page's proportions. */
.connect-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.connect-main, .connect-side { display: grid; gap: var(--s-6); min-width: 0; }
.connect-card { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.connect-card > .pw-card__header { margin-bottom: 0; }
.connect-card p, .connect-card .pw-h4 { margin: 0; }
.connect-card .pw-lead { font-size: var(--fs-md); max-width: none; }
.connect-head { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.connect-head > div { display: grid; gap: 2px; min-width: 0; }
/* A block to copy: the label on the line above, the button at the top right, the text free to scroll sideways. */
.connect-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: center; }
.connect-copy__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.connect-copy__label, .connect-copy__btn { grid-row: 1; }
.connect-copy__btn { justify-self: end; }
.connect-copy .pw-evidence { grid-row: 2; grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.connect-copy .pw-evidence:focus-visible { outline: none; box-shadow: var(--lens-glow); }
.connect-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: connect-step; }
.connect-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s-3); row-gap: 2px; counter-increment: connect-step; }
.connect-steps li::before { content: counter(connect-step); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sev-pass-bg); color: var(--sev-pass-text); font: 600 var(--fs-sm)/1 var(--font-ui); }
.connect-steps b { font-weight: 600; }
.connect-steps span { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-base); overflow-wrap: anywhere; }
.connect-steps span b { color: var(--text); }
.connect-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.connect-two > div { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); }
.connect-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.connect-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-2); }
.connect-checks .ph { font-size: 20px; color: var(--sev-pass-text); margin-top: 1px; }
.connect-prompts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.connect-prompts li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text); }
.connect-prompts li > span { min-width: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-size: var(--fs-md); }
.connect-prompts li i { font-style: italic; color: var(--text-2); }
.connect-prompts .pw-btn--icon, .connect-prompts .pw-btn { flex-shrink: 0; }
.connect-faq { margin: 0; display: grid; gap: var(--s-3); }
.connect-faq > div { display: grid; gap: 2px; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.connect-faq > div:first-child { padding-top: 0; border-top: 0; }
.connect-faq dt { font-weight: 600; font-size: var(--fs-sm); }
.connect-faq dd { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-2); overflow-wrap: anywhere; }

/* ---- Claude consent screen (base_public) ---------------------------------- */
.consent-page { width: 100%; max-width: 720px; margin: 0 auto; }
.consent-card { display: grid; gap: var(--s-5); }
.consent-card p, .consent-card .pw-h2, .consent-card .pw-h4 { margin: 0; }
.consent-card .pw-lead { font-size: var(--fs-md); max-width: none; }
.consent-head { display: flex; align-items: center; gap: var(--s-4); }
.consent-head > div { display: grid; gap: 4px; min-width: 0; }
.consent-lists { gap: var(--s-4); }
.consent-lists > div { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-recessed); }
.consent-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-2); }
.consent-form { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.consent-actions { justify-content: flex-end; }

@media (max-width: 1100px) {
  .staff-grid, .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .acct-grid { grid-template-columns: 1fr; }
  .connect-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .staff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .staff-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .staff-actions { justify-content: flex-start; }
  .staff-row--overdue { padding-left: var(--s-3); box-shadow: inset 3px 0 0 var(--sev-critical); }
  .staff-row--overdue > td:first-child { box-shadow: none; }
  .staff-actions .staff-actions__danger { margin-left: 0; flex-basis: 100%; padding-top: var(--s-2); border-top: 1px dashed var(--line); }
  .acct-confirm { grid-template-columns: 1fr; }
  .acct-confirm__art { width: 96px; }
  .acct-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .acct-claude__apps li form { flex-basis: 100%; }
  .connect-two { grid-template-columns: 1fr; }
  .connect-copy { grid-template-columns: 1fr; }
  .connect-copy__btn { justify-self: start; }
  .consent-lists { grid-template-columns: 1fr; }
  .consent-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ---- Staff · scans table --------------------------------------------------
   Eight columns do not fit a table that sizes itself: it pushed the page sideways below 1100px. So each row is a
   grid with set tracks, its seven facts and then its View button and menu on the same line. The rules are keyed
   on .staff-scans, which only this table has. */
/* Held sits beside the In review pill in the same colour: a thin brass ring marks it as the exception. */
.staff-needs .pw-tag.staff-held { box-shadow: inset 0 0 0 1px var(--sev-high); }
.staff-table.staff-scans .staff-actions { flex-wrap: nowrap; align-items: center; }
@media (min-width: 641px) {
  .staff-table.staff-scans, .staff-table.staff-scans > thead, .staff-table.staff-scans > tbody { display: block; }
  .staff-table.staff-scans tr { display: grid; grid-template-columns: minmax(168px, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 100px 100px 60px 156px; align-items: center; }
  .staff-table.staff-scans thead tr { align-items: stretch; }
  .staff-table.staff-scans th, .staff-table.staff-scans td { min-width: 0; padding-inline: 8px; }
  .staff-table.staff-scans td { border-bottom: 0; overflow-wrap: anywhere; }
  .staff-table.staff-scans tbody tr { border-bottom: 1px solid var(--line-soft); }
  .staff-table.staff-scans tbody tr:last-child { border-bottom: 0; }
  /* The cells are as tall as what they hold, so the hover tint is the row's. */
  .staff-table.staff-scans tbody tr:hover { background: rgba(51,57,69,0.03); }
  .staff-table.staff-scans tbody tr:hover td { background: none; }
  .staff-table.staff-scans td:last-child { overflow-wrap: normal; }
  .staff-table.staff-scans td[colspan] { grid-column: 1 / -1; }
}
/* Between a phone and a wide desktop eight columns are too tight: the facts take lines of three, each under its name,
   and the actions end the last line. */
@media (min-width: 641px) and (max-width: 1199px) {
  .staff-table.staff-scans > thead { display: none; }
  .staff-table.staff-scans tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding-block: var(--s-2); }
  .staff-table.staff-scans td { padding-block: var(--s-2); }
  .staff-table.staff-scans td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-3); font-size: var(--fs-xs); }
  .staff-table.staff-scans td:last-child { grid-column: 3; align-self: end; text-align: right; }
  .staff-table.staff-scans td[colspan] { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
  /* The scan's id goes under the company name instead of breaking it, and the status tags follow their label. */
  .staff-table.staff-scans td small { display: block; margin-left: 0; }
  .staff-table .staff-needs { display: inline-flex; vertical-align: middle; }
  /* A phone has no hover for the Held tag's title, so the reason it carries for screen readers is written out. */
  .staff-needs .pw-tag.staff-held { display: block; height: auto; padding: 5px 9px; line-height: 1.4; white-space: normal; }
  .staff-needs .pw-tag.staff-held > .sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ---- Staff · new prospect ------------------------------------------------- */
.prospect { max-width: 880px; }
.prospect [hidden] { display: none !important; }
.prospect-card > .pw-card__header { margin-bottom: 0; }
.prospect-card { display: grid; gap: var(--s-4); }
.prospect-lead { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-base); max-width: 70ch; }
.prospect-lead b { color: var(--text); font-weight: 600; }
.prospect-fields { display: grid; gap: var(--s-4); }

.prospect-ai__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.prospect-ai__btn { min-height: 60px; min-width: 13.5rem; padding: 0 22px; border-radius: var(--r-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prospect-ai__btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.prospect-ai__btn[aria-busy="true"] .ph { animation: prospect-spark 1.4s ease-in-out infinite; }
.prospect-ai__status { display: grid; gap: var(--s-2); }
.prospect-ai__msg { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.prospect-ai__bar { display: none; height: 6px; }
.prospect-ai__status.is-busy .prospect-ai__bar { display: block; }
.prospect-ai__status.is-busy .prospect-ai__bar > span { width: 34%; animation: prospect-sweep 1.8s var(--ease-soft) infinite; }
.prospect-ai__status.is-done .prospect-ai__msg { color: var(--text); }
.prospect-ai__status.is-error .prospect-ai__msg { color: var(--sev-critical-text); }
@keyframes prospect-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes prospect-spark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(18deg) scale(1.15); } }

/* What the AI filled in keeps a mint edge until someone edits it. */
.pw-field.is-ai .pw-input, .pw-field.is-ai .pw-select, .pw-field.is-ai .pw-textarea { border-color: var(--mint-500); box-shadow: inset 3px 0 0 var(--mint-500); }
.pw-field.is-ai .pw-check__box { box-shadow: 0 0 0 2px var(--mint-300); }
.prospect-site > .is-ai { border-color: var(--mint-500); box-shadow: inset 3px 0 0 var(--mint-500); }
.prospect-review { border-color: var(--mint-300); }
.prospect-review .pw-card__title .ph { color: var(--mint-600); }
.prospect-review__notes { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); white-space: pre-line; max-width: 70ch; }
.prospect-review__sources summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.prospect-review__sources ul { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.prospect-evidence { display: block; margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); }
.prospect-evidence::before { content: "AI · "; font-weight: 600; color: var(--mint-700); }
:root[data-theme="dark"] .prospect-evidence::before { color: var(--mint-400); }
.prospect-trait { display: grid; gap: 2px; }
.prospect-trait .prospect-evidence { padding-left: 32px; }

.prospect-logo { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.prospect-logo__preview { width: 104px; height: 104px; display: grid; place-items: center; border-radius: var(--r-xl); border: 1.5px dashed var(--line-strong); background: var(--bg-recessed); color: var(--text-3); font-size: 34px; overflow: hidden; }
.prospect-logo__preview.has-logo { border: 1px solid var(--line); background: #fff; }
.prospect-logo__preview.has-logo .ph { display: none; }
.prospect-logo__preview img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }
.prospect-logo__fields { display: grid; gap: var(--s-3); min-width: 0; }

.prospect-ctxs { display: grid; gap: var(--s-3); }
.prospect-ctx { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-card); transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base); }
.prospect-ctx:has(.prospect-ctx__switch input:checked) { background: var(--bg-sheet); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.prospect-ctx.is-ai:has(.prospect-ctx__switch input:checked) { border-color: var(--mint-400); }
.prospect-ctx__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.prospect-ctx__name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.prospect-ctx__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.prospect-ctx > .prospect-evidence { padding-left: 56px; }
.prospect-ctx__body { display: grid; gap: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.prospect-ctx:not(:has(.prospect-ctx__switch input:checked)) .prospect-ctx__body { display: none; }
.prospect-ctx__body .field-choices { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: var(--s-4); }
.prospect-ctx__body .field-choices > legend { margin-bottom: var(--s-2); }

.prospect-sites { display: grid; gap: var(--s-3); justify-items: start; }
.prospect-sites__title { margin: 0; }
.prospect-sites__list { display: grid; gap: var(--s-2); width: 100%; }
.prospect-sites__empty { margin: 0; }
.prospect-site {
  width: 100%; box-sizing: border-box; display: grid; gap: var(--s-2); padding: var(--s-2);
  grid-template-columns: 200px 130px minmax(0, 1fr) 190px 34px;
  grid-template-areas: "url url url kind remove" "market locale label label .";
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-card);
  animation: pw-settle var(--t-base) var(--ease-soft);
}
.prospect-site > [name$="-url"] { grid-area: url; }
.prospect-site > [name$="-kind"] { grid-area: kind; }
.prospect-site > [name$="-market"] { grid-area: market; }
.prospect-site > [name$="-locale"] { grid-area: locale; }
.prospect-site > [name$="-label"] { grid-area: label; }
.prospect-site > .pw-input, .prospect-site > .pw-select { min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.prospect-site > .pw-select { padding-right: 38px; background-position: right 14px center; text-overflow: ellipsis; }
.prospect-site > .pw-input::placeholder { color: var(--text-3); }
.prospect-site__remove { grid-area: remove; align-self: center; }
.prospect-site__remove:hover { color: var(--sev-critical-text); }
.prospect-site__error { grid-column: 1 / -1; }
.prospect-site:has(.prospect-site__error) { border-color: var(--sev-critical); }

.prospect-actions { position: sticky; bottom: 0; z-index: 2; padding: var(--s-4) 0; background: linear-gradient(to bottom, transparent, var(--bg) 40%); }

@media (max-width: 900px) {
  .prospect-ai__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prospect-ai__btn { grid-column: 1 / -1; min-height: 52px; }
}
@media (max-width: 640px) {
  .prospect-ai__row { grid-template-columns: minmax(0, 1fr); }
  .prospect-logo { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); }
  .prospect-logo__preview { width: 72px; height: 72px; font-size: 26px; }
  .prospect-ctx { padding: var(--s-4); }
  .prospect-ctx > .prospect-evidence { padding-left: 0; }
  .prospect-ctx__body .field-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prospect-site { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; grid-template-areas: "url url remove" "kind market market" "locale label label"; }
}
@media (prefers-reduced-motion: reduce) {
  .prospect-ai__status.is-busy .prospect-ai__bar > span, .prospect-ai__btn[aria-busy="true"] .ph, .prospect-site { animation: none; }
}

/* ---- Referrals ------------------------------------------------------------ */
/* The invite: a modal (Cheeky perched over its top edge) or, without JavaScript, the same sheet as a page. */
.ref-perch { width: min(520px, 100%); }
.pw-modal-overlay > .ref-perch { animation: pw-settle var(--t-slow) var(--ease-soft) both; }
.ref-perch--page { max-width: 560px; }
.ref-modal { position: relative; display: grid; gap: var(--s-4); }
.pw-modal.ref-modal { width: 100%; }
.ref-modal:focus { outline: none; }
.ref-modal__close { position: absolute; top: var(--s-4); right: var(--s-4); }
.ref-modal__head { display: grid; gap: var(--s-2); padding-right: var(--s-8); }
.ref-modal__head p, .ref-modal__terms, .ref-modal__foot { margin: 0; }
.ref-modal__terms { line-height: var(--lh-base); }
.ref-modal .pw-modal__actions { margin-top: 0; flex-wrap: wrap; }
.ref-modal .email-unconfirmed { margin: 0; }
.ref-form { gap: var(--s-4); }

/* A code to copy: big, monospaced, on a dashed coupon edge. */
.ref-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border: 1.5px dashed color-mix(in srgb, var(--butter-500) 65%, transparent); border-radius: var(--r-lg); background: var(--sev-medium-bg); }
.ref-code__value { min-width: 0; font: 600 var(--fs-2xl)/1.1 var(--font-mono); letter-spacing: 0.08em; color: var(--text); overflow-wrap: anywhere; user-select: all; }
.ref-link { display: grid; gap: var(--s-2); min-width: 0; }
.ref-link .pw-input { min-width: 0; padding: 0 18px; text-overflow: ellipsis; }

/* The Referrals page: the codes first, the explainer beside them with Cheeky over it. */
.ref-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.ref-cards { display: grid; gap: var(--s-6); min-width: 0; }
.ref-card { display: grid; gap: var(--s-4); align-content: start; }
.ref-card > .pw-card__header { margin-bottom: 0; }
.ref-uses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ref-uses .pw-small { margin: 0; }
.ref-uses__pips { display: inline-flex; gap: 5px; }
.ref-uses__pips i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.ref-uses__pips i.is-used { border-color: var(--action); background: var(--action); }
.ref-intro { min-width: 0; }
.ref-explainer { display: grid; gap: var(--s-4); }
.ref-explainer p { margin: 0; }
.ref-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: ref-step; }
.ref-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s-3); row-gap: 2px; counter-increment: ref-step; }
.ref-steps li::before { content: counter(ref-step); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sev-pass-bg); color: var(--sev-pass-text); font: 600 var(--fs-sm)/1 var(--font-ui); }
.ref-steps b { font-weight: 600; }
.ref-steps span { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-base); }
.ref-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-5); align-items: start; }
.ref-stats .pw-stat__value { font-size: var(--fs-2xl); }
.ref-table .pw-mono { white-space: nowrap; }

/* "Refer a friend" on company pages: Cheeky's note carries its own outline button, never a second mint one. */
.pw-note.ref-cta { --note-portrait: url("../img/alpha/cheeky-envelope.ce153795e04c.webp"); display: grid; justify-items: start; gap: var(--s-3); max-width: 360px; margin: 0; padding-left: 78px; text-align: left; }
.pw-note.ref-cta--center { margin-inline: auto; }
.ref-cta__text { margin: 0; }
/* Cheeky with his letter, whole bust: zoomed-in crops blur at disc size. The disc sits by the copy, not mid-note. */
.pw-note.ref-cta::before { top: 14px; width: 48px; height: 48px; transform: none; background: var(--note-portrait) center 30% / auto 86% no-repeat, var(--note-disc); }
.ref-cta .pw-btn { font-family: var(--font-ui); }
.pw-card > .ref-cta, .pw-empty > .ref-cta { margin-top: var(--s-4); }

@media (max-width: 900px) {
  .ref-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pw-modal.ref-modal { padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); }
  .ref-modal__close { top: var(--s-3); right: var(--s-3); }
  .ref-code__value { font-size: var(--fs-xl); }
  /* On phones each number sits beside its words, so the three take little height. */
  .ref-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ref-stats .pw-stat { grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--s-3); }
}