/**
 * ============================================================================
 * Chaitanya 2k26 — Auth Modal & Dialog Styles (Original Website UI Theme)
 * ============================================================================
 * Matches the original Noomo Labs / Chaitanya 2k26 aesthetic:
 * - Frosted ethereal glassmorphism with subtle noise texture
 * - Bold black DrukMedium display headers
 * - Crisp IBM Plex Mono uppercase monospace typography & bracketed tags
 * - High-contrast black/white pill buttons and circular accents
 * - Clean pill form inputs with fine borders and bold focus states
 */

/* Local colours for the dialog, profile and admin UI that have no shared
   token. Translucent white/black tints elsewhere in this file are written as
   color-mix() of --surface / --ink. */
:root {
  --am-scrim: rgba(220, 232, 252, 0.6);
  --am-scrim-solid: rgba(220, 226, 236, 0.8);
  --am-pp-scrim: rgba(214, 220, 232, 0.6);
  --am-pattern: url(/images/footerPatern.png);
  --am-link-hover: #0433ff;
  --am-hot: #e4001d; /* sign-out hover fill */
  --am-excel: #107c41;
  --am-info-bg: #e8f4fd;
  --am-info-ink: #004085;
  --am-cart-bg: #e8f0fe;
  --am-cart-ink: #0b3d91;
}
/* Modal Root Overlay - Frosted luminous blur */
.chaitanya-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; /* above the events floating buttons (990) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--am-scrim);
  opacity: 0;
  pointer-events: none;
  /* visibility keeps the closed dialog out of the tab order and a11y tree */
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 300ms;
  padding: 24px;
  box-sizing: border-box;
}

.chaitanya-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* Floating events buttons live outside #__nuxt, so the app's inert misses them. */
html.dialog-open .events-cart-fab,
html.dialog-open .events-scroll-hud {
  visibility: hidden;
}

/* The sign-in dialog can be opened from the organiser verify overlay; keep it on top. */
html.pp-open .chaitanya-modal-backdrop {
  z-index: 100002;
}

/* Dialog containers take programmatic focus on open (tabindex="-1"); the ring
   belongs on the controls inside, not around the whole card. */
.chaitanya-modal-card:focus,
.pp-panel:focus {
  outline: none;
}

/* Main Modal Card */
.chaitanya-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(92vh, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  background-color: var(--surface);
  background-image: var(--am-pattern);
  background-repeat: repeat;
  background-size: 80px;
  border: 2px solid var(--surface);
  box-shadow: 
    0 30px 90px rgba(15, 23, 42, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 var(--surface);
  border-radius: 28px;
  padding: 32px 32px 32px;
  color: var(--ink);
  transform: translateY(8px) scale(0.98);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.chaitanya-modal-card::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.chaitanya-modal-backdrop.active .chaitanya-modal-card {
  transform: translateY(0) scale(1);
}

.chaitanya-modal-card.admin-wide {
  max-width: 920px;
}

/* Corner Accents */
.chaitanya-modal-card .corner {
  position: absolute;
  color: color-mix(in srgb, var(--ink) 28%, transparent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  user-select: none;
}
.chaitanya-modal-card .corner-tl { top: 12px; left: 16px; }
.chaitanya-modal-card .corner-bl { bottom: 12px; left: 16px; }
.chaitanya-modal-card .corner-br { bottom: 12px; right: 16px; }

/* Close Button: its own row above the title, so it never covers the heading. */
.chaitanya-modal-topbar {
  display: flex;
  justify-content: flex-end;
  margin: -12px -12px 8px 0;
}

.chaitanya-modal-close {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  padding: 4px 12px;
  border-radius: 30px;
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
  text-transform: uppercase;
}

.chaitanya-modal-close:hover {
  background: var(--ink);
  color: var(--ink-on-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Headers */
.chaitanya-modal-header {
  text-align: center;
  margin-bottom: 16px;
}

.chaitanya-modal-title {
  font-family: "DrukMedium", sans-serif;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}

.chaitanya-modal-subtitle {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: var(--track-body);
  color: var(--ink-muted);
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.45;
}

/* Notice / Banner */
.chaitanya-modal-banner {
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-body);
  color: var(--ink);
  color: color-mix(in srgb, var(--ink) 93.3%, var(--surface)); /* #111 in light */
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* display:flex above would otherwise override the hidden attribute and show
   the empty #auth-error-box as a blank yellow bar. */
.chaitanya-modal-banner[hidden],
.chaitanya-modal-banner:empty {
  display: none;
}

.chaitanya-modal-banner.warning {
  background: rgba(254, 187, 37, 0.14);
  border-color: rgba(254, 187, 37, 0.7);
  color: var(--warn-ink);
}

.chaitanya-modal-banner.danger {
  background: rgba(228, 0, 29, 0.08);
  border-color: rgba(228, 0, 29, 0.45);
  color: var(--danger-ink);
}

/* Google Sign-in Button — Iconic OG Black Pill */
.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--ink-on-dark);
  border: 2px solid var(--ink);
  border-radius: 50px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.btn-google-auth:hover {
  background: var(--surface);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.btn-google-auth:active {
  transform: translateY(0);
}

.btn-google-auth svg {
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
}

/* Form Fields */
.chaitanya-form-group {
  margin-bottom: 12px;
  text-align: left;
}

.chaitanya-form-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.chaitanya-form-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.chaitanya-form-input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.chaitanya-form-input::placeholder {
  color: var(--ink-muted); /* was 40% black (2.8:1); muted ink passes AA */
  opacity: 1;
}

/* Form Divider */
.chaitanya-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
}

.chaitanya-divider::before,
.chaitanya-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.chaitanya-divider span {
  padding: 0 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

/* Mode Switchers */
.chaitanya-modal-footer {
  margin-top: 24px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-muted);
}

.chaitanya-link-btn {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  transition: color 0.2s ease;
}

.chaitanya-link-btn:hover {
  color: var(--am-link-hover);
}

/* Profile Card View */
.profile-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

.profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  padding: 4px;
  object-fit: cover;
  background: var(--surface);
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.profile-name {
  font-family: "DrukMedium", sans-serif;
  font-size: 38px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: var(--track-name);
}

.profile-email {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.profile-role-badge {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.profile-role-badge.admin {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-color: var(--ink);
}

.profile-meta-card {
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 18px;
  padding: 16px 24px;
  margin-bottom: 24px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.profile-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.profile-meta-row:last-child {
  border-bottom: none;
}

.profile-meta-label {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
}

.profile-meta-val {
  color: var(--ink);
  font-weight: 600;
}

.profile-events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-event-chip {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 30px;
  padding: 4px 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Secondary Button / Sign Out */
.btn-secondary-action {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 50px;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
  margin-top: 12px;
  box-sizing: border-box;
}

.btn-secondary-action:hover {
  background: var(--am-hot);
  border-color: var(--am-hot);
  color: var(--ink-on-dark);
  box-shadow: 0 6px 18px rgba(228, 0, 29, 0.06);
}

/* Admin Table & Stats */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.admin-stat-card {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 16px 24px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.admin-stat-num {
  font-family: "DrukMedium", sans-serif;
  font-size: 46px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}

.admin-stat-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--surface);
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-align: left;
}

.admin-table th {
  background: var(--ink);
  color: var(--ink-on-dark);
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: var(--track-label);
}

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}

.admin-table tr:hover td {
  background: color-mix(in srgb, var(--sky-bottom) 20%, transparent);
}

/* Admin Tabs Navigation */
.admin-tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent);
  padding-bottom: 8px;
  overflow-x: auto;
}

.admin-tab-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
}

.admin-tab-btn:hover {
  background: var(--ink);
  color: var(--ink-on-dark);
}

.admin-tab-btn.active {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-color: var(--ink);
}

/* Status Badges */
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-label);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

/* Status palette from tokens.css so badges read in both themes. */
.badge-status.verified,
.badge-status.paid,
.badge-status.team {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

.badge-status.pending,
.badge-status.pending_verification {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid color-mix(in srgb, var(--warn-ink) 30%, transparent);
}

.badge-status.rejected {
  background: var(--danger-bg);
  color: var(--danger-ink);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.badge-status.free {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}

/* Admin Action Buttons */
.admin-action-btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-action-approve {
  background: var(--ok);
  color: var(--ink-on-dark);
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
}

.btn-action-approve:hover {
  background: var(--ok);
  background: color-mix(in srgb, var(--ok) 75%, var(--ink));
}

.btn-action-reject {
  background: var(--danger-ink);
  color: var(--ink-on-dark);
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), opacity var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease, border-color var(--motion-150) ease, box-shadow var(--motion-150) ease;
}

.btn-action-reject:hover {
  background: var(--danger-ink);
  background: color-mix(in srgb, var(--danger-ink) 75%, var(--ink));
}

/* Export Control Bar */
.admin-export-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .chaitanya-modal-card {
    padding: 32px 24px 24px;
    border-radius: 20px;
  }
  .chaitanya-modal-title {
    font-size: 38px;
  }
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
  .chaitanya-form-input {
    padding: 12px 16px;
  }
}

/* Admin dashboard v2 */
.admin-loading,
.admin-note,
.admin-progress,
.profile-empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-body);
  color: var(--ink-muted);
}

.admin-loading {
  text-align: center;
  padding: 24px;
}

.admin-note {
  margin: 0 0 12px;
  line-height: 1.5;
}

.profile-empty a {
  color: var(--ink);
  text-decoration: underline;
}

.admin-flag {
  display: inline-block;
  margin: 4px 0 0 8px;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--danger-bg);
  color: var(--danger-ink);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
}

.admin-panel-box {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  line-height: 1.5;
}

.admin-panel-box h4 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.admin-panel-box p {
  margin: 0 0 12px;
  color: var(--ink-muted);
}

.admin-inline-btn {
  width: auto !important;
  padding: 8px 16px !important;
  font-size: var(--fs-label) !important;
}

.admin-excel-btn {
  background: var(--am-excel) !important;
  border-color: var(--am-excel) !important;
  color: var(--ink-on-dark) !important;
}

.admin-progress {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--am-info-bg);
  border-radius: 4px;
  color: var(--am-info-ink);
}

.btn-action-view {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  cursor: pointer;
}

.admin-table code {
  font-size: var(--fs-label);
  background: var(--surface);
  background: color-mix(in srgb, var(--ink) 6%, var(--surface)); /* #f0f0f0 in light */
  color: var(--ink);
  padding: 2px 4px;
  border-radius: 3px;
}

.chaitanya-form-input:focus-visible,
.btn-google-auth:focus-visible,
.admin-tab-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

#profile-edit-form .chaitanya-form-group {
  margin-bottom: 12px;
}

html:not(.is-fest-admin) a[href="#admin"],
html:not(.is-fest-admin) a[href="/admin"],
/* The phone menu styles its links with `header .header .mobile-menu .top a
   { display: flex !important }`, which outranked the rule above and showed
   Admin to everyone on phones. Same rule, stronger selector. */
html:not(.is-fest-admin) header .header .mobile-menu .top a[href="/admin"],
html:not(.is-fest-admin) header .header .right-menu a[href="/admin"] {
  display: none !important;
}

/* Performance: drop heavy blur on touch / small screens */
@media (hover: none), (max-width: 1024px) {
  .chaitanya-modal-backdrop,
  .chaitanya-modal-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .chaitanya-modal-backdrop {
    background: var(--am-scrim-solid);
  }
  .chaitanya-modal-card {
    background-color: var(--surface);
  }
}

/* Display headings: open up the condensed Druk letterforms for readability */
.chaitanya-modal-title,
.admin-stat-num {
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
}

/* Person name: name tracking, same word spacing as the display titles. */
.profile-name {
  word-spacing: 0.08em;
}

/* ==========================================================================
   Nav profile icon
   ========================================================================== */
/* Desktop nav (the site hides .right-menu links below 768px) */
@media (min-width: 768px) {
  header .header .right-menu a.nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/* Mobile menu */
.mobile-menu a.nav-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
}

.nav-avatar-initials {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ==========================================================================
   Profile overlay (floating glass panel)
   ========================================================================== */
.pp-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100001;
  background: var(--am-pp-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.pp-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}

.pp-panel {
  position: absolute;
  top: 76px;
  right: 24px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  background-image: var(--am-pattern);
  background-size: 80px;saturate(160%);saturate(160%);
  border: 2px solid var(--surface);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.06);
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink);
  overflow: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-overlay.active .pp-panel {
  transform: none;
}

html.pp-open {
  overflow: hidden;
}

.pp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
}

.pp-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pp-kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ok);
  letter-spacing: var(--track-label);
}

.pp-title {
  font-family: "DrukMedium", sans-serif;
  font-size: 26px;
  line-height: 1.1;
  margin: 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Wrap instead of truncating so nothing is lost at 200% zoom / reflow. */
  overflow-wrap: anywhere;
}

.pp-sub {
  font-size: var(--fs-label);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.pp-avatar,
.pp-id-photo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}

.pp-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-weight: 600;
  font-size: 16px;
}

.pp-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

.pp-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 16px;
  padding: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 14px;
}

.pp-tab {
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 8px 4px;
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pp-tab.active {
  background: var(--ink);
  color: var(--ink-on-dark);
}

.pp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px;
  overscroll-behavior: contain;
}

.pp-body.pp-enter {
  animation: pp-fade-in 300ms ease both;
}

@keyframes pp-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pp-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
}

.pp-logout {
  width: 100%;
  padding: 12px;
  border-radius: 30px;
  border: 1.5px solid var(--danger);
  background: transparent;
  color: var(--danger);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
}

.pp-logout:hover {
  background: var(--danger);
  color: var(--ink-on-dark);
}

.pp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.pp-field input,
.pp-field select,
.pp-utr input {
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 12px;
  padding: 12px 12px;
  font-family: inherit;
  font-size: 12px;
  background: var(--surface);
  color: var(--ink);
  text-transform: none;
}

.pp-field input:focus-visible,
.pp-field select:focus-visible,
.pp-tab:focus-visible,
.pp-close:focus-visible,
.pp-primary:focus-visible,
.pp-action:focus-visible,
.pp-logout:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.pp-primary {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 30px;
  border: none;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  cursor: pointer;
}

.pp-primary:disabled {
  opacity: 0.5;
}

.pp-hint,
.pp-loading,
.pp-empty {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  line-height: 1.5;
}

.pp-loading,
.pp-empty {
  text-align: center;
  padding: 24px 8px;
}

.pp-empty p {
  margin: 0 0 12px;
}

.pp-inline {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pp-msg {
  font-size: var(--fs-label);
}

.pp-msg.ok {
  color: var(--ok);
}

.pp-msg.bad {
  color: var(--danger);
}

.pp-regs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-reg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-reg-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.pp-reg-top strong {
  font-size: 12px;
  line-height: 1.3;
}

.pp-reg-meta,
.pp-reg-note {
  font-size: var(--fs-label);
  color: var(--ink-muted);
}

.pp-reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pp-action {
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--ink-on-dark);
  border-radius: 20px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pp-action.subtle {
  background: transparent;
  color: var(--ink);
}

.pp-chip {
  flex-shrink: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 20px;
  letter-spacing: var(--track-label);
  white-space: nowrap;
}

.pp-chip.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.pp-chip.pending {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.pp-chip.bad {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.pp-chip.cart {
  background: var(--am-cart-bg);
  color: var(--am-cart-ink);
}

.pp-utr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pp-utr input {
  flex: 1;
  min-width: 140px;
  letter-spacing: 1px;
}

/* Digital ID card */
.pp-idcard {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.pp-idcard-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
}

.pp-idcard-main {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}

.pp-idcard-main .pp-id-photo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 20px;
}

.pp-idcard-main dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: var(--fs-label);
  min-width: 0;
}

.pp-idcard-main dt {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: var(--fs-label);
  padding-top: 1px;
}

.pp-idcard-main dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* QR codes stay black on white in every theme so scanners can read them. */
.pp-idcard-qr {
  width: 168px;
  margin: 0 auto 12px;
  background: #ffffff;
}

.pp-idcard-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.pp-idcard-status {
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 12px;
  letter-spacing: var(--track-label);
}

.pp-idcard.verified .pp-idcard-status {
  background: var(--ok-bg);
  color: var(--ok);
}

.pp-idcard.pending .pp-idcard-status {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.pp-idcard.none .pp-idcard-status {
  background: var(--surface);
  background: color-mix(in srgb, var(--ink) 5%, var(--surface)); /* #f2f2f2 in light */
  color: var(--ink-muted);
}

.pp-idcard + .pp-hint {
  margin-top: 12px;
}

.mono {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.5px;
}

/* Organiser verification */
.pp-verify {
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  margin-bottom: 8px;
}

.pp-verify strong {
  font-size: 16px;
  letter-spacing: var(--track-label);
}

.pp-verify p {
  margin: 4px 0 0;
  font-size: var(--fs-body);
}

.pp-verify.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.pp-verify.bad {
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.pp-verify-events {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-label);
}

.pp-verify-events li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}

@media (max-width: 600px) {
  .pp-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    transform-origin: top center;
  }
}

@media (hover: none), (max-width: 1024px) {
  .pp-overlay {
  }
  .pp-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--surface);
  }
}

/* The custom cursor must stay above every overlay (the site hides the system
   cursor), otherwise the pointer disappears inside modals and panels. */
/* No backdrop blur on the cursor: re-blurring under it on every mouse move
   (often over the WebGL scene) was a constant GPU cost for a 25px dot. */
#cursor .wrapper {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- Game-style crosshair -------------------------------------------------
   The follower draws a "+" crosshair; over anything clickable
   (html.cursor-target, set in the cursor component) it rotates into an "x".
   The white bubble only appears when the cursor grows to show text
   ("Click and hold" on the 3D scene), detected with a size query. */
:root {
  /* White crosshair for the follower (blended with difference, so it reads
     on light and dark). Black copies are for native cursors (top-layer
     dialogs), which can't blend. */
  --crosshair: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/><circle cx='16' cy='16' r='1.75' fill='%23fff'/></svg>");
  --crosshair-ink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/><circle cx='16' cy='16' r='1.75' fill='%23000'/></svg>");
  --crosshair-ink-x: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'><path d='M16 3v8M16 21v8M3 16h8M21 16h8' stroke='%23000' stroke-width='2.5' stroke-linecap='round' transform='rotate(45 16 16)'/><circle cx='16' cy='16' r='1.75' fill='%23000'/></svg>");
}

#cursor {
  container-type: size;
  will-change: transform;
  mix-blend-mode: difference;
}

/* Text bubble up: no inversion, so the white bubble and its text read as-is. */
html.cursor-text #cursor {
  mix-blend-mode: normal;
}

/* Hide the system cursor everywhere while the crosshair is on screen. Many
   rules set cursor: pointer on buttons/tabs, which used to draw the system
   hand on top of the crosshair. */
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor-active,
  html.custom-cursor-active * {
    cursor: none !important;
  }

  /* A modal <dialog> (e.g. the home "Open …?" confirm) sits in the top
     layer, above the crosshair, so no cursor was visible at all. While one is
     open, use the system cursor and hide the crosshair. */
  html.custom-cursor-active:has(dialog[open]),
  html.custom-cursor-active:has(dialog[open]) * {
    cursor: auto !important;
  }
  html.custom-cursor-active:has(dialog[open]) dialog[open] :is(button, a, [role="button"]) {
    cursor: pointer !important;
  }
  html:has(dialog[open]) #cursor {
    opacity: 0 !important;
  }
}

#cursor .wrapper,
#cursor.dif .wrapper {
  position: relative;
  background: transparent;
  box-shadow: none;
}

#cursor .wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--crosshair) center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
  pointer-events: none;
}

html.cursor-target #cursor .wrapper::before {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.15);
}

@container (min-width: 90px) {
  #cursor .wrapper,
  #cursor.dif .wrapper {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  }
  #cursor .wrapper::before {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cursor .wrapper::before {
    transition: none;
  }
}

#cursor {
  z-index: 2147483000 !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* The system cursor is hidden only while the custom cursor is actually on
   screen (html.custom-cursor-active is set by the cursor component on mouse
   movement and cleared when the pointer leaves the page or enters an iframe).
   Without the component (tablet widths, touch devices) the system cursor stays. */
html.custom-cursor-active #cursor {
  opacity: 1;
}

html.custom-cursor-active .error-page .go-home {
  cursor: none !important;
}

/* Music and sound effects are removed, so the sound on/off toggle goes too.
   visibility (not display) keeps the space so the bottom bar doesn't shift. */
.social-links-global .volume,
.home-preloader .volume {
  visibility: hidden;
  pointer-events: none;
}


header .header .mobile-menu .nav-avatar {
  width: 42px;
  height: 42px;
  margin-right: 12px;
  vertical-align: middle;
  font-size: 16px;
}

/* Loading screen removed: the 3D scene appears as soon as it is ready. */
.home-preloader {
  display: none !important;
}

/* The header fades in at the end of the home 3D intro; on every other page
   (including direct links) it must be visible straight away. */
html.not-home header {
  opacity: 1 !important;
}

/* ==========================================================================
   Profile page (/profile) — full page, sections stacked top to bottom
   ========================================================================== */
.profile-page-root {
  min-height: 100vh;
  width: 100%;
  padding: 96px 16px 72px;
  background-image: var(--page-bg);
  background-repeat: repeat;
  background-size: var(--page-bg-size);
  box-sizing: border-box;
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink);
}

.prof-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prof-card {
  background: var(--surface-raised);
  border: 2px solid var(--surface);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  padding: 24px;
  box-sizing: border-box;
  min-width: 0;
  /* Emails and long names wrap instead of widening the card (it is a flex
     item, so an unbreakable address pushed it past a 320px screen). */
  overflow-wrap: anywhere;
  scroll-margin-top: 90px;
}

.prof-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.prof-head .prof-avatar {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

.prof-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prof-title {
  font-family: "DrukMedium", sans-serif;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  margin: 2px 0 4px;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
}

.prof-h2 {
  font-family: "DrukMedium", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  margin: 4px 0 8px;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}

.prof-section-head {
  margin-bottom: 16px;
}

.prof-section-head .pp-hint {
  margin: 0;
}

.prof-logout {
  width: auto;
  padding: 12px 16px;
  flex-shrink: 0;
}

.prof-form {
  gap: 16px;
}

.prof-form .pp-field {
  font-size: var(--fs-label);
}

.prof-form .pp-field input,
.prof-form .pp-field select {
  font-size: 14px;
  padding: 12px 16px;
}

.prof-form .pp-field input[readonly] {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.prof-form .pp-field small {
  text-transform: none;
  letter-spacing: var(--track-body);
  font-weight: 400;
}

.pp-field input[aria-invalid="true"],
.pp-field select[aria-invalid="true"] {
  border-color: var(--danger);
}

.prof-form .pp-msg {
  font-size: 12px;
  font-weight: 600;
}

.prof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.prof-signed-out {
  text-align: center;
}

.prof-signed-out .prof-actions {
  justify-content: center;
  margin-top: 16px;
}

/* Registrations: details on the left, entry QR on the right */
.prof-regs {
  gap: 16px;
}

.prof-reg {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}

.prof-reg-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prof-reg-info .pp-reg-top strong {
  font-size: 14px;
}

.prof-reg-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 2px;
  font-size: var(--fs-label);
}

.prof-reg-dl dt {
  color: var(--ink-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--fs-label);
  padding-top: 1px;
}

.prof-reg-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.prof-qr {
  margin: 0;
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.prof-qr.small {
  width: 132px;
}

/* Literally white so the QR always scans as black on white. */
.prof-qr-code {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
}

.prof-qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

.prof-qr figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  text-align: center;
}

.prof-idcard {
  max-width: 420px;
  margin: 0 auto;
}

/* Entry QRs on the registration success step */
.checkout-qrs {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.checkout-qrs ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.checkout-qrs li svg {
  background: #ffffff; /* keep entry QRs black on white */
}

.checkout-qrs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 600px) {
  .profile-page-root {
    padding: 80px 12px 56px;
  }

  .prof-card {
    padding: 16px 16px;
    border-radius: 20px;
  }

  .prof-head {
    flex-wrap: wrap;
  }

  .prof-logout {
    width: 100%;
  }

  .prof-reg {
    flex-direction: column;
    align-items: stretch;
  }

  .prof-qr {
    align-self: center;
    width: 180px;
  }
}

/* Like the events page, the profile page skips the site's page-transition wipe. */
body:has(.profile-page-root) .transition-component {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The site header is transparent; on the profile page fade the page colour in
   behind it so form controls scrolling underneath don't collide with the logo. */
html body:has(.profile-page-root) header {
  /* Same pattern + sky as the page (viewport-anchored), so at the top the
     header is indistinguishable from the page instead of a flat white band,
     and content scrolling underneath still doesn't collide with the logo. */
  background-image: var(--page-bg);
  /* Was background-attachment: fixed, which makes every scroll frame repaint
     on the main thread. The header is itself fixed at the top, so a
     viewport-tall sky layer draws the same pixels. */
  background-size: 80px, 100% 100vh;
}

/* Deregister / delete-profile confirmations */
.prof-confirm {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--danger);
  border-radius: 14px;
  background: var(--danger-bg);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.prof-confirm p {
  margin: 0 0 12px;
}

.prof-confirm .pp-field input {
  font-size: 14px;
  padding: 12px 16px;
}

.prof-confirm-yes {
  width: auto;
  padding: 8px 16px;
}

.prof-confirm-yes:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.prof-confirm-yes:disabled:hover {
  background: transparent;
  color: var(--danger);
}

.pp-action.prof-dereg {
  border-color: var(--danger);
  color: var(--danger);
}

.prof-danger {
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

.prof-delete-open {
  width: auto;
  padding: 12px 16px;
}

.prof-reg-info .pp-msg {
  margin: 8px 0 0;
}

/* Nav profile link is just the avatar: centre it on the text links' line and
   keep the links' hover "spread" effect off the initials badge. */
header .header .mobile-menu a.nav-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  gap: 0;
}

@media (min-width: 768px) {
  /* On phones the top-bar links (avatar included) live in the menu. */
  header .header .right-menu a.nav-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    gap: 0;
  }
}

header .header .right-menu a.nav-profile .nav-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  line-height: 1.1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

header .header .right-menu a.nav-profile:hover span,
header .header .mobile-menu a.nav-profile:hover span {
  padding: 0;
}

header .header .right-menu a.nav-profile:hover .nav-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink);
}

header .header .mobile-menu a.nav-profile .nav-avatar {
  margin-right: 0;
}

/* Nav links have a 44px tap height; centre their text in it so text links,
   the avatar and the logo sit on one line. (html body …: default-layout.css
   loads later with the same specificity and sets inline-block.) */
@media (min-width: 768px) {
  /* Desktop only: below 768px default-layout.css hides these links in favour
     of the menu button, and that must keep winning. */
  html body header .header .right-menu > a,
  html body header .header .right-menu > .nav-account > a {
    display: inline-flex;
    align-items: center;
  }
}

/* Touch screens: dialog, profile and admin controls are at least 44px tall. */
@media (pointer: coarse), (max-width: 767px) {
  .chaitanya-modal-close,
  .chaitanya-link-btn,
  .pp-action,
  .pp-primary,
  .pp-logout,
  .pp-close,
  .prof-form .pp-field input,
  .prof-form .pp-field select,
  .adm-nav-btn {
    min-height: var(--tap);
  }

  .chaitanya-modal-close,
  .chaitanya-link-btn,
  .pp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Header logo link: full-height tap target on touch screens (logo unchanged). */
@media (pointer: coarse), (max-width: 767px) {
  header .header .header-logo a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* Account link (avatar, or Register) sits in the nav's flex row like the others. */
header .header .nav-account {
  display: contents;
}


/* ---- Motion audit: enter eases out, exit eases in ------------------------- */
.chaitanya-modal-backdrop,
.pp-overlay {
  transition: opacity var(--motion-150) var(--ease-in), visibility 0s linear var(--motion-150);
}
.chaitanya-modal-backdrop.active,
.pp-overlay.active {
  transition: opacity var(--motion-200) var(--ease-out), visibility 0s;
}
.chaitanya-modal-card,
.pp-panel {
  transition: transform var(--motion-150) var(--ease-in), opacity var(--motion-150) var(--ease-in);
}
.chaitanya-modal-backdrop.active .chaitanya-modal-card,
.pp-overlay.active .pp-panel {
  transition: transform var(--motion-200) var(--ease-out), opacity var(--motion-200) var(--ease-out);
}

/* ==========================================================================
   Responsive pass: sign-in dialog, profile panel/page, admin tables
   ========================================================================== */
/* Long emails and names wrap instead of widening dialogs and rows. */
.profile-email,
.profile-meta-val,
.pp-reg-top strong,
.pp-verify-events li,
.chaitanya-modal-banner {
  overflow-wrap: anywhere;
  min-width: 0;
}

.profile-meta-row {
  gap: 12px;
}

.profile-meta-val {
  text-align: right;
}

:where(.chaitanya-modal-card, .pp-panel, .profile-page-root) img {
  max-width: 100%;
  height: auto;
}

/* Wide admin tables scroll inside their own box, never the page. */
.admin-table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.admin-table th {
  white-space: nowrap;
}

/* Touch: remaining dialog, profile and admin controls reach 44px. */
@media (pointer: coarse), (max-width: 767px) {
  .btn-secondary-action,
  .pp-tab,
  .admin-tab-btn,
  .btn-action-approve,
  .btn-action-reject,
  .btn-action-view,
  .chaitanya-form-input,
  .pp-field input,
  .pp-field select,
  .pp-utr input {
    min-height: var(--tap);
  }

  .pp-close {
    min-width: var(--tap);
  }

  /* 16px stops iOS Safari zooming the page when a field takes focus. */
  .chaitanya-form-input,
  .pp-field input,
  .pp-field select,
  .pp-utr input,
  .prof-form .pp-field input,
  .prof-form .pp-field select,
  .prof-confirm .pp-field input {
    font-size: 16px;
  }
}

/* Phones: the sign-in dialog fits the visible viewport (100dvh) with its
   own scroll, clear of the notch and home indicator. */
@media (max-width: 600px) {
  .chaitanya-modal-backdrop {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .chaitanya-modal-card {
    max-height: 100%;
  }

  .pp-panel {
    top: max(12px, env(safe-area-inset-top));
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .pp-foot {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Small phones (≤379px). */
@media (max-width: 379px) {
  .chaitanya-modal-card {
    padding: 24px 16px 16px;
  }

  .chaitanya-modal-topbar {
    margin-right: -4px;
  }

  .chaitanya-modal-title {
    font-size: 32px;
  }

  .btn-google-auth {
    padding: 12px 16px;
    gap: 8px;
  }

  .profile-meta-card {
    padding: 12px 16px;
  }

  .profile-name {
    font-size: 32px;
  }

  .pp-idcard-main {
    flex-wrap: wrap;
  }

  .prof-head .prof-avatar {
    width: 48px;
    height: 48px;
  }
}