html { font-synthesis: none; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }

/* One focus ring for every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pd-focus);
  outline-offset: 2px;
}
.pd-num { font-variant-numeric: tabular-nums; }

/* Buttons: capsules */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd-space-2);
  height: var(--pd-size-control-md); padding: 0 var(--pd-space-4);
  border: 1px solid transparent; border-radius: var(--pd-radius-full);
  font: var(--pd-type-ui-headline); white-space: nowrap; cursor: pointer; user-select: none;
  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),
              transform var(--pd-duration-instant) var(--pd-ease-standard);
}
.pd-btn .ico { width: 18px; height: 18px; }
.pd-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.98); }
.pd-btn:disabled, .pd-btn[aria-disabled="true"] {
  background: var(--pd-action-disabled-bg); color: var(--pd-action-disabled-text);
  border-color: transparent; box-shadow: none; cursor: not-allowed;
}
.pd-btn--sm { height: var(--pd-size-control-sm); padding: 0 var(--pd-space-3); gap: var(--pd-space-1-5); font: 600 13px / 16px var(--pd-font-text); }
.pd-btn--sm .ico { width: 16px; height: 16px; }
.pd-btn--lg { height: var(--pd-size-control-lg); padding: 0 var(--pd-space-5); font: 600 16px / 20px var(--pd-font-text); }

.pd-btn--primary { background: var(--pd-action-primary); color: var(--pd-text-on-brand); }
.pd-btn--primary:hover:not(:disabled) { background: var(--pd-action-primary-hover); }
.pd-btn--primary:active:not(:disabled) { background: var(--pd-action-primary-pressed); }

.pd-btn--secondary { background: var(--pd-bg-surface); color: var(--pd-text-primary); border-color: var(--pd-border-strong); }
.pd-btn--secondary:hover:not(:disabled) { background: var(--pd-fill-hover); }
.pd-btn--secondary:active:not(:disabled) { background: var(--pd-fill-pressed); }

.pd-btn--tertiary { background: transparent; color: var(--pd-text-link); }
.pd-btn--tertiary:hover:not(:disabled) { background: var(--pd-fill-hover); }
.pd-btn--tertiary:active:not(:disabled) { background: var(--pd-fill-pressed); }

.pd-btn--tinted, .pd-btn--ai { background: var(--pd-action-tint); color: var(--pd-action-tint-text); }
.pd-btn--ai { border-color: var(--pd-ai-border); }
.pd-btn--ai .ico { color: var(--pd-ai-glyph); }
.pd-btn--tinted:hover:not(:disabled), .pd-btn--ai:hover:not(:disabled) { background: var(--pd-action-tint-hover); }
.pd-btn--tinted:active:not(:disabled), .pd-btn--ai:active:not(:disabled) { background: color-mix(in srgb, var(--pd-action-primary) 22%, var(--pd-bg-surface)); }

.pd-btn--destructive { background: var(--pd-danger-fg); color: #FFFFFF; }
.pd-btn--destructive:hover:not(:disabled) { background: var(--pd-danger-700); }
.pd-btn--destructive:active:not(:disabled) { background: var(--pd-danger-800); }

.pd-night .pd-btn--secondary { background: transparent; color: var(--pd-text-on-night); border-color: rgba(234, 232, 247, 0.28); }
.pd-night .pd-btn--secondary:hover { background: rgba(234, 232, 247, 0.08); }
.pd-night .pd-btn--primary { box-shadow: var(--pd-shadow-glow); }

@media (max-width: 767px) { .pd-btn, .pd-btn--sm { min-height: var(--pd-size-tap); } }

/* Chips and badges */
.pd-chip {
  display: inline-flex; align-items: center; gap: var(--pd-space-1);
  height: var(--pd-size-chip); padding: 0 var(--pd-space-2);
  border: 1px solid var(--pd-border-subtle); border-radius: var(--pd-radius-full);
  background: var(--pd-bg-sunken); color: var(--pd-text-secondary);
  font: var(--pd-type-ui-label-strong); white-space: nowrap; vertical-align: middle;
}
.pd-chip .ico { width: 12px; height: 12px; stroke-width: 2; }
.pd-chip:has(.ico:first-child) { padding-left: 6px; }
.pd-chip--brand, .pd-chip--ai { background: var(--pd-ai-tint); color: var(--pd-ai-text); border-color: var(--pd-ai-border); }
.pd-chip--home { background: var(--pd-home-tint); color: var(--pd-home-text); border-color: var(--pd-home-border); }
.pd-chip--success { background: var(--pd-success-tint); color: var(--pd-success-text); border-color: var(--pd-success-border); }
.pd-chip--warning { background: var(--pd-warning-tint); color: var(--pd-warning-text); border-color: var(--pd-warning-border); }
.pd-chip--danger { background: var(--pd-danger-tint); color: var(--pd-danger-text); border-color: var(--pd-danger-border); }

.pd-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pd-radius-full);
  font: 700 11px / 18px var(--pd-font-text); font-variant-numeric: tabular-nums;
  background: var(--pd-fill-pressed); color: var(--pd-text-secondary);
}
.pd-badge--unread { background: var(--pd-action-primary); color: #FFFFFF; }
.pd-rail .pd-badge--unread { background: var(--pd-brand-400); color: var(--pd-neutral-950); }

/* Cards */
.pd-card { background: var(--pd-bg-surface); border: 1px solid var(--pd-border-default); border-radius: var(--pd-radius-lg); padding: var(--pd-space-4) var(--pd-space-5); }
.pd-card--interactive { cursor: pointer; transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard); }
.pd-card--interactive:hover { border-color: var(--pd-border-strong); box-shadow: var(--pd-shadow-2); }
.pd-card--interactive:active { box-shadow: var(--pd-shadow-1); }
.pd-card--ai { background: var(--pd-ai-surface); border-color: var(--pd-ai-border); box-shadow: inset 3px 0 0 var(--pd-brand-400); }
.pd-card--owner { box-shadow: inset 3px 0 0 var(--pd-home-mark); }
.pd-card__head { display: flex; align-items: center; gap: var(--pd-space-3); margin-bottom: var(--pd-space-3); }
.pd-card__title { font: var(--pd-type-ui-section); letter-spacing: -0.005em; color: var(--pd-text-primary); margin: 0; }
.pd-card__meta { margin-left: auto; font: var(--pd-type-ui-label); color: var(--pd-text-tertiary); }
.mk-site .pd-card { border-radius: var(--pd-radius-xl); padding: 28px; box-shadow: var(--pd-shadow-1); }

/* Inputs */
.pd-input {
  width: 100%; height: var(--pd-size-control-md); padding: 0 var(--pd-space-3);
  border: 1px solid var(--pd-border-input); border-radius: var(--pd-radius-md);
  background: var(--pd-bg-surface); color: var(--pd-text-primary); font: var(--pd-type-ui-body);
  transition: border-color var(--pd-duration-fast) var(--pd-ease-standard), box-shadow var(--pd-duration-fast) var(--pd-ease-standard);
}
.pd-input::placeholder { color: var(--pd-text-tertiary); }
.pd-input:hover { border-color: var(--pd-text-tertiary); }
.pd-input:focus { outline: none; border-color: var(--pd-brand-600); box-shadow: 0 0 0 3px rgba(114, 96, 226, 0.22); }
.pd-input[aria-invalid="true"] { border-color: var(--pd-danger-fg); }
.pd-input:disabled { background: var(--pd-bg-sunken); color: var(--pd-text-disabled); border-color: var(--pd-border-subtle); }
.pd-input--sm { height: 36px; font: var(--pd-type-ui-body-sm); }
.pd-input--lg { height: var(--pd-size-control-lg); font: 400 16px / 24px var(--pd-font-text); }
@media (max-width: 767px) { .pd-input { font-size: 16px; } }

/* Provenance: one vocabulary on every surface, glyph plus word, never color alone.
   <span class="pd-prov pd-prov--owner"><svg class="ico">(house)</svg><span>Owner-entered</span></span>
   <span class="pd-prov pd-prov--unverified"><span class="pd-prov__ring"></span><span>Unverified</span></span>
   Kinds: owner (teal, house) · unverified (amber ring) · verified (green, badge-check) · edited (green, pencil)
   · traced (neutral, quote) · draft (violet, sparkle) · notinchart (amber, dashed ring). */
.pd-prov {
  display: inline-flex; align-items: center; gap: 5px; height: var(--pd-size-chip); padding: 0 8px 0 7px;
  border: 1px solid var(--pd-border-subtle); border-radius: var(--pd-radius-full);
  background: var(--pd-bg-sunken); color: var(--pd-text-secondary);
  font: var(--pd-type-ui-label); white-space: nowrap; vertical-align: middle; flex: none;
}
.pd-prov .ico { width: 12px; height: 12px; stroke-width: 2; flex: none; }
.pd-prov--sm { height: 20px; padding: 0 7px 0 6px; }
.pd-prov__ring { width: 8px; height: 8px; flex: none; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--pd-warning-mark); }
.pd-prov__ring--dashed { border-style: dashed; }
.pd-prov--owner { background: var(--pd-home-tint); border-color: var(--pd-home-border); color: var(--pd-home-text); }
.pd-prov--verified, .pd-prov--edited { background: var(--pd-success-tint); border-color: var(--pd-success-border); color: var(--pd-success-text); }
.pd-prov--traced .ico { color: var(--pd-text-tertiary); }
.pd-prov--draft { background: var(--pd-ai-tint); border-color: var(--pd-ai-border); color: var(--pd-ai-text); }
.pd-prov--draft .ico { color: var(--pd-ai-glyph); }
.pd-prov--notinchart { background: var(--pd-warning-tint); border-color: var(--pd-warning-border); color: var(--pd-warning-text); }

/* Segmented control */
.pd-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--pd-radius-full); background: var(--pd-track); }
.pd-seg__opt { display: inline-flex; align-items: center; gap: var(--pd-space-1-5); height: 28px; padding: 0 var(--pd-space-3); border: 0; border-radius: var(--pd-radius-full); background: transparent;
  font: 500 13px / 16px var(--pd-font-text); color: var(--pd-text-secondary); cursor: pointer; white-space: nowrap;
  transition: background-color var(--pd-duration-base) var(--pd-ease-spring), color var(--pd-duration-fast) var(--pd-ease-standard); }
.pd-seg__opt:hover:not(:disabled) { color: var(--pd-text-primary); }
.pd-seg__opt[aria-pressed="true"], .pd-seg__opt.on { background: var(--pd-bg-surface); color: var(--pd-text-primary); font-weight: 600; box-shadow: var(--pd-shadow-1); }
.pd-seg__opt:disabled { color: var(--pd-text-disabled); cursor: default; }
.pd-seg__opt .ico { width: 14px; height: 14px; }
.pd-seg__n { font-weight: 500; color: var(--pd-text-tertiary); font-variant-numeric: tabular-nums; }
.pd-seg__opt[aria-pressed="true"] .pd-seg__n { color: var(--pd-text-secondary); }

/* Page tabs (Case Room) */
.pd-tab { display: inline-flex; align-items: center; gap: var(--pd-space-1-5); height: 32px; padding: 0 14px; border: 0; border-radius: var(--pd-radius-full);
  background: transparent; color: var(--pd-text-secondary); font: 500 14px / 20px var(--pd-font-text); cursor: pointer; }
.pd-tab:hover { background: var(--pd-fill-hover); color: var(--pd-text-primary); }
.pd-tab[aria-selected="true"] { background: var(--pd-bg-inverse); color: var(--pd-text-inverse); font-weight: 600; }
.pd-tab[aria-selected="true"] .pd-badge { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* Loading */
.pd-skeleton { border-radius: var(--pd-radius-sm); background: linear-gradient(90deg, var(--pd-bg-sunken) 0%, color-mix(in srgb, var(--pd-bg-sunken), var(--pd-text-primary) 7%) 50%, var(--pd-bg-sunken) 100%);
  background-size: 200% 100%; animation: pd-shimmer 1.4s var(--pd-ease-standard) infinite; }
@keyframes pd-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pd-refetching { opacity: 0.6; transition: opacity var(--pd-duration-fast) var(--pd-ease-standard); }
.pd-thinking span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--pd-ai-glyph); animation: pd-dot 1.2s var(--pd-ease-standard) infinite; }
.pd-thinking span:nth-child(2) { animation-delay: 0.15s; }
.pd-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pd-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Toast (replaces the inline style at app.js:206) */
.pd-toast { position: fixed; left: 50%; bottom: var(--toast-b, 24px); transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px var(--pd-space-4); border-radius: var(--pd-radius-full); background: var(--pd-bg-inverse); color: var(--pd-text-inverse);
  font: 500 13px / 18px var(--pd-font-text); box-shadow: var(--pd-shadow-2); z-index: 900; }

/* Night bands (marketing hero, CTA, footer, auth panel) */
.pd-night { background: var(--pd-night-glow), var(--pd-bg-night); color: var(--pd-text-on-night); }
.pd-night h1, .pd-night h2 { color: #FFFFFF; }
.pd-night .pd-overline { color: var(--pd-brand-300); }

@media (prefers-reduced-motion: reduce) {
  .pd-skeleton, .pd-thinking span { animation: none; }
  .pd-btn:active { transform: none; }
}

/* A link drawn as a button is a button: no underline (the portal, the membership and auth pages). */
a.pd-btn, a.pd-btn:hover { text-decoration: none; }

/* Confirm your email (static/js/auth.js mountEmailConfirm): a calm violet bar under a portal's top
   bar, or, compact, inside a card that already says why. Never an alarm: nothing is wrong, one
   step is left. */
.pd-verify { flex: none; background: var(--pd-ai-surface); border-bottom: 1px solid var(--pd-ai-border); color: var(--pd-text-primary); }
.pd-verify[hidden], .pd-verify [hidden] { display: none !important; }
.pd-verify__inner { display: flex; align-items: flex-start; gap: var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-5); }
.pd-verify__icon { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: var(--pd-radius-full); background: var(--pd-ai-tint); color: var(--pd-ai-glyph); }
.pd-verify__main { flex: 1; min-width: 0; padding-top: 1px; }
.pd-verify__title { margin: 0; font: var(--pd-type-ui-headline); color: var(--pd-text-primary); }
.pd-verify__text { margin: 2px 0 0; font: var(--pd-type-ui-body); color: var(--pd-text-secondary); }
.pd-verify__addr { font-weight: 600; color: var(--pd-text-primary); overflow-wrap: anywhere; }
.pd-verify__actions { flex: none; align-self: center; }
.pd-verify__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pd-space-2) var(--pd-space-3); margin: var(--pd-space-3) 0 0; }
.pd-verify__field { display: grid; gap: var(--pd-space-1); }
.pd-verify__label { font: var(--pd-type-ui-label-strong); color: var(--pd-text-secondary); }
.pd-verify__code { width: 11rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.pd-verify__buttons { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); }
.pd-verify__error, .pd-verify__status { margin: 0; font: var(--pd-type-ui-body-sm); }
.pd-verify__error:not(:empty), .pd-verify__status:not(:empty) { margin-top: var(--pd-space-2); }
.pd-verify__error { color: var(--pd-danger-text); font-weight: 500; }
.pd-verify__status { color: var(--pd-text-secondary); }
.pd-verify__status.is-done { color: var(--pd-success-text); font-weight: 600; }
.pd-verify__again { margin-top: var(--pd-space-3); }
/* A button at work keeps its color: it is busy, not unavailable. */
.pd-verify .pd-btn--primary[aria-busy="true"]:disabled { background: var(--pd-action-primary-hover); color: var(--pd-text-on-brand); cursor: progress; }
.pd-verify .pd-btn--secondary[aria-busy="true"]:disabled { background: var(--pd-bg-surface); color: var(--pd-text-primary); border-color: var(--pd-border-strong); cursor: progress; }

.pd-verify--compact { background: transparent; border: 0; }
/* Change password (auth.js mountPasswordChange): Settings in both portals. */
.pd-pw { display: grid; gap: var(--pd-space-3); justify-items: start; }
.pd-pw__intro { margin: 0; max-width: 60ch; font: var(--pd-type-ui-body-sm); color: var(--pd-text-secondary); }
.pd-pw__form { display: grid; gap: var(--pd-space-3); width: 100%; max-width: 360px; }
.pd-pw__form[hidden], .pd-pw [hidden] { display: none; }
.pd-pw__field { display: grid; gap: var(--pd-space-1); }
.pd-pw__label { font: var(--pd-type-ui-label-strong); color: var(--pd-text-secondary); }
.pd-pw__row { display: flex; gap: var(--pd-space-2); align-items: center; }
.pd-pw__row .pd-input { flex: 1 1 auto; min-width: 0; }
.pd-pw__hint { margin: 0; font: var(--pd-type-ui-body-sm); color: var(--pd-text-tertiary); }
.pd-pw__buttons { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); }
.pd-pw__error, .pd-pw__status, .pd-pw__again { margin: 0; font: var(--pd-type-ui-body-sm); }
.pd-pw__error:empty, .pd-pw__status:empty { display: none; }
.pd-pw__error { color: var(--pd-danger-text); font-weight: 500; }
.pd-pw__status { color: var(--pd-text-secondary); }
.pd-pw__status.is-done { color: var(--pd-success-text); font-weight: 600; }
.pd-pw__switch { margin-left: calc(-1 * var(--pd-space-3)); }

.pd-verify--compact .pd-verify__inner { flex-wrap: wrap; padding: 0; }
.pd-verify--compact .pd-verify__main { flex-basis: 100%; }
.pd-verify--compact .pd-verify__text { margin: 0; }
.pd-verify--compact .pd-verify__actions { align-self: flex-start; }

@media (max-width: 640px) {
  .pd-verify__inner { flex-wrap: wrap; padding: var(--pd-space-3) var(--pd-space-4); }
  .pd-verify__main { flex-basis: calc(100% - 44px); }
  .pd-verify__actions, .pd-verify__buttons, .pd-verify__field { flex-basis: 100%; }
  .pd-verify__actions .pd-btn, .pd-verify__buttons .pd-btn { flex: 1 1 0; }
  .pd-verify:not(.pd-verify--compact) .pd-verify__actions { padding-left: 44px; }
  .pd-verify__actions { display: flex; }
  .pd-verify__code { width: 100%; }
}