/* ════════════════════════════════════════════════════════════════════
 * shell-settings.css — Patient-shell account-owner Settings redesign.
 *
 * The "People-First Hub" layout for the patient shell's own Settings
 * overlay (class ShellSettings). Everything here is SCOPED under
 * `#ps-settings-overlay` so it applies ONLY to the patient shell and never
 * to the shared in-Atlas AtlasSettings modal, which keeps using the base
 * atlas-settings.css primitives unchanged.
 *
 * The design: instead of one long undifferentiated scroll of profile fields
 * (which mixed account login data with clinical patient demographics and
 * buried the people the owner manages), Settings opens on a HUB — a flat
 * list of people (the owner + anyone they manage) plus a "Change password"
 * row. Each row drills into a single-purpose editor with exactly one Save.
 * This reuses the atlas-settings-* primitives (card, header, footer, inputs,
 * buttons, person rows) and only adds the hub/nav/sub-section chrome.
 * ════════════════════════════════════════════════════════════════════ */

/* A narrower sheet than the shared 1180px default: these are short, focused
   panes, so the wide card only created dead space. 760px still comfortably
   holds the City / ZIP / State two-column row. */
#ps-settings-overlay .atlas-settings-card {
  width: min(760px, calc(100vw - 28px));
}

/* ── Hub: a flat list of people, no nested cards ─────────────────────── */

/* Small left-aligned group heading used to label the hub's people list and
   the account section, replacing the old right-corner pseudo-tab labels. */
#ps-settings-overlay .shset-group-label {
  margin: 2px 0 6px;
  color: var(--atlas-text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#ps-settings-overlay .shset-group-label + .shset-group-help {
  margin: 0 0 10px;
  color: var(--atlas-text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* The list is a quiet bordered card: full-bleed dividers between rows and a
   soft surface tint. The earlier "flat hairlines on the bare sheet" treatment
   read unfinished — rounded hover corners clipped the hairlines into floating
   partial lines. */
#ps-settings-overlay .shset-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--atlas-surface-b);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* Each person / nav destination is a real full-width button (keyboard +
   screen-reader friendly). Square corners inside the card so the dividers
   span edge to edge. */
#ps-settings-overlay .shset-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid var(--atlas-surface-b);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.14s ease;
}

#ps-settings-overlay .shset-list .shset-row:first-child {
  border-top: none;
}

#ps-settings-overlay .shset-row:hover {
  background: color-mix(in srgb, var(--atlas-accent) 5%, transparent);
}

#ps-settings-overlay .shset-row:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--atlas-accent) 7%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--atlas-accent) 40%, transparent) inset;
}

/* Round initial avatar — accent TINT, never the strong fill (clay is spent
   only on the one Save button per view). */
#ps-settings-overlay .shset-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--atlas-accent) 14%, var(--atlas-bg));
  color: var(--atlas-accent-text);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* The nav rows (Change password, Raw inputs) use a square glyph chip instead
   of an initial avatar, in neutral ink so they read as settings, not people. */
#ps-settings-overlay .shset-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--atlas-surface);
  border: 1px solid var(--atlas-surface-b);
  color: var(--atlas-text-soft);
  font-size: 13px;
  flex: 0 0 auto;
}

#ps-settings-overlay .shset-row-main {
  min-width: 0;
}

#ps-settings-overlay .shset-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--atlas-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* Full name beside the preferred one: "Bob (Test Child 17)". The preferred name
   leads at full weight; the legal name is a quiet qualifier that identifies the
   person without competing with what we actually call them. Only rendered when
   it differs from the preferred name (see `_personLabel`). */
#ps-settings-overlay .shset-row-alias {
  color: var(--atlas-text-dim);
  font-weight: 400;
  /* min-width:0 + ellipsis: a long legal name must not push the "You" chip out
     of the row on a narrow overlay. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "You" chip on the owner's own row — accent tint, not a fill. */
#ps-settings-overlay .shset-you-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--atlas-accent-text);
  background: color-mix(in srgb, var(--atlas-accent) 13%, transparent);
  padding: 1px 7px;
  border-radius: 999px;
}

#ps-settings-overlay .shset-row-sub {
  margin-top: 2px;
  color: var(--atlas-text-soft);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Honest "this field is blank" nudge (e.g. "Add date of birth"). A shape +
   neutral tone, never an error color — real errors stay clay/red. */
#ps-settings-overlay .shset-nudge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--atlas-text-soft);
  font-size: 11.5px;
  font-weight: 600;
}

#ps-settings-overlay .shset-nudge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--atlas-accent) 55%, var(--atlas-surface-b));
  flex: 0 0 auto;
}

#ps-settings-overlay .shset-chevron {
  color: var(--atlas-text-dim);
  font-size: 13px;
  flex: 0 0 auto;
}

/* ── Editor / Security panes ─────────────────────────────────────────── */

/* Sub-section heading inside an editor ("Account & contact", "Clinical
   details", "People & informants", "Password") — real left-aligned headings
   that carry the grouping the old corner tags only pretended to. */
#ps-settings-overlay .shset-subsection + .shset-subsection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--atlas-surface-b);
}

#ps-settings-overlay .shset-subhead {
  margin: 0 0 2px;
  color: var(--atlas-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* One-line honest intro under a sub-heading (used to explain WHY the clinical
   demographics live here). Neutral, not alarming. */
#ps-settings-overlay .shset-subintro {
  margin: 0 0 14px;
  max-width: 62ch;
  color: var(--atlas-text-soft);
  font-size: 12px;
  line-height: 1.5;
}

/* Outlined "Recommended" pill for a blank booking-critical field — a shape
   cue (border, no fill) so colorblind users aren't relying on hue, and so it
   never looks like a validation error. */
#ps-settings-overlay .shset-rec {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--atlas-accent) 45%, var(--atlas-surface-b));
  border-radius: 999px;
  color: var(--atlas-accent-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Read-only note with a lock glyph — states "read-only" in words + shape, not
   just color, next to a managed person's non-editable email. */
#ps-settings-overlay .shset-locknote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--atlas-text-dim);
  font-size: 11px;
  line-height: 1.4;
}

#ps-settings-overlay .shset-locknote i {
  margin-top: 1px;
  font-size: 10px;
}

/* Read-only email input: muted so it clearly can't be typed into. */
#ps-settings-overlay .atlas-settings-input--readonly {
  background: var(--atlas-surface);
  color: var(--atlas-text-soft);
  cursor: default;
}

/* Neutralize the helper-text color for the shell only. The base rule tints
   hints with the clay accent, which read as inline ERRORS; guidance should be
   quiet. FieldValidation keeps its own distinct error styling. */
#ps-settings-overlay .atlas-settings-hint {
  color: var(--atlas-text-dim);
}

/* "(optional)" marker inside a field label. The class was already worn by the
   Phone label (and now Email) but had no rule anywhere, so it rendered at full
   label weight and read as part of the field name. Quiet it: lighter, smaller,
   dim — a qualifier, not a second label. */
#ps-settings-overlay .atlas-settings-optional {
  font-weight: 400;
  font-size: 11px;
  color: var(--atlas-text-dim);
}

/* Managed-person email: a read-only VIEW row with an explicit Add/Edit button,
   never a live input. Giving someone an email mails them a sign-in link, so it
   must be a deliberate act rather than a box you can drift into. Sized to sit
   in the same rhythm as the real inputs beside it. */
#ps-settings-overlay .shset-emailview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--atlas-surface-b);
  border-radius: 10px;
  background: var(--atlas-surface);
}

#ps-settings-overlay .shset-emailview-value {
  flex: 1;
  min-width: 0;
  color: var(--atlas-text);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ps-settings-overlay .shset-emailview-none {
  flex: 1;
  color: var(--atlas-text-dim);
  font-size: 13.5px;
}

/* Quiet icon button; accent ink, no fill (clay is spent on the one Save). */
#ps-settings-overlay .shset-emailbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--atlas-surface-b);
  border-radius: 8px;
  background: #fff;
  color: var(--atlas-accent-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}

#ps-settings-overlay .shset-emailbtn:hover {
  border-color: color-mix(in srgb, var(--atlas-accent) 45%, var(--atlas-surface-b));
  background: color-mix(in srgb, var(--atlas-accent) 6%, #fff);
}

#ps-settings-overlay .shset-emailbtn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--atlas-accent) 60%, transparent);
  outline-offset: 1px;
}

/* The pencil is icon-only, so keep it square rather than pill-shaped. */
#ps-settings-overlay .shset-emailbtn:not(.shset-emailbtn--add) {
  padding: 6px 9px;
}

#ps-settings-overlay .shset-emailedit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

#ps-settings-overlay .shset-emaillink {
  border: 0;
  background: transparent;
  color: var(--atlas-text-soft);
  font: inherit;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
}

#ps-settings-overlay .shset-emaillink:hover {
  color: var(--atlas-text);
}

/* Confirm dialog nested inside the settings sheet (e.g. before emailing a
   MINOR a passwordless sign-in link). It must sit ABOVE the overlay it is
   rendered into (.atlas-settings-overlay is z-index 70), hence 80. */
.shset-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: safe center;
  padding: 24px;
}

.shset-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 35, 0.5);
}

.shset-confirm {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.shset-confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--atlas-text);
}

.shset-confirm-body {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--atlas-text-soft);
  overflow-wrap: anywhere;
}

.shset-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── The single strong action: a filled clay Save, one per view ──────── */
#ps-settings-overlay .atlas-settings-btn--primary {
  background: var(--atlas-accent);
  border-color: var(--atlas-accent);
  color: #fff;
}

#ps-settings-overlay .atlas-settings-btn--primary:hover {
  background: color-mix(in srgb, var(--atlas-accent) 88%, #000);
  border-color: color-mix(in srgb, var(--atlas-accent) 88%, #000);
  color: #fff;
}

/* ── Footer: quiet ghost sign-out at the left, primary/Done at the right ─ */

/* Sign out is routine, not destructive — it must NOT wear the clinical
   severity-red the old danger button borrowed. A calm ghost text+icon button,
   the least prominent actionable thing on screen. */
#ps-settings-overlay .shset-signout {
  min-width: 0;
  gap: 8px;
  background: transparent;
  border-color: transparent;
  color: var(--atlas-text-soft);
}

#ps-settings-overlay .shset-signout:hover {
  background: var(--atlas-surface);
  border-color: var(--atlas-surface-b);
  color: var(--atlas-text);
}

/* ── Responsive: single column, near full-bleed sheet ────────────────── */
@media (max-width: 760px) {
  #ps-settings-overlay .shset-row {
    padding: 12px 2px;
  }

  #ps-settings-overlay .shset-row-sub {
    white-space: normal;
  }
}