/* ============================================================
   GLASSKIT COMPONENT LIBRARY
   Jungherz GmbH – v1.19.1

   Features:
   - Scoped Reset (box-sizing fix)
   - Dark Mode (default)
   - Light Mode via [data-theme="light"]
   - 34 components (incl. floating Tab-Bar variant + Accessory)
   ============================================================ */


/* ============================================================
   A NOTE ON THE ::slotted() PAIRS

   Several icon rules are written twice, e.g.

     .glass-btn svg,
     .glass-btn ::slotted(svg) { … }

   They are not redundant. When this sheet is adopted into a shadow root —
   as GlassKit Elements does — an icon passed in from the outside stays in
   the light DOM and is therefore no descendant of anything in the shadow
   tree. `.glass-btn svg` cannot reach it; only `::slotted()` can.

   Do not "simplify" these away. In the document they match nothing, so
   they cost nothing there.

   Note that ::slotted() only ever matches the assigned node itself. An icon
   wrapped in a container — <span slot="leading"><svg …></span> — cannot be
   styled from inside the shadow root at all. Pass icons directly.
   ============================================================ */


/* ============================================================
   0. SCOPED RESET
   ============================================================ */
[class*="glass-"],
[class*="glass-"]::before,
[class*="glass-"]::after,
[class*="gl-"] {
  box-sizing: border-box;
}


/* ============================================================
   1. DESIGN TOKENS – DARK MODE (Standard)
   ============================================================ */
:root,
[data-theme="dark"] {
  /* Tells the browser which scheme its own widgets should use: date and time
     pickers, number spinners, select popups, scrollbars, autofill. Without it
     they render light and the calendar glyph sits black on dark glass. */
  color-scheme: dark;

  /* ---- Colors ----
     Re-branding needs exactly two declarations: --gl-color-primary and
     --gl-color-primary-dark. Everything warm below is mixed from them, so a
     teal primary gets a teal gradient, a teal glow and a teal focus ring.
     Set --gl-color-primary-mid explicitly only to bend the gradient's middle. */
  --gl-color-primary:        #f5a623;
  --gl-color-primary-dark:   #d4692a;
  --gl-color-primary-mid:    color-mix(in srgb, var(--gl-color-primary) 32%, var(--gl-color-primary-dark));
  --gl-color-bg-dark:        #0e2530;
  --gl-color-bg-mid:         #1a3d4e;
  --gl-color-bg-light:       #1b3e50;
  --gl-color-text:           #ffffff;
  --gl-color-text-muted:     rgba(255, 255, 255, 0.60);
  --gl-color-text-on-light:  #1a3a4a;
  --gl-color-text-heading:   #ffffff;
  --gl-color-success:        #34c759;
  --gl-color-error:          #ff3b30;
  --gl-color-warning:        #ffcc00;
  --gl-color-success-dark:   #2da44e;
  --gl-color-error-dark:     #d63027;

  /* ---- Role Colors: ink on FILLED surfaces ----
     White by design – the primary button, the checkbox tick and the filled
     accessory capsules keep the look they have always had. On the light
     orange fill that is below WCAG AA (2.03:1 on the lightest gradient stop);
     the deliberate escape hatch is a dark ink, e.g.
       :root { --gl-color-on-primary: color-mix(in srgb, var(--gl-color-primary) 17%, #000); }
     which reaches 4.62:1. Set it to #ffffff if you re-brand to a dark primary. */
  --gl-color-on-primary:            #ffffff;
  --gl-color-on-success:            #ffffff;
  --gl-color-on-error:              #ffffff;
  --gl-color-primary-on-surface:    color-mix(in srgb, var(--gl-color-primary) 50%, #ffffff);
  --gl-color-success-on-surface:    color-mix(in srgb, var(--gl-color-success) 62%, #ffffff);
  --gl-color-error-on-surface:      color-mix(in srgb, var(--gl-color-error)   50%, #ffffff);
  /* Yellow is light already: it takes less white here, and more black in the
     light theme, to read like the others (measured, see CHANGELOG 1.18.0). */
  --gl-color-warning-on-surface:    color-mix(in srgb, var(--gl-color-warning) 80%, #ffffff);

  /* ---- State Surfaces & Borders (badge, chip) ----
     The scrim sits *behind* the colored tint and makes the chip
     readable regardless of what shows through the glass. */
  --gl-state-scrim:            rgba(0, 0, 0, 0.30);
  --gl-color-primary-surface:  color-mix(in srgb, var(--gl-color-primary) 25%, transparent);
  --gl-color-primary-border:   var(--gl-border-warm);
  --gl-color-success-surface:  color-mix(in srgb, var(--gl-color-success) 15%, transparent);
  --gl-color-success-border:   color-mix(in srgb, var(--gl-color-success) 30%, transparent);
  --gl-color-error-surface:    color-mix(in srgb, var(--gl-color-error)   15%, transparent);
  --gl-color-error-border:     color-mix(in srgb, var(--gl-color-error)   30%, transparent);
  --gl-color-warning-surface:  color-mix(in srgb, var(--gl-color-warning) 15%, transparent);
  --gl-color-warning-border:   color-mix(in srgb, var(--gl-color-warning) 30%, transparent);

  /* ---- Glass Surfaces ---- */
  --gl-surface-1:            rgba(255, 255, 255, 0.08);
  --gl-surface-2:            rgba(255, 255, 255, 0.10);
  --gl-surface-3:            rgba(255, 255, 255, 0.14);
  --gl-surface-4:            rgba(255, 255, 255, 0.16);
  --gl-surface-5:            rgba(255, 255, 255, 0.22);
  --gl-surface-milk:         rgba(255, 255, 255, 0.55);
  --gl-surface-milk-strong:  rgba(255, 255, 255, 0.75);
  --gl-surface-overlay:      rgba(0, 0, 0, 0.50);

  /* Card Glow Gradient */
  --gl-card-glow-top:        rgba(255, 255, 255, 0.32);
  --gl-card-glow-mid:        rgba(255, 255, 255, 0.22);
  --gl-card-glow-low:        rgba(255, 255, 255, 0.14);
  --gl-card-glow-bottom:     rgba(255, 255, 255, 0.08);

  /* Card Text & Icons */
  --gl-card-icon-color:      rgba(255, 255, 255, 0.8);
  --gl-card-text-color:      rgba(255, 255, 255, 0.7);

  /* ---- Borders ---- */
  --gl-border-subtle:        rgba(255, 255, 255, 0.18);
  --gl-border-medium:        rgba(255, 255, 255, 0.30);
  --gl-border-strong:        rgba(255, 255, 255, 0.40);
  --gl-border-milk:          rgba(255, 255, 255, 0.60);
  /* Warm = the rim of a primary-filled control; focus = the keyboard ring.
     Both are roles, so both follow --gl-color-primary. Kept as-is by name for
     compatibility; pre-1.11.0 they were rgba(255,200,100,.35) / rgba(245,166,35,.6). */
  --gl-border-warm:          color-mix(in srgb, color-mix(in srgb, var(--gl-color-primary) 68%, #ffffff) 35%, transparent);
  --gl-border-focus:         color-mix(in srgb, var(--gl-color-primary) 60%, transparent);

  /* ---- Icon Colors ---- */
  --gl-icon-default:         rgba(255, 255, 255, 0.6);
  --gl-icon-muted:           rgba(255, 255, 255, 0.45);
  --gl-icon-strong:          rgba(255, 255, 255, 0.8);
  --gl-icon-on-primary:      var(--gl-color-on-primary, #ffffff);
  --gl-icon-on-secondary:    #1a3a4a;
  --gl-icon-on-tertiary:     rgba(255, 255, 255, 0.6);

  /* ---- Blur ---- */
  --gl-blur:                 24px;
  --gl-blur-light:           16px;
  --gl-blur-soft:            12px;
  --gl-blur-heavy:           40px;

  /* ---- Radii ---- */
  --gl-radius-pill:          50%;
  --gl-radius-full:          9999px;
  --gl-radius-card:          24px;
  --gl-radius-btn:           16px;
  --gl-radius-input:         14px;
  --gl-radius-sm:            12px;
  --gl-radius-xs:            8px;

  /* ---- Shadows ---- */
  --gl-shadow-card:          0 8px 32px rgba(0, 0, 0, 0.18);
  --gl-shadow-btn:           0 4px 16px rgba(0, 0, 0, 0.12);
  --gl-shadow-btn-primary:   0 6px 24px color-mix(in srgb, var(--gl-color-primary-mid) 35%, transparent),
                             0 2px 8px rgba(0, 0, 0, 0.15);
  --gl-shadow-glow:          0 2px 12px rgba(255, 255, 255, 0.08),
                             0 4px 16px rgba(0, 0, 0, 0.15);
  --gl-shadow-modal:         0 24px 80px rgba(0, 0, 0, 0.4),
                             0 8px 32px rgba(0, 0, 0, 0.2);
  --gl-shadow-toast:         0 8px 32px rgba(0, 0, 0, 0.25);
  --gl-shadow-focus:         0 0 0 3px color-mix(in srgb, var(--gl-color-primary) 30%, transparent);

  /* ---- Inset Highlights ---- */
  --gl-inset-subtle:         inset 0 1px 1px rgba(255, 255, 255, 0.10);
  --gl-inset-medium:         inset 0 1px 1px rgba(255, 255, 255, 0.15);
  --gl-inset-strong:         inset 0 1px 2px rgba(255, 255, 255, 0.25);
  --gl-inset-milk:           inset 0 1px 2px rgba(255, 255, 255, 0.40);

  /* ---- Background Effects ----
     Deliberately *not* derived from --gl-color-primary: the aurora is the scene
     behind the glass, a fixed cool/warm mix, not the action color. Deriving it
     would repaint every page on a re-brand. Override directly to change it. */
  --gl-bg-aurora-1:          rgba(60, 160, 160, 0.25);
  --gl-bg-aurora-2:          rgba(200, 140, 60, 0.12);
  --gl-bg-aurora-3:          rgba(80, 180, 200, 0.18);
  --gl-bg-light-streak-1:    rgba(90, 210, 200, 0.14);
  --gl-bg-light-streak-2:    rgba(110, 200, 190, 0.10);
  --gl-bg-warm-glow:         rgba(220, 160, 70, 0.10);

  /* ---- Spacing ---- */
  --gl-space-2xs:            4px;
  --gl-space-xs:             8px;
  --gl-space-sm:             12px;
  --gl-space-md:             16px;
  --gl-space-lg:             20px;
  --gl-space-xl:             24px;
  --gl-space-2xl:            32px;
  --gl-space-3xl:            40px;
  --gl-space-4xl:            56px;

  /* ---- Typography ---- */
  --gl-font-family:          -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gl-font-size-xs:         13px;
  --gl-font-size-sm:         14px;
  --gl-font-size-base:       15px;
  --gl-font-size-btn:        16px;
  --gl-font-size-lg:         18px;
  --gl-font-size-title:      24px;
  --gl-font-size-modal:      20px;
  --gl-font-weight-normal:   400;
  --gl-font-weight-medium:   500;
  --gl-font-weight-semibold: 600;

  /* ---- Transitions ---- */
  --gl-transition:           all 0.25s ease;
  --gl-transition-fast:      all 0.15s ease;
  --gl-transition-modal:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Tab-Bar ---- */
  --gl-tab-bar-height:       82px;

  /* ---- Tab-Bar Floating ---- */
  --gl-tab-bar-floating-bottom:    16px;
  --gl-tab-bar-floating-gap:       var(--gl-space-sm);
  --gl-tab-bar-floating-padding:   6px 10px;
  --gl-tab-bar-floating-radius:    var(--gl-radius-full);
  --gl-tab-bar-accessory-size:     56px;
  --gl-tab-bar-spotlight-color:    var(--gl-color-primary);

  /* ---- Input Placeholder ---- */
  --gl-placeholder:          rgba(255, 255, 255, 0.35);

  /* ---- Accordion ---- */
  --gl-accordion-body-color: var(--gl-color-text-muted);

  /* ---- Toggle (inactive) ---- */
  --gl-toggle-thumb-bg:      linear-gradient(to bottom,
                               rgba(255,255,255,0.9) 0%,
                               rgba(255,255,255,0.7) 100%);

  /* ---- Range Track ---- */
  --gl-range-track-bg:       var(--gl-surface-2);
  --gl-range-track-border:   var(--gl-border-subtle);
}


/* ============================================================
   1b. DESIGN TOKENS – LIGHT MODE
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --gl-color-primary:        #e8852d;
  --gl-color-primary-dark:   #c96a1e;
  --gl-color-primary-mid:    color-mix(in srgb, var(--gl-color-primary) 52%, var(--gl-color-primary-dark));
  --gl-color-bg-dark:        #e8ecf1;
  --gl-color-bg-mid:         #f0f4f8;
  --gl-color-bg-light:       #f5f7fa;
  --gl-color-text:           #1a2a36;
  --gl-color-text-muted:     rgba(26, 42, 54, 0.55);
  --gl-color-text-on-light:  #1a3a4a;
  --gl-color-text-heading:   #0f1f2a;
  --gl-color-success:        #28a745;
  --gl-color-error:          #dc3545;
  --gl-color-warning:        #e6a800;
  --gl-color-success-dark:   #1e7e34;
  --gl-color-error-dark:     #b02a37;

  --gl-color-on-primary:            #ffffff;
  --gl-color-on-success:            #ffffff;
  --gl-color-on-error:              #ffffff;
  --gl-color-primary-on-surface:    color-mix(in srgb, var(--gl-color-primary) 60%, #000000);
  --gl-color-success-on-surface:    color-mix(in srgb, var(--gl-color-success) 68%, #000000);
  --gl-color-error-on-surface:      color-mix(in srgb, var(--gl-color-error)   82%, #000000);
  --gl-color-warning-on-surface:    color-mix(in srgb, var(--gl-color-warning) 56%, #000000);

  --gl-state-scrim:            rgba(255, 255, 255, 0.30);
  --gl-color-primary-surface:  color-mix(in srgb, var(--gl-color-primary) 25%, transparent);
  --gl-color-primary-border:   var(--gl-border-warm);
  --gl-color-success-surface:  color-mix(in srgb, var(--gl-color-success) 15%, transparent);
  --gl-color-success-border:   color-mix(in srgb, var(--gl-color-success) 30%, transparent);
  --gl-color-error-surface:    color-mix(in srgb, var(--gl-color-error)   15%, transparent);
  --gl-color-error-border:     color-mix(in srgb, var(--gl-color-error)   30%, transparent);
  --gl-color-warning-surface:  color-mix(in srgb, var(--gl-color-warning) 15%, transparent);
  --gl-color-warning-border:   color-mix(in srgb, var(--gl-color-warning) 30%, transparent);

  --gl-surface-1:            rgba(255, 255, 255, 0.50);
  --gl-surface-2:            rgba(255, 255, 255, 0.60);
  --gl-surface-3:            rgba(255, 255, 255, 0.70);
  --gl-surface-4:            rgba(255, 255, 255, 0.75);
  --gl-surface-5:            rgba(255, 255, 255, 0.85);
  --gl-surface-milk:         rgba(255, 255, 255, 0.85);
  --gl-surface-milk-strong:  rgba(255, 255, 255, 0.92);
  --gl-surface-overlay:      rgba(0, 0, 0, 0.25);

  --gl-card-glow-top:        rgba(255, 255, 255, 0.90);
  --gl-card-glow-mid:        rgba(255, 255, 255, 0.78);
  --gl-card-glow-low:        rgba(255, 255, 255, 0.65);
  --gl-card-glow-bottom:     rgba(255, 255, 255, 0.50);

  --gl-card-icon-color:      rgba(26, 42, 54, 0.5);
  --gl-card-text-color:      rgba(26, 42, 54, 0.6);

  --gl-border-subtle:        rgba(0, 0, 0, 0.08);
  --gl-border-medium:        rgba(0, 0, 0, 0.12);
  --gl-border-strong:        rgba(0, 0, 0, 0.15);
  --gl-border-milk:          rgba(0, 0, 0, 0.10);
  --gl-border-warm:          color-mix(in srgb, var(--gl-color-primary) 30%, transparent);
  --gl-border-focus:         color-mix(in srgb, var(--gl-color-primary) 50%, transparent);

  --gl-icon-default:         rgba(26, 42, 54, 0.50);
  --gl-icon-muted:           rgba(26, 42, 54, 0.35);
  --gl-icon-strong:          rgba(26, 42, 54, 0.70);
  --gl-icon-on-primary:      var(--gl-color-on-primary, #ffffff);
  --gl-icon-on-secondary:    #1a3a4a;
  --gl-icon-on-tertiary:     rgba(26, 42, 54, 0.50);

  --gl-shadow-card:          0 4px 20px rgba(0, 0, 0, 0.06);
  --gl-shadow-btn:           0 2px 10px rgba(0, 0, 0, 0.06);
  --gl-shadow-btn-primary:   0 4px 16px color-mix(in srgb, var(--gl-color-primary) 25%, transparent),
                             0 2px 6px rgba(0, 0, 0, 0.08);
  --gl-shadow-glow:          0 2px 8px rgba(0, 0, 0, 0.05),
                             0 4px 12px rgba(0, 0, 0, 0.04);
  --gl-shadow-modal:         0 16px 48px rgba(0, 0, 0, 0.12),
                             0 4px 16px rgba(0, 0, 0, 0.08);
  --gl-shadow-toast:         0 4px 20px rgba(0, 0, 0, 0.10);
  --gl-shadow-focus:         0 0 0 3px color-mix(in srgb, var(--gl-color-primary) 25%, transparent);

  --gl-inset-subtle:         inset 0 1px 1px rgba(255, 255, 255, 0.60);
  --gl-inset-medium:         inset 0 1px 1px rgba(255, 255, 255, 0.70);
  --gl-inset-strong:         inset 0 1px 2px rgba(255, 255, 255, 0.80);
  --gl-inset-milk:           inset 0 1px 2px rgba(255, 255, 255, 0.90);

  --gl-bg-aurora-1:          rgba(100, 200, 220, 0.15);
  --gl-bg-aurora-2:          rgba(240, 180, 100, 0.10);
  --gl-bg-aurora-3:          rgba(120, 200, 230, 0.12);
  --gl-bg-light-streak-1:    rgba(140, 230, 220, 0.10);
  --gl-bg-light-streak-2:    rgba(160, 220, 210, 0.08);
  --gl-bg-warm-glow:         rgba(240, 180, 100, 0.08);

  --gl-placeholder:          rgba(26, 42, 54, 0.30);
  --gl-accordion-body-color: var(--gl-color-text-muted);
  --gl-toggle-thumb-bg:      linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
  --gl-range-track-bg:       var(--gl-surface-2);
  --gl-range-track-border:   var(--gl-border-subtle);
}


/* ============================================================
   2. HINTERGRUND
   ============================================================ */
.glass-bg {
  background:
    radial-gradient(ellipse at 20% 40%, var(--gl-bg-aurora-1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 65%, var(--gl-bg-aurora-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 20%, var(--gl-bg-aurora-3) 0%, transparent 50%),
    linear-gradient(170deg,
      var(--gl-color-bg-light) 0%,
      var(--gl-color-bg-mid) 50%,
      var(--gl-color-bg-dark) 100%
    );
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--gl-font-family);
  color: var(--gl-color-text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.3s ease;
  isolation: isolate;
}

.glass-bg::before {
  content: '';
  position: absolute;
  top: 20%; left: -30%;
  width: 160%; height: 55%;
  background:
    radial-gradient(ellipse at 35% 45%, var(--gl-bg-light-streak-1) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 55%, var(--gl-bg-light-streak-2) 0%, transparent 45%);
  transform: rotate(-8deg);
  pointer-events: none; z-index: -1;
}

.glass-bg::after {
  content: '';
  position: absolute;
  top: 40%; right: -20%;
  width: 70%; height: 50%;
  background: radial-gradient(ellipse at center,
    var(--gl-bg-warm-glow) 0%, transparent 65%
  );
  pointer-events: none; z-index: -1;
}

/* The decorations sit at z-index -1 inside .glass-bg's own stacking
   context (isolation: isolate on .glass-bg), so the children stay above
   them without a z-index of their own. Before 1.15.1 every child carried
   z-index: 1 and so became a stacking context — an overlay inside one of
   them (modal, sheet: z-index 1000) was trapped at level 1 and painted
   below a tab bar (900) that came later in the DOM. */
.glass-bg > * { position: relative; }

.glass-bg--has-tab-bar {
  padding-bottom: var(--gl-tab-bar-height);
}

.glass-bg--has-tab-bar-floating {
  padding-bottom: calc(var(--gl-tab-bar-accessory-size)
                       + var(--gl-tab-bar-floating-bottom)
                       + var(--gl-space-md));
}


/* ============================================================
   3. NAVIGATION
   ============================================================ */
.glass-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gl-space-xs);
}

.glass-pill {
  width: 46px; height: 46px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-surface-3);
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1.5px solid var(--gl-border-strong);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--gl-transition);
  color: var(--gl-color-text);
  box-shadow: var(--gl-shadow-glow), var(--gl-inset-medium);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.glass-pill:hover { background: var(--gl-surface-5); transform: scale(1.05); }
.glass-pill:active { transform: scale(0.95); }

.glass-pill svg,
.glass-pill ::slotted(svg) {
  width: 20px; height: 20px;
  fill: none; stroke: var(--gl-color-text); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ============================================================
   4. SEITENTITEL
   ============================================================ */
.glass-title {
  text-align: center;
  color: var(--gl-color-text-heading);
  font-size: var(--gl-font-size-title);
  font-weight: var(--gl-font-weight-semibold);
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.3px;
}


/* ============================================================
   5. GLASS CARD
   ============================================================ */
.glass-card {
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-card);
  padding: var(--gl-space-3xl) var(--gl-space-xl) var(--gl-space-2xl);
  box-shadow: var(--gl-shadow-card), var(--gl-inset-strong);
}

.glass-card--glow {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom,
    var(--gl-card-glow-top) 0%,
    var(--gl-card-glow-mid) 25%,
    var(--gl-card-glow-low) 55%,
    var(--gl-card-glow-bottom) 100%
  );
}

.glass-card--glow::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.5) 30%,
    rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.5) 70%, transparent 100%
  );
  z-index: 1;
}

.glass-card__icon {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--gl-space-lg);
}

.glass-card__icon svg {
  width: 64px; height: 64px;
  stroke: var(--gl-card-icon-color); stroke-width: 1.2; fill: none;
}

.glass-card__text {
  color: var(--gl-card-text-color);
  font-size: var(--gl-font-size-base);
  font-weight: var(--gl-font-weight-normal);
  line-height: 1.55; text-align: center;
}


/* ============================================================
   6. BUTTONS
   ============================================================ */
.glass-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 56px;
  border: none; border-radius: var(--gl-radius-btn);
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-btn);
  font-weight: var(--gl-font-weight-semibold);
  cursor: pointer; transition: var(--gl-transition);
  outline: none; -webkit-tap-highlight-color: transparent;
}

/* Anchors as buttons: shrink-to-fit like real <button> elements
   (block-level flex would fill the line despite --auto) */
a.glass-btn { display: inline-flex; text-decoration: none; }

/* The hidden attribute is only a user-agent rule, and display:flex above
   would beat it — a button hidden by script stayed on screen. */
.glass-btn[hidden] { display: none; }

.glass-btn svg,
.glass-btn ::slotted(svg) {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Primary */
.glass-btn--primary {
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-mid) 50%,
    var(--gl-color-primary-dark) 100%
  );
  color: var(--gl-color-on-primary, #ffffff);
  border: 1px solid var(--gl-border-warm);
  box-shadow: var(--gl-shadow-btn-primary), var(--gl-inset-strong);
}
.glass-btn--primary svg,
.glass-btn--primary ::slotted(svg) { fill: var(--gl-icon-on-primary); stroke: var(--gl-icon-on-primary); stroke-width: 0; }
.glass-btn--primary:hover { transform: translateY(-1px); }
.glass-btn--primary:active { transform: translateY(1px); }

/* Secondary */
.glass-btn--secondary {
  background: linear-gradient(to bottom,
    var(--gl-surface-milk-strong) 0%, var(--gl-surface-milk) 100%
  );
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1.5px solid var(--gl-border-milk);
  color: var(--gl-color-text-on-light);
  box-shadow: var(--gl-shadow-btn), var(--gl-inset-milk);
}
.glass-btn--secondary svg,
.glass-btn--secondary ::slotted(svg) {
  fill: none; stroke: var(--gl-icon-on-secondary);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.glass-btn--secondary:hover { transform: translateY(-1px); }
.glass-btn--secondary:active { transform: translateY(1px); }

/* Tertiary */
.glass-btn--tertiary {
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1px solid var(--gl-border-subtle);
  color: var(--gl-color-text-muted);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), var(--gl-inset-subtle);
}
.glass-btn--tertiary svg,
.glass-btn--tertiary ::slotted(svg) {
  fill: none; stroke: var(--gl-icon-on-tertiary);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.glass-btn--tertiary:hover {
  background: var(--gl-surface-4); color: var(--gl-color-text);
  transform: translateY(-1px);
}
.glass-btn--tertiary:active { transform: translateY(1px); }

/* Sizes */
.glass-btn--sm { height: 44px; font-size: var(--gl-font-size-sm); border-radius: var(--gl-radius-sm); }
.glass-btn--lg { height: 64px; font-size: var(--gl-font-size-lg); }
.glass-btn--auto { width: auto; padding: 0 var(--gl-space-xl); }


/* ============================================================
   7. STATUS CARD
   ============================================================ */
.glass-status {
  background: var(--gl-surface-1);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-btn);
  padding: var(--gl-space-md) var(--gl-space-lg);
  display: flex; align-items: center; gap: var(--gl-space-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), var(--gl-inset-subtle);
}

.glass-status svg,
.glass-status ::slotted(svg) {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: var(--gl-icon-muted); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

.glass-status p {
  color: var(--gl-color-text-muted);
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-normal);
  line-height: 1.45;
}


/* ============================================================
   8. INPUT FIELDS
   ============================================================ */
.glass-input-group {
  display: flex; flex-direction: column; gap: var(--gl-space-xs);
}

.glass-label {
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-icon-strong);
  padding-left: var(--gl-space-2xs);
}

.glass-input {
  width: 100%; height: 52px;
  padding: 0 var(--gl-space-md);
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-input);
  color: var(--gl-color-text);
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-base);
  transition: var(--gl-transition);
  outline: none;
  box-shadow: var(--gl-inset-subtle);
  -webkit-tap-highlight-color: transparent;
}

.glass-input::placeholder { color: var(--gl-placeholder); }

/* Date and time fields drop the native appearance. iOS draws them as a
   native control with a width of its own: width: 100% notwithstanding, a
   date field came out wider than its column (two side by side overlapped),
   an empty one narrower than a filled one, and the value sat centred where
   every other field starts at the left. Without the appearance iOS gives
   them the column width like any other field; the picker still opens. The
   box was GlassKit's already, so other browsers draw the same as before. */
.glass-input[type="date"],
.glass-input[type="time"],
.glass-input[type="datetime-local"],
.glass-input[type="month"] {
  -webkit-appearance: none; appearance: none;
}
/* A rule of its own: a browser that does not know this pseudo-element
   drops the whole rule, and must not take the one above with it. */
.glass-input::-webkit-date-and-time-value { text-align: start; }

.glass-input:focus {
  border-color: var(--gl-border-focus);
  background: var(--gl-surface-3);
  box-shadow: var(--gl-shadow-focus), var(--gl-inset-medium);
}

.glass-input:disabled { opacity: 0.4; cursor: not-allowed; }
.glass-input--error { border-color: var(--gl-color-error); }
.glass-input--error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl-color-error) 25%, transparent), var(--gl-inset-medium);
}

.glass-hint {
  font-size: var(--gl-font-size-xs);
  color: var(--gl-color-text-muted);
  padding-left: var(--gl-space-2xs);
}
.glass-hint--error { color: var(--gl-color-error); }

/* Textarea */
.glass-textarea {
  width: 100%; min-height: 120px;
  padding: var(--gl-space-md);
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-input);
  color: var(--gl-color-text);
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-base);
  line-height: 1.5; resize: vertical;
  transition: var(--gl-transition);
  outline: none;
  box-shadow: var(--gl-inset-subtle);
}
.glass-textarea::placeholder { color: var(--gl-placeholder); }
.glass-textarea:focus {
  border-color: var(--gl-border-focus);
  background: var(--gl-surface-3);
  box-shadow: var(--gl-shadow-focus), var(--gl-inset-medium);
}


/* ============================================================
   9. SELECT
   ============================================================ */
.glass-select {
  width: 100%; height: 52px;
  padding: 0 var(--gl-space-3xl) 0 var(--gl-space-md);
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-input);
  color: var(--gl-color-text);
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-base);
  transition: var(--gl-transition);
  outline: none;
  box-shadow: var(--gl-inset-subtle);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.glass-select:focus {
  border-color: var(--gl-border-focus);
  box-shadow: var(--gl-shadow-focus), var(--gl-inset-medium);
}
.glass-select option { background: var(--gl-color-bg-mid); color: var(--gl-color-text); }


/* ============================================================
   10. SEARCH FIELD
   ============================================================ */
.glass-search {
  position: relative; display: flex; align-items: center;
}

.glass-search__icon {
  position: absolute; left: var(--gl-space-md);
  width: 18px; height: 18px;
  stroke: var(--gl-icon-muted) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  pointer-events: none;
  z-index: 2;
}

.glass-search .glass-input {
  padding-left: 44px;
  border-radius: var(--gl-radius-full);
}


/* ============================================================
   11. TOGGLE SWITCH
   ============================================================ */
/* First-line alignment — see the note on .glass-checkbox below. Track is 30px. */
.glass-toggle {
  display: inline-flex; align-items: flex-start;
  gap: var(--gl-space-sm); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Visually hidden but keeps the control's area: zero-size inputs make the
   browser suppress the native validation bubble on required fields
   (silent submit block). pointer-events: none — the label handles clicks. */
.glass-toggle__input {
  position: absolute; opacity: 0; margin: 0;
  width: 52px; height: 30px; pointer-events: none;
}

.glass-toggle__track {
  position: relative; width: 52px; height: 30px;
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-full);
  transition: var(--gl-transition);
  box-shadow: var(--gl-inset-subtle);
  flex-shrink: 0;
  margin-top: max(0px, calc((1lh - 30px) / 2));
}

.glass-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-toggle-thumb-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), var(--gl-inset-milk);
  transition: var(--gl-transition);
}

.glass-toggle__input:checked + .glass-toggle__track {
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  border-color: var(--gl-border-warm);
}

.glass-toggle__input:checked + .glass-toggle__track .glass-toggle__thumb {
  transform: translateX(22px);
}

.glass-toggle__input:focus-visible + .glass-toggle__track { box-shadow: var(--gl-shadow-focus); }

.glass-toggle__label {
  font-size: var(--gl-font-size-base);
  color: var(--gl-color-text);
  user-select: none;
  margin-top: max(0px, calc((30px - 1lh) / 2));
}


/* ============================================================
   12. CHECKBOX
   ============================================================ */
/* Control and label are aligned on the *first line*, not on the middle of the
   text block — a consent label runs over several lines and a centred box then
   points at nothing. The two margins below centre the 24px box on that first
   line; whichever is the shorter of the two gets the offset, so exactly one is
   ever non-zero. For a single-line label this is pixel-identical to the
   `align-items: center` of pre-1.11.0. Repeated on .glass-radio (24px) and
   .glass-toggle (30px) — keep the three in step. */
.glass-checkbox {
  display: inline-flex; align-items: flex-start;
  gap: var(--gl-space-sm); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* See .glass-toggle__input: keep area so native validation bubbles anchor */
.glass-checkbox__input {
  position: absolute; opacity: 0; margin: 0;
  width: 24px; height: 24px; pointer-events: none;
}

.glass-checkbox__box {
  width: 24px; height: 24px;
  border-radius: var(--gl-radius-xs);
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  border: 1.5px solid var(--gl-border-medium);
  display: flex; align-items: center; justify-content: center;
  transition: var(--gl-transition);
  box-shadow: var(--gl-inset-subtle);
  flex-shrink: 0;
  margin-top: max(0px, calc((1lh - 24px) / 2));
}

.glass-checkbox__box svg {
  width: 14px; height: 14px;
  stroke: var(--gl-color-on-primary, #ffffff); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(0.5);
  transition: var(--gl-transition-fast);
}

.glass-checkbox__input:checked + .glass-checkbox__box {
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  border-color: var(--gl-border-warm);
}
.glass-checkbox__input:checked + .glass-checkbox__box svg { opacity: 1; transform: scale(1); }
.glass-checkbox__input:focus-visible + .glass-checkbox__box { box-shadow: var(--gl-shadow-focus); }

.glass-checkbox__label {
  font-size: var(--gl-font-size-base);
  color: var(--gl-color-text); user-select: none;
  margin-top: max(0px, calc((24px - 1lh) / 2));
}


/* ============================================================
   13. RADIO BUTTON
   ============================================================ */
/* First-line alignment — see the note on .glass-checkbox. */
.glass-radio {
  display: inline-flex; align-items: flex-start;
  gap: var(--gl-space-sm); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* See .glass-toggle__input: keep area so native validation bubbles anchor */
.glass-radio__input {
  position: absolute; opacity: 0; margin: 0;
  width: 24px; height: 24px; pointer-events: none;
}

.glass-radio__circle {
  width: 24px; height: 24px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-soft));
  border: 1.5px solid var(--gl-border-medium);
  display: flex; align-items: center; justify-content: center;
  transition: var(--gl-transition);
  box-shadow: var(--gl-inset-subtle);
  flex-shrink: 0;
  margin-top: max(0px, calc((1lh - 24px) / 2));
}

.glass-radio__dot {
  width: 10px; height: 10px;
  border-radius: var(--gl-radius-pill);
  background: white;
  opacity: 0; transform: scale(0);
  transition: var(--gl-transition-fast);
}

.glass-radio__input:checked + .glass-radio__circle {
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  border-color: var(--gl-border-warm);
}
.glass-radio__input:checked + .glass-radio__circle .glass-radio__dot { opacity: 1; transform: scale(1); }
.glass-radio__input:focus-visible + .glass-radio__circle { box-shadow: var(--gl-shadow-focus); }

.glass-radio__label {
  font-size: var(--gl-font-size-base);
  color: var(--gl-color-text); user-select: none;
  margin-top: max(0px, calc((24px - 1lh) / 2));
}


/* ============================================================
   14. RANGE SLIDER
   ============================================================ */
.glass-range-group { display: flex; flex-direction: column; gap: var(--gl-space-xs); }
.glass-range-header { display: flex; justify-content: space-between; align-items: baseline; }

.glass-range-value {
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-primary);
  font-variant-numeric: tabular-nums;
}

.glass-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: var(--gl-radius-full);
  background: var(--gl-range-track-bg);
  border: 1px solid var(--gl-range-track-border);
  outline: none; cursor: pointer;
}

.glass-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: 26px; height: 26px;
  border-radius: var(--gl-radius-pill);
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gl-color-primary-mid) 35%, transparent), var(--gl-inset-strong);
  margin-top: -2px; cursor: pointer;
  transition: var(--gl-transition);
}

.glass-range::-webkit-slider-thumb:hover { transform: scale(1.1); }

.glass-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: var(--gl-radius-pill);
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gl-color-primary-mid) 35%, transparent);
  cursor: pointer;
}

.glass-range::-moz-range-track {
  height: 6px; border-radius: var(--gl-radius-full);
  background: var(--gl-range-track-bg);
  border: 1px solid var(--gl-range-track-border);
}

.glass-range:focus-visible { box-shadow: var(--gl-shadow-focus); }


/* ============================================================
   15. PROGRESS BAR
   ============================================================ */
.glass-progress { width: 100%; display: flex; flex-direction: column; gap: var(--gl-space-xs); }
.glass-progress__header { display: flex; justify-content: space-between; align-items: baseline; }

.glass-progress__label {
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-icon-strong);
}

.glass-progress__value {
  font-size: var(--gl-font-size-xs);
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.glass-progress__track {
  width: 100%; height: 8px;
  border-radius: var(--gl-radius-full);
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-border-subtle);
  overflow: hidden;
  box-shadow: var(--gl-inset-subtle);
}

.glass-progress__fill {
  height: 100%; border-radius: var(--gl-radius-full);
  background: linear-gradient(90deg,
    var(--gl-color-primary) 0%, var(--gl-color-primary-dark) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--gl-color-primary) 30%, transparent), var(--gl-inset-strong);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.glass-progress__fill::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  border-radius: var(--gl-radius-full);
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, transparent 100%);
}

.glass-progress--sm .glass-progress__track { height: 4px; }
.glass-progress--lg .glass-progress__track { height: 12px; }

.glass-progress--success .glass-progress__fill {
  background: linear-gradient(90deg,
    var(--gl-color-success) 0%, var(--gl-color-success-dark, #2da44e) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--gl-color-success) 30%, transparent), var(--gl-inset-strong);
}
.glass-progress--error .glass-progress__fill {
  background: linear-gradient(90deg,
    var(--gl-color-error) 0%, var(--gl-color-error-dark, #d63027) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--gl-color-error) 30%, transparent), var(--gl-inset-strong);
}


/* ============================================================
   16. MODAL
   ============================================================ */
.glass-modal-overlay {
  position: fixed; inset: 0;
  background: var(--gl-surface-overlay);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  display: flex; align-items: center; justify-content: center;
  padding: var(--gl-space-lg); z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: var(--gl-transition-modal);
  font-family: var(--gl-font-family);
  -webkit-font-smoothing: antialiased;
}
.glass-modal-overlay.is-active { opacity: 1; pointer-events: auto; }

.glass-modal {
  width: 100%; max-width: 340px;
  background: linear-gradient(to bottom,
    var(--gl-card-glow-top) 0%, var(--gl-card-glow-bottom) 100%
  );
  backdrop-filter: blur(var(--gl-blur-heavy));
  -webkit-backdrop-filter: blur(var(--gl-blur-heavy));
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-card);
  overflow: hidden;
  box-shadow: var(--gl-shadow-modal);
  transform: scale(0.9) translateY(20px);
  transition: var(--gl-transition-modal);
  position: relative;
}
.glass-modal-overlay.is-active .glass-modal { transform: scale(1) translateY(0); }

.glass-modal::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.4) 30%,
    rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.4) 70%, transparent 100%
  );
}

.glass-modal__header { padding: var(--gl-space-xl) var(--gl-space-xl) var(--gl-space-sm); text-align: center; }
.glass-modal__title { font-size: var(--gl-font-size-modal); font-weight: var(--gl-font-weight-semibold); color: var(--gl-color-text); }
.glass-modal__body { padding: var(--gl-space-sm) var(--gl-space-xl) var(--gl-space-xl); text-align: center; }
.glass-modal__body p { color: var(--gl-color-text-muted); font-size: var(--gl-font-size-base); line-height: 1.55; }
.glass-modal__footer { display: flex; border-top: 1px solid var(--gl-border-subtle); }

.glass-modal__action {
  flex: 1; height: 52px;
  background: transparent; border: none;
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-btn);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-color-text-muted);
  cursor: pointer; transition: var(--gl-transition-fast); outline: none;
}
.glass-modal__action:hover { background: var(--gl-surface-1); }
.glass-modal__action + .glass-modal__action { border-left: 1px solid var(--gl-border-subtle); }
.glass-modal__action--primary { color: var(--gl-color-primary); font-weight: var(--gl-font-weight-semibold); }
.glass-modal__action--danger { color: var(--gl-color-error); font-weight: var(--gl-font-weight-semibold); }


/* ============================================================
   17. TOAST
   ============================================================ */
/* Where the toast sits: --gl-toast-top, 56px from the top unless a page
   sets it — for instance just below its own header, and with
   env(safe-area-inset-top) added when the page uses viewport-fit=cover.
   The toast stays at the top also with an action: one place for every
   toast, so a confirmation that briefly replaces a standing offer does not
   jump, and it covers neither the tab bar nor a form's last button. */
.glass-toast {
  position: fixed; top: var(--gl-toast-top, var(--gl-space-4xl)); left: 50%;
  transform: translateX(-50%) translateY(-20px);
  min-width: 280px; max-width: 340px;
  padding: var(--gl-space-md) var(--gl-space-lg);
  background: linear-gradient(to bottom,
    var(--gl-surface-4) 0%, var(--gl-surface-2) 100%
  );
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-btn);
  display: flex; align-items: center; gap: var(--gl-space-sm);
  box-shadow: var(--gl-shadow-toast), var(--gl-inset-medium);
  z-index: 1100;
  opacity: 0; pointer-events: none;
  transition: var(--gl-transition-modal);
  font-family: var(--gl-font-family);
  -webkit-font-smoothing: antialiased;
}
.glass-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.glass-toast__icon {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.glass-toast__icon ::slotted(svg) { display: block; width: 100%; height: 100%; }
.glass-toast--success .glass-toast__icon { stroke: var(--gl-color-success); }
.glass-toast--error   .glass-toast__icon { stroke: var(--gl-color-error); }
.glass-toast--warning .glass-toast__icon { stroke: var(--gl-color-warning); }

.glass-toast__text {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-color-text); line-height: 1.4;
}

/* One action and a close button — "A new version · Reload". __action is a
   small pill in the toast's own tone: primary on a plain toast, the state
   colour on a variant, from the same -surface, -border and -on-surface
   tokens as the badges. It lies on a doubled scrim because the toast's
   glass is lighter than the page: on a single one the label sat at the
   AA threshold, on two it reads at 4.9:1 or better in every tone and
   theme. __close is the × at the end. Both keep a 44px hit area without
   making the toast taller. A toast with an action may grow to 480px, or
   the viewport minus 16px each side: the text wraps, the buttons never
   shrink. Only a shown toast takes the pointer. */
.glass-toast:has(.glass-toast__action) {
  width: max-content;
  max-width: min(480px, calc(100% - 2 * var(--gl-space-md)));
}
.glass-toast--success {
  --gl-toast-action-surface: var(--gl-color-success-surface);
  --gl-toast-action-border: var(--gl-color-success-border);
  --gl-toast-action-ink: var(--gl-color-success-on-surface);
}
.glass-toast--error {
  --gl-toast-action-surface: var(--gl-color-error-surface);
  --gl-toast-action-border: var(--gl-color-error-border);
  --gl-toast-action-ink: var(--gl-color-error-on-surface);
}
.glass-toast--warning {
  --gl-toast-action-surface: var(--gl-color-warning-surface);
  --gl-toast-action-border: var(--gl-color-warning-border);
  --gl-toast-action-ink: var(--gl-color-warning-on-surface);
}
.glass-toast__action,
.glass-toast__close {
  -webkit-appearance: none; appearance: none;
  flex: none; position: relative;
  font: inherit;
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-toast__action {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--gl-toast-action-border, var(--gl-color-primary-border));
  border-radius: var(--gl-radius-full);
  background:
    linear-gradient(var(--gl-toast-action-surface, var(--gl-color-primary-surface)),
                    var(--gl-toast-action-surface, var(--gl-color-primary-surface))),
    linear-gradient(var(--gl-state-scrim), var(--gl-state-scrim)),
    var(--gl-state-scrim);
  color: var(--gl-toast-action-ink, var(--gl-color-primary-on-surface));
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-semibold);
  white-space: nowrap;
}
.glass-toast__action::after { content: ""; position: absolute; inset: -6px 0; }
.glass-toast__action:hover {
  box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--gl-toast-action-ink, var(--gl-color-primary-on-surface)) 10%, transparent);
}
.glass-toast__action:active { transform: scale(0.96); }
.glass-toast__close {
  width: 28px; height: 28px; margin: 0 -8px 0 -4px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--gl-color-text-muted);
}
.glass-toast__close::after { content: ""; position: absolute; inset: -8px; }
.glass-toast__close:hover { background: var(--gl-surface-3); color: var(--gl-color-text); }
.glass-toast__close svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.glass-toast__action:focus-visible,
.glass-toast__close:focus-visible { box-shadow: var(--gl-shadow-focus); }


/* ============================================================
   18. TAB BAR
   ============================================================ */
.glass-tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--gl-tab-bar-height);
  background: linear-gradient(to bottom,
    var(--gl-surface-3) 0%, var(--gl-surface-1) 100%
  );
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border-top: 1px solid var(--gl-border-subtle);
  display: flex; justify-content: space-around;
  align-items: flex-start;
  padding-top: var(--gl-space-xs);
  padding-bottom: env(safe-area-inset-bottom, 8px);
  z-index: 900;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08), var(--gl-inset-subtle);
}

.glass-tab-bar__item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gl-space-2xs);
  padding: var(--gl-space-2xs) var(--gl-space-sm);
  background: none; border: none; cursor: pointer;
  transition: var(--gl-transition); outline: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 60px;
}

.glass-tab-bar__icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.glass-tab-bar__icon svg {
  width: 24px; height: 24px; fill: none;
  stroke: var(--gl-icon-muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: var(--gl-transition);
}

.glass-tab-bar__label {
  font-size: 10px; font-weight: var(--gl-font-weight-medium);
  color: var(--gl-icon-muted); transition: var(--gl-transition);
  letter-spacing: 0.2px;
}

.glass-tab-bar__item.is-active .glass-tab-bar__icon svg {
  stroke: var(--gl-color-primary);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gl-color-primary) 35%, transparent));
}
.glass-tab-bar__item.is-active .glass-tab-bar__label { color: var(--gl-color-primary); }

.glass-tab-bar__item.is-active .glass-tab-bar__icon::after {
  content: '';
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-color-primary);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gl-color-primary) 50%, transparent);
}

.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__icon svg { stroke: var(--gl-icon-default); }
.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__label { color: var(--gl-icon-default); }

.glass-tab-bar__badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--gl-radius-full);
  /* 10px text needs 4.5:1 – white on the plain error red only reaches 3.55:1
     in dark mode, so the pill uses the darker state color as its fill. */
  background: var(--gl-color-error-dark, #d63027); color: #ffffff;
  font-size: 10px; font-weight: var(--gl-font-weight-semibold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--gl-color-error) 40%, transparent);
}


/* ============================================================
   18b. TAB BAR – FLOATING (Liquid Glass)
   ============================================================ */
.glass-tab-bar-dock {
  position: fixed; left: 50%;
  bottom: calc(var(--gl-tab-bar-floating-bottom) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center;
  gap: var(--gl-tab-bar-floating-gap);
  z-index: 900;
  max-width: calc(100vw - 2 * var(--gl-space-md));
}

.glass-tab-bar-dock--accessory-left { flex-direction: row-reverse; }

.glass-tab-bar.glass-tab-bar--floating {
  position: static;
  left: auto; right: auto; bottom: auto;
  height: auto; width: max-content;
  padding: var(--gl-tab-bar-floating-padding);
  border-radius: var(--gl-tab-bar-floating-radius);
  border: 1px solid var(--gl-border-subtle);
  background: linear-gradient(to bottom,
    var(--gl-surface-3) 0%, var(--gl-surface-1) 100%
  );
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.08),
    var(--gl-inset-subtle);
  display: flex; justify-content: flex-start; align-items: center;
  gap: var(--gl-space-2xs);
}

.glass-tab-bar--floating .glass-tab-bar__item {
  position: relative;
  border-radius: var(--gl-radius-full);
  padding: var(--gl-space-2xs) var(--gl-space-sm);
  min-width: auto;
  align-items: center;
}

.glass-tab-bar--floating .glass-tab-bar__item > * {
  position: relative; z-index: 1;
}

.glass-tab-bar--floating .glass-tab-bar__item.is-active::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--gl-tab-bar-spotlight-color) 28%, transparent) 0%,
    color-mix(in srgb, var(--gl-tab-bar-spotlight-color) 10%, transparent) 55%,
    transparent 100%
  );
  pointer-events: none; z-index: 0;
}

.glass-tab-bar--floating .glass-tab-bar__item.is-active .glass-tab-bar__icon::after {
  display: none;
}

.glass-tab-bar__accessory {
  width: var(--gl-tab-bar-accessory-size);
  height: var(--gl-tab-bar-accessory-size);
  border-radius: var(--gl-radius-pill);
  background: linear-gradient(to bottom,
    var(--gl-surface-3) 0%, var(--gl-surface-1) 100%
  );
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1px solid var(--gl-border-subtle);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.08),
    var(--gl-inset-subtle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--gl-transition);
  outline: none; padding: 0;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.glass-tab-bar__accessory svg,
.glass-tab-bar__accessory ::slotted(svg) {
  width: 22px; height: 22px; fill: none;
  stroke: var(--gl-icon-default); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: var(--gl-transition);
}

.glass-tab-bar__accessory:hover { transform: translateY(-1px); }
.glass-tab-bar__accessory:hover svg,
.glass-tab-bar__accessory:hover ::slotted(svg) { stroke: var(--gl-icon-strong); }

.glass-tab-bar__accessory:focus-visible {
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    var(--gl-shadow-focus),
    var(--gl-inset-subtle);
}

/* Accent variants – use existing color tokens */
.glass-tab-bar__accessory--accent {
  background: linear-gradient(135deg,
    var(--gl-color-primary) 0%,
    color-mix(in srgb, var(--gl-color-primary) 70%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--gl-color-primary) 50%, transparent);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--gl-color-primary) 35%, transparent),
    var(--gl-inset-medium);
}
.glass-tab-bar__accessory--accent svg,
.glass-tab-bar__accessory--accent ::slotted(svg) { stroke: var(--gl-color-on-primary, #ffffff); }
.glass-tab-bar__accessory--accent:hover svg,
.glass-tab-bar__accessory--accent:hover ::slotted(svg) { stroke: var(--gl-color-on-primary, #ffffff); }

.glass-tab-bar__accessory--success {
  background: linear-gradient(135deg,
    var(--gl-color-success) 0%,
    color-mix(in srgb, var(--gl-color-success) 70%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--gl-color-success) 50%, transparent);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--gl-color-success) 35%, transparent),
    var(--gl-inset-medium);
}
.glass-tab-bar__accessory--success svg,
.glass-tab-bar__accessory--success ::slotted(svg) { stroke: var(--gl-color-on-success, #ffffff); }

.glass-tab-bar__accessory--error {
  background: linear-gradient(135deg,
    var(--gl-color-error) 0%,
    color-mix(in srgb, var(--gl-color-error) 70%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--gl-color-error) 50%, transparent);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--gl-color-error) 35%, transparent),
    var(--gl-inset-medium);
}
.glass-tab-bar__accessory--error svg,
.glass-tab-bar__accessory--error ::slotted(svg) { stroke: var(--gl-color-on-error, #ffffff); }


/* ============================================================
   19. ACCORDION
   ============================================================ */
.glass-accordion { display: flex; flex-direction: column; gap: var(--gl-space-xs); }

.glass-accordion__item {
  background: var(--gl-surface-2);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-btn);
  overflow: hidden;
  transition: var(--gl-transition);
  box-shadow: var(--gl-inset-subtle);
}

.glass-accordion__item.is-open {
  background: var(--gl-surface-3);
  border-color: var(--gl-border-medium);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), var(--gl-inset-medium);
}

.glass-accordion__trigger {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: var(--gl-space-sm);
  padding: var(--gl-space-md) var(--gl-space-lg);
  background: none; border: none; cursor: pointer;
  font-family: var(--gl-font-family);
  font-size: var(--gl-font-size-base);
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text); text-align: left;
  outline: none; transition: var(--gl-transition);
  -webkit-tap-highlight-color: transparent;
}

.glass-accordion__trigger:hover { color: var(--gl-color-primary); }

.glass-accordion__trigger-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.glass-accordion__trigger-icon svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--gl-icon-default); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-accordion__item.is-open .glass-accordion__trigger-icon svg {
  transform: rotate(180deg);
  stroke: var(--gl-color-primary);
}

.glass-accordion__content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-accordion__item.is-open .glass-accordion__content { max-height: 500px; }

.glass-accordion__body {
  padding: 0 var(--gl-space-lg) var(--gl-space-lg);
  color: var(--gl-accordion-body-color);
  font-size: var(--gl-font-size-sm); line-height: 1.6;
}


/* ============================================================
   20. BADGE
   ============================================================ */
.glass-badge {
  /* The accent a chip deepens when it is hovered or selected. Each variant
     below re-points it, so a selected success chip stays green instead of
     turning primary. A plain badge has no colour of its own, so it borrows
     the primary one — which is what a filter row wants. */
  --gl-badge-accent: var(--gl-color-primary);
  --gl-badge-accent-text: var(--gl-color-primary-on-surface, var(--gl-color-primary));

  display: inline-flex; align-items: center; gap: var(--gl-space-2xs);
  padding: var(--gl-space-2xs) var(--gl-space-sm);
  background: var(--gl-surface-3);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-full);
  font-size: var(--gl-font-size-xs);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-color-text);
  box-shadow: var(--gl-inset-subtle);
}
/* Variant surfaces are token-derived, so re-branding a state color moves the
   fill, the border and the text together. The --gl-state-scrim layer sits
   behind the tint and keeps the label readable over any backdrop. */
.glass-badge--primary {
  --gl-badge-accent: var(--gl-color-primary);
  --gl-badge-accent-text: var(--gl-color-primary-on-surface, var(--gl-color-primary));
  background:
    linear-gradient(135deg,
      var(--gl-color-primary-surface, rgba(245,166,35,0.25)) 0%,
      color-mix(in srgb, var(--gl-color-primary-dark) 20%, transparent) 100%
    ),
    var(--gl-state-scrim, transparent);
  border-color: var(--gl-color-primary-border, var(--gl-border-warm));
  color: var(--gl-color-primary-on-surface, var(--gl-color-primary));
}
.glass-badge--success {
  --gl-badge-accent: var(--gl-color-success);
  --gl-badge-accent-text: var(--gl-color-success-on-surface, var(--gl-color-success));
  background:
    linear-gradient(var(--gl-color-success-surface, rgba(52,199,89,0.15)) 0%,
                    var(--gl-color-success-surface, rgba(52,199,89,0.15)) 100%),
    var(--gl-state-scrim, transparent);
  border-color: var(--gl-color-success-border, rgba(52,199,89,0.30));
  color: var(--gl-color-success-on-surface, var(--gl-color-success));
}
.glass-badge--error {
  --gl-badge-accent: var(--gl-color-error);
  --gl-badge-accent-text: var(--gl-color-error-on-surface, var(--gl-color-error));
  background:
    linear-gradient(var(--gl-color-error-surface, rgba(255,59,48,0.15)) 0%,
                    var(--gl-color-error-surface, rgba(255,59,48,0.15)) 100%),
    var(--gl-state-scrim, transparent);
  border-color: var(--gl-color-error-border, rgba(255,59,48,0.30));
  color: var(--gl-color-error-on-surface, var(--gl-color-error));
}
.glass-badge--warning {
  --gl-badge-accent: var(--gl-color-warning);
  --gl-badge-accent-text: var(--gl-color-warning-on-surface, var(--gl-color-warning));
  background:
    linear-gradient(var(--gl-color-warning-surface, rgba(255,204,0,0.15)) 0%,
                    var(--gl-color-warning-surface, rgba(255,204,0,0.15)) 100%),
    var(--gl-state-scrim, transparent);
  border-color: var(--gl-color-warning-border, rgba(255,204,0,0.30));
  color: var(--gl-color-warning-on-surface, var(--gl-color-warning));
}


/* ---- Badges as chips ----
   A badge doubles as a filter chip. `--interactive` carries the affordance,
   `--selected` says which chip is on; both combine with the variants above.

   Both paint through a full-bleed inset shadow instead of `background`,
   because the variants put a gradient there — a hover rule that touched
   `background` would wipe it, and with it the --gl-state-scrim layer that
   keeps the label readable over any backdrop.

   In GlassKit Elements an interactive badge renders as a real <button>, so
   the rule below also undoes the one thing a button does not inherit. In the
   document that declaration costs nothing.

   Mark the pressed state for assistive tech as well as for the eye:
   <button class="glass-badge glass-badge--interactive glass-badge--selected"
           aria-pressed="true">Active</button> */
.glass-badge--interactive {
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-badge--interactive:hover {
  border-color: color-mix(in srgb, var(--gl-badge-accent) 45%, var(--gl-border-subtle));
  box-shadow: var(--gl-inset-subtle),
              inset 0 0 0 100px color-mix(in srgb, var(--gl-badge-accent) 12%, transparent);
}
.glass-badge--interactive:active { transform: scale(0.96); }
.glass-badge--interactive:focus-visible {
  box-shadow: var(--gl-shadow-focus), var(--gl-inset-subtle);
}

.glass-badge--selected {
  border-color: color-mix(in srgb, var(--gl-badge-accent) 55%, transparent);
  color: var(--gl-badge-accent-text);
  box-shadow: var(--gl-inset-subtle),
              inset 0 0 0 100px color-mix(in srgb, var(--gl-badge-accent) 22%, transparent);
}
/* A bare :hover / :focus-visible rule outweighs `--selected` on its own, so
   the selected chip states are spelled out rather than left to source order. */
.glass-badge--interactive.glass-badge--selected:hover {
  box-shadow: var(--gl-inset-subtle),
              inset 0 0 0 100px color-mix(in srgb, var(--gl-badge-accent) 30%, transparent);
}
.glass-badge--interactive.glass-badge--selected:focus-visible {
  box-shadow: var(--gl-shadow-focus), var(--gl-inset-subtle),
              inset 0 0 0 100px color-mix(in srgb, var(--gl-badge-accent) 22%, transparent);
}


/* ============================================================
   21. DIVIDER
   ============================================================ */
.glass-divider {
  height: 1px; border: none;
  background: linear-gradient(90deg,
    transparent 0%, var(--gl-border-subtle) 20%,
    var(--gl-border-medium) 50%, var(--gl-border-subtle) 80%, transparent 100%
  );
}


/* ============================================================
   22. AVATAR
   ============================================================ */
.glass-avatar {
  width: 44px; height: 44px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-surface-3);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  border: 1.5px solid var(--gl-border-strong);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--gl-shadow-glow), var(--gl-inset-medium);
  flex-shrink: 0;
  font-size: var(--gl-font-size-btn);
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text);
}
.glass-avatar img,
.glass-avatar ::slotted(img) { width: 100%; height: 100%; object-fit: cover; }
.glass-avatar--sm { width: 32px; height: 32px; font-size: var(--gl-font-size-xs); }
.glass-avatar--lg { width: 56px; height: 56px; font-size: var(--gl-font-size-lg); }


/* ============================================================
   23. THEME TOGGLE BUTTON
   ============================================================ */
.glass-theme-toggle {
  width: 46px; height: 46px;
  border-radius: var(--gl-radius-pill);
  background: var(--gl-surface-3);
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1.5px solid var(--gl-border-strong);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--gl-transition);
  box-shadow: var(--gl-shadow-glow), var(--gl-inset-medium);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-theme-toggle:hover { background: var(--gl-surface-5); transform: scale(1.05); }
.glass-theme-toggle:active { transform: scale(0.95); }

.glass-theme-toggle svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--gl-color-text); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.glass-theme-toggle .icon-sun  { display: none; }
.glass-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .glass-theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .glass-theme-toggle .icon-moon { display: none; }


/* ============================================================
   24. POPOVER
   ============================================================ */
.glass-popover-anchor {
  position: relative;
  display: inline-block;
}

.glass-popover {
  position: absolute;
  top: calc(100% + var(--gl-space-xs));
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.96);
  transform-origin: top center;
  min-width: 220px;
  padding: var(--gl-space-sm);
  background: var(--gl-surface-3);
  backdrop-filter: blur(var(--gl-blur));
  -webkit-backdrop-filter: blur(var(--gl-blur));
  border: 1px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-card);
  box-shadow: var(--gl-shadow-card), var(--gl-inset-strong);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .18s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .18s;
  z-index: 50;
}
.glass-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

.glass-popover--top {
  top: auto;
  bottom: calc(100% + var(--gl-space-xs));
  transform-origin: bottom center;
}
.glass-popover--start {
  left: 0;
  transform: translateY(-4px) scale(0.96);
  transform-origin: top left;
}
.glass-popover--start.is-open { transform: translateY(0) scale(1); }

.glass-popover--end {
  left: auto;
  right: 0;
  transform: translateY(-4px) scale(0.96);
  transform-origin: top right;
}
.glass-popover--end.is-open { transform: translateY(0) scale(1); }


/* ============================================================
   25. LIST
   ============================================================ */
.glass-list {
  background: var(--gl-surface-1);
  backdrop-filter: blur(var(--gl-blur-light));
  -webkit-backdrop-filter: blur(var(--gl-blur-light));
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-btn);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), var(--gl-inset-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glass-list--flush {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-left: calc(var(--gl-space-lg) * -1);
  margin-right: calc(var(--gl-space-lg) * -1);
}

/* Bare: no own glass surface — for lists that live inside a container
   which already provides background, border and shadow (e.g. inside a
   glass-popover or glass-card). */
.glass-list--bare {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.glass-list__section-header {
  padding: var(--gl-space-xs) var(--gl-space-lg) var(--gl-space-2xs);
  font-size: var(--gl-font-size-xs);
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.glass-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gl-space-sm);
  padding: var(--gl-space-md) var(--gl-space-lg);
  min-height: 56px;
  color: var(--gl-color-text);
  font-size: var(--gl-font-size-base);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  list-style: none;
}

.glass-list__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--gl-space-lg) + 28px + var(--gl-space-sm));
  right: var(--gl-space-lg);
  bottom: 0;
  height: 1px;
  background: var(--gl-border-subtle);
  pointer-events: none;
}
/* Items without a leading icon: divider follows the standard horizontal
   padding instead of the (non-existent) icon slot. */
.glass-list__item:not(:has(.glass-list__leading)):not(:last-child)::after {
  left: var(--gl-space-lg);
}
.glass-list__item:has(.glass-list__leading--lg):not(:last-child)::after {
  left: calc(var(--gl-space-lg) + 40px + var(--gl-space-sm));
}

.glass-list__item--center {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-list__item--center > .glass-list__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glass-list__item--interactive {
  cursor: pointer;
  transition: background .15s ease;
}
.glass-list__item--interactive:hover,
.glass-list__item--interactive:focus-visible {
  background: var(--gl-surface-2);
  outline: none;
}
.glass-list__item--interactive:active {
  background: var(--gl-surface-3);
}

.glass-list__item--danger { color: var(--gl-color-error); }
.glass-list__item--danger .glass-list__title,
.glass-list__item--danger .glass-list__leading { color: inherit; }

.glass-list__item--accent { color: var(--gl-color-primary); }
.glass-list__item--accent .glass-list__title,
.glass-list__item--accent .glass-list__leading { color: inherit; }

.glass-list__leading {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gl-icon-strong);
}
.glass-list__leading svg,
.glass-list__leading ::slotted(svg) {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glass-list__leading--lg {
  width: 40px;
  height: 40px;
  border-radius: var(--gl-radius-xs);
  overflow: hidden;
}
.glass-list__leading--lg svg,
.glass-list__leading--lg ::slotted(svg) {
  width: 32px;
  height: 32px;
}
.glass-list__leading--lg img,
.glass-list__leading--lg ::slotted(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glass-list__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.glass-list__title {
  font-size: var(--gl-font-size-base);
  font-weight: var(--gl-font-weight-medium);
  color: var(--gl-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-list__subtitle {
  font-size: var(--gl-font-size-sm);
  color: var(--gl-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-list__subtitle--wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glass-list__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gl-space-xs);
  color: var(--gl-color-text-muted);
  font-size: var(--gl-font-size-sm);
}
.glass-list__trailing svg,
.glass-list__trailing ::slotted(svg) {
  width: 18px;
  height: 18px;
  stroke: var(--gl-icon-muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glass-list__value {
  color: var(--gl-color-text-muted);
  font-size: var(--gl-font-size-sm);
  white-space: nowrap;
}


/* ============================================================
   26. SKELETON
   ============================================================ */
/* Loading placeholder: shimmer lines standing in for text that has not
   arrived. The caller sets each line's width; the shimmer runs over the
   surface tokens, so it follows the theme. Holds still when the user asked
   for reduced motion. */
.glass-skeleton { display: flex; flex-direction: column; gap: 10px; }
.glass-skeleton__line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg,
    var(--gl-surface-1) 0%, var(--gl-surface-4) 50%, var(--gl-surface-1) 100%);
  background-size: 200% 100%;
  animation: glass-skeleton 1.4s ease-in-out infinite;
}
.glass-skeleton__line--title { height: 18px; }
@keyframes glass-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-skeleton__line { animation: none; }
}


/* ============================================================
   27. TABLE
   ============================================================ */
/* A plain <table> on glass: hairline rows, a muted header, numbers
   right-aligned in tabular figures, and a wrapper that scrolls sideways
   where the columns do not fit. Document-level by design — from a shadow
   root, ::slotted() cannot reach a slotted table's cells, so there is no
   element for this; put the class on the <table> itself. */
.glass-table-wrap { overflow-x: auto; border-radius: var(--gl-radius-sm); }
.glass-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--gl-font-size-sm); color: var(--gl-color-text);
}
.glass-table th {
  text-align: left; padding: 8px 10px; white-space: nowrap;
  font-weight: var(--gl-font-weight-medium); color: var(--gl-color-text-muted);
  border-bottom: 1px solid var(--gl-border-medium);
}
.glass-table td {
  padding: 9px 10px; vertical-align: top;
  border-bottom: 1px solid var(--gl-border-subtle);
}
.glass-table tbody tr:last-child td { border-bottom: 0; }
.glass-table tbody tr:hover td { background: var(--gl-surface-1); }
.glass-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.glass-table__muted { color: var(--gl-color-text-muted); }


/* ============================================================
   28. PROSE
   ============================================================ */
/* Running text the app did not write by hand — rendered Markdown, help and
   info pages. One class on the container gives headings, lists, links,
   code, quotes, images and tables the GlassKit voice without a class on
   every tag. Document-level by design: the content is light DOM, and
   ::slotted() stops at the first level. */
.glass-prose {
  font-size: var(--gl-font-size-base); line-height: 1.6;
  color: var(--gl-color-text);
}
.glass-prose > :first-child { margin-top: 0; }
.glass-prose > :last-child { margin-bottom: 0; }
.glass-prose h1, .glass-prose h2, .glass-prose h3 {
  color: var(--gl-color-text-heading); line-height: 1.25; margin: 1.2em 0 0.4em;
}
.glass-prose h1 { font-size: var(--gl-font-size-title); }
.glass-prose h2 { font-size: var(--gl-font-size-modal); }
.glass-prose h3 { font-size: var(--gl-font-size-lg); }
.glass-prose p, .glass-prose ul, .glass-prose ol, .glass-prose pre,
.glass-prose blockquote, .glass-prose table { margin: 0 0 0.9em; }
.glass-prose ul, .glass-prose ol { padding-left: 1.3em; }
.glass-prose strong { color: var(--gl-color-text-heading); }
/* Links in running text are underlined: colour alone does not mark them. */
.glass-prose a { color: var(--gl-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.glass-prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em;
  background: var(--gl-surface-2); padding: 1px 5px; border-radius: 4px;
}
.glass-prose pre {
  padding: 12px 14px; overflow-x: auto;
  background: var(--gl-surface-1); border-radius: var(--gl-radius-sm);
}
.glass-prose pre code { background: none; padding: 0; }
.glass-prose blockquote {
  padding: 8px 14px;
  border-left: 3px solid var(--gl-color-primary);
  background: var(--gl-surface-1);
  border-radius: 0 var(--gl-radius-xs) var(--gl-radius-xs) 0;
}
.glass-prose img { max-width: 100%; height: auto; border-radius: var(--gl-radius-sm); }
.glass-prose hr { height: 1px; border: 0; margin: 1.2em 0; background: var(--gl-border-subtle); }
.glass-prose table { width: 100%; border-collapse: collapse; }
.glass-prose th, .glass-prose td {
  padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--gl-border-subtle);
}


/* ============================================================
   29. SEGMENTED
   ============================================================ */
/* A small, exclusive choice as one control — traffic light, morning /
   afternoon, mode. Buttons inside a role="group"; the chosen one carries
   aria-pressed="true", and the styling hangs on exactly that attribute so
   state and semantics cannot drift apart. --full shares the width between
   the buttons. The tone modifiers put a dot in a state colour before the
   label; the dot reads --gl-segmented-tone, so a fourth tone is one line. */
.glass-segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  max-width: 100%;
  background: var(--gl-surface-1);
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-btn);
  box-shadow: var(--gl-inset-subtle);
}
.glass-segmented--full { display: flex; }
.glass-segmented--full .glass-segmented__item { flex: 1 1 0; }

/* More options than fit: --scroll keeps one row and lets it scroll
   sideways with the scrollbar hidden, as on the date strip; --wrap breaks
   the row into lines. Without either the row stays one line and runs past
   the edge — seven options on a phone lost the last ones. Both combine
   with --full; use one or the other. The 4px padding keeps the focus ring
   inside the scroll box. */
.glass-segmented--scroll {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.glass-segmented--scroll::-webkit-scrollbar { display: none; }
.glass-segmented--wrap { flex-wrap: wrap; }

.glass-segmented__item {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 0; border-radius: var(--gl-radius-sm);
  background: transparent;
  color: var(--gl-color-text-muted);
  font-family: inherit;
  font-size: var(--gl-font-size-sm);
  font-weight: var(--gl-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-segmented__item:hover { color: var(--gl-color-text); }
.glass-segmented__item[aria-pressed="true"] {
  background: var(--gl-surface-5);
  color: var(--gl-color-text-heading);
  box-shadow: var(--gl-shadow-btn);
}
.glass-segmented__item:focus-visible { box-shadow: var(--gl-shadow-focus); }
.glass-segmented__item[aria-pressed="true"]:focus-visible { box-shadow: var(--gl-shadow-focus), var(--gl-shadow-btn); }
.glass-segmented__item:disabled { opacity: 0.45; cursor: not-allowed; }

.glass-segmented__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gl-segmented-tone, currentColor);
}
.glass-segmented__item--success { --gl-segmented-tone: var(--gl-color-success); }
.glass-segmented__item--warning { --gl-segmented-tone: var(--gl-color-warning); }
.glass-segmented__item--error   { --gl-segmented-tone: var(--gl-color-error); }


/* ============================================================
   30. STEPS
   ============================================================ */
/* Progress through a short flow: numbered circles joined by hairlines,
   done ones on the success surface, the current one in the primary colour.
   The list is a size container: narrower than 360px (a phone, a narrow
   card) only the current step keeps its label and the others show their
   number; before that, labels shorten with an ellipsis instead of pushing
   past the edge. Keyed to the block's own width, not the viewport — so in
   a flex row give the list a width, size containment leaves it none. */
.glass-steps {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none;
  min-width: 0; container-type: inline-size;
}
.glass-steps__item {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0;
  font-size: var(--gl-font-size-xs);
  color: var(--gl-color-text-muted);
  white-space: nowrap;
}
.glass-steps__num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gl-border-medium);
  font-size: 11px; font-weight: var(--gl-font-weight-semibold);
}
.glass-steps__num svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.glass-steps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.glass-steps__item--done .glass-steps__num {
  background: var(--gl-color-success-surface);
  border-color: var(--gl-color-success-border);
  color: var(--gl-color-success-on-surface);
}
.glass-steps__item--current { color: var(--gl-color-text-heading); }
.glass-steps__item--current .glass-steps__num {
  background: var(--gl-color-primary); border-color: transparent;
  color: var(--gl-color-on-primary);
}
.glass-steps__line { flex: 1 1 8px; min-width: 8px; height: 1px; background: var(--gl-border-subtle); }
@container (max-width: 360px) {
  .glass-steps__label { display: none; }
  .glass-steps__item--current .glass-steps__label { display: inline; }
}


/* ============================================================
   31. SHEET
   ============================================================ */
/* Bottom sheet — the mobile sibling of the modal: an overlay that fades,
   a panel that rises from the bottom edge, only the top corners rounded, a
   grip, safe-area padding. Its own block rather than a modal modifier,
   because layout, entry motion and gesture differ. Show: remove [hidden],
   force a reflow, add .is-active on the next frame. Hide: drop .is-active,
   set [hidden] after transitionend — so the blurred overlay leaves the
   layout instead of idling at opacity 0. <glk-sheet> in GlassKit Elements
   does exactly this. --inline embeds the panel in the flow, no overlay. */
.glass-sheet-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--gl-surface-overlay);
  backdrop-filter: blur(var(--gl-blur-soft));
  -webkit-backdrop-filter: blur(var(--gl-blur-soft));
  font-family: var(--gl-font-family);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: var(--gl-transition-modal); transition-property: opacity;
}
.glass-sheet-overlay[hidden] { display: none; }
.glass-sheet-overlay.is-active { opacity: 1; }

.glass-sheet {
  width: min(100%, 560px); max-height: 88dvh; overflow: auto;
  padding: 8px var(--gl-space-lg) calc(var(--gl-space-lg) + env(safe-area-inset-bottom, 0px));
  /* The modal's material, not the milk surfaces: milk is a light plate for
     dark ink (--gl-color-text-on-light, the secondary button) and stays
     light in dark mode — with --gl-color-text on it the sheet read white
     on white-grey. The card glow gradient over heavy blur is what the
     text tokens are made for, in both themes. */
  background: linear-gradient(to bottom,
    var(--gl-card-glow-top) 0%, var(--gl-card-glow-bottom) 100%
  );
  backdrop-filter: blur(var(--gl-blur-heavy));
  -webkit-backdrop-filter: blur(var(--gl-blur-heavy));
  color: var(--gl-color-text);
  border: 1.5px solid var(--gl-border-medium);
  border-radius: var(--gl-radius-card) var(--gl-radius-card) 0 0;
  box-shadow: var(--gl-shadow-modal);
}
.glass-sheet-overlay .glass-sheet {
  transform: translateY(100%);
  transition: var(--gl-transition-modal); transition-property: transform;
}
.glass-sheet-overlay.is-active .glass-sheet { transform: translateY(0); }
.glass-sheet--inline { border-radius: var(--gl-radius-card); box-shadow: var(--gl-shadow-card); }

.glass-sheet__grip { width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--gl-border-strong); }
.glass-sheet__title {
  margin: 0 0 8px;
  font-size: var(--gl-font-size-modal); font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text-heading);
}
.glass-sheet__body { font-size: var(--gl-font-size-base); line-height: 1.55; }
.glass-sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .glass-sheet-overlay, .glass-sheet-overlay .glass-sheet { transition: none; }
}


/* ============================================================
   32. EMPTY
   ============================================================ */
/* Empty state for lists and result pages: a centred column with a round
   icon plate, a title, a short muted text and room for one action. */
.glass-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 16px; text-align: center;
}
.glass-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gl-surface-2); color: var(--gl-icon-default);
}
.glass-empty__icon svg,
.glass-empty__icon ::slotted(svg) {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.glass-empty__title { margin: 4px 0 0; font-weight: var(--gl-font-weight-semibold); color: var(--gl-color-text-heading); }
.glass-empty__text {
  margin: 0; max-width: 38ch;
  font-size: var(--gl-font-size-sm); line-height: 1.55;
  color: var(--gl-color-text-muted);
}
/* Room for one action or several: side by side with 8px between them,
   wrapping and centred when the width runs out. One alone sits as before. */
.glass-empty__action {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 8px;
}


/* ============================================================
   33. DATE STRIP
   ============================================================ */
/* A row of day chips that scrolls sideways — a booking horizon, the
   days around today. Each chip is a button: weekday in small caps, the
   day number, and a dot beneath that a tone modifier lights up. Without
   a tone the dot is transparent, so chips with and without a mark keep
   the same height. The chosen chip carries aria-pressed="true" and takes
   the primary surface, as in .glass-segmented; --today underlines the
   number; :disabled (or aria-disabled="true", which keeps the chip
   focusable) dims a day that cannot be chosen. The scrollbar is hidden;
   the strip pads itself so its own overflow does not clip the focus
   ring. The dot reads --gl-date-strip-tone, so a fifth tone is one
   line; on the chosen chip --gl-date-strip-ink turns every tone into
   the ink on primary, and a dot without a tone stays transparent. */
.glass-date-strip {
  display: flex; gap: 6px; padding: 4px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.glass-date-strip::-webkit-scrollbar { display: none; }

.glass-date-strip__day {
  -webkit-appearance: none; appearance: none;
  flex: 1 0 44px; min-width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px;
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-input);
  background: var(--gl-surface-1);
  color: var(--gl-color-text);
  font-family: inherit;
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-date-strip__day:hover { background: var(--gl-surface-3); }
.glass-date-strip__day[aria-pressed="true"] {
  --gl-date-strip-ink: var(--gl-color-on-primary);
  background: var(--gl-color-primary);
  color: var(--gl-color-on-primary);
  border-color: transparent;
  box-shadow: var(--gl-shadow-btn-primary);
}
.glass-date-strip__day:focus-visible { box-shadow: var(--gl-shadow-focus); }
.glass-date-strip__day[aria-pressed="true"]:focus-visible { box-shadow: var(--gl-shadow-focus), var(--gl-shadow-btn-primary); }
.glass-date-strip__day:disabled,
.glass-date-strip__day[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.glass-date-strip__day:disabled:hover,
.glass-date-strip__day[aria-disabled="true"]:hover { background: var(--gl-surface-1); }
.glass-date-strip__day--today .glass-date-strip__num { text-decoration: underline; text-underline-offset: 3px; }

.glass-date-strip__wd {
  font-size: var(--gl-font-size-xs); opacity: 0.75;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.glass-date-strip__num {
  font-size: var(--gl-font-size-lg); font-weight: var(--gl-font-weight-semibold);
  line-height: 1.1;
}
.glass-date-strip__mark {
  width: 6px; height: 6px; margin-top: 2px; border-radius: 50%;
  background: var(--gl-date-strip-tone, transparent);
}
.glass-date-strip__mark--primary { --gl-date-strip-tone: var(--gl-date-strip-ink, var(--gl-color-primary)); }
.glass-date-strip__mark--success { --gl-date-strip-tone: var(--gl-date-strip-ink, var(--gl-color-success)); }
.glass-date-strip__mark--warning { --gl-date-strip-tone: var(--gl-date-strip-ink, var(--gl-color-warning)); }
.glass-date-strip__mark--error   { --gl-date-strip-tone: var(--gl-date-strip-ink, var(--gl-color-error)); }


/* ============================================================
   34. CALENDAR
   ============================================================ */
/* One month: a head with the title between two round nav buttons, a
   weekday row and six rows of seven day buttons, each a square with the
   number and up to three dots beneath. The chosen day carries
   aria-pressed="true" and takes the primary surface; --today draws a
   warm border; --other dims a day of the neighbouring month; :disabled
   or aria-disabled="true" dims a day outside the allowed range — the
   second form keeps it focusable, so arrow keys can pass over it. The
   block is a group of buttons whose names carry the full date, not a
   role="grid": a grid demands rows and cells with aria-selected, which
   is not what the styling hangs on. The nav buttons take an SVG chevron.
   The dot reads --gl-calendar-tone, so a fifth tone is one line; on the
   chosen day --gl-calendar-ink turns every tone into the ink on primary. */
.glass-calendar { display: block; }
.glass-calendar__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.glass-calendar__title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-weight: var(--gl-font-weight-semibold);
  color: var(--gl-color-text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glass-calendar__nav {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-full);
  background: var(--gl-surface-1);
  color: var(--gl-color-text);
  font-family: inherit;
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-calendar__nav:hover { background: var(--gl-surface-3); }
.glass-calendar__nav:focus-visible { box-shadow: var(--gl-shadow-focus); }
.glass-calendar__nav svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.glass-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.glass-calendar__wd {
  padding: 4px 0; text-align: center;
  font-size: var(--gl-font-size-xs);
  color: var(--gl-color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glass-calendar__day {
  -webkit-appearance: none; appearance: none;
  aspect-ratio: 1; min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid transparent;
  border-radius: var(--gl-radius-sm);
  background: transparent;
  color: var(--gl-color-text);
  font-family: inherit;
  font-size: var(--gl-font-size-sm);
  cursor: pointer;
  transition: var(--gl-transition-fast);
  outline: none; -webkit-tap-highlight-color: transparent;
}
.glass-calendar__day:hover { background: var(--gl-surface-2); }
.glass-calendar__day--other { opacity: 0.35; }
.glass-calendar__day--today { border-color: var(--gl-border-warm); }
.glass-calendar__day[aria-pressed="true"] {
  --gl-calendar-ink: var(--gl-color-on-primary);
  background: var(--gl-color-primary);
  color: var(--gl-color-on-primary);
}
.glass-calendar__day:focus-visible { box-shadow: var(--gl-shadow-focus); }
.glass-calendar__day:disabled,
.glass-calendar__day[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.glass-calendar__day:disabled:hover,
.glass-calendar__day[aria-disabled="true"]:hover { background: transparent; }

.glass-calendar__marks { display: flex; gap: 2px; height: 5px; }
.glass-calendar__mark {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gl-calendar-tone, transparent);
}
.glass-calendar__mark--primary { --gl-calendar-tone: var(--gl-calendar-ink, var(--gl-color-primary)); }
.glass-calendar__mark--success { --gl-calendar-tone: var(--gl-calendar-ink, var(--gl-color-success)); }
.glass-calendar__mark--warning { --gl-calendar-tone: var(--gl-calendar-ink, var(--gl-color-warning)); }
.glass-calendar__mark--error   { --gl-calendar-tone: var(--gl-calendar-ink, var(--gl-color-error)); }


/* ============================================================
   35. IMAGE PICKER
   ============================================================ */
/* Choosing one image with a preview: a 72px plate on the left — the
   picture with object-fit: cover, or a placeholder icon in the muted
   icon colour — and a column with the label, a hint and the actions.
   The actions are ordinary .glass-btn buttons (secondary --sm --auto to
   choose, tertiary --sm --auto to remove); the block brings no button
   look of its own. --round makes the plate a circle for avatars. The
   column yields (min-width: 0) and the label wraps, so a long label
   never squeezes the plate. Any image, not only photos — a logo, an
   illustration — hence the name. */
.glass-image-picker { display: flex; align-items: center; gap: 14px; }
.glass-image-picker__preview {
  flex: none; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gl-border-subtle);
  border-radius: var(--gl-radius-input);
  background: var(--gl-surface-2);
  color: var(--gl-icon-muted);
  overflow: hidden;
}
.glass-image-picker__preview--round { border-radius: 50%; }
.glass-image-picker__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.glass-image-picker__preview svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.glass-image-picker__meta {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.glass-image-picker__label {
  font-size: var(--gl-font-size-sm); font-weight: var(--gl-font-weight-medium);
  color: var(--gl-icon-strong);
  overflow-wrap: anywhere;
}
.glass-image-picker__hint { font-size: var(--gl-font-size-xs); color: var(--gl-color-text-muted); }
.glass-image-picker__actions { display: flex; flex-wrap: wrap; gap: 8px; }


/* ============================================================
   36. UTILITIES
   ============================================================ */
.gl-stack            { display: flex; flex-direction: column; }
.gl-row              { display: flex; flex-direction: row; align-items: center; }

.gl-stack--2xs { gap: var(--gl-space-2xs); }
.gl-stack--xs  { gap: var(--gl-space-xs);  }
.gl-stack--sm  { gap: var(--gl-space-sm);  }
.gl-stack--md  { gap: var(--gl-space-md);  }
.gl-stack--lg  { gap: var(--gl-space-lg);  }
.gl-stack--xl  { gap: var(--gl-space-xl);  }

.gl-row--xs    { gap: var(--gl-space-xs);  }
.gl-row--sm    { gap: var(--gl-space-sm);  }
.gl-row--md    { gap: var(--gl-space-md);  }

.gl-text-center { text-align: center; }
.gl-text-muted  { color: var(--gl-color-text-muted); }
.gl-text-sm     { font-size: var(--gl-font-size-sm); }

.gl-mt-sm  { margin-top: var(--gl-space-sm);  }
.gl-mt-md  { margin-top: var(--gl-space-md);  }
.gl-mt-lg  { margin-top: var(--gl-space-lg);  }
.gl-mt-xl  { margin-top: var(--gl-space-xl);  }

.gl-mb-sm  { margin-bottom: var(--gl-space-sm);  }
.gl-mb-md  { margin-bottom: var(--gl-space-md);  }
.gl-mb-lg  { margin-bottom: var(--gl-space-lg);  }
.gl-mb-xl  { margin-bottom: var(--gl-space-xl);  }

.gl-px { padding-left: var(--gl-space-lg); padding-right: var(--gl-space-lg); }
.gl-w-full { width: 100%; }
.gl-flex-1 { flex: 1; }

/* Escape hatch: deliberately filled icons (e.g. brand logos),
   overrides the outline defaults of the components */
svg.glass-icon--fill { fill: currentColor; stroke: none; }