@import url("../tokens/fonts.css");

/* ==========================================================================
   Gleam — clinical-luxury dentistry. Polished porcelain, mint, ice and blush,
   one confident lagoon. Colours, spacing, radii and shadows come from tokens.css.
   Motion rules: only transform/opacity move; entrance animations fill BACKWARDS;
   shadows change only on one element's state; the breathing ring is the one loop.
   ========================================================================== */

:root {
  /* easings (mirror tokens.json → easing) */
  --gl-enamel: cubic-bezier(.22, .8, .24, 1);
  --gl-press: cubic-bezier(.3, 0, .6, 1);
  --gl-release: cubic-bezier(.2, 1.3, .42, 1);
  --gl-breath: cubic-bezier(.45, 0, .55, 1);
  --gl-exit: cubic-bezier(.5, 0, .75, .2);
  /* durations (mirror tokens.json → duration) */
  --gl-t-press: 90ms;
  --gl-t-release: 240ms;
  --gl-t-hover: 220ms;
  --gl-t-glide: 380ms;
  --gl-t-glint: 720ms;
  --gl-t-arc: 900ms;
  --gl-t-breath: 10s;
  /* porcelain glaze: the crisp highlight on every key and card */
  --gl-glaze: rgba(255, 255, 255, .95);
  --gl-glint: rgba(255, 255, 255, .85);
  --gl-edge: #c3d5d1;            /* a secondary key's under-edge */
  --gl-edge-primary: #052e36;    /* the lagoon key's under-edge */
  --gl-edge-danger: #7a2017;
  --gl-drop: rgba(14, 43, 51, .2);
  --gl-hover-tint: rgba(11, 79, 92, .06);
  --gl-well-edge: color-mix(in srgb, var(--ink-soft) 30%, var(--line));
  color-scheme: light;
}
[data-theme="dark"] {
  --gl-glaze: rgba(255, 255, 255, .09);
  --gl-glint: rgba(255, 255, 255, .28);
  --gl-edge: #04141a;
  --gl-edge-primary: #2f8c73;
  --gl-edge-danger: #b8574a;
  --gl-drop: rgba(0, 0, 0, .6);
  --gl-hover-tint: rgba(139, 227, 200, .08);
  color-scheme: dark;
}

html { background-color: var(--page); }
body {
  margin: 0;
  /* the page: porcelain with a staggered lattice of shallow smile lines (two ring layers offset by half a tile).
     A ring centred above each tile shows only its lowest 8px: a smile. Static; scrolls with the page. */
  background-color: var(--page);
  background-image:
    radial-gradient(circle at 44px -30px, transparent 37.2px, var(--page-arc) 37.6px, var(--page-arc) 39.2px, transparent 39.6px),
    radial-gradient(circle at 44px -30px, transparent 37.2px, var(--page-arc) 37.6px, var(--page-arc) 39.2px, transparent 39.6px);
  background-size: 88px 52px, 88px 52px;
  background-position: 0 14px, 44px 40px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html.gl-locked { overflow: hidden; }
[hidden] { display: none !important; }
.gl-stack > .gl-badge { align-self: flex-start; }
img, svg { max-width: 100%; }
.gl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.gl-display { margin: 0; font: 800 clamp(40px, 6vw, 56px)/1.07 var(--font-sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.gl-title { margin: 0; font: 750 clamp(28px, 4vw, 36px)/1.17 var(--font-sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.gl-heading { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.gl-accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 1.12em; line-height: 1; color: var(--primary); }
.gl-num { font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gl-body { margin: 0; font-size: 16px; line-height: 26px; }
.gl-lead { margin: 0; font-size: 18px; line-height: 29px; color: var(--ink-soft); }
.gl-small { font-size: 14px; line-height: 21px; font-weight: 500; }
.gl-soft { color: var(--ink-soft); }
.gl-overline { font: 700 12px/16px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.gl-link { color: var(--primary); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gl-link:hover { text-decoration-thickness: 2px; }
.gl-ico { display: inline-flex; flex: none; line-height: 0; }
.gl-ico svg { display: block; }

/* ---------- the mark ---------- */
.gl-mark { display: inline-flex; flex: none; line-height: 0; }
.gl-mark svg { display: block; width: 100%; height: 100%; }
.gl-mark__tile { fill: var(--primary); }
.gl-mark__arc { fill: none; stroke: var(--mint); stroke-width: 4.6; stroke-linecap: round; }
.gl-mark__glint { fill: var(--porcelain); }
[data-theme="dark"] .gl-mark__arc { stroke: var(--on-primary); }
[data-theme="dark"] .gl-mark__glint { fill: var(--on-primary); }
.gl-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.gl-logo__words { display: flex; flex-direction: column; }
.gl-logo__words b { font: 800 19px/22px var(--font-sans); letter-spacing: -.02em; white-space: nowrap; }
.gl-logo__words small { font: 600 11px/14px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

/* ---------- preview stage ---------- */
.gl-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-8); }
.gl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.gl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.gl-cap { width: 100%; }

/* ---------- tones (tints carry ink text) ---------- */
.gl-tone-mint { --_tint: var(--mint); --_deep: var(--mint-strong); }
.gl-tone-ice { --_tint: var(--ice); --_deep: var(--primary); }
.gl-tone-blush { --_tint: var(--blush); --_deep: var(--coral); }
.gl-tone-coral { --_tint: var(--blush); --_deep: var(--coral); }
.gl-tone-primary { --_tint: var(--primary); --_deep: var(--on-primary); }
.gl-tone-neutral { --_tint: var(--porcelain-sunk); --_deep: var(--ink-soft); }

/* ---------- the glint: one diagonal band of light that sweeps once on hover ---------- */
.gl-btn__glint { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.gl-btn__glint::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent 0%, var(--gl-glint) 48%, transparent 100%);
  opacity: .9; transform: translateX(-160%) skewX(-18deg);
}
@media (hover: hover) {
  .gl-btn:hover:not(:disabled) .gl-btn__glint::before,
  .gl-ibtn:hover:not(:disabled) .gl-btn__glint::before,
  .gl-cal__time:hover .gl-btn__glint::before {
    transform: translateX(330%) skewX(-18deg);
    transition: transform var(--gl-t-glint) var(--gl-enamel);
  }
}

@keyframes gl-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes gl-fade { from { opacity: 0; } }
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Button — a porcelain key
   rest: glazed face + 3px under-edge · hover: lifts 1px, edge 4px, glint sweeps once
   press: travels 3px down onto its edge (90ms) · release: springs back with a 4% overshoot
   ========================================================================== */
.gl-btn, .gl-ibtn {
  --_bg: var(--porcelain); --_fg: var(--ink); --_bd: var(--line); --_edge: var(--gl-edge);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; margin: 0;
  border: 1px solid var(--_bd); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg);
  font: 650 15px/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 3px 0 var(--_edge), 0 6px 14px -4px var(--gl-drop);
  transform: translateY(0);
  transition: transform var(--gl-t-release) var(--gl-release), box-shadow var(--gl-t-release) var(--gl-release), background-color var(--gl-t-hover), border-color var(--gl-t-hover), color var(--gl-t-hover);
}
.gl-btn::after, .gl-ibtn::after { content: ""; position: absolute; inset: -2px -4px -7px -2px; z-index: -1; border-radius: inherit; }
.gl-btn > .gl-ico, .gl-btn__label, .gl-ibtn > .gl-ico { position: relative; z-index: 1; }
@media (hover: hover) {
  .gl-btn:hover:not(:disabled):not([aria-disabled="true"]), .gl-ibtn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--gl-glaze), 0 4px 0 var(--_edge), 0 10px 20px -6px var(--gl-drop);
  }
  .gl-btn:hover .gl-btn__after { transform: translateX(3px); }
}
.gl-btn:active:not(:disabled):not([aria-disabled="true"]), .gl-ibtn:active:not(:disabled), .gl-btn.is-pressed {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 0 0 var(--_edge), 0 1px 3px var(--gl-drop);
  transition-duration: var(--gl-t-press); transition-timing-function: var(--gl-press);
}
.gl-btn__after { transition: transform var(--gl-t-hover) var(--gl-enamel); }
.gl-btn--primary { --_bg: var(--primary); --_fg: var(--on-primary); --_bd: transparent; --_edge: var(--gl-edge-primary); }
.gl-btn--primary .gl-btn__glint::before { opacity: .6; }
.gl-btn--soft { --_bg: var(--mint); --_bd: transparent; --_edge: color-mix(in srgb, var(--mint-strong) 45%, var(--mint)); }
.gl-btn--danger { --_bg: var(--coral); --_fg: var(--on-coral); --_bd: transparent; --_edge: var(--gl-edge-danger); }
.gl-btn--danger .gl-btn__glint::before { opacity: .4; }
.gl-btn--ghost, .gl-ibtn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; margin-bottom: 0; }
.gl-btn--ghost .gl-btn__glint, .gl-ibtn--ghost .gl-btn__glint { display: none; }
@media (hover: hover) {
  .gl-btn--ghost:hover:not(:disabled), .gl-ibtn--ghost:hover:not(:disabled) { --_bg: var(--gl-hover-tint); box-shadow: none; transform: none; }
}
.gl-btn--ghost:active:not(:disabled), .gl-ibtn--ghost:active:not(:disabled) { box-shadow: none; transform: scale(.97); }
.gl-btn--sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 11px; gap: 6px; }
.gl-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 16px; }
.gl-btn--block { display: flex; width: 100%; }
.gl-btn:disabled, .gl-btn[aria-disabled="true"], .gl-ibtn:disabled {
  --_bg: var(--porcelain-sunk); --_fg: var(--ink-soft); --_bd: var(--line);
  cursor: not-allowed; box-shadow: none; transform: translateY(3px);
}
.gl-btn--ghost:disabled { --_bg: transparent; transform: none; }
.gl-btn.is-loading { color: transparent; cursor: progress; transform: translateY(1px); }
.gl-btn.is-loading > .gl-ico { opacity: 0; }
.gl-btn.is-loading:disabled { --_bg: var(--porcelain); --_bd: var(--line); }
.gl-btn--primary.is-loading:disabled { --_bg: var(--primary); --_bd: transparent; }
.gl-btn.is-loading .gl-spin { color: var(--_fg); }
.gl-btn--primary.is-loading .gl-spin { color: var(--on-primary); }
.gl-spin { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; color: var(--ink); }
.gl-spin svg { animation: gl-spin .9s linear infinite; }

/* IconButton */
.gl-ibtn { width: 44px; height: 44px; padding: 0; border-radius: 13px; }
.gl-ibtn--sm { width: 36px; height: 36px; border-radius: 11px; }
.gl-ibtn--lg { width: 54px; height: 54px; border-radius: 16px; }
.gl-ibtn--round { border-radius: 9999px; }
.gl-ibtn[aria-pressed="true"] { --_bg: var(--mint); --_bd: transparent; --_fg: var(--ink); --_edge: color-mix(in srgb, var(--mint-strong) 45%, var(--mint)); }
.gl-ibtn__count { position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--coral); color: var(--on-coral); font: 700 11px/20px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Toggle — an enamel slider: the porcelain knob glides, the track flushes mint
   ========================================================================== */
.gl-toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gl-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-toggle__track {
  position: relative; flex: none; width: 54px; height: 32px; border-radius: 9999px;
  background: var(--porcelain-sunk); border: 1px solid var(--gl-well-edge); box-shadow: var(--shadow-inset);
  transition: background-color var(--gl-t-glide) var(--gl-enamel), border-color var(--gl-t-glide);
}
.gl-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: transparent;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 22%, transparent 60%), var(--porcelain);
  border: 1px solid var(--line);
  box-shadow: inset 0 -2px 0 rgba(14, 43, 51, .07), var(--shadow-sm);
  transform: translateX(0);
  transition: transform var(--gl-t-glide) var(--gl-enamel), color var(--gl-t-glide);
}
[data-theme="dark"] .gl-toggle__knob { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.35) 0 18%, transparent 60%), #dceae7; border-color: transparent; }
.gl-toggle__input:checked + .gl-toggle__track { background: var(--mint-strong); border-color: transparent; }
.gl-toggle__input:checked + .gl-toggle__track .gl-toggle__knob { transform: translateX(22px); color: var(--mint-strong); }
[data-theme="dark"] .gl-toggle__input:checked + .gl-toggle__track .gl-toggle__knob { color: #11745d; }
.gl-toggle:active .gl-toggle__knob { transform: translateX(2px) scaleX(1.06); }
.gl-toggle:active .gl-toggle__input:checked + .gl-toggle__track .gl-toggle__knob { transform: translateX(20px) scaleX(1.06); }
.gl-toggle__input:focus-visible + .gl-toggle__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.gl-toggle__text { display: flex; flex-direction: column; }
.gl-toggle__label { font-weight: 600; font-size: 15px; line-height: 22px; }
.gl-toggle__hint { font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.gl-toggle.is-disabled { cursor: not-allowed; }
.gl-toggle.is-disabled .gl-toggle__track { opacity: .55; }
.gl-toggle.is-disabled .gl-toggle__label { color: var(--ink-soft); }

/* ==========================================================================
   Checkbox / Radio — the tick pops in, the pearl settles into its ring
   ========================================================================== */
.gl-check, .gl-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gl-check__input, .gl-radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-check__box {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  display: grid; place-items: center; color: var(--on-primary);
  background: var(--porcelain); border: 1.5px solid color-mix(in srgb, var(--ink-soft) 70%, var(--line));
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 1px 2px var(--gl-drop);
  transition: background-color var(--gl-t-hover), border-color var(--gl-t-hover), transform var(--gl-t-release) var(--gl-release);
}
.gl-check__tick { opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity 120ms, transform var(--gl-t-release) var(--gl-release); }
.gl-check__dash { position: absolute; width: 10px; height: 2.6px; border-radius: 2px; background: currentColor; opacity: 0; transform: scaleX(.3); transition: opacity 120ms, transform var(--gl-t-release) var(--gl-release); }
.gl-check__input:checked + .gl-check__box, .gl-check__input:indeterminate + .gl-check__box { background: var(--primary); border-color: var(--primary); }
.gl-check__input:checked + .gl-check__box .gl-check__tick { opacity: 1; transform: none; }
.gl-check__input:indeterminate + .gl-check__box .gl-check__tick { opacity: 0; }
.gl-check__input:indeterminate + .gl-check__box .gl-check__dash { opacity: 1; transform: none; }
.gl-check:active .gl-check__box { transform: scale(.9); }
.gl-check__input:focus-visible + .gl-check__box, .gl-radio__input:focus-visible ~ .gl-radio__ring { outline: 2px solid var(--focus); outline-offset: 3px; }
.gl-check__text, .gl-radio__text { display: flex; flex-direction: column; min-width: 0; }
.gl-check__label, .gl-radio__label { font-size: 15px; line-height: 24px; font-weight: 500; }
.gl-check__hint, .gl-radio__hint { font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.gl-check.is-error .gl-check__box { border-color: var(--coral); }
.gl-check.is-error .gl-check__label { color: var(--coral); }
.gl-check.is-disabled, .gl-radio.is-disabled { cursor: not-allowed; }
.gl-check.is-disabled .gl-check__box, .gl-radio.is-disabled .gl-radio__ring { background: var(--porcelain-sunk); box-shadow: none; }
.gl-check.is-disabled .gl-check__label, .gl-radio.is-disabled .gl-radio__label { color: var(--ink-soft); }

.gl-radio__ring {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--porcelain); border: 1.5px solid color-mix(in srgb, var(--ink-soft) 70%, var(--line));
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 1px 2px var(--gl-drop);
  transition: border-color var(--gl-t-hover), border-width var(--gl-t-hover);
}
.gl-radio__pearl {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.7) 0 18%, transparent 55%), var(--primary);
  opacity: 0; transform: scale(.2);
  transition: opacity 120ms, transform var(--gl-t-release) var(--gl-release);
}
.gl-radio__input:checked ~ .gl-radio__ring { border-color: var(--primary); border-width: 2px; }
.gl-radio__input:checked ~ .gl-radio__ring .gl-radio__pearl { opacity: 1; transform: none; }
.gl-radiogroup { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.gl-radiogroup--cols { display: grid; grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr)); }
.gl-radiogroup--cols > .gl-field__label { grid-column: 1 / -1; }
.gl-radiogroup--tiles .gl-radio--card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
.gl-radiogroup--tiles .gl-radio--card .gl-radio__ring { position: absolute; top: 16px; right: 16px; margin: 0; }
@media (max-width: 560px) { .gl-radiogroup--tiles .gl-radio--card { flex-direction: row; align-items: center; } .gl-radiogroup--tiles .gl-radio--card .gl-radio__ring { position: static; margin-left: auto; } }
@media (max-width: 560px) { .gl-radiogroup--cols { grid-template-columns: 1fr; } }

/* choice cards: porcelain slabs that press like keys */
.gl-radio--card {
  align-items: center; gap: 14px; padding: 16px 18px; min-height: 64px;
  background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge), var(--shadow-sm);
  transition: transform var(--gl-t-release) var(--gl-release), box-shadow var(--gl-t-release) var(--gl-release), border-color var(--gl-t-hover), background-color var(--gl-t-hover);
}
.gl-radio--card::after { content: ""; position: absolute; inset: -2px -4px -6px -2px; z-index: -1; }
@media (hover: hover) { .gl-radio--card:hover:not(.is-disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 3px 0 var(--gl-edge), var(--shadow-md); } }
.gl-radio--card:active:not(.is-disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 0 0 var(--gl-edge), var(--shadow-sm); transition-duration: var(--gl-t-press); }
.gl-radio--card:has(.gl-radio__input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--mint) 38%, var(--porcelain)); box-shadow: inset 0 0 0 1px var(--primary), 0 2px 0 var(--gl-edge), var(--shadow-sm); }
.gl-radio--card .gl-radio__ring { order: 9; margin-left: auto; margin-top: 0; }
.gl-radio--card .gl-radio__text { flex: 1; }
.gl-radio--card .gl-radio__label { font-weight: 650; }
.gl-radio__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--ink); }
.gl-radio__aside { font: 700 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.gl-radiogroup--cards .gl-radio__input:focus-visible ~ .gl-radio__ring { outline-offset: 2px; }

/* ==========================================================================
   TextField — a sunken porcelain well; focus lifts the edge to lagoon
   ========================================================================== */
.gl-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gl-field__label { font: 650 14px/20px var(--font-sans); color: var(--ink); }
.gl-field__opt { font-weight: 500; color: var(--ink-soft); }
.gl-field__control { position: relative; display: flex; align-items: center; }
.gl-field__input {
  width: 100%; min-height: 50px; padding: 12px 16px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 45%, var(--line)); border-radius: var(--radius-md);
  background: var(--porcelain); color: var(--ink);
  font: 500 16px/24px var(--font-sans);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--gl-t-hover), box-shadow var(--gl-t-hover), background-color var(--gl-t-hover);
}
textarea.gl-field__input { resize: vertical; min-height: 96px; }
.gl-field__input::placeholder { color: var(--ink-soft); opacity: .8; }
@media (hover: hover) { .gl-field__input:hover:not(:focus):not(:disabled) { border-color: var(--ink-soft); } }
.gl-field__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent), var(--shadow-inset); }
.gl-field__input:focus-visible { outline: none; }
.gl-field__input:disabled { background: var(--porcelain-sunk); color: var(--ink-soft); cursor: not-allowed; }
.gl-field--icon .gl-field__input { padding-left: 44px; }
.gl-field__icon { position: absolute; left: 15px; color: var(--ink-soft); pointer-events: none; }
.gl-field__suffix { position: absolute; right: 14px; color: var(--ink-soft); font-size: 14px; font-weight: 600; pointer-events: none; }
.gl-field__msg { display: flex; align-items: flex-start; gap: 6px; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.gl-field__msg:empty { display: none; }
.gl-field__msg .gl-ico { margin-top: 2px; }
.gl-field.is-error .gl-field__input { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent); }
.gl-field.is-error .gl-field__msg { color: var(--coral); font-weight: 600; }
.gl-field.is-error .gl-field__msg span { animation: gl-rise 240ms var(--gl-enamel) backwards; }

/* ==========================================================================
   Select — a porcelain key that opens a polished menu
   ========================================================================== */
.gl-select__wrap { position: relative; }
.gl-select__btn {
  width: 100%; min-height: 50px; padding: 0 14px 0 16px; display: flex; align-items: center; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 45%, var(--line)); border-radius: var(--radius-md);
  background: var(--porcelain); color: var(--ink); text-align: left; cursor: pointer;
  font: 550 16px/24px var(--font-sans);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge);
  transition: border-color var(--gl-t-hover), box-shadow var(--gl-t-hover);
}
@media (hover: hover) { .gl-select__btn:hover { border-color: var(--ink-soft); } }
.gl-select.is-open .gl-select__btn { border-color: var(--primary); }
.gl-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-select__value.is-placeholder { color: var(--ink-soft); }
.gl-select__icon { color: var(--ink-soft); }
.gl-select__chev { color: var(--ink-soft); transition: transform var(--gl-t-glide) var(--gl-enamel); }
.gl-select.is-open .gl-select__chev { transform: rotate(180deg); }
.gl-select__menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--porcelain); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms var(--gl-exit), transform 160ms var(--gl-exit), visibility 0s 160ms;
}
.gl-select.is-up .gl-select__menu { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.gl-select.is-open .gl-select__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--gl-enamel), transform var(--gl-t-glide) var(--gl-enamel), visibility 0s; }
.gl-select__menu:focus { outline: none; }
.gl-select__menu:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-select__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 11px; cursor: pointer; font-size: 15px; line-height: 21px; }
.gl-select__opt-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gl-select__opt-text small { color: var(--ink-soft); font-size: 13px; line-height: 18px; }
.gl-select__aside { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.gl-select__tick { color: var(--primary); opacity: 0; }
.gl-select__opt.is-active { background: var(--porcelain-sunk); }
.gl-select__opt[aria-selected="true"] { font-weight: 650; }
.gl-select__opt[aria-selected="true"] .gl-select__tick { opacity: 1; }

/* ==========================================================================
   Slider — a pearl on an enamel rail
   ========================================================================== */
.gl-slider { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gl-slider__out { font: 750 16px/22px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.gl-slider__rail { position: relative; height: 28px; }
.gl-slider__track { position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 9999px; background: var(--porcelain-sunk); border: 1px solid var(--gl-well-edge); box-shadow: var(--shadow-inset); overflow: hidden; }
.gl-slider__fill { position: absolute; inset: 0; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); }
.gl-slider__thumbs { position: absolute; inset: 0; pointer-events: none; }
.gl-slider__thumb {
  position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 22%, transparent 60%), var(--porcelain);
  border: 2px solid var(--primary); box-shadow: var(--shadow-sm);
}
.gl-slider__thumb::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--primary); opacity: 0; transform: scale(.4); transition: opacity var(--gl-t-hover), transform var(--gl-t-release) var(--gl-release); }
.gl-slider.is-grabbed .gl-slider__thumb::after { opacity: 1; transform: scale(.7); }
.gl-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; }
.gl-slider.is-grabbed .gl-slider__input { cursor: grabbing; }
.gl-slider__input:focus-visible ~ .gl-slider__thumbs .gl-slider__thumb, .gl-slider__rail:has(.gl-slider__input:focus-visible) .gl-slider__thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.gl-slider__marks { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-slider.is-disabled { opacity: .55; }
.gl-slider.is-disabled .gl-slider__input { cursor: not-allowed; }

/* ==========================================================================
   Tabs — a lagoon bar glides under the chosen tab
   ========================================================================== */
.gl-tabs__scroller { overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.gl-tabs__scroller::-webkit-scrollbar { display: none; }
.gl-tabs__list { position: relative; display: inline-flex; gap: 4px; min-width: 100%; border-bottom: 1px solid var(--line); }
.gl-tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; margin: 0;
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  font: 650 15px/1 var(--font-sans); border-radius: 12px 12px 0 0;
  transition: color var(--gl-t-hover), background-color var(--gl-t-hover);
}
@media (hover: hover) { .gl-tabs__tab:hover { color: var(--ink); background: var(--gl-hover-tint); } }
.gl-tabs__tab[aria-selected="true"] { color: var(--ink); }
.gl-tabs__tab:focus-visible { outline-offset: -2px; }
.gl-tabs__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--porcelain-sunk); color: var(--ink-soft); font: 700 12px/22px var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
.gl-tabs__tab[aria-selected="true"] .gl-tabs__count { background: var(--mint); color: var(--ink); }
.gl-tabs__bar { position: absolute; left: 0; bottom: -1px; width: 100px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform-origin: 0 50%; transition: transform var(--gl-t-glide) var(--gl-enamel); pointer-events: none; }
.gl-tabs__panel { padding-top: var(--space-6); }
.gl-tabs__panel:focus-visible { outline-offset: 4px; border-radius: 8px; }
.gl-tabs__panel:not([hidden]) { animation: gl-fade 260ms var(--gl-enamel) backwards; }

/* ==========================================================================
   SegmentedControl — a porcelain key glides along a sunken tray
   ========================================================================== */
.gl-seg {
  --_n: 2; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 100%;
  padding: 4px; border-radius: var(--radius-md); background: var(--porcelain-sunk); border: 1px solid var(--gl-well-edge); box-shadow: var(--shadow-inset);
}
.gl-seg--block { display: grid; width: 100%; }
.gl-seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--_n));
  border-radius: 10px; background: var(--porcelain); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge), 0 3px 8px -2px var(--gl-drop);
  transition: transform var(--gl-t-glide) var(--gl-enamel);
}
[data-theme="dark"] .gl-seg__thumb { background: #1a3a44; }
.gl-seg__opt { position: relative; z-index: 1; display: flex; cursor: pointer; min-width: 0; }
.gl-seg__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-seg__text { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; font: 650 14px/1 var(--font-sans); color: var(--ink-soft); white-space: nowrap; transition: color var(--gl-t-hover); }
@media (max-width: 560px) { .gl-seg__text { padding: 0 8px; font-size: 13px; } }
.gl-seg--sm .gl-seg__text { height: 32px; padding: 0 12px; font-size: 13px; }
.gl-seg__input:checked + .gl-seg__text { color: var(--ink); }
.gl-seg__input:focus-visible + .gl-seg__text { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) { .gl-seg__opt:hover .gl-seg__text { color: var(--ink); } }
.gl-seg__opt:active .gl-seg__text { transform: translateY(1px); }

/* ==========================================================================
   Card — glazed porcelain. Interactive cards polish: lift 3px, a broad sheen
   crosses once, the shadow deepens.
   ========================================================================== */
.gl-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--porcelain); color: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md);
  text-decoration: none; text-align: left; font: inherit;
}
.gl-card--flat { box-shadow: inset 0 1px 0 var(--gl-glaze); }
.gl-card--lg { padding: var(--space-8); border-radius: var(--radius-xl); }
.gl-card--mint, .gl-card--ice, .gl-card--blush { border-color: transparent; box-shadow: inset 0 1px 0 var(--gl-glaze); }
.gl-card--mint { background: var(--mint); }
.gl-card--ice { background: var(--ice); }
.gl-card--blush { background: var(--blush); }
.gl-card--mint .gl-overline, .gl-card--ice .gl-overline, .gl-card--blush .gl-overline { color: var(--ink); opacity: .78; }
.gl-card__head { display: flex; flex-direction: column; gap: 6px; }
.gl-card__title { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -.01em; }
.gl-card__body { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 24px; }
.gl-card--mint .gl-card__body, .gl-card--ice .gl-card__body, .gl-card--blush .gl-card__body { color: var(--ink); }
.gl-card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.gl-card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gl-card--polish { cursor: pointer; transition: transform var(--gl-t-glide) var(--gl-enamel), box-shadow var(--gl-t-glide) var(--gl-enamel), border-color var(--gl-t-hover); }
.gl-card--polish::after { content: ""; position: absolute; inset: -3px -5px -8px -3px; z-index: -1; border-radius: inherit; }
.gl-card__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.gl-card__sheen::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 0%, var(--gl-glint) 50%, transparent 100%);
  opacity: .55; transform: translateX(-140%) skewX(-16deg);
}
[data-theme="dark"] .gl-card__sheen::before { opacity: .5; }
@media (hover: hover) {
  .gl-card--polish:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
  .gl-card--polish:hover .gl-card__sheen::before { transform: translateX(300%) skewX(-16deg); transition: transform 900ms var(--gl-enamel); }
}
.gl-card--polish:active { transform: translateY(0); transition-duration: var(--gl-t-press); }

/* ---------- Badge / Tag ---------- */
.gl-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 9999px;
  background: var(--_tint, var(--porcelain-sunk)); color: var(--ink);
  font: 700 12px/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap;
}
.gl-badge.gl-tone-neutral { box-shadow: inset 0 0 0 1px var(--line); }
.gl-badge.gl-tone-coral { background: var(--blush); color: var(--ink); }
.gl-badge--solid.gl-tone-primary { background: var(--primary); color: var(--on-primary); }
.gl-badge--solid.gl-tone-coral { background: var(--coral); color: var(--on-coral); }
.gl-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_deep, var(--ink-soft)); }
.gl-badge.gl-tone-mint .gl-badge__dot { background: var(--mint-strong); }
.gl-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; margin: 0;
  border-radius: 10px; border: 1px solid var(--line); background: var(--porcelain); color: var(--ink);
  font: 600 13px/1 var(--font-sans); white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 1px 0 var(--gl-edge);
}
.gl-tag.gl-tone-mint, .gl-tag.gl-tone-ice, .gl-tag.gl-tone-blush { background: var(--_tint); border-color: transparent; }
button.gl-tag { cursor: pointer; transition: transform var(--gl-t-release) var(--gl-release), background-color var(--gl-t-hover), border-color var(--gl-t-hover); }
@media (hover: hover) { button.gl-tag:hover { border-color: var(--ink-soft); } }
button.gl-tag:active { transform: translateY(1px); }
.gl-tag[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 1px 0 var(--gl-edge-primary); }
.gl-tag-wrap { display: inline-flex; align-items: center; position: relative; }
.gl-tag-wrap .gl-tag { padding-right: 34px; }
.gl-tag__x { position: absolute; right: 4px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.gl-tag__x:hover { background: var(--porcelain-sunk); color: var(--ink); }

.gl-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.gl-star { position: relative; display: inline-block; line-height: 0; }
.gl-star svg { display: block; fill: color-mix(in srgb, var(--gold) 22%, transparent); }
.gl-star::after { content: ""; position: absolute; inset: 0; width: var(--_f); overflow: hidden; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0 / auto 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0 / auto 100% no-repeat; }

/* ---------- Avatar ---------- */
.gl-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  width: 44px; height: 44px; color: var(--ink); font: 750 15px/1 var(--font-sans); letter-spacing: .02em;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75) 0 14%, transparent 52%), var(--_tint, var(--mint));
  box-shadow: inset 0 0 0 1px rgba(14, 43, 51, .06), 0 0 0 2px var(--porcelain), var(--shadow-sm);
}
[data-theme="dark"] .gl-avatar { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.16) 0 14%, transparent 52%), var(--_tint, var(--mint)); }
.gl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gl-avatar--sm { width: 34px; height: 34px; font-size: 12px; }
.gl-avatar--lg { width: 60px; height: 60px; font-size: 20px; }
.gl-avatar--xl { width: 84px; height: 84px; font-size: 28px; font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: 0; }
.gl-avatar__status { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 10px; min-height: 10px; border-radius: 50%; border: 2px solid var(--porcelain); background: var(--ink-soft); }
.gl-avatar__status--available { background: var(--mint-strong); }
.gl-avstack { display: inline-flex; }
.gl-avstack > .gl-avatar + .gl-avatar { margin-left: -10px; }
.gl-avstack__more { background: var(--porcelain-sunk); color: var(--ink-soft); font-size: 12px; }

/* ---------- Tooltip ---------- */
.gl-tip-wrap { display: inline-flex; }
.gl-tip-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-soft); cursor: help; }
.gl-tip-dot:hover { color: var(--ink); background: var(--gl-hover-tint); }
.gl-tip {
  position: fixed; z-index: 1000; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px));
  padding: 10px 14px; border-radius: 14px;
  background: var(--porcelain); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font: 500 14px/20px var(--font-sans); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 140ms var(--gl-exit), transform 140ms var(--gl-exit), visibility 0s 140ms;
}
.gl-tip[data-side="bottom"] { transform: translateY(-4px); }
.gl-tip[data-side="left"] { transform: translateX(4px); }
.gl-tip[data-side="right"] { transform: translateX(-4px); }
.gl-tip.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--gl-enamel), transform 260ms var(--gl-enamel), visibility 0s; }
.gl-tip__title { display: block; font-weight: 700; margin-bottom: 2px; }
.gl-tip__arrow { position: absolute; width: 12px; height: 12px; background: var(--porcelain); border: 1px solid var(--line); border-width: 0 1px 1px 0; }
.gl-tip[data-side="top"] .gl-tip__arrow { bottom: -7px; margin-left: -6px; transform: rotate(45deg); }
.gl-tip[data-side="bottom"] .gl-tip__arrow { top: -7px; margin-left: -6px; transform: rotate(225deg); }
.gl-tip[data-side="left"] .gl-tip__arrow { right: -7px; margin-top: -6px; transform: rotate(-45deg); }
.gl-tip[data-side="right"] .gl-tip__arrow { left: -7px; margin-top: -6px; transform: rotate(135deg); }

/* ---------- Toast (capped stack) ---------- */
.gl-toasts { position: fixed; z-index: 900; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.gl-toasts--inline { position: static; width: 100%; max-width: 400px; align-items: stretch; }
@media (max-width: 560px) { .gl-toasts:not(.gl-toasts--inline) { right: 16px; left: 16px; bottom: 16px; width: auto; align-items: stretch; } }
.gl-toasts__more { align-self: center; padding: 4px 12px; border-radius: 9999px; background: var(--porcelain); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font: 700 12px/18px var(--font-sans); color: var(--ink-soft); pointer-events: auto; font-variant-numeric: tabular-nums; }
.gl-toast {
  position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 12px 16px 14px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--porcelain); color: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-lg); pointer-events: auto;
  animation: gl-rise 340ms var(--gl-enamel) backwards;
}
.gl-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--gl-exit), transform 200ms var(--gl-exit); }
.gl-toast__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--ink); }
.gl-toast--info .gl-toast__icon { background: var(--ice); }
.gl-toast--calm .gl-toast__icon { background: var(--blush); }
.gl-toast--danger .gl-toast__icon { background: var(--coral); color: var(--on-coral); }
.gl-toast--primary .gl-toast__icon { background: var(--primary); color: var(--on-primary); }
.gl-toast__text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; min-width: 0; font-size: 14px; line-height: 20px; }
.gl-toast__text b { font-size: 15px; line-height: 21px; }
.gl-toast__text span { color: var(--ink-soft); }
.gl-toast__action { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--primary); font: 700 14px/20px var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gl-toast__x { margin: -4px -2px 0 0; }
.gl-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); opacity: .55; transform-origin: 0 50%; transform: scaleX(0); }
.gl-toast.is-timed .gl-toast__timer { animation: gl-timer var(--_ms, 5s) linear backwards; }
.gl-toast.is-paused .gl-toast__timer { animation-play-state: paused; }
@keyframes gl-timer { from { transform: scaleX(1); } }

/* ---------- Modal / Sheet ---------- */
.gl-modal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px; }
.gl-modal[hidden] { display: none; }
.gl-modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: gl-fade 260ms var(--gl-enamel) backwards; }
.gl-modal__panel {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: var(--space-8); border-radius: var(--radius-xl);
  background: var(--porcelain); color: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-lg);
  animation: gl-rise var(--gl-t-glide) var(--gl-enamel) backwards;
}
.gl-modal__panel:focus { outline: none; }
.gl-modal__x { position: absolute; top: 18px; right: 18px; }
.gl-modal__title { margin: 6px 40px 10px 0; font: 750 26px/32px var(--font-sans); letter-spacing: -.02em; }
.gl-modal__body { color: var(--ink-soft); }
.gl-modal__body p { margin: 0 0 12px; }
.gl-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: var(--space-6); }
.gl-modal.is-leaving .gl-modal__scrim { opacity: 0; transition: opacity 220ms var(--gl-exit); }
.gl-modal.is-leaving .gl-modal__panel { opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--gl-exit), transform 220ms var(--gl-exit); }
.gl-modal--sheet { place-items: end center; padding: 0; }
.gl-modal--sheet .gl-modal__panel { width: min(640px, 100%); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-top: 28px; max-height: 88vh; animation-name: gl-sheet; animation-duration: 420ms; }
.gl-modal--sheet.is-leaving .gl-modal__panel { transform: translateY(100%); transition-duration: 260ms; }
.gl-modal__grip { position: absolute; top: 10px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); }
@keyframes gl-sheet { from { transform: translateY(100%); } }
@media (max-width: 560px) { .gl-modal__panel { padding: var(--space-6); } .gl-modal__actions > * { flex: 1; } }

/* ==========================================================================
   Progress — enamel bar · smile-arc meter · booking steps
   ========================================================================== */
.gl-progress { display: flex; flex-direction: column; gap: 8px; }
.gl-progress__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.gl-progress__label { font-weight: 600; }
.gl-progress__value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.gl-progress__track { position: relative; display: block; height: 12px; border-radius: 9999px; background: var(--porcelain-sunk); border: 1px solid var(--gl-well-edge); box-shadow: var(--shadow-inset); overflow: hidden; }
.gl-progress--sm .gl-progress__track { height: 8px; }
.gl-progress__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--gl-t-arc) var(--gl-enamel); }
.gl-progress__fill::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); }
.gl-progress.is-done .gl-progress__fill { background: var(--mint-strong); }

.gl-arc { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 240px; max-width: 100%; }
.gl-arc--sm { width: 170px; }
.gl-arc--lg { width: 320px; }
.gl-arc__box { position: relative; width: 100%; aspect-ratio: 200 / 72; }
.gl-arc__art { position: absolute; inset: 0; }
.gl-arc__art svg { display: block; overflow: visible; }
.gl-arc__track { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 18%, var(--porcelain-sunk)); stroke-width: 12; stroke-linecap: round; }
.gl-arc__fill { fill: none; stroke: var(--primary); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset var(--gl-t-arc) var(--gl-enamel); }
.gl-arc.is-done .gl-arc__fill { stroke: var(--mint-strong); }
.gl-arc__bead { transform-box: view-box; transition: transform var(--gl-t-arc) var(--gl-enamel); }
.gl-arc__pearl { fill: var(--porcelain); stroke: var(--primary); stroke-width: 2.5; }
.gl-arc__shine { fill: #fff; opacity: .9; }
[data-theme="dark"] .gl-arc__pearl { fill: #e8f3f1; }
.gl-arc__track { filter: none; }
.gl-arc__readout { position: absolute; left: 0; right: 0; top: 4%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gl-arc__readout .gl-progress__value { font: 750 28px/32px var(--font-sans); letter-spacing: -.02em; color: var(--ink); }
.gl-arc--sm .gl-arc__readout .gl-progress__value { font-size: 21px; line-height: 26px; }
.gl-arc__caption { font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 600; }
.gl-arc__label { font: 650 14px/20px var(--font-sans); color: var(--ink-soft); }

.gl-steps { --_n: 5; position: relative; }
.gl-steps__list { position: relative; display: grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.gl-steps__rail { position: absolute; top: 17px; left: calc(50% / var(--_n)); right: calc(50% / var(--_n)); height: 4px; border-radius: 2px; background: var(--porcelain-sunk); box-shadow: var(--shadow-inset); overflow: hidden; }
.gl-steps__fill { position: absolute; inset: 0; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--gl-t-arc) var(--gl-enamel); }
.gl-steps__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.gl-steps__dot {
  position: relative; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  background: var(--porcelain); border: 1px solid var(--line); color: var(--ink-soft);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge);
  font: 750 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  transition: background-color var(--gl-t-glide), color var(--gl-t-glide), border-color var(--gl-t-glide), transform var(--gl-t-release) var(--gl-release);
}
.gl-steps__tick { position: absolute; opacity: 0; transform: scale(.4); transition: opacity 120ms, transform var(--gl-t-release) var(--gl-release); }
.gl-steps__n { transition: opacity 120ms; }
.gl-steps__item.is-current .gl-steps__dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 2px 0 var(--gl-edge-primary), 0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent); }
.gl-steps__item.is-done .gl-steps__dot { background: var(--mint); border-color: transparent; color: var(--ink); }
.gl-steps__item.is-done .gl-steps__tick { opacity: 1; transform: none; }
.gl-steps__item.is-done .gl-steps__n { opacity: 0; }
.gl-steps__label { font: 650 13px/18px var(--font-sans); color: var(--ink-soft); overflow-wrap: anywhere; }
.gl-steps__item.is-current .gl-steps__label { color: var(--ink); }
@media (max-width: 560px) { .gl-steps__label { font-size: 11px; line-height: 15px; } }

/* ---------- Accordion / FAQ ---------- */
.gl-acc { display: flex; flex-direction: column; gap: 10px; }
.gl-acc__item { border-radius: var(--radius-lg); background: var(--porcelain); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-sm); transition: box-shadow var(--gl-t-hover), border-color var(--gl-t-hover); }
.gl-acc__item.is-open { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md); }
.gl-acc__h { margin: 0; }
.gl-acc__btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px 14px 22px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 650 17px/24px var(--font-sans); border-radius: var(--radius-lg); }
.gl-acc__btn:focus-visible { outline-offset: -2px; }
.gl-acc__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); }
.gl-acc__q { flex: 1; }
.gl-acc__plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--porcelain-sunk); transition: transform var(--gl-t-glide) var(--gl-enamel), background-color var(--gl-t-hover); }
.gl-acc__plus::before, .gl-acc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); }
.gl-acc__plus::after { transform: rotate(90deg); }
.gl-acc__btn[aria-expanded="true"] .gl-acc__plus { transform: rotate(135deg); background: var(--mint); }
@media (hover: hover) { .gl-acc__btn:hover .gl-acc__plus { background: var(--mint); } }
.gl-acc__inner { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 25px; animation: gl-rise 320ms var(--gl-enamel) backwards; }
.gl-acc__inner p { margin: 0 0 10px; }
.gl-acc__inner p:last-child { margin: 0; }

/* ---------- Header / Nav ---------- */
.gl-header { position: relative; z-index: 50; background: color-mix(in srgb, var(--page) 94%, transparent); border-bottom: 1px solid var(--line); }
.gl-header--sticky { position: sticky; top: 0; }
.gl-header__bar { display: flex; align-items: center; gap: var(--space-6); max-width: 1200px; margin: 0 auto; padding: 14px var(--space-8); }
.gl-header__nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.gl-header__link { position: relative; white-space: nowrap; padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font: 600 15px/20px var(--font-sans); transition: color var(--gl-t-hover), background-color var(--gl-t-hover); }
.gl-header__link:hover { color: var(--ink); background: var(--gl-hover-tint); }
.gl-header__link[aria-current="page"] { color: var(--ink); }
.gl-header__link[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--primary); }
.gl-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.gl-header__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font: 700 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 8px 6px; border-radius: 10px; }
.gl-header__phone .gl-ico { color: var(--primary); }
.gl-header__phone:hover { background: var(--gl-hover-tint); }
.gl-header__burger { display: none; }
.gl-header__menu { border-top: 1px solid var(--line); padding: var(--space-4); background: var(--page); animation: gl-drop 320ms var(--gl-enamel) backwards; }
.gl-header__menu nav { display: flex; flex-direction: column; }
.gl-header__mlink { display: flex; align-items: center; min-height: 52px; padding: 0 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 650 18px/24px var(--font-sans); border-bottom: 1px solid var(--line); }
.gl-header__mlink:last-child { border-bottom: 0; }
.gl-header__mlink[aria-current="page"] { color: var(--primary); }
.gl-header__mcta { display: grid; gap: 12px; margin-top: var(--space-4); }
@keyframes gl-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1080px) { .gl-header__nav { display: none; } .gl-header__burger { display: inline-flex; } .gl-header__actions { margin-left: auto; } }
@media (max-width: 760px) { .gl-header__phone span { display: none; } }
@media (max-width: 560px) {
  .gl-header__bar { padding: 10px var(--space-4); gap: var(--space-3); }
  .gl-header__actions .gl-btn { display: none; }
  .gl-header .gl-logo__words small { display: none; }
}
@media (min-width: 1081px) { .gl-header__menu { display: none; } }

/* ---------- Footer ---------- */
.gl-footer { background: var(--porcelain-sunk); border-top: 1px solid var(--line); color: var(--ink); }
.gl-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-8); max-width: 1200px; margin: 0 auto; padding: var(--space-12) var(--space-8) var(--space-8); }
.gl-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.gl-footer__brand .gl-logo { margin-bottom: 6px; }
.gl-footer__addr { display: flex; gap: 10px; margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-soft); }
.gl-footer__addr .gl-ico { margin-top: 3px; color: var(--primary); }
.gl-footer__addr a { color: var(--ink); font-weight: 650; text-decoration: none; }
.gl-footer__addr a:hover { text-decoration: underline; }
.gl-footer__col h4 { margin: 4px 0 14px; }
.gl-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gl-footer__col a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 23px; }
.gl-footer__col a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.gl-footer__trust { display: flex; flex-wrap: wrap; gap: 10px 20px; max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-8); border-top: 1px solid var(--line); }
.gl-footer__seal { display: inline-flex; align-items: center; gap: 8px; font: 650 13px/18px var(--font-sans); color: var(--ink-soft); }
.gl-footer__seal .gl-ico { color: var(--mint-strong); }
.gl-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-8) var(--space-8); font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.gl-footer__legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.gl-footer__legal a { color: var(--ink-soft); }
@media (max-width: 860px) { .gl-footer__grid { grid-template-columns: 1fr 1fr; } .gl-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .gl-footer__grid, .gl-footer__trust, .gl-footer__legal { padding-left: var(--space-4); padding-right: var(--space-4); } .gl-footer__grid { gap: var(--space-6); } }

/* ==========================================================================
   TreatmentCard — a porcelain card that polishes to a shine
   ========================================================================== */
.gl-treat { padding: 0; height: 100%; }
.gl-treat__inner { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: var(--space-6); position: relative; z-index: 1; }
.gl-treat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.gl-treat__icon {
  position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--ink); overflow: hidden;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.8) 0 12%, transparent 50%), var(--_tint);
  box-shadow: inset 0 -3px 0 rgba(14, 43, 51, .06);
  transition: transform var(--gl-t-glide) var(--gl-enamel);
}
[data-theme="dark"] .gl-treat__icon { background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.14) 0 12%, transparent 50%), var(--_tint); }
.gl-treat__icon.gl-tone-coral { background: var(--blush); }
.gl-treat__title { margin: 0; font: 700 20px/27px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.gl-treat__text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 24px; }
.gl-treat__meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 600; }
.gl-treat__meta li { display: inline-flex; align-items: center; gap: 5px; }
.gl-treat__meta .gl-ico { color: var(--mint-strong); }
.gl-treat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.gl-treat__price { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; }
.gl-treat__from { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.gl-treat__price b { font-size: 24px; line-height: 30px; color: var(--ink); }
.gl-treat__mo { grid-column: 1 / -1; font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-treat__go { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--porcelain-sunk); color: var(--ink); border: 1px solid var(--line); transition: background-color var(--gl-t-hover), color var(--gl-t-hover), transform var(--gl-t-glide) var(--gl-enamel); }
@media (hover: hover) {
  .gl-treat:hover .gl-treat__go { background: var(--primary); color: var(--on-primary); border-color: transparent; transform: translateX(3px); }
  .gl-treat:hover .gl-treat__icon { transform: translateY(-2px); }
}

/* ==========================================================================
   PriceList
   ========================================================================== */
.gl-prices { background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-sm); overflow: hidden; }
.gl-prices__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.gl-prices__table thead th { padding: 14px 20px; text-align: left; font: 700 12px/16px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); background: var(--porcelain-sunk); border-bottom: 1px solid var(--line); }
.gl-prices__table td, .gl-prices__table tbody th { padding: 13px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.gl-prices__table tbody tr:last-child > * { border-bottom: 0; }
.gl-prices__table td.gl-prices__nhs, .gl-prices__table td.gl-prices__pvt, .gl-prices__table thead .gl-prices__nhs, .gl-prices__table thead .gl-prices__pvt { text-align: right; width: 22%; white-space: nowrap; }
.gl-prices__group th { padding: 18px 20px 8px !important; font: 750 15px/20px var(--font-sans) !important; color: var(--ink); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--porcelain-sunk) 45%, var(--porcelain)); }
.gl-prices__group th .gl-ico { vertical-align: -3px; margin-right: 8px; color: var(--primary); }
.gl-prices__name { display: block; font-weight: 600; color: var(--ink); }
.gl-prices__note { display: block; font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.gl-prices__amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.gl-prices__amt small { font-weight: 600; color: var(--ink-soft); font-size: 12px; }
.gl-prices__na { color: var(--ink-soft); }
.gl-prices--private .gl-prices__nhs, .gl-prices--nhs .gl-prices__pvt { display: none; }
.gl-prices__table tbody tr:not(.gl-prices__group) { transition: background-color var(--gl-t-hover); }
@media (hover: hover) { .gl-prices__table tbody tr:not(.gl-prices__group):hover { background: var(--gl-hover-tint); } }
.gl-prices__foot { margin: 0; padding: 12px 20px 16px; font-size: 13px; line-height: 19px; color: var(--ink-soft); border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .gl-prices__table td, .gl-prices__table tbody th, .gl-prices__table thead th { padding-left: 14px; padding-right: 14px; }
  .gl-prices--both .gl-prices__table td.gl-prices__nhs, .gl-prices--both .gl-prices__table td.gl-prices__pvt { width: auto; }
}

/* ==========================================================================
   BeforeAfter — the divider glides; drag it, click to ease to a point, or use arrows
   ========================================================================== */
.gl-smileart { width: 100%; height: 100%; line-height: 0; }
.gl-smileart svg { display: block; width: 100%; height: 100%; }
.gl-ba { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gl-ba__stage {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-xl);
  background: var(--porcelain-sunk); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate;
}
.gl-ba__after, .gl-ba__inner { position: absolute; inset: 0; }
.gl-ba__after img, .gl-ba__inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gl-ba__clip { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.gl-ba__handle { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; outline: none; }
.gl-ba__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #ffffff; box-shadow: 0 0 0 1px rgba(14, 43, 51, .12); }
.gl-ba__knob {
  position: absolute; top: 50%; left: -26px; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 0; color: #0b4f5c;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 24%, transparent 62%), #f4f8f7;
  border: 1px solid rgba(14, 43, 51, .12);
  box-shadow: inset 0 -3px 0 rgba(14, 43, 51, .08), 0 6px 18px -4px rgba(14, 43, 51, .4);
  transition: transform var(--gl-t-release) var(--gl-release);
}
.gl-ba__stage:hover .gl-ba__knob { transform: scale(1.06); }
.gl-ba__stage.is-dragging .gl-ba__knob { transform: scale(.94); transition-duration: var(--gl-t-press); }
.gl-ba__handle:focus-visible .gl-ba__knob { outline: 3px solid var(--focus); outline-offset: 3px; }
.gl-ba__stage.is-gliding .gl-ba__clip, .gl-ba__stage.is-gliding .gl-ba__inner, .gl-ba__stage.is-gliding .gl-ba__handle { transition: transform var(--gl-t-arc) var(--gl-enamel); }
.gl-ba__tag { position: absolute; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 9999px; font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: #0e2b33; transition: opacity var(--gl-t-hover); pointer-events: none; }
.gl-ba__tag--before { left: 16px; }
.gl-ba__tag--after { right: 16px; background: #0b4f5c; color: #ffffff; }
.gl-ba__tag.is-hidden { opacity: 0; }
.gl-ba__cap { font-size: 14px; line-height: 21px; color: var(--ink-soft); }

/* ==========================================================================
   BookingCalendar
   ========================================================================== */
.gl-cal { container-type: inline-size; }
.gl-cal__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.gl-cal__pane { background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-sm); padding: var(--space-6); min-width: 0; }
.gl-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gl-cal__month { margin: 0; font: 750 19px/26px var(--font-sans); letter-spacing: -.01em; }
.gl-cal__navbtns { display: flex; gap: 8px; }
.gl-cal__dow, .gl-cal__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gl-cal__dow { margin-bottom: 6px; }
.gl-cal__dow span { text-align: center; font: 700 12px/20px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.gl-cal__grid { display: grid; gap: 6px; }
.gl-cal__day {
  position: relative; aspect-ratio: 1; min-height: 38px; max-height: 52px; width: 100%; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-soft);
  font: 650 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: default;
  transition: transform var(--gl-t-release) var(--gl-release), background-color var(--gl-t-hover), border-color var(--gl-t-hover), box-shadow var(--gl-t-release);
}
.gl-cal__day:disabled { opacity: .55; }
.gl-cal__day.is-out { visibility: hidden; }
.gl-cal__day.is-free { cursor: pointer; color: var(--ink); background: var(--porcelain); border-color: var(--line); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge); opacity: 1; }
.gl-cal__day.is-free::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--mint-strong); }
@media (hover: hover) { .gl-cal__day.is-free:hover { transform: translateY(-1px); border-color: var(--primary); } }
.gl-cal__day.is-free:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 0 0 var(--gl-edge); }
.gl-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--ice), 0 2px 0 var(--gl-edge); }
.gl-cal__day.is-today:not(.is-free) { box-shadow: inset 0 0 0 2px var(--ice); }
.gl-cal__day.is-selected { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 2px 0 var(--gl-edge-primary); }
.gl-cal__day.is-selected::after { background: var(--on-primary); }
.gl-cal__day:focus-visible { outline-offset: 2px; }
.gl-cal__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 600; }
.gl-cal__legend span { display: inline-flex; align-items: center; gap: 7px; }
.gl-cal__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-strong); }
.gl-cal__ring { width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--ice); background: var(--porcelain); border: 1px solid var(--line); }
.gl-cal__slothead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 26px; }
.gl-cal__slottitle { font: 750 19px/26px var(--font-sans); letter-spacing: -.01em; }
.gl-cal__count { font: 700 13px/18px var(--font-sans); color: var(--mint-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-cal__slotbody { display: flex; flex-direction: column; gap: 16px; min-height: 236px; }
.gl-cal__part { display: flex; flex-direction: column; gap: 8px; animation: gl-rise 300ms var(--gl-enamel) backwards; }
.gl-cal__part:nth-child(2) { animation-delay: 50ms; }
.gl-cal__part:nth-child(3) { animation-delay: 100ms; }
.gl-cal__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.gl-cal__time {
  position: relative; isolation: isolate; height: 42px; padding: 0 8px; margin: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--porcelain); color: var(--ink);
  font: 650 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge);
  transition: transform var(--gl-t-release) var(--gl-release), box-shadow var(--gl-t-release) var(--gl-release), background-color var(--gl-t-hover), border-color var(--gl-t-hover);
}
.gl-cal__time::after { content: ""; position: absolute; inset: -2px -3px -5px -2px; z-index: -1; }
@media (hover: hover) { .gl-cal__time:hover { transform: translateY(-1px); border-color: var(--primary); } }
.gl-cal__time:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 0 0 var(--gl-edge); transition-duration: var(--gl-t-press); }
.gl-cal__time[aria-checked="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 2px 0 var(--gl-edge-primary); }
.gl-cal__empty { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px; border-radius: 16px; background: var(--porcelain-sunk); color: var(--ink-soft); font-size: 15px; line-height: 23px; }
.gl-cal__empty .gl-ico { color: var(--primary); margin-top: 1px; }
@container (min-width: 700px) { .gl-cal__wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
@container (max-width: 420px) { .gl-cal__pane { padding: var(--space-4); } .gl-cal__dow, .gl-cal__row, .gl-cal__grid { gap: 4px; } .gl-cal__day { border-radius: 10px; font-size: 14px; } .gl-cal__day.is-free::after { bottom: 4px; } }

/* ==========================================================================
   DentistProfile — an arched portrait, like a clinic window
   ========================================================================== */
.gl-portrait {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3.5; overflow: hidden;
  border-radius: 9999px 9999px var(--radius-lg) var(--radius-lg); color: var(--ink);
  background:
    radial-gradient(circle at 50% -36%, transparent 64%, rgba(255,255,255,.55) 64.4%, rgba(255,255,255,.55) 65.6%, transparent 66%),
    radial-gradient(circle at 50% -10%, transparent 64%, rgba(255,255,255,.4) 64.4%, rgba(255,255,255,.4) 65.4%, transparent 66%),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.7) 0 10%, transparent 48%),
    var(--_tint);
}
[data-theme="dark"] .gl-portrait { background: radial-gradient(circle at 50% -36%, transparent 64%, rgba(255,255,255,.12) 64.4%, rgba(255,255,255,.12) 65.6%, transparent 66%), radial-gradient(circle at 50% -10%, transparent 64%, rgba(255,255,255,.08) 64.4%, rgba(255,255,255,.08) 65.4%, transparent 66%), radial-gradient(circle at 30% 22%, rgba(255,255,255,.14) 0 10%, transparent 48%), var(--_tint); }
.gl-portrait__init { font: italic 600 72px/1 var(--font-serif); letter-spacing: -.01em; transform: translateY(6%); }
.gl-portrait--sm { width: 56px; height: 62px; aspect-ratio: auto; flex: none; border-radius: 9999px 9999px 12px 12px; }
.gl-portrait--sm .gl-portrait__init { font-size: 26px; }
.gl-dentist { display: flex; flex-direction: column; background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md); overflow: hidden; height: 100%; }
.gl-dentist__photo { position: relative; padding: 16px 16px 0; }
.gl-dentist__photo img { width: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; border-radius: 9999px 9999px var(--radius-lg) var(--radius-lg); display: block; }
.gl-dentist__calm { position: absolute; left: 28px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 9999px; background: var(--porcelain); color: var(--ink); font: 700 12px/1 var(--font-sans); box-shadow: var(--shadow-sm); }
.gl-dentist__calm .gl-ico { color: var(--coral); }
.gl-dentist__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.gl-dentist__name { margin: 0; font: 750 20px/26px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.gl-dentist__role { margin: -4px 0 0; color: var(--primary); font: 650 14px/20px var(--font-sans); }
.gl-dentist__cred { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 19px; }
.gl-dentist__bio { margin: 2px 0; color: var(--ink-soft); font-size: 15px; line-height: 23px; }
.gl-dentist__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-dentist__tags .gl-tag { height: 28px; padding: 0 10px; font-size: 12px; }
.gl-dentist__facts { display: grid; gap: 6px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.gl-dentist__facts div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.gl-dentist__facts dt { color: var(--ink-soft); font-weight: 600; }
.gl-dentist__facts dd { margin: 0; font-weight: 650; text-align: right; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.gl-dentist__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.gl-dentist__next { display: inline-flex; align-items: center; gap: 6px; font: 650 13px/18px var(--font-sans); color: var(--mint-strong); }
/* selectable row (booking flow) */
.gl-dentist--pick { position: relative; flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; cursor: pointer; height: auto; overflow: visible; box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge), var(--shadow-sm); transition: transform var(--gl-t-release) var(--gl-release), box-shadow var(--gl-t-release) var(--gl-release), border-color var(--gl-t-hover), background-color var(--gl-t-hover); }
.gl-dentist--pick::after { content: ""; position: absolute; inset: -2px -4px -6px -2px; z-index: -1; }
@media (hover: hover) { .gl-dentist--pick:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 3px 0 var(--gl-edge), var(--shadow-md); } }
.gl-dentist--pick:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gl-glaze), 0 0 0 var(--gl-edge), var(--shadow-sm); transition-duration: var(--gl-t-press); }
.gl-dentist__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-dentist__pickbody { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gl-dentist--pick .gl-dentist__name { font-size: 17px; line-height: 23px; }
.gl-dentist--pick .gl-dentist__role { margin: 0; font-size: 13px; line-height: 19px; }
.gl-dentist--pick .gl-dentist__next { margin-top: 2px; }
.gl-dentist--pick .gl-badge { align-self: flex-start; margin-top: 6px; }
.gl-dentist--pick:has(.gl-dentist__input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--mint) 38%, var(--porcelain)); box-shadow: inset 0 0 0 1px var(--primary), 0 2px 0 var(--gl-edge), var(--shadow-sm); }
.gl-dentist--pick .gl-dentist__input:checked ~ .gl-radio__ring { border-color: var(--primary); border-width: 2px; }
.gl-dentist--pick .gl-dentist__input:checked ~ .gl-radio__ring .gl-radio__pearl { opacity: 1; transform: none; }
.gl-dentist--pick .gl-dentist__input:focus-visible ~ .gl-radio__ring { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ==========================================================================
   CareToggle — NHS / private: an enamel slider in two halves
   ========================================================================== */
.gl-care { display: flex; flex-direction: column; gap: 12px; }
.gl-care__track { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 20px; background: var(--porcelain-sunk); border: 1px solid var(--gl-well-edge); box-shadow: var(--shadow-inset); }
.gl-care__thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 15px;
  background: var(--porcelain); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--gl-glaze), 0 2px 0 var(--gl-edge), 0 6px 14px -6px var(--gl-drop);
  transition: transform var(--gl-t-glide) var(--gl-enamel), background-color var(--gl-t-glide);
}
.gl-care__thumb::before { content: ""; position: absolute; left: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint-strong); transition: background-color var(--gl-t-glide); }
.gl-care[data-care="private"] .gl-care__thumb { transform: translateX(100%); }
.gl-care[data-care="private"] .gl-care__thumb::before { background: var(--primary); }
[data-theme="dark"] .gl-care__thumb { background: #1a3a44; }
.gl-care__opt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 34px; cursor: pointer; border-radius: 15px; min-width: 0; }
.gl-care__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gl-care__label { font: 750 17px/22px var(--font-sans); color: var(--ink-soft); transition: color var(--gl-t-hover); }
.gl-care__hint { font: 600 13px/18px var(--font-sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gl-care__opt:has(.gl-care__input:checked) .gl-care__label { color: var(--ink); }
.gl-care__opt:has(.gl-care__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -1px; }
.gl-care__note { margin: 0; min-height: 46px; font-size: 14px; line-height: 23px; color: var(--ink-soft); }
.gl-care__note.is-in { animation: gl-fade 320ms var(--gl-enamel) backwards; }

/* ==========================================================================
   FinanceCalculator
   ========================================================================== */
.gl-fin { container-type: inline-size; }
.gl-fin__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.gl-fin__inputs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.gl-fin__result { display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--ice); color: var(--ink); min-width: 0; }
.gl-fin__result .gl-overline { color: var(--ink); opacity: .8; }
.gl-fin__big { display: flex; align-items: baseline; gap: 6px; }
.gl-fin__mo { font-size: 44px; line-height: 50px; color: var(--ink); }
.gl-fin__per { font-weight: 650; color: var(--ink); opacity: .8; }
.gl-fin__rate { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 9999px; font: 700 12px/1 var(--font-sans); letter-spacing: .03em; background: var(--porcelain); color: var(--ink); }
.gl-fin__rate.gl-tone-mint { background: var(--mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint-strong) 30%, transparent); }
.gl-fin__rows { display: grid; gap: 7px; margin: 6px 0 8px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 14px; line-height: 20px; }
.gl-fin__rows div { display: flex; justify-content: space-between; gap: 12px; }
.gl-fin__rows dt { color: var(--ink); opacity: .82; }
.gl-fin__rows dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.gl-fin__total { padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.gl-fin__total dt { opacity: 1; font-weight: 700; }
.gl-fin__small { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
@container (min-width: 600px) { .gl-fin__wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }

/* ==========================================================================
   Reviews
   ========================================================================== */
.gl-review {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: var(--space-6);
  background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-sm); min-width: 0;
}
.gl-review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gl-review__date { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.gl-review__hl { margin: 0; font: italic 500 25px/30px var(--font-serif); color: var(--primary); letter-spacing: -.005em; text-wrap: balance; }
.gl-review__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-soft); flex: 1; }
.gl-review__by { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.gl-review__by b { display: block; font-size: 14px; line-height: 20px; }
.gl-review__by small { display: block; font-size: 12px; line-height: 17px; color: var(--ink-soft); font-weight: 600; }
.gl-rsum { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.gl-rsum__score { display: flex; align-items: center; gap: 14px; }
.gl-rsum__score > b { font-size: 52px; line-height: 56px; }
.gl-rsum__score > span { display: flex; flex-direction: column; gap: 4px; }
.gl-rsum__score small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.gl-rsum__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; min-width: 200px; }
.gl-rsum__bars li { display: grid; grid-template-columns: 26px 1fr 36px; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-rsum__track { height: 6px; border-radius: 3px; background: var(--porcelain-sunk); overflow: hidden; }
.gl-rsum__fill { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; }
.gl-rsum__pct { text-align: right; }
.gl-reviews { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.gl-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gl-reviews__nav { display: flex; gap: 10px; }
.gl-reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: -4px -4px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.gl-reviews__track > * { scroll-snap-align: start; }
.gl-reviews__track:focus-visible { outline-offset: 2px; border-radius: 12px; }
@media (max-width: 860px) { .gl-reviews__track { grid-auto-columns: minmax(270px, 78%); } }

/* ==========================================================================
   EmergencyBanner — coral, calm, unmissable
   ========================================================================== */
.gl-emerg--bar { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; padding: 9px var(--space-4); background: var(--coral); color: var(--on-coral); font-size: 14px; line-height: 20px; text-align: center; }
.gl-emerg__pulse { display: inline-grid; place-items: center; }
.gl-emerg__short { display: none; }
@media (max-width: 560px) { .gl-emerg--bar { flex-wrap: nowrap; justify-content: space-between; text-align: left; } .gl-emerg__bartext .gl-emerg__more { display: none; } .gl-emerg__short { display: inline; } }
.gl-emerg__barlink { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 9999px; background: var(--on-coral); color: var(--coral); font-weight: 750; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform var(--gl-t-release) var(--gl-release); }
.gl-emerg__barlink:hover { transform: translateY(-1px); }
.gl-emerg__barlink:focus-visible { outline-color: var(--on-coral); }
.gl-emerg--panel {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); gap: var(--space-6); align-items: start;
  padding: var(--space-8); border-radius: var(--radius-xl); background: var(--blush); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--gl-glaze);
}
.gl-emerg__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--coral); color: var(--on-coral); box-shadow: 0 3px 0 var(--gl-edge-danger); }
.gl-emerg__body .gl-overline { color: var(--coral); }
[data-theme="dark"] .gl-emerg__body .gl-overline { color: var(--coral); }
.gl-emerg__title { margin: 6px 0 8px; font: 750 26px/32px var(--font-sans); letter-spacing: -.02em; }
.gl-emerg__text { margin: 0; color: var(--ink); font-size: 16px; line-height: 25px; }
.gl-emerg__points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 22px; }
.gl-emerg__points li { display: flex; gap: 8px; }
.gl-emerg__points .gl-ico { margin-top: 3px; color: var(--ink); }
.gl-emerg__cta { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: var(--porcelain); box-shadow: var(--shadow-sm); }
.gl-emerg__slot { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.gl-emerg__slot b { font: 750 20px/26px var(--font-sans); font-variant-numeric: tabular-nums; }
.gl-emerg__after { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-soft); }
@media (max-width: 860px) { .gl-emerg--panel { grid-template-columns: auto minmax(0, 1fr); } .gl-emerg__cta { grid-column: 1 / -1; } }
@media (max-width: 560px) { .gl-emerg--panel { grid-template-columns: 1fr; padding: var(--space-6) var(--space-4); gap: var(--space-4); } .gl-emerg__icon { width: 52px; height: 52px; border-radius: 16px; } .gl-emerg__title { font-size: 23px; line-height: 29px; } }

/* ==========================================================================
   NewPatientForm
   ========================================================================== */
.gl-npf { display: flex; flex-direction: column; gap: var(--space-6); }
.gl-npf__head { display: flex; flex-direction: column; gap: 4px; }
.gl-npf__head p { margin: 0; color: var(--ink-soft); }
.gl-npf__title { margin: 0; font: 750 24px/30px var(--font-sans); letter-spacing: -.02em; }
.gl-npf__set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gl-npf__set legend { padding: 0; margin-bottom: 14px; }
.gl-npf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .gl-npf__grid { grid-template-columns: 1fr; } }
.gl-npf__calm { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--mint); font-size: 14px; line-height: 22px; animation: gl-rise 320ms var(--gl-enamel) backwards; }
.gl-npf__calm.is-anxious { background: var(--blush); }
.gl-npf__calm .gl-ico { margin-top: 2px; color: var(--coral); }
.gl-npf__errors { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--blush); color: var(--ink); font-weight: 650; font-size: 15px; line-height: 22px; }
.gl-npf__errors .gl-ico { color: var(--coral); }
.gl-npf__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gl-npf__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 600; }
.gl-npf__secure .gl-ico { color: var(--mint-strong); }
.gl-npf__done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--mint); animation: gl-rise 380ms var(--gl-enamel) backwards; }
.gl-npf__done:focus { outline: none; }
.gl-npf__done p { margin: 0; }
.gl-npf__doneicon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--mint-strong); color: var(--porcelain); }
[data-theme="dark"] .gl-npf__doneicon { color: var(--on-primary); }

/* ==========================================================================
   Breathe — the one loop: a ring that breathes in for 4s and out for 6s
   ========================================================================== */
.gl-breathe { container-type: inline-size; border-radius: var(--radius-xl); }
.gl-breathe__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center;
  padding: var(--space-8); border-radius: var(--radius-xl); background: var(--blush); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--gl-glaze);
}
.gl-breathe__visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gl-breathe__orb { position: relative; width: 236px; height: 236px; display: grid; place-items: center; }
.gl-breathe__ring { position: absolute; border-radius: 50%; inset: 0; border: 1.5px solid color-mix(in srgb, var(--coral) 30%, transparent); transform: scale(.62); animation: gl-breathe var(--gl-t-breath) var(--gl-breath) infinite; }
.gl-breathe__ring--2 { inset: 12%; border-color: color-mix(in srgb, var(--coral) 22%, transparent); background: color-mix(in srgb, var(--porcelain) 35%, transparent); animation-delay: -.25s; }
.gl-breathe__ring--1 { inset: 24%; border: 0; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.9) 0 16%, transparent 60%), var(--porcelain); box-shadow: 0 10px 30px -10px rgba(120, 50, 40, .35); animation-delay: -.5s; }
[data-theme="dark"] .gl-breathe__ring--1 { background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.18) 0 16%, transparent 60%), #5a3940; box-shadow: none; }
.gl-breathe__core { position: relative; z-index: 1; display: grid; place-items: center; width: 120px; height: 40px; }
.gl-breathe__in, .gl-breathe__out { grid-area: 1 / 1; font: italic 600 25px/1 var(--font-serif); color: var(--ink); white-space: nowrap; }
.gl-breathe__in { animation: gl-breathe-in var(--gl-t-breath) linear infinite; }
.gl-breathe__out { opacity: 0; animation: gl-breathe-out var(--gl-t-breath) linear infinite; }
.gl-breathe.is-paused .gl-breathe__ring, .gl-breathe.is-paused .gl-breathe__in, .gl-breathe.is-paused .gl-breathe__out { animation-play-state: paused; }
.gl-breathe__cue { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); opacity: .82; text-align: center; font-weight: 600; }
.gl-breathe__pause { position: static; }
.gl-breathe__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gl-breathe__body .gl-overline { color: var(--ink); opacity: .78; }
.gl-breathe__title { margin: 0; font: 750 clamp(28px, 4vw, 36px)/1.18 var(--font-sans); letter-spacing: -.02em; text-wrap: balance; }
.gl-breathe__title .gl-accent { color: var(--coral); }
[data-theme="dark"] .gl-breathe__title .gl-accent { color: var(--coral); }
.gl-breathe__text { margin: 0; font-size: 16px; line-height: 26px; }
.gl-breathe__points { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gl-breathe__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 23px; }
.gl-breathe__pi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--porcelain) 70%, transparent); }
.gl-breathe__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 8px; }
.gl-breathe__cta .gl-link { color: var(--ink); }
@container (min-width: 720px) {
  .gl-breathe__wrap { grid-template-columns: 300px minmax(0, 1fr); }
  .gl-breathe__points { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 420px) { .gl-breathe__wrap { padding: var(--space-6) var(--space-4); } .gl-breathe__orb { width: 200px; height: 200px; } }
@keyframes gl-breathe { 0% { transform: scale(.62); } 40% { transform: scale(1); } 100% { transform: scale(.62); } }
@keyframes gl-breathe-in { 0%, 34% { opacity: 1; } 40%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gl-breathe-out { 0%, 36% { opacity: 0; } 42%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---------- OpeningHours ---------- */
.gl-hours { display: flex; flex-direction: column; gap: 14px; padding: var(--space-6); background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md); }
.gl-hours__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gl-hours__title { margin: 0; font: 750 19px/26px var(--font-sans); }
.gl-hours__list { list-style: none; margin: 0; padding: 0; display: grid; }
.gl-hours__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 22px; }
.gl-hours__list li small { margin-left: 8px; font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mint-strong); }
.gl-hours__list li.is-today { background: var(--mint); font-weight: 700; }
.gl-hours__list li.is-today small { color: var(--ink); }
.gl-hours__t { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }
.gl-hours__list li.is-today .gl-hours__t { color: var(--ink); }
.gl-hours__foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.gl-hours__foot p { display: flex; gap: 10px; margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.gl-hours__foot p > .gl-ico { margin-top: 1px; color: var(--primary); }
.gl-hours__foot p .gl-ico .gl-ico, .gl-hours__foot span .gl-ico { display: inline-flex; vertical-align: -3px; color: var(--primary); }
.gl-hours__foot a { color: var(--ink); font-weight: 700; }

/* ---------- AlignerTracker ---------- */
.gl-aligner { display: flex; flex-direction: column; gap: 16px; padding: var(--space-6); background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md); }
.gl-aligner__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gl-aligner__title { margin: 2px 0 0; font: 750 19px/26px var(--font-sans); }
.gl-aligner .gl-arc { align-self: center; width: 260px; }
.gl-aligner__next { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ice); font-size: 14px; line-height: 20px; }
.gl-aligner__next .gl-ico { color: var(--ink); }
.gl-aligner__next b { font-variant-numeric: tabular-nums; }
.gl-aligner__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gl-aligner__review { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ---------- ShadeGuide ---------- */
.gl-shade { display: flex; flex-direction: column; gap: 16px; padding: var(--space-6); background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--gl-glaze), var(--shadow-md); }
.gl-shade__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.gl-shade__title { margin: 2px 0 0; font: 750 19px/26px var(--font-sans); }
.gl-shade__big { display: flex; flex-direction: column; align-items: flex-end; }
.gl-shade__big b { font-size: 28px; line-height: 32px; color: var(--primary); }
.gl-shade__big small { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.gl-shade__rail { --_n: 14; position: relative; display: grid; grid-template-columns: repeat(var(--_n), minmax(0, 1fr)); gap: 0; padding: 26px 0 4px; }
.gl-shade__tab { position: relative; height: 64px; margin: 0 2px; border-radius: 6px 6px 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 88%, #6b4a2a) 0%, var(--_c) 38%, color-mix(in srgb, var(--_c) 80%, #ffffff) 100%); box-shadow: inset 0 0 0 1px rgba(14, 43, 51, .1), inset 0 -6px 8px -6px rgba(255,255,255,.7); transition: transform var(--gl-t-glide) var(--gl-enamel); }
.gl-shade__tab.is-range { transform: translateY(-4px); }
.gl-shade__code { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 700 10px/14px var(--font-sans); color: var(--ink-soft); letter-spacing: .02em; }
.gl-shade__rail { padding-bottom: 24px; }
.gl-shade__goalmark, .gl-shade__nowmark { position: absolute; top: 0; left: 0; width: calc(100% / var(--_n)); height: 100%; pointer-events: none; transition: transform var(--gl-t-glide) var(--gl-enamel); }
.gl-shade__goalmark::after, .gl-shade__nowmark::after { content: ""; position: absolute; left: 0; right: 0; top: 17px; bottom: 27px; border-radius: 9px 9px 17px 17px; box-shadow: 0 0 0 2.5px var(--primary); }
.gl-shade__nowmark::after { box-shadow: 0 0 0 2px var(--ink-soft); border-style: dashed; }
.gl-shade__goalmark span, .gl-shade__nowmark span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 700 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--primary); }
.gl-shade__nowmark span { color: var(--ink-soft); }
.gl-shade__plan { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--mint); font-size: 14px; line-height: 21px; font-weight: 600; min-height: 45px; }
.gl-shade__small { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
@media (max-width: 560px) { .gl-shade__code { font-size: 8px; } .gl-shade__tab { height: 50px; margin: 0 1px; } }

/* ==========================================================================
   Reduced motion: no glints, no breathing, no glides; states still change
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .gl-btn__glint, .gl-card__sheen { display: none; }
  .gl-breathe__ring { transform: scale(.86); }
  .gl-breathe__out { display: none; }
  .gl-breathe__in::after { content: " slowly"; }
  .gl-spin svg { animation: none !important; }
}