/* ═══════════════════════════════════════════════════════════════
   ATHEX UNIVERSAL WIDGET — athex.css
   Hosted at https://andareno.com/widget/athex.css

   Covers both variants:
     Athex          — personal/family (*.andareno.com)
     Athex Enterprise — client/business (*.cximmersive.com)

   All classes prefixed with `athex-` to avoid host-app conflicts.
   No emojis anywhere.
   Developed for Anda Reno by Becchio Group LLC. (c) 2026. All rights reserved.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Google Fonts (loaded by JS to avoid duplicate requests) ── */
/* Poppins (headings, 600-900) + Inter (body, 400/500/700) + JetBrains Mono (codes) */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --athex-void:              #050b14;
  --athex-bg:                #050b14;
  --athex-surface:           rgba(10, 18, 32, 0.55);
  --athex-surface-hover:     rgba(16, 26, 46, 0.70);
  --athex-surface-solid:     rgba(8, 15, 28, 0.96);
  --athex-border:            rgba(255,255,255,0.08);
  --athex-border-hover:      rgba(255,255,255,0.16);
  --athex-cyan:              #00e5ff;
  --athex-cyan-dim:          rgba(0,229,255,0.12);
  --athex-cyan-glow:         rgba(0,229,255,0.30);
  --athex-cyan-border:       rgba(0,229,255,0.25);
  --athex-purple:            #b44dff;
  --athex-red:               #ff4444;
  --athex-red-dim:           rgba(255,68,68,0.08);
  --athex-green:             #00ff9f;
  --athex-green-dim:         rgba(0,255,159,0.10);
  --athex-blur:              40px;
  --athex-blur-sm:           16px;
  --athex-radius-card:       16px;
  --athex-radius-btn:        999px;
  --athex-radius-pill:       100px;
  /* Vero UNIVERSAL-DESIGN-KIT control radius. Compact internal rows and multiline
     fields use this; inputs, buttons, selectors, segmented controls and active
     navigation use full-pill geometry. */
  --athex-radius-control:    8px;
  --athex-ease:              cubic-bezier(0.22, 0.68, 0, 1);
  --athex-ease-spring:       cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 'Poppins Vero' is Vero's OWN @font-face for the same typeface, served from
     its own origin because its CSP has no Google Fonts. The widget asked only
     for 'Poppins', which Vero does not define, so every heading and every
     wordmark in the account card fell back to the system sans. Measured on
     production: zero font files fetched and zero loaded faces on Vero, against
     Poppins 600/700/900 on Anda Reno. Naming both means each host resolves the
     one it has, and neither needs the other's font pipeline. */
  --athex-font-display:      'Poppins', 'Poppins Vero', -apple-system, sans-serif;
  --athex-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --athex-font-mono:         'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --athex-shadow-card:       0 24px 80px rgba(0,0,0,0.55), 0 0 50px rgba(0,229,255,0.06), inset 0 1px 0 rgba(255,255,255,0.10);
  --athex-shadow-menu:       0 12px 40px rgba(0,0,0,0.60), 0 0 30px rgba(0,229,255,0.05), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── Reset (scoped to athex- elements only) ─────────────────── */
.athex-tile,
.athex-tile *,
.athex-overlay,
.athex-overlay *,
.athex-panel,
.athex-panel *,
.athex-navbar-root,
.athex-navbar-root *,
.athex-navbar,
.athex-navbar * {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* Overlay fade */
@keyframes athex-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card entrance — spring curve */
@keyframes athex-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Menu dropdowns */
@keyframes athex-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes athex-menu-in-up {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Settings / admin pane swap */
@keyframes athex-pane-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Sub-flow: push in from right */
@keyframes athex-push-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Sub-flow: pop back out to right */
@keyframes athex-pop-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Sub-flow: previous view slides left (parallax) */
@keyframes athex-push-back {
  from { transform: translateX(0);     opacity: 1;   }
  to   { transform: translateX(-30%);  opacity: 0.5; }
}

/* Toast */
@keyframes athex-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes athex-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
/* Loader spinner */
@keyframes athex-spin {
  to { transform: rotate(360deg); }
}

/* Breathing cyan glow on the login card — 3s cycle */
@keyframes athex-breathe {
  0%,  100% { box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 50px rgba(0,229,255,0.06), inset 0 1px 0 rgba(255,255,255,0.10); }
  50%        { box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 80px rgba(0,229,255,0.14), inset 0 1px 0 rgba(255,255,255,0.10); }
}

/* Border shimmer — subtle brightness sweep across the card border */
@keyframes athex-border-shimmer {
  0%   { border-color: rgba(255,255,255,0.11); }
  40%  { border-color: rgba(0,229,255,0.22); }
  60%  { border-color: rgba(255,255,255,0.18); }
  100% { border-color: rgba(255,255,255,0.11); }
}

/* Autofill detection hook — intentionally empty, triggers JS via animationstart */
@keyframes athex-autofill-detect {
  from {}
  to   {}
}

/* Error shake — horizontal 4-bounce */
@keyframes athex-shake {
  0%,  100% { transform: translateX(0); }
  15%        { transform: translateX(-6px); }
  30%        { transform: translateX(5px); }
  45%        { transform: translateX(-4px); }
  60%        { transform: translateX(3px); }
  75%        { transform: translateX(-2px); }
  90%        { transform: translateX(1px); }
}


/* ══════════════════════════════════════════════════════════════
   INLINE GLASS TILE — the logged-in user pill in host app navbar
   ══════════════════════════════════════════════════════════════ */

.athex-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* PILL-SHAPED, because the material below paints on THIS element.
     .athex-tile is in the glass list (inset highlight, gradient, drop shadow)
     and had no radius, so it painted a SQUARE behind a button whose own radius
     is 100px — measured on production at 86x44 with border-radius 0px around an
     86x44 pill. The corners were the "box around the account pill". */
  border-radius: 999px;
}

/* ── JOIN WIZARD PROGRESS ──
   A real percentage, not dots: the operator's spec for account creation. The
   fill is the accent the card already speaks; the track is the glass edge. */
.athex-join-progress { margin-bottom: 14px; }
.athex-join-progress__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.athex-join-progress__step {
  font-family: var(--athex-font-body);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.athex-join-progress__pct {
  font-family: var(--athex-font-mono, monospace);
  font-size: 0.72rem; color: rgba(255,255,255,0.75);
}
.athex-join-progress__bar {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.10);
}
.athex-join-progress__fill {
  height: 100%; border-radius: inherit;
  background: var(--athex-cyan);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.athex-join-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
}
.athex-circle-btn--accent { color: var(--athex-cyan); border-color: var(--athex-cyan-border); }
.athex-circle-btn--busy .athex-icon svg { animation: athex-spin 0.9s linear infinite; }

.athex-join-step-title {
  font-family: var(--athex-font-display);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  color: #f1f5f9; margin: 0 0 10px;
}

/* Login CTA (logged-out state) */
.athex-tile__login-btn {
  font-family: var(--athex-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--athex-cyan);
  text-decoration: none;
  padding: 6px 16px;
  min-height: 44px;
  border-radius: var(--athex-radius-pill);
  border: 1px solid var(--athex-cyan-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s var(--athex-ease);
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
}
.athex-tile__login-btn:hover {
  background: rgba(0,229,255,0.14);
  border-color: rgba(0,229,255,0.50);
  box-shadow: 0 0 12px rgba(0,229,255,0.15);
}

/* User pill (logged-in state) */
.athex-tile__user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  min-height: 44px;
  border-radius: var(--athex-radius-pill);
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.18);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s var(--athex-ease);
  font-family: var(--athex-font-body);
  color: var(--athex-cyan);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.athex-tile__user-btn:hover {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.38);
}
.athex-tile__user-btn[aria-expanded="true"] {
  background: rgba(0,229,255,0.13);
  border-color: rgba(0,229,255,0.42);
}
.athex-tile__user-btn[aria-expanded="true"] .athex-tile__chevron {
  transform: rotate(180deg);
}

.athex-tile__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,229,255,0.22), rgba(180,77,255,0.22));
  border: 1px solid rgba(0,229,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--athex-cyan);
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
}
.athex-tile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.athex-tile__name {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--athex-cyan);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athex-tile__chevron {
  width: 12px;
  height: 12px;
  color: rgba(255,255,255,0.28);
  transition: transform 0.22s var(--athex-ease);
  flex-shrink: 0;
}

/* Enterprise badge on tile */
.athex-tile__badge {
  font-size: 0.60rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,229,255,0.5);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.18);
  background: rgba(0,229,255,0.04);
}


/* ══════════════════════════════════════════════════════════════
   USER MENU DROPDOWN
   Always within viewport — JS flips direction as needed.
   ══════════════════════════════════════════════════════════════ */

.athex-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10000;
  width: 268px;
  padding: 6px;
  background: rgba(8, 15, 28, 0.94);
  -webkit-backdrop-filter: blur(var(--athex-blur)) saturate(1.7);
  backdrop-filter: blur(var(--athex-blur)) saturate(1.7);
  border: 1px solid rgba(0,229,255,0.16);
  border-radius: var(--athex-radius-card);
  box-shadow: var(--athex-shadow-menu);
  animation: athex-menu-in 0.20s var(--athex-ease) both;
}
.athex-menu[hidden] { display: none; }

/* Flip upward when near bottom of viewport */
.athex-menu--above {
  top: auto;
  bottom: calc(100% + 8px);
  animation: athex-menu-in-up 0.20s var(--athex-ease) both;
}

.athex-menu__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
}

.athex-menu__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,229,255,0.22), rgba(180,77,255,0.22));
  border: 1px solid rgba(0,229,255,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--athex-cyan);
  overflow: hidden;
}
.athex-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.athex-menu__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.athex-menu__name {
  font-family: var(--athex-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athex-menu__email {
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athex-menu__variant {
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--athex-cyan);
  opacity: 0.6;
}

.athex-menu__divider {
  height: 1px;
  margin: 2px 10px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.12), transparent);
}

.athex-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--athex-radius-control);
  font-family: var(--athex-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  transition: background 0.18s, color 0.18s;
}
.athex-menu__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.48;
  transition: opacity 0.18s, color 0.18s;
}
.athex-menu__item:hover {
  background: rgba(0,229,255,0.07);
  color: var(--athex-cyan);
}
.athex-menu__item:hover svg {
  opacity: 1;
  color: var(--athex-cyan);
}
.athex-menu__item--danger:hover {
  background: var(--athex-red-dim);
  color: var(--athex-red);
}
.athex-menu__item--danger:hover svg {
  color: var(--athex-red);
}


/* ══════════════════════════════════════════════════════════════
   GLASS CIRCLE ICON BUTTONS (Apple Liquid Glass pattern)
   X (close), Arrow (back), Plus (add)
   All 44px min for touch targets.
   ══════════════════════════════════════════════════════════════ */

.athex-circle-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  padding: 0;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 2px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.20s, border-color 0.20s, box-shadow 0.20s, color 0.20s;
  flex-shrink: 0;
}
.athex-circle-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.20);
}
.athex-circle-btn:active {
  transform: scale(0.93);
}
.athex-circle-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Hidden by default — JS shows back button on sub-flows */
.athex-circle-btn--back {
  display: none;
}
.athex-circle-btn--back.athex-visible {
  display: flex;
}

/* Cyan accent variant (for add/confirm actions) */
.athex-circle-btn--cyan {
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.22);
  color: var(--athex-cyan);
}
.athex-circle-btn--cyan:hover {
  background: rgba(0,229,255,0.16);
  border-color: rgba(0,229,255,0.40);
  color: var(--athex-cyan);
  box-shadow: 0 4px 20px rgba(0,229,255,0.18), inset 0 1px 0 rgba(0,229,255,0.12);
}


/* ══════════════════════════════════════════════════════════════
   OVERLAY BACKDROP
   Glass blur behind all modals/panels.
   Page behind is blurred 20px + saturation boost.
   ══════════════════════════════════════════════════════════════ */

.athex-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,11,20,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  animation: athex-overlay-in 0.22s ease both;
  padding: 20px;
  overflow: hidden; /* card never causes scroll — it is fixed-size */
}
.athex-overlay[hidden] { display: none; }


/* ══════════════════════════════════════════════════════════════
   AUTH CARD — glass tile, fixed size, centered in overlay
   Max 440px wide, overflow hidden (never grows).
   Breathing cyan glow + border shimmer animations.
   ══════════════════════════════════════════════════════════════ */

.athex-login-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.055);
  -webkit-backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.08);
  backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--athex-radius-card);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 50px rgba(0,229,255,0.06), inset 0 1px 0 rgba(255,255,255,0.10);
  animation:
    athex-card-in       0.28s var(--athex-ease-spring) both,
    athex-breathe       3s    ease-in-out              infinite 0.5s,
    athex-border-shimmer 5s   ease-in-out              infinite 1s;
  overflow: hidden; /* fixed-size — content inside never pushes card open */
}

/* ─── Card top controls row ──────────────────────────── */
.athex-login-card__controls {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none; /* children re-enable */
}
.athex-login-card__controls .athex-circle-btn {
  pointer-events: auto;
}

/* ─── Card header — logo + brand row ────────────────── */
.athex-login-card__header {
  text-align: center;
  padding: 48px 32px 0;
  flex-shrink: 0;
}

.athex-login-card__logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.athex-login-card__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Consumer variant: show brand name next to logo */
.athex-login-card__brand-name {
  font-family: var(--athex-font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
  margin: 0;
  line-height: 1;
}

/* Account-context subtitle */
.athex-login-card__subtitle {
  font-family: var(--athex-font-display);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,229,255,0.78);
  margin: 0;
}

/* ─── Pill tab selector — LOGIN | JOIN ───────────────── */
.athex-auth-tabs {
  display: flex;
  gap: 6px;
  padding: 20px 32px 0;
  flex-shrink: 0;
}

.athex-auth-tabs__pill {
  flex: 1;
  padding: 9px 16px;
  min-height: 44px;
  border-radius: var(--athex-radius-pill);
  font-family: var(--athex-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.20s ease, color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease;
  white-space: nowrap;
  text-align: center;
}

/* Inactive pill */
.athex-auth-tabs__pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.50);
}
.athex-auth-tabs__pill:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
}

/* Active pill */
.athex-auth-tabs__pill--active {
  background: rgba(0,229,255,0.15);
  border-color: rgba(0,229,255,0.38);
  color: var(--athex-cyan);
  box-shadow: 0 0 14px rgba(0,229,255,0.12);
}

/* ─── Auth form body — scrollable content area ───────── */
.athex-login-card__body {
  padding: 20px 32px 0;
  flex: 1;
  overflow: hidden; /* JS swaps panes; card never grows */
  position: relative;
}

/* Pane: each flow screen inside the card */
.athex-auth-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.athex-auth-pane--active {
  display: flex;
}

/* Push-in entrance from right */
.athex-auth-pane--push-in {
  animation: athex-push-in 0.26s var(--athex-ease-spring) both;
}

/* Pop-out to right (going back) */
.athex-auth-pane--pop-out {
  animation: athex-pop-out 0.22s var(--athex-ease) both;
}

/* Previous pane slides left underneath new one */
.athex-auth-pane--push-back {
  animation: athex-push-back 0.26s var(--athex-ease) both;
  pointer-events: none;
}

/* Error shake on the card or a form group */
.athex-shake {
  animation: athex-shake 0.4s ease both;
}

/* ─── Card footer ─────────────────────────────────────── */
.athex-login-card__footer {
  padding: 20px 32px 24px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Secured-by row */
.athex-login-card__secured-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.athex-login-card__secured-row svg {
  width: 12px;
  height: 12px;
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
}
.athex-login-card__secured {
  font-family: var(--athex-font-display);
  font-size: 0.63rem;
  font-weight: 600;
  /* 0.20em tracking pushed "SECURED BY PORTO ENTERPRISE" onto two lines inside a
     358px footer it shares with the becchio group lockup — it broke mid-phrase
     at 1280px, where there is room to spare. Micro-caps still read as micro-caps
     at 0.12em; the phrase now holds one line beside the second mark. */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0;
  white-space: nowrap;
}

/* Legal line */
.athex-login-card__legal {
  font-family: var(--athex-font-body);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.56);
  margin: 0;
  line-height: 1.5;
}
.athex-login-card__legal a {
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  transition: color 0.18s;
}
.athex-login-card__legal a:hover {
  color: var(--athex-cyan);
}


/* ══════════════════════════════════════════════════════════════
   SETTINGS PANEL — Apple iOS fixed-frame, tabs swap content
   ══════════════════════════════════════════════════════════════ */

.athex-settings-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  background: rgba(10,18,32,0.97);
  -webkit-backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.08);
  backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--athex-radius-card);
  box-shadow: var(--athex-shadow-card);
  animation: athex-card-in 0.28s var(--athex-ease) both;
  max-height: min(88vh, 680px);
  overflow: hidden;
}

/* Settings header bar — fixed, never scrolls */
.athex-settings-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 2px;
  flex-shrink: 0;
  position: relative;
}

.athex-settings-card__title {
  font-family: var(--athex-font-display);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
  flex: 1;
  text-align: center;
  margin: 0;
}

/* Tab bar — fixed below header, never scrolls */
.athex-settings-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 12px 18px 0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  flex-shrink: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.athex-settings-tabs::-webkit-scrollbar { display: none; }

.athex-settings-tabs__tab {
  flex: 1 0 auto;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.58);
  scroll-snap-align: center;
  transition: color 0.18s var(--athex-ease), border-color 0.18s var(--athex-ease), background-color 0.18s var(--athex-ease), box-shadow 0.18s var(--athex-ease), transform 0.1s ease;
  white-space: nowrap;
}
.athex-settings-tabs__tab:hover {
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.055);
}
.athex-settings-tabs__tab--active {
  color: #f1f5f9;
  border-color: rgba(0,229,255,0.30);
  background: rgba(0,229,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 20px -16px var(--athex-cyan);
}
.athex-settings-tabs__tab:active { transform: scale(0.985); }

/* Scrollable content area — fixed height, content scrolls inside */
.athex-settings-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.15) transparent;
}
.athex-settings-body::-webkit-scrollbar {
  width: 4px;
}
.athex-settings-body::-webkit-scrollbar-track {
  background: transparent;
}
.athex-settings-body::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.15);
  border-radius: 4px;
}

/* Tab pane switching */
.athex-settings-pane {
  display: none;
}
.athex-settings-pane--active {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: athex-pane-in 0.18s var(--athex-ease) both;
}

.athex-settings-tabs__tab:focus-visible,
.athex-settings-pane:focus-visible {
  outline: 2px solid var(--athex-cyan);
  outline-offset: -2px;
}

.athex-settings-pane:focus-visible {
  outline-offset: 4px;
}

.athex-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.athex-profile-identity__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.athex-profile-identity__text strong {
  overflow: hidden;
  color: #f1f5f9;
  font-family: var(--athex-font-body);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athex-profile-identity__text span,
.athex-avatar-picker__hint {
  color: rgba(255,255,255,0.64);
  font-family: var(--athex-font-body);
}

.athex-profile-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.athex-managed-scope {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: var(--athex-radius-card);
  background: rgba(0,229,255,0.055);
}
.athex-managed-scope__copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.athex-managed-scope__copy strong { color: #f1f5f9; font: 700 0.95rem/1.3 var(--athex-font-body); overflow-wrap: anywhere; }
.athex-managed-scope__copy span { color: rgba(255,255,255,0.64); font: 400 0.75rem/1.45 var(--athex-font-body); overflow-wrap: anywhere; }
.athex-managed-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
}
/* Profile, Manager and Admin Settings are ONE segmented control appearing on
   three surfaces of the same account, so they get ONE rule. They had three, and
   the Manager copy had already drifted: 8px 10px padding against 9px 14px, and
   0.62 text against 0.58 — enough that Manager Settings' tabs read tighter and
   brighter than the identical control on the other two screens. Design contract
   section 4: they should look like one control family because they are one.
   Keeping them as one rule is what stops the next drift. */
.athex-managed-tabs__tab {
  min-width: 0;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.58);
  cursor: pointer;
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.18s var(--athex-ease), border-color 0.18s var(--athex-ease), background-color 0.18s var(--athex-ease), transform 0.1s ease;
}
.athex-managed-tabs__tab:hover { color: #f1f5f9; background: rgba(255,255,255,0.055); }
.athex-managed-tabs__tab:active { transform: scale(0.985); }
.athex-managed-tabs__tab.is-active { color: #f1f5f9; border-color: rgba(0,229,255,0.30); background: rgba(0,229,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 20px -16px var(--athex-cyan); }
.athex-managed-tabs__tab:focus-visible { outline: 2px solid var(--athex-cyan); outline-offset: 2px; }
.athex-managed-panel { display: none; }
.athex-managed-panel.is-active { display: block; animation: athex-pane-in 0.18s var(--athex-ease) both; }
.athex-managed-form { display: flex; flex-direction: column; gap: 14px; }
.athex-managed-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: rgba(255,255,255,0.82); cursor: pointer; font: 500 0.84rem/1.4 var(--athex-font-body); }
.athex-managed-check input { width: 20px; height: 20px; accent-color: var(--athex-cyan); }
.athex-managed-signout { width: 100%; margin-top: 18px; }


/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — full-height slide-in from right
   ══════════════════════════════════════════════════════════════ */

.athex-admin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(5,11,20,0.65);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--athex-ease-spring);
}
.athex-admin-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.athex-admin-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10200;
  width: min(580px, 100vw);
  display: flex;
  flex-direction: column;
  background: rgba(10,18,32,0.96);
  -webkit-backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.06);
  backdrop-filter: blur(var(--athex-blur)) saturate(1.9) brightness(1.06);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -24px 0 80px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 0.38s var(--athex-ease-spring);
  overflow: hidden;
}
.athex-admin-panel--open {
  transform: translateX(0);
}

.athex-admin-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.athex-admin-panel__title {
  font-family: var(--athex-font-display);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #f1f5f9;
  flex: 1;
  margin: 0;
}

.athex-admin-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 20px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  flex-shrink: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.athex-admin-tabs::-webkit-scrollbar { display: none; }

.athex-admin-tabs__tab {
  flex: 1 0 auto;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.58);
  scroll-snap-align: center;
  transition: color 0.18s var(--athex-ease), border-color 0.18s var(--athex-ease), background-color 0.18s var(--athex-ease), transform 0.1s ease;
  white-space: nowrap;
}
.athex-admin-tabs__tab:hover { color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.055); }
.athex-admin-tabs__tab--active {
  color: #f1f5f9;
  border-color: rgba(0,229,255,0.30);
  background: rgba(0,229,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 20px -16px var(--athex-cyan);
}
.athex-admin-tabs__tab:active { transform: scale(0.985); }

.athex-admin-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.12) transparent;
}
.athex-admin-body::-webkit-scrollbar { width: 4px; }
.athex-admin-body::-webkit-scrollbar-track { background: transparent; }
.athex-admin-body::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.12);
  border-radius: 4px;
}

.athex-admin-pane { display: none; }
.athex-admin-pane--active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: athex-pane-in 0.18s var(--athex-ease) both;
}


/* ══════════════════════════════════════════════════════════════
   SHARED FORM ELEMENTS
   ══════════════════════════════════════════════════════════════ */

.athex-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.athex-form-row {
  display: flex;
  gap: 14px;
}
.athex-form-row .athex-form-group {
  flex: 1;
  min-width: 0;
}

.athex-label {
  font-family: var(--athex-font-display);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.athex-label__hint {
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255,255,255,0.20);
  margin-left: 4px;
}

.athex-input {
  padding: 10px 14px;
  border-radius: var(--athex-radius-btn);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f1f5f9;
  font-family: var(--athex-font-body);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s;
  width: 100%;
  min-height: 44px;
}
.athex-input::placeholder { color: rgba(255,255,255,0.16); }
.athex-input:focus {
  border-color: rgba(0,229,255,0.42);
  box-shadow: 0 0 10px rgba(0,229,255,0.10);
}
.athex-input:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.athex-input--error {
  border-color: rgba(255,68,68,0.50);
}
.athex-input--valid {
  border-color: rgba(0,255,159,0.38);
}
select.athex-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.athex-login-disclosure a:focus,
.athex-clickwrap__text a:focus,
.athex-login-disclosure a:focus-visible,
.athex-clickwrap__text a:focus-visible {
  outline: 2px solid var(--athex-cyan, #00E0FF);
  outline-offset: 2px;
}

.athex-legal-links__link {
  position: relative;
}

.athex-legal-links__link::after {
  content: "";
  position: absolute;
  inset: -16px 0;
}

.athex-legal-links__link:focus-visible {
  outline: 2px solid var(--athex-cyan, #00E0FF);
  outline-offset: 3px;
}

.athex-legal-links__link:hover {
  color: rgba(0,229,255,0.85) !important;
}

/* Autofill detection — animationstart fires when browser fills this */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  animation-name: athex-autofill-detect;
  animation-duration: 0.001ms;
  -webkit-box-shadow: 0 0 0 1000px #05182f inset !important;
  box-shadow: 0 0 0 1000px #05182f inset !important;
  -webkit-text-fill-color: #e8eaf0 !important;
  caret-color: #e8eaf0 !important;
  border-color: rgba(0,229,255,0.34) !important;
  -webkit-background-clip: padding-box;
}

.athex-select {
  padding: 10px 14px;
  border-radius: var(--athex-radius-btn);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f1f5f9;
  font-family: var(--athex-font-body);
  font-size: 0.82rem;
  outline: none;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.22s;
}
.athex-select:focus {
  border-color: rgba(0,229,255,0.42);
}

.athex-textarea {
  padding: 10px 14px;
  border-radius: var(--athex-radius-control);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: #f1f5f9;
  font-family: var(--athex-font-body);
  font-size: 0.82rem;
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.22s;
}
.athex-textarea:focus {
  border-color: rgba(0,229,255,0.42);
}

/* Primary action button */
.athex-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--athex-radius-pill);
  min-height: 44px;
  background: var(--athex-cyan);
  border: 1px solid var(--athex-cyan);
  color: #050b14;
  cursor: pointer;
  width: 100%;
  font-family: var(--athex-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.20s var(--athex-ease), border-color 0.20s var(--athex-ease), transform 0.12s var(--athex-ease), box-shadow 0.20s var(--athex-ease);
}
.athex-btn:hover {
  background: #66f0ff;
  border-color: #66f0ff;
  box-shadow: 0 8px 24px -16px rgba(0,229,255,0.65);
}
.athex-btn:active { transform: scale(0.985); }
.athex-btn:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  transform: none;
}
.athex-btn--danger {
  background: var(--athex-red-dim);
  border-color: rgba(255,68,68,0.35);
  color: var(--athex-red);
}
.athex-btn--danger:hover {
  background: rgba(255,68,68,0.14);
  border-color: rgba(255,68,68,0.55);
  box-shadow: 0 4px 24px rgba(255,68,68,0.15);
}
.athex-btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}
.athex-btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #f1f5f9;
  box-shadow: none;
}
.athex-btn--sm {
  padding: 8px 16px;
  min-height: 44px;
  font-size: 0.78rem;
  border-radius: 999px;
  width: auto;
}

/* Section heading inside panels */
.athex-section-heading {
  font-family: var(--athex-font-display);
  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Glass card row (profile info row, user list row, etc.) */
.athex-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.18s, border-color 0.18s;
}
.athex-row:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.10);
}
.athex-row--interactive { cursor: pointer; }
.athex-row__label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  flex: 1;
}
.athex-row__value {
  font-size: 0.78rem;
  color: #f1f5f9;
  text-align: right;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toggle switch */
.athex-toggle {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.athex-toggle__track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  flex-shrink: 0;
  transition: background 0.22s, border-color 0.22s;
}
.athex-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.athex-toggle input[type="checkbox"]:focus-visible + .athex-toggle__track {
  outline: 2px solid var(--athex-cyan);
  outline-offset: 2px;
}
.athex-toggle input[type="checkbox"]:checked + .athex-toggle__track {
  background: rgba(0,229,255,0.22);
  border-color: rgba(0,229,255,0.38);
}
.athex-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.50);
  transition: transform 0.22s var(--athex-ease), background 0.22s;
}
.athex-toggle input[type="checkbox"]:checked ~ .athex-toggle__track .athex-toggle__thumb,
.athex-toggle input[type="checkbox"]:checked + .athex-toggle__track .athex-toggle__thumb {
  transform: translateX(18px);
  background: var(--athex-cyan);
}
.athex-toggle__label {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.65);
}

/* Inline error / success messages */
.athex-msg {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  border-radius: var(--athex-radius-control);
  padding: 8px 12px;
}
.athex-msg[hidden] { display: none; }
.athex-msg--error {
  background: var(--athex-red-dim);
  border: 1px solid rgba(255,68,68,0.18);
  color: var(--athex-red);
}
.athex-msg--success {
  background: var(--athex-green-dim);
  border: 1px solid rgba(0,255,159,0.18);
  color: var(--athex-green);
}
.athex-msg--info {
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.14);
  color: rgba(0,229,255,0.80);
}

/* Password strength bars */
.athex-pw-strength {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.athex-pw-strength__bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.athex-pw-strength__bar--weak   { background: var(--athex-red); }
.athex-pw-strength__bar--fair   { background: #ffaa00; }
.athex-pw-strength__bar--good   { background: #88dd00; }
.athex-pw-strength__bar--strong { background: var(--athex-green); }
.athex-pw-strength__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
}

/* Avatar picker */
.athex-avatar-picker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.athex-avatar-picker__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,229,255,0.20), rgba(180,77,255,0.20));
  border: 1px solid rgba(0,229,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--athex-cyan);
  overflow: hidden;
  flex-shrink: 0;
}
.athex-avatar-picker__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.athex-avatar-picker__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.athex-avatar-picker__hint {
  max-width: 32ch;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.64);
}

.athex-settings-legal {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.64);
  font-family: var(--athex-font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}
.athex-settings-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.82);
  text-underline-offset: 3px;
}

.athex-product-access-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.athex-product-access-card {
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--athex-radius-card);
  background: rgba(255,255,255,0.045);
}
.athex-product-access-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.athex-product-access-card h3,
.athex-product-access-card p { margin: 0; }
.athex-product-access-card h3 {
  font-family: var(--athex-font-display);
  font-size: 0.95rem;
  font-weight: 800;
}
.athex-product-access-card__heading span {
  color: var(--athex-green);
  font-size: 0.75rem;
  font-weight: 700;
}
.athex-product-access-card p {
  margin-top: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.84rem;
  line-height: 1.5;
}
.athex-product-access-card small {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,0.62);
  font-size: 0.75rem;
}
.athex-access-redeem {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.athex-access-redeem__title {
  margin: 0;
  color: #f1f5f9;
  font-family: var(--athex-font-display);
  font-size: 0.95rem;
  font-weight: 800;
}
.athex-access-redeem__form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.athex-access-redeem__open {
  display: inline-flex;
  width: 100%;
  text-decoration: none;
}
.athex-invite-builder {
  padding-top: 20px;
}
.athex-invite-builder form,
.athex-invite-builder__choices {
  display: grid;
  gap: 14px;
}
.athex-invite-builder form {
  margin-top: 16px;
}
.athex-invite-builder__section {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.athex-invite-builder__section .athex-section-heading {
  margin-bottom: 2px;
}
.athex-invite-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.035);
  cursor: pointer;
}
.athex-invite-choice:has(input:checked) {
  border-color: rgba(0,229,255,0.34);
  background: rgba(0,229,255,0.075);
}
.athex-invite-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--athex-cyan);
  flex: 0 0 auto;
}
.athex-invite-choice span,
.athex-invite-choice strong,
.athex-invite-choice small {
  display: block;
  min-width: 0;
}
.athex-invite-choice strong {
  color: #f1f5f9;
  font: 700 0.82rem/1.3 var(--athex-font-body);
}
.athex-invite-choice small,
.athex-invitation-groups {
  margin-top: 2px;
  color: rgba(255,255,255,0.48);
  font: 400 0.68rem/1.4 var(--athex-font-body);
  overflow-wrap: anywhere;
}

.athex-account-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0 8px;
  text-align: center;
}
.athex-account-setup h2 {
  margin: 0;
  color: #f1f5f9;
  font: 900 1.375rem/1.2 var(--athex-font-display);
}
.athex-account-setup p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255,255,255,0.72);
  font: 400 0.875rem/1.55 var(--athex-font-body);
}
.athex-account-setup__actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}

/* User list rows (admin panel) */
.athex-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.athex-user-row:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(0,229,255,0.14);
}
.athex-user-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(180,77,255,0.18));
  border: 1px solid rgba(0,229,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--athex-cyan);
  overflow: hidden;
  flex-shrink: 0;
}
.athex-user-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.athex-user-row__info {
  flex: 1;
  min-width: 0;
}
.athex-user-row__name {
  font-size: 0.80rem;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athex-user-row__email {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athex-user-row__badge {
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.athex-user-row__badge--admin {
  background: rgba(0,229,255,0.10);
  border: 1px solid rgba(0,229,255,0.20);
  color: var(--athex-cyan);
}
.athex-user-row__badge--disabled {
  background: rgba(255,68,68,0.08);
  border: 1px solid rgba(255,68,68,0.18);
  color: var(--athex-red);
}

/* Household membership and role management */
.athex-household-intro,
.athex-household-add-copy,
.athex-household-readonly {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-family: var(--athex-font-body);
  font-size: 0.875rem;
  line-height: 1.55;
}
.athex-household-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.athex-household-name {
  margin: 0 0 4px;
  color: rgba(255,255,255,0.72);
  font-family: var(--athex-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.athex-household-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.athex-household-rename { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.athex-household-rename .athex-input { min-width: 0; width: min(190px, 38vw); }
.athex-household-member {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.035);
}
.athex-household-member__info {
  min-width: 0;
}
.athex-household-member__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.athex-household-member__name-text {
  min-width: 0;
  color: #e8eaf0;
  font-family: var(--athex-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.athex-household-member__email {
  margin-top: 2px;
  color: rgba(255,255,255,0.62);
  font-family: var(--athex-font-body);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.athex-household-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.72);
  font-family: var(--athex-font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.athex-household-badge--manager {
  border-color: rgba(0,229,255,0.28);
  background: rgba(0,229,255,0.10);
  color: var(--athex-cyan);
}
.athex-household-badge--you {
  background: rgba(255,255,255,0.07);
}
.athex-household-member__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.athex-household-action {
  min-width: 68px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(0,229,255,0.24);
  border-radius: 999px;
  background: rgba(0,229,255,0.08);
  color: var(--athex-cyan);
  cursor: pointer;
  font: 700 0.70rem/1 var(--athex-font-body);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.athex-household-action:hover {
  border-color: rgba(0,229,255,0.48);
  background: rgba(0,229,255,0.16);
}
.athex-household-action--danger {
  border-color: rgba(255,68,68,0.28);
  background: rgba(255,68,68,0.08);
  color: var(--athex-red);
}
.athex-household-action--danger:hover {
  border-color: rgba(255,68,68,0.50);
  background: rgba(255,68,68,0.14);
}
.athex-household-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.athex-household-add {
  margin-top: 2px;
}
.athex-household-empty,
.athex-household-error {
  margin: 0;
  padding: 20px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
  color: rgba(255,255,255,0.68);
  font-family: var(--athex-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}
.athex-household-error {
  border-color: rgba(255,68,68,0.24);
}
.athex-household-error p {
  margin: 0 0 12px;
}
.athex-household-invite {
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.035);
}
.athex-household-invite h3 {
  margin: 0;
  color: #e8eaf0;
  font-family: var(--athex-font-body);
  font-size: 1rem;
}
.athex-household-invite > p {
  margin: 6px 0 14px;
  color: rgba(255,255,255,0.68);
  font-family: var(--athex-font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.athex-household-invite__result:not(:empty) {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--athex-radius-control);
  background: rgba(0,0,0,0.22);
  text-align: center;
}
.athex-household-invite__result p {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.68);
  font-family: var(--athex-font-body);
  font-size: 0.75rem;
}
.athex-household-invite__result code {
  display: block;
  color: var(--athex-cyan);
  font-family: var(--athex-font-mono, monospace);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  user-select: all;
}
.athex-household-invite__result .athex-household-invite__note {
  margin: 8px 0 0;
  font-size: 0.6875rem;
}
.athex-household-child-heading {
  margin-top: 4px;
}

@media (max-width: 599px) {
  .athex-settings-body {
    padding: 20px 16px 28px;
  }
  .athex-household-member {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .athex-household-member__actions {
    grid-column: 2;
    justify-content: stretch;
  }
  .athex-household-action {
    flex: 1;
  }
}

/* Loader spinner */
.athex-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0,229,255,0.15);
  border-top-color: var(--athex-cyan);
  border-radius: 50%;
  animation: athex-spin 0.70s linear infinite;
  flex-shrink: 0;
}

/* Loading state centered in a panel */
.athex-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  color: rgba(255,255,255,0.35);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

/* Toast notification */
.athex-toast-container {
  /* The manual popover paints in the platform top layer while its DOM stays
     in the dialog's focus scope. z-index is only the older-browser fallback.
     Reset the popover UA box so fixed placement remains viewport-relative. */
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  width: auto;
  height: auto;
  overflow: visible;
  position: fixed;
  /* HEADER CLEARANCE. Hosts set --athex-header-clearance to their header height
     plus 8px. The default, 76px, clears the tallest known header (68px). */
  top: calc(env(safe-area-inset-top, 0px) + var(--athex-header-clearance, 76px));
  left: 0;
  right: 0;
  bottom: auto;
  z-index: var(--athex-toast-z, 2147483647);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.athex-toast-container::backdrop { background: transparent; pointer-events: none; }
.athex-toast-region {
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.athex-toast {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  max-width: min(360px, 100%);
  padding: 0 4px 0 16px;
  border-radius: var(--athex-radius-card);
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #f1f5f9;
  background: rgba(8,15,28,0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.40);
  pointer-events: auto;
  cursor: pointer;
  animation: athex-toast-in 0.22s var(--athex-ease) both;
}
.athex-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* An error's detail is the point of it: never clamped. */
.athex-toast--error .athex-toast__text { display: block; overflow: visible; }
.athex-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--athex-radius-control);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.athex-toast__close:hover, .athex-toast__close:focus-visible { opacity: 1; }
.athex-toast__close .athex-icon { width: 16px; height: 16px; }
.athex-toast--success { border-color: rgba(0,255,159,0.22); }
.athex-toast--error   { border-color: rgba(255,68,68,0.22); }
.athex-toast--info    { border-color: rgba(0,229,255,0.18); }
.athex-toast--exit {
  animation: athex-toast-out 0.28s var(--athex-ease) both;
}
/* After every animation declaration above, so it wins at equal specificity. */
@media (prefers-reduced-motion: reduce) {
  .athex-toast, .athex-toast--exit { animation: none; }
  .athex-toast--exit { opacity: 0; }
}

/* TOTP / 2FA code input */
.athex-totp-input {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}
.athex-totp-digit {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--athex-font-mono);
  color: var(--athex-cyan);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--athex-radius-control);
  outline: none;
  transition: border-color 0.20s, box-shadow 0.20s;
}
.athex-totp-digit:focus {
  border-color: rgba(0,229,255,0.45);
  box-shadow: 0 0 10px rgba(0,229,255,0.12);
}

/* QR code container for 2FA setup */
.athex-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
}
.athex-qr-container img {
  width: 180px;
  height: 180px;
  image-rendering: pixelated;
}
.athex-qr-secret {
  font-family: var(--athex-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  color: rgba(0,229,255,0.70);
  word-break: break-all;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════
   AUTH CARD — VIEWPORT-SAFE CONSTRAINTS
   Card must NEVER overflow any viewport. Max 360px wide, 90vh
   tall. Steps replace each other via the pane system — no stacking.
   ══════════════════════════════════════════════════════════════ */

.athex-login-card {
  /* Override the static 440px — hard-cap at 360px per spec */
  max-width: 360px;
  /* Enforce 90vh ceiling on ALL viewports, not just mobile */
  max-height: 90vh;
  /* When the card hits the height ceiling, let the body scroll internally */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* children never push past the card boundary */
}

/* The card body scrolls when content overflows the fixed card height */
.athex-login-card__body {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.athex-login-card__body::-webkit-scrollbar {
  display: none;
}

/* Card header: tighter on small screens */
.athex-login-card__header {
  padding: 40px 28px 0;
  flex-shrink: 0;
}

/* Tabs: tighter padding */
.athex-auth-tabs {
  padding: 14px 28px 0;
  flex-shrink: 0;
}

/* Body: uniform padding, never zero — including the BOTTOM.
   This scrolls (overflow-y:auto) inside a fixed-height card, and its last child
   is the primary action. With 0 bottom padding that action sat flush against the
   card's bottom edge and collided with the footer: on LOGIN the two boxes touched
   exactly (621.5/621.5), and on JOIN — whose Continue button is 47px, not 44px —
   the action overlapped the footer by 9px. Node 2's Porto visual verifier caught
   it as "JOIN action is not covered by the footer". */
.athex-login-card__body {
  padding: 16px 28px 12px;
}

/* Footer: compact — just enough breathing room */
.athex-login-card__footer {
  padding: 12px 28px 16px;
  flex-shrink: 0;
}

/* Step-based join panes — gaps tightened so two ~3-field steps fit */
.athex-auth-pane {
  gap: 12px; /* was 16px globally */
}

/* Clickwrap legal bar — used inside join forms */
.athex-clickwrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--athex-radius-control);
}
.athex-clickwrap__checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--athex-cyan);
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
}
.athex-clickwrap__text {
  font-family: var(--athex-font-body);
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.38);
}
.athex-clickwrap__text a {
  display: inline;
  color: rgba(0,229,255,0.65);
  text-decoration: none;
  transition: color 0.18s;
}
.athex-clickwrap__text a:hover {
  color: var(--athex-cyan);
}
.athex-login-disclosure {
  margin: -2px 2px 0;
  text-align: center;
}

/* Turnstile container — center it, never overflow */
.athex-turnstile-wrap {
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

/* Step indicator dots (optional visual cue) */
.athex-step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 2px;
}
.athex-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.22s;
  flex-shrink: 0;
}
.athex-step-dot--active {
  background: var(--athex-cyan);
}

/* Household toggle row in consumer join step 2 */
.athex-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.athex-toggle-row__label {
  font-family: var(--athex-font-body);
  font-size: 0.80rem;
  color: rgba(255,255,255,0.58);
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first, scale up
   ══════════════════════════════════════════════════════════════ */

/* Mobile: side padding reduced. The card CENTRES, like every other width.
   It used to rise from the bottom as a sheet, which is a fine pattern when the
   sheet covers something — but the sign-in card has nothing behind it, so it
   read as a card stranded at the bottom of an empty screen. */
@media (max-width: 479px) {
  .athex-overlay {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  #athex-settings-overlay {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .athex-login-card {
    max-width: 100%;
    /* Rounded on every corner now that it floats rather than sits on the edge. */
    border-radius: var(--athex-radius-card);
    /* Hard ceiling: leave 56px for the fixed navbar at top */
    max-height: calc(100vh - 56px);
  }
  .athex-login-card__header {
    padding: 28px 16px 0;
  }
  /* Logo sizing — compact at 375px */
  .athex-login-card__logo--icon {
    width: 36px !important;
    height: 36px !important;
  }
  .athex-login-card__logo--wordmark {
    height: 16px !important;
  }
  .athex-auth-tabs {
    padding: 10px 16px 0;
  }
  .athex-settings-tabs {
    flex-wrap: nowrap;
    margin: 10px 12px 0;
    padding: 4px;
  }
  .athex-settings-tabs__tab {
    flex: 0 0 auto;
    min-width: 88px;
    padding: 8px 13px;
    min-height: 44px;
    text-align: center;
  }
  .athex-login-card__body {
    padding: 12px 16px 0;
  }
  .athex-login-card__footer {
    padding: 10px 16px 12px;
  }
  /* Tighten pane gaps on small screens */
  .athex-auth-pane {
    gap: 10px;
  }
  /* Inputs: compact but still 44px min-height touch target */
  .athex-input {
    padding: 9px 12px;
    font-size: 0.80rem;
  }
  /* Button: keep 44px */
  .athex-btn {
    padding: 10px 20px;
    min-height: 44px;
    font-size: 0.78rem;
  }
  .athex-settings-card {
    max-width: 100%;
    height: calc(100dvh - 24px);
    max-height: none;
    border-radius: var(--athex-radius-card);
  }
  .athex-settings-card__header { padding: 14px 14px 2px; }
  .athex-settings-body { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .athex-admin-tabs { margin-inline: 12px; }
  .athex-admin-panel {
    width: 100vw;
  }
  .athex-form-row {
    flex-direction: column;
    gap: 10px;
  }
  .athex-tile__name {
    max-width: 80px;
  }
  /* Clickwrap: tighter on mobile */
  .athex-clickwrap {
    padding: 8px 10px;
    gap: 8px;
  }
  .athex-clickwrap__text {
    font-size: 0.64rem;
  }
  /* Turnstile: scale down slightly if it overflows */
  .athex-turnstile-wrap iframe,
  .athex-turnstile-wrap > div {
    transform-origin: left center;
    max-width: 100%;
  }
}

/* Tablet and up */
@media (min-width: 480px) {
  .athex-login-card {
    /* On larger screens: centered modal, not bottom-sheet */
    max-width: 360px;
    /* 90vh is only 648px on a 1280x720 laptop, and JOIN — email, password,
       display name, the agreement block and Continue — does not fit in that.
       The primary action was pushed into the footer's band and overlapped it by
       9px, which Node 2's Porto visual verifier fails as "JOIN action is not
       covered by the footer". 1280x720 and 1366x768 are common laptops, so this
       was real, not a test artifact. */
    max-height: min(96vh, 760px);
    border-radius: var(--athex-radius-card);
  }
}

@media (min-width: 768px) {
  .athex-settings-card {
    max-height: min(84vh, 680px);
  }
  .athex-login-card {
    max-width: 360px;
  }
  .athex-login-card__header {
    padding: 40px 32px 0;
  }
  .athex-auth-tabs {
    padding: 16px 32px 0;
  }
  .athex-login-card__body {
    /* Bottom padding is NOT decorative here. This body scrolls inside a
       fixed-height card and its last child is the primary action; at 0 the
       action sat flush on the card's bottom edge and collided with the footer
       (JOIN's 47px Continue overlapped it by 9px). This min-width:768px block is
       the one that actually governs desktop — the base rule was being overridden
       here, which is why fixing the base changed nothing. */
    padding: 16px 32px 12px;
  }
  .athex-login-card__footer {
    padding: 14px 32px 18px;
  }
}

/* ──────────────────────────────────────────────────────────
   LINK BUTTON — ghost text-only button (Forgot password?, etc.)
   ────────────────────────────────────────────────────────── */
.athex-link-btn {
  background: none;
  border: none;
  /* 20px of paint, 44px of target. "Forgot password?" is a standalone control —
     the one a locked-out person reaches for — and it measured 20px tall on the
     sign-in card. The contract's minimum is about what a thumb hits, not how
     big the text looks, so the hit area is extended rather than the type. */
  position: relative;
  padding: 4px 6px;
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  /* was 0.35 -- 3.21:1, under the 4.5:1 AA minimum */
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.15);
  transition: color 0.18s, text-decoration-color 0.18s;
  /* line-height:1 clipped the label's descenders at 200% root font-size */
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  max-width: 100%;
}
.athex-link-btn::after {
  content: "";
  position: absolute;
  /* The button paints ~19.6px, so -12px lands a hair UNDER 44 and a rounded
     measurement hides it. -13px clears the minimum outright. */
  inset: -13px -8px;
}
.athex-link-btn:hover {
  color: var(--athex-cyan);
  text-decoration-color: rgba(0,229,255,0.40);
}

/* Large screens */
@media (min-width: 1280px) {
  .athex-admin-panel {
    width: 580px;
  }
  .athex-menu {
    width: 280px;
  }
}

/* ── Success Animation ── */
.athex-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  min-height: 280px;
}

.athex-success__circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0,255,159,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: athex-success-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.athex-success__check {
  width: 40px;
  height: 40px;
}

.athex-success__check circle {
  stroke: var(--athex-green, #00ff9f);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 188;
  stroke-dashoffset: 188;
  animation: athex-draw-circle 0.4s ease forwards 0.1s;
}

.athex-success__check path {
  stroke: var(--athex-green, #00ff9f);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: athex-draw-check 0.3s ease forwards 0.4s;
}

.athex-success__text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--athex-green, #00ff9f);
  opacity: 0;
  animation: athex-fade-in 0.3s ease forwards 0.5s;
}

@keyframes athex-success-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes athex-draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes athex-draw-check {
  to { stroke-dashoffset: 0; }
}

@keyframes athex-fade-in {
  to { opacity: 1; }
}

/* ── Join Form ── */
.athex-join-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.athex-join-form .athex-form-row {
  display: flex;
  gap: 12px;
}

.athex-join-form .athex-form-row > * {
  flex: 1;
}

@media (max-width: 479px) {
  .athex-join-form .athex-form-row {
    flex-direction: column;
  }
}

/* ── Password Strength Meter ── */
.athex-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.athex-strength__bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  transition: background 0.25s ease;
}

.athex-strength--1 .athex-strength__bar:nth-child(1) { background: var(--athex-red, #ff4444); }
.athex-strength--2 .athex-strength__bar:nth-child(-n+2) { background: #ff9800; }
.athex-strength--3 .athex-strength__bar:nth-child(-n+3) { background: var(--athex-cyan, #00e5ff); }
.athex-strength--4 .athex-strength__bar { background: var(--athex-green, #00ff9f); }

.athex-strength__label {
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

/* ── Access Code ── */
.athex-access-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  text-align: center;
}

.athex-access-code__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,229,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.athex-access-code__icon svg {
  width: 24px;
  height: 24px;
  color: var(--athex-cyan, #00e5ff);
}

.athex-access-code__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
}

.athex-access-code__desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  max-width: 320px;
}

/* ── Passkey Button ── */
.athex-passkey-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.5);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.athex-passkey-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7);
}

.athex-passkey-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.athex-passkey-btn svg {
  width: 18px;
  height: 18px;
}

/* ── Copy Button ── */
.athex-copy-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.athex-copy-btn:hover {
  background: rgba(0,229,255,0.1);
  border-color: rgba(0,229,255,0.25);
  color: var(--athex-cyan, #00e5ff);
}

.athex-copy-btn svg {
  width: 14px;
  height: 14px;
}

/* The visual button stays 32px on purpose; the target must not. Design contract
   section 2: keep the visual box small, give it an invisible >=44px hit area. */
.athex-copy-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* ── Success glow on card ── */
.athex-login-card--success {
  box-shadow: 0 24px 80px rgba(0,0,0,0.55),
              0 0 60px rgba(0,255,159,0.10),
              inset 0 1px 0 rgba(255,255,255,0.10);
  border-color: rgba(0,255,159,0.15);
}

/* ══════════════════════════════════════════════════════════════
   PROSPECT ACCESS CODE TILE  (2026-04-27)
   Visually mirrors the Account Join card. Minimal additions —
   reuses all existing .athex-login-card, .athex-btn, .athex-input
   etc. Only new patterns are added here.
   ══════════════════════════════════════════════════════════════ */

/* Subtitle row that sits where pill tabs sit on the login card */
.athex-prospect-access-subtitle-row {
  padding: 14px 28px 0;
  flex-shrink: 0;
  text-align: center;
}

.athex-prospect-access-subtitle {
  font-family: var(--athex-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.42);
  margin: 0;
  text-transform: uppercase;
}

/* Code input: monospace, large, generous letter-spacing for readability */
.athex-prospect-access-code-input {
  font-family: var(--athex-font-mono) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  text-align: center;
}

/* Inline validation status indicator */
.athex-prospect-access-validation {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 0 0;
  transition: color 0.2s;
}

.athex-prospect-access-validation[hidden] {
  display: none;
}

.athex-prospect-access-validation--pending {
  color: rgba(255,255,255,0.38);
}

.athex-prospect-access-validation--valid {
  color: var(--athex-green);
}

/* valid: prepend a check glyph via CSS */
.athex-prospect-access-validation--valid::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  /* Checkmark: background-image SVG uri (no emoji) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2300ff9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5,6 4.5,9 10.5,3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.athex-prospect-access-validation--error {
  color: var(--athex-red);
}

/* error: prepend an x glyph */
.athex-prospect-access-validation--error::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ff4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='2' x2='10' y2='10'/%3E%3Cline x1='10' y1='2' x2='2' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* Help text below the submit button */
.athex-prospect-access-help {
  font-family: var(--athex-font-body);
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.38);
  text-align: center;
  margin: 0;
}

.athex-prospect-access-help a {
  color: rgba(0,229,255,0.65);
  text-decoration: none;
  transition: color 0.18s;
}

.athex-prospect-access-help a:hover {
  color: var(--athex-cyan);
}

.athex-prospect-access-help--dim {
  color: rgba(255,255,255,0.22);
  margin-top: 6px;
}

/* Mobile overrides */
@media (max-width: 479px) {
  .athex-prospect-access-subtitle-row {
    padding: 10px 16px 0;
  }
  .athex-prospect-access-code-input {
    font-size: 0.95rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* Tablet and up */
@media (min-width: 480px) {
  .athex-prospect-access-subtitle-row {
    padding: 16px 32px 0;
  }
}

/* ── MFA Status ── */
.athex-mfa-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
  margin-bottom: 12px;
}

.athex-mfa-status__label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.athex-mfa-status__badge {
  font-size: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 100px;
}

.athex-mfa-status__badge--enabled {
  background: rgba(0,255,159,0.12);
  color: var(--athex-green, #00ff9f);
}

.athex-mfa-status__badge--disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
}

/* Passkey device row */
.athex-passkey-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--athex-radius-control);
  margin-bottom: 8px;
}

.athex-passkey-device__name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.athex-passkey-device__date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

.athex-passkey-device__remove {
  font-size: 11px;
  color: var(--athex-red, #ff4444);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--athex-radius-control);
  transition: background 0.2s;
}

.athex-passkey-device__remove:hover {
  background: rgba(255,68,68,0.1);
}


/* ══════════════════════════════════════════════════════════════
   UNIFIED NAVBAR
   Renders a complete navigation bar inside #athex-root.
   Covers both Athex (personal) and Athex Enterprise variants.
   ══════════════════════════════════════════════════════════════ */

/* Root container — host pages set #athex-root however they like.
   When the widget creates its own fixed bar, the --fixed modifier
   stretches it full-width across the top of the viewport. */
.athex-navbar-root {
  position: relative;
  display: block;
}

.athex-navbar-root--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9800;
  background: rgba(5, 11, 20, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The navbar row itself */
.athex-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .athex-navbar {
    height: 64px;
    padding: 0 24px;
  }
}

/* Left cluster: back arrow + logo + app name */
.athex-navbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Glass circle back button — matches auth tile close/back buttons */
.athex-navbar__back {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
}

.athex-navbar__back:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.10);
}

.athex-navbar__back svg {
  width: 16px;
  height: 16px;
  color: inherit;
  display: block;
  flex-shrink: 0;
}

/* Glass circle stays 36px; the tap target does not. See design contract section 2. */
.athex-navbar__back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* Logo image */
.athex-navbar__logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* App name label */
.athex-navbar__app-name {
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right cluster: pill (sign-in or user button) */
.athex-navbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex-shrink: 0;
}

/* Ensure the menu dropdown positions correctly inside the navbar */
.athex-navbar__right .athex-menu {
  top: calc(100% + 8px);
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .athex-settings-tabs,
  .athex-admin-tabs { scroll-behavior: auto; }
  .athex-settings-tabs__tab,
  .athex-admin-tabs__tab { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .athex-settings-card,
  .athex-settings-tabs,
  .athex-admin-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .athex-settings-card { background: #081221; }
  .athex-settings-tabs,
  .athex-admin-tabs { background: #101a2b; }
}


/* Branding pane: a mark preview and its field hint. The wordmark is wide and the
   icon is square, so the preview is bounded by height and lets width follow. */
.athex-brand-preview {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  display: block;
  margin: 8px 0 4px;
  border-radius: var(--athex-radius-control);
}
.athex-field-hint {
  font-family: var(--athex-font-body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.52);
  margin: 4px 0 0;
}


/* Group setup: each step is a surface with room to breathe, so a three-step
   flow does not read as one dense form. */
.athex-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.athex-setup-steps[hidden] {
  display: none;
}
.athex-setup-step {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--athex-radius-card);
  padding: 16px;
}
.athex-setup-step__title {
  font-family: var(--athex-font-display);
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #f1f5f9;
}


/* Admin Group card: the Group header, then its members indented under it, so a
   Group with twelve people still reads as one object rather than twelve rows. */
.athex-household-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--athex-radius-card);
  padding: 12px;
  margin-bottom: 10px;
}
.athex-household-card .athex-household-list {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.athex-btn--danger {
  border-color: rgba(255,68,68,0.35);
  color: rgba(255,138,138,0.95);
}
.athex-btn--danger:hover { background: rgba(255,68,68,0.12); }


/* Mark above the account name. The row is horizontal elsewhere; stacked is the
   treatment Anda Reno uses and it is now the universal one. */
.athex-login-card__logo-row--stacked {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.athex-login-card__logo-row--stacked .athex-login-card__logo--icon {
  height: 44px;
  width: auto;
}

/* ── Casa display appearance ────────────────────────────────────────────────
   The swatch shows the template's real palette. A manager choosing a look for
   a screen in another room cannot see the result, so the choice has to carry
   enough of the thing to be a choice and not a guess at four names. */
.athex-display-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.athex-display-template {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--athex-radius-control);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.athex-display-template[aria-checked="true"] {
  border-color: rgba(0,229,255,0.38);
  background: rgba(0,229,255,0.06);
}
.athex-display-template:focus-visible {
  outline: 2px solid var(--athex-cyan);
  outline-offset: 2px;
}
.athex-display-template__copy { display: block; min-width: 0; }
.athex-display-template__copy strong {
  display: block;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.92);
}
.athex-display-template__copy small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.42);
}
.athex-display-template__swatch {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--athex-radius-control);
  border: 1px solid rgba(255,255,255,0.10);
  background: #E8ECDF;
}
/* Each one is the template's own background, surface and accent, in that order. */
.athex-display-template__swatch--claypunk { background: linear-gradient(135deg,#E8ECDF 0 42%,#F8F7F0 42% 74%,#365E45 74% 100%); }
.athex-display-template__swatch--linen    { background: linear-gradient(135deg,#F5F1E8 0 42%,#FFFDF7 42% 74%,#7A5C3E 74% 100%); }
.athex-display-template__swatch--slate    { background: linear-gradient(135deg,#10151B 0 42%,#1A222C 42% 74%,#5EC8A8 74% 100%); }
.athex-display-template__swatch--nocturne { background: linear-gradient(135deg,#050607 0 42%,#0F1113 42% 74%,#C9A227 74% 100%); }

/* ── Row actions ────────────────────────────────────────────────────────────
   Icons, clustered, and never allowed to eat the thing they act on. The old
   text buttons were as wide as "Make Manager" and pushed the destructive one
   clean off the edge of the card on a phone, with the member's name crushed to
   zero width beside it. */
.athex-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.athex-circle-btn--sm {
  /* 36px of paint, 44px of target. The contract's minimum is about what a
     thumb hits, not about how big the circle looks. */
  width: 36px;
  height: 36px;
  position: relative;
}
.athex-circle-btn--sm::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.athex-circle-btn--sm .athex-icon { width: 17px; height: 17px; }
.athex-circle-btn--danger {
  color: rgba(255,120,110,0.92);
  border-color: rgba(255,90,80,0.26);
  background: rgba(255,70,60,0.08);
}
.athex-circle-btn--danger:hover {
  background: rgba(255,70,60,0.16);
  border-color: rgba(255,90,80,0.44);
}

/* The name and email must survive a row full of actions. */
.athex-user-row__info { flex: 1 1 auto; min-width: 0; }
.athex-user-row__name,
.athex-user-row__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.athex-user-row { flex-wrap: nowrap; gap: 10px; }

/* ── Tab strip ──────────────────────────────────────────────────────────────
   It already scrolled. Nothing said so, so a cut-off "Brandi" read as a broken
   layout rather than as more tabs to the right. The fade is the affordance. */
.athex-settings-tabs {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
/* A strip that fits needs no fade; the mask would clip the first and last tab. */
.athex-settings-tabs--fits {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Role and address sit under the name, sharing one line, so neither competes
   with the name for the row's width. */
.athex-user-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}
.athex-user-row__meta .athex-user-row__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.athex-user-row__meta .athex-user-row__badge { flex: 0 0 auto; }

/* On a phone the name and the role are what identify a person in a Group list.
   An address truncated to "ale…" is noise taking width from both. */
@media (max-width: 460px) {
  .athex-household-list .athex-user-row__meta .athex-user-row__email { display: none; }
}

/* ── Spacing ────────────────────────────────────────────────────────────────
 *
 * A measured audit of the account surfaces found padding and margin values of
 * 1, 2, 4, 6, 7, 8, 9, 10, 12, 14, 16 and 20px — no scale, just whatever each
 * pane happened to be written with. The same concepts disagreed: a Group card
 * padded 12px next to a Branding card padded 16px, a member list with an 8px
 * gap next to an account list with none, a section heading with 8px beneath it
 * on one pane and 0 on another.
 *
 * One scale, four steps that matter, applied to the shared structures. Enforced
 * by tests/admin-surfaces-browser.mjs, which fails on an off-scale value.
 */
:root {
  --athex-space-1: 4px;
  --athex-space-2: 8px;
  --athex-space-3: 12px;
  --athex-space-4: 16px;
  --athex-space-5: 24px;
}

/* Rows. One padding for every row-shaped thing, whichever pane it is on. */
.athex-row,
.athex-user-row {
  padding: var(--athex-space-3) var(--athex-space-3);
  gap: var(--athex-space-3);
}

/* Cards. A Group card and a Branding card are the same object. */
.athex-household-card,
.athex-setup-step {
  padding: var(--athex-space-4);
  margin-bottom: var(--athex-space-3);
  border-radius: var(--athex-radius-card);
}

/* Lists breathe the same everywhere. */
.athex-user-list,
.athex-household-list {
  display: flex;
  flex-direction: column;
  gap: var(--athex-space-2);
}
.athex-household-list {
  padding-left: var(--athex-space-3);
  margin-top: var(--athex-space-2);
}

/* Sections. A heading belongs to what follows it, and one section must be
   visibly a different section from the next. */
.athex-section-heading {
  margin: 0 0 var(--athex-space-2);
  padding-bottom: var(--athex-space-1);
}
.athex-settings-body > .athex-section-heading + .athex-field-hint {
  margin: calc(var(--athex-space-1) * -1) 0 var(--athex-space-2);
}
.athex-settings-body > .athex-user-list + .athex-section-heading,
.athex-settings-body > .athex-household-card + .athex-section-heading,
.athex-settings-body > * + .athex-section-heading {
  margin-top: var(--athex-space-5);
}

/* Intro copy sets up the pane; it needs room before the first thing it
   describes, which it had on some panes and not others. */
.athex-household-intro { margin: 0 0 var(--athex-space-4); }

/* The clickable part of an account row. It is a <button> for keyboard and
   screen-reader reasons; it must not LOOK like one, or it paints a grey slab
   over the name and address it is supposed to be showing. */
.athex-user-row__open {
  display: flex;
  align-items: center;
  gap: var(--athex-space-3);
  flex: 1 1 auto;
  min-width: 0;
  /* The row is the target. Sized to the row rather than to its text, so the
     44px minimum is met by the thing a thumb actually lands on. */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.athex-user-row__open:focus-visible {
  outline: 2px solid var(--athex-cyan);
  outline-offset: 3px;
  border-radius: var(--athex-radius-control);
}

/* ── A brand mark ───────────────────────────────────────────────────────────
   The mark leads, at a fixed size, against a chequerboard so a transparent PNG
   reads as transparent rather than as a white box. Controls sit in a row. */
.athex-brand-row__head {
  display: flex;
  align-items: center;
  gap: var(--athex-space-3);
  margin-bottom: var(--athex-space-3);
}
.athex-brand-row__frame {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 56px;
  padding: var(--athex-space-2);
  border-radius: var(--athex-radius-control);
  border: 1px solid rgba(255,255,255,0.10);
  background-color: rgba(255,255,255,0.04);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.045) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.045) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  overflow: hidden;
}
/* A wordmark is wide and an icon is square; the frame follows the shape. */
.athex-brand-row__frame--wordmark { width: 132px; }
.athex-brand-row__frame .athex-brand-preview {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}
.athex-brand-row__empty {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
}
.athex-brand-row__copy { min-width: 0; }
.athex-brand-row__copy .athex-setup-step__title { margin: 0 0 var(--athex-space-1); }
.athex-brand-row__copy .athex-field-hint { margin: 0; }
.athex-brand-row__actions {
  display: flex;
  align-items: center;
  gap: var(--athex-space-2);
  margin-top: var(--athex-space-2);
}

/* The photo block reads top to bottom: the photo and what you can do to it,
   then the caption about it. The caption used to sit INSIDE the button column,
   where it wrapped to four lines and shoved the buttons away from the avatar. */
.athex-avatar-picker { gap: var(--athex-space-3); }
.athex-avatar-picker__actions {
  flex-direction: row;
  align-items: center;
  gap: var(--athex-space-2);
}
.athex-avatar-picker__hint {
  display: block;
  max-width: none;
  margin-top: var(--athex-space-2);
}

/* The BASE badge had no colour and no background — only the --admin and
   --disabled modifiers did. So "Manager" and "Child" rendered as black text on
   a dark card with nothing behind them: present, measured, unreadable. */
.athex-user-row__badge {
  padding: 2px 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.74);
  font-weight: 700;
  white-space: nowrap;
}
.athex-user-row__badge--admin {
  background: rgba(0,229,255,0.10);
  border-color: rgba(0,229,255,0.24);
  color: var(--athex-cyan);
}
.athex-user-row__badge--disabled {
  background: rgba(255,68,68,0.10);
  border-color: rgba(255,68,68,0.22);
  color: rgba(255,120,110,0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MORPH ACTIONS — an icon that becomes its own label
   ═══════════════════════════════════════════════════════════════════════════

   Icon buttons are compact but mute: a pencil and a bin in a row tell you the
   shape of the action, not what it will do to WHICH thing. Text buttons say it
   but are as wide as their longest word, which is what crushed the member name
   they were acting on down to nothing.

   So: icon at rest, label on hover, focus and touch. The label is always in the
   DOM — a screen reader has never had a problem here and must not start having
   one — it is the WIDTH that animates, using a 0fr→1fr grid track, which is the
   only way to transition to intrinsic content width without hardcoding one.

   The whole control is one 44px-tall target throughout the transition, so a
   thumb that lands on it mid-morph still hits it.
*/
.athex-morph {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--athex-glass-line, rgba(255,255,255,0.14));
  background: var(--athex-glass, rgba(255,255,255,0.07));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition:
    background 0.22s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.22s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.22s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.22s,
    transform 0.14s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
/* 40px of paint, 44px of target. */
.athex-morph::before {
  content: "";
  position: absolute;
  inset: -2px -2px;
}
/* The wrapper has a size of its own, so an icon does not depend on a context
   remembering to give it one. Both rules below are more specific and still win
   where a context wants a different size. */
.athex-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.athex-icon svg { width: 100%; height: 100%; display: block; }

.athex-morph .athex-icon,
.athex-morph__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.athex-morph__label {
  display: grid;
  grid-template-columns: 0fr;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    grid-template-columns 0.26s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.18s ease,
    padding-left 0.26s var(--athex-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.athex-morph__label > span { min-width: 0; overflow: hidden; }

.athex-morph:hover,
.athex-morph:focus-visible,
.athex-morph[aria-expanded="true"] {
  background: var(--athex-glass-hi, rgba(255,255,255,0.13));
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.athex-morph:hover .athex-morph__label,
.athex-morph:focus-visible .athex-morph__label,
.athex-morph[aria-expanded="true"] .athex-morph__label {
  grid-template-columns: 1fr;
  opacity: 1;
  padding-left: 7px;
}
.athex-morph:focus-visible {
  outline: 2px solid var(--athex-cyan);
  outline-offset: 2px;
}
/* Press: a short, damped scale. Enough to feel, not enough to notice. */
.athex-morph:active { transform: scale(0.955); }

/* Destructive keeps its meaning at rest, not only once you hover it. */
.athex-morph--danger {
  color: rgba(255,124,114,0.92);
  border-color: rgba(255,92,82,0.26);
  background: rgba(255,74,64,0.09);
}
.athex-morph--danger:hover,
.athex-morph--danger:focus-visible {
  color: #fff;
  background: rgba(255,74,64,0.20);
  border-color: rgba(255,92,82,0.48);
  box-shadow: 0 6px 20px rgba(255,60,50,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
}
.athex-morph--primary {
  color: #05161c;
  background: var(--athex-cyan);
  border-color: transparent;
}
.athex-morph--primary:hover,
.athex-morph--primary:focus-visible {
  color: #05161c;
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(0,229,255,0.28);
}

/* A touch device has no hover. Tapping once reveals the label and arms the
   action; the second tap runs it. Set by script via aria-expanded, so nothing
   here depends on a media query guessing the input device. */
@media (hover: none) {
  .athex-morph { padding: 0 12px; }
}

/* Motion preference is not a suggestion. */
@media (prefers-reduced-motion: reduce) {
  /* Present the overlay and card in their final visible state. */
  .athex-overlay,
  #athex-login-card,
  .athex-login-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .athex-morph,
  .athex-morph__label { transition-duration: 0.01ms !important; }
  .athex-morph:active { transform: none; }
}

/* The close button looked low because the HEADER was lopsided: 14px of padding
   above the row and 2px below it, so its content sat 6px under the band's own
   centre. Measured, not guessed. The gap to the tab bar below is preserved by
   moving it onto the tab bar, where it is a gap rather than a hidden offset. */
.athex-settings-card__header {
  padding: var(--athex-space-4, 16px) 18px var(--athex-space-4, 16px);
}
.athex-settings-tabs { margin-top: 0; }

/* ── App names ──────────────────────────────────────────────────────────────
   Every product name reads as a product: Poppins, heaviest weight, uppercase.
   They were inheriting body type, so "Pepino" in a tile looked like a sentence
   about pepino rather than the name of the thing. */
/* Scoped to APP names only. A first pass also caught the Branding rows, which
   are mark names ("Becchio Group icon") and read as shouting when uppercased. */
.athex-app-name,
.athex-product-access-list strong,
.athex-tile__app-name {
  font-family: 'Poppins', var(--athex-font-display), sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Liquid glass ───────────────────────────────────────────────────────────
   One material for every interactive surface: nav, switchers, segmented
   controls, the tile. Layered translucency over a saturated blur, a hairline
   that catches light at the top, and a shadow that lifts on interaction. They
   were each inventing their own flat panel. */
:root {
  --athex-glass: rgba(255,255,255,0.07);
  --athex-glass-hi: rgba(255,255,255,0.13);
  --athex-glass-line: rgba(255,255,255,0.14);
  --athex-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* NOT .athex-auth-tabs. The LOGIN/JOIN strip sits INSIDE the sign-in card,
   which is already this material — layering a second glass panel on it painted
   a lighter band straight across the card, which is the bar behind LOGIN/JOIN.
   A nested panel needs the card's own surface, not another one. */
.athex-settings-tabs,
.athex-admin-tabs,
.athex-display-templates .athex-display-template,
.athex-tile {
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 20px rgba(0,0,0,0.22);
}
/* The selected segment lifts out of the material rather than just changing
   colour, so which one is active survives a glance. */
.athex-settings-tabs__tab,
.athex-auth-tabs__pill {
  transition:
    background 0.24s var(--athex-ease),
    color 0.20s,
    box-shadow 0.24s var(--athex-ease),
    transform 0.16s var(--athex-ease);
}
.athex-settings-tabs__tab--active,
.athex-auth-tabs__pill--active {
  box-shadow: 0 4px 14px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.28);
}
.athex-settings-tabs__tab:active,
.athex-auth-tabs__pill:active,
.athex-circle-btn:active,
.athex-btn:active { transform: scale(0.97); }

/* Every button gets the same press, and the same easing. Interactions felt
   inert because most of them changed colour and nothing else. */
.athex-btn,
.athex-circle-btn {
  transition:
    background 0.22s var(--athex-ease),
    border-color 0.22s var(--athex-ease),
    box-shadow 0.22s var(--athex-ease),
    color 0.20s,
    filter 0.20s,
    transform 0.14s var(--athex-ease);
}
.athex-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.26); }

@media (prefers-reduced-motion: reduce) {
  .athex-settings-tabs__tab,
  .athex-auth-tabs__pill,
  .athex-btn,
  .athex-circle-btn { transition-duration: 0.01ms !important; }
  .athex-btn:active,
  .athex-circle-btn:active,
  .athex-settings-tabs__tab:active,
  .athex-auth-tabs__pill:active { transform: none; }
}

/* ── Spacing ────────────────────────────────────────────────────────────────
   The scale, applied to the surfaces that were still setting their own. */
.athex-settings-body { padding: var(--athex-space-5) var(--athex-space-5) var(--athex-space-5); }
.athex-form-group { gap: var(--athex-space-2); margin-bottom: var(--athex-space-4); }
.athex-form-group:last-child { margin-bottom: 0; }
.athex-setup-step { margin-bottom: var(--athex-space-3); }
@media (max-width: 460px) {
  .athex-settings-body { padding: var(--athex-space-4) var(--athex-space-4) var(--athex-space-5); }
}

/* The sign-in strip is a segmented control on the card, not a panel of its own:
   no background, no inset highlight, no blur. Only the selected pill lifts. */
.athex-auth-tabs {
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
}