/*
 * ================================================================
 * SPHERE COMMUNITY — DESIGN SYSTEM
 * Phase 1 Foundation
 * Source: Stitch Project 9541495705861329003
 *        "Sphere Community Website Redesign"
 * Theme:  Orbital Precision & Luminous Aerospace (LIGHT MODE)
 * ================================================================
 */

/* ---------------------------------------------------------------
   GOOGLE FONTS IMPORT
   Matches exact Stitch font declarations across all screens
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — COLOR SYSTEM
   All values extracted directly from Stitch Tailwind config
--------------------------------------------------------------- */
:root {
  /* --- Surface Layers (Light background hierarchy) --- */
  --color-background:                #f8f9ff;
  --color-surface:                   #f8f9ff;
  --color-surface-bright:            #f8f9ff;
  --color-surface-dim:               #cadbf7;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #eff3ff;
  --color-surface-container:         #e6eeff;
  --color-surface-container-high:    #dde9ff;
  --color-surface-container-highest: #d3e3ff;
  --color-surface-variant:           #d3e3ff;
  --color-surface-tint:              #4e5e82;

  /* --- Text / On-surface --- */
  --color-on-surface:         #0b1c31;
  --color-on-surface-variant: #44474e;
  --color-on-background:      #0b1c31;

  /* --- Primary (Black / Deep Navy) --- */
  --color-primary:                   #000000;
  --color-on-primary:                #ffffff;
  --color-primary-container:         #081b3b;
  --color-on-primary-container:      #7484a9;
  --color-primary-fixed:             #d8e2ff;
  --color-primary-fixed-dim:         #b6c6ef;
  --color-on-primary-fixed:          #081b3b;
  --color-on-primary-fixed-variant:  #364669;

  /* --- Secondary (Royal Blue / Electric Blue CTAs) --- */
  --color-secondary:                    #0044cc;
  --color-on-secondary:                 #ffffff;
  --color-secondary-container:          #115afe;
  --color-on-secondary-container:       #e9ebff;
  --color-secondary-fixed:              #dce1ff;
  --color-secondary-fixed-dim:          #b6c4ff;
  --color-on-secondary-fixed:           #001550;
  --color-on-secondary-fixed-variant:   #003ab2;

  /* --- Tertiary --- */
  --color-tertiary:                  #000000;
  --color-on-tertiary:               #ffffff;
  --color-tertiary-container:        #001944;
  --color-on-tertiary-container:     #377ffc;
  --color-tertiary-fixed:            #d9e2ff;
  --color-tertiary-fixed-dim:        #afc6ff;
  --color-on-tertiary-fixed:         #001944;
  --color-on-tertiary-fixed-variant: #004299;

  /* --- Error --- */
  --color-error:             #ba1a1a;
  --color-on-error:          #ffffff;
  --color-error-container:   #ffdad6;
  --color-on-error-container:#93000a;

  /* --- Inverse --- */
  --color-inverse-surface:     #213147;
  --color-inverse-on-surface:  #ebf1ff;
  --color-inverse-primary:     #b6c6ef;

  /* --- Outline / Border --- */
  --color-outline:         #75777f;
  --color-outline-variant: #c5c6cf;

  /* --- Non-tokenized accents (used explicitly in Stitch HTML) --- */
  --color-avatar-ring:        #3B82FF;  /* Avatar orbital ring */
  --color-navbar-user-ring:   #8EC5FF;  /* Navbar user avatar ring */
  --color-status-active:      #10b981;  /* Emerald-500: active/live ping dots */

  /* ---------------------------------------------------------------
     SEMANTIC ALIASES (convenience for usage in components)
  --------------------------------------------------------------- */
  --bg-page:          var(--color-background);
  --text-primary:     var(--color-on-surface);
  --text-secondary:   var(--color-on-surface-variant);
  --accent-primary:   var(--color-secondary);
  --accent-cta:       var(--color-secondary-container);
  --card-bg:          var(--color-surface-container-lowest);
  --border-subtle:    var(--color-outline-variant);
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — TYPOGRAPHY SCALE
   Exact values from Stitch Tailwind fontSize config
--------------------------------------------------------------- */
:root {
  /* Font families */
  --font-display:    'Space Grotesk', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* --- display-hero --- */
  --text-display-hero-size:    56px;
  --text-display-hero-lh:      64px;
  --text-display-hero-ls:      0.08em;
  --text-display-hero-weight:  700;

  /* --- display-hero-mobile --- */
  --text-display-hero-mobile-size:   36px;
  --text-display-hero-mobile-lh:     44px;
  --text-display-hero-mobile-ls:     0.06em;
  --text-display-hero-mobile-weight: 700;

  /* --- headline-lg --- */
  --text-headline-lg-size:   32px;
  --text-headline-lg-lh:     40px;
  --text-headline-lg-ls:     0.05em;
  --text-headline-lg-weight: 600;

  /* --- headline-lg-mobile --- */
  --text-headline-lg-mobile-size:   26px;
  --text-headline-lg-mobile-lh:     32px;
  --text-headline-lg-mobile-ls:     0.04em;
  --text-headline-lg-mobile-weight: 600;

  /* --- headline-md --- */
  --text-headline-md-size:   22px;
  --text-headline-md-lh:     28px;
  --text-headline-md-ls:     0.04em;
  --text-headline-md-weight: 600;

  /* --- headline-sm --- */
  --text-headline-sm-size:   18px;
  --text-headline-sm-lh:     24px;
  --text-headline-sm-ls:     0.03em;
  --text-headline-sm-weight: 600;

  /* --- title-caps --- */
  --text-title-caps-size:   13px;
  --text-title-caps-lh:     18px;
  --text-title-caps-ls:     0.22em;
  --text-title-caps-weight: 700;

  /* --- body-lg --- */
  --text-body-lg-size:   16px;
  --text-body-lg-lh:     26px;
  --text-body-lg-ls:     -0.01em;
  --text-body-lg-weight: 400;

  /* --- body-md --- */
  --text-body-md-size:   14px;
  --text-body-md-lh:     22px;
  --text-body-md-ls:     0em;
  --text-body-md-weight: 400;

  /* --- body-sm --- */
  --text-body-sm-size:   12px;
  --text-body-sm-lh:     18px;
  --text-body-sm-ls:     0.01em;
  --text-body-sm-weight: 400;

  /* --- telemetry-code --- */
  --text-telemetry-size:   12px;
  --text-telemetry-lh:     16px;
  --text-telemetry-ls:     0.05em;
  --text-telemetry-weight: 500;

  /* --- label-caps --- */
  --text-label-caps-size:   11px;
  --text-label-caps-lh:     14px;
  --text-label-caps-ls:     0.14em;
  --text-label-caps-weight: 600;
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — SPACING SCALE
   Exact values from Stitch Tailwind spacing config
--------------------------------------------------------------- */
:root {
  --space-xs:   0.25rem;  /*  4px */
  --space-sm:   0.5rem;   /*  8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2.5rem;   /* 40px */
  --space-2xl:  4rem;     /* 64px */

  --gutter-sm:  1rem;     /* 16px */
  --gutter:     1.5rem;   /* 24px */
  --gutter-lg:  2rem;     /* 32px */

  --margin-sm:  1rem;     /* 16px */
  --margin:     2rem;     /* 32px */
  --margin-lg:  4rem;     /* 64px */
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — BORDER RADIUS
   Exact values from Stitch Tailwind borderRadius config
--------------------------------------------------------------- */
:root {
  --radius-xs:      0.25rem;  /*  4px — DEFAULT in Stitch config */
  --radius-sm:      0.5rem;   /*  8px — lg in Stitch config */
  --radius-md:      0.75rem;  /* 12px — xl in Stitch config */
  --radius-lg:      1rem;     /* 16px — 2xl applied in actual HTML */
  --radius-full:    9999px;   /* pill */
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — CONTAINER
--------------------------------------------------------------- */
:root {
  --container-max:  80rem;  /* max-w-7xl = 1280px */
  --page-px:        1.5rem; /* px-6 mobile */
  --page-px-lg:     3rem;   /* lg:px-12 desktop */
  --navbar-height:  5rem;   /* h-20 = 80px */
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — ELEVATION / SHADOW SYSTEM
   Exact shadow values from Stitch HTML code
--------------------------------------------------------------- */
:root {
  /* Navbar */
  --shadow-navbar:   0 1px 8px rgba(7, 26, 58, 0.04);

  /* Cards */
  --shadow-card-sm:  0 1px 3px rgba(7, 26, 58, 0.04);     /* shadow-sm */
  --shadow-card-md:  0 4px 12px rgba(7, 26, 58, 0.08);    /* shadow-md */
  --shadow-card-lg:  0 12px 32px -4px rgba(7, 26, 58, 0.12); /* shadow-lg */
  --shadow-card-xl:  0 20px 40px -8px rgba(7, 26, 58, 0.16); /* shadow-xl */

  /* CTA Button glow */
  --shadow-cta:        0 0 20px rgba(20, 91, 255, 0.25);
  --shadow-cta-hover:  0 0 25px rgba(20, 91, 255, 0.45);

  /* Avatar orbital ring */
  --shadow-avatar:  0 0 0 2px #ffffff, 0 0 0 4px #3B82FF, 0 12px 28px rgba(20, 91, 255, 0.25);

  /* Navbar user avatar ring */
  --shadow-user-avatar: 0 0 0 2px #ffffff, 0 0 0 3px #8EC5FF;

  /* Primary CTA large button */
  --shadow-btn-primary:       0 8px 24px rgba(17, 90, 254, 0.3);
  --shadow-btn-primary-hover: 0 12px 32px rgba(17, 90, 254, 0.5);
}

/* ---------------------------------------------------------------
   CSS CUSTOM PROPERTIES — GRADIENTS
   Only gradients explicitly present in Stitch screens
--------------------------------------------------------------- */
:root {
  /* Page-level atmospheric glows (fixed, pointer-events-none) */
  --grad-atm-top:    radial-gradient(ellipse at center, rgba(17, 90, 254, 0.12) 0%, rgba(248, 249, 255, 0) 70%);
  --grad-atm-right:  radial-gradient(circle, rgba(217, 226, 255, 0.4) 0%, rgba(248, 249, 255, 0) 60%);
  --grad-atm-left:   radial-gradient(circle, rgba(182, 196, 255, 0.25) 0%, rgba(248, 249, 255, 0) 70%);

  /* Image overlay gradient (dream building, event venue) */
  --grad-image-overlay: linear-gradient(to top, rgba(8, 27, 59, 0.9), rgba(8, 27, 59, 0.3), transparent);

  /* CTA section background */
  --grad-cta-section: linear-gradient(to bottom, #f8f9ff, #eff3ff, #e6eeff);

  /* Heading gradient text (Events page hero) */
  --grad-text-blue: linear-gradient(to right, #0044cc, #115afe);

  /* Bento gradient card (Book Lab Immersion) */
  --grad-card-cta: linear-gradient(to right, #081b3b, #115afe);

  /* Avatar/card ambient glow blob */
  --grad-card-glow: radial-gradient(circle, rgba(182, 196, 255, 0.3) 0%, rgba(248, 249, 255, 0) 70%);

  /* Metallic chrome (from design doc) */
  --grad-chrome: linear-gradient(135deg, #ffffff 0%, #d8e4f4 45%, #94a3b8 50%, #f1f5f9 100%);
}

/* ---------------------------------------------------------------
   CSS UTILITY CLASSES — TYPOGRAPHY
   Direct mapping of Stitch font-* text-* class pairs
--------------------------------------------------------------- */

/* Display / Hero */
.text-display-hero {
  font-family: var(--font-display);
  font-size: var(--text-display-hero-size);
  font-weight: var(--text-display-hero-weight);
  line-height: var(--text-display-hero-lh);
  letter-spacing: var(--text-display-hero-ls);
}

@media (max-width: 767px) {
  .text-display-hero {
    font-size: var(--text-display-hero-mobile-size);
    line-height: var(--text-display-hero-mobile-lh);
    letter-spacing: var(--text-display-hero-mobile-ls);
  }
}

/* Headlines */
.text-headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-lh);
  letter-spacing: var(--text-headline-lg-ls);
}

@media (max-width: 767px) {
  .text-headline-lg {
    font-size: var(--text-headline-lg-mobile-size);
    line-height: var(--text-headline-lg-mobile-lh);
    letter-spacing: var(--text-headline-lg-mobile-ls);
  }
}

.text-headline-md {
  font-family: var(--font-display);
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-lh);
  letter-spacing: var(--text-headline-md-ls);
}

.text-headline-sm {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  font-weight: var(--text-headline-sm-weight);
  line-height: var(--text-headline-sm-lh);
  letter-spacing: var(--text-headline-sm-ls);
}

/* Title (all-caps nav style) */
.text-title-caps {
  font-family: var(--font-display);
  font-size: var(--text-title-caps-size);
  font-weight: var(--text-title-caps-weight);
  line-height: var(--text-title-caps-lh);
  letter-spacing: var(--text-title-caps-ls);
  text-transform: uppercase;
}

/* Body */
.text-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-lh);
  letter-spacing: var(--text-body-lg-ls);
}

.text-body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
  letter-spacing: var(--text-body-md-ls);
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-lh);
  letter-spacing: var(--text-body-sm-ls);
}

/* Monospaced */
.text-telemetry-code {
  font-family: var(--font-mono);
  font-size: var(--text-telemetry-size);
  font-weight: var(--text-telemetry-weight);
  line-height: var(--text-telemetry-lh);
  letter-spacing: var(--text-telemetry-ls);
}

.text-label-caps {
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-lh);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   ANIMATION KEYFRAMES
   From "Sphere Community — Restored Full Experience" screen
   (the quality/animation reference screen)
--------------------------------------------------------------- */

/* Slow orbital rotation */
@keyframes orbit-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reverse orbital rotation */
@keyframes orbit-reverse {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* Gentle float (hero logo emblem, profile avatars) */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-12px) scale(1.02); }
}

/* Planet float variations (decorative background blobs) */
@keyframes float-planet-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%       { transform: translate3d(10px, -15px, 0) rotate(6deg); }
  66%       { transform: translate3d(-8px, -8px, 0) rotate(-4deg); }
}

@keyframes float-planet-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%       { transform: translate3d(-14px, -18px, 0) rotate(-6deg); }
}

/* Planet atmospheric shine */
@keyframes planet-shine {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.45)); }
  50%       { filter: drop-shadow(0 0 32px rgba(56, 189, 248, 0.85)); }
}

/* Emblem glow pulse (hero logo emblem) */
@keyframes emblem-glow {
  0%, 100% {
    box-shadow: 0 12px 45px -8px rgba(20, 91, 255, 0.35),
                0 0 25px rgba(56, 189, 248, 0.25);
  }
  50% {
    box-shadow: 0 18px 60px -4px rgba(20, 91, 255, 0.6),
                0 0 45px rgba(56, 189, 248, 0.5);
  }
}

/* Star twinkle (decorative sparkle icons) */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1.25); }
}

/* Shimmer sweep (CTA button highlight) */
@keyframes shimmer-sweep {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* Standard Tailwind-compatible pulse (for status indicators) */
@keyframes sphere-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------
   ANIMATION UTILITY CLASSES
--------------------------------------------------------------- */

.animate-orbit-slow    { animation: orbit-slow 20s linear infinite; }
.animate-orbit-reverse { animation: orbit-reverse 15s linear infinite; }
.animate-float-gentle  { animation: float-gentle 4s ease-in-out infinite; }
.animate-planet-1      { animation: float-planet-1 8s ease-in-out infinite; }
.animate-planet-2      { animation: float-planet-2 10s ease-in-out infinite; }
.animate-planet-shine  { animation: planet-shine 3s ease-in-out infinite; }
.animate-emblem-glow   { animation: emblem-glow 3s ease-in-out infinite; }
.animate-twinkle       { animation: twinkle 2.5s ease-in-out infinite; }
.animate-shimmer       { animation: shimmer-sweep 2s ease-in-out infinite; }
.animate-sphere-ping   { animation: sphere-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ---------------------------------------------------------------
   PAGE ATMOSPHERE LAYER
   Fixed background glow blobs (every page)
--------------------------------------------------------------- */
.page-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-atmosphere__top {
  position: absolute;
  top: -12rem;           /* -top-48 */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  border-radius: 9999px;
  background: var(--grad-atm-top);
  filter: blur(32px);    /* blur-2xl */
}

.page-atmosphere__right {
  position: absolute;
  top: 33.333%;
  right: -16rem;         /* -right-64 */
  width: 600px;
  height: 600px;
  border-radius: 9999px;
  background: var(--grad-atm-right);
  filter: blur(48px);    /* blur-3xl */
}

.page-atmosphere__left {
  position: absolute;
  top: 66.666%;
  left: -16rem;          /* -left-64 */
  width: 700px;
  height: 700px;
  border-radius: 9999px;
  background: var(--grad-atm-left);
  filter: blur(48px);    /* blur-3xl */
}

/* ---------------------------------------------------------------
   COMPONENT PRIMITIVES
   Button, card, badge base patterns from Stitch
--------------------------------------------------------------- */

/* Primary CTA button (blue pill with glow) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;            /* py-3.5 px-8 */
  border-radius: 9999px;             /* rounded-full */
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  font-weight: var(--text-headline-sm-weight);
  line-height: var(--text-headline-sm-lh);
  letter-spacing: var(--text-headline-sm-ls);
  box-shadow: var(--shadow-btn-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-secondary);
  box-shadow: var(--shadow-btn-primary-hover);
}

/* Secondary / Ghost button (white pill) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm-size);
  font-weight: var(--text-headline-sm-weight);
  line-height: var(--text-headline-sm-lh);
  letter-spacing: var(--text-headline-sm-ls);
  box-shadow: var(--shadow-card-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-secondary:hover {
  background-color: var(--color-surface-container);
}

/* Standard card */
.card {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);   /* rounded-2xl */
  padding: var(--space-lg);
  box-shadow: var(--shadow-card-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-md);
}

/* Elevated card (featured/spotlight) */
.card--elevated {
  box-shadow: var(--shadow-card-lg);
}

.card--elevated:hover {
  box-shadow: var(--shadow-card-xl);
}

/* Chip / badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-lh);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
}

.chip--primary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary);
}

.chip--surface {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.chip--surface-low {
  background-color: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-card-sm);
}

/* Tech tag (project cards) */
.tech-tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-container);
  font-family: var(--font-mono);
  font-size: var(--text-telemetry-size);
  font-weight: var(--text-telemetry-weight);
  line-height: var(--text-telemetry-lh);
  letter-spacing: var(--text-telemetry-ls);
  color: var(--color-on-surface);
}

/* Avatar orbital portal ring */
.avatar-portal {
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: var(--shadow-avatar);
}

/* Section label + heading pattern */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-secondary-container);
  flex-shrink: 0;
}

/* Status ping dot (live/active indicator) */
.status-ping {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-ping::before {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-status-active);
  animation: sphere-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-ping::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-status-active);
  position: relative;
  z-index: 1;
}

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 0.375rem;      /* h-1.5 */
  border-radius: 9999px;
  background-color: var(--color-surface-container);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--color-secondary-container);
}

/* Horizontal hairline separator */
.hairline {
  width: 100%;
  height: 1px;
  background-color: var(--color-outline-variant);
}

/* Gradient text utility */
.text-gradient-blue {
  background: var(--grad-text-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Frosted glass / backdrop blur panel */
.glass-panel {
  background-color: rgba(248, 249, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------------------------------------------------------------
   RESPONSIVE HELPERS
   Mirror Tailwind breakpoints from Stitch screens
--------------------------------------------------------------- */
/* sm: 640px  | md: 768px  | lg: 1024px  | xl: 1280px  | 2xl: 1536px */

/* Page container */
.page-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

@media (min-width: 1024px) {
  .page-container {
    padding-left: var(--page-px-lg);
    padding-right: var(--page-px-lg);
  }
}

/* ---------------------------------------------------------------
   BASE DOCUMENT DEFAULTS
   Applied to <html> and <body> matching Stitch base layer
--------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* From Restored Full Experience screen */
  overflow-x: clip;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface);
  overflow-x: clip;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar (as in Stitch base layer) */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Text selection colors (from Stitch) */
::selection {
  background-color: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed);
}

/* ---------------------------------------------------------------
   DEFAULT BROWSER CURSORS
   --------------------------------------------------------------- */
html, body {
  cursor: auto !important;
}

a, button, [role="button"], .cursor-pointer, summary, input[type="submit"], input[type="button"] {
  cursor: pointer !important;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
[contenteditable="true"] {
  cursor: text !important;
}

/* ---------------------------------------------------------------
   MOBILE NAVIGATION DRAWER & RESPONSIVE FOUNDATION
   Ensures seamless experience across phone, phablet, tablet, & desktop
   --------------------------------------------------------------- */

/* Mobile Menu Drawer Overlay */
#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999 !important;
  background-color: rgba(248, 249, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s;
  will-change: transform, opacity;
}

#mobile-menu-overlay.active,
#mobile-menu-overlay.translate-x-0 {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile drawer touch-friendly links */
#mobile-menu-overlay nav a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

#mobile-menu-overlay nav a:active {
  transform: scale(0.98);
}

/* Mobile buttons minimum touch target size (Apple & Android standard) */
#mobile-menu-toggle,
#mobile-menu-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Safe area insets for notched phones (iPhone 10 through 16, modern Android) */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mobile-menu-overlay {
    padding-top: max(2rem, env(safe-area-inset-top));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

/* Prevent double-tap zoom delay on interactive elements */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* Horizontal scrollable tab/filter container utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile-specific adjustments */
@media (max-width: 639px) {
  /* Fluid native vertical momentum scrolling on all mobile viewports while preventing horizontal spill */
  html {
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body {
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    width: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Prevent automatic iOS Safari zoom when focusing form inputs */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Compact padding on very small devices */
  .page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}