/**
 * 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
 * full-page inline PDF viewer for finalized reports.
 */

: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;

  /* 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;
}

.ps-header {
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
}

.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: 8px;
}

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

.ps-header-brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.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: 10px;
}

/* -- 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. */
.ps-password-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(38, 70, 83, 0.55);
  backdrop-filter: blur(3px);
}
.ps-password-gate-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 26px 22px;
  border-radius: 20px;
  background: var(--ps-surface);
  box-shadow: 0 18px 50px rgba(38, 70, 83, 0.28);
}
.ps-password-gate-icon {
  font-size: 26px;
  color: var(--ps-accent);
}
.ps-password-gate-title {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ps-text);
}
.ps-password-gate-copy {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ps-text-soft);
}
.ps-password-gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.ps-password-gate-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ps-text-soft);
}
.ps-password-gate-input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(38, 70, 83, 0.18);
  font-size: 14px;
  color: var(--ps-text);
}
.ps-password-gate-input:focus {
  outline: none;
  border-color: var(--ps-accent);
}
.ps-password-gate-error {
  margin: 0;
  font-size: 12.5px;
  color: var(--ps-red);
}
.ps-password-gate-submit {
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--ps-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ps-password-gate-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.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;
}

.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;
  align-items: center;
  justify-content: center;
  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);
}

.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;
}

.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;
}

/* 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;
}

.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;
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ps-text);
}

/* Low-weight inline empty notice — one muted line, no card chrome. Used for
   genuinely-empty stage states (see PatientStageView.quietNotice). */
.ps-stage-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--ps-text-dim);
  font-size: 13.5px;
  line-height: 1.4;
}

.ps-stage-empty i {
  font-size: 13px;
  opacity: 0.75;
}

/* The four stages as one quiet line, not a numbered wizard strip. */
.ps-apply-flow {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ps-text-soft);
  letter-spacing: 0.01em;
}

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

.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;
  grid-template-columns: repeat(5, 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;
}

.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);
}

.ps-stage-tab--available .ps-stage-tab-index {
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
}

.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-text); }

.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;
}

.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,
.ps-stage-body .bsp-btn--primary,
.ps-stage-body .acp-cta--primary {
  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),
.ps-stage-body .bsp-btn--primary:hover:not(:disabled),
.ps-stage-body .acp-cta--primary:hover {
  background: rgba(208, 108, 82, 0.15);
  border-color: rgba(208, 108, 82, 0.26);
}

/* Pending-evidence CTA inside a stage body — soft red, flat to match the
   toned-down stage-body chrome (no large drop shadow). */
.ps-stage-body .acp-cta--attention {
  border: 1px solid #f0b9b2;
  border-radius: 8px;
  background: #fdeceb;
  color: #b23b30;
  box-shadow: none;
}

.ps-stage-body .acp-cta--attention:hover {
  background: #fbdcd8;
  border-color: #e8a59c;
}

.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-pdf-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--ps-surface);
}

.ps-pdf-viewer-head {
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ps-border);
}

.ps-pdf-viewer-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-pdf-viewer-title span {
  color: var(--ps-text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ps-pdf-viewer-title strong {
  overflow: hidden;
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-pdf-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.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;
  }

  .ps-stage-tabs {
    grid-template-columns: 1fr;
  }

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

  .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;
  }

  .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--done {
  display: flex;
  align-items: center;
  gap: 12px;
}

.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);
}

/* 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);
}

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

/* 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. */
.ps-informant-add {
  flex: none;
  border: 1px solid rgba(208, 108, 82, 0.18);
  border-radius: 9px;
  background: var(--ps-accent-dim);
  color: var(--ps-accent-text);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
}

.ps-informant-add:hover:not(:disabled) {
  background: rgba(208, 108, 82, 0.15);
  border-color: rgba(208, 108, 82, 0.26);
}

.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);
}