/* ============================================================
   LA VIA MISSIONS — Admin dashboard
   Uses tokens.css for color/type. Layout = sidebar + main pane.
   ============================================================ */

body { background: var(--canvas); color: var(--ink); }

.admin {
  display: flex;
  min-height: 100vh;
  /* The shell itself is navy: the rail's height is a vh calculation that
     browsers resolve differently under `zoom` (Safari came up short on the
     owner's laptop), so whatever the rail does not cover stays navy, never white. */
  background: var(--navy-900);
}
.admin__main { flex: 1; background: var(--canvas); min-height: 100vh; }

/* ---- Sidebar ----
   Collapsible rail, pattern borrowed from the SLS dashboard (216→84px there):
   expanded 240px / collapsed 84px, ONLY the width animates (200ms ease-out),
   and the two layouts (icon-beside-label vs icon-over-label) swap at the
   flip — no label fade, no morph. Collapsed KEEPS the labels (10.5px under
   the icon), so there are no tooltips to repeat them. State persists in
   localStorage ('lavia-admin-rail'); default expanded. */
.admin__sidebar {
  --rail-w: 240px;
  width: var(--rail-w);
  flex: none;
  background: var(--navy-900);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  position: sticky;
  top: 0;
  /* vh inside the zoomed shell renders zoom× taller than the viewport —
     divide it back out so the rail (and its footer) always fits on screen. */
  height: calc(100vh / var(--admin-zoom, 1.1));
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 200ms ease-out;
}
.rail-collapsed .admin__sidebar { --rail-w: 84px; padding-left: 8px; padding-right: 8px; }
.admin__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 8px;
  padding: 0 10px;
}
.rail-collapsed .admin__brand { justify-content: center; padding: 0; }
.admin__brand svg { color: #fff; }
.admin__brand img { flex: none; }
.admin__brand span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rail-collapsed .admin__brand span { display: none; }
.admin__rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 10px 14px auto;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  padding-bottom: 3px;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.admin__rail-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }
.rail-collapsed .admin__rail-toggle { margin: 0 auto 14px; }
.admin__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: auto;
}
.admin__nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 150ms ease-out, color 150ms ease-out;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
}
.admin__nav button svg { width: 17px; height: 17px; flex: none; }
.rail-collapsed .admin__nav button {
  flex-direction: column;
  gap: 5px;
  padding: 9px 2px 8px;
  font-size: 10.5px;
  line-height: 13px;
  text-align: center;
  white-space: normal;
}
.rail-collapsed .admin__nav button svg { width: 18px; height: 18px; }
.admin__nav button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin__nav button.is-active {
  background: rgba(255,255,255,0.10);
  color: #fff;
  box-shadow: inset 3px 0 0 #fff;
}
/* ---- Bulk email composer (Signups) ---- */
.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-bottom: 26px;
}
@media (max-width: 1100px) { .composer { grid-template-columns: 1fr; } }
.composer__label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.composer__label select, .composer__label input {
  display: block; width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-sm);
  padding: 9px 11px; margin-top: 5px; background: var(--paper); box-sizing: border-box;
}
.composer__toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  border: 1.5px solid var(--hairline-strong); border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--canvas); padding: 6px 8px; margin-top: 14px;
}
.composer__toolbar button {
  min-width: 30px; height: 28px; padding: 0 7px; border-radius: 5px;
  font-family: inherit; font-size: 13px; color: var(--ink-2);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.composer__toolbar button:hover { background: var(--canvas-3); color: var(--ink); }
.composer__toolbar .sep { width: 1px; height: 18px; background: var(--hairline-strong); margin: 0 6px; }
.composer__editor {
  min-height: 280px; max-height: 480px; overflow-y: auto;
  border: 1.5px solid var(--hairline-strong); border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 16px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); outline: none;
}
.composer__editor:focus { border-color: var(--navy-700); }
.composer__editor:empty::before { content: attr(data-placeholder); color: var(--ink-4); pointer-events: none; }
.composer__editor h2 { font-family: var(--font-display); color: var(--navy-800); font-size: 22px; margin: 14px 0 8px; }
.composer__editor blockquote { border-left: 3px solid var(--canvas-3); margin: 10px 0; padding: 4px 14px; color: var(--ink-3); }
.composer__editor a { color: var(--navy-700); }
.composer__editor img { max-width: 100%; height: auto; border-radius: 8px; }
.composer__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.composer__attachments:empty { display: none; }
.composer__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--canvas-2); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); max-width: 100%;
}
.composer__chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.composer__chip .sz { color: var(--ink-4); flex: none; }
.composer__chip button { color: var(--ink-3); font-size: 14px; line-height: 1; padding: 0 2px; flex: none; }
.composer__chip button:hover { color: #b03a3a; }
.composer__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.composer__status { margin-right: auto; font-size: 13px; color: var(--ink-3); }
.composer__preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.composer__preview-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.composer__preview iframe {
  width: 100%; height: 560px; border: 1.5px solid var(--hairline); border-radius: var(--r-sm); background: #f2f4f9;
}

/* Sub-surfaces under an active nav item (SLS pattern): indented rows with a
   dot, visible only while the section is active AND the rail is expanded. */
.admin__subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; }
.admin__subnav[hidden] { display: none; }
.rail-collapsed .admin__subnav { display: none; }
.admin__subnav button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 4px 14px 4px 42px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  font-family: inherit;
  font-weight: 500;
  transition: color 150ms ease-out;
  white-space: nowrap;
}
.admin__subnav button .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }
.admin__subnav button:hover { color: #fff; }
.admin__subnav button.is-active { color: #fff; font-weight: 600; }

/* internal.html renders the same rail with <a> rows */
.admin__nav a.admin__navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 150ms ease-out, color 150ms ease-out;
  white-space: nowrap;
}
.admin__nav a.admin__navlink svg { width: 17px; height: 17px; flex: none; }
.admin__nav a.admin__navlink:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin__nav a.admin__navlink.is-active { background: rgba(255,255,255,0.10); color: #fff; box-shadow: inset 3px 0 0 #fff; }
.rail-collapsed .admin__nav a.admin__navlink {
  flex-direction: column;
  gap: 5px;
  padding: 9px 2px 8px;
  font-size: 10.5px;
  line-height: 13px;
  text-align: center;
  white-space: normal;
}
.rail-collapsed .admin__nav a.admin__navlink svg { width: 18px; height: 18px; }
.admin__sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
}
/* Collapsed hides the rare footer actions — expand to reach them. An
   icon-only "Reset all data" would be a picture with a blast radius. */
.rail-collapsed .admin__sidebar-footer { visibility: hidden; }
.admin__view {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 8px 6px;
}
.admin__view:hover { color: #fff; }
.admin__change-pw {
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  padding: 6px;
  font-family: inherit;
  text-align: left;
}
.admin__change-pw:hover { color: #fff; }
.admin__reset {
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  padding: 6px;
  font-family: inherit;
  text-align: left;
}
.admin__reset:hover { color: rgba(255,200,200,0.95); }

/* ---- Main pane ---- */
.admin__main {
  padding: 32px clamp(20px, 4vw, 48px) 80px;
  min-width: 0;
}
.admin__section { display: none; }
.admin__section.is-active { display: block; }
.admin__section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin__section h1 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.admin__section header p.sub {
  color: var(--ink-3);
  font-size: 14px;
  margin: 6px 0 0;
}
.admin__section > p {
  color: var(--ink-3);
  margin-bottom: 16px;
}

/* ---- Stat tiles ---- */
.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.admin-stat {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.admin-stat .num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1;
}
.admin-stat .lbl {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ---- List items ---- */
.admin__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-item {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px 12px 12px;
  transition: box-shadow .15s;
}
.admin-item:hover { box-shadow: 0 6px 18px rgba(20,36,80,0.08), 0 0 0 1px var(--hairline); }
.admin-item__photo {
  width: 80px;
  height: 80px;
  border-radius: var(--r-sm);
  background: var(--canvas-3) center/cover no-repeat;
  flex: none;
}
.admin-item__photo--blank {
  background: var(--canvas-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-500);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-item__body { min-width: 0; }
.admin-item__body h3 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}
.admin-item__body .meta {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.admin-item__body .meta .pill {
  background: var(--canvas-2);
  color: var(--navy-800);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-item__actions {
  position: relative;
  display: flex;
  gap: 6px;
  flex: none;
}
.admin-item__actions button {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--canvas-2);
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.admin-item__actions button:hover { background: var(--navy-800); color: #fff; }
.admin-item__actions .danger:hover { background: #b03a3a; color: #fff; }

/* ---- Actions dropdown menu (patient rows) ---- */
.actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 210px;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(20,36,80,0.18), 0 0 0 1px var(--hairline);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}
.actions-menu[hidden] { display: none; }
.actions-menu:not([hidden]) { display: flex; }
.actions-menu button,
.actions-menu__label {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.actions-menu button:hover { background: var(--canvas-2); color: var(--navy-900); }
/* Flip upward when there is no room below (set by JS on open). */
.actions-menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}
.actions-menu__label {
  color: var(--ink-3);
  cursor: default;
}
.actions-menu .actions-menu__danger { color: #b03a3a; }
.actions-menu .actions-menu__danger:hover { background: #b03a3a; color: #fff; }

/* ---- "Featured on home" badge next to the patient name ---- */
.pill--featured {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  background: var(--navy-800);
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.admin-empty {
  background: var(--paper);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 36px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

/* ---- Invite copy-link fallback (shown when the invite email can't be sent) ---- */
.admin-invite-banner {
  position: relative;
  background: var(--canvas-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 16px 44px 16px 16px;
  margin-bottom: 14px;
}
.admin-invite-banner[hidden] { display: none; }
.admin-invite-banner p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.admin-invite-banner__row {
  display: flex;
  gap: 8px;
}
.admin-invite-banner__row input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.admin-invite-banner__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}
.admin-invite-banner__close:hover { color: var(--navy-800); }

/* ---- Settings form ---- */
.admin-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 720px;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}
.admin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.admin-form input,
.admin-form select,
.admin-form textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.admin-form textarea { resize: vertical; min-height: 80px; }
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-form__footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
.admin-form__msg {
  color: var(--success);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
  align-self: center;
  margin-right: auto;
  opacity: 0;
  transition: opacity .2s;
}
.admin-form__msg.is-shown { opacity: 1; }

/* ---- FAQ editor (repeatable rows inside the settings form) ---- */
.faq-editor { display: flex; flex-direction: column; gap: 14px; }
.faq-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--canvas);
}
.faq-row__fields { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.faq-row__fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.faq-row__fields input,
.faq-row__fields textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.faq-row__fields textarea { resize: vertical; min-height: 64px; }
.faq-row__remove {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.faq-row__remove:hover { background: #b03a3a; border-color: #b03a3a; color: #fff; }

/* ---- Dialog ---- */
dialog.admin-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(920px, 94vw);
  max-height: 90vh;
}
dialog.admin-dialog::backdrop {
  background: rgba(15, 30, 80, 0.55);
  backdrop-filter: blur(2px);
}
.admin-dialog__inner {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(20,36,80,0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  min-height: 0;
}
.admin-dialog__inner > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.admin-dialog__head { flex: none; }
.admin-dialog__foot { flex: none; }
.admin-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hairline);
}
.admin-dialog__head h2 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.admin-dialog__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--canvas-2);
  color: var(--ink-2);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-dialog__close:hover { background: var(--canvas-3); color: var(--ink); }
.admin-dialog__body {
  padding: 24px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.admin-dialog__body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.admin-dialog__body input,
.admin-dialog__body select,
.admin-dialog__body textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.admin-dialog__body textarea { resize: vertical; min-height: 80px; }
.admin-dialog__body input:focus,
.admin-dialog__body select:focus,
.admin-dialog__body textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-dialog__body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Inline notes / success / error messages inside a dialog ---- */
.admin-dialog__note {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.admin-dialog__msg {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  background: var(--canvas-2);
  color: var(--ink-2);
  word-break: break-word;
}
.admin-dialog__msg--err { background: rgba(196,68,51,0.1); color: #c43; }
.admin-dialog__msg--ok  { background: rgba(30,120,80,0.12); color: #1e7850; }
.admin-dialog__body .photo-preview {
  width: 120px;
  height: 150px; /* 4:5 portrait, matches the crop output */
  border-radius: var(--r-sm);
  background: var(--canvas-3) center/cover no-repeat;
  border: 1px solid var(--hairline);
  flex: none;
}

/* Photo upload + crop widget */
.photo-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.photo-widget__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.photo-widget__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.photo-widget__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.photo-widget__file {
  cursor: pointer;
  align-self: flex-start;
}
.photo-widget__file input[type="file"] { display: none; }
.photo-widget__file.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.photo-widget__msg {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  min-height: 14px;
}

/* Crop editor: fixed 4:5 viewport the image is dragged/zoomed within */
.photo-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas);
  max-width: 320px;
}
.photo-editor[hidden] { display: none; }
.photo-viewport {
  position: relative;
  width: 240px;
  height: 300px; /* 4:5 */
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--canvas-3);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.photo-viewport.is-grabbing { cursor: grabbing; }
.photo-viewport__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.photo-viewport__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  /* Rule-of-thirds grid so centering the subject is easy. */
  background-image:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,.45) calc(33.33% - 0.5px), rgba(255,255,255,.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(to right, transparent calc(66.66% - 0.5px), rgba(255,255,255,.45) calc(66.66% - 0.5px), rgba(255,255,255,.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,.45) calc(33.33% - 0.5px), rgba(255,255,255,.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.66% - 0.5px), rgba(255,255,255,.45) calc(66.66% - 0.5px), rgba(255,255,255,.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.photo-editor__tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.photo-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.photo-zoom input[type="range"] { flex: 1; margin: 0; }
.photo-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-dialog__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
}

/* ---- Patient dialog: labeled sections (photo/basics/story/about/costs/campaign) ---- */
.admin-dialog__body fieldset.dlg-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-dialog__body fieldset.dlg-section:not(:first-of-type) {
  /* Combined with .admin-dialog__body's own 14px grid gap, this yields the
     ~28px of breathing room between sections called for in the design. */
  margin-top: 14px;
}
.dlg-section__title {
  display: block;
  width: 100%;
  padding: 0 0 8px;
  margin: 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
}

/* ---- Form sections (collapsible) inside dialogs ---- */
.admin-dialog__body details.form-section {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0;
  margin: 0 0 14px;
  background: var(--paper);
}
.admin-dialog__body details.form-section[open] { padding-bottom: 14px; }
.admin-dialog__body details.form-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dialog__body details.form-section > summary::-webkit-details-marker { display: none; }
.admin-dialog__body details.form-section > summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 8px;
}
.admin-dialog__body details.form-section[open] > summary::after { content: "−"; }
.admin-dialog__body details.form-section > .form-section__body {
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Repeater rows (tiers, supporters) ---- */
.repeater {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.repeater__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--canvas-2);
  border-radius: var(--r-sm);
}
.repeater__row--supporter {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.7fr) auto;
}
.repeater__row input,
.repeater__row select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
}
.repeater__remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.repeater__remove:hover { background: rgba(220,80,80,0.12); color: #c43; }
.repeater__add {
  align-self: flex-start;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  color: var(--navy-700);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.repeater__add:hover { background: var(--canvas-2); }

/* ---- Login gate ---- */
.admin-login {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  z-index: 9999;
  padding: 24px;
}
.admin-login[hidden] { display: none; }
/* Brand lockup above the auth card (login gate + standalone auth pages) */
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth-brand img { width: 46px; height: auto; }
.auth-brand .name { font-family: var(--font-display); color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.auth-brand .tag { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 600; }
/* Field stack inside a card when fields live in a nested container */
.auth-fields { display: flex; flex-direction: column; gap: 16px; }
.auth-fields .btn { width: 100%; margin-top: 4px; }
.auth-hint { font-size: 12px; color: var(--ink-3); margin: -10px 0 0; }
.admin-login__card[hidden] { display: none; }
.admin-login__card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 36px 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-login__card h1 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}
.admin-login__card .sub {
  color: var(--ink-3);
  font-size: 13px;
  margin: 0 0 8px;
}
.admin-login__card label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-login__card input {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
  padding: 10px 14px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.admin-login__card input:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-login__card button {
  margin-top: 8px;
}
.admin-login__err {
  margin: 0;
  color: #c43;
  font-size: 13px;
  text-align: center;
}
.admin-login__forgot {
  margin: 0;
  font-size: 13px;
  text-align: center;
}
.admin-login__forgot a {
  color: var(--navy-700);
}

/* ---- Mobile ---- */
@media (max-width: 760px) {
  .admin { flex-direction: column; }
  /* The collapse is a desktop affordance; mobile always shows the full bar. */
  .admin__sidebar, .rail-collapsed .admin__sidebar { --rail-w: 100%; width: 100%; position: relative; height: auto; flex-direction: row; padding: 12px 14px; overflow-x: auto; flex-wrap: wrap; transition: none; }
  .rail-collapsed .admin__sidebar-footer { visibility: visible; }
  .admin__rail-toggle { display: none; }
  .rail-collapsed .admin__brand span { display: inline; }
  .rail-collapsed .admin__nav button { flex-direction: row; gap: 8px; padding: 10px 14px; font-size: 14px; line-height: normal; white-space: nowrap; }
  .admin__nav button svg, .rail-collapsed .admin__nav button svg { width: 15px; height: 15px; }
  .admin__brand { margin-bottom: 0; margin-right: 16px; flex: none; }
  .admin__nav { flex-direction: row; gap: 4px; flex: 1; flex-wrap: wrap; }
  .admin__sidebar-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: none;
    padding-top: 0;
    flex: none;
  }
  .admin__sidebar-footer .admin__reset { display: none; }
  .admin-item { grid-template-columns: 60px minmax(0, 1fr); }
  .admin-item__photo { width: 60px; height: 60px; }
  .admin-item__actions { grid-column: 1 / -1; }
  .admin-form .form-row { grid-template-columns: 1fr; }
  .admin-dialog__body .form-row { grid-template-columns: 1fr; }
  /* Grid items default to min-width: auto, so a single wide row (e.g. the
     Givebutter-slug field's inline flex row with its "Create in Givebutter"
     button) can force every stacked row in the shared column to its width,
     overflowing the dialog. Let rows shrink, and let that one inline row
     wrap instead of forcing the column wide. */
  .admin-form > *,
  .admin-dialog__body > *,
  .admin-form .form-row > *,
  .admin-dialog__body .form-row > * { min-width: 0; }
  .admin-form [style*="display:flex"],
  .admin-dialog__body [style*="display:flex"] { flex-wrap: wrap; }
}

/* Clickable patient rows: whole row opens the editor; Actions reveals on hover. */
.admin-item--clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.admin-item--clickable:hover { box-shadow: 0 8px 24px rgba(20,36,80,0.10), 0 0 0 1px var(--hairline-strong); }
.admin-item--clickable .admin-item__actions { opacity: 0; transition: opacity .15s; }
.admin-item--clickable:hover .admin-item__actions,
.admin-item--clickable:focus-within .admin-item__actions,
.admin-item--clickable .admin-item__actions:has(.actions-menu:not([hidden])) { opacity: 1; }
@media (hover: none) {
  /* Touch devices have no hover — keep Actions always visible. */
  .admin-item--clickable .admin-item__actions { opacity: 1; }
}

/* Money input: fixed "$" prefix; the field itself holds only the amount. */
.money-input { position: relative; display: block; }
.money-input__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
}
.money-input input { padding-left: 28px; width: 100%; }

/* ===== People & Projects — unified grouped list (D16, mockup 02) ========= */
.pp-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 18px 0 20px; }
.pp-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.pp-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-4); }
.pp-search input {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink-2);
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 9px 16px 9px 38px; background: var(--paper);
}
.pp-search input::placeholder { color: var(--ink-4); }
.pp-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-fchip {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer;
  border: 1.5px solid var(--hairline-strong); background: var(--paper); color: var(--ink-3);
  border-radius: var(--r-pill); padding: 6px 15px;
}
.pp-fchip.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pp-toolbar .pp-tally { margin-left: auto; font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }

.pp-group-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 10px; }
.pp-group-head:first-of-type { margin-top: 4px; }
.pp-group-head h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy-800); margin: 0; }
.pp-group-count { font-size: 12px; font-weight: 700; color: var(--navy-700); background: var(--canvas-2); border-radius: var(--r-pill); padding: 1px 9px; }
.pp-group-note { font-size: 12.5px; color: var(--ink-4); }

.pp-card { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 6px 22px; }
.pp-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pp-card th { text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; padding: 14px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
.pp-card td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--canvas-3); vertical-align: middle; }
.pp-card tr:last-child td { border-bottom: 0; }
.pp-card tbody tr:hover td { background: var(--canvas); }

.pp-subj { display: flex; align-items: center; gap: 14px; min-width: 230px; }
.pp-thumb {
  width: 46px; height: 56px; border-radius: var(--r-sm); flex: none; object-fit: cover; object-position: center;
  background: var(--canvas-3); box-shadow: 0 0 0 1px var(--hairline);
}
.pp-thumb--ph {
  display: flex; align-items: center; justify-content: center; color: var(--navy-400, #8aa1d4);
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
}
.pp-subj .nm { font-weight: 600; color: var(--navy-800); text-decoration: none; display: block; line-height: 1.3; cursor: pointer; }
.pp-subj .nm:hover { text-decoration: underline; }
.pp-subj .loc { color: var(--ink-3); font-size: 12.5px; }

.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-chip {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--canvas-2); color: var(--navy-700); white-space: nowrap;
}
.pp-chip--status { background: #f6efd8; color: #8a6d1e; }
.pp-chip--building { background: #e7f2ea; color: var(--success); }

.pp-pub { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.pp-pub .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pp-pub--on { color: var(--success); } .pp-pub--on .dot { background: var(--success); }
.pp-pub--off { color: var(--ink-4); } .pp-pub--off .dot { background: var(--ink-4); }

.pp-sig { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; white-space: nowrap; }
.pp-sig .links-on { color: var(--navy-700); font-weight: 600; }
.pp-sig .links-zero { color: var(--ink-4); }

.pp-card td.rowact { text-align: right; }
.pp-open-btn {
  display: inline-block; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--navy-800); border: 1.5px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 6px 16px; background: var(--paper);
  font-family: inherit;
}
.pp-open-btn:hover { border-color: var(--navy-800); background: var(--canvas-2); }

@media (max-width: 760px) { .pp-hide-sm { display: none; } }


/* Owner 2026-09-01: the whole admin reads ~10% larger. Zoom scales every
   px-based size proportionally (type, spacing, controls) without touching
   individual rules; dialogs and the login gate live outside .admin, so they
   scale too. */
.admin, dialog, .admin-login { zoom: var(--admin-zoom, 1.1); }
:root { --admin-zoom: 1.1; }

/* First paint: the server's auth flag picks the surface, so signed-out
   visitors never glimpse the dashboard while /api/whoami is in flight. */
html[data-auth="out"] .admin { display: none; }
html[data-auth="out"] #loginGate { display: flex !important; }

/* Language toggle (sidebar footer): a two-segment control, equal halves,
   the active one lifted in white. Same idiom as the portal's ES/EN switch. */
.admin__lang { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin: 0 0 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.admin__lang button { border: 0; border-radius: var(--r-pill); background: transparent; color: rgba(255,255,255,0.72); font-weight: 700; font-size: 11.5px; font-family: var(--font-body); letter-spacing: 0.1em; padding: 6px 0; cursor: pointer; transition: background .15s, color .15s; }
.admin__lang button:hover { color: #fff; background: rgba(255,255,255,0.08); }
.admin__lang button.is-on { background: #fff; color: var(--navy-800); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.admin__lang button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 900px) { .admin__lang { width: 104px; margin: 0 10px 0 0; } }