/**
 * patient-shell.css - Investigation-centered patient workspace.
 *
 * The patient shell is intentionally minimal: a shared header, a tabbed
 * evaluation strip, stage tabs for the selected evaluation, and a download
 * link for the finalized report PDF.
 */

:root {
  --ps-bg: #fef9f0;
  --ps-surface: #ffffff;
  --ps-surface-soft: #faf4e8;
  --ps-text: #264653;
  --ps-text-soft: rgba(38, 70, 83, 0.72);
  --ps-text-dim: rgba(38, 70, 83, 0.48);
  --ps-border: rgba(38, 70, 83, 0.10);
  --ps-border-soft: rgba(38, 70, 83, 0.06);
  --ps-accent: #d06c52;
  --ps-accent-dim: rgba(208, 108, 82, 0.10);
  --ps-accent-text: #9e3b1b;
  --ps-red: #dc2626;
  --ps-amber: #d97706;
  --ps-green: #059669;
  --ps-blue: #596b78;
  --ps-teal: #0d9488;
  --ps-grey: #6b7280;
  --ps-red-bg: #fef2f2;
  --ps-amber-bg: #fffbeb;
  --ps-green-bg: #ecfdf5;
  --ps-blue-bg: #eef2f4;
  --ps-teal-bg: #f0fdfa;
  --ps-grey-bg: #f9fafb;

  /* Brand palette (NeuroClarity branding guidelines). Vellum is the warm
     off-white card field, ink the dark neutral used for text/outlines, and
     parchment the near-white used for text that sits on top of ink fills
     (e.g. action buttons on hover). Introduced for the welcome banner. */
  --ps-brand-vellum: #F4F1DE;
  /* Brand typography: Lora italic headings + Lato body, as on the marketing
     site and the checkout. Loaded by patient_shell.html. */
  --ps-font-serif: 'Lora', Georgia, serif;
  --ps-font-sans: 'Lato', system-ui, -apple-system, sans-serif;
  --ps-brand-ink: #3A3C41;
  --ps-brand-parchment: #FEF9F0;

  /* Backward-compatible aliases consumed by ACI patient components. */
  --home-border: var(--ps-border);
  --home-ink: var(--ps-text);
  --home-ink-dim: var(--ps-text-dim);
  --home-accent: var(--ps-accent);
  --home-blue: var(--ps-blue);
  --home-green: var(--ps-green);
  --home-red: var(--ps-red);

  /* Patient-shell bridge for the shared settings overlay stylesheet. */
  --atlas-bg: var(--ps-surface);
  --atlas-bg-warm: var(--ps-surface-soft);
  --atlas-surface: #faf4e8;
  --atlas-surface-b: var(--ps-border);
  --atlas-text: var(--ps-text);
  --atlas-text-soft: var(--ps-text-soft);
  --atlas-text-dim: var(--ps-text-dim);
  --atlas-accent: var(--ps-accent);
  --atlas-accent-text: var(--ps-accent-text);
  --atlas-overlay: rgba(38, 70, 83, 0.32);
  --atlas-shadow-lg: 0 24px 80px rgba(38, 70, 83, 0.18);
  --atlas-sev-severe: var(--ps-red);
}

html,
body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

#patient-shell-app,
.ps-root {
  height: 100vh;
  min-height: 0;
}

.ps-root {
  display: flex;
  flex-direction: column;
}

/* Header chrome — a deliberate twin of the clinician top bar (`.clin-top-bar`
   in clinician-workspace.css) and of the admin header, so the three shells read
   as one product. Values are inlined literals rather than `--ps-*` tokens where
   the token would drift from the clinician bar: the point is that these match,
   not that they follow this sheet's palette. See wiki/admin-workspace.md
   § Header shape for the two traps (which clinician sheet to copy, and why the
   surface has to be composited rather than declared). */
.ps-header {
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  /* 94% white over the shell's own parchment, which is what the clinician bar
     composites to. `--ps-surface` is flat #ffffff — a hair brighter and cooler
     than the other two shells' bars. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
    #fef9f0;
  border-bottom: 1px solid rgba(38, 70, 83, 0.09);
}

.ps-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ps-text);
  text-decoration: none;
}

.ps-header-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 11px;
}

.ps-header-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 600 and the same slight tracking as the other two shells' wordmarks: at 700
   the same word reads heavier here than in the clinician bar beside it. */
.ps-header-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.ps-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ps-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.ps-icon-btn:hover {
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
}

/* -- Header actions ----------------------------------------------------- */

.ps-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Header icon buttons match `.clin-top-icon` exactly. Scoped to the header
   rather than changed on `.ps-icon-btn` itself, because that class is also the
   close button in every patient modal, which is sized for its own chrome. */
.ps-header .ps-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  color: rgba(38, 70, 83, 0.72);
  font-family: inherit;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ps-header .ps-icon-btn:hover {
  background: rgba(208, 108, 82, 0.12);
  border-color: rgba(208, 108, 82, 0.22);
  color: #9e3b1b;
}

/* -- People bar (profile switcher tabs) --------------------------------- */

.ps-people-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 8px 24px 2px;
  background: var(--ps-bg);
  overflow-x: auto;
}

/* Forced "set your password" gate for admin-provisioned accounts that have
   never set a password of their own (needs_password_setup). Full-screen and
   non-dismissible: they set a password or sign out. */
/* A PAGE, not a dialog. This is the first thing a new patient sees, and a card
   floating on a blurred copy of a workspace they have never used reads as an
   interruption to something — when in fact there is nothing behind it yet, and
   nothing to go back to (it is set-password-or-sign-out). So it owns the
   screen: the same warm surface the app uses, the card top-anchored at the
   same offset as every other first-run screen, no dim and no blur. Matches the
   evidence wizard's entry/preferred-name screens (`.pd-entry-card`).

   `flex-start` + `overflow-y: auto` keeps the primary button reachable on a
   short viewport, which matters more here than anywhere: a stranded button on
   a non-dismissible gate is a hard lock-out (issue #202). */
.ps-password-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 36px 24px 56px;
  background: var(--ps-bg, #fef9f0);
  /* Brand body face, not the shell's Inter: this screen is the seam between
     the marketing/checkout pages and the app. */
  font-family: var(--ps-font-sans);
}
/* Not a panel. The gate follows the NeuroClarity booking-confirmation theme
   (neuroclarity.life/secure-booking-h/v3booking-confirmation), which the person
   has just come from: content sits directly on the parchment page with a Lora
   italic heading, Lato body, and a single vellum block for the one piece of
   data being shown back. A white card here re-framed the first screen after
   checkout as a form on a different product. `.ps-password-gate-card` survives
   purely as the centered measure. */
.ps-password-gate-card {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 0 8px;
}
.ps-password-gate-title {
  margin: 4px 0 0;
  font-family: var(--ps-font-serif);
  font-style: italic;
  font-weight: 400;
  /* The brand `h3` step (neuroclarity-website-life tailwind.config.ts), not the
     confirmation page's `h2`: this heading shares a viewport with two fields
     and a CTA, not a landing hero. */
  font-size: clamp(28px, 1.31vw + 23.07px, 42px);
  line-height: 1.15;
  color: var(--ps-text);
}
.ps-password-gate-copy {
  margin: 6px 0 10px;
  max-width: 460px;
  /* Brand `body` step; ink at 70%, as the reference sets its paragraphs. */
  font-size: clamp(14px, 0.75vw + 11.19px, 18px);
  line-height: 1.6;
  color: rgba(58, 60, 65, 0.7);
}
/* The address is the form's first field and is built as one: same label, same
   box, same measure as the two password inputs, differing only in being
   read-only with the pencil inside it. Anything else — the titled panel it
   started as, the vellum chip that replaced it — read as a different kind of
   thing stacked on top of a form. */
.ps-password-gate-email {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  text-align: left;
}
.ps-password-gate-email-view {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(38, 70, 83, 0.22);
  /* Vellum, a step down from the parchment the two editable fields are filled
     with: the box is the same, so the fill is what says this one is read until
     the pencil is pressed — the editor that replaces it takes the parchment
     fill back, which is the other half of the signal. */
  background: var(--ps-brand-vellum);
  font-size: 14px;
  color: var(--ps-text);
  overflow: hidden;
}
/* The address takes the slack so the pencil sits hard right, and a long one
   ellipsises rather than pushing the pencil out of the box. */
#ps-pw-email-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-password-gate-email-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ps-accent);
  cursor: pointer;
  border-radius: 999px;
  font-size: 12px;
}
.ps-password-gate-email-edit:hover {
  background: rgba(38, 70, 83, 0.08);
}
/* The editor takes the field's place, so it keeps the field's measure. */
.ps-password-gate-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ps-password-gate-email-actions {
  display: flex;
  gap: 8px;
}
.ps-password-gate-email-save,
.ps-password-gate-email-cancel {
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ps-password-gate-email-save {
  border: 0;
  background: var(--ps-accent);
  color: #fff;
}
.ps-password-gate-email-cancel {
  border: 1px solid rgba(38, 70, 83, 0.2);
  background: transparent;
  color: var(--ps-text-soft);
}
.ps-password-gate-email-hint {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(58, 60, 65, 0.6);
}
.ps-password-gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  text-align: left;
}
.ps-password-gate-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* One label style for all three fields — the email row is not inside a
   `<label>` (its control is read-only text, not an input), so the type lives on
   the text element rather than on the wrapper. */
.ps-password-gate-label-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ps-text-soft);
}
/* Wrapper that lets the show/hide button sit inside the field, where the email
   row's pencil sits. */
.ps-password-gate-field {
  position: relative;
  display: block;
}
/* Room for the button, so a long value never runs underneath it. */
.ps-password-gate-field .ps-password-gate-input {
  padding-right: 44px;
}
.ps-password-gate-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ps-accent);
  font-size: 13px;
  cursor: pointer;
}
.ps-password-gate-reveal:hover {
  background: rgba(38, 70, 83, 0.08);
}
/* Same field as the checkout the person just came from (`.sb-input`): 44px,
   8px radius, parchment fill, terracotta focus ring. */
.ps-password-gate-input {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(38, 70, 83, 0.22);
  background: var(--ps-bg);
  font-family: inherit;
  font-size: 14px;
  color: var(--ps-text);
}
.ps-password-gate-input:focus {
  outline: none;
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 1px var(--ps-accent);
}
/* Chrome tints autofilled fields blue; the inset fill repaints them parchment
   and the absurd transition defeats the late re-tint after first paint. */
.ps-password-gate-input:-webkit-autofill,
.ps-password-gate-input:-webkit-autofill:hover,
.ps-password-gate-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ps-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ps-bg) inset;
  box-shadow: 0 0 0 1000px var(--ps-bg) inset;
  caret-color: var(--ps-text);
  transition: background-color 9999s ease-in-out 0s;
}
.ps-password-gate-error {
  margin: 0;
  font-size: 12.5px;
  color: var(--ps-red);
}
.ps-password-gate-submit {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  background: var(--ps-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ps-password-gate-submit:hover:not(:disabled) {
  background: #b9543b;
}
.ps-password-gate-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Closes the page the way the confirmation page does — the wordmark, then the
   way back out. */
.ps-password-gate-logo {
  margin-top: 48px;
  height: 34px;
  width: auto;
}
.ps-password-gate-signout {
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: var(--ps-text-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.ps-password-gate-signout:hover {
  color: var(--ps-text);
}

/* Align to the same centered column as the workspace content below. */
.ps-people-tabs {
  width: min(1120px, 100%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.ps-person-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 2px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ps-text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ps-person-tab:hover {
  color: var(--ps-text);
  border-bottom-color: var(--ps-border);
}

.ps-person-tab.is-active {
  color: var(--ps-accent-text);
  font-weight: 600;
  border-bottom-color: var(--ps-accent);
}

.ps-person-you {
  font-size: 11px;
  font-weight: 500;
  color: var(--ps-text-dim);
}

.ps-person-tab.is-active .ps-person-you {
  color: var(--ps-accent-text);
  opacity: 0.7;
}

/* Solo account: "you" is the only profile, so it is a plain context label — not
   a switchable tab. Matches the tab's baseline layout/rhythm but drops the
   active underline + accent (there is nothing to switch to). The .ps-person-tab
   treatment returns automatically once a managed person exists. */
.ps-person-solo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 2px 6px;
  color: var(--ps-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ps-person-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  /* Separate the add action from the profile tabs: push it to the far
     (right) edge of the centered column. */
  margin-left: auto;
  padding: 5px 11px 5px 14px;
  border: 0;
  border-left: 1px solid var(--ps-border);
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--ps-text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.ps-person-add:hover {
  color: var(--ps-accent-text);
}

/* -- Generic modal + buttons (add person) ------------------------------- */

.ps-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* `safe center` + `overflow-y: auto`: centre the modal when it fits, but
     top-anchor and scroll when it overflows a short viewport (issue #202).
     The add-person / onboarding-demographics forms stack 7+ fields plus the
     action row, easily exceeding a 1366×600 laptop; plain `align-items:
     center` would strand the submit button below an unreachable fold. */
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: var(--atlas-overlay);
}

.ps-modal {
  width: min(440px, 100%);
  background: var(--ps-surface);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--atlas-shadow-lg);
}

.ps-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ps-modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ps-text);
}

.ps-modal-copy {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ps-text-soft);
  line-height: 1.45;
}

.ps-modal-error {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid #efcfc8;
  border-radius: 12px;
  background: #fff4f1;
  color: #9e4b38;
  font-size: 13px;
  line-height: 1.4;
}

.ps-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ps-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ps-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ps-modal-field > span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ps-text-soft);
}

.ps-modal-optional {
  font-weight: 400;
  text-transform: none;
  opacity: 0.7;
}

.ps-modal-field input,
.ps-modal-field select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  background: var(--ps-surface);
  color: var(--ps-text);
  font: inherit;
}

.ps-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.ps-btn {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ps-btn--primary {
  background: var(--ps-accent);
  color: #fff;
}

.ps-btn--primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.ps-btn--ghost {
  background: transparent;
  border-color: var(--ps-border);
  color: var(--ps-text-soft);
}

/* Destructive confirm (e.g. remove an informant). */
.ps-btn--danger {
  background: #b0392a;
  color: #fff;
}

.ps-btn--danger:hover {
  background: #9e3325;
}

.ps-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 24px 24px;
  background: var(--ps-bg);
}

.ps-content-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

/* Follow-up sessions card (patient home). A standalone clinician-scheduled
   follow-up isn't tied to an ACI, so it can't ride the stage view — this card
   above the evaluation tabs lets the patient see the time and join the call.
   Mirrors the welcome-banner hero treatment. */
.ps-followups {
  margin: 4px 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--ps-border);
  border-left: 4px solid var(--ps-accent);
  border-radius: 16px;
  background:
    linear-gradient(180deg, var(--ps-accent-dim), rgba(255, 255, 255, 0)),
    var(--ps-surface);
  box-shadow: 0 8px 28px rgba(38, 70, 83, 0.06);
}

.ps-followups-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--ps-accent-text);
}

.ps-followup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
}

/* Only separate adjacent rows, never the first one under the heading. */
.ps-followup-row + .ps-followup-row {
  border-top: 1px solid var(--ps-border);
}

.ps-followup-when {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ps-text);
}

.ps-followup-join {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  background: var(--ps-accent);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease-in-out;
}

.ps-followup-join:hover {
  filter: brightness(0.93);
}

.ps-followup-join:focus-visible {
  outline: 2px solid var(--ps-accent-text);
  outline-offset: 2px;
}

/* Persistent support-contact footer. Pinned below the scrolling workspace so a
   patient can reach a human from anywhere, including stage "complete" states. */
.ps-footer {
  flex: 0 0 auto;
  padding: 12px 24px;
  text-align: center;
  background: var(--ps-surface);
  border-top: 1px solid var(--ps-border);
}

.ps-footer-support {
  font-size: 13px;
  color: var(--ps-text-soft);
}

.ps-footer-link {
  color: var(--ps-accent-text);
  text-decoration: none;
  font-weight: 600;
}

.ps-footer-link:hover {
  text-decoration: underline;
}

.ps-eval-tabs {
  display: flex;
  align-items: center;
  min-height: 38px;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 0;
  scrollbar-width: none;
}

.ps-eval-tabs::-webkit-scrollbar {
  display: none;
}

.ps-tab,
.ps-tab-more {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ps-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.ps-tab {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ps-tab:hover {
  background: var(--ps-surface-soft);
  color: var(--ps-text-soft);
}

.ps-tab.is-active {
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
  font-weight: 700;
  box-shadow: none;
}

.ps-tab--empty {
  cursor: default;
}

/* A single context is a plain label, not a switcher tab (issue #211): no
   pointer/hover and flush-left, so it reads as a small heading for the one
   evaluation rather than a no-op interactive pill. The status dot stays. */
.ps-tab--solo {
  cursor: default;
  padding-left: 0;
  color: var(--ps-text);
  font-weight: 700;
}

.ps-tab--solo:hover {
  background: transparent;
  color: var(--ps-text);
}

/* Informant ("helping someone else") tabs are visually distinct from your
   own evaluation tabs: a person icon + name + role chip. */
.ps-tab-icon {
  font-size: 11px;
  color: var(--ps-blue);
  flex: 0 0 auto;
}

.ps-tab--informant .ps-tab-person {
  font-weight: 750;
}

.ps-tab-role {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ps-blue);
  background: var(--ps-blue-bg);
  padding: 1px 7px;
  border-radius: 999px;
}

.ps-tab-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ps-grey);
}

.ps-tab-dot--red { background: var(--ps-red); }
.ps-tab-dot--amber { background: var(--ps-amber); }
.ps-tab-dot--green { background: var(--ps-green); }
.ps-tab-dot--blue { background: var(--ps-blue); }
.ps-tab-dot--teal { background: var(--ps-teal); }
.ps-tab-dot--grey { background: var(--ps-grey); }
.ps-tab-dot--neutral { background: var(--ps-grey); }

.ps-tab-more {
  position: relative;
  padding-right: 8px;
  background: transparent;
  color: var(--ps-text-dim);
}

.ps-tab-more select {
  max-width: 128px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
}

.ps-selected-context {
  min-height: 0;
  padding: 30px 0 32px;
}

.ps-case-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* The status pill + "Feedback & Questions" action travel together as one group,
   sitting to the right of the title on desktop and dropping cleanly below it
   (left-aligned, wrapping) on mobile where the heading stacks into a column. */
.ps-case-heading-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Dev-only "Simulate report" button (rendered only when DEBUG is on). Dashed
   outline so it reads as a developer affordance, not a patient control. */
.ps-sim-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--ps-border, #c9bdb2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ps-muted, #6b7b83);
  cursor: pointer;
}
.ps-sim-report-btn:hover { color: var(--ps-text, #264653); border-color: var(--ps-text, #264653); }
.ps-sim-report-btn:disabled { opacity: 0.6; cursor: default; }

.ps-case-title {
  margin: 0;
  color: var(--ps-text);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ps-case-subtitle {
  margin: 9px 0 0;
  color: var(--ps-text-soft);
  font-size: 15.5px;
  line-height: 1.45;
}

.ps-aci-pill {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ps-border-soft);
  background: #fff;
  color: var(--ps-text-soft);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.ps-aci-pill--red { background: var(--ps-red-bg); color: var(--ps-red); }
.ps-aci-pill--amber { background: var(--ps-amber-bg); color: var(--ps-amber); }
.ps-aci-pill--green { background: var(--ps-green-bg); color: var(--ps-green); }
.ps-aci-pill--blue { background: var(--ps-blue-bg); color: var(--ps-blue); }
.ps-aci-pill--teal { background: var(--ps-teal-bg); color: var(--ps-teal); }
.ps-aci-pill--grey { background: var(--ps-grey-bg); color: var(--ps-grey); }
.ps-aci-pill--neutral { background: var(--ps-grey-bg); color: var(--ps-grey); }

/* ---------- Apply panel (minimal, flat) ---------- */

.ps-apply {
  width: 100%;
  /* Sit the apply content on the same crisp white card as every other stage
     surface, so the start screen does not read as bare, low-contrast text
     floating on the grey page. */
  background: var(--ps-surface);
  border: 1px solid var(--ps-border-soft);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(38, 70, 83, 0.05);
  padding: 22px 24px 24px;
}

.ps-apply-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ps-text);
}

/* ---------- "How it works" stepper ---------- */

.ps-apply-steps-block {
  margin: 22px 0 0;
}

.ps-apply-steps-eyebrow {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ps-text-dim);
}

/* Four equal-width steps on a row; auto-fit wraps to 2-up then 1-up as the
   workspace narrows, with no per-breakpoint rules needed. */
.ps-apply-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.ps-apply-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--ps-border-soft);
  border-radius: 12px;
  background: var(--ps-surface-soft);
}

.ps-apply-step-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
  font-size: 14px;
}

.ps-apply-step-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ps-apply-step-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-text-dim);
}

.ps-apply-step-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--ps-text);
  line-height: 1.2;
}

.ps-apply-step-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ps-text-soft);
}

/* Reassurance note sitting directly below the "how it works" steps (muted,
   with a small lead icon). Sits above the CTA footer. */
.ps-apply-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ps-text-soft);
}

.ps-apply-note i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--ps-accent-text);
  opacity: 0.85;
}

.ps-apply-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ps-border-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* No price block (comp'd beta): the foot holds only the CTA, so push it right
   rather than leaving it stranded at the left edge under the divider. */
.ps-apply-foot--no-price {
  justify-content: flex-end;
}

.ps-apply-price {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps-apply-amount {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ps-text);
  line-height: 1;
}

.ps-apply-price-note {
  font-size: 12.5px;
  color: var(--ps-text-dim);
}

.ps-apply-error {
  margin-top: 14px;
  font-size: 13px;
  color: #9e4b38;
}

.ps-apply-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.ps-apply-confirm-copy {
  font-size: 13.5px;
  color: var(--ps-text-soft);
}

.ps-apply-confirm-actions {
  display: flex;
  gap: 10px;
}

.ps-stage-tabs {
  position: relative;
  display: grid;
  /* The rail's step count is dynamic: a settled payment drops its own tab, so
     this row holds four or five steps. Implicit columns split the width evenly
     across however many tabs were rendered, rather than reserving a fixed five
     and stranding an empty cell. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 22px;
  padding: 4px;
  border: 1px solid var(--ps-border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.ps-stage-tab {
  position: relative;
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ps-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 650;
}

.ps-stage-tab:hover {
  background: rgba(38, 70, 83, 0.035);
  color: var(--ps-text-soft);
}

.ps-stage-tab-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(38, 70, 83, 0.05);
  color: var(--ps-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
}

.ps-stage-tab-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ps-stage-tab-label {
  color: inherit;
  font-size: 13px;
  font-weight: 780;
}

.ps-stage-tab-state {
  color: var(--ps-text-dim);
  font-size: 11px;
  font-weight: 700;
  /* The Session step's contextual status (issue #81) can run longer than the
     one-word generic labels ("Today, 2:00 PM MDT · 5h"); wrap to at most two
     lines and let the title tooltip carry the full sentence. */
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ps-stage-tab--done .ps-stage-tab-index {
  background: rgba(5, 150, 105, 0.12);
  color: var(--ps-green);
}

.ps-stage-tab--current .ps-stage-tab-index {
  background: rgba(89, 107, 120, 0.12);
  color: var(--ps-blue);
}

/* The app's terracotta, like every other accent on this page. It took the
   darker `--ps-accent-text` (#9e3b1b), which reads as a brick red beside the
   rail's own accent-dim wash and matches nothing else in the shell. */
.ps-stage-tab--available .ps-stage-tab-index {
  background: var(--ps-accent-dim);
  color: var(--ps-accent);
}

.ps-stage-tab--done .ps-stage-tab-state { color: var(--ps-green); }
.ps-stage-tab--current .ps-stage-tab-state { color: var(--ps-blue); }
.ps-stage-tab--available .ps-stage-tab-state { color: var(--ps-accent); }

.ps-stage-tab.is-selected {
  background: #fff;
  border-color: transparent;
  color: var(--ps-text);
  box-shadow:
    inset 0 0 0 1px rgba(38, 70, 83, 0.05),
    0 12px 34px rgba(38, 70, 83, 0.08);
}

.ps-stage-tab.is-selected .ps-stage-tab-label {
  color: var(--ps-text);
  font-weight: 850;
}

.ps-stage-tab.is-selected .ps-stage-tab-state {
  color: var(--ps-text-soft);
  font-weight: 850;
}

.ps-stage-tab.is-selected.ps-stage-tab--current .ps-stage-tab-index {
  background: rgba(89, 107, 120, 0.18);
  color: #435563;
}

.ps-stage-tab.is-selected.ps-stage-tab--current .ps-stage-tab-state {
  color: #435563;
}

.ps-stage-body {
  width: 100%;
  /* One consistent vertical rhythm for everything in a stage: the empty notice,
     the evidence cards, the informant roster, the booking notice + picker. */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The roster used to add its own top margin for spacing; the stage-body gap now
   owns that rhythm, so drop the manual margin to avoid a doubled gap. */
.ps-stage-body .ps-informant-manage {
  margin-top: 0;
}

.ps-stage-body .acp-card,
.ps-selected-context > .acp-card {
  max-width: none;
  border: 1px solid var(--ps-border-soft);
  border-radius: 8px;
  /* Solid white + a crisp shallow shadow. A translucent fill over the grey
     page plus a large 50px blur read as hazy/"blurred" rather than clean. */
  background: var(--ps-surface);
  box-shadow: 0 1px 2px rgba(38, 70, 83, 0.05);
}

.ps-stage-body .acp-card-head {
  display: block;
  padding: 18px 20px;
  border-bottom-color: var(--ps-border-soft);
  background: transparent;
}

.ps-stage-body .acp-card-body {
  padding: 18px 20px;
}

/* The Evidence card lays its category rows out in .acp-evidence-cat-list, not
   .acp-card-body, so it needs the same horizontal inset to keep the rows lined
   up with the 20px head padding above. Without this the icon/CTA sit flush to
   the card edge (issue #80 regression). */
.ps-stage-body .acp-evidence-cat-list {
  padding: 0 20px;
}

/* Trailing action slot inside a status card — e.g. the "Revisit completed
   sections" button on the right of "Evidence submitted". `margin-left:auto`
   pushes it to the card's trailing edge; `align-self:center` vertically
   centers it against the icon/title block (which the card lays out with
   `align-items:flex-start`). */
.acp-status-action {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
}

/* Revisit button — a quiet, white bordered pill with accent-coloured label so
   it reads as a secondary action, not a primary CTA competing with the card. */
.ps-stage-body .acp-cta.acp-status-cta {
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
  color: var(--ps-accent, #d06c52);
  white-space: nowrap;
}
.ps-stage-body .acp-cta.acp-status-cta:hover {
  background: var(--ps-surface-soft);
  border-color: var(--ps-accent, #d06c52);
}

.ps-stage-body .acp-eyebrow {
  color: var(--ps-text-dim);
  letter-spacing: 0;
}

.ps-stage-body .acp-card-title {
  font-size: 17px;
}

.ps-root .ps-stage-body .acp-payment-section {
  width: 100%;
}

.ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-head,
.ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ps-border-soft);
  background: linear-gradient(180deg, rgba(208, 108, 82, 0.035), rgba(255, 255, 255, 0));
}

.ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-title,
.ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-title {
  text-align: center;
}

.ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-subtitle,
.ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-subtitle {
  margin-top: 0;
  text-align: right;
}

/* Appointment cards whose header is a plain stacked eyebrow/title(/subtitle),
   not the 3-column "label | centered title | right-aligned hint" layout used by
   the payment card. Reset to a left-aligned block so the title/subtitle line up
   instead of scattering center/right (e.g. the booked card and the booking
   picker card). */
.ps-root .ps-stage-body .acp-plain-head.acp-card .acp-card-head {
  display: block;
}

.ps-root .ps-stage-body .acp-plain-head.acp-card .acp-card-title {
  text-align: left;
}

.ps-root .ps-stage-body .acp-plain-head.acp-card .acp-card-subtitle {
  margin-top: 4px;
  text-align: left;
}

.ps-stage-body .acp-payment-section [data-payment-mount] {
  align-items: center;
}

.ps-stage-body .acp-cta {
  min-height: 38px;
  align-self: flex-start;
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 13px;
}

.ps-stage-body .acp-cta--ghost {
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
  color: var(--ps-text-soft);
}

.ps-stage-body .acp-cta--ghost:hover {
  background: var(--ps-surface-soft);
  color: var(--ps-text);
}

.ps-stage-body .pcc-btn.pcc-pay,
.ps-stage-body .pcc-btn.pcc-continue {
  border: 1px solid rgba(208, 108, 82, 0.18);
  border-radius: 8px;
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
  box-shadow: none;
}

.ps-stage-body .pcc-btn.pcc-pay:hover:not(:disabled),
.ps-stage-body .pcc-btn.pcc-continue:hover:not(:disabled) {
  background: rgba(208, 108, 82, 0.15);
  border-color: rgba(208, 108, 82, 0.26);
}

/* The step's one real commitment (Confirm booking, Join video call) carries
   the solid app terracotta rather than the tinted stage-body treatment above
   (which read as a disabled/secondary control). Only the flat 8px radius of
   the stage-body chrome is kept. */
.ps-stage-body .bsp-btn--primary,
.ps-stage-body .acp-cta--primary {
  border-radius: 8px;
  background: var(--ps-accent, #d06c52);
  border-color: var(--ps-accent, #d06c52);
  color: #ffffff;
  box-shadow: none;
}

.ps-stage-body .bsp-btn--primary:hover:not(:disabled),
.ps-stage-body .acp-cta--primary:hover {
  background: #b9583f;
  border-color: #b9583f;
}

.ps-stage-body .acp-action-row .acp-cta {
  width: auto;
}

.ps-stage-body .pcc {
  width: min(720px, 100%);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.ps-stage-body .pcc-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.ps-stage-body .pcc-amount-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-text-soft);
}

.ps-stage-body .pcc-amount-lead {
  font-size: 28px;
  font-weight: 760;
  line-height: 1;
  color: var(--ps-text);
}

.ps-stage-body .pcc-processing {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ps-text-soft);
  font-size: 13.5px;
}

.ps-stage-body .pcc-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-stage-body .pcc-card-placeholder {
  background: var(--ps-surface-soft);
  border: 1px solid var(--ps-border-soft);
  border-radius: 8px;
}

.ps-stage-body .pcc-card-placeholder {
  min-height: 0;
  padding: 16px 18px;
}

.ps-stage-body .pcc-card-input {
  border-radius: 8px;
}

.ps-stage-body .pcc-footer {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--ps-border-soft);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.ps-stage-body .pcc-btn {
  width: auto;
  min-width: 176px;
  min-height: 40px;
  padding: 0 16px;
}

.ps-stage-body .pcc-secure-note {
  justify-content: flex-start;
}

.ps-root .atlas-settings-overlay {
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 22px;
}

.ps-root .atlas-settings-backdrop {
  background: rgba(38, 70, 83, 0.28);
  backdrop-filter: none;
}

.ps-root .atlas-settings-card {
  width: min(760px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 44px));
  margin: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 28px 90px rgba(38, 70, 83, 0.24);
}

.ps-root .atlas-settings-header {
  align-items: center;
  padding: 22px 24px 18px;
}

.ps-root .atlas-settings-title {
  font-size: 22px;
  font-weight: 780;
  letter-spacing: 0;
}

.ps-root .atlas-settings-copy {
  margin-top: 4px;
  font-size: 13px;
}

.ps-root .atlas-settings-close {
  border-radius: 8px;
  border-color: transparent;
}

.ps-root .atlas-settings-layout {
  flex: 1 1 auto;
  overflow-y: auto;
}

.ps-root .atlas-settings-section {
  padding: 20px 24px 22px;
}

.ps-root .atlas-settings-section-head {
  align-items: center;
}

.ps-root .atlas-settings-section-title {
  font-size: 14px;
  font-weight: 780;
}

.ps-root .atlas-settings-section-tag,
.ps-root .atlas-settings-section-kicker {
  color: var(--ps-text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ps-root .atlas-settings-form {
  gap: 14px;
}

.ps-root .atlas-settings-label {
  color: var(--ps-text-soft);
  letter-spacing: 0;
}

.ps-root .atlas-settings-input {
  min-height: 44px;
  border-radius: 8px;
  background: var(--ps-surface-soft);
  border-color: transparent;
}

.ps-root .atlas-settings-input:focus {
  border-color: rgba(64, 127, 116, 0.32);
  box-shadow: 0 0 0 3px rgba(64, 127, 116, 0.10);
}

/* Read-only field (e.g. a managed person's email): visibly non-editable but
   still selectable/copyable, unlike a disabled input. */
.ps-root .atlas-settings-input--readonly,
.ps-root .atlas-settings-input--readonly:focus {
  color: var(--ps-text-muted, #5c737a);
  cursor: default;
  box-shadow: none;
  border-color: transparent;
}

.ps-root .atlas-settings-actions {
  margin-top: 16px;
}

.ps-root .atlas-settings-btn {
  min-height: 40px;
  border-radius: 8px;
  letter-spacing: 0;
}

.ps-root .atlas-settings-btn--primary {
  background: var(--ps-accent-dim);
  border-color: rgba(208, 108, 82, 0.18);
  color: var(--ps-accent-text);
}

.ps-root .atlas-settings-btn--primary:hover:not(:disabled) {
  background: rgba(208, 108, 82, 0.15);
  border-color: rgba(208, 108, 82, 0.26);
}

.ps-root .atlas-settings-footer {
  padding: 16px 24px 22px;
}

.ps-informant-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ps-role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-role-pill {
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ps-surface-soft);
  color: var(--ps-text-soft);
  border: 1px solid var(--ps-border);
  font-size: 12px;
  font-weight: 700;
}

.ps-empty {
  min-height: 320px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: var(--ps-surface);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}

.ps-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-empty-text {
  color: var(--ps-text-soft);
  font-size: 14px;
}

.ps-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2f7 25%, #faf4e8 38%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: ps-skeleton-shimmer 1.4s ease-in-out infinite;
}

.ps-skeleton--tile {
  height: 98px;
  margin-bottom: 16px;
}

.ps-skeleton--card {
  height: 180px;
}

@keyframes ps-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.ps-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 500;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ps-text);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ps-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.ps-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .ps-header {
    padding: 0 16px;
  }

  .ps-workspace {
    padding: 14px;
  }

  .ps-case-heading,
  .ps-informant-body {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Stack the rail on narrow screens. This flips the flow rather than setting
     a single explicit column, because column flow would otherwise keep spilling
     the tabs sideways into implicit columns. */
  .ps-stage-tabs {
    grid-auto-flow: row;
  }

  .ps-case-title {
    font-size: 30px;
  }

  /* Stack the apply footer so the CTA spans the full width rather than being
     cramped against the right edge on mobile. */
  .ps-apply-foot,
  .ps-apply-foot--no-price {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .ps-apply-foot .acp-cta {
    justify-content: center;
  }

  .ps-apply-note {
    max-width: none;
  }

  .ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-head,
  .ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-head {
    display: block;
  }

  /* On narrow screens a right-side status action would crowd the copy, so let
     the card wrap and drop the button onto its own row. */
  .acp-status-card .acp-waiting {
    flex-wrap: wrap;
  }

  /* Keep the icon beside the title: flex-basis:0 stops the long copy's
     max-content width from forcing the whole block onto its own line (which
     would otherwise strand the icon alone above the title). */
  .acp-status-card .acp-waiting-copy {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Button on its own full-width row, lined up under the title (past the 36px
     icon + 12px gap column). flex-shrink absorbs the 48px indent so the button
     never overflows the card edge. */
  .acp-status-action {
    flex: 1 1 100%;
    margin-left: 48px;
    align-self: flex-start;
  }

  .ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-title,
  .ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-title,
  .ps-root .ps-stage-body .acp-payment-section.acp-card .acp-card-subtitle,
  .ps-root .ps-stage-body .acp-appointment-card.acp-card .acp-card-subtitle {
    text-align: left;
  }

  .ps-stage-body .pcc-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ps-stage-body .pcc-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Manage informants — Evidence tab roster
 * Role-centric list of people helping with an evaluation. Assigned roles show
 * the person with an optional remove; needed roles show an inline add form.
 * ------------------------------------------------------------------------- */
.ps-informant-manage {
  margin-top: 14px;
}

.ps-informant-roster .ps-informant-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-informant-entry {
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  background: var(--ps-surface-soft);
  padding: 12px 14px;
}

.ps-informant-entry-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ps-informant-ico {
  color: var(--ps-accent);
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex: none;
}

.ps-informant-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-informant-role {
  font-weight: 600;
  font-size: 14px;
  color: var(--ps-text);
}

.ps-informant-name {
  font-size: 13px;
  color: var(--ps-text-soft);
}

/* A role with co-informants: the icon sits to the left and a vertical group
   stacks the role label, one row per person, the "Add another" toggle, and the
   (hidden) invite fields — so everything for the role reads top-to-bottom and
   the add form opens BELOW the existing invitations, never floating off to the
   right. The icon is top-aligned against the tall stacked group. */
.ps-informant-entry--multi {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ps-informant-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* One co-informant: name/progress on the left, status badge + remove trailing.
   Rows get breathing room and a hairline between them — with two or more
   people stacked, the unseparated rows read as one jumbled block. */
.ps-informant-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The parent group's 8px flex gap provides the space ABOVE each separator, and
   the 8px padding-top here matches it below — no extra padding on the rows
   themselves, so the hairlines sit centred between rows. */
.ps-informant-person + .ps-informant-person {
  border-top: 1px solid var(--ps-border, rgba(0, 0, 0, 0.07));
  padding-top: 8px;
}

.ps-informant-person .ps-informant-meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Add another <role>" reuses the ghost-toggle look but sits below the people,
   inside a block that carries the same hairline divider as the person rows. */
.ps-informant-add-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid var(--ps-border, rgba(0, 0, 0, 0.07));
  padding-top: 8px;
}

.ps-informant-add-block .ps-informant-fields {
  margin-top: 0;
  align-self: stretch;
}

/* Shown in place of "Add another" once a role hits its co-informant cap
   (issue #116): a quiet, non-alarming hint that explains why no add affordance
   is offered and how to make room for one. */
.ps-informant-limit-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ps-border, rgba(0, 0, 0, 0.07));
  color: var(--ps-text-soft, #64748b);
  font-size: 12px;
  line-height: 1.4;
}

.ps-informant-limit-note i {
  font-size: 11px;
  opacity: 0.8;
}

/* Inline error surfaced when an invite is rejected at the cap (the rare stale-
   roster race; the affordance is normally hidden at capacity). */
.ps-informant-invite-error {
  margin-top: 6px;
  color: var(--ps-danger, #dc2626);
  font-size: 12px;
  line-height: 1.4;
}

/* The invite form lives inside the group (below "Add another"), so it spans the
   group width and reads as a continuation of the role rather than a side panel. */
.ps-informant-group .ps-informant-fields {
  width: 100%;
}

/* Quiet ghost "Invite" toggle that reveals the hidden add fields. */
.ps-informant-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
  color: var(--ps-accent);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ps-informant-toggle:hover {
  border-color: var(--ps-accent);
  background: var(--ps-surface-soft);
}

.ps-informant-description {
  color: var(--ps-text-dim);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

.ps-informant-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-green);
  white-space: nowrap;
}

/* Small "time ago" / "X of Y answered" line beneath an assigned informant's
   name. Quieter than the name so the row still leads with who is helping. */
.ps-informant-progress {
  font-size: 12px;
  color: var(--ps-text-dim);
  margin-top: 2px;
}

/* Progress badge on an assigned informant row. Tone tracks the backend
   progress_status: invited (neutral), in progress (amber), completed (green). */
.ps-informant-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
}

.ps-informant-status--invited {
  color: var(--ps-blue);
  background: var(--ps-blue-bg);
}

.ps-informant-status--active {
  color: var(--ps-amber);
  background: var(--ps-amber-bg);
}

.ps-informant-status--done {
  color: var(--ps-green);
  background: var(--ps-green-bg);
}

.ps-informant-lock {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-text-dim);
  white-space: nowrap;
}

.ps-informant-remove {
  border: none;
  background: transparent;
  color: var(--ps-text-dim);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 14px;
  flex: none;
}

.ps-informant-remove:hover {
  color: var(--ps-red);
  background: var(--ps-red-bg);
}

/* Patient "Send nudge" reminder button (issue #100) — a quiet pill that sits
   beside the per-person status badge for a not-started informant. */
.ps-informant-nudge {
  border: 1px solid var(--ps-border);
  background: transparent;
  color: var(--ps-text-dim);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ps-informant-nudge:hover:not(:disabled) {
  color: var(--ps-accent-text);
  border-color: var(--ps-accent);
  background: var(--ps-accent-dim);
}

.ps-informant-nudge:disabled {
  opacity: 0.6;
  cursor: default;
}

.ps-informant-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

/* Each input sits in its own column wrapper so the inline validation message
   (inserted directly after the input by field-validation.js) lands BENEATH its
   field instead of becoming a sibling flex item on the same row. */
.ps-informant-field {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ps-informant-field .ps-informant-input {
  flex: none;
  width: 100%;
}

/* An author `display: flex` overrides the bare `hidden` attribute, so the
   collapsed invite form must opt back out explicitly. Without this the fields
   stay visible and the row reads as cluttered. */
.ps-informant-fields[hidden] {
  display: none;
}

.ps-informant-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--ps-border);
  border-radius: 9px;
  background: var(--ps-surface);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ps-text);
}

.ps-informant-input:focus {
  outline: none;
  border-color: var(--ps-accent);
}

/* Quiet ghost CTA, matching the "Start evaluation" / "Provide evidence"
   buttons — a solid teal fill reads as heavy and busy in this optional row. */
/* Sending an informant invite is a real commitment (it emails a third party),
   so the button carries the solid app terracotta like the shell's other
   primaries rather than the tinted fill it used to share with quiet controls. */
.ps-informant-add {
  flex: none;
  border: 1px solid var(--ps-accent, #d06c52);
  border-radius: 9px;
  background: var(--ps-accent, #d06c52);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
}

.ps-informant-add:hover:not(:disabled) {
  background: #b9583f;
  border-color: #b9583f;
}

.ps-informant-add:disabled {
  opacity: 0.7;
  cursor: default;
}

/* One-click invite for a suggested existing related person, with a quieter
   "Someone else" toggle beside it for inviting a different person instead. */
.ps-informant-invite-suggested {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ps-informant-toggle--alt {
  font-size: 12px;
  color: var(--ps-text-dim);
}