/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0B1F3A;
  --blue:   #0077B6;
  --cyan:   #00B4D8;
  --green:  #00C896;
  --amber:  #FFC000;
  --red:    #E05252;
  --white:  #FFFFFF;
  --gray:   #8090A0;
  --dkgray: #1E3A5F;
  --card:   #162D4A;
}

html, body {
  height: 100%;
  background: var(--navy);
  color: var(--white);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* Added 12 Sep 2026 -- the faint grid backdrop from the approved
     design-canvas mockups (SignupChoice and every marketing-page
     mockup), ported here per explicit instruction to match the
     mockups' visual system, not just their content/copy. Subtle by
     design (4.5% white on navy) -- this is a texture, not a pattern
     meant to be consciously noticed. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* Headings and anything brand/button-like use Space Grotesk (bold,
   geometric) throughout the mockups; body copy stays IBM Plex Sans
   (set above); labels/step numbers/eyebrows use IBM Plex Mono (below,
   near .form-group and .reg-progress). Arial/sans-serif/monospace
   stay as fallbacks in every stack in case the Google Fonts request
   is ever blocked. */
h1, h2, h3 {
  font-family: 'Space Grotesk', Arial, sans-serif;
}

/* ── SCREENS ──────────────────────────────────────────────── */
.screen {
  display: none;
  min-height: 100vh;
  padding-bottom: 80px;
}
.screen.active { display: block; }

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}
/* Widened 26 Aug 2026 -- the 480px cap above applied on every screen
   size with no breakpoint, so the whole app rendered as a fixed
   mobile-width column even on a full desktop browser. Kept as the
   mobile default; opens up on tablet/desktop instead of staying
   pinned to phone width. Mirrors coach_app's pre-existing
   .reg-form-container breakpoint (see that file), extended here to
   every screen, not just the registration form. */
@media (min-width: 700px) {
  .container { max-width: 760px; padding: 24px; }
}

/* ── REGISTRATION PROGRESS INDICATOR (added 25 Aug 2026) ──────
   Shared across every screen in index.html/app.js's swimmer-
   registration flow -- see updateProgressIndicator() in js/app.js,
   which fills this in and shows/hides it based on which .screen is
   currently active, and which of the two step lists (SELF vs
   GUARDIAN_FOR_CHILD) applies. Mirrors coach_app/public/css/style.css's
   identical block -- kept visually consistent between the two apps,
   even though each app has its own separate stylesheet. */
.reg-progress {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: var(--dkgray);
  border-bottom: 2px solid var(--cyan);
}
/* Eyebrow label -- shown only for the child sub-flow's separate, reset
   3-step tracker, to mark it as a new phase rather than a continuation
   of the adult tracker just finished. Hidden (no text, display:none) for
   the adult tracker. */
.reg-progress-eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.reg-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.reg-progress-step { display: flex; align-items: center; gap: 6px; }
.reg-progress-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--navy);
  border: 2px solid var(--gray);
  color: var(--gray);
}
.reg-progress-step-label { font-size: 12px; color: var(--gray); white-space: nowrap; }
.reg-progress-step-active .reg-progress-step-num { border-color: var(--cyan); color: var(--cyan); }
.reg-progress-step-active .reg-progress-step-label { color: var(--cyan); font-weight: 600; }
.reg-progress-step-done .reg-progress-step-num { border-color: var(--green); background: var(--green); color: var(--navy); }
.reg-progress-step-done .reg-progress-step-label { color: var(--green); }
.reg-progress-step-arrow { color: var(--gray); font-size: 14px; margin: 0 2px; }
/* One-line "Step X of 3 -- Label" caption, shown only below 480px in
   place of the per-step labels (see media query below) so the "identity
   verification/registering your child is 3 parts" context isn't lost
   entirely on a phone. */
.reg-progress-caption { display: none; font-size: 12px; font-weight: bold; color: var(--cyan); }
@media (max-width: 480px) {
  /* Numbers + checkmarks alone still convey progress on small screens. */
  .reg-progress-step-label { display: none; }
  .reg-progress-caption { display: block; }
}

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--dkgray);
  border-bottom: 1px solid var(--blue);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--cyan);
  text-decoration: none; /* .nav-brand became a link to pixactly.ai, 27 Aug 2026,
                             when it swapped from "Pool Champ" text to the
                             Pixactly logo/link to match .pixactly-header's
                             left-aligned placement (see index.html) */
}
/* Bumped to match brand.css's canonical .nav-logo (26 Aug 2026) --
   was 24px/opacity 0.8, smaller and dimmer than pixactly.ai's own
   navbar and than the .pixactly-header/.brand-byline treatment used
   on the login screen. Same .navbar padding as .pixactly-header, so
   this fits without any layout changes. */
.nav-logo { height: 40px; width: auto; }
.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-pixactly-link {
  color: var(--cyan);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.85;
}
.nav-pixactly-link:hover { opacity: 1; }

/* Pixactly top header (added 26 Aug 2026) -- shown whenever #navbar
   above is hidden (login, pending-approval); .navbar-right/.nav-
   pixactly-link above carry the same link once the real navbar is
   visible, so the two are never shown at once (toggled inversely in
   js/app.js's showScreen()). Same padding/background/border as
   .navbar so switching between the two reads as one continuous header,
   not two different bars. Content styled like the now-removed centered
   .brand-byline (full opacity, bold cyan, 40px logo -- see
   POOL_CHAMP_ACTION_ITEMS.md item 72/74), just left-aligned instead of
   centered. */
/* RESTYLED 2 Oct 2026 -- every screen that shows this header is now an
   .auth-screen with a full-bleed hero photo (see "AUTH SCREENS" at the
   end of this file), so the bar's own dkgray background and border are
   gone and it floats over the top-left of the hero instead (same spot
   the brand occupies on the standee). position:absolute takes it out of
   the flow, so the hero starts at the very top of the page. hub.js still
   toggles it with inline display:flex/none exactly as before. */
.pixactly-header {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: transparent;
  border-bottom: none;
}
@media (min-width: 900px) {
  .pixactly-header { padding: 28px 48px; }
}
.pixactly-header a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--cyan);
  text-decoration: none;
}
.pixactly-header img {
  height: 40px;
  width: auto;
}

/* ── BOTTOM NAV ───────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--dkgray);
  border-top: 1px solid var(--blue);
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: none;
  border: none;
  color: var(--gray);
  font-size: 11px;
  cursor: pointer;
  gap: 4px;
}
.nav-item.active { color: var(--cyan); }
.nav-icon { font-size: 20px; }
/* Added 25 Aug 2026 -- dimmed look for the "Book" nav tab (and the
   dashboard's own "+ Book session" link, via .btn-text-disabled below)
   while a swimmer's identity_verified isn't true yet. See
   updateBookingAccessUI() in app.js -- this is a visual cue only, the
   actual gate is the click-time check in the same function (and the
   firestore.rules bookings.create rule server-side). */
.nav-item-disabled { opacity: 0.4; }
.btn-text-disabled { opacity: 0.4; }

/* ── BOOKING CALENDAR (added 25 Aug 2026) ─────────────────────
   screen-booking's date picker -- see renderBookingCalendar() in
   app.js. */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 6px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day, .calendar-day-empty {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
}
.calendar-day {
  background: var(--dkgray);
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
}
.calendar-day:hover:not(:disabled) { border-color: var(--cyan); }
.calendar-day-today { border-color: var(--cyan); font-weight: bold; }
.calendar-day-disabled, .calendar-day:disabled {
  background: none;
  border-color: var(--dkgray);
  color: var(--gray);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Added 25 Aug 2026 -- booking-details' time picker, swapped from a
   plain <select> to a tappable grid once "Stroke type" was dropped and
   time became the only field left. Same visual language as
   .calendar-day above (dkgray/blue outline, cyan on hover) so the two
   booking screens feel consistent.
   UPDATED 25 Aug 2026 -- widened from 4 fixed slots to 30-min slots
   from 10:00 AM to 3:30 PM (12 slots); moved from 2 to 3 columns so
   that many buttons still lays out as a compact block instead of one
   tall column. */
.time-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.time-slot {
  padding: 12px 4px;
  background: var(--dkgray);
  border: 1px solid var(--blue);
  border-radius: 8px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.time-slot:hover { border-color: var(--cyan); }
.time-slot-selected {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy);
}

/* ── LOGIN ────────────────────────────────────────────────── */
/* .login-container/.login-container h1/.tagline below: NO LONGER USED by
   hub_app's index.html as of 2 Oct 2026 (the four pre-login screens moved
   to .auth-screen/.auth-hero/.auth-main, see the AUTH SCREENS block at
   the end of this file). Left in place as a historical record and because
   this stylesheet was ported from swimmer_app, whose own copy still uses
   them. */
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}
@media (min-width: 700px) {
  .login-container { max-width: 480px; padding: 72px 20px; }
}
.login-container h1 {
  font-size: 28px;
  color: var(--cyan);
  letter-spacing: 2px;
}
.tagline {
  color: var(--gray);
  font-style: italic;
  margin-top: 4px;
}
/* ── PIXACTLY BYLINE (corrected 26 Aug 2026) ─────────────────────
   Previously de-emphasized (opacity 0.55, 16px logo, plain <p>, no
   link) on the theory that pixactly.ai itself keeps its logo small
   and confined outside its header nav -- action item 72
   (POOL_CHAMP_ACTION_ITEMS.md) flagged this as a mismatch against the
   real site and, per the user's direct instruction plus the actual
   shared brand.css Pixactly supplied, this is now corrected: that
   file's .nav-brand/.nav-logo rules (the real, current, shared-across
   -TTChamp-and-PoolChamp treatment) use FULL opacity, bold cyan text,
   and a 40px logo -- there is no "de-emphasized byline" pattern
   anywhere in Pixactly's actual design system. Values below now match
   .nav-brand/.nav-logo from that shared file directly. Markup changed
   from a plain <p> to a real link to https://pixactly.ai (see
   index.html/interest.html), matching the real site's clickable
   logo. */
.brand-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--cyan);
  text-decoration: none;
}
.brand-byline img {
  height: 40px;
  width: auto;
}
/* Restyled 12 Sep 2026, per mockup -- was plain centered text with no
   visual separation from the buttons above/below it; hairline rules on
   either side read as an actual divider instead of a stray line of copy. */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: var(--gray);
  margin: 16px 0;
  font-size: 13px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

/* ── SIGNUP CHOICE TILES (added 12 Sep 2026) ─────────────────
   Replaces the two stacked full-width "For myself"/"For my child"
   buttons on screen-signup-choice with equal-weight side-by-side tiles --
   same .btn-primary click targets and ids, just laid out and styled as
   tiles instead of a primary action followed by what read as a
   secondary one. Same card look (var(--card) background, var(--blue)
   border, 12px radius) as the rest of the app, not a new visual
   language. */
.signup-choice-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .signup-choice-tiles { grid-template-columns: 1fr; }
}
.signup-choice-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--white);
}
.signup-choice-tile:hover:not(:disabled) { border-color: var(--cyan); }
.signup-choice-tile:disabled { opacity: 0.6; cursor: not-allowed; }
.signup-choice-tile-title { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 15px; font-weight: bold; }
.signup-choice-tile-desc { font-size: 12.5px; color: var(--gray); line-height: 1.4; }

/* Small status pill -- replaces screen-signup-choice's old plain-text
   ".tagline" ("You're verified") with something that reads as a
   confirmation of what just happened (email + phone verification),
   same cyan token as everywhere else, no new colours. */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.4);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Callout -- a cyan-tinted variant of .card for a single piece of
   supporting info (e.g. "get your e-KYC file ready ahead of time")
   that shouldn't read as just another paragraph in the card. Same
   border/background pattern as .card, tinted with the existing --cyan
   token via rgba rather than a new colour. */
.callout {
  display: flex;
  gap: 10px;
  border: 1px solid rgba(0, 180, 216, 0.35);
  background: rgba(0, 180, 216, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
}
.callout .meta-text { margin-bottom: 0; color: var(--white); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
  text-align: left;
}
.form-group label {
  display: block;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  background: var(--dkgray);
  border: 1px solid var(--blue);
  border-radius: 8px;
  color: var(--white);
  font-size: 15px;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--cyan);
}
/* Added 13 Sep 2026 -- .checkbox-item (screen-identity-ekyc-upload's
   freshness checkbox) was used as a class with no matching rule anywhere
   in this file. With nothing to override it, .form-group input above
   (width:100%, padding, background, border) applied to the checkbox
   itself same as any text input, stretching its hit-area to the full row
   width -- which centers the native tick glyph within that wide box in
   Chrome/Edge, landing it on its own line, visually disconnected above
   its own label text. .form-group label's uppercase/mono/gray styling
   (meant for field labels like "SHARE CODE") was also bleeding onto this
   checkbox's sentence-case agreement text for the same reason -- nothing
   scoped it out. Fixed by giving the checkbox its own real layout
   (checkbox and text side by side, native size) and resetting the parts
   of .form-group input/label that don't belong on a checkbox. */
.form-group label.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-transform: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
/* Added 12 Sep 2026, per mockup -- the "✓ Verified" indicator that used to
   be its own line under the field (id="contact-email-status" /
   contact-phone-status) now sits inline in the field's own row, in the
   spot the "Get OTP" button occupied. See index.html's screen-contact-
   account and hub.js's *-verify handlers. */
.field-verified {
  display: none;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
  color: var(--green);
  white-space: nowrap;
}
/* Added 12 Sep 2026, per mockup -- "+91" and the phone number used to be
   two separately-bordered elements (a plain span next to a fully-styled
   input); this wraps them in one shared border/background so the field
   reads as a single control, matching every other .form-group input. */
.phone-input-group {
  display: flex;
  align-items: stretch;
  background: var(--dkgray);
  border: 1px solid var(--blue);
  border-radius: 8px;
  overflow: hidden;
}
.phone-input-group:focus-within { border-color: var(--cyan); }
.phone-input-group .phone-input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  color: var(--gray);
  border-right: 1px solid var(--blue);
  background: rgba(255, 255, 255, 0.03);
}
.phone-input-group input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.phone-input-group input:focus { outline: none; }
/* REMOVED 13 Sep 2026 -- this was ": disabled { color: var(--gray); }",
   dimming the phone number once "Get OTP" locks it. Flagged live: the
   email field locks the exact same way (see hub.js's btn-contact-email-
   verify/btn-contact-phone-verify, both just set .disabled = true on
   success) but has no matching color override, so it stays var(--white)
   -- the phone number was the only locked field going dim, not a
   deliberate "locked = greyed out" convention. Removed so both verified
   fields read the same brightness; .form-group input's base
   color: var(--white) now applies here too, disabled or not. */
/* Added 12 Sep 2026 -- Chrome/Edge force autofilled inputs to a white (or
   pale yellow) background with black text via the browser's own
   :-webkit-autofill styling, which overrides normal background/color
   rules and can't be beaten with !important on those properties directly.
   Spotted on the email field once a saved address autofilled it -- likely
   affects any input on any screen a browser chooses to autofill, not just
   this one. The documented workaround is an absurdly long-delayed
   background-color transition plus a matching inset box-shadow, which
   Chrome accepts in place of a plain background override. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0px 1000px var(--dkgray) inset;
  box-shadow: 0 0 0px 1000px var(--dkgray) inset;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--cyan);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: var(--blue); color: var(--white); }
/* Added 28 Aug 2026 -- .btn-primary previously had no :disabled style at
   all, so a genuinely disabled button (e.g. "Get OTP" after that
   channel verifies, or "Continue" before both channels verify on
   screen-contact-account) rendered pixel-identical to an enabled one --
   functionally correct (unclickable) but looked broken/confusing.
   Mirrors the existing .calendar-day:disabled treatment elsewhere in
   this file (dim + not-allowed cursor). */
.btn-primary:disabled {
  background: var(--dkgray);
  color: var(--gray);
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-full { width: 100%; }
.btn-google {
  background: var(--white);
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-google span { font-weight: bold; font-size: 18px; color: #4285F4; }
.btn-back {
  background: none;
  border: none;
  color: var(--cyan);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  display: block;
}
.btn-text {
  background: none;
  border: none;
  color: var(--cyan);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
/* Added 12 Sep 2026, per mockup -- an outlined secondary button, for
   actions that are real alternatives (screen-login's "Create an account")
   or reversible corrections (screen-contact-account's phone "Change"),
   not a page-level navigation link like .btn-back/.btn-text. */
.btn-outline {
  background: none;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  border-radius: 8px;
  padding: 13px 20px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.btn-outline:hover:not(:disabled) { background: rgba(0, 180, 216, 0.1); }
.btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gray);
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
}

/* ── WELCOME BANNER ───────────────────────────────────────── */
.welcome-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 16px;
}
.welcome-sub { color: var(--gray); font-size: 13px; }
.welcome-banner h2 { font-size: 22px; color: var(--white); margin-top: 4px; }
.skill-badge {
  background: var(--blue);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

/* ── STATS ROW ────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.stat-value {
  font-size: 22px;
  font-weight: bold;
  color: var(--cyan);
}
.stat-label { font-size: 11px; color: var(--gray); margin-top: 4px; }

/* ── SECTION HEADER ───────────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-header h3 { font-size: 16px; color: var(--white); }

/* ── SESSION CARDS ────────────────────────────────────────── */
.session-card {
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.session-card:hover { border-color: var(--cyan); }
.session-card-left h4 { font-size: 15px; margin-bottom: 4px; }
.session-card-left p { font-size: 12px; color: var(--gray); }
.session-card-right { text-align: right; }
.quality-badge {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
}
.quality-HIGH { background: #003820; color: var(--green); }
.quality-MEDIUM { background: #3D2E00; color: var(--amber); }
.quality-LOW { background: #3D0000; color: var(--red); }

/* ── METRICS GRID ─────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.metric-card {
  background: var(--card);
  border: 1px solid var(--blue);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--cyan);
}
.metric-good { color: var(--green); }
.metric-warn { color: var(--amber); }
.metric-label { font-size: 11px; color: var(--gray); margin-top: 4px; }
.metric-unit { font-size: 11px; color: var(--gray); }

/* ── LAP CARDS ────────────────────────────────────────────── */
.lap-card {
  background: var(--card);
  border: 1px solid var(--dkgray);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lap-num { font-weight: bold; color: var(--cyan); font-size: 14px; }
.lap-stats { font-size: 12px; color: var(--gray); }
.lap-note { font-size: 12px; color: var(--white); margin-top: 6px; }

/* ── COACH NOTES ──────────────────────────────────────────── */
.coach-note-card {
  background: var(--card);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.coach-note-card p { font-size: 14px; line-height: 1.5; }
.coach-note-card .note-meta {
  font-size: 11px;
  color: var(--gray);
  margin-top: 6px;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.meta-text { color: var(--gray); font-size: 13px; margin-bottom: 8px; }
.loading { color: var(--gray); text-align: center; padding: 32px; }
.empty-state { color: var(--gray); text-align: center; padding: 32px; font-size: 14px; }
.error-msg { color: var(--red); font-size: 13px; margin-bottom: 12px; padding: 8px; background: #3D0000; border-radius: 6px; }
.success-msg { color: var(--green); font-size: 13px; margin-bottom: 12px; padding: 8px; background: #003820; border-radius: 6px; }
/* ── FACT VALUE (added 2 Oct 2026) ─────────────────────────────
   Read-only facts shown inside a form card -- legal name and date of
   birth extracted from the Aadhaar file on screen-identity-details and
   screen-child-details. Replaces <input readonly> boxes there: a locked
   box is indistinguishable from an editable one, so it kept reading as
   "type here". Styled as a value under its .form-group label, not as a
   field -- no box, no border; a thin cyan rule on the left marks it as
   confirmed data. Written with textContent from hub.js. */
.fact-value {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  padding: 6px 0 6px 12px;
  border-left: 3px solid var(--cyan);
  min-height: 34px;
  line-height: 22px;
  word-break: break-word;
}

/* ── AUTH SCREENS (added 2 Oct 2026) ───────────────────────────
   The four pre-login screens -- screen-login, screen-reset-password,
   screen-signup-choice, screen-contact-account -- restyled per the
   approved "Direction A -- standee continued" mockup: the poolside
   standee's hero photo (hero_swimmer.jpg, in this folder) and its
   "Swim. Measure. Improve." line open each screen, so the page a
   swimmer lands on after scanning the standee's QR code looks like the
   standee continued, not a bare form on a grid.
   Layout: on phones the hero is a tall banner (photo at the top, the
   headline sitting in the water below the swimmer's chin, fading into
   navy) with the card below it; from 900px the screen becomes two
   columns, hero full-height on the left (sticky, so a long card on the
   right scrolls past it), card vertically centred on the right.
   Everything here is scoped under .auth-screen / .auth-main so no
   post-login screen changes. The faint body grid still shows behind the
   right-hand column on desktop and below the card on phones -- kept on
   purpose, it's the same texture the rest of the app uses.
   The headline is forced onto ONE line at every width (white-space:
   nowrap, sized with clamp() against the viewport) -- an explicit
   requirement: the three words are one sentence and must never wrap.
   Check this against the real Space Grotesk, not a fallback, if the
   wording or font ever changes. */
.auth-screen {
  position: relative;      /* anchors #pixactly-header's absolute overlay */
  padding-bottom: 0;       /* .screen's 80px bottom-nav allowance isn't needed pre-login */
}
.auth-hero {
  position: relative;
  min-height: 430px;
  background: url(../hero_swimmer.jpg) 55% 0% / cover no-repeat;
}
.auth-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 31, 58, 0.10) 0%,
    rgba(11, 31, 58, 0.15) 55%,
    rgba(11, 31, 58, 0.90) 80%,
    var(--navy) 100%);
}
.auth-hero-text {
  position: relative;
  z-index: 1;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px 52px;
}
.auth-tag {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 6.1vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.auth-tag em { font-style: normal; color: var(--cyan); }
.auth-tagline {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 6px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.auth-main {
  position: relative;
  z-index: 2;
  margin-top: -28px;       /* card overlaps the hero's navy fade slightly */
  padding: 0 16px 40px;
}
.auth-main .card {
  max-width: 440px;
  margin: 0 auto;
  padding: 22px 20px;
  border-radius: 18px;
  border-color: rgba(0, 180, 216, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  text-align: left;
}
.auth-main .card h2 { font-size: 22px; }
.auth-sub { margin-top: 6px; margin-bottom: 16px; line-height: 1.5; font-size: 13.5px; }
/* Inputs inside the auth card: rounder and set on the page's navy (not
   dkgray) so they sit back inside the card instead of competing with it. */
.auth-main .form-group input,
.auth-main .phone-input-group {
  border-radius: 10px;
  background: rgba(11, 31, 58, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
}
.auth-main .form-group input:focus,
.auth-main .phone-input-group:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.25);
}
.auth-main .phone-input-group .phone-input-prefix { border-right-color: rgba(255, 255, 255, 0.12); }
.auth-main .form-group input:-webkit-autofill,
.auth-main .form-group input:-webkit-autofill:hover,
.auth-main .form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #0E2444 inset;
  box-shadow: 0 0 0px 1000px #0E2444 inset;
}
.auth-main .btn-primary { border-radius: 10px; }
.auth-main .btn-primary.btn-full:not(:disabled) { box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3); }
.auth-main .btn-outline { border-radius: 10px; }
.auth-main .divider { margin-top: 18px; }
/* Static registration-stage overview on screen-contact-account (see the
   comment on that markup in index.html). Same circle/label vocabulary
   as .reg-progress so the two read as one family. */
.auth-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
}
.auth-step { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.auth-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--gray);
  color: var(--gray);
}
.auth-step-label { color: var(--gray); }
.auth-step-active .auth-step-num { border-color: var(--cyan); background: var(--cyan); color: var(--navy); }
.auth-step-active .auth-step-label { color: var(--cyan); font-weight: 600; }
.auth-step-bar { flex: 1; height: 2px; background: var(--gray); opacity: 0.35; }

@media (min-width: 900px) {
  .auth-screen.active {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100vh;
  }
  .auth-hero {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    background-position: center 35%;
  }
  .auth-hero::after {
    background:
      linear-gradient(90deg, rgba(11, 31, 58, 0.05) 40%, var(--navy) 100%),
      linear-gradient(0deg, rgba(11, 31, 58, 0.85) 0%, transparent 45%);
  }
  .auth-hero-text { min-height: 100vh; padding: 36px 48px; }
  .auth-tag { font-size: clamp(28px, 3.3vw, 46px); }
  .auth-tagline { font-size: 16px; max-width: 460px; margin-top: 10px; }
  .auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 40px;
  }
  .auth-main .card { width: 100%; max-width: 460px; padding: 34px 32px; margin: 0; }
}

/* ── REGISTRATION STEP FRAME (added 3 Oct 2026, registration-polish pass) ──
   The seven post-login registration steps (identity e-KYC upload, confirm
   details, selfie; child e-KYC, details, photo, relationship document)
   and the finish screen (screen-pending-approval) carry class .reg-screen
   in index.html. Each already has its own <nav class="navbar"> and (the
   seven steps) a .reg-progress tracker filled by hub.js's
   updateRegProgress(). Nothing in that markup or JS changes: this block
   restyles those two elements so they sit on a strip of the hero photo
   (the water, no face -- the strip is the BOTTOM of hero_swimmer.jpg,
   aligned so its bottom edge lands 150px down whatever the screen
   width), fading into navy, so every step looks like one continuation of
   the sign-in page's hero. The numbered circles + arrows the tracker
   renders become a filled progress bar: the arrows are hidden, each step
   draws its own bar segment, and the "Step X of N — Label" caption hub.js
   already writes is shown on every width as the eyebrow line. */
.reg-screen {
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(11, 31, 58, 0.62) 0px, rgba(11, 31, 58, 0.62) 90px, var(--navy) 150px),
    url(../hero_swimmer.jpg);
  background-repeat: no-repeat, no-repeat;
  /* Phones: scale the photo to 395px tall so the 150px strip is its bottom
     38% (water, arms -- no face), horizontally centred. The image is
     1600x850, so 395px tall = 744px wide, wider than any phone. */
  background-size: 100% 150px, auto 395px;
  background-position: 0 0, center -245px;
}
@media (min-width: 744px) {
  /* Wider screens: scale to the full width and keep only the bottom 150px
     of the photo (ratio 0.53125 -> at 900px wide that's the bottom 31%,
     at 1366px the bottom 20%; water either way). */
  .reg-screen {
    background-size: 100% 150px, 100% auto;
    background-position: 0 0, center calc(150px - 100vw * 0.53125);
  }
}
.reg-screen .navbar {
  background: transparent;
  border-bottom: none;
  position: static;
  padding: 16px 20px 6px;
  max-width: 560px;
  margin: 0 auto;
}
.reg-screen .nav-brand { font-size: 15px; letter-spacing: 0.08em; }
.reg-screen .nav-logo { height: 28px; }
.reg-screen .btn-icon, .reg-screen .btn-navbar-logout { color: rgba(255, 255, 255, 0.8); }
.reg-screen .reg-progress {
  background: transparent;
  border-bottom: none;
  align-items: stretch;
  gap: 8px;
  padding: 4px 20px 16px;
  max-width: 560px;
  margin: 0 auto;
}
.reg-screen .reg-progress-caption {
  display: block;            /* hub.js already writes "Step X of N — Label" here */
  order: -1;                 /* above the bar */
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.reg-screen .reg-progress-eyebrow {
  order: -2;                 /* "Registering your child" pill, child flow only */
  align-self: flex-start;
  color: var(--cyan);
  border: 1px solid rgba(0, 180, 216, 0.5);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 2px;
}
.reg-screen .reg-progress-steps { flex-wrap: nowrap; gap: 8px; width: 100%; justify-content: stretch; }
.reg-screen .reg-progress-step-arrow { display: none; }
.reg-screen .reg-progress-step {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.reg-screen .reg-progress-step::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.reg-screen .reg-progress-step-done::before { background: var(--green); }
.reg-screen .reg-progress-step-active::before { background: var(--cyan); }
.reg-screen .reg-progress-step-num { display: none; }
.reg-screen .reg-progress-step-label {
  display: block;            /* the base rule hides labels under 480px; the bar has room for them */
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.reg-screen .reg-progress-step-active .reg-progress-step-label { color: var(--cyan); font-weight: 600; }
.reg-screen .reg-progress-step-done .reg-progress-step-label { color: var(--green); }
.reg-screen .container { max-width: 560px; padding-top: 4px; }
.reg-screen h2 { font-size: 24px; line-height: 1.15; }
.reg-screen .card {
  border-color: rgba(0, 180, 216, 0.3);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.reg-screen .form-group input,
.reg-screen .form-group select {
  border-radius: 10px;
  background: rgba(11, 31, 58, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
}
.reg-screen .form-group input:focus,
.reg-screen .form-group select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.25);
}
.reg-screen .btn-primary { border-radius: 10px; }
.reg-screen .btn-primary.btn-full:not(:disabled) { box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3); }

/* "What we'll ask for" list on screen-contact-account */
.ask-list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 14px 0 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}
.ask-list li { display: flex; gap: 10px; align-items: flex-start; }
.ask-ic {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0, 180, 216, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* "Don't have the file yet?" help card on screen-identity-ekyc-upload */
.help-eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.help-steps { list-style: none; display: grid; gap: 12px; }
.help-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.help-steps a { color: var(--cyan); font-weight: 600; text-decoration: none; word-break: break-all; }
.help-n {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.15);
  border: 1px solid rgba(0, 180, 216, 0.5);
  color: var(--cyan);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Dashed frame around the native file input (adult + child e-KYC steps).
   The <input type="file"> inside is untouched -- hub.js reads it as before. */
.file-drop {
  border: 1.5px dashed rgba(0, 180, 216, 0.55);
  border-radius: 12px;
  padding: 14px;
  background: rgba(0, 180, 216, 0.05);
  text-align: center;
}
.file-drop-hint { display: block; font-size: 12.5px; color: var(--gray); margin-bottom: 10px; }
.file-drop input[type="file"] { background: transparent; border: none; padding: 4px 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.file-drop input[type="file"]::file-selector-button {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  background: var(--cyan);
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  margin-right: 10px;
  cursor: pointer;
}

/* Finish screen (screen-pending-approval) */
.finish-card { margin-top: 1.25rem; padding: 28px 22px; text-align: center; max-width: 460px; margin-left: auto; margin-right: auto; }
.finish-tick {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--green);
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(0, 200, 150, 0.15), 0 0 0 24px rgba(0, 200, 150, 0.07);
  animation: finish-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes finish-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .finish-tick { animation: none; } }
.finish-card h2 { font-size: 28px; }
.finish-lead { font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
.finish-steps { text-align: left; margin-top: 18px; display: grid; gap: 14px; }
.finish-step { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.finish-step small { display: block; color: var(--gray); font-size: 12.5px; margin-top: 2px; }
.finish-dot {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.finish-dot-done { background: var(--green); color: var(--navy); }
.finish-dot-now { border: 2px solid var(--cyan); }
.finish-dot-now::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.finish-dot-next { border: 2px solid var(--gray); }
.finish-share {
  margin-top: 18px;
  background: rgba(0, 180, 216, 0.08);
  border: 1px solid rgba(0, 180, 216, 0.3);
  border-radius: 12px;
  padding: 14px;
  text-align: left;
  font-size: 13.5px;
}
.finish-share p { font-size: 13px; color: rgba(255, 255, 255, 0.85); margin-top: 4px; line-height: 1.45; }

/* ── DIGILOCKER (added 16 Oct 2026) ───────────────────────────
   The online Aadhaar check: the DigiLocker version of
   screen-signup-choice and the four DigiLocker screens (index.html's
   DIGILOCKER SCREENS), as in the approved mock-ups, in the app's own
   colours. */

/* screen-signup-choice carries both versions; hub.js's
   applyRegistrationMethod() adds class dl-mode for the DigiLocker one.
   Without it -- switch unread, unreadable, or set to the upload -- only
   the e-KYC upload version shows. */
#screen-signup-choice .dl-only { display: none; }
#screen-signup-choice.dl-mode .dl-only { display: block; }
#screen-signup-choice.dl-mode .ekyc-only { display: none; }

/* Myself / My child */
.dl-choice { display: grid; gap: 12px; margin: 16px 0 20px; }
.dl-choice-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(11, 31, 58, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.dl-choice-option:has(input:checked) { border-color: var(--cyan); background: rgba(0, 180, 216, 0.08); }
.dl-choice-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.25); }
.dl-choice-option input[type="radio"] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--cyan); }
.dl-choice-text { display: flex; flex-direction: column; gap: 2px; }
.dl-choice-title { font-weight: 600; font-size: 16px; }
.dl-choice-desc { font-size: 13px; color: var(--gray); line-height: 1.4; }

/* "Continue to DigiLocker" -- label plus a leaving-this-site icon */
.dl-go { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dl-go svg { flex-shrink: 0; }
.dl-go:disabled svg { display: none; }
.dl-privacy { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--gray); }

/* "Aadhaar received" / "Your identity is verified" badge above a heading */
.dl-received { margin-bottom: 12px; }

/* Checking your Aadhaar… */
.dl-checking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 16px 40px;
  text-align: center;
}
.dl-checking h2 { margin: 0; }
.dl-checking .meta-text { font-size: 14px; line-height: 1.5; margin: 0; max-width: 340px; }
.dl-spinner { animation: dl-spin 1s linear infinite; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dl-spinner { animation: none; } }

/* When DigiLocker ends without an Aadhaar */
.reg-screen .container.dl-problem { padding-top: 64px; } /* no tracker on this screen: start below the photo strip */
.dl-problem-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dl-problem-message { font-size: 15px; line-height: 1.5; margin: 10px 0 20px; }
.dl-desk { text-align: center; font-size: 13px; line-height: 1.5; margin: 14px 0 6px; }

/* ── THE HOME SCREEN (redesigned 18 Oct 2026) ─────────────────
   screen-home (class .hub-home) given the swimmer app's new home look,
   itself the registration pages' "standee continued" direction: the
   water at the bottom of hero_swimmer.jpg behind the greeting, fading
   into navy, with the screen's navbar sitting on the photo; rounded,
   lifted cards below. Phones: one column. From 600px the two app cards
   sit side by side; the page stays one centred column (880px at most). */
.hub-home, .hub-profile { position: relative; }
.hub-home .navbar, .hub-profile .navbar {
  position: absolute;      /* sits on the photo and scrolls away with it */
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.hub-home .btn-icon, .hub-profile .btn-icon { color: rgba(255, 255, 255, 0.85); }
.hub-hero {
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg, rgba(11, 31, 58, 0.70) 0px, rgba(11, 31, 58, 0.30) 90px, rgba(11, 31, 58, 0.45) 60%, var(--navy) 100%),
    url(../hero_swimmer.jpg);
  background-repeat: no-repeat, no-repeat;
  /* Phones: the photo at 780px tall, so the band is its bottom third --
     the water and the splash, no face. */
  background-size: 100% 100%, auto 780px;
  background-position: 0 0, center bottom;
  padding: 92px 0 60px;
}
@media (min-width: 744px) {
  .hub-hero {
    background-size: 100% 100%, max(100%, 1500px) auto;
    padding: 104px 0 68px;
  }
}
.hub-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.hub-eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hub-name {
  font-weight: 700;
  font-size: clamp(30px, 7.5vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 6px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.hub-sport-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(11, 31, 58, 0.55);
  border: 1px solid rgba(0, 180, 216, 0.45);
  color: var(--cyan);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hub-sport-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.hub-container {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: -34px auto 0;    /* the first cards overlap the photo's fade */
  padding: 0 16px 24px;
}
@media (min-width: 700px) { .hub-container { padding: 0 20px 24px; } }
.hub-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 26px 2px 10px;
}
.hub-container > .hub-section-title:first-child { margin-top: 0; }
.hub-card {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--white);
  font-family: inherit;
  background: linear-gradient(180deg, #17314F 0%, var(--card) 100%);
  border: 1px solid rgba(0, 180, 216, 0.30);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.hub-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 180, 216, 0.12);
  border: 1px solid rgba(0, 180, 216, 0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* the two apps */
.hub-apps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .hub-apps { grid-template-columns: 1fr 1fr; } }
.hub-app { display: flex; flex-direction: column; gap: 12px; }
.hub-app-head { display: flex; align-items: center; gap: 12px; }
.hub-app-name { font-size: 19px; font-weight: 700; }
.hub-app-text { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.hub-app .hub-btn { margin-top: auto; }
/* buttons: cyan for opening an app, outlined for the lesser actions */
.hub-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 10px;
  background: var(--cyan);
  color: var(--navy);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);
}
.hub-btn:hover:not(:disabled) { background: #33C4E0; }
.hub-btn:not(.hub-btn-quiet):not(.hub-btn-plain):not(:disabled)::after { content: '\2192'; margin-left: 8px; }
.hub-btn-quiet {
  background: transparent;
  color: var(--cyan);
  border: 1px solid rgba(0, 180, 216, 0.5);
  box-shadow: none;
}
.hub-btn-quiet:hover:not(:disabled) { background: rgba(0, 180, 216, 0.1); }
.hub-btn:disabled {
  background: transparent;
  color: var(--gray);
  border: 1px dashed rgba(128, 144, 160, 0.5);
  box-shadow: none;
  cursor: not-allowed;
}
.hub-btn-small {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--cyan);
  color: var(--navy);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.hub-btn-small:hover:not(:disabled) { background: #33C4E0; }
.hub-btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
.hub-btn-danger:hover:not(:disabled) { background: rgba(224, 82, 82, 0.12); }
.hub-btn-small:disabled { opacity: 0.6; cursor: default; }
/* the children */
.hub-children { padding: 6px 20px 20px; }
.hub-child-list { display: flex; flex-direction: column; }
.hub-child {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hub-child:first-child { border-top: none; }
.hub-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--white);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hub-child-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hub-child-name { max-width: 100%; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-child-side { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.hub-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.hub-pill-cyan { background: rgba(0, 180, 216, 0.14); color: var(--cyan); }
.hub-pill-amber { background: rgba(255, 192, 0, 0.14); color: var(--amber); }
.hub-pill-red { background: rgba(224, 82, 82, 0.16); color: var(--red); }
.hub-pill-gray { background: rgba(255, 255, 255, 0.08); color: var(--gray); }
.hub-muted { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; padding: 14px 0 4px; }
.hub-children .hub-btn { margin-top: 14px; }
/* the profile row */
.hub-row-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
}
.hub-row-card:hover { border-color: rgba(0, 180, 216, 0.6); }
.hub-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hub-row-title { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 16px; font-weight: 700; }
.hub-row-sub { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.hub-chevron { color: var(--gray); font-size: 26px; line-height: 1; }

/* ── MANAGE PROFILE (redesigned 18 Oct 2026) ──────────────────
   screen-manage-profile (class .hub-profile) in the home page's look: a
   shorter photo band with the way back and the page's name, then the
   default pool and the password as two cards (side by side from 900px).
   The fields take the registration pages' rounded style. */
.hub-hero-short { padding: 84px 0 56px; }
@media (min-width: 744px) { .hub-hero-short { padding: 96px 0 64px; } }
.hub-back {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hub-back:hover { color: var(--cyan); }
.hub-name-page { font-size: clamp(28px, 7vw, 38px); margin-top: 0; }
.hub-forms { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) { .hub-forms { grid-template-columns: 1fr 1fr; } }
.hub-form-card { display: flex; flex-direction: column; gap: 14px; }
.hub-form-card .form-group { margin-bottom: 0; }
.hub-form-card .form-group input,
.hub-form-card .form-group select {
  border-radius: 10px;
  background: rgba(11, 31, 58, 0.8);
  border-color: rgba(255, 255, 255, 0.12);
}
.hub-form-card .form-group input:focus,
.hub-form-card .form-group select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.25);
}
.hub-form-card .error-msg,
.hub-form-card .success-msg { margin-bottom: 0; border-radius: 10px; padding: 10px 12px; }
.hub-note { font-size: 12.5px; color: var(--gray); }
/* a save button: no arrow, and while saving it dims rather than turning
   into the outlined "not available" look */
.hub-btn-plain:disabled {
  background: var(--cyan);
  color: var(--navy);
  border: none;
  opacity: 0.6;
  cursor: progress;
}