/* ==========================================================================
   Pawnda auth and onboarding pages: login, signup, onboarding-vet, onboarding-owner.
   Loaded after tokens.css and components.css. Violet on night: the brand panel
   sits on night with the night glow, the form sits on paper, and every value
   below comes from a --pd-* token. Rubik for display, Inter for reading.
   Capsules act (buttons, chips), rounded rectangles hold (inputs, cards).
   ========================================================================== */

/* Legacy names, re-pointed to the tokens so nothing that still reads them
   falls back to the old navy and blue palette. Retire once unused. */
:root {
  --navy: var(--pd-bg-night);
  --navy-2: var(--pd-bg-night);
  --blue: var(--pd-action-primary);
  --blue-dark: var(--pd-action-primary-hover);
  --blue-50: var(--pd-action-tint);
  --blue-100: var(--pd-brand-100);
  --violet: var(--pd-brand-600);
  --violet-50: var(--pd-brand-50);
  --violet-100: var(--pd-brand-100);
  --green: var(--pd-success-fg);
  --green-50: var(--pd-success-tint);
  --green-200: var(--pd-success-border);
  --amber: var(--pd-warning-text);
  --amber-50: var(--pd-warning-tint);
  --amber-200: var(--pd-warning-border);
  --red: var(--pd-danger-fg);
  --red-50: var(--pd-danger-tint);
  --red-200: var(--pd-danger-border);
  --ink: var(--pd-text-primary);
  --ink-2: var(--pd-text-secondary);
  --ink-3: var(--pd-text-tertiary);
  --ink-4: var(--pd-text-disabled);
  --line: var(--pd-border-default);
  --line-2: var(--pd-border-strong);
  --bg: var(--pd-bg-canvas);
  --r-sm: var(--pd-radius-sm);
  --r-md: var(--pd-radius-md);
  --r-lg: var(--pd-radius-lg);
  --shadow-sm: var(--pd-shadow-1);
  /* Focus for text fields: a 2px violet edge plus a soft halo (WCAG 1.4.11). */
  --ring: 0 0 0 1px var(--pd-brand-600), 0 0 0 4px rgba(114, 96, 226, 0.22);
  --ring-danger: 0 0 0 1px var(--pd-danger-fg), 0 0 0 4px rgba(227, 44, 85, 0.16);
  --font: var(--pd-font-text);
  --mono: var(--pd-font-mono);

  /* Glyphs drawn with CSS masks so they take the text color. */
  --auth-glyph-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --auth-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --auth-glyph-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body.auth-page {
  margin: 0;
  font: 400 15px / 1.55 var(--pd-font-text);
  color: var(--pd-text-primary);
  background: var(--pd-bg-canvas);
}
.hidden, [hidden] { display: none !important; }
.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; }
:where(h1, h2, h3) { margin: 0; color: var(--pd-text-primary); line-height: 1.2; }
:where(p) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--pd-text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pd-text-link-hover); }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-paw { width: 26px; height: 26px; flex: none; fill: currentColor; }

/* Links that sit inside a sentence: always underlined (WCAG 1.4.1). */
.auth-link {
  color: var(--pd-text-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: var(--pd-radius-xs);
  transition: color var(--pd-duration-fast) var(--pd-ease-standard), text-decoration-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.auth-link:hover { color: var(--pd-text-link-hover); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Shell: night brand panel beside a paper form column
   -------------------------------------------------------------------------- */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(400px, 2fr) minmax(0, 3fr);
  min-height: 100vh;
  min-height: 100svh;
}

.auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pd-space-10);
  padding: var(--pd-space-10) 56px var(--pd-space-8);
  /* The night glow token drawn in a square box, so it stays round on a tall panel. */
  background:
    var(--pd-night-glow) 0 0 / 1000px 1000px no-repeat,
    radial-gradient(60% 40% at 0% 100%, rgba(91, 77, 199, 0.16), transparent 70%),
    var(--pd-bg-night);
  color: var(--pd-text-on-night);
}
@media (min-width: 1024px) {
  /* The brand panel stays put while a long form scrolls beside it. */
  .auth-brand { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; }
}
.auth-brand :focus-visible { outline-color: var(--pd-brand-300); }
.auth-brand-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-4); }
.auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: none;
  font: 700 24px / 1 var(--pd-font-display);
  letter-spacing: -0.02em;
  border-radius: var(--pd-radius-sm);
}
.auth-lockup .brand-paw { color: var(--pd-brand-400); }
/* Phones and tablets: the switch link rides in the night band (see responsive). */
.auth-brand-alt {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(234, 232, 247, 0.28);
  border-radius: var(--pd-radius-full);
  color: var(--pd-text-on-night);
  font: 600 14px / 1 var(--pd-font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), border-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.auth-brand-alt:hover { color: #FFFFFF; background: rgba(234, 232, 247, 0.08); border-color: rgba(234, 232, 247, 0.44); }
.auth-brand-alt:active { background: rgba(234, 232, 247, 0.12); }

.auth-brand-body { position: relative; z-index: 1; max-width: 31rem; }
.auth-overline {
  margin-bottom: var(--pd-space-4);
  font: var(--pd-type-mk-overline);
  letter-spacing: var(--pd-tracking-overline-mk);
  text-transform: uppercase;
  color: var(--pd-brand-300);
}
.auth-brand h2 {
  margin-bottom: var(--pd-space-4);
  font: 700 clamp(32px, 2.2vw + 10px, 42px) / 1.08 var(--pd-font-display);
  letter-spacing: var(--pd-tracking-display);
  color: #FFFFFF;
  text-wrap: balance;
}
.auth-brand-body > p { max-width: 28rem; font-size: 16px; line-height: 26px; color: var(--pd-text-on-night-secondary); text-wrap: pretty; }
.auth-trust { display: flex; flex-direction: column; gap: 14px; margin-top: var(--pd-space-8); }
.auth-trust li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 24px; color: var(--pd-text-on-night); }
.auth-trust-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(139, 124, 240, 0.18);
  color: var(--pd-brand-300);
}
.auth-trust-ico .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.auth-brand-foot { position: relative; z-index: 1; font-size: 13px; line-height: 20px; color: var(--pd-text-on-night-tertiary); }
.auth-brand-foot a { color: var(--pd-text-on-night-secondary); text-decoration: underline; text-decoration-color: rgba(185, 182, 203, 0.5); }
.auth-brand-foot a:hover { color: #FFFFFF; text-decoration-color: currentColor; }
.auth-brand-motif {
  position: absolute;
  right: -140px;
  bottom: -160px;
  z-index: 0;
  width: 480px;
  height: 480px;
  opacity: 0.08;
  pointer-events: none;
}

.auth-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pd-space-6) var(--pd-space-12) 28px;
  background: var(--pd-bg-canvas);
}
.auth-topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--pd-space-4); min-height: 44px; }
.auth-topbar-alt { font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); text-align: right; }
.auth-topbar-alt .auth-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
.auth-signed-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--pd-space-3);
  margin-left: auto;
  font-size: 13px;
  line-height: 20px;
  color: var(--pd-text-tertiary);
  text-align: right;
}
.auth-signed-in strong { color: var(--pd-text-primary); font-weight: 600; }
.auth-signed-in .link-button { font-size: 13px; }
.auth-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pd-space-10) 0; }
.auth-stack { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--pd-space-8); container-type: inline-size; }
.auth-stack-wide { width: min(760px, 100%); }
.auth-stack-onb { width: min(720px, 100%); }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-size: 13px; line-height: 20px; color: var(--pd-text-tertiary); }
.auth-foot a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--pd-text-tertiary); text-decoration: none; border-radius: var(--pd-radius-xs); }
.auth-foot a:hover { color: var(--pd-text-primary); text-decoration: underline; }
/* Website version: quiet by color, never by opacity (contrast stays 4.5:1). */
.auth-foot .site-version { color: var(--pd-text-tertiary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   Progress: Account, Verify email (only when the server asks for it), Profile.
   Numbers come from a counter, so a skipped step renumbers the rest.
   -------------------------------------------------------------------------- */
.auth-steps { display: flex; align-items: center; counter-reset: pd-step; }
.auth-step { display: flex; align-items: center; gap: 10px; font: 600 13px / 18px var(--pd-font-text); color: var(--pd-text-tertiary); white-space: nowrap; counter-increment: pd-step; }
.auth-step + .auth-step::before { content: ""; flex: 0 0 auto; width: clamp(12px, 2.6vw, 40px); height: 1px; margin: 0 12px 0 2px; background: var(--pd-border-strong); }
.auth-step.is-skipped { display: none; }
.auth-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--pd-border-strong);
  background: var(--pd-bg-surface);
  color: var(--pd-text-tertiary);
  font: 600 13px / 1 var(--pd-font-text);
  font-variant-numeric: tabular-nums;
}
.auth-step-n::before { content: counter(pd-step); }
.auth-step-num .icon { display: none; width: 14px; height: 14px; stroke-width: 2.75; }
.auth-step-label { display: flex; flex-direction: column; line-height: 1.2; }
.auth-step.is-active { color: var(--pd-text-primary); }
.auth-step.is-active .auth-step-num { background: var(--pd-action-primary); border-color: var(--pd-action-primary); color: var(--pd-text-on-brand); }
.auth-step.is-done .auth-step-num { background: var(--pd-action-tint); border-color: var(--pd-brand-200); color: var(--pd-brand-600); }
.auth-step.is-done .auth-step-num .icon { display: block; }
.auth-step.is-done .auth-step-num .auth-step-n { display: none; }

/* --------------------------------------------------------------------------
   Headings and forms
   -------------------------------------------------------------------------- */
.auth-card { width: 100%; }
.auth-head { margin-bottom: 28px; }
.auth-head h1 { margin-bottom: 8px; font: 700 32px / 40px var(--pd-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.auth-head p { font-size: 15px; line-height: 24px; color: var(--pd-text-secondary); text-wrap: pretty; }
/* Headings take focus only from script (tabindex="-1"), to move a screen reader's place; no ring. */
.auth-head h1[tabindex="-1"]:focus { outline: none; }
.auth-head-row { display: flex; align-items: center; gap: var(--pd-space-3); margin-bottom: var(--pd-space-4); }
.auth-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 8px;
  border-radius: var(--pd-radius-full);
  border: 1px solid var(--pd-brand-200);
  background: var(--pd-action-tint);
  color: var(--pd-action-tint-text);
  font: 600 13px / 1 var(--pd-font-text);
}
.auth-role-chip .icon { width: 16px; height: 16px; }

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-space-3); }
.field-label { font: 600 13px / 18px var(--pd-font-text); color: var(--pd-text-secondary); }
.field-optional { font-weight: 400; color: var(--pd-text-tertiary); }
.field-hint { font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }

.input {
  width: 100%;
  height: var(--pd-size-control-lg);
  padding: 0 16px;
  border: 1px solid var(--pd-border-input);
  border-radius: var(--pd-radius-md);
  background: var(--pd-bg-surface);
  color: var(--pd-text-primary);
  font: 400 16px / 24px var(--pd-font-text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard);
}
.input::placeholder { color: var(--pd-text-tertiary); opacity: 1; }
.input:hover { border-color: var(--pd-text-tertiary); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--pd-brand-600); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--pd-danger-fg); }
.input[aria-invalid="true"]:focus { border-color: var(--pd-danger-fg); box-shadow: var(--ring-danger); }
.input:disabled { background: var(--pd-bg-sunken); color: var(--pd-text-disabled); border-color: var(--pd-border-subtle); }
select.input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23686678' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 84px; }
.input-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 36px;
  min-width: 64px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--pd-radius-full);
  background: transparent;
  color: var(--pd-text-secondary);
  font: 600 13px / 1 var(--pd-font-text);
  cursor: pointer;
  transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), color var(--pd-duration-fast) var(--pd-ease-standard);
}
.input-toggle:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.input-toggle:active { background: var(--pd-fill-pressed); }

/* Field messages: glyph plus words. Field errors are tied to their input with
   aria-describedby; only the form-level lines below are live regions. */
.field-error, .field-success { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; }
.field-error { color: var(--pd-danger-text); }
.field-success { color: var(--pd-success-text); }
.field-error::before, .field-success::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--auth-glyph-alert) center / contain no-repeat;
  mask: var(--auth-glyph-alert) center / contain no-repeat;
}
.field-success::before { -webkit-mask-image: var(--auth-glyph-check-circle); mask-image: var(--auth-glyph-check-circle); }
.field-error:empty, .field-success:empty { display: none; }
/* Live regions stay in the accessibility tree while empty (they must exist
   before text arrives to be announced); the negative margin cancels the gap. */
.field-error[role]:empty, .field-success[role]:empty { display: block; margin-top: -6px; }

.form-error, .form-success { border-radius: var(--pd-radius-md); font-size: 14px; line-height: 20px; }
.form-error:not(:empty), .form-success:not(:empty) { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.form-error:not(:empty) { background: var(--pd-danger-tint); border: 1px solid var(--pd-danger-border); color: var(--pd-danger-text); }
.form-success:not(:empty) { background: var(--pd-success-tint); border: 1px solid var(--pd-success-border); color: var(--pd-success-text); }
.form-error:not(:empty)::before, .form-success:not(:empty)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--auth-glyph-alert) center / contain no-repeat;
  mask: var(--auth-glyph-alert) center / contain no-repeat;
}
.form-success:not(:empty)::before { -webkit-mask-image: var(--auth-glyph-check-circle); mask-image: var(--auth-glyph-check-circle); }
.form > .form-error:empty, .form > .form-success:empty, .form > .sr-only { margin-top: -20px; }

.pw-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 4px; }
.pw-rules li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); transition: color var(--pd-duration-fast) var(--pd-ease-standard); }
.pw-rules li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--pd-border-strong);
  background: var(--pd-bg-surface);
  transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), border-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.pw-rules li.is-met { color: var(--pd-success-text); }
.pw-rules li.is-met::before {
  border-color: var(--pd-success-fg);
  background: var(--pd-success-fg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / 10px no-repeat;
}

/* --------------------------------------------------------------------------
   Buttons: capsules. Rest, hover, pressed, focus (global ring), disabled
   (tokens, never opacity) and loading (label stays, spinner leads).
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--pd-size-control-lg);
  padding: 0 var(--pd-space-5);
  border: 1px solid transparent;
  border-radius: var(--pd-radius-full);
  font: 600 16px / 20px var(--pd-font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pd-duration-fast) var(--pd-ease-standard),
              border-color var(--pd-duration-fast) var(--pd-ease-standard),
              color var(--pd-duration-fast) var(--pd-ease-standard),
              box-shadow var(--pd-duration-fast) var(--pd-ease-standard),
              transform var(--pd-duration-instant) var(--pd-ease-standard);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-primary { background: var(--pd-action-primary); color: var(--pd-text-on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--pd-action-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--pd-action-primary-pressed); }
.btn-ghost { background: var(--pd-bg-surface); color: var(--pd-text-primary); border-color: var(--pd-border-strong); }
.btn-ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 999px var(--pd-fill-hover); }
.btn-ghost:active:not(:disabled) { box-shadow: inset 0 0 0 999px var(--pd-fill-pressed); }
.btn:disabled { background: var(--pd-action-disabled-bg); color: var(--pd-action-disabled-text); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn .spinner { display: none; flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: auth-spin 0.7s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
/* A busy button keeps its color: it is working, not unavailable. */
.btn-primary.is-loading:disabled { background: var(--pd-action-primary-hover); color: var(--pd-text-on-brand); cursor: progress; }
.btn-ghost.is-loading:disabled { background: var(--pd-bg-surface); color: var(--pd-text-primary); border-color: var(--pd-border-strong); cursor: progress; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.link-button {
  border: 0;
  background: none;
  padding: 12px 0;
  margin: -12px 0;
  color: var(--pd-text-link);
  font: 600 14px / 20px var(--pd-font-text);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--pd-radius-xs);
}
.link-button:hover:not(:disabled) { color: var(--pd-text-link-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-button:disabled { color: var(--pd-text-disabled); cursor: default; }
.auth-terms { font-size: 13px; line-height: 20px; color: var(--pd-text-tertiary); text-wrap: pretty; }
.auth-switch { margin-top: 28px; text-align: center; font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.auth-switch .auth-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
.auth-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.auth-note { font-size: 14px; line-height: 22px; color: var(--pd-text-tertiary); text-wrap: pretty; }
.verify-note { margin-top: 20px; }

/* Sign-up with approval on: the email the server said yes to stays fixed on the account
   form, with a way back to the request step underneath it. */
.input.is-readonly { background: var(--pd-bg-sunken); color: var(--pd-text-secondary); }
.field > .link-button { align-self: flex-start; margin: 6px 0 -6px; font-size: 13px; }
#request-exists { margin-top: -4px; }
#choice-gate-note { margin-top: 8px; }

/* The request step's two doors: new here, or already approved. */
.auth-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 8px;
  border-radius: var(--pd-radius-sm, 10px);
  background: var(--pd-bg-sunken);
  border: 1px solid var(--pd-border-subtle, var(--pd-border-strong));
}
.auth-mode {
  border: 0;
  background: none;
  padding: 9px 12px;
  border-radius: var(--pd-radius-xs);
  color: var(--pd-text-secondary);
  font: 600 14px / 20px var(--pd-font-text);
  cursor: pointer;
}
.auth-mode:hover { color: var(--pd-text-primary); }
.auth-mode[aria-pressed="true"] {
  background: var(--pd-bg-surface);
  color: var(--pd-text-primary);
  box-shadow: 0 1px 2px rgb(15 13 26 / 0.12);
}

/* The consent row: the web mirror of the app's sign-up checkbox. */
.auth-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); cursor: pointer; }
.auth-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pd-brand-600); cursor: pointer; }
.auth-consent a { color: var(--pd-text-primary); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.auth-consent a:hover { color: var(--pd-text-link); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Sign-up: two role cards, veterinarian first
   -------------------------------------------------------------------------- */
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-space-4); }
.role-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: var(--pd-space-6);
  background: var(--pd-bg-surface);
  border: 1px solid var(--pd-border-default);
  border-radius: var(--pd-radius-xl);
  box-shadow: var(--pd-shadow-1);
}
.role-card-head { display: flex; align-items: center; gap: 14px; }
.role-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--pd-radius-md);
  background: var(--pd-action-tint);
  color: var(--pd-brand-600);
}
.role-icon .icon, .role-icon .brand-paw { width: 22px; height: 22px; }
.role-name { display: block; font: 600 20px / 28px var(--pd-font-display); letter-spacing: -0.01em; color: var(--pd-text-primary); }
.role-tag { display: block; font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }
.role-list { display: flex; flex-direction: column; gap: 12px; }
.role-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.tick {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pd-action-tint);
  color: var(--pd-brand-600);
}
.tick .icon { width: 12px; height: 12px; stroke-width: 3; }
.role-app { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--pd-radius-md); background: var(--pd-bg-sunken); border: 1px solid var(--pd-border-subtle); }
.role-app img { flex: none; width: 36px; height: 36px; border-radius: 9px; box-shadow: var(--pd-shadow-1); }
.role-app-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 2px; font: 600 13px / 18px var(--pd-font-text); color: var(--pd-text-primary); }
.role-app p { font-size: 13px; line-height: 19px; color: var(--pd-text-secondary); }
.role-sample-avatars { display: inline-flex; flex: none; align-self: flex-start; padding-left: 8px; }
.role-sample-avatars span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--pd-brand-100);
  color: var(--pd-action-tint-text);
  font: 700 12px / 1 var(--pd-font-text);
  box-shadow: 0 0 0 2px var(--pd-bg-sunken);
}
.role-demo-icon { display: inline-grid; place-items: center; flex: none; align-self: flex-start; width: 36px; height: 36px; border-radius: 50%; background: var(--pd-brand-100); color: var(--pd-action-tint-text); }
.role-demo-icon .icon { width: 18px; height: 18px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--pd-radius-full);
  border: 1px solid var(--pd-border-subtle);
  background: var(--pd-bg-surface);
  color: var(--pd-text-secondary);
  font: 600 12px / 1 var(--pd-font-text);
  white-space: nowrap;
}
.status-chip .icon { width: 12px; height: 12px; }
.role-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: auto; padding-top: var(--pd-space-4); border-top: 1px solid var(--pd-border-subtle); font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.role-price strong { color: var(--pd-text-primary); font-weight: 600; }
.role-price-note { display: block; width: 100%; font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }
.role-card .btn { width: 100%; }
.role-foot { margin-top: var(--pd-space-4); text-align: center; font-size: 13px; line-height: 20px; color: var(--pd-text-tertiary); }
/* Two cards need about 620 px of column; below that they stack (tablet split, small laptops). */
@container (max-width: 619px) {
  .role-grid { grid-template-columns: 1fr; }
}
.role-app-name .status-chip { max-width: 100%; height: auto; min-height: 22px; padding: 3px 8px; white-space: normal; line-height: 16px; }

/* --------------------------------------------------------------------------
   Verification code boxes
   -------------------------------------------------------------------------- */
.code-boxes { display: flex; gap: 8px; justify-content: space-between; }
.code-box {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 0;
  text-align: center;
  font: 600 24px / 1 var(--pd-font-text);
  font-variant-numeric: tabular-nums;
  color: var(--pd-text-primary);
  border: 1px solid var(--pd-border-input);
  border-radius: var(--pd-radius-md);
  background: var(--pd-bg-surface);
  caret-color: var(--pd-brand-600);
  transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard);
}
.code-box:hover { border-color: var(--pd-text-tertiary); }
.code-box:focus, .code-box:focus-visible { outline: none; border-color: var(--pd-brand-600); box-shadow: var(--ring); }
.code-box.is-filled { border-color: var(--pd-text-secondary); }
.code-boxes.is-invalid .code-box { border-color: var(--pd-danger-fg); }
.verify-email { font-weight: 600; color: var(--pd-text-primary); word-break: break-all; }

/* --------------------------------------------------------------------------
   Demo accounts (local demo mode only)
   -------------------------------------------------------------------------- */
.demo-accounts { margin-top: var(--pd-space-10); padding: 20px 20px 12px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); background: var(--pd-bg-surface); }
.demo-accounts h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 14px / 20px var(--pd-font-text); }
.demo-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--pd-radius-full); border: 1px solid var(--pd-border-subtle); background: var(--pd-bg-sunken); color: var(--pd-text-secondary); font: 600 11px / 1 var(--pd-font-text); letter-spacing: 0.04em; text-transform: uppercase; }
.demo-accounts-sub { margin-bottom: 8px; font-size: 13px; line-height: 20px; color: var(--pd-text-tertiary); }
.demo-accounts-sub code { font-family: var(--pd-font-mono); font-size: 12px; padding: 1px 6px; border-radius: var(--pd-radius-xs); background: var(--pd-bg-sunken); border: 1px solid var(--pd-border-subtle); color: var(--pd-text-primary); }
/* A table in the markup (name, role, what they see), laid out as a list of rows. */
.demo-table { display: block; width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table thead { display: none; }
.demo-table tbody { display: flex; flex-direction: column; margin: 0 -8px; }
.demo-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 8px; border-top: 1px solid var(--pd-border-subtle); border-radius: var(--pd-radius-sm); cursor: pointer; transition: background-color var(--pd-duration-fast) var(--pd-ease-standard); }
.demo-table tbody tr:first-child { border-top: 0; }
.demo-table tbody tr:hover, .demo-table tbody tr:focus-within { background: var(--pd-fill-hover); }
.demo-table td { display: block; padding: 0; color: var(--pd-text-secondary); line-height: 18px; }
.demo-table td:nth-child(2) { justify-self: end; align-self: center; }
.demo-table td:nth-child(3) { grid-column: 1 / -1; color: var(--pd-text-tertiary); }
.demo-fill { border: 0; background: none; padding: 12px 0; margin: -12px 0; font: 600 13px / 18px var(--pd-font-text); color: var(--pd-text-primary); text-align: left; cursor: pointer; white-space: nowrap; border-radius: var(--pd-radius-xs); }
.role-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--pd-radius-full); border: 1px solid transparent; font: 600 12px / 1 var(--pd-font-text); white-space: nowrap; }
.role-pill-vet { background: var(--pd-action-tint); color: var(--pd-action-tint-text); border-color: var(--pd-brand-200); }
.role-pill-owner { background: var(--pd-bg-sunken); color: var(--pd-text-secondary); border-color: var(--pd-border-subtle); }

/* --------------------------------------------------------------------------
   Onboarding
   -------------------------------------------------------------------------- */
.onb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--pd-space-8); align-items: start; }
.onb-next { padding: 20px; background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); }
.onb-next h2 { margin-bottom: 8px; font: 600 15px / 22px var(--pd-font-text); }
.onb-next p { font-size: 14px; line-height: 22px; color: var(--pd-text-secondary); }
.onb-pets-label { margin-top: var(--pd-space-4); font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-tertiary); }
.onb-pets { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 var(--pd-space-4); }
.onb-pets li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font: 600 14px / 20px var(--pd-font-text); color: var(--pd-text-primary); background: var(--pd-bg-canvas); border: 1px solid var(--pd-border-subtle); border-radius: var(--pd-radius-md); }
.onb-pet-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pd-action-tint); color: var(--pd-action-tint-text); font: 700 12px / 1 var(--pd-font-text); }
.onb-pets li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.onb-pets small { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--pd-text-tertiary); }
.onb-private { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 20px; color: var(--pd-text-secondary); }
.onb-private .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--pd-brand-600); }

.onb-section-label { margin: 0 0 12px; font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-tertiary); }
.onb-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--pd-space-6); }
.onb-list li { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); background: var(--pd-bg-surface); }
.onb-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--pd-radius-md); background: var(--pd-action-tint); color: var(--pd-brand-600); }
.onb-icon .icon, .onb-icon .brand-paw { width: 20px; height: 20px; }
.onb-list strong { display: block; margin-bottom: 2px; font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.onb-list p { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); }

/* The iPhone app, honestly labeled: a small night card, the brand's moment. */
.onb-app {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--pd-space-8);
  padding: 20px;
  border-radius: var(--pd-radius-xl);
  background: radial-gradient(70% 90% at 90% 0%, rgba(139, 124, 240, 0.30), transparent 70%), var(--pd-bg-night);
  color: var(--pd-text-on-night);
}
.onb-app-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.onb-app-head img { flex: none; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.onb-app-title { display: block; font: 600 17px / 22px var(--pd-font-display); color: #FFFFFF; letter-spacing: -0.01em; }
.onb-app .status-chip { margin-top: 4px; border-color: rgba(234, 232, 247, 0.20); background: rgba(234, 232, 247, 0.08); color: var(--pd-text-on-night); }
.onb-app p { font-size: 14px; line-height: 22px; color: var(--pd-text-on-night-secondary); }
.onb-app p + p { margin-top: 8px; }
.onb-app strong { color: var(--pd-text-on-night); font-weight: 600; }

.auth-ok-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--pd-space-4);
  border-radius: 50%;
  background: var(--pd-action-primary);
  color: var(--pd-text-on-brand);
  box-shadow: var(--pd-shadow-glow);
}
.auth-ok-badge .icon { width: 24px; height: 24px; stroke-width: 2.75; }

/* The owner's Pawnda address on the "all set" card, with an honest chip while
   email forwarding is not live. Addresses are values: Inter, never monospace. */
.onb-address { display: flex; align-items: flex-start; gap: 14px; margin-bottom: var(--pd-space-6); padding: 16px; border: 1px solid var(--pd-brand-200); border-radius: var(--pd-radius-lg); background: var(--pd-brand-25); }
.onb-address-text { flex: 1 1 auto; min-width: 0; }
.onb-address-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 13px / 18px var(--pd-font-text); color: var(--pd-text-secondary); }
.onb-address-value { margin: 2px 0 4px; font: 600 17px / 24px var(--pd-font-text); color: var(--pd-text-primary); overflow-wrap: anywhere; }
.onb-address-note { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }
.onb-address-soon { flex: none; font-weight: 600; }

/* --------------------------------------------------------------------------
   Username step (owner onboarding): the field with its @pawnda.com suffix,
   a live availability line, and a preview of the addresses the name makes.
   -------------------------------------------------------------------------- */
.auth-stack-onb.is-narrow { width: min(460px, 100%); }
.uname-input {
  display: flex;
  align-items: center;
  height: var(--pd-size-control-lg);
  border: 1px solid var(--pd-border-input);
  border-radius: var(--pd-radius-md);
  background: var(--pd-bg-surface);
  cursor: text;
  transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard);
}
.uname-input:hover { border-color: var(--pd-text-tertiary); }
.uname-input:focus-within { border-color: var(--pd-brand-600); box-shadow: var(--ring); }
.uname-input:has(.input[aria-invalid="true"]) { border-color: var(--pd-danger-fg); }
.uname-input:has(.input[aria-invalid="true"]):focus-within { box-shadow: var(--ring-danger); }
.uname-input .input,
.uname-input .input:hover,
.uname-input .input:focus,
.uname-input .input:focus-visible,
.uname-input .input[aria-invalid="true"] { flex: 1 1 auto; min-width: 0; height: calc(var(--pd-size-control-lg) - 2px); padding-right: 2px; border: 0; background: transparent; box-shadow: none; }
.uname-suffix { flex: none; padding-right: 16px; font: 400 16px / 24px var(--pd-font-text); color: var(--pd-text-tertiary); white-space: nowrap; user-select: none; }
.uname-status-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
.uname-status { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }
.uname-status[data-state="ok"] { color: var(--pd-success-text); }
.uname-status[data-state="error"] { color: var(--pd-danger-text); }
.uname-status[data-state="ok"]::before,
.uname-status[data-state="error"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--auth-glyph-alert) center / contain no-repeat;
  mask: var(--auth-glyph-alert) center / contain no-repeat;
}
.uname-status[data-state="ok"]::before { -webkit-mask-image: var(--auth-glyph-check-circle); mask-image: var(--auth-glyph-check-circle); }
.uname-suggest { font-size: 13px; line-height: 18px; }
.uname-preview { padding: 14px 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); background: var(--pd-bg-surface); }
.uname-preview-label { margin-bottom: 8px; font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-tertiary); }
.uname-addresses { display: flex; flex-direction: column; gap: 8px; }
.uname-addresses li { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.uname-who { font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }
.uname-addr { font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); overflow-wrap: anywhere; }
.uname-preview.is-placeholder .uname-addr { color: var(--pd-text-secondary); font-weight: 500; }
.uname-live-note { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }
.uname-later { align-self: center; }
/* An address wraps only after its "@": the domain stays whole (see Auth.addressHtml). */
.addr-domain { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Vet onboarding (bridge wave): the clinic profile with a live directory
   card, then the Access step (coupon, subscription or the demo patient).
   The same pieces serve the membership page below.
   -------------------------------------------------------------------------- */
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; gap: 6px; }
.btn .icon { width: 18px; height: 18px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: start; }
@container (max-width: 380px) {
  .field-pair { grid-template-columns: 1fr; }
}

/* A switch: a native checkbox (role="switch"), outlined when off so its edge
   keeps 3:1 against the card (WCAG 1.4.11), violet when on. */
.switch-field { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-md); background: var(--pd-bg-surface); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-4); }
.switch-label { font: 600 14px / 20px var(--pd-font-text); color: var(--pd-text-primary); cursor: pointer; }
.switch-help { font-size: 13px; line-height: 19px; color: var(--pd-text-secondary); text-wrap: pretty; }
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 1.5px solid var(--pd-border-input);
  border-radius: var(--pd-radius-full);
  background: var(--pd-bg-sunken);
  cursor: pointer;
  transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), border-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pd-neutral-600);
  transform: translateY(-50%);
  transition: transform var(--pd-duration-base) var(--pd-ease-spring), width var(--pd-duration-fast) var(--pd-ease-standard), height var(--pd-duration-fast) var(--pd-ease-standard), background-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.switch:checked { background: var(--pd-action-primary); border-color: var(--pd-action-primary); }
.switch:checked::before { width: 20px; height: 20px; left: 2px; background: #FFFFFF; transform: translate(19px, -50%); box-shadow: 0 1px 2px rgba(15, 13, 26, 0.25); }
.switch:disabled { cursor: not-allowed; border-color: var(--pd-border-default); }
.switch:disabled::before { background: var(--pd-text-disabled); }

/* The directory card, as owners see it. Placeholders read as placeholders. */
.dir-preview { display: flex; flex-direction: column; gap: 12px; }
.dir-preview .onb-pets-label { margin: 0; }
.dir-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--pd-border-subtle); border-radius: var(--pd-radius-md); background: var(--pd-bg-canvas); }
.dir-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; min-width: 0; }
.dir-card-who { min-width: 0; }
.dir-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pd-action-tint); color: var(--pd-action-tint-text); font: 700 14px / 1 var(--pd-font-text); letter-spacing: 0.02em; }
.dir-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 15px / 20px var(--pd-font-text); color: var(--pd-text-primary); overflow-wrap: anywhere; }
.dir-specialty { font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); }
.dir-line { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--pd-text-secondary); overflow-wrap: anywhere; }
.dir-line .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--pd-text-tertiary); }
.dir-card .is-placeholder { color: var(--pd-text-tertiary); font-weight: 500; }
.dir-card.is-off .dir-name, .dir-card.is-off .dir-line, .dir-card.is-off .dir-specialty { color: var(--pd-text-tertiary); }
.dir-card.is-off .dir-avatar { background: var(--pd-bg-sunken); color: var(--pd-text-tertiary); }
.dir-off { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--pd-border-subtle); font-size: 13px; line-height: 19px; color: var(--pd-text-secondary); }
.verified-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--pd-success-border); border-radius: var(--pd-radius-full); background: var(--pd-success-tint); color: var(--pd-success-text); font: 600 12px / 1 var(--pd-font-text); white-space: nowrap; }
.verified-badge .icon { width: 14px; height: 14px; }

/* The Access step: three radio cards; the chosen one opens its panel. */
.access-options { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.access-option {
  min-width: 0;
  border: 1px solid var(--pd-border-default);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-bg-surface);
  box-shadow: var(--pd-shadow-1);
  transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard);
}
.access-option:hover { border-color: var(--pd-border-strong); }
.access-option.is-selected { border-color: var(--pd-brand-600); box-shadow: 0 0 0 3px rgba(114, 96, 226, 0.14), var(--pd-shadow-1); }
.access-option:has(.access-radio:focus-visible) { box-shadow: 0 0 0 2px var(--pd-bg-canvas), 0 0 0 4px var(--pd-focus); }
.access-option-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border-radius: inherit;
  cursor: pointer;
}
.access-radio {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--pd-border-input);
  border-radius: 50%;
  background: var(--pd-bg-surface);
  cursor: pointer;
  transition: border-width var(--pd-duration-fast) var(--pd-ease-standard), border-color var(--pd-duration-fast) var(--pd-ease-standard);
}
.access-radio:checked { border: 7px solid var(--pd-brand-600); }
.access-radio:focus-visible { outline: none; }
.access-option-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pd-radius-md); background: var(--pd-action-tint); color: var(--pd-brand-600); }
.access-option-icon .icon { width: 20px; height: 20px; }
.access-option-text { display: flex; flex-direction: column; min-width: 0; }
.access-option-title { font: 600 16px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.access-option-desc { font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); text-wrap: pretty; }
.access-option-meta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--pd-brand-200);
  border-radius: var(--pd-radius-full);
  background: var(--pd-action-tint);
  color: var(--pd-action-tint-text);
  font: 600 12px / 16px var(--pd-font-text);
  text-align: center;
}
.access-panel { margin: 0 18px; padding: 16px 0 18px; border-top: 1px solid var(--pd-border-subtle); }
.access-back-row { margin-top: var(--pd-space-6); justify-content: center; }

/* Back to a shared record (a vet who came to save one): the way back comes first. */
.access-return { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--pd-brand-200); border-radius: var(--pd-radius-lg); background: var(--pd-brand-25); }
.access-return-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pd-radius-md); background: var(--pd-action-tint); color: var(--pd-brand-600); }
.access-return-icon .icon { width: 20px; height: 20px; }
.access-return-title { font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.access-return-text p:not(.access-return-title):not(.form-error) { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }
.access-return-text .form-error:not(:empty) { margin-top: 8px; }
.ready-or { color: var(--pd-text-secondary); font-weight: 400; }
@container (max-width: 560px) {
  .access-return { grid-template-columns: auto minmax(0, 1fr); }
  .access-return .btn { grid-column: 1 / -1; width: 100%; }
}

/* Coupon codes are codes: monospace, spaced, capitals. */
.coupon-form { display: flex; flex-direction: column; gap: 6px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { flex: 1 1 auto; min-width: 0; }
.coupon-row .btn { flex: none; min-width: 112px; }
.input-code { font: 500 16px / 24px var(--pd-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.input-code::placeholder { letter-spacing: 0.06em; }
.code-inline { font-family: var(--pd-font-mono); font-size: 0.94em; letter-spacing: 0.02em; white-space: nowrap; }
.coupon-form .field-hint { margin: -2px 0 4px; }

/* The plan card (Subscribe) and the demo list. */
.plan-card { display: flex; flex-direction: column; gap: 16px; }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.plan-name { font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.plan-price { font: 600 20px / 28px var(--pd-font-display); letter-spacing: -0.01em; color: var(--pd-text-primary); font-variant-numeric: tabular-nums; }
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.plan-note { font-size: 13px; line-height: 18px; color: var(--pd-text-tertiary); text-align: center; text-wrap: pretty; }
#panel-demo .plan-list { margin-bottom: 16px; }
#panel-demo .plan-note { margin-top: 10px; }
#panel-demo .form-error:not(:empty) { margin-bottom: 12px; }
/* An empty live region keeps its place in the tree but not in the layout. */
.plan-card > .form-error:empty { margin-top: -16px; }
.plan-card > .plan-note { margin-top: -6px; }

/* A segmented control made of native radios (arrow keys for free). */
.seg-field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.seg-field legend { float: left; padding: 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pd-radius-full); background: var(--pd-track); }
.seg-opt { position: relative; display: inline-flex; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: var(--pd-radius-full); font: 500 14px / 20px var(--pd-font-text); color: var(--pd-text-secondary); transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), color var(--pd-duration-fast) var(--pd-ease-standard); }
.seg-opt:hover span { color: var(--pd-text-primary); }
.seg-opt input:checked + span { background: var(--pd-bg-surface); color: var(--pd-text-primary); font-weight: 600; box-shadow: var(--pd-shadow-1); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--pd-focus); outline-offset: 2px; }

/* A calm notice: information, not an error. */
.access-notice { margin-top: 16px; padding: 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-md); background: var(--pd-bg-sunken); }
.access-notice:focus { outline: none; }
.access-notice-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 14px / 20px var(--pd-font-text); color: var(--pd-text-primary); }
.access-notice-title .icon { width: 18px; height: 18px; color: var(--pd-brand-600); }
.access-notice p:not(.access-notice-title) { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }
.access-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* After a coupon or a subscription: the facts, then one way on. */
.ready-facts { margin: 0 0 var(--pd-space-6); border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); background: var(--pd-bg-surface); }
.ready-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 12px 16px; }
.ready-facts div + div { border-top: 1px solid var(--pd-border-subtle); }
.ready-facts dt { font-size: 14px; line-height: 20px; color: var(--pd-text-tertiary); }
.ready-facts dd { margin: 0; font: 600 14px / 20px var(--pd-font-text); color: var(--pd-text-primary); font-variant-numeric: tabular-nums; }
#onb-ready .form-error:not(:empty) { margin-bottom: 16px; }

@container (max-width: 520px) {
  .access-option-head { grid-template-columns: auto auto minmax(0, 1fr); padding: 14px 16px; column-gap: 12px; }
  .access-option-meta { grid-column: 3; justify-self: start; margin-top: 6px; }
  .access-panel { margin: 0 16px; }
}
@container (max-width: 400px) {
  .access-option-icon { display: none; }
  .access-option-head { grid-template-columns: auto minmax(0, 1fr); }
  .access-option-meta { grid-column: 2; }
  .coupon-row { flex-direction: column; }
  .coupon-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Account pages: membership.html (the vet's membership and profile) and
   admin.html (the founders' coupons and vets). A calm top bar, a page head,
   an "On this page" rail on wide screens and cards. They follow the portal's
   theme (data-theme), so every color here is a token.
   -------------------------------------------------------------------------- */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 10px 16px; border-radius: var(--pd-radius-full); background: var(--pd-bg-surface); color: var(--pd-text-primary); font: 600 14px / 20px var(--pd-font-text); box-shadow: var(--pd-shadow-2); text-decoration: none; }
.skip-link:focus { top: 12px; }
body.acct-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.acct-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--pd-border-default); background: color-mix(in srgb, var(--pd-bg-surface) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.acct-top-inner { display: flex; align-items: center; gap: 8px 20px; max-width: 1160px; min-height: 64px; margin: 0 auto; padding: 0 var(--pd-space-8); }
.acct-lockup { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--pd-text-primary); text-decoration: none; font: 700 20px / 1 var(--pd-font-display); letter-spacing: -0.02em; border-radius: var(--pd-radius-sm); }
.acct-lockup:hover { color: var(--pd-text-primary); }
.acct-lockup .brand-paw { width: 22px; height: 22px; color: var(--pd-brand-500); }
.acct-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-left: 4px; border-radius: var(--pd-radius-full); color: var(--pd-text-secondary); font: 600 14px / 20px var(--pd-font-text); text-decoration: none; transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), color var(--pd-duration-fast) var(--pd-ease-standard); }
.acct-back:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.acct-back .icon { width: 16px; height: 16px; }
.acct-back-short { display: none; }
.acct-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 16px; margin-left: auto; font-size: 13px; line-height: 20px; color: var(--pd-text-tertiary); }
.acct-who strong { color: var(--pd-text-primary); font-weight: 600; }
.acct-who .link-button { font-size: 13px; }

.acct-main { flex: 1; padding: var(--pd-space-10) var(--pd-space-8) var(--pd-space-16); outline: none; }
.acct-wrap { max-width: 1160px; margin: 0 auto; }
.acct-head { max-width: 760px; margin: 0 0 var(--pd-space-8) 248px; }
.acct-overline { margin-bottom: 8px; font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-action-tint-text); }
.acct-head h1 { margin-bottom: 8px; font: 700 34px / 42px var(--pd-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.acct-lead { font-size: 16px; line-height: 25px; color: var(--pd-text-secondary); text-wrap: pretty; }
.acct-layout { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: var(--pd-space-12); align-items: start; }
.acct-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.acct-nav a { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--pd-radius-sm); color: var(--pd-text-secondary); font: 500 14px / 20px var(--pd-font-text); text-decoration: none; box-shadow: inset 2px 0 0 transparent; transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), color var(--pd-duration-fast) var(--pd-ease-standard); }
.acct-nav a:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.acct-nav a[aria-current="true"] { color: var(--pd-text-primary); font-weight: 600; background: var(--pd-fill-selected); box-shadow: inset 2px 0 0 var(--pd-brand-600); border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0; }
.acct-content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* The content keeps its column when the "On this page" rail is hidden (an owner's view). */
@media (min-width: 1200px) { .acct-content { grid-column: 2; } }
/* Until the membership and profile load, nothing below the card pretends to know them. */
.acct-content.is-loading :is(.coupon-form, #subscription .plan-card, #profile-form, .dir-grid, .ver-status) { visibility: hidden; }

.acct-card { container-type: inline-size; scroll-margin-top: 88px; padding: 28px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-xl); background: var(--pd-bg-surface); box-shadow: var(--pd-shadow-1); }
.acct-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.acct-card-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pd-radius-md); background: var(--pd-action-tint); color: var(--pd-brand-600); }
.acct-card-icon .icon { width: 20px; height: 20px; }
.acct-card-icon--success { background: var(--pd-success-tint); color: var(--pd-success-fg); }
.acct-card-title { margin-bottom: 2px; font: 600 18px / 26px var(--pd-font-text); letter-spacing: -0.01em; color: var(--pd-text-primary); }
.acct-card-text { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }
#not-vet .acct-card-text { margin: 4px 0 20px; }
.acct-card .plan-card > .btn { align-self: flex-start; }
.acct-card .plan-note-start { text-align: left; }
.acct-card .access-notice { margin-top: 0; }
.acct-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acct-card .form > .form-success:empty, .acct-card .form > .form-error:empty { margin-top: -20px; }
.sub-current { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sub-current .ready-facts { align-self: stretch; margin: 0; }
.sub-current .form-success:empty, .sub-current .form-error:empty { margin-top: -16px; }
.btn-danger { background: var(--pd-danger-fg); color: #FFFFFF; }
.btn-danger:hover:not(:disabled) { background: var(--pd-danger-700); }
.btn-danger:active:not(:disabled) { background: var(--pd-danger-800); }

/* The membership card, on night with the glow: state, what it means, the numbers, the next step. */
.mem-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 88px;
  padding: 28px 32px 30px;
  border: 1px solid transparent;
  border-radius: var(--pd-radius-2xl);
  background: var(--pd-night-glow) 100% 0 / 900px 600px no-repeat, radial-gradient(50% 60% at 0% 100%, rgba(91, 77, 199, 0.18), transparent 70%), var(--pd-bg-night);
  color: var(--pd-text-on-night);
  box-shadow: var(--pd-shadow-2);
}
:root[data-theme="dark"] .mem-hero { border-color: rgba(234, 232, 247, 0.11); }
.mem-hero :focus-visible { outline-color: var(--pd-brand-300); }
.mem-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mem-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px 3px 8px; border: 1px solid rgba(234, 232, 247, 0.22); border-radius: var(--pd-radius-full); background: rgba(234, 232, 247, 0.08); color: var(--pd-text-on-night); font: 600 12px / 16px var(--pd-font-text); }
.mem-chip .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.mem-chip[data-tone="success"] { border-color: rgba(124, 213, 149, 0.4); background: rgba(37, 159, 86, 0.2); color: #A8EBBA; }
.mem-chip[data-tone="warning"] { border-color: rgba(255, 181, 104, 0.45); background: rgba(229, 130, 0, 0.2); color: #FFCF99; }
.mem-source { font-size: 13px; line-height: 18px; color: var(--pd-text-on-night-secondary); }
.mem-title { margin: 16px 0 8px; font: 700 28px / 34px var(--pd-font-display); letter-spacing: -0.02em; color: #FFFFFF; text-wrap: balance; }
.mem-body { max-width: 58ch; font-size: 15px; line-height: 24px; color: var(--pd-text-on-night-secondary); text-wrap: pretty; }
.mem-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 22px 0 0; }
.mem-stat dt { font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-on-night-tertiary); }
.mem-stat dd { margin: 2px 0 0; font: 600 24px / 30px var(--pd-font-display); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.mem-meter { height: 6px; margin-top: 16px; border-radius: var(--pd-radius-full); background: rgba(234, 232, 247, 0.12); overflow: hidden; }
.mem-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pd-brand-500), var(--pd-brand-300)); transition: width var(--pd-duration-slow) var(--pd-ease-enter); }
.mem-meter[data-tone="warning"] span { background: linear-gradient(90deg, var(--pd-warning-500), var(--pd-warning-300)); }
.mem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.mem-actions:empty { display: none; }
.btn-night { background: transparent; color: var(--pd-text-on-night); border-color: rgba(234, 232, 247, 0.32); }
.btn-night:hover:not(:disabled) { color: #FFFFFF; background: rgba(234, 232, 247, 0.08); border-color: rgba(234, 232, 247, 0.5); }
.mem-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--pd-brand-300); font: 600 14px / 20px var(--pd-font-text); text-decoration: underline; text-decoration-color: rgba(189, 173, 251, 0.45); text-underline-offset: 3px; border-radius: var(--pd-radius-xs); }
.mem-link:hover { color: #FFFFFF; text-decoration-color: currentColor; }
.mem-skeleton { display: block; width: min(360px, 70%); height: 30px; border-radius: var(--pd-radius-sm); background: linear-gradient(90deg, rgba(234, 232, 247, 0.06) 0%, rgba(234, 232, 247, 0.14) 50%, rgba(234, 232, 247, 0.06) 100%); background-size: 200% 100%; animation: pd-shimmer 1.4s var(--pd-ease-standard) infinite; }

/* Directory: the switch, the three conditions, and the card owners see. */
.dir-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; align-items: start; }
.dir-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.findable { padding: 14px 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-md); background: var(--pd-bg-canvas); }
.findable-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 14px / 20px var(--pd-font-text); color: var(--pd-text-primary); }
.findable[data-findable="true"] .findable-title { color: var(--pd-success-text); }
.findable[data-findable="true"] .findable-title::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--auth-glyph-check-circle) center / contain no-repeat; mask: var(--auth-glyph-check-circle) center / contain no-repeat; }
.findable-list { display: flex; flex-direction: column; gap: 8px; }
.findable-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.findable-mark { position: relative; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--pd-border-input); border-radius: 50%; background: var(--pd-bg-surface); }
.findable-list li[data-met="true"] { color: var(--pd-text-primary); }
.findable-list li[data-met="true"] .findable-mark { border-color: var(--pd-success-fg); background: var(--pd-success-fg); }
.findable-list li[data-met="true"] .findable-mark::after { content: ""; position: absolute; inset: 3px; background: #FFFFFF; -webkit-mask: var(--auth-glyph-check) center / contain no-repeat; mask: var(--auth-glyph-check) center / contain no-repeat; }
:root[data-theme="dark"] .findable-list li[data-met="true"] .findable-mark::after { background: var(--pd-neutral-950); }
.dir-grid .dir-card { background: var(--pd-bg-canvas); }

/* Verified: what the badge means, and where this vet stands. */
.ver-status { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-md); background: var(--pd-bg-sunken); }
.ver-status-mark { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--pd-bg-surface); color: var(--pd-text-tertiary); border: 1px solid var(--pd-border-default); }
.ver-status-mark .icon { width: 20px; height: 20px; }
.ver-status[data-verified="true"] { border-color: var(--pd-success-border); background: var(--pd-success-tint); }
.ver-status[data-verified="true"] .ver-status-mark { border-color: var(--pd-success-border); color: var(--pd-success-fg); }
.ver-status-title { font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.ver-status[data-verified="true"] .ver-status-title { color: var(--pd-success-text); }
.ver-status-text { font-size: 14px; line-height: 21px; color: var(--pd-text-secondary); text-wrap: pretty; }

/* The footer and the confirm dialog. */
.acct-foot { padding: 20px var(--pd-space-8) 28px; border-top: 1px solid var(--pd-border-subtle); }
.acct-foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; max-width: 1160px; margin: 0 auto; }
.acct-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-xl); background: var(--pd-bg-raised); color: var(--pd-text-primary); box-shadow: var(--pd-shadow-3); }
.acct-dialog::backdrop { background: var(--pd-scrim); }
.acct-dialog-body { padding: 24px; }
.acct-dialog h2 { margin-bottom: 8px; font: 600 20px / 28px var(--pd-font-display); letter-spacing: -0.01em; }
.acct-dialog p { font-size: 14px; line-height: 22px; color: var(--pd-text-secondary); text-wrap: pretty; }
.acct-dialog-list { margin: 12px 0 0; padding-left: 20px; list-style: disc; font-size: 14px; line-height: 22px; color: var(--pd-text-secondary); }
.acct-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* Admin (founders only): numbers at a glance, two action cards, two tables. */
.admin-head { margin-left: 0; max-width: 820px; }
.admin-denied { max-width: 620px; margin: 24px auto 0; }
.admin-denied-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--pd-action-tint); color: var(--pd-brand-600); }
.admin-denied-icon .icon { width: 22px; height: 22px; }
.admin-denied .acct-card-text { margin: 4px 0 20px; }
.admin-denied-title { font: 600 20px / 28px var(--pd-font-display); letter-spacing: -0.01em; }
.admin-denied-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-denied-verify { margin: 0 0 20px; }
.admin-load-error:not(:empty) { margin-bottom: 20px; }
.admin-app { display: flex; flex-direction: column; gap: 20px; }
.admin-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; }
.admin-stat { padding: 16px 18px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); background: var(--pd-bg-surface); }
.admin-stat dt { font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-tertiary); }
.admin-stat dd { margin: 4px 0 0; font: 600 28px / 34px var(--pd-font-display); color: var(--pd-text-primary); font-variant-numeric: tabular-nums; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-create .seg-field { justify-content: flex-start; gap: 8px 16px; }
.admin-create .seg-field legend { margin-right: 4px; }
.admin-new { margin-top: 24px; padding: 16px; border: 1px solid var(--pd-brand-200); border-radius: var(--pd-radius-lg); background: var(--pd-brand-25); outline: none; }
:root[data-theme="dark"] .admin-new { background: var(--pd-ai-surface); border-color: var(--pd-ai-border); }
.admin-new-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.admin-new-title { font: 600 15px / 22px var(--pd-font-text); color: var(--pd-text-primary); }
.admin-new-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-new-meta { margin: 4px 0 12px; font-size: 13px; line-height: 19px; color: var(--pd-text-secondary); }
.admin-new-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.admin-new-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-md); background: var(--pd-bg-surface); }
.admin-founding-facts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.admin-founding-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--pd-text-secondary); }
.admin-founding .form-success:not(:empty), .admin-founding .form-error:not(:empty) { margin-bottom: 16px; }
.admin-founding .btn { white-space: normal; height: auto; min-height: 40px; padding-top: 10px; padding-bottom: 10px; text-align: center; }

.acct-card.admin-table-card { padding: 24px 0 8px; }
.admin-table-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 0 24px 16px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-search { position: relative; display: flex; align-items: center; }
.admin-search .icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--pd-text-tertiary); pointer-events: none; }
.admin-search .input { width: 260px; height: 40px; padding-left: 36px; font-size: 14px; }
.admin-filter { width: auto; height: 40px; padding-left: 14px; font-size: 14px; }
/* contain: paint keeps a wide table's overflow inside its own scroller (Chrome's mobile layout otherwise widens the page). */
.admin-scroll { overflow-x: auto; contain: paint; border-top: 1px solid var(--pd-border-subtle); }
.admin-scroll:focus-visible { outline: 2px solid var(--pd-focus); outline-offset: -2px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.admin-table th { padding: 10px 14px; text-align: left; white-space: nowrap; font: var(--pd-type-ui-overline); letter-spacing: var(--pd-tracking-overline); text-transform: uppercase; color: var(--pd-text-tertiary); background: var(--pd-bg-sunken); border-bottom: 1px solid var(--pd-border-subtle); }
.admin-table th:first-child, .admin-table td:first-child { padding-left: 24px; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 24px; }
.admin-table td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--pd-border-subtle); color: var(--pd-text-primary); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--pd-fill-hover); }
.admin-empty td { padding: 28px 24px; text-align: center; color: var(--pd-text-secondary); }
.admin-empty:hover td { background: transparent; }
.admin-code-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.admin-code { font: 500 13px / 20px var(--pd-font-mono); letter-spacing: 0.04em; color: var(--pd-text-primary); white-space: nowrap; }
.admin-icon-btn { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--pd-radius-sm); background: transparent; color: var(--pd-text-tertiary); cursor: pointer; transition: background-color var(--pd-duration-fast) var(--pd-ease-standard), color var(--pd-duration-fast) var(--pd-ease-standard); }
.admin-icon-btn:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.admin-icon-btn .icon { width: 16px; height: 16px; }
.admin-icon-btn.is-done { color: var(--pd-success-fg); }
.admin-chip { gap: 4px; }
.admin-chip .icon { width: 12px; height: 12px; stroke-width: 2.25; }
.admin-cell-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.admin-sub { font-size: 12px; line-height: 16px; color: var(--pd-text-tertiary); }
.admin-muted { color: var(--pd-text-tertiary); }
.admin-strong { font-weight: 600; }
/* break-word (not anywhere) so a long email never shrinks its column to a sliver. */
.admin-email { overflow-wrap: break-word; }
.admin-for { min-width: 170px; max-width: 240px; }
.admin-note { color: var(--pd-text-secondary); overflow-wrap: break-word; }
.admin-soon { color: var(--pd-warning-text); font-weight: 600; }
.admin-table td:first-child { min-width: 210px; }
.admin-date, .admin-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-actions-cell { text-align: right; white-space: nowrap; }
.admin-actions-cell > * + * { margin-left: 6px; }
.admin-actions-cell a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn-xs { height: 32px; padding: 0 12px; font-size: 13px; line-height: 16px; }
.admin-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Testers: the rule, the add form (inside a table card, so it brings its own side padding), the count. */
.admin-testers-intro { max-width: 720px; }
.admin-rule { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--pd-radius-md); background: var(--pd-bg-sunken); font-size: 14px; line-height: 20px; color: var(--pd-text-primary); }
.admin-rule .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pd-brand-600); }
.admin-tester-form { padding: 0 24px 20px; }
.admin-tester-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.admin-tester-end { flex: 1 1 260px; max-width: 360px; }
.admin-tester-actions { margin-top: 26px; }
.admin-tester-form .form-error:not(:empty), .admin-tester-form .form-success:not(:empty) { margin-top: 12px; }
.admin-testers-count:not(:empty) { padding: 0 24px 12px; }
.admin-switch-text { font-size: 13px; color: var(--pd-text-secondary); }
.switch-sm { width: 40px; height: 24px; }
.switch-sm::before { left: 4px; width: 12px; height: 12px; }
.switch-sm:checked::before { left: 2px; width: 18px; height: 18px; transform: translate(16px, -50%); }

@container (max-width: 620px) {
  .dir-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-tester-form { padding: 0 20px 16px; }
  .admin-testers-count:not(:empty) { padding: 0 20px 10px; }
  .admin-tester-end { max-width: none; }
  .admin-tester-actions { margin-top: 0; width: 100%; }
  .admin-tester-actions .btn { width: 100%; }
  .admin-stat { padding: 12px 14px; }
  .admin-stat dd { font-size: 24px; line-height: 30px; }
  .acct-card.admin-table-card { padding: 20px 0 4px; }
  .admin-table-head { padding: 0 20px 14px; }
  .admin-toolbar, .admin-search { width: 100%; }
  .admin-search .input { width: 100%; }
  .admin-filter { flex: 1 1 auto; }
  .admin-table th:first-child, .admin-table td:first-child { padding-left: 20px; }
}
@container (max-width: 380px) {
  .acct-card .coupon-row { flex-direction: column; }
  .acct-card .coupon-row .btn { width: 100%; }
}
@media (max-width: 1199px) {
  .acct-head { margin-left: 0; }
  .acct-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .acct-head { max-width: 760px; }
  .acct-nav { display: none; }
}
@media (max-width: 719px) {
  .acct-top-inner { padding: 0 16px; gap: 8px 12px; }
  .acct-back { margin-left: 0; padding: 0 10px; }
  /* The short word shows; the full name stays for screen readers. */
  .acct-back-long { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .acct-back-short { display: inline; }
  .acct-who-name { display: none; }
  .acct-main { padding: 28px 16px 48px; }
  .acct-head { margin-bottom: 24px; }
  .acct-head h1 { font-size: 28px; line-height: 36px; }
  .acct-lead { font-size: 15px; line-height: 23px; }
  .acct-card { padding: 20px; border-radius: var(--pd-radius-lg); }
  .mem-hero { padding: 22px 20px 24px; border-radius: var(--pd-radius-xl); }
  .mem-title { font-size: 24px; line-height: 30px; }
  .acct-foot { padding: 20px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::before, .access-option, .access-radio, .seg-opt span, .mem-meter span, .acct-back, .acct-nav a { transition: none; }
  .mem-skeleton { animation: none; }
}

/* --------------------------------------------------------------------------
   Sign-up page: a step larger type throughout (and a slightly wider column to
   carry it). Sign-in and onboarding keep the base sizes above.
   -------------------------------------------------------------------------- */
.auth-signup .auth-stack { width: min(480px, 100%); }
.auth-signup .auth-stack-wide { width: min(820px, 100%); }
.auth-signup .auth-topbar-alt { font-size: 15px; line-height: 22px; }
.auth-signup .auth-step { font-size: 14px; line-height: 20px; }
.auth-signup .auth-head h1 { font-size: 36px; line-height: 44px; }
.auth-signup .auth-head p { font-size: 17px; line-height: 27px; }
.auth-signup .auth-role-chip { font-size: 14px; }
.auth-signup .field-label { font-size: 15px; line-height: 22px; }
.auth-signup .input { font-size: 17px; line-height: 26px; }
.auth-signup .field-error, .auth-signup .field-success, .auth-signup .field-hint { font-size: 14px; line-height: 20px; }
.auth-signup .form-error, .auth-signup .form-success { font-size: 15px; line-height: 22px; }
.auth-signup .pw-rules li { font-size: 14px; line-height: 20px; }
.auth-signup .btn { font-size: 17px; }
.auth-signup .link-button { font-size: 15px; }
.auth-signup .field > .link-button { font-size: 14px; }
.auth-signup .auth-mode { font-size: 15px; line-height: 22px; }
.auth-signup .auth-terms { font-size: 14px; line-height: 21px; }
.auth-signup .auth-note { font-size: 15px; line-height: 24px; }
.auth-signup .auth-consent { font-size: 15px; line-height: 23px; }
.auth-signup .auth-foot { font-size: 14px; }
.auth-signup .role-name { font-size: 22px; line-height: 30px; }
.auth-signup .role-tag { font-size: 14px; line-height: 20px; }
.auth-signup .role-list li { font-size: 16px; line-height: 24px; }
.auth-signup .role-app-name { font-size: 15px; line-height: 21px; }
.auth-signup .role-app p { font-size: 15px; line-height: 22px; }
.auth-signup .role-price { font-size: 16px; line-height: 22px; }
.auth-signup .role-price-note { font-size: 14px; line-height: 20px; }
.auth-signup .role-foot { font-size: 14px; line-height: 21px; }
.auth-signup .verify-note, .auth-signup .auth-switch { font-size: 15px; line-height: 22px; }
@media (max-width: 480px) {
  .auth-signup .auth-head h1 { font-size: 30px; line-height: 38px; }
  .auth-signup .auth-head p { font-size: 16px; line-height: 25px; }
}

/* --------------------------------------------------------------------------
   Responsive: below 1024 the brand panel becomes a night band at the top,
   carrying the lockup, the switch link and the page's one-line headline.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .auth-brand { padding-left: var(--pd-space-10); padding-right: var(--pd-space-10); }
  .auth-main { padding-left: var(--pd-space-8); padding-right: var(--pd-space-8); }
}
@media (max-width: 1023px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { justify-content: flex-start; gap: var(--pd-space-4); padding: 12px 20px 24px; }
  .auth-brand-alt { display: inline-flex; }
  .auth-brand h2 { margin: 0; font-size: 26px; line-height: 1.15; max-width: 20em; }
  .auth-overline, .auth-brand-body > p, .auth-trust, .auth-brand-foot, .auth-brand-motif { display: none; }
  .auth-main { padding: 8px 20px 24px; }
  .auth-topbar-switch { display: none; }
  .auth-topbar:empty { display: none; }
  .auth-content { justify-content: flex-start; padding: 28px 0 36px; }
  .onb-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 719px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-card { padding: 20px; }
}
@media (max-width: 480px) {
  .auth-head { margin-bottom: 24px; }
  .auth-head h1 { font-size: 28px; line-height: 36px; }
  .auth-brand h2 { font-size: 24px; }
  .input-toggle { top: 2px; right: 2px; height: 44px; }
  .auth-actions-row .link-button { padding: 12px 0; }
}
@media (max-width: 420px) {
  .auth-step { font-size: 12.5px; gap: 8px; }
  .auth-step + .auth-step::before { margin: 0 8px 0 0; }
  .auth-step-num { width: 26px; height: 26px; font-size: 12px; }
  .code-boxes { gap: 6px; }
  .code-box { height: 52px; font-size: 22px; }
}
/* A vet's four steps don't fit a phone with every label (390 px scrolled sideways): there, only
   the current step keeps its label, as every list does at 320 px. Screen readers hear them all. */
@media (max-width: 480px) {
  .auth-steps:has(> .auth-step:nth-of-type(4)) .auth-step:not(.is-active) .auth-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* 320 px reflow: only the current step keeps its label. */
@media (max-width: 360px) {
  .auth-step:not(.is-active) .auth-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .input, .btn, .code-box, .pw-rules li, .pw-rules li::before, .input-toggle, .auth-link, .auth-brand-alt { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
  .btn .spinner { animation-duration: 1.6s; }
}