/*
 * Granite Belt Medical Services. There is no build step: this file is served
 * exactly as written, so everything the site needs is here.
 *
 * COLOUR, TYPE AND SPACE ARE DIALS (mf-websites#427). The first section is
 * Dials (github.com/joops/dials), copied verbatim from _template between its
 * begin and end markers. It works out every colour, text size, space size
 * and corner from a few values called dials. "This site's dials", straight
 * after it, is the ONLY place in the file where a colour or a scale value is
 * typed.
 *
 *   - Change the look by changing a dial: --brand for the blue, --secondary
 *     for the navy, --tertiary for the navy-deep, --size-min/--size-max and
 *     --ratio-min/--ratio-max for the type scale, --space-min/--space-max for
 *     spacing, --radius-base for corners.
 *   - Everything else reads a token: --surface*, --text*, --border*, --link,
 *     --focus, the --brand-*, --secondary-* and --tertiary-* groups (and
 *     --success-* ...), --size-*, --space-*, --radius-*, --border-width-*.
 *     Never a hex, rgb(), hsl() or named colour.
 *   - The sky, the cream, the on-navy pill's deep end, the nav dividers and
 *     the two display sizes above --size-6 are patterns built from tokens,
 *     declared once with a comment in the site layer's :root, never tokens
 *     of their own. Every dial, token and pattern is in the reference for
 *     the version in the section's first line:
 *     github.com/joops/dials/blob/v0.3.0/docs/tokens.md.
 *   - Light only: color-scheme is light in the dials block.
 *   - After the dials: _template's own tokens, its Old names block, its
 *     reset, base layer and the Form controls section (all verbatim), then
 *     this site's layer. check-system.sh holds the Dials and Form controls
 *     sections to _template's copy word for word, and fails a raw colour
 *     outside the dials block.
 */

/* ═══ Dials ═══ dials:begin ═════════════════════════════════════════════
 * Dials v0.3.0, VERBATIM. Never edit anything between this marker and the
 * end marker: check-system.sh fails the site if its copy differs from
 * _template's by a word. Each marker appears once; never write either in
 * prose. Set dials in "This site's dials" below; an upgrade
 * of Dials is a template change plus a migration of every site.
 * ═══════════════════════════════════════════════════════════════════════ */
/*! Dials v0.3.0 | MIT | https://github.com/joops/dials */
/* Dials: an AI-first CSS framework. This file is dials-colour.css, then
   dials-scale.css, then the fallback for older browsers; dials-base.css is optional.
   Default theme: Hi-Fi. Load its faces with:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Michroma&family=Barlow:wght@400;700&family=Share+Tech+Mono&display=swap">
*/
/* ============================================================
   Dials: colour (dials-colour.css)
   Dials: seven colours and a few numbers, the only typed values.
   Derived: surfaces, text, lines and groups, worked out live with
   color-mix() and relative colour, in light and dark.
   Groups: .is-{group} points the ungrouped tokens at a group.
   Dials live on :root (and :host); the derived chain is declared on
   :root, [data-dials] and :host, so setting a dial on any
   [data-dials] element re-derives every token inside it.
   Needs color-mix(), light-dark() and relative colour. Don't
   register these with @property: they must resolve where they're
   used, which is what makes .is-dark bands work.
   ============================================================ */
:root, :host {
  /* ---- Colour dials: any CSS colour, preferably HSL ---- */
  --brand:     #f39c12;  /* the main colour: links, focus, primary buttons */
  --secondary: #2ec4b6;  /* a second colour: highlights and secondary actions (was --accent) */
  --success:   #3fbf55;  /* status: done, saved, live */
  --warning:   #f2c230;  /* status: check this */
  --danger:    #e0322b;  /* status: errors and destructive actions */
  --info:      #3b82c4;  /* status: neutral news */
  --grey:      hsl(42 7% 50%);  /* the hue and strength of the tint in paper and ink */

  /* ---- Number dials ---- */
  --balance: 0;              /* 1: every fill at --fill-lightness, so they carry equal weight. 0: exactly as set */
  --fill-lightness: 0.52;    /* the shared OKLCH lightness used when --balance is 1 */
  --dark-lift: 0.04;         /* how much lighter the fills are in dark */
  --tint-strength: 8%;       /* how much colour goes into a soft tint */
  --tint-vividness: 1;       /* 1-3: how saturated soft tints are, for crisper pastels */
  --text-contrast: 0;        /* 0-30: strengthens body, muted and quiet text and strong borders, for paper and ink that sit close together */
  --white-text-until: 0.179; /* fills below this luminance get white text, above it black. 0.179 gives each fill whichever contrasts more; held between 0.175 and 0.18333, where both still give 4.5:1: black needs (L + 0.05) / 0.05 >= 4.5, so L >= 0.175; white needs 1.05 / (L + 0.05) >= 4.5, so L <= 1.05 / 4.5 - 0.05 = 0.18333 */

  /* ---- Paper and ink: near-white and near-black, tinted by --grey at these OKLCH lightnesses.
     To use exact colours instead, set --paper-light, --paper-dark, --ink-light and/or
     --ink-dark (unset by default) to any colour. ---- */
  --paper-lightness: 0.922;       /* page background in light */
  --paper-dark-lightness: 0.186;  /* page background in dark */
  --ink-lightness: 0.213;         /* strongest text in light */
  --ink-dark-lightness: 0.934;    /* strongest text in dark */
}

/* Follow the visitor's light or dark setting. To force one, set
   :root { color-scheme: light; } (or dark) after dials.css. */
:root { color-scheme: light dark; }

:root, [data-dials], :host {
  /* ---- Internal: paper, ink and the six fills, worked out from the dials ---- */
  --dl-paper-light: var(--paper-light, oklch(from var(--grey) var(--paper-lightness) calc(c * 0.12) h));
  --dl-paper-dark:  var(--paper-dark,  oklch(from var(--grey) var(--paper-dark-lightness) calc(c * 0.15) h));
  --dl-ink-light:   var(--ink-light,   oklch(from var(--grey) var(--ink-lightness) calc(c * 0.25) h));
  --dl-ink-dark:    var(--ink-dark,    oklch(from var(--grey) var(--ink-dark-lightness) calc(c * 0.12) h));
  --dl-paper: light-dark(var(--dl-paper-light), var(--dl-paper-dark));
  --dl-ink:   light-dark(var(--dl-ink-light), var(--dl-ink-dark));
  --dl-paper-grey: oklch(from var(--dl-paper) l 0 h);  /* paper without its tint: soft tints mix into this, so they keep their own hue */

  --dl-secondary-dial: var(--accent, var(--secondary));  /* --accent is --secondary's old name: while a site still sets it, it wins */
  --dl-brand-base:     oklch(from var(--brand)              calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-secondary-base: oklch(from var(--dl-secondary-dial)  calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-success-base:   oklch(from var(--success)            calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-warning-base:   oklch(from var(--warning)            calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-danger-base:    oklch(from var(--danger)             calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-info-base:      oklch(from var(--info)               calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
  --dl-brand:     light-dark(var(--dl-brand-base), oklch(from var(--dl-brand-base) calc(l + var(--dark-lift)) c h));
  --dl-secondary: light-dark(var(--dl-secondary-base), oklch(from var(--dl-secondary-base) calc(l + var(--dark-lift)) c h));
  --dl-success:   light-dark(var(--dl-success-base), oklch(from var(--dl-success-base) calc(l + var(--dark-lift)) c h));
  --dl-warning:   light-dark(var(--dl-warning-base), oklch(from var(--dl-warning-base) calc(l + var(--dark-lift)) c h));
  --dl-danger:    light-dark(var(--dl-danger-base), oklch(from var(--dl-danger-base) calc(l + var(--dark-lift)) c h));
  --dl-info:      light-dark(var(--dl-info-base), oklch(from var(--dl-info-base) calc(l + var(--dark-lift)) c h));

  /* ---- Surfaces ---- */
  --surface:         var(--dl-paper);                                            /* the page background */
  --surface-raised:  oklch(from var(--dl-paper) calc(l + 0.03) calc(c * 0.5) h);  /* cards, fields, popovers */
  --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper));     /* wells, table headers, quiet panels */
  --surface-sunken:  color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper));     /* code, inset areas, disabled fills */
  --surface-overlay: color-mix(in oklab, black 45%, transparent);                /* the scrim behind a dialog */

  /* ---- Text ---- */
  --text-strong:   var(--dl-ink);                                                                         /* headings, labels, emphasis */
  --text:          color-mix(in oklab, var(--dl-ink) calc(86% + var(--text-contrast) * 0.4%), var(--dl-paper));  /* body text */
  --text-muted:    color-mix(in oklab, var(--dl-ink) calc(70% + var(--text-contrast) * 1%), var(--dl-paper));    /* secondary text */
  --text-quiet:    color-mix(in oklab, var(--dl-ink) calc(64% + var(--text-contrast) * 1.2%), var(--dl-paper));  /* captions, dates, placeholders */
  --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper));                                /* disabled controls: exempt from contrast rules */
  --link:          var(--brand-on-soft);                                                                  /* links: 4.5:1 on every surface */
  --link-hover:    light-dark(color(from var(--dl-brand-hover) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-hover) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));  /* links on hover: a step stronger (the link 0.08 darker in OKLCH lightness in light, lighter in dark), and on to 7:1 if that's short */

  /* ---- Lines and effects ---- */
  --border-quiet:  color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper));   /* dividers that should barely show */
  --border:        color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper));  /* card and table borders: decorative */
  --border-strong: color-mix(in oklab, var(--dl-ink) calc(46% + var(--text-contrast) * 1%), var(--dl-paper));  /* field and control borders: 3:1 on surfaces */
  --focus:         var(--brand-on-soft);                                     /* the focus ring: opaque, 4.5:1 on surfaces */
  --selection:     color-mix(in oklab, var(--dl-brand) 22%, var(--dl-paper));  /* selected text background */
  --shadow-color:  light-dark(color-mix(in oklab, black 10%, transparent), color-mix(in oklab, black 45%, transparent));  /* the colour of shadows */
  --shadow-s: 0 1px 3px var(--shadow-color);    /* a slight lift: buttons, chips */
  --shadow-m: 0 4px 14px var(--shadow-color);   /* cards */
  --shadow-l: 0 12px 32px var(--shadow-color);  /* popovers, menus, dialogs */

  /* ---- Hover and pressed: the second half of a color-mix(), from Web Awesome.
     Use as color-mix(in oklch, var(--solid), var(--mix-hover)). ---- */
  --mix-hover:  oklch(from currentColor calc(1 - l) c h) 12%;  /* hover: away from the text colour */
  --mix-active: oklch(from currentColor calc(1 - l) c h) 22%;  /* pressed: further still */

  /* ---- Groups: brand, secondary, neutral, success, warning, danger, info. Five roles each:
     solid      a solid fill
     on-solid   text on it: white or black, whichever contrasts more (its sRGB luminance, as painted, vs --white-text-until)
     soft       a tinted background: the colour, held at L 0.7 or lighter in light (0.6 or darker in dark), mixed in OKLab
                into paper with its own tint taken out, so a blue soft stays blue on cream paper
     on-soft    text on soft, and coloured text on the page: the fill, moved only as far as 4.5:1 needs
     line       borders, icons and large text (24px, or 18.66px bold, and up): the dial, moved only as far as 3:1 needs

     Coloured text and lines follow one rule: keep the colour, and move it only as far as its
     contrast target needs, on the least contrasting background it sits on: its own soft tint,
     --surface-lowered or --surface-raised (--surface always lies between them). Only its
     linear-light RGB is scaled, which keeps the channels' ratios, so hue and saturation stay
     (in dark, until a channel reaches 1).
     --link-hover is the same rule at 7:1, starting from the link a step stronger.
       Y   the colour's luminance, 0.2126 r + 0.7152 g + 0.0722 b in linear sRGB (clipped to sRGB first)
       Yb  that background's luminance, as painted (clipped to sRGB)
       T   the target, plus 0.1 headroom so painting in 8 bits can't round it under the line
       light: Yt = (Yb + 0.05) / (T + 0.1) - 0.05; scale r, g and b by min(1, Yt / Y)
       dark:  Yt = (T + 0.1) * (Yb + 0.05) - 0.05; scale r, g and b by max(1, Yt / Y), each capped
              at 1; if a capped channel leaves it short, mix towards white only as far as Yt needs:
              by (Yt - Y1) / (1 - Y1), where Y1 is the luminance after scaling
     A colour that already passes keeps its exact value. CSS works out a relative colour from
     one colour's channels only, so the steps carry their numbers in colours:
       --dl-surfaces-y       the luminance of --surface-lowered in green, of --surface-raised in blue
       --dl-{group}-under    plus the soft tint's in red, mixed 50/50: Yb is min(2r, 4g, 4b) in light, max in dark
       --dl-{group}-text,    the colour, mixed 50/50 with a black whose alpha is s Yt, where s is 3 in
       --dl-{group}-line,    light (Yt is at most 0.29 there) and 1 in dark: scaling it up means Firefox
       --dl-brand-hover      rounding a mix's alpha to three decimals costs a third as much. Mixing
                             premultiplies, so the mix has alpha a = (1 + s Yt) / 2 and channels c / 2a:
                             the colour's channels are r * 2a, and Yt is (2a - 1) / s
       on-soft, line, hover  unpack both and scale, as above ---- */
  --dl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));

--dl-brand-under: color-mix(in srgb-linear, color(from var(--brand-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-brand-text:  color-mix(in srgb-linear, color(from var(--dl-brand-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-brand-line:  color-mix(in srgb-linear, color(from var(--brand) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --brand-solid:    var(--dl-brand);
  --brand-on-solid: color(from var(--dl-brand) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --brand-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-brand) max(l, 0.7) c h), oklch(from var(--dl-brand) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --brand-on-soft:  light-dark(color(from var(--dl-brand-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --brand-line:     light-dark(color(from var(--dl-brand-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-secondary-under: color-mix(in srgb-linear, color(from var(--secondary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-secondary-text:  color-mix(in srgb-linear, color(from var(--dl-secondary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-secondary-line:  color-mix(in srgb-linear, color(from var(--dl-secondary-dial) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --secondary-solid:    var(--dl-secondary);
  --secondary-on-solid: color(from var(--dl-secondary) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --secondary-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-secondary) max(l, 0.7) c h), oklch(from var(--dl-secondary) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --secondary-on-soft:  light-dark(color(from var(--dl-secondary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --secondary-line:     light-dark(color(from var(--dl-secondary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --neutral-solid:    var(--dl-ink);
  --neutral-on-solid: var(--dl-paper);
  --neutral-soft:     var(--surface-lowered);
  --neutral-on-soft:  var(--text);
  --neutral-line:     var(--border);

  --dl-success-under: color-mix(in srgb-linear, color(from var(--success-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-success-text:  color-mix(in srgb-linear, color(from var(--dl-success-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-success-line:  color-mix(in srgb-linear, color(from var(--success) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --success-solid:    var(--dl-success);
  --success-on-solid: color(from var(--dl-success) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --success-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-success) max(l, 0.7) c h), oklch(from var(--dl-success) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --success-on-soft:  light-dark(color(from var(--dl-success-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --success-line:     light-dark(color(from var(--dl-success-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-warning-under: color-mix(in srgb-linear, color(from var(--warning-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-warning-text:  color-mix(in srgb-linear, color(from var(--dl-warning-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-warning-line:  color-mix(in srgb-linear, color(from var(--warning) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --warning-solid:    var(--dl-warning);
  --warning-on-solid: color(from var(--dl-warning) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --warning-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-warning) max(l, 0.7) c h), oklch(from var(--dl-warning) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --warning-on-soft:  light-dark(color(from var(--dl-warning-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --warning-line:     light-dark(color(from var(--dl-warning-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-danger-under: color-mix(in srgb-linear, color(from var(--danger-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-danger-text:  color-mix(in srgb-linear, color(from var(--dl-danger-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-danger-line:  color-mix(in srgb-linear, color(from var(--danger) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --danger-solid:    var(--dl-danger);
  --danger-on-solid: color(from var(--dl-danger) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --danger-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-danger) max(l, 0.7) c h), oklch(from var(--dl-danger) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --danger-on-soft:  light-dark(color(from var(--dl-danger-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --danger-line:     light-dark(color(from var(--dl-danger-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-info-under: color-mix(in srgb-linear, color(from var(--info-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-info-text:  color-mix(in srgb-linear, color(from var(--dl-info-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-info-line:  color-mix(in srgb-linear, color(from var(--info) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --info-solid:    var(--dl-info);
  --info-on-solid: color(from var(--dl-info) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --info-soft:     oklch(from color-mix(in oklab, light-dark(oklch(from var(--dl-info) max(l, 0.7) c h), oklch(from var(--dl-info) min(l, 0.6) c h)) var(--tint-strength), var(--dl-paper-grey)) l calc(c * var(--tint-vividness)) h);
  --info-on-soft:  light-dark(color(from var(--dl-info-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --info-line:     light-dark(color(from var(--dl-info-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --dl-brand-hover: color-mix(in srgb-linear, color(from light-dark(oklch(from var(--brand-on-soft) calc(l - 0.08) c h), oklch(from var(--brand-on-soft) calc(l + 0.08) c h)) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (7 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (7 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));

  /* ---- Ungrouped: components use these; .is-{group} points them at a group ---- */
  --solid:    var(--brand-solid);
  --on-solid: var(--brand-on-solid);
  --soft:     var(--brand-soft);
  --on-soft:  var(--brand-on-soft);
  --line:     var(--brand-line);

  /* ---- Deprecated: --accent's tokens, renamed --secondary-*. They still work; rename them ---- */
  --accent-solid:    var(--secondary-solid);     /* deprecated: use --secondary-solid */
  --accent-on-solid: var(--secondary-on-solid);  /* deprecated: use --secondary-on-solid */
  --accent-soft:     var(--secondary-soft);      /* deprecated: use --secondary-soft */
  --accent-on-soft:  var(--secondary-on-soft);   /* deprecated: use --secondary-on-soft */
  --accent-line:     var(--secondary-line);      /* deprecated: use --secondary-line */
}
.is-brand     { --solid: var(--brand-solid);     --on-solid: var(--brand-on-solid);     --soft: var(--brand-soft);     --on-soft: var(--brand-on-soft);     --line: var(--brand-line); }
.is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
.is-neutral   { --solid: var(--neutral-solid);   --on-solid: var(--neutral-on-solid);   --soft: var(--neutral-soft);   --on-soft: var(--neutral-on-soft);   --line: var(--neutral-line); }
.is-success   { --solid: var(--success-solid);   --on-solid: var(--success-on-solid);   --soft: var(--success-soft);   --on-soft: var(--success-on-soft);   --line: var(--success-line); }
.is-warning   { --solid: var(--warning-solid);   --on-solid: var(--warning-on-solid);   --soft: var(--warning-soft);   --on-soft: var(--warning-on-soft);   --line: var(--warning-line); }
.is-danger    { --solid: var(--danger-solid);    --on-solid: var(--danger-on-solid);    --soft: var(--danger-soft);    --on-soft: var(--danger-on-soft);    --line: var(--danger-line); }
.is-info      { --solid: var(--info-solid);      --on-solid: var(--info-on-solid);      --soft: var(--info-soft);      --on-soft: var(--info-on-soft);      --line: var(--info-line); }
.is-accent    { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }  /* deprecated: use .is-secondary */
/* A light or dark band: its own scheme, and its own background and text worked out in it */
.is-light { color-scheme: light; background-color: var(--surface); color: var(--text); }
.is-dark  { color-scheme: dark;  background-color: var(--surface); color: var(--text); }
/* ============================================================
   Dials: type and space (dials-scale.css)
   A few dials set every text size and every space size, the way
   Utopia (utopia.fyi) works them out, but the maths runs in the
   browser: change a dial and the whole scale follows. Leading,
   tracking and weight are worked out the same way, for whatever size
   they're used at. This file sets no type on any element: only
   dials-base.css does that. Dials live on
   :root (and :host); the derived scale is declared on :root,
   [data-dials] and :host, so a dial set on a [data-dials] element
   re-derives the sizes inside it.
   ============================================================ */
:root, :host {
  /* ---- Dials ---- */
  --screen-min: 360;       /* the screen widths the scale runs between, in px */
  --screen-max: 1240;
  --size-min: 16;          /* body text at the narrowest and widest screens, in px */
  --size-max: 18;
  --ratio-min: 1.2;        /* each step is this much bigger than the last: 1.2 minor third, */
  --ratio-max: 1.25;       /* 1.25 major third, 1.333 perfect fourth, 1.5 fifth, 1.618 golden */
  --space-min: var(--size-min);  /* --space-s at each end, in px: follows body text */
  --space-max: var(--size-max);  /* size unless you set a number */
  --space-density: 1;      /* scales every space size: 0.8 compact, 1.25 roomy */
  --radius-base: 3;        /* corner radius of cards and fields, in px (a number, not a length) */

  /* Faces: set per site, and load them yourself (each theme file names its Google Fonts link) */
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;  /* body text and controls */
  --font-heading: "Michroma", ui-sans-serif, system-ui, sans-serif;  /* headings */
  --font-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* code, kbd, samp, pre */

  /* Border widths: every border and outline uses one of these */
  --border-width-s: 1px;   /* hairlines: cards, fields, tables */
  --border-width-m: 2px;   /* emphasis; outline offsets */
  --border-width-l: 3px;   /* focus rings, quote bars, active tabs */

  /* ---- Leading, tracking, weight and line length: unset by default ---- */
  /* While none is set, dials-base.css keeps v0.2's type. Set them in your own file; the value
     shown is what Dials uses for any you leave unset once you've set another. */
  /* --leading-body: 1.6;      line height at body size (--size-0), unitless */
  /* --leading-display: 1.15;  line height at the h1 step (--size-5) and above, unitless; sizes in between slide in a straight line */
  /* --tracking-small: 0;      letter spacing at the smallest size (--size--2), in em without the unit: positive loosens captions */
  /* --tracking-display: 0;    letter spacing at the h1 step (--size-5) and above, in em without the unit: negative tightens display type */
  /* --tracking-caps: 0;       extra letter spacing for all caps and small caps, in em without the unit (0.05 to 0.12 is usual) */
  /* --weight-body: 400;       body text weight */
  /* --weight-heading: 600;    heading weight */
  /* --line-length: none;      the longest line of running text, e.g. 65ch; unset, lines run the full width */
  /* --font-accent: var(--font-body);  a third face, for ledes, pull quotes or buttons; read it as var(--font-accent, var(--font-body)) */
}

:root, [data-dials], :host {
  /* ---- Internal: worked out from the dials, never edited by hand ---- */
  --dl-screen-range: calc(var(--screen-max) - var(--screen-min));
  --dl-fluid: calc((100vw - var(--screen-min) * 1px) / var(--dl-screen-range) * 16);  /* 0 at the narrowest, 16px at the widest */
  --dl-min-0: calc(var(--size-min) / 16);
  --dl-max-0: calc(var(--size-max) / 16);
  --dl-min--1: calc(var(--dl-min-0) / var(--ratio-min));
  --dl-max--1: calc(var(--dl-max-0) / var(--ratio-max));
  --dl-min--2: calc(var(--dl-min--1) / var(--ratio-min));
  --dl-max--2: calc(var(--dl-max--1) / var(--ratio-max));
  --dl-min-1: calc(var(--dl-min-0) * var(--ratio-min));
  --dl-max-1: calc(var(--dl-max-0) * var(--ratio-max));
  --dl-min-2: calc(var(--dl-min-1) * var(--ratio-min));
  --dl-max-2: calc(var(--dl-max-1) * var(--ratio-max));
  --dl-min-3: calc(var(--dl-min-2) * var(--ratio-min));
  --dl-max-3: calc(var(--dl-max-2) * var(--ratio-max));
  --dl-min-4: calc(var(--dl-min-3) * var(--ratio-min));
  --dl-max-4: calc(var(--dl-max-3) * var(--ratio-max));
  --dl-min-5: calc(var(--dl-min-4) * var(--ratio-min));
  --dl-max-5: calc(var(--dl-max-4) * var(--ratio-max));
  --dl-min-6: calc(var(--dl-min-5) * var(--ratio-min));
  --dl-max-6: calc(var(--dl-max-5) * var(--ratio-max));
  --dl-min-7: calc(var(--dl-min-6) * var(--ratio-min));
  --dl-max-7: calc(var(--dl-max-6) * var(--ratio-max));
  --dl-min-8: calc(var(--dl-min-7) * var(--ratio-min));
  --dl-max-8: calc(var(--dl-max-7) * var(--ratio-max));

  /* ---- Font sizes: --size-0 is body text; each number up or down is one step of the ratio,
     running in a straight line between its two ends ---- */
  --size--2: clamp(min(var(--dl-min--2), var(--dl-max--2)) * 1rem, var(--dl-min--2) * 1rem + (var(--dl-max--2) - var(--dl-min--2)) * var(--dl-fluid), max(var(--dl-min--2), var(--dl-max--2)) * 1rem);
  --size--1: clamp(min(var(--dl-min--1), var(--dl-max--1)) * 1rem, var(--dl-min--1) * 1rem + (var(--dl-max--1) - var(--dl-min--1)) * var(--dl-fluid), max(var(--dl-min--1), var(--dl-max--1)) * 1rem);
  --size-0: clamp(min(var(--dl-min-0), var(--dl-max-0)) * 1rem, var(--dl-min-0) * 1rem + (var(--dl-max-0) - var(--dl-min-0)) * var(--dl-fluid), max(var(--dl-min-0), var(--dl-max-0)) * 1rem);
  --size-1: clamp(min(var(--dl-min-1), var(--dl-max-1)) * 1rem, var(--dl-min-1) * 1rem + (var(--dl-max-1) - var(--dl-min-1)) * var(--dl-fluid), max(var(--dl-min-1), var(--dl-max-1)) * 1rem);
  --size-2: clamp(min(var(--dl-min-2), var(--dl-max-2)) * 1rem, var(--dl-min-2) * 1rem + (var(--dl-max-2) - var(--dl-min-2)) * var(--dl-fluid), max(var(--dl-min-2), var(--dl-max-2)) * 1rem);
  --size-3: clamp(min(var(--dl-min-3), var(--dl-max-3)) * 1rem, var(--dl-min-3) * 1rem + (var(--dl-max-3) - var(--dl-min-3)) * var(--dl-fluid), max(var(--dl-min-3), var(--dl-max-3)) * 1rem);
  --size-4: clamp(min(var(--dl-min-4), var(--dl-max-4)) * 1rem, var(--dl-min-4) * 1rem + (var(--dl-max-4) - var(--dl-min-4)) * var(--dl-fluid), max(var(--dl-min-4), var(--dl-max-4)) * 1rem);
  --size-5: clamp(min(var(--dl-min-5), var(--dl-max-5)) * 1rem, var(--dl-min-5) * 1rem + (var(--dl-max-5) - var(--dl-min-5)) * var(--dl-fluid), max(var(--dl-min-5), var(--dl-max-5)) * 1rem);
  --size-6: clamp(min(var(--dl-min-6), var(--dl-max-6)) * 1rem, var(--dl-min-6) * 1rem + (var(--dl-max-6) - var(--dl-min-6)) * var(--dl-fluid), max(var(--dl-min-6), var(--dl-max-6)) * 1rem);
  --size-7: clamp(min(var(--dl-min-7), var(--dl-max-7)) * 1rem, var(--dl-min-7) * 1rem + (var(--dl-max-7) - var(--dl-min-7)) * var(--dl-fluid), max(var(--dl-min-7), var(--dl-max-7)) * 1rem);  /* display type */
  --size-8: clamp(min(var(--dl-min-8), var(--dl-max-8)) * 1rem, var(--dl-min-8) * 1rem + (var(--dl-max-8) - var(--dl-min-8)) * var(--dl-fluid), max(var(--dl-min-8), var(--dl-max-8)) * 1rem);  /* display type: the top of the scale */

  /* ---- Leading, tracking and weight: worked out for the size of the element they're used on ---- */
  /* --leading and --tracking are lengths: apply them on each element that sets a font size, never
     on body, where they'd inherit as one fixed length. */
  --dl-leading-body: var(--leading-body, 1.6);
  --dl-leading-display: var(--leading-display, 1.15);
  --dl-tracking-small: var(--tracking-small, 0);
  --dl-tracking-display: var(--tracking-display, 0);
  /* body size over the h1 step, as a number: tan(atan2(a, b)) is a / b for two lengths
     (Firefox has no typed division) */
  --dl-type-q: tan(atan2(var(--size-0), var(--size-5)));
  /* leading runs in a straight line in size, m * size + g, through leading-body at --size-0 and leading-display at --size-5, the h1 step */
  --dl-leading-m: calc((var(--dl-leading-display) - var(--dl-leading-body) * var(--dl-type-q)) / max(1 - var(--dl-type-q), 0.000001));
  --dl-leading-g: calc(var(--size-0) * (var(--dl-leading-body) - var(--dl-leading-m)));
  /* how far up the scale this size is, from --size-0 (0) to --size-5 (1), and down it to --size--2, evenly per step */
  --dl-type-up: clamp(0, log(tan(atan2(var(--size-0), 1em))) / min(log(var(--dl-type-q)), -0.000001), 1);
  --dl-type-down: clamp(0, log(tan(atan2(1em, var(--size-0)))) / min(log(tan(atan2(var(--size--2), var(--size-0)))), -0.000001), 1);
  --leading: clamp(min(var(--dl-leading-body), var(--dl-leading-display)) * 1em, var(--dl-leading-m) * 1em + var(--dl-leading-g), max(var(--dl-leading-body), var(--dl-leading-display)) * 1em);  /* line height for the size it's on, from --leading-body at body size to --leading-display at --size-5 (h1) and above */
  --tracking: calc(1em * (var(--dl-tracking-display) * var(--dl-type-up) + var(--dl-tracking-small) * var(--dl-type-down)));  /* letter spacing for the size it's on: 0 at body size, --tracking-small at --size--2 and below, --tracking-display at --size-5 (h1) and above */
  --tracking-caps-total: calc(var(--tracking) + 1em * var(--tracking-caps, 0));  /* letter spacing for text in capitals: --tracking plus --tracking-caps */
  --weight-strong: min(900, var(--weight-body, 400) + 200);  /* bold within body text, buttons and labels: the body weight plus 200 */
  /* dials-base.css reads these, so an untouched site keeps v0.2's type: each is valid only once one of its dials is set */
  --dl-weight-strong-on: calc(var(--weight-strong) + 0 * var(--weight-body));

  /* ---- Space: multiples of the space base (Utopia's t-shirt sizes), times the density ---- */
  --dl-space-min: calc(var(--space-min) / 16 * var(--space-density));
  --dl-space-max: calc(var(--space-max) / 16 * var(--space-density));
  --space-3xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.25 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.25rem));
  --space-2xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
  --space-xs: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
  --space-s: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
  --space-m: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
  --space-l: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-2xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
  --space-3xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
  --space-4xl: clamp(calc(var(--dl-space-min) * 8rem), calc(var(--dl-space-min) * 8rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 8) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
  /* One-up pairs: small on phones, the next size up on desktops */
  --space-3xs-2xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
  --space-2xs-xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
  --space-xs-s: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
  --space-s-m: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
  --space-m-l: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-l-xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-xl-2xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
  --space-2xl-3xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
  --space-3xl-4xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
  /* Skip pairs, for gutters and section padding that need a bigger swing */
  --space-s-l: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-m-xl: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-l-2xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));

  /* ---- Corners ---- */
  --radius-s: calc(var(--radius-base) * 0.5px);
  --radius-m: calc(var(--radius-base) * 1px);
  --radius-l: calc(var(--radius-base) * 1.6px);
  --radius-pill: 999px;
}

/* The leading and tracking gates need tan(), atan2() and log() (Chrome 120, Firefox 118, Safari 15.4).
   Without them the gates stay undefined, so dials-base.css keeps headings at --leading-display (or 1.15)
   and leaves letter spacing alone. */
@supports (width: calc(1px * tan(atan2(1px, 1px)) * log(2))) {
  :root, [data-dials], :host {
    --dl-leading-on: calc(var(--leading) + 0px * var(--leading-body, var(--leading-display)));
    --dl-tracking-on: calc(var(--tracking) + 0em * var(--tracking-small, var(--tracking-display)));
  }
}
/* ============================================================
   Dials: the fallback (src/fallback.css, built into the end of dials.css)
   For browsers with color-mix() but without relative colour or
   light-dark(): Chrome and Edge 111-122, Safari 16.2-17, Firefox
   113-127. They can't work out the derived chain above, so this
   block works every public colour token out again from the same
   dials, with color-mix() alone. It comes after the chain and uses
   the same selectors, so it wins there; a site's own file, loaded
   after dials.css, still wins over it. It never sets a dial.
   Approximations, held to the same contrast as the chain (the
   contrast check's --fallback mode):
   - The page is light. .is-dark bands are dark, .is-light bands light.
   - Paper and ink come from --grey at fixed mixes, so the four
     lightness dials, --balance, --dark-lift, --tint-vividness and
     --text-contrast have no effect. --paper-light and friends do.
   - on-solid text can't follow the fill's luminance: each group has a
     fixed choice, and its fill is pulled a fixed amount towards the
     other end so the text keeps 4.5:1 in every Dials theme. White on
     brand, secondary, danger and info, whose fills are darkened; black
     on success, whose fill is lightened, and warning, as set.
   - Coloured text and lines can't move only as far as their target
     needs: on-soft is the dial mixed a fixed amount into ink (so --link
     and --focus too), line a smaller amount, and --link-hover further
     still. The amounts hold 4.5:1 and 3:1 on every surface and soft
     tint, for every theme and for extreme dials, so they over-shoot for
     most colours. Ink is near-black on a light page and near-white in an
     .is-dark band, so the same mix works in both.
   - No calc() and no percentages computed inside color-mix(): only
     literal percentages and dials that are one (--tint-strength).
   ============================================================ */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
  /* ---- Internal: the scheme switches, literal percentages a band can flip ---- */
  :root, :host, .is-light {
    color-scheme: light;
    --dl-fb-dark: 0%;     /* how much of the dark paper and ink to use */
    --dl-fb-raise: 38%;   /* how much white lifts --surface-raised */
    --dl-fb-shadow: 10%;  /* the strength of shadows */
  }
  .is-dark {
    color-scheme: dark;
    --dl-fb-dark: 100%;
    --dl-fb-raise: 4%;
    --dl-fb-shadow: 45%;
  }

  /* Bands are declared here too, so every token is worked out again in a band's own scheme */
  :root, [data-dials], :host, .is-light, .is-dark {
    /* ---- Internal: paper, ink and the six fills ---- */
    --dl-paper-light: var(--paper-light, color-mix(in oklab, var(--grey) 20%, white));
    --dl-paper-dark:  var(--paper-dark,  color-mix(in oklab, var(--grey) 30%, black));
    --dl-ink-light:   var(--ink-light,   color-mix(in oklab, var(--grey) 34%, black));
    --dl-ink-dark:    var(--ink-dark,    color-mix(in oklab, var(--grey) 17%, white));
    --dl-paper: color-mix(in oklab, var(--dl-paper-dark) var(--dl-fb-dark), var(--dl-paper-light));
    --dl-ink:   color-mix(in oklab, var(--dl-ink-dark) var(--dl-fb-dark), var(--dl-ink-light));
    --dl-brand:   color-mix(in oklab, var(--brand) 72%, black);
    --dl-secondary: color-mix(in oklab, var(--accent, var(--secondary)) 67%, black);
    --dl-success: color-mix(in oklab, var(--success) 85%, white);
    --dl-warning: var(--warning);
    --dl-danger:  color-mix(in oklab, var(--danger) 78%, black);
    --dl-info:    color-mix(in oklab, var(--info) 61%, black);

    /* ---- Surfaces ---- */
    --surface:         var(--dl-paper);
    --surface-raised:  color-mix(in oklab, white var(--dl-fb-raise), var(--dl-paper));
    --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper));
    --surface-sunken:  color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper));
    --surface-overlay: color-mix(in oklab, black 45%, transparent);

    /* ---- Text: a step stronger than the chain's defaults, to cover --text-contrast ---- */
    --text-strong:   var(--dl-ink);
    --text:          color-mix(in oklab, var(--dl-ink) 94%, var(--dl-paper));
    --text-muted:    color-mix(in oklab, var(--dl-ink) 89%, var(--dl-paper));
    --text-quiet:    color-mix(in oklab, var(--dl-ink) 86%, var(--dl-paper));
    --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper));
    --link:          var(--brand-on-soft);
    --link-hover:    color-mix(in oklab, var(--brand) 20%, var(--dl-ink));

    /* ---- Lines and effects ---- */
    --border-quiet:  color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper));
    --border:        color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper));
    --border-strong: color-mix(in oklab, var(--dl-ink) 64%, var(--dl-paper));
    --focus:         var(--brand-on-soft);
    --selection:     color-mix(in oklab, var(--brand) 22%, var(--dl-paper));
    --shadow-color:  color-mix(in oklab, black var(--dl-fb-shadow), transparent);
    --shadow-s: 0 1px 3px var(--shadow-color);
    --shadow-m: 0 4px 14px var(--shadow-color);
    --shadow-l: 0 12px 32px var(--shadow-color);
    --mix-hover:  black 12%;
    --mix-active: black 22%;

    /* ---- Groups: soft mixed into paper, on-soft and line mixed towards ink ---- */
    --brand-solid:    var(--dl-brand);
    --brand-on-solid: white;
    --brand-soft:     color-mix(in oklab, var(--brand) var(--tint-strength), var(--dl-paper));
    --brand-on-soft:  color-mix(in oklab, var(--brand) 26%, var(--dl-ink));
    --brand-line:     color-mix(in oklab, var(--brand) 40%, var(--dl-ink));

    --secondary-solid:    var(--dl-secondary);
    --secondary-on-solid: white;
    --secondary-soft:     color-mix(in oklab, var(--accent, var(--secondary)) var(--tint-strength), var(--dl-paper));
    --secondary-on-soft:  color-mix(in oklab, var(--accent, var(--secondary)) 26%, var(--dl-ink));
    --secondary-line:     color-mix(in oklab, var(--accent, var(--secondary)) 40%, var(--dl-ink));

    --neutral-solid:    var(--dl-ink);
    --neutral-on-solid: var(--dl-paper);
    --neutral-soft:     var(--surface-lowered);
    --neutral-on-soft:  var(--text);
    --neutral-line:     var(--border);

    --success-solid:    var(--dl-success);
    --success-on-solid: black;
    --success-soft:     color-mix(in oklab, var(--success) var(--tint-strength), var(--dl-paper));
    --success-on-soft:  color-mix(in oklab, var(--success) 26%, var(--dl-ink));
    --success-line:     color-mix(in oklab, var(--success) 40%, var(--dl-ink));

    --warning-solid:    var(--dl-warning);
    --warning-on-solid: black;
    --warning-soft:     color-mix(in oklab, var(--warning) var(--tint-strength), var(--dl-paper));
    --warning-on-soft:  color-mix(in oklab, var(--warning) 26%, var(--dl-ink));
    --warning-line:     color-mix(in oklab, var(--warning) 40%, var(--dl-ink));

    --danger-solid:    var(--dl-danger);
    --danger-on-solid: white;
    --danger-soft:     color-mix(in oklab, var(--danger) var(--tint-strength), var(--dl-paper));
    --danger-on-soft:  color-mix(in oklab, var(--danger) 26%, var(--dl-ink));
    --danger-line:     color-mix(in oklab, var(--danger) 40%, var(--dl-ink));

    --info-solid:    var(--dl-info);
    --info-on-solid: white;
    --info-soft:     color-mix(in oklab, var(--info) var(--tint-strength), var(--dl-paper));
    --info-on-soft:  color-mix(in oklab, var(--info) 26%, var(--dl-ink));
    --info-line:     color-mix(in oklab, var(--info) 40%, var(--dl-ink));

    /* ---- Ungrouped ---- */
    --solid:    var(--brand-solid);
    --on-solid: var(--brand-on-solid);
    --soft:     var(--brand-soft);
    --on-soft:  var(--brand-on-soft);
    --line:     var(--brand-line);

    /* ---- Deprecated: the old names for the secondary group ---- */
    --accent-solid:    var(--secondary-solid);
    --accent-on-solid: var(--secondary-on-solid);
    --accent-soft:     var(--secondary-soft);
    --accent-on-soft:  var(--secondary-on-soft);
    --accent-line:     var(--secondary-line);
  }
  /* the group classes again, so they still win on a [data-dials] element or a band */
  .is-brand     { --solid: var(--brand-solid);     --on-solid: var(--brand-on-solid);     --soft: var(--brand-soft);     --on-soft: var(--brand-on-soft);     --line: var(--brand-line); }
  .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
  .is-neutral   { --solid: var(--neutral-solid);   --on-solid: var(--neutral-on-solid);   --soft: var(--neutral-soft);   --on-soft: var(--neutral-on-soft);   --line: var(--neutral-line); }
  .is-success   { --solid: var(--success-solid);   --on-solid: var(--success-on-solid);   --soft: var(--success-soft);   --on-soft: var(--success-on-soft);   --line: var(--success-line); }
  .is-warning   { --solid: var(--warning-solid);   --on-solid: var(--warning-on-solid);   --soft: var(--warning-soft);   --on-soft: var(--warning-on-soft);   --line: var(--warning-line); }
  .is-danger    { --solid: var(--danger-solid);    --on-solid: var(--danger-on-solid);    --soft: var(--danger-soft);    --on-soft: var(--danger-on-soft);    --line: var(--danger-line); }
  .is-info      { --solid: var(--info-solid);      --on-solid: var(--info-on-solid);      --soft: var(--info-soft);      --on-soft: var(--info-on-soft);      --line: var(--info-line); }
  .is-accent    { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
}
/* Generated by tools/fallback.mjs from dials.css (src/colour.css 93ca251ad22dc853): the Hi-Fi defaults in
   the light scheme. Don't edit. The last resort, for browsers without color-mix() (Chrome and Edge
   before 111, Safari before 16.2, Firefox before 113, all 2022 or older): they can't work anything
   out, so every colour token is flat and they get the house colours, light only. Colour dials have no
   effect there; type and space work as normal. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root, [data-dials], :host, .is-light, .is-dark {
    color-scheme: light;
    --surface: #e6e5e3;
    --surface-raised: #efefee;
    --surface-lowered: #dcdcda;
    --surface-sunken: #d3d2d1;
    --surface-overlay: rgb(0 0 0 / 45%);
    --text-strong: #1a1916;
    --text: #32312e;
    --text-muted: #4f4e4c;
    --text-quiet: #5b5a58;
    --text-disabled: #91908e;
    --link: #875505;
    --link-hover: #663900;
    --border-quiet: #d5d5d3;
    --border: #c8c7c5;
    --border-strong: #807f7d;
    --focus: #875505;
    --selection: #ead6c0;
    --shadow-color: rgb(0 0 0 / 10%);
    --shadow-s: 0 1px 3px rgb(0 0 0 / 10%);
    --shadow-m: 0 4px 14px rgb(0 0 0 / 10%);
    --shadow-l: 0 12px 32px rgb(0 0 0 / 10%);
    --mix-hover: black 12%;
    --mix-active: black 22%;
    --brand-solid: #f39c12;
    --brand-on-solid: #000000;
    --brand-soft: #e7e0d8;
    --brand-on-soft: #875505;
    --brand-line: #ac6d09;
    --secondary-solid: #2ec4b6;
    --secondary-on-solid: #000000;
    --secondary-soft: #dae3e1;
    --secondary-on-soft: #156b63;
    --secondary-line: #1d897f;
    --neutral-solid: #1a1916;
    --neutral-on-solid: #e6e5e3;
    --neutral-soft: #dcdcda;
    --neutral-on-soft: #32312e;
    --neutral-line: #c8c7c5;
    --success-solid: #3fbf55;
    --success-on-solid: #000000;
    --success-soft: #dae2da;
    --success-on-soft: #206e2e;
    --success-line: #2c8c3c;
    --warning-solid: #f2c230;
    --warning-on-solid: #000000;
    --warning-soft: #e6e3da;
    --warning-on-soft: #755d12;
    --warning-line: #95771a;
    --danger-solid: #e0322b;
    --danger-on-solid: #000000;
    --danger-soft: #eadbd9;
    --danger-on-soft: #b72721;
    --danger-line: #e0322b;
    --info-solid: #3b82c4;
    --info-on-solid: #000000;
    --info-soft: #dae0e6;
    --info-on-soft: #2b6396;
    --info-line: #397ebf;
    --accent-solid: #2ec4b6;
    --accent-on-solid: #000000;
    --accent-soft: #dae3e1;
    --accent-on-soft: #156b63;
    --accent-line: #1d897f;
  }
}
/* ═══ dials:end (Dials) ═════════════════════════════════════════════════ */

/* ═══ This site's dials ═════════════════════════════════════════════════
 * The ONLY place a colour or a scale value is typed. The values reproduce
 * the site's look before Dials (its blue, navy and navy-deep, white page,
 * #363B40 body text and its type and space knobs), so it looks the same in
 * light. The practice's palette is light only.
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light;   /* light only, as live: the practice's palette has no dark version */

    /* Colour dials, the source's own hex written as HSL (one decimal place,
     * which paints the same hex; the hex is in each comment). Each is a
     * group with five roles:
     * --brand-solid, --brand-on-solid, --brand-soft, --brand-on-soft and
     * --brand-line. All three pass their contrast targets as they are, so
     * every role paints the hex itself, with white text on the fills. */
    --brand: hsl(219.1 52% 49.8%);       /* #3D6BC1, the blue: eyebrows, links, ticks, the focus ring; the sky and the on-navy pill below are derived from it */
    --secondary: hsl(229.4 63.2% 24.5%); /* #172566, the navy: headings and buttons */
    --tertiary: hsl(218.7 76.3% 11.6%);  /* #071734, the navy-deep: the utility bar, navy bands, the CTA box, the footer bar */
    --success: hsl(126 46% 33%);    /* the status colours: the template's */
    --warning: hsl(37 74% 54%);
    --danger: hsl(3 56% 48%);
    --info: hsl(202 64% 41%);
    --grey: hsl(210 9% 23%);        /* the ink's hue; paper and ink are exact below */

    /* Paper and ink, exact. A white page. The ink is the strongest text,
     * and Dials sets body text at 86% of it into the paper, so the ink is
     * the colour that puts body text on the source's #363B40 exactly; the
     * greys follow it to the source's own values too: --surface-lowered
     * #F5F5F5 (the source's card, band and footer grey, #F4F4F4), --border
     * #DEDFDF (its hairline and darker card grey, #DEE2E7), --text-muted
     * #575B60 and --text-quiet #64686C (its old mid and soft inks). */
    --paper-light: hsl(0 0% 100%);       /* #FFFFFF */
    --ink-light: hsl(207.3 16.9% 12.7%); /* #1B2126 */

    /* Type and space: body 15px on a 390px phone to 18px at 1440, each step
     * 1.152x (phone) to 1.158x (desktop) the last (a least-squares fit to
     * the source's sizes, lifted by the owner on 2026-09-22: see the site
     * layer); --space-s 16px to 20px, so 1440 lands on the source's
     * 10/20/30/40/60/80px rhythm and a phone is 20% tighter. */
    --screen-min: 390;
    --screen-max: 1440;
    --size-min: 15;
    --size-max: 18;
    --ratio-min: 1.152;
    --ratio-max: 1.158;
    --space-min: 16;
    --space-max: 20;
    --space-density: 1;

    /* Type (Dials v0.3): weight, line height and letter spacing. Weights
     * land exactly: body 400, headings and bold 700, and the nav, labels,
     * eyebrows and the bar's text 600, which is Dials' --weight-strong (the
     * body weight plus 200). The source sets line height by role, not by
     * size, and the site's rules read these as numbers so each holds at
     * every size, rather than Dials' size curve (--leading, which the
     * template's own small print and fields use): body text 1.5
     * (--leading-body, which every element without its own inherits) and
     * the section titles 1.2 (--leading-display). Letter spacing: the
     * buttons' capitals 0.03em (--tracking-caps, read as
     * --tracking-caps-total) and the page-hero title 0.02em
     * (--tracking-display, read as --tracking at the top of the scale). No
     * line-length cap on the source: --line-length stays unset. */
    --leading-body: 1.5;
    --leading-display: 1.2;
    --tracking-display: 0.02;
    --tracking-caps: 0.03;
    --weight-body: 400;
    --weight-heading: 700;
    /* Granite Belt's own type tokens. The owner tuned line height role by
     * role (2026-09-22 to 09-28), and Dials' size curve runs one straight
     * line from body to display leading, so it lands none of these: each
     * is a value at one size that the two leading dials do not hold. */
    --leading-heading: 1.18;    /* headings and the page-hero title */
    --leading-subheading: 1.25; /* service headings, resource card titles */
    --leading-label: 1.3;       /* list-row labels, search status and excerpts */
    --leading-footer: 1.4;      /* footer links, hours and address (owner: columns cramped) */
    --leading-list: 1.45;       /* list-row descriptions */
    --leading-form-card: 1.55;  /* the forms page's photo-card copy */
    --leading-secondary: 1.6;   /* card copy, notes, ledes and the contact details */
    --leading-copy: 1.65;       /* body copy (.gb-copy), service intros, prose list items */
    --leading-prose: 1.7;       /* long-form prose: policies, privacy, terms */
    /* Headings tighten by 0.02em at every size, as on the source; Dials'
     * --tracking-display holds only from the h1 step up and slides to 0 at
     * body size. */
    --tracking-heading: -0.02em;

    /* Corners: --radius-m 10px on cards and photos, as the source */
    --radius-base: 10;
    /* Accent rules and active states are 4px, not Dials' 3px */
    --border-width-l: 4px;

    /* Faces: Noto Serif for headings and the nav, Source Sans 3 for
     * everything else, Marcellus for eyebrows and buttons (--font-eyebrow,
     * in the site layer). Google Fonts, linked in each page's <head>. */
    --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
    --font-heading: "Noto Serif", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── The tertiary group ───────────────────────────────────────────────────
 * A third brand colour, typically doing button and CTA work, that is neither
 * a tint of the brand nor a status colour (practices routinely have one:
 * "Button Brown", "Morning Orange"). Dials has no third brand group, so the
 * template adds one with the same five roles, worked out the way Dials v0.2.0
 * works out its own groups (each formula is Dials' brand formula with the
 * tertiary colour in it), from public tokens only. Set --tertiary above;
 * never set these. class="is-tertiary" points --solid and friends at it,
 * like .is-secondary. Declared on bands too, so a band's group follows the
 * band's own scheme.
 *
 *   --tertiary-on-soft  the fill, moved only as far as 4.5:1 needs on the
 *                       least contrasting of its soft tint, --surface-lowered
 *                       and --surface-raised; a colour that passes is kept
 *   --tertiary-line     the dial, moved only as far as 3:1 needs, the same way
 *
 * Dials carries the numbers those two need in its internal --dl-* plumbing,
 * which nothing outside Dials may read, so the template works the same
 * numbers out again from public tokens in its own --tpl-* properties: the
 * luminance of --surface-lowered and --surface-raised (Dials' --dl-surfaces-y)
 * and of the soft tint, and the colour carrying its target. They are the
 * template's plumbing: never use or set a --tpl-* property anywhere else. */
:root, [data-dials], .is-light, .is-dark {
    --tpl-tertiary-base:  oklch(from var(--tertiary) calc(l + (var(--fill-lightness) - l) * var(--balance)) c h);
    --tertiary-solid:     light-dark(var(--tpl-tertiary-base), oklch(from var(--tpl-tertiary-base) calc(l + var(--dark-lift)) c h));
    --tertiary-on-solid:  color(from var(--tertiary-solid) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
    --tertiary-soft:      oklch(from color-mix(in oklab, light-dark(oklch(from var(--tertiary-solid) max(l, 0.7) c h), oklch(from var(--tertiary-solid) min(l, 0.6) c h)) var(--tint-strength), oklch(from var(--surface) l 0 h)) l calc(c * var(--tint-vividness)) h);
    --tpl-surfaces-y:     color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));
    --tpl-tertiary-under: color-mix(in srgb-linear, color(from var(--tertiary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--tpl-surfaces-y));
    --tpl-tertiary-text:  color-mix(in srgb-linear, color(from var(--tpl-tertiary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
    --tpl-tertiary-line:  color-mix(in srgb-linear, color(from var(--tertiary) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
    --tertiary-on-soft:   light-dark(color(from var(--tpl-tertiary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
    --tertiary-line:      light-dark(color(from var(--tpl-tertiary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
}
.is-tertiary { --solid: var(--tertiary-solid); --on-solid: var(--tertiary-on-solid); --soft: var(--tertiary-soft); --on-soft: var(--tertiary-on-soft); --line: var(--tertiary-line); }
/* The tertiary group in older browsers: without relative colour or
 * light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123,
 * Firefox before 128) the derivation above cannot be worked out, and Dials'
 * own fallback covers only Dials' groups. So, the way Dials' fallback does
 * its groups, under the same condition and with the same selectors as the
 * derivation: the five roles again with color-mix(in oklab, ...) alone, from
 * --tertiary and the paper (--surface) and ink (--text-strong) Dials'
 * fallback has already worked out. As in Dials v0.2.0's fallback, on-soft is
 * the colour mixed 26% into ink and the line 40% into ink; neither can move
 * only as far as it needs there, so both over-shoot for most colours. Text
 * on the fill is a fixed white, with the fill pulled towards black as Dials
 * pulls --brand (72%), so it keeps 4.5:1. A site with a very light
 * --tertiary checks it: check-contrast.mjs --fallback. */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
    :root, [data-dials], .is-light, .is-dark {
        --tertiary-solid:    color-mix(in oklab, var(--tertiary) 72%, black);
        --tertiary-on-solid: white;
        --tertiary-soft:     color-mix(in oklab, var(--tertiary) var(--tint-strength), var(--surface));
        --tertiary-on-soft:  color-mix(in oklab, var(--tertiary) 26%, var(--text-strong));
        --tertiary-line:     color-mix(in oklab, var(--tertiary) 40%, var(--text-strong));
    }
}

/* ── The template's own tokens ────────────────────────────────────────────
 * What Dials does not cover: the narrow measure, the grid, the shared control
 * corner, the tap target, layers and motion. None of them is a colour, a text
 * size, a space size or a type setting: line height, letter spacing and
 * weight are Dials' type dials and tokens since v0.3 (the template's old
 * --leading-*, --tracking-* and --weight-* are in "Old names" below). */
:root {
    /* --- Weight -------------------------------------------------------- */
    /* THREE WEIGHTS, DELIBERATELY, all from the dials: body (--weight-body),
     * emphasis (--weight-strong: nav, labels, buttons, eyebrows, strong) and
     * headline (--weight-heading). A fourth needs a reason: the face has a
     * visibly distinct cut AND the three are not creating enough contrast. A
     * flat hierarchy is almost always a spacing or size problem, not a
     * weight problem. */

    /* --- Measure ------------------------------------------------------- */
    --measure: var(--line-length);   /* body copy: the --line-length dial */
    --measure-tight: 45ch;           /* card and caption copy */

    /* --- Grid ---------------------------------------------------------- */
    /* Deliberately minimal: the container and gutter are fluid, placement is
     * left to each layout. Use .u-container and .u-grid below. */
    --grid-max-width: 77.5rem;
    --grid-gutter: var(--space-s-l);
    --grid-columns: 12;

    /* --- Corners beyond Dials' three ----------------------------------- */
    --radius-xs: calc(var(--radius-base) * 0.333px);  /* tags, inline chips, the focus ring: a third of --radius-m, so it follows --radius-base */
    --radius-round: 50%;                   /* avatars */
    --control-radius: var(--radius-s);     /* buttons AND fields: a site sets this once, both follow */

    /* --- Touch targets ------------------------------------------------- */
    /* The smallest box a finger hits reliably: 44px (WCAG 2.5.5, Apple's
     * HIG). A fixed dimension rather than spacing, so it does not scale. */
    --target-min: 2.75rem;

    /* --- Inset shadows, from Dials' --shadow-color ------------------------ */
    --shadow-inner-s: inset 0 1px 2px 0 var(--shadow-color);
    --shadow-inner-m: inset 0 2px 6px 0 var(--shadow-color);

    /* --- Layers -------------------------------------------------------- */
    /* Six values, so z-index is never invented at the call site. */
    --layer-behind: -1;    /* decorative washes sitting behind content */
    --layer-base: 1;
    --layer-raised: 2;      /* hover cards, sticky rows */
    --layer-nav: 3;         /* sticky header */
    --layer-overlay: 4;     /* dropdowns, popovers */
    --layer-modal: 5;       /* dialogs and their backdrop */
    --layer-top: 2147483647;/* skip links, live-region alerts */

    /* --- Motion -------------------------------------------------------- */
    --duration-fast: 120ms;   /* hover, focus */
    --duration-base: 220ms;   /* most transitions */
    --duration-slow: 400ms;   /* entrances */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --reveal-distance: 1.5rem;
}

/* ═══ Old names ═══ aliases:begin ═══════════════════════════════════════
 * The template's token names before Dials (#426), each pointing at the Dials
 * token that replaces it, so markup, the Form controls section and any site
 * layer written against them keep working until #427 migrates the live
 * sites. NEVER use one in new work: use the name on the right. Delete this
 * whole block (down to aliases:end) once nothing reads any of them.
 *
 * Declared on [data-dials] and the .is-light/.is-dark bands as well as
 * :root, so a re-themed scope's or a band's aliases follow its own dials and
 * scheme, as Dials' own tokens do (its fallback works them out again there). Names Dials took over with a new meaning are NOT
 * here: --surface is now the PAGE (the old raised --surface is
 * --surface-raised), --secondary is the second brand colour's dial (it used
 * to be its fill: that is --secondary-solid), --accent is that dial's old
 * Dials name (deprecated in Dials v0.2.0: never set it), --success/--warning/
 * --danger/--info/--tertiary are dials (the fill is --success-solid ...), and --border, --border-strong, --space-*,
 * --radius-s/m/l, --shadow-* and --font-* are Dials' own. The --u-*,
 * --palette-*, --hue-*, --chroma-*, --l-* and --scheme dials are gone: set
 * the Dials dials instead. */
:root, [data-dials], .is-light, .is-dark {
    --primary: var(--brand-solid);
    --primary-hover: light-dark(oklch(from var(--brand-solid) calc(l - 0.07) c h), oklch(from var(--brand-solid) calc(l + 0.07) c h));
    --primary-light: oklch(from var(--brand-solid) calc(l + 0.11) c h);
    --primary-muted: color-mix(in oklab, var(--brand-solid) 15%, var(--surface));
    --primary-pale: var(--brand-soft);
    --on-primary: var(--brand-on-solid);
    --secondary-hover: light-dark(oklch(from var(--secondary-solid) calc(l - 0.07) c h), oklch(from var(--secondary-solid) calc(l + 0.07) c h));
    --secondary-light: oklch(from var(--secondary-solid) calc(l + 0.11) c h);
    --secondary-pale: var(--secondary-soft);
    --on-secondary: var(--secondary-on-solid);
    --tertiary-hover: light-dark(oklch(from var(--tertiary-solid) calc(l - 0.07) c h), oklch(from var(--tertiary-solid) calc(l + 0.07) c h));
    --tertiary-pale: var(--tertiary-soft);
    --on-tertiary: var(--tertiary-on-solid);
    --accent-dark: var(--primary-hover);
    --accent-pale: var(--brand-soft);
    --success-pale: var(--success-soft);
    --warning-pale: var(--warning-soft);
    --danger-pale: var(--danger-soft);
    --info-pale: var(--info-soft);
    --ink-strong: var(--text-strong);
    --ink: var(--text);
    --ink-mid: var(--text-muted);
    --ink-soft: var(--text-quiet);
    --bg: var(--surface);
    --on-bg: var(--text);
    --on-surface: var(--text);
    --step--2: var(--size--2);
    --step--1: var(--size--1);
    --step-0: var(--size-0);
    --step-1: var(--size-1);
    --step-2: var(--size-2);
    --step-3: var(--size-3);
    --step-4: var(--size-4);
    --step-5: var(--size-5);
    --step-6: var(--size-6);
    --step-7: var(--size-7);
    --step-8: var(--size-8);
    --border-thin: var(--border-width-s);
    --border-medium: var(--border-width-m);
    --border-thick: var(--border-width-l);

    /* The template's type ladder before Dials v0.3 (#436), FROZEN at its old
     * values, so a site layer written against it renders exactly as it did.
     * They do not follow the type dials, and the template reads none of them:
     * line height is var(--leading), letter spacing var(--tracking) (in
     * capitals var(--tracking-caps-total)), weight var(--weight-body),
     * var(--weight-strong) or var(--weight-heading). check-system.sh accepts
     * these values only exactly as written here. */
    --weight-400: 400;
    --weight-600: 600;
    --weight-700: 700;
    --leading-xs: 1.05;
    --leading-s: 1.18;
    --leading-m: 1.3;
    --leading-l: 1.5;
    --leading-xl: 1.6;
    --tracking-xs: -0.02em;
    --tracking-s: -0.01em;
    --tracking-m: 0;
    --tracking-l: 0.04em;
    --tracking-xl: 0.08em;
}
/* ═══ aliases:end (Old names) ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
 * RESET
 *
 * Josh Comeau's Custom CSS Reset (joshwcomeau.com/css/custom-css-reset/),
 * lightly adapted. Normalises browser defaults so the base layer below is
 * building on the same ground in every browser. Leave this alone; make
 * design decisions in the base layer and the tokens above it.
 * ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Skip link. craft.md requires one as the first element in <body>; without a
 * rule here it renders as a visible link above the header on every site. It is
 * off-screen until focused, then a real control with a visible focus ring. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--layer-top, 2147483647);
    padding: var(--space-xs) var(--space-s);
    background: var(--solid);
    color: var(--on-solid);
    text-decoration: none;
    border-radius: 0 0 var(--radius-xs) 0;
}
.skip-link:focus, .skip-link:focus-visible {
    left: 0;   /* the ring is the global one, in Form controls & focus */
}

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;   /* line height: the base layer's body rule, from --leading-body */
}

/* Media is block-level and never overflows its container. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Form controls inherit typography rather than using browser chrome. */
:where(input, button, textarea, select) { font: inherit; }   /* zero specificity: "Form controls" below must win */

/* Long words and URLs wrap instead of forcing a horizontal scrollbar. */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* A new stacking context on the root, so app-level layers cannot escape. */
#root, #__next { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ELEMENT BASE LAYER
 *
 * Bare elements are styled here so a page is correct with no classes at
 * all. Without this, an unclassed <h2> falls back to the browser default
 * and whoever writes the page patches it with an inline style — which is
 * how a site ends up with a different heading treatment per page.
 *
 * Every heading has a matching .h1-.h6 class. Use the ELEMENT for document
 * structure (SEO, screen readers, outline) and the CLASS for appearance,
 * so an <h1> can look like an eyebrow without lying about the hierarchy:
 *
 *     <h1 class="h4">Still the page's real heading, just smaller</h1>
 *
 * Sites override these; they are a floor, not a straitjacket.
 * ═══════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    font-size: var(--size-0);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);   /* a number, so it inherits as one; --leading is a length */
    color: var(--text);
    background: var(--surface);
}

/* Headings ─────────────────────────────────────────────────────────────
 * Margins are top-heavy on purpose: a heading belongs to what follows it,
 * so the space above is larger than the space below. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: var(--space-l) 0 var(--space-s);
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    line-height: var(--leading);        /* for each heading's own size: on the heading, never inherited */
    letter-spacing: var(--tracking);
    color: var(--text-strong);
    text-wrap: balance;
}

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + * {
    margin-top: 0;
}

/* A heading opening its container needs no space above it. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
    margin-top: 0;
}

h1, .h1 { font-size: var(--size-5); }
h2, .h2 { font-size: var(--size-4); }
h3, .h3 { font-size: var(--size-3); }
h4, .h4 { font-size: var(--size-2); }
h5, .h5 { font-size: var(--size-1); }
h6, .h6 {
    font-size: var(--size-0);
    letter-spacing: var(--tracking-caps-total);   /* capitals */
    text-transform: uppercase;
}

/* Dials' --leading and --tracking need log() and atan2() (Chrome and Edge
 * 120, Firefox 118, Safari 15.4). Without them Dials cannot work them out, so
 * under Dials' own condition a heading keeps --leading-display, as
 * dials-base.css does; everything else inherits the body's --leading-body,
 * and letter spacing is left alone. */
@supports not (width: calc(1px * tan(atan2(1px, 1px)) * log(2))) {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .notfound__code { line-height: var(--leading-display); }
}

/* A highlighted phrase inside a heading. One mechanism, not three. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) em {
    font-style: italic;
    color: var(--on-soft);   /* coloured text on the page */
}

/* Text ─────────────────────────────────────────────────────────────── */
p, ul, ol, dl, blockquote, figure, table, pre {
    margin: 0 0 var(--space-m);
}

/*
 * Line length is a container's job, not every paragraph's — capping each <p>
 * leaves text hugging the left of any column already sized for reading.
 * Use .measure (or set a width on the container) where prose needs it.
 */
.measure { max-width: var(--line-length); }
.measure-tight { max-width: var(--measure-tight); }

/* Opening paragraph: larger and looser than body copy. */
.lede {
    font-size: var(--size-1);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
    color: var(--text-muted);
}

/* Small label above a heading. */
.eyebrow {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--size--1);
    font-weight: var(--weight-strong);
    line-height: var(--leading);
    letter-spacing: var(--tracking-caps-total);   /* capitals */
    text-transform: uppercase;
    color: var(--on-soft);
}

small, .text-small { font-size: var(--size--1); line-height: var(--leading); letter-spacing: var(--tracking); }

strong, b { font-weight: var(--weight-strong); }

a {
    color: var(--link);
    text-decoration-thickness: var(--border-width-s);
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* The focus ring lives in "Form controls & focus" below. */

ul, ol { padding-left: var(--space-m); }

/*
 * List spacing applies to PROSE lists only. Navigation, button groups and
 * card grids are lists too, and flow margins on those knock flex/grid items
 * out of alignment (the site header) or balloon the spacing (the footer).
 *
 * Presence of a class is not the test — a footer nav is a nav whether or not
 * anyone put a class on it — so navigation context opts out explicitly.
 */
:where(ul, ol) > li { margin-bottom: var(--space-2xs); }
:where(ul, ol) > li:last-child { margin-bottom: 0; }

nav ul, nav ol,
header ul, header ol,
footer ul, footer ol,
menu {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

nav li, header li, footer li, menu li {
    margin-bottom: 0;
}

/* A list explicitly used for layout carries no bullets, indent or margin. */
:where(ul, ol)[class] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

:where(ul, ol)[class] > li { margin-bottom: 0; }

blockquote {
    /* The quote bar is a quiet border in the group's colour: Dials' subtle
     * border pattern (tokens.md, "A subtle border in a group's colour"),
     * declared here rather than at :root so it follows an .is-* class on the
     * quote. --line itself is a strong 3:1 line since Dials v0.2.0; 30% of
     * it keeps the bar about as light as it was before (the pattern's
     * example is 40%: a step darker). Decoration: no contrast promised. */
    --quote-bar: color-mix(in oklab, var(--line) 30%, var(--border));
    padding-left: var(--space-m);
    border-left: var(--border-width-l) solid var(--quote-bar);
    color: var(--text-muted);
    font-style: italic;
}

hr {
    height: 0;
    margin: var(--space-l) 0;
    border: 0;
    border-top: var(--border-width-s) solid var(--border);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Media ────────────────────────────────────────────────────────────────
 * Images carry NO radius and NO background plate by default.
 *
 * They used to. `img { border-radius: var(--radius-m); background: var(--surface-raised) }`
 * was added to fix one square photo on Wellbrook, and it cost far more than it
 * saved: every migration since has had to undo it, because a faithful clone of a
 * customer's live site decides its own corners, and the background plate fills
 * the transparent areas of every PNG and SVG — a logo on a dark footer renders
 * as a solid block. Ten of the thirteen sites on this box carried an override
 * for it before it was removed.
 *
 * A radius is a design decision belonging to the site's own stylesheet, next to
 * the cards it should match. Use .is-rounded (below) or a site-layer rule; do
 * not put it back here. */
img, picture, video, canvas, svg {
    height: auto;
}

/* Opt in where a photo should match the radius of the cards around it. */
img.is-rounded, .is-rounded img { border-radius: var(--radius-m); }

figure { margin-inline: 0; }

figcaption {
    margin-top: var(--space-2xs);
    font-size: var(--size--1);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
    color: var(--text-quiet);
}

/* Tables ───────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th, td {
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--border-width-s) solid var(--border);
    vertical-align: top;
}

th {
    font-weight: var(--weight-strong);
    color: var(--text-strong);
}

tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════
 * A text field's look, and every focus ring on the site, are set ONCE,
 * here: by the --field-* and --focus-ring* tokens and a few base rules.
 * Every text-like control on the site (contact, search, careers, booking,
 * anything mediflare.js or Connect writes) inherits it, so they match by
 * construction.
 *
 * - This section is copied VERBATIM from _template and never edited in a
 *   site: check-system.sh fails the site if its copy differs by a character.
 *   A site differs only in TOKEN VALUES, set in the site layer's own :root,
 *   below this section (a later :root wins over the defaults here).
 * - Never restyle a control inside a component. A component rule may place
 *   a field (grid, margin, width) but never sets its border, radius,
 *   background or height -- check-system.sh fails the site if one does.
 * - Fields and buttons share ONE corner, --control-radius: set it in the
 *   site layer's :root and both follow. Never set --field-radius
 *   (check-system.sh fails it), except to 0px in underline mode below;
 *   pill buttons mean pill fields.
 * - The base rules are at zero specificity (:where), so any token change
 *   reaches every field and nothing here outranks a deliberate override.
 * - ONE focus ring per site, on links, buttons and fields alike: an outline
 *   in --focus-ring at --focus-ring-w. No other rule sets a focus outline,
 *   colour or box-shadow (check-system.sh fails one); outline-offset may be
 *   adjusted where a ring would be clipped.
 * - Underline-only fields: set --field-border-w: 0,
 *   --field-border-bottom: var(--border-width-s) solid <colour> and
 *   --field-radius: 0px (an underline has no corners to share; a rounded
 *   one curves at its ends, and buttons keep --control-radius); optionally
 *   --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring)
 *   so the underline thickens with the ring. No extra rules. Underline
 *   mode is the only time a site sets --field-radius, and check-system.sh
 *   then requires the 0px.
 * - Colours follow the band. The colour tokens are declared on the page
 *   AND on every .is-light/.is-dark band and [data-dials] scope, as Dials
 *   declares its own: a browser on Dials' fallback (no relative colour)
 *   works a token out once per scope, so declared on :root alone a field
 *   in a dark band kept the light page's border and ring. A site that
 *   changes a field COLOUR sets it on the same four selectors, after this
 *   section (:root, [data-dials], .is-light, .is-dark { --field-...: ... }),
 *   or a band keeps the default. Sizes are set on :root only.
 * - A panel on a ground that is not a Dials surface (a brand fill) re-sets
 *   the leaf colour tokens on the container, never the rules:
 *     .brand-panel {
 *         --focus-ring: var(--brand-on-solid);
 *         --field-border: var(--brand-on-solid);
 *     }
 *   --focus-ring must reach >= 3:1 against every ground it is drawn on.
 * The guard finds this section by the begin/end markers; keep both.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
    --field-h: var(--target-min);                 /* the single-line height: exact, never below the 44px target */
    --field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */
    --field-pad-block: var(--space-2xs);          /* textarea only; a one-line field centres its text in --field-h */
    --field-pad-inline: var(--space-xs);
    --field-font-size: max(var(--size-0), 1rem);  /* never below 16px, or iOS zooms the page on focus */
    --field-leading: var(--leading);              /* Dials' leading, worked out at the field's own size */
    --field-weight: var(--weight-body);           /* one weight wherever the field sits */
    --field-radius: var(--control-radius);        /* = the .btn radius, by construction; never set it */
    --field-textarea-radius: min(var(--field-radius), var(--radius-l));   /* a pill textarea is a capsule; cap it */
    --field-border-w: var(--border-width-s);
    /* Unset by default, so they follow --field-border-w/--field-border:
     * --field-border-bottom          the resting bottom edge (underline mode)
     * --field-focus-border-bottom    the bottom edge while focused
     * --field-focus-outline          the field's ring; leave it to the default */
    --focus-ring-w: var(--border-width-m);        /* >= --field-border-w, so the ring covers the border */
}

/* The colours, on the bands too (see above). */
:root, [data-dials], .is-light, .is-dark {
    --field-bg: var(--surface-raised);            /* fields sit on the raised surface, as cards do */
    --field-ink: var(--text);
    --field-border: var(--border-strong);         /* Dials' control border: 3:1 on every surface */
    --field-border-hover: var(--text-quiet);
    --field-placeholder: var(--text-quiet);
    --focus-ring: var(--focus);                   /* Dials' focus ring: >= 3:1 on every surface, light and dark */
}

/* THE focus ring: every interactive element, always. Fields refine the
 * offset and radius below; nothing else sets a focus outline. */
:focus-visible {
    outline: var(--focus-ring-w) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

label {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--size--1);
    font-weight: var(--weight-strong);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
    color: var(--text-strong);
}

/* THE base rule. Every text-like control: text, email, tel, search, number,
 * date, url, password, select and textarea -- not checkboxes, radios,
 * ranges, files or button-type inputs. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) {
    --_field-radius: var(--field-radius);
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: var(--field-h);
    min-height: var(--field-h);
    padding: 0 var(--field-pad-inline);
    font: inherit;
    font-size: var(--field-font-size);
    font-weight: var(--field-weight);
    line-height: var(--field-leading);
    color: var(--field-ink);
    background-color: var(--field-bg);
    border: var(--field-border-w) solid var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    border-radius: var(--_field-radius);
    box-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover {
    border-color: var(--field-border-hover);
}

/* One edge on focus. The offset pulls the ring in by the border's width, so
 * it is drawn ON the border (covering it) rather than outside it; the border
 * and shadow are held at rest so nothing draws a second edge. Specificity
 * 0,1,0 and later than the global :focus-visible, so it wins over that one
 * (whose offset and radius suit links, not fields). In underline mode the
 * bottom edge may take --field-focus-border-bottom as well. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus {
    border-color: var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    box-shadow: none;
    outline: none;
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible {
    outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring));
    outline-offset: calc(var(--field-border-w) * -1);
    border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border)));
    border-radius: var(--_field-radius);
}

:where(textarea) {
    --_field-radius: var(--field-textarea-radius);
    height: auto;
    min-height: var(--field-textarea-h);
    padding-block: var(--field-pad-block);
    resize: vertical;
}

/* The chevron is one conic-gradient wedge in --field-ink: tokens only, no
 * image, so it recolours with the palette and the scheme. (Two half-square
 * linear gradients leave a seam where they meet.) */
:where(select) {
    padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs));
    background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0);
    background-position: calc(100% - var(--field-pad-inline)) 50%;
    background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25);
    background-repeat: no-repeat;
    cursor: pointer;
}
:where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; }

:where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; }

/* The browser's own clear (x) in a search box, redrawn as a mask so it takes
 * --field-ink instead of the browser's grey. */
:where(input[type=search])::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 1em;
    block-size: 1em;
    cursor: pointer;
    background-color: var(--field-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); }

fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; }

/* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */

/*
 * A bare <button> is usually a UI affordance — a menu toggle, a dropdown
 * trigger — not a visual button, so it gets a reset rather than a look.
 * Add .btn when you want one that looks like a button.
 */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Buttons ──────────────────────────────────────────────────────────────
 * .btn is opt-in — put it on a <button> or an <a> that should look like a
 * button. Variants change colour, sizes change scale; every one is at least
 * --target-min (44px) tall, the tap target. A bare <button> is
 * reset above, not styled, because most of them are menu and dropdown
 * triggers rather than visual buttons. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    font-family: inherit;
    font-size: var(--size--1);
    font-weight: var(--weight-strong);
    line-height: var(--leading);        /* at each button size's own font size (.btn--sm, .btn--lg) */
    letter-spacing: var(--tracking);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    min-block-size: var(--target-min);   /* 44px tap target, every size and variant */
    cursor: pointer;
    border: var(--border-width-s) solid transparent;
    border-radius: var(--control-radius);   /* shared with every field; set --control-radius, not this */
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.btn--primary {
    background: var(--solid);
    color: var(--on-solid);
}
/* Hover and pressed mix the fill away from its text colour (Dials' --mix-*),
 * so they work on every group: <a class="btn btn--primary is-tertiary">. */
.btn--primary:hover { background: color-mix(in oklch, var(--solid), var(--mix-hover)); color: var(--on-solid); }
.btn--primary:active { background: color-mix(in oklch, var(--solid), var(--mix-active)); color: var(--on-solid); }

.btn--secondary {
    background: transparent;
    border-color: var(--solid);
    color: var(--on-soft);
}
.btn--secondary:hover { background: var(--soft); color: var(--on-soft); }

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn--ghost:hover { background: var(--soft); color: var(--on-soft); }

.btn--sm { padding: var(--space-3xs) var(--space-xs); font-size: var(--size--2); }
.btn--lg { padding: var(--space-xs) var(--space-m); font-size: var(--size-0); }

/*
 * ON A BRAND-COLOURED GROUND
 *
 * A dark band is class="is-dark" on the section: Dials works every token out
 * again in the dark scheme, so the buttons above need nothing more. On a band
 * painted with a brand fill (background: var(--solid)) they invert instead:
 * the solid button goes to the raised surface, the outline picks up a
 * translucent edge in the fill's text colour. Put .on-dark on the button or
 * any ancestor.
 */
.on-dark .btn--primary,
.btn--primary.on-dark {
    background: var(--surface-raised);
    color: var(--on-soft);
}

.on-dark .btn--primary:hover,
.btn--primary.on-dark:hover {
    background: var(--soft);
    color: var(--on-soft);
}

.on-dark .btn--secondary,
.btn--secondary.on-dark {
    color: var(--on-solid);
    border-color: color-mix(in oklab, var(--on-solid) 40%, transparent);
}

.on-dark .btn--secondary:hover,
.btn--secondary.on-dark:hover {
    background: color-mix(in oklab, var(--on-solid) 12%, transparent);
    color: var(--on-solid);
}

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Media frames ────────────────────────────────────────────────────────
 * A frame for an embed — map, video or photo — so the child fills a box of
 * known proportion instead of the element's natural size.
 *
 * The ratio, radius and any framing are DEFAULTS. Change them in this file
 * to suit the design; they are here so a frame is never unstyled, not to
 * fix how it should look. */
.media-frame {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--surface-raised);
}

.media-frame > :where(iframe, img, video) {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.media-frame--square { aspect-ratio: 1; }
.media-frame--wide { aspect-ratio: 16 / 9; }

/* Cards ────────────────────────────────────────────────────────────────
 * Deliberately minimal — a surface with a radius. Sites compose their own
 * card variants on top; modelling every one here would be guesswork. */
.card {
    padding: var(--space-m);
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-m);
}

/* Utility ──────────────────────────────────────────────────────────── */
.visually-hidden, .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Grid utilities. .u-container centres and pads; .u-grid lays out. Placement
 * within the grid is each layout's business — see refs/design/layouts.md.
 */
.u-container {
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}

.u-grid {
    display: grid;
    gap: var(--grid-gutter);
}

/*
 * Section rhythm. EVERY band on a page should be a .section — this is what
 * gives a page its vertical breathing room, and it is the single most
 * repeated review comment when it is missed ("this section is lacking top
 * and bottom padding", raised three separate times on one site).
 *
 * It is a class rather than a bare `section` selector because bands are not
 * always <section> elements, and because a band that deliberately runs flush
 * to its neighbour needs to say so out loud via --flush.
 *
 * Do not hand-roll the padding. --space-l-2xl is the site-wide "40px phone /
 * 80px desktop" step, already a clamp; a bespoke value breaks the rhythm.
 *
 * Verify with bandpad.mjs, which measures the real rendered ink gap between
 * adjacent bands and fails under 40px.
 */
.section { padding-block: var(--space-l-2xl); }
.section--tight { padding-block: var(--space-l); }
.section--flush { padding-block: 0; }

/* A centred intro (eyebrow + heading + standfirst) above a band's content. */
.section__head {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

/*
 * Scroll entrance.
 *
 * Native scroll-driven animation — no library, no IntersectionObserver, no
 * JS. Add .reveal for a plain fade, or one of the directional modifiers.
 *
 * WHY THE WHOLE BLOCK IS INSIDE prefers-reduced-motion: a reveal implemented
 * as `opacity: 0` plus an animation leaves reduced-motion users staring at
 * invisible content when the animation never runs. Scoping the rule means
 * they simply get the content, with no trap to fall into.
 *
 * Safari and Firefox do not support animation-timeline yet, so content there
 * is simply visible. That is the correct failure for a practice site: no
 * entrance effect is always better than content that never arrives.
 */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .reveal--up { --reveal-from: translateY(var(--reveal-distance)); }
    .reveal--down { --reveal-from: translateY(calc(var(--reveal-distance) * -1)); }
    .reveal--left { --reveal-from: translateX(var(--reveal-distance)); }
    .reveal--right { --reveal-from: translateX(calc(var(--reveal-distance) * -1)); }
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: var(--reveal-from, none);
    }
}

/*
 * Doctor avatar fallback
 * Shows a gradient + person silhouette when no photo exists. The gradient
 * is Dials' band pattern (tokens.md, "Gradients are patterns"): from one
 * fill to another, decoration only, so no text is ever set on it.
 * The <img> has onerror="this.style.display='none'" which hides
 * the broken image, revealing this CSS background underneath.
 *
 * Derived from the site's own brand fill so a missing photo reads as part of
 * this practice rather than as a stray swatch.
 */
:root, [data-dials], .is-light, .is-dark {
    --avatar-shade: color-mix(in oklab, var(--brand-solid) 85%, black);   /* the avatar gradient's darker end: the brand fill, a step darker. color-mix() rather than relative colour, so Dials' fallback browsers draw it too */
}

.doctor-avatar {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: linear-gradient(135deg, var(--avatar-shade), var(--brand-solid));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The silhouette is an icon on the brand fill, so it is drawn in the fill's
 * own text colour, --brand-on-solid, through a mask (the shape only), and
 * keeps 3:1 in light and dark. A white silhouette fell to 2.8:1 on a dark
 * page, where the fill is lifted (mf-websites#431). */
.doctor-avatar::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 40%;
    background-color: var(--brand-on-solid);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.doctor-avatar img {
    position: relative;
    z-index: var(--layer-base);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hours: prevent time strings from breaking between number and am/pm */
.hours-table td:last-child,
.footer__hours-row span {
    white-space: nowrap;
}
/* ── 404 ──────────────────────────────────────────────────────────────
 * Served for any unmatched path, so it stands alone: say what happened, then
 * offer the way back rather than leaving a dead end.
 *
 * Deliberately written against fallbacks rather than this site's own token
 * names - every site in the fleet has a different vocabulary, and a 404 that
 * silently loses its layout because one variable is spelt differently is
 * worse than one that is slightly plainer. */
.notfound {
    padding-block: var(--space-3xl) var(--space-2xl);
    text-align: center;
}
.notfound__inner { max-width: 46rem; margin-inline: auto; }
.notfound__code {
    font-size: var(--size-5);
    font-weight: var(--weight-heading);
    line-height: var(--leading);
    letter-spacing: var(--tracking);
    margin: 0 0 var(--space-2xs);
    opacity: 0.55;
}
.notfound h1 { margin-top: 0; }
.notfound__lede { font-size: var(--size-1); line-height: var(--leading); letter-spacing: var(--tracking); margin-inline: auto; max-width: 40rem; }
.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: center;
    margin-top: var(--space-l);
}
.notfound__links {
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: var(--border-width-s) solid currentColor;
    border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.notfound__links-title {
    font-size: var(--size-0);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-total);   /* capitals */
    margin: 0 0 var(--space-s);
}
.notfound__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-l);
    justify-content: center;
}
.notfound__links a {
    display: inline-block;
    min-height: 24px;   /* WCAG 2.5.8 target size */
    line-height: var(--leading);
    font-weight: var(--weight-strong);
}

/* ==========================================================================
 * GRANITE BELT MEDICAL SERVICES — site layer
 * ==========================================================================
 *
 * Everything below is measured off https://www.granitebeltmedical.com.au,
 * then expressed in Dials tokens. The NUMBER is transcribed; the CSS that
 * produces it is chosen, so the design retunes from the dials ("This site's
 * dials", above) rather than from 300 literals.
 *
 * Type: every size is a Dials step; only the dials set it (owner decision
 * 2026-10-03: no site-defined steps). Live measured body 16.5 at 1440
 * / 13.2 at 390, the label 14.4, the eyebrow 24.7, section titles 33 (inner)
 * and 49.5 (home); the owner lifted the body to 18 / 15 on 2026-09-22 and
 * every size with it. The ratios are fitted to that lifted ramp (weighted by
 * how often each size occurs): see the :root below for the fit.
 *
 * Live caps its bands at 1450px (one at 1250px) -- verified by measuring at
 * 1920, above the cap, not inferred from the 1440 width. So --gb-shell is a
 * real cap here, unlike sites whose bands simply grow with the viewport.
 * ========================================================================== */

:root {
    /* Type. The dials ("This site's dials", above) are the whole of this
     * site's type and space tuning. Body is live's measured 13.2 / 16.5
     * lifted to 15 / 18 at the owner's request (2026-09-22): body text read
     * too small, most visibly in the services rows. The ratios are a
     * least-squares fit of the generated steps to the lifted ramp at 1440
     * and 390, weighted by element count.
     * Fit, px at 1440 (390) -- before (the lifted ramp) -> step:
     *   body 18 (15) -> size-0 18 (15) exact
     *   small print / labels 15.7 (13.1) -> size--1 15.5 (13.0)
     *   list labels, ledes 20.6 (17.2) -> size-1 20.8 (17.3)
     *   eyebrows, card titles 27.0 (22.5) -> size-3 28.0 (22.9)
     *   service + CTA titles 30.8 (25.6) -> size-4 32.4 (26.4)
     *   inner section titles 36.0 (30.0) -> size-5 37.5 (30.4)
     *   fees title 45.9 -> size-6 43.4
     *   home section titles 54.0 (35.3) -> size-7 50.3 (phone size-6 35.1)
     *   page-hero title 60.0 (50.0) -> size-8 58.2 (46.5)
     *   stat numerals 70.5 (41.2) -> size-8 58.2 (phone size-7 40.4)
     */

    /* Colours no Dials token carries, each derived from a dial and declared
     * once here. They are relative colours, so older browsers (Dials'
     * fallback) get the color-mix() versions in the block after this one.
     *   --gb-sky       #85BFF1, the on-navy accent (eyebrows, stat labels,
     *                  links and the focus ring on navy): the brand blue,
     *                  lighter and a little greener. 9.07:1 on the navy-deep
     *                  fill, 7.18 on the navy.
     *   --gb-cta-blue  the on-navy pill's deep end, sampled #4A7ACA off the
     *                  reference CTA box: the brand blue a step lighter.
     *                  Lightened from #4A7ACA to #5182D3 so the pill's
     *                  navy-deep label keeps 4.5:1 at that end (4.17 before,
     *                  4.64 now); the sky end is 9.07.
     *   --gb-cream     #F3F2EE, the alternate band and the values cards: the
     *                  page, a warm step darker. No dial is warm, so its
     *                  chroma and hue are its own; text on it is the body
     *                  ink (10.1:1), navy (12.6:1) and the blue (4.60:1).
     *   --gb-divider   the nav dividers, a neutral grey (owner, 2026-09-28):
     *                  the ink at 23% into the page, oklch 0.82 as before. */
    --gb-sky: oklch(from var(--brand-solid) calc(l + 0.2438) calc(c * 0.6509) calc(h - 16.26));
    --gb-cta-blue: oklch(from var(--brand-solid) calc(l + 0.07) calc(c * 0.9318) calc(h - 1.6));
    --gb-cream: oklch(from var(--surface) calc(l - 0.0392) 0.0054 95.1);
    --gb-divider: color-mix(in oklab, var(--text-strong) 23%, var(--surface));

    --font-eyebrow: Marcellus, Georgia, serif;

    /* Content widths. The shells are CONTENT, not container: the gutter is
     * added outside them, so the content itself measures 1450 / 1250 at its
     * cap (owner's request, 2026-09-26; before this the 1450 included the
     * 40px gutters and content measured 1370). */
    --gb-shell: 90.625rem;   /* 1450px content */
    --gb-shell-narrow: 78.125rem;   /* 1250px content — the after-hours band and CTA box */
    --gb-shell-outer: calc(var(--gb-shell) + 2 * var(--space-l));
    --gb-shell-narrow-outer: calc(var(--gb-shell-narrow) + 2 * var(--space-l));
}
/* The derived colours in older browsers: without relative colour or
 * light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123,
 * Firefox before 128) the three relative colours above are invalid, so,
 * under Dials' own fallback condition, the brand mixed into the page with
 * color-mix() alone (from the --brand dial, since the fallback darkens
 * --brand-solid): a paler sky (8.56:1 on the navy-deep fill) and the
 * pill's deep end (4.62:1 with its label), and the page grey for the cream. */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
    :root {
        --gb-sky: color-mix(in oklab, var(--brand) 50%, var(--surface));
        --gb-cta-blue: color-mix(in oklab, var(--brand) 85%, var(--surface));
        --gb-cream: var(--surface-lowered);
    }
}

body { font-family: var(--font-body); color: var(--text); background: var(--surface); }

/* Headings: Noto Serif, navy. Live sets its own line-heights per size. */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--secondary-on-soft); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
/* Bold runs are the heading weight, 700, as on the source: Dials' --weight-strong
 * (the body weight plus 200) is this site's 600, its nav and labels. */
strong, b { font-weight: var(--weight-heading); }

/* The eyebrow above every section heading: Marcellus, blue, small. */
.gb-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: var(--size-3);          /* live 24.7 at 1440, before the type lift; 28.0 now */
    font-weight: var(--weight-strong);
    line-height: 1;
    color: var(--brand-on-soft);
    margin: 0 0 var(--space-s);
}
/* One eyebrow size everywhere, as on live (owner, 2026-09-26). --sm is kept in
 * the markup but no longer changes the size. */
.gb-eyebrow--sm { font-size: var(--size-3); }

.gb-title {
    font-family: var(--font-heading);   /* services.html carries it on a <p> */
    color: var(--secondary-on-soft);
    font-size: var(--size-7);   /* live 49.5 at 1440, before the type lift; 50.3 now */
    font-weight: var(--weight-heading);
    line-height: var(--leading-display);
    margin: 0 0 var(--space-m);
}
.gb-title--sm { font-size: var(--size-5); }   /* live 33 at 1440, before the type lift; 37.5 now */
/* Inner pages have a page title; every section title beneath it is one size. */
main:has(.gb-phero) .gb-title { font-size: var(--size-5); }

/* Intro line under a heading: one step up from body. Only the hero and the
 * about band keep the two-step size — a single line each. Paragraphs that
 * do the work of body copy use .gb-copy instead (owner, 2026-09-27: ledes
 * used as body text read too big). */
.gb-lede { font-size: var(--size-1); line-height: var(--leading-secondary); margin: 0 0 var(--space-m); }
.gb-hero__lede { font-size: var(--size-2); }
.gb-copy { font-size: var(--size-0); line-height: var(--leading-copy); margin: 0 0 var(--space-s); }
.gb-copy:last-of-type { margin-bottom: var(--space-m); }

/* Bands ------------------------------------------------------------------ */
.gb-band { padding-block: var(--space-2xl); }
/* Composed on the template's .u-container rather than re-implemented: same
 * max-width / margin-inline / padding-inline, driven by this site's widths. */
.gb-band__in { --grid-max-width: var(--gb-shell-outer); --grid-gutter: var(--space-l); }
.gb-band--narrow .gb-band__in { --grid-max-width: var(--gb-shell-narrow-outer); }
.gb-band--navy { background: var(--tertiary-solid); }
.gb-band--navy, .gb-band--navy h1, .gb-band--navy h2, .gb-band--navy h3 { color: var(--tertiary-on-solid); }
.gb-band--navy .gb-eyebrow { color: var(--gb-sky); }
.gb-band--navy .gb-title { color: var(--tertiary-on-solid); }   /* the title is a <p> on some pages */
.gb-band--cream { background: var(--gb-cream); }

/* Hero ------------------------------------------------------------------- */
.gb-hero__row {
    display: grid;
    /* Live: a copy column beside a 720px photo inside the 1450 shell. */
    grid-template-columns: minmax(0, 620fr) minmax(0, 720fr);
    gap: var(--space-xl);
    align-items: center;
}
.gb-hero__copy { min-width: 0; }
.gb-hero__lede em { display: block; margin-top: var(--space-xs); font-style: italic; font-weight: var(--weight-strong); }
.gb-hero__photo { width: 100%; height: auto; border-radius: var(--radius-m); box-shadow: 0.625rem 0.625rem 0 var(--tertiary-solid); }
.gb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }

/* Buttons ---------------------------------------------------------------- */
/* The search component's Search and Close buttons are this button (Close as
 * the ghost), not copies of it. */
.gb-btn,
.mf-search__submit,
.mf-search-overlay__close {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--space-xs) var(--space-m);
    /* Same face as the eyebrows, in caps, as every button on the references. */
    font-family: var(--font-eyebrow);
    font-size: var(--size-0);
    /* Marcellus ships one weight; the browser synthesises the bold. Owner
     * found the regular too thin on a pill. */
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-caps-total);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--control-radius);   /* live: fully rounded pills everywhere */
    background: var(--secondary-solid);   /* #172566 flat, sampled off the references */
    color: var(--secondary-on-solid);
    border: var(--border-width-s) solid var(--secondary-solid);
    white-space: nowrap;
    min-block-size: var(--target-min);   /* 44px tap target */
}
/* The label stays white on hover: on an <a class="gb-btn"> the template's
 * a:hover (higher specificity than .gb-btn) used to turn it link blue on the
 * navy-deep fill, 2.3:1. */
.gb-btn:hover, .gb-btn:focus-visible,
.mf-search__submit:hover, .mf-search__submit:focus-visible { background: var(--tertiary-solid); border-color: var(--tertiary-solid); color: var(--tertiary-on-solid); }
.gb-btn--ghost, .mf-search-overlay__close { background: transparent; color: var(--secondary-on-soft); }
.gb-btn--ghost:hover, .gb-btn--ghost:focus-visible,
.mf-search-overlay__close:hover, .mf-search-overlay__close:focus-visible { background: var(--secondary-solid); color: var(--secondary-on-solid); }
/* On navy: the sky pill runs left-to-right from sky to a deeper blue —
 * sampled #7EB7EC -> #4A7ACA on the reference CTA box. */
.gb-band--navy .gb-btn,
.gb-util .mf-search__submit {   /* the search box's button sits on the navy band */
    background: linear-gradient(90deg, var(--gb-sky), var(--gb-cta-blue));
    color: var(--tertiary-on-soft); border: 0;
}
.gb-band--navy .gb-btn:hover, .gb-band--navy .gb-btn:focus-visible,
.gb-util .mf-search__submit:hover, .gb-util .mf-search__submit:focus-visible {
    background: linear-gradient(90deg, var(--gb-cta-blue), var(--gb-sky));
}

/* Quick strip: four cards, 338 wide with a 30px gap at 1440 --------------- */
.gb-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
}
.gb-strip__card {
    display: flex; flex-direction: column; gap: var(--space-xs);
    padding: var(--space-l);
    background: var(--surface-lowered);
    border-radius: var(--radius-m);
    text-align: center;
    align-items: center;
}
.gb-strip__icon { width: 2.25rem; height: 2.25rem; color: var(--secondary-on-soft); }
.gb-strip__h { font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: 0; }
.gb-strip__card p { margin: 0; font-size: var(--size-0); line-height: var(--leading-secondary); }

/* Practice notice under the quick strip (owner's screenshot, 2026-09-26) --- */
.gb-notice {
    margin-top: var(--space-m);
    padding: var(--space-l) var(--space-xl);
    background: var(--border);
    border-radius: var(--radius-m);
}
.gb-notice .gb-eyebrow { margin-bottom: var(--space-xs); }
.gb-notice p { margin: 0 0 var(--space-s); font-size: var(--size-0); line-height: var(--leading-secondary); }
.gb-notice p:last-child { margin-bottom: 0; }
@media (max-width: 34rem) { .gb-notice { padding: var(--space-m) var(--space-s); } }

/* Stats row -------------------------------------------------------------- */
.gb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.gb-stats__n { font-family: var(--font-heading); font-size: var(--size-8); font-weight: var(--weight-heading); line-height: 1; color: var(--tertiary-on-solid); margin: 0; }
.gb-stats__label { font-family: var(--font-eyebrow); font-size: var(--size-0); color: var(--gb-sky); margin: var(--space-2xs) 0 0; }

/* Services rows: photo and copy alternating sides ------------------------ */
.gb-svc { display: grid; gap: var(--space-m); }
.gb-svc__row {
    display: grid;
    /* Live (owner's reference capture): each row is a grey card — copy 300,
     * ticked list 420, photo 420 — the photo LAST on every row, no flipping. */
    grid-template-columns: minmax(0, 300fr) minmax(0, 420fr) minmax(0, 420fr);
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-l) var(--space-xl);
    background: var(--surface-lowered);
    border-radius: var(--radius-m);
}
.gb-svc__h { font-size: var(--size-4); line-height: var(--leading-subheading); margin: 0 0 var(--space-xs); }
@media (max-width: 83.0625rem) {
    .gb-svc__row { grid-template-columns: minmax(0, 340fr) minmax(0, 420fr) minmax(0, 340fr); gap: var(--space-l); }
    .gb-svc__h { font-size: var(--size-3); }
}
.gb-svc__intro { font-size: var(--size-0); line-height: var(--leading-copy); margin: 0; }
.gb-svc__list { list-style: none; margin: 0; padding: 0; display: grid; }
.gb-svc__list li { position: relative; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m); border-bottom: var(--border-width-s) solid var(--border); }
.gb-svc__list li:last-child { border-bottom: 0; }
/* Live's blue tick before each service */
.gb-svc__list li::before {
    content: ""; position: absolute; left: 0.1rem; top: calc(var(--space-2xs) + 0.45em);
    width: 0.75rem; height: 0.4rem;
    border-left: var(--border-width-m) solid var(--brand-line); border-bottom: var(--border-width-m) solid var(--brand-line);
    transform: rotate(-45deg);
}
.gb-svc__list b { display: block; font-size: var(--size-1); color: var(--secondary-on-soft); margin: 0; line-height: var(--leading-label); }
.gb-svc__list span { display: block; font-size: var(--size-0); line-height: var(--leading-list); }
.gb-svc__photo { width: 100%; height: auto; border-radius: var(--radius-m); }

/* Two-column feature rows (fees, after hours) ---------------------------- */
.gb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.gb-list { list-style: none; margin: 0; padding: 0; display: grid; }
.gb-list li { position: relative; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s); border-bottom: var(--border-width-s) solid var(--border); }
.gb-list li:last-child { border-bottom: 0; }
.gb-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-2xs) + 0.55em); width: 0.4rem; height: 0.4rem; border-radius: var(--radius-round); background: var(--brand-solid); }
.gb-list b { display: block; color: inherit; font-size: var(--size-1); margin: 0; line-height: var(--leading-label); }
.gb-list span { display: block; font-size: var(--size-0); line-height: var(--leading-list); }

/* Card on a light ground, used by the fees panel ------------------------- */
.gb-card { padding: var(--space-l); background: var(--surface-raised); border-radius: var(--radius-m); }

/* Responsive: the grids fold in the order live folds them ---------------- */
@media (max-width: 60rem) {
    .gb-hero__row { grid-template-columns: minmax(0, 1fr); }
    .gb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gb-svc__row { grid-template-columns: minmax(0, 1fr); }
    .gb-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}
@media (max-width: 34rem) {
    .gb-strip { grid-template-columns: minmax(0, 1fr); }
    .gb-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* The utility band runs deeper than its text so the header card can sit on it. */
.gb-util {
    background: var(--tertiary-solid);   /* flat, as live — not a gradient (owner, 2026-09-28) */
    color: var(--tertiary-on-solid); font-size: var(--size-0); font-weight: var(--weight-strong);   /* readable at a glance (owner, 2026-09-28) */
    padding-bottom: var(--space-m);
}
.gb-util__in {
    max-width: var(--gb-shell-outer); margin-inline: auto;
    padding: var(--space-s) var(--space-l);   /* 2xs + 10px before; s is the same 20 at 1440 */
    display: flex; flex-wrap: wrap; gap: var(--space-s);
    align-items: center; justify-content: space-between;
}
.gb-util__hours { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
/* Rails' hours table, laid out as the inline run live shows: each row is a flex
 * item of the bar, day then time, a hairline between rows. */
.gb-util__hours .hours-table, .gb-util__hours tbody { display: contents; }
.gb-util__hours tr { display: inline-flex; gap: var(--space-3xs); }
.gb-util__hours td { padding: 0; border: 0; }
.gb-util__hours tr + tr { border-left: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 45%, transparent); padding-left: var(--space-2xs); }
.gb-util__icon { width: 1em; height: 1em; vertical-align: -0.125em; margin-right: var(--space-3xs); color: var(--gb-sky); }
.gb-util__phone { display: inline-flex; align-items: center; color: var(--tertiary-on-solid); text-decoration: none; font-weight: var(--weight-strong); white-space: nowrap; }
/* Sky on hover, as the footer bar's links: the template's a:hover blue is
 * 2.3:1 on the band. */
.gb-util__phone:hover, .gb-util__phone:focus-visible { color: var(--gb-sky); }
.gb-util__phone:hover, .gb-util__phone:focus-visible { text-decoration: underline; }

.site-header { background: transparent; }
/* The card hangs below the header by --gb-hdr-overlap; the first band of every
 * page adds that much to its top padding so content clears it. */
:root {
    --gb-hdr-overlap: 4.75rem;   /* how far the card hangs below the navy band */
    /* How far the CTA box hangs into the footer. Geometry, not rhythm: it is
     * set against the box's height so the footer's edge crosses a little
     * below its middle, and the footer pads by the same amount. */
    --gb-cta-lift: 6.5rem;
}
.site-header { position: relative; }
main > .gb-band:first-child { padding-top: calc(var(--space-2xl) + var(--gb-hdr-overlap)); }
main > .gb-phero:first-child { padding-top: calc(var(--space-l) + var(--gb-hdr-overlap)); }
.gb-hdr {
    /* The card is the shell minus its own gutter, pulled up onto the band. */
    position: absolute; left: var(--space-l); right: var(--space-l);
    top: calc(100% - var(--space-m));   /* starts just inside the band's bottom */
    max-width: var(--gb-shell);
    margin: 0 auto;
    padding: var(--space-xs) var(--space-m);
    display: flex; align-items: center; gap: var(--space-m);
    background: var(--surface-lowered);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tertiary-solid) 10%, transparent);
    z-index: var(--layer-nav);
}
.gb-logo { flex: 0 0 auto; line-height: 0; }
/* Live renders the mark 247px wide at 1440; it stays legible on a phone. */
.gb-logo img { width: clamp(11rem, 17.15vw, 15.4375rem); height: auto; }

.gb-nav { margin-inline: auto; }
.gb-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-s); list-style: none; margin: 0; padding: 0; }
.gb-nav__list > li { position: relative; }
/* Live separates the items with hairlines */
/* Divider is a pseudo-element the height of the text, not the full item. */
.gb-nav__list > li + li { position: relative; padding-left: var(--space-s); }
.gb-nav__list > li + li::before {
    content: ""; position: absolute; left: 0; top: 50%;
    height: 1em; width: 1px; transform: translateY(-50%);
    background: var(--gb-divider);
}   /* neutral grey, not the blue-grey hairline */
.gb-nav a, .gb-nav__sub-toggle {
    /* Live: Noto Serif 600 (17.32px) in the deep navy, not the body face; set
       at body size, step-0. */
    font-family: var(--font-heading);
    font-size: var(--size-0);   /* six items must fit on one line at 1330+ */
    font-weight: var(--weight-strong);
    color: var(--tertiary-on-soft); text-decoration: none; white-space: nowrap;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.gb-nav__sub-toggle { min-block-size: var(--target-min); }   /* About / Patient Info are buttons: 44px */
.gb-nav a:hover, .gb-nav a:focus-visible,
.gb-nav__sub-toggle:hover, .gb-nav__sub-toggle:focus-visible { color: var(--brand-on-soft); }
.gb-nav a.active, .gb-nav__sub-toggle.active { font-weight: var(--weight-heading); }
.gb-nav__sub-toggle::after { content: ""; display: inline-block; margin-left: var(--space-3xs); border: 0.3em solid transparent; border-top-color: currentColor; transform: translateY(0.15em); }

.gb-nav__sub {
    list-style: none; margin: 0; padding: var(--space-2xs) 0;
    position: absolute; top: 100%; left: 0; min-width: 12rem;
    background: var(--surface-raised); border: var(--border-width-s) solid var(--border); border-radius: var(--radius-m);
    box-shadow: 0 6px 20px color-mix(in oklab, var(--shadow-color) 80%, transparent);
    display: none; z-index: var(--layer-overlay);
}
.gb-nav__has-sub.is-open > .gb-nav__sub { display: block; }
@media (hover: hover) and (min-width: 83.125rem) { .gb-nav__has-sub:hover > .gb-nav__sub { display: block; } }
.gb-nav__sub a { display: block; padding: var(--space-2xs) var(--space-s); font-size: var(--size-0); font-weight: var(--weight-strong); }

/* Just above the hamburger point the six items only fit with tighter gaps. */
@media (max-width: 90rem) {
    .gb-nav__list { gap: var(--space-xs); }
    .gb-nav__list > li + li { padding-left: var(--space-xs); }
    .gb-hdr { gap: var(--space-s); }
}
.gb-nav-toggle { display: none; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); background: none; border: 0; color: var(--secondary-on-soft); cursor: pointer; padding: var(--space-3xs); }
.gb-nav-toggle svg { width: 2rem; height: 2rem; display: block; }
.gb-hdr__cta { flex: 0 0 auto; padding-inline: var(--space-s); }

/* Hamburger from 1329px down (owner, 2026-09-27); above that the full nav fits
 * beside the logo and button inside the 1450 shell. */
@media (max-width: 83.0625rem) {
    .gb-hdr { flex-wrap: wrap; }
    .gb-nav-toggle { display: inline-flex; order: 3; }
    .gb-hdr__cta { order: 2; margin-left: auto; }
    .gb-nav { order: 4; flex-basis: 100%; margin-inline: 0; display: none; }
    .gb-nav.is-open { display: block; }
    .gb-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-xs) var(--space-s); border-top: var(--border-width-s) solid var(--border); margin-top: var(--space-xs); }
    .gb-nav__list > li + li { padding-left: 0; }
    .gb-nav__list > li + li::before { display: none; }
    .gb-nav__list > li > a, .gb-nav__sub-toggle { display: block; width: 100%; text-align: left; padding: var(--space-xs) 0; }
    /* Submenus collapse under their parent and open on tap, not hover. */
    .gb-nav__sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 var(--space-2xs) var(--space-m); }
    .gb-nav__has-sub.is-open > .gb-nav__sub { display: block; }
    .gb-nav__sub a { padding: var(--space-2xs) 0; }
}
/* Phone header: logo alone on the first row, big and centred; the booking
 * button and the hamburger share a centred second row (owner, 2026-09-28).
 * Up to 37.5rem (600px), not 34rem as it was: between 545 and 579 the tablet
 * row (logo, Book Appointment, hamburger) does not fit and the hamburger
 * wrapped under the logo (2026-10-05). The tablet row fits from 580 with 8px
 * spare, so the switch sits at 600 for margin. */
@media (max-width: 37.5rem) {
    .gb-hdr { left: var(--space-s); right: var(--space-s); padding: var(--space-s); justify-content: center; row-gap: var(--space-xs); column-gap: var(--space-s); }
    :root { --gb-hdr-overlap: 9rem; }   /* the two-row card hangs further below the band */
    .gb-logo { flex-basis: 100%; display: flex; justify-content: center; order: 1; }
    .gb-logo img { width: min(100%, 17rem); }
    /* Hamburger first, then the button; the toggle is a solid navy square. */
    .gb-nav-toggle { order: 2; background: var(--secondary-solid); color: var(--secondary-on-solid); border-radius: var(--radius-m); padding: var(--space-2xs); }
    .gb-hdr__cta { order: 3; margin-left: 0; }
    .gb-util { font-size: var(--size--1); }
    .gb-util__in { justify-content: center; text-align: center; }
}
@media (max-width: 34rem) {
    .gb-svc__row { padding: calc(var(--space-m) + var(--space-2xs)) calc(var(--space-s) + var(--space-2xs)); }
}
/* Phone hours (2026-10-05): once the inline run no longer fits on one line it
 * wrapped mid-run, leaving a hairline at the start of a line. Instead each
 * day group takes its own line, days and times in two aligned columns, the
 * clock beside the first; the block is centred like the rest of the band.
 * The rows come from Rails ({{opening_hours_html}}), however many there are. */
@media (max-width: 30rem) {
    .gb-util__hours {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: center;
        column-gap: var(--space-2xs);
        row-gap: 0;
        text-align: start;
    }
    .gb-util__hours tr { display: contents; }
    .gb-util__hours tr + tr { border-left: 0; padding-left: 0; }
    .gb-util__hours .gb-util__icon { grid-column: 1; grid-row: 1; align-self: center; margin-right: 0; }
    .gb-util__hours td:first-child { grid-column: 2; }
    .gb-util__hours td:last-child { grid-column: 3; }
}

/* ── Closing CTA + footer ───────────────────────────────────────────────── */
.gb-cta {
    /* The box is pulled down over the footer by --gb-cta-lift; whatever sits
     * above it (the page, or a photo band) shows behind its top half. */
    /* Reference (every page): the box straddles the page and the footer — the
     * footer's top edge runs through the box, a little below its middle. */
    background: transparent;
    padding: var(--space-2xl) var(--space-l) 0;
    margin-bottom: calc(-1 * var(--gb-cta-lift));
    position: relative; z-index: var(--layer-raised);
}
/* the-practice: a wide photo that the box also overlaps at the top. */
.gb-photo-band { padding-bottom: 0; margin-bottom: calc(-1 * (var(--space-2xl) + var(--space-m))); }
.gb-photo-band img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-m); display: block; }
.gb-cta__in {
    max-width: var(--gb-shell-narrow); margin-inline: auto;
    padding: var(--space-xl) var(--space-xl);
    background: var(--tertiary-solid); border-radius: var(--radius-m);
    display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between;
}
.gb-cta__lede { margin: var(--space-xs) 0 0; font-size: var(--size-0); line-height: var(--leading-secondary); max-width: 46rem; }
.gb-cta .gb-title { margin-bottom: 0; font-size: var(--size-4); }

/* The grey belongs to the footer body only: the CTA box above it must show the
 * page (or the-practice's photo) behind its top half. */
.site-footer { background: transparent; color: var(--text); }
.gb-foot__wrap { background: var(--surface-lowered); }
.gb-foot {
    max-width: var(--gb-shell-outer); margin-inline: auto;
    padding: calc(var(--space-2xl) + var(--gb-cta-lift)) var(--space-l) var(--space-l);
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    column-gap: var(--space-2xl); row-gap: var(--space-l);
}
.gb-foot__brand { padding-right: var(--space-l); }
.gb-foot__logo { width: min(100%, 27.1875rem); height: auto; margin-bottom: var(--space-s); }
.gb-foot__brand p { margin: 0; font-size: var(--size-0); line-height: var(--leading-body); color: var(--text); max-width: 24rem; }
.gb-foot__h { font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: 0 0 var(--space-s); }
.gb-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.gb-foot__col a, .gb-foot__addr a { color: var(--text); text-decoration: none; font-size: var(--size-0); line-height: var(--leading-footer); }
.gb-foot__col a:hover, .gb-foot__col a:focus-visible,
.gb-foot__addr a:hover, .gb-foot__addr a:focus-visible { color: var(--link); text-decoration: underline; }
.gb-hours { margin: 0; display: grid; gap: 0; font-size: var(--size-0); line-height: var(--leading-footer); }
/* Rails' hours table, stacked day-over-time as the footer's list was. */
.gb-hours .hours-table { border-collapse: collapse; }
.gb-hours tr { display: block; margin: 0 0 var(--space-xs); }
.gb-hours tr:last-child { margin-bottom: 0; }
.gb-hours td { display: block; padding: 0; border: 0; text-align: left; }
.gb-hours td:first-child { font-weight: var(--weight-strong); }
.gb-hours td:last-child { color: var(--text); }
.gb-foot__addr { font-style: normal; display: grid; gap: var(--space-2xs); font-size: var(--size-0); line-height: var(--leading-footer); }
.gb-foot__addr > * { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.gb-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--secondary-on-soft); }
/* One line box tall, so the 1.1em glyph centres on the first line of the
 * address beside it (was a 0.2em nudge). */
.gb-foot__addr .gb-ico { height: calc(var(--leading-footer) * 1em); }

.gb-foot__bar { background: var(--tertiary-solid); color: var(--tertiary-on-solid); }
.gb-foot__bar-in {
    max-width: var(--gb-shell-outer); margin-inline: auto;
    padding: var(--space-s) var(--space-l);
    display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
    align-items: center; justify-content: space-between;
    font-size: var(--size--1);
}
.gb-foot__bar p { margin: 0; color: var(--tertiary-on-solid); }
.gb-foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.gb-foot__left > * + * { border-left: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 35%, transparent); padding-left: var(--space-m); }
.powered-by { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.powered-by a { line-height: 0; }
.powered-by img { height: 1.6rem; width: auto; }
.gb-foot__legal { display: flex; gap: var(--space-2xs); align-items: center; }
.gb-foot__legal a { color: var(--tertiary-on-solid); text-decoration: none; }
/* Beats the generic `p a:hover` (navy) below, which on the navy bar made the
 * link vanish on hover. */
.gb-foot__bar p a:hover, .gb-foot__bar p a:focus-visible { color: var(--gb-sky); text-decoration: underline; }

@media (max-width: 60rem) {
    .gb-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-l); }
    .gb-foot__brand { padding-right: 0; }
}
@media (max-width: 34rem) {
    .gb-foot { grid-template-columns: minmax(0, 1fr); }
    .gb-foot__bar-in { justify-content: center; text-align: center; }
}

/* ── Homepage bands ─────────────────────────────────────────────────────── */
.gb-hero { padding-block: var(--space-2xl) var(--space-xl); }
.gb-hero__lede { max-width: 38rem; }

.gb-band--strip { padding-top: 0; }

.gb-about__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.gb-about__top > div:last-child { text-align: right; }
.gb-about--light .gb-stats { background: var(--surface-lowered); border-radius: var(--radius-m); padding: var(--space-m) var(--space-s); }
.gb-about--light .gb-stats__n { color: var(--secondary-on-soft); }
.gb-about--light .gb-stats__label { color: var(--brand-on-soft); }
.gb-about .gb-btn { margin-top: var(--space-s); }
/* "Learn More About The Practice" is wider than a 320-340px phone column: it
 * may wrap there, balanced, rather than run off the edge (2026-10-05). Only
 * when it must: at every other width it stays one line. */
.gb-about .gb-btn { max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; }
/* Live: the exterior shot runs tall on the left (473 wide); the two interiors
 * (292 each) sit top right with the three stats centred beneath them. */
.gb-about .gb-band__in:has(.gb-about__photos) {
    display: grid;
    grid-template-columns: minmax(0, 473fr) minmax(0, 292fr) minmax(0, 292fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-s);
}
.gb-about__top { grid-column: 1 / -1; margin-bottom: var(--space-m); }
.gb-about__photos { display: contents; }
.gb-about__photos img { width: 100%; height: 100%; aspect-ratio: 8 / 7; object-fit: cover; border-radius: var(--radius-m); }
.gb-about__photos img:first-child { grid-column: 1; grid-row: 2 / 4; aspect-ratio: auto; }
.gb-about .gb-stats { grid-column: 2 / -1; grid-row: 3; align-self: center; text-align: center; padding-block: var(--space-s); }
/* Without photos (the-practice) the stats simply follow the copy. */
.gb-about .gb-band__in:not(:has(.gb-about__photos)) .gb-stats { margin-top: var(--space-l); }

.gb-offers__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.gb-offers__media { position: relative; margin-bottom: var(--space-xl); }
/* Keep the copy clear of the notes card that reaches into this column. */
.gb-offers__row > div:first-child .gb-lede { max-width: 33rem; }   /* two lines at 1440 */
.gb-offers__photo { width: 100%; height: auto; border-radius: var(--radius-m); box-shadow: 0.625rem 0.625rem 0 var(--tertiary-solid); }
.gb-offers__notes {
    position: absolute; left: -48%; bottom: calc(-1 * var(--space-xl)); width: 112%;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    background: var(--border); border-radius: var(--radius-m);   /* the darker grey, as live */
    text-align: center;
}
.gb-offers__notes h3 { font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: 0 0 var(--space-2xs); }
.gb-offers__notes span { display: block; font-size: var(--size-0); line-height: var(--leading-body); }

.gb-svc__photo { order: 3; }
.gb-svc__list { order: 2; }
.gb-svc__clinic { margin: 0 0 var(--space-xs); font-size: var(--size-0); line-height: var(--leading-body); }
.gb-svc__clinic b { color: var(--secondary-on-soft); }
.gb-svc__clinic em { font-style: italic; }
.gb-svc__photo { aspect-ratio: 3 / 2; object-fit: cover; }

.gb-fees__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: stretch; }
/* height:0 + min-height:100% means the photo never sets the row height — the
 * card's content does — while the photo still fills that height. */
.gb-fees__photo { width: 100%; height: 0; min-height: 100%; border-radius: var(--radius-m); object-fit: cover; }
.gb-fees__card { color: var(--text); padding: var(--space-xl); }
.gb-fees__card .gb-title--sm { font-size: var(--size-6); overflow-wrap: normal; }
@media (max-width: 66rem) { .gb-fees__card .gb-title--sm { font-size: var(--size-5); } }
.gb-two .gb-svc__h { font-size: var(--size-2); }
.gb-fees__card .gb-title { color: var(--secondary-on-soft); }
.gb-fees__card .gb-eyebrow { color: var(--brand-on-soft); }
.gb-fees__card .gb-list b { color: var(--secondary-on-soft); }

.gb-afterhours__head { text-align: center; margin-bottom: var(--space-l); }
/* Tighter seams: after-hours -> values photo, and offers -> service cards
 * (owner, 2026-09-28: ~160px of air at each, now ~60). */
.gb-afterhours { padding-bottom: var(--space-xl); }
.gb-values { padding-top: 0; }
.gb-offers { padding-bottom: var(--space-xl); }
.gb-svc-band { padding-top: 0; }

.gb-values__photo { width: 100%; height: auto; aspect-ratio: 1440 / 700; object-fit: cover; border-radius: var(--radius-m); }
.gb-values__media { position: relative; }
.gb-values__pills { list-style: none; margin: 0; padding: 0; }
.gb-values__pills li {
    position: absolute;
    display: inline-flex; align-items: center; gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    background: var(--tertiary-solid); color: var(--tertiary-on-solid); border-radius: var(--radius-pill);
    font-size: var(--size--1); font-weight: var(--weight-strong); white-space: nowrap;
}
.gb-values__pills li::before {
    content: ""; width: 1em; height: 1em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center / contain 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 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Positions transcribed from live: two pills each side, the last one sky. */
.gb-values__pills li:nth-child(1) { left: 1.5%; top: 62%; }
.gb-values__pills li:nth-child(2) { right: 1.5%; top: 62%; }
.gb-values__pills li:nth-child(3) { left: 12%; top: 73%; }
.gb-values__pills li:nth-child(2) { background: var(--secondary-solid); }
.gb-values__pills li:nth-child(3) { background: var(--brand-solid); }
.gb-values__pills li:nth-child(4) { right: 12%; top: 73%; background: var(--gb-sky); color: var(--tertiary-on-soft); }
.gb-values__cards {
    position: relative; z-index: var(--layer-raised);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s);
    width: 56%; margin: calc(-1 * var(--space-2xl)) auto 0;
}
@media (max-width: 83.0625rem) {
    .gb-values__cards { width: 72%; }
    .gb-values__pills li:nth-child(3), .gb-values__pills li:nth-child(4) { top: 50%; }
    .gb-values__pills li:nth-child(1), .gb-values__pills li:nth-child(2) { top: 40%; }
}
.gb-values__cards .gb-card { background: var(--gb-cream); padding: var(--space-l); }
.gb-values__n { font-family: var(--font-heading); font-size: var(--size-3); font-weight: var(--weight-heading); color: var(--brand-on-soft); margin: 0; }
.gb-values__h { font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: var(--space-3xs) 0 var(--space-2xs); }
.gb-values__cards p:last-child { margin: 0; font-size: var(--size-0); line-height: var(--leading-secondary); }

/* The floating notes card needs a wide photo column; below 75rem it would
 * reach into the copy, so the offers row folds earlier than the others. */
@media (max-width: 75rem) {
    .gb-offers__row { grid-template-columns: minmax(0, 1fr); }
    .gb-offers__row > div:first-child .gb-lede { max-width: 46rem; }
    .gb-offers__media { margin-bottom: 0; }
    .gb-offers__notes { position: static; width: auto; margin-top: var(--space-m); }
}
@media (max-width: 60rem) {
    .gb-about__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
    .gb-about__top > div:last-child { text-align: left; }
    .gb-about .gb-band__in:has(.gb-about__photos) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gb-about__photos img:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
    .gb-about .gb-stats { grid-column: 1 / -1; grid-row: auto; }
    .gb-offers__row { grid-template-columns: minmax(0, 1fr); }
    .gb-offers__media { margin-bottom: 0; }
    .gb-offers__notes { position: static; width: auto; margin-top: var(--space-m); }
    .gb-fees__row { grid-template-columns: minmax(0, 1fr); }
    .gb-fees__photo { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
    .gb-fees__card { padding: var(--space-l); }
    .gb-values__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); margin-top: var(--space-m); }
    .gb-values__pills li { position: static; }
    .gb-values__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: var(--space-m); }
    .gb-cta__in { padding: var(--space-l); }
    /* The photo leads on every row once the grid is one column, so the
     * alternating order does not strand a picture below its own copy. */
    .gb-svc__photo, .gb-svc__list { order: 0; }
    .gb-svc__row { padding: var(--space-m); gap: var(--space-m); }
}
@media (max-width: 34rem) {
    /* Long single words ("Comprehensive", "Straightforward") must fit the
     * 342px column; the desktop sizes put them past it. */
    .gb-title { font-size: var(--size-6); }
    .gb-title--sm, .gb-fees__card .gb-title--sm { font-size: var(--size-5); }
    .gb-about .gb-band__in:has(.gb-about__photos) { grid-template-columns: minmax(0, 1fr); }
    .gb-about__photos img { aspect-ratio: 3 / 2; }
    .gb-about .gb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
    .gb-stats__n { font-size: var(--size-7); }
    .gb-stats__label { font-size: var(--size--1); }
    .gb-offers__notes { grid-template-columns: minmax(0, 1fr); padding: var(--space-m); }
    .gb-values__cards { grid-template-columns: minmax(0, 1fr); }
    .gb-cta { padding-inline: var(--space-s); }
    .gb-fees__card { padding: var(--space-m); }
}



/* Skip link: the template's, on the navy-deep fill with this site's padding
 * and card corner. */
.skip-link {
    padding: var(--space-2xs) var(--space-s);
    background: var(--tertiary-solid); color: var(--tertiary-on-solid);
    border-radius: 0 0 var(--radius-m) 0;
}

/* The 404's decorative numeral: the site's display size, as the inner-page
 * hero title. */
.notfound__code { font-size: var(--size-8); line-height: 1; }

/* ── Inner page hero: live's #DEE2E7 band with a centred title ──────────── */
.gb-phero {
    /* --phero-img is set inline per page; the wash keeps the title readable. */
    background: linear-gradient(color-mix(in srgb, var(--surface-lowered) 62%, transparent), color-mix(in srgb, var(--surface-lowered) 62%, transparent)), var(--phero-img, none) center / cover no-repeat var(--border);
    /* Reference: ~255px of band below the navy bar at 1440 with the title
     * centred in the part that shows under the header card. Padding is
     * overlap + space-l on top and space-l below so the centring is of the
     * VISIBLE area, not the whole band. */
    min-height: 24rem;   /* +48px on 2026-09-28, owner asked for ~50 more */
    display: flex; align-items: center; justify-content: center;
    padding-block: var(--space-l); text-align: center;
}
.gb-phero__h {
    font-family: var(--font-heading);
    font-size: var(--size-8);   /* 58.2 at 1440: above every section title on the page */
    font-weight: var(--weight-heading); letter-spacing: var(--tracking); color: var(--secondary-on-soft); margin: 0;
}

/* ── People grids: live uses a different column count per group ─────────── */
.gb-people { --cols: 4; list-style: none; margin: var(--space-l) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-l) var(--space-m); }
.gb-people > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--space-m)) / var(--cols)); }
.gb-people--3 { --cols: 3; }
.gb-people--4 { --cols: 4; }
.gb-people--5 { --cols: 5; }
.gb-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2xs); }
.gb-person img {
    width: 9.375rem; height: 9.375rem;   /* 150px, as live */
    border-radius: var(--radius-m); object-fit: cover; background: var(--surface-lowered);
}
.gb-managers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); max-width: 52rem; margin-inline: auto; }
.gb-managers .gb-person { gap: var(--space-xs); }
.gb-managers .gb-eyebrow { margin-bottom: var(--space-2xs); }
.gb-person__name { font-family: var(--font-heading); font-size: var(--size-1); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: 0; }
.gb-person__role { font-size: var(--size-0); line-height: var(--leading-body); margin: 0; color: var(--brand-on-soft); }

/* ── Practice page ─────────────────────────────────────────────────────── */
.gb-two--wide { grid-template-columns: minmax(0, 567fr) minmax(0, 693fr); }
.gb-two--divided > div + div { border-left: var(--border-width-s) solid var(--border); padding-left: var(--space-xl); }
.gb-card--navy { background: var(--tertiary-solid); color: var(--tertiary-on-solid); padding: var(--space-l) var(--space-xl); }
.gb-card--navy .gb-eyebrow { color: var(--tertiary-on-solid); }
.gb-card--navy .gb-ticks li { border-bottom: var(--border-width-s) solid color-mix(in srgb, var(--tertiary-on-solid) 18%, transparent); padding-bottom: var(--space-2xs); }
.gb-card--navy .gb-ticks li:last-child { border-bottom: 0; }
.gb-card--navy .gb-ticks li::before { border-color: var(--tertiary-on-solid); }
.gb-section-head { margin-bottom: var(--space-l); }
.gb-section-head .gb-title:last-child { margin-bottom: 0; }
.gb-section-head .gb-lede:last-child { margin-bottom: 0; }
.gb-section-head--centre { text-align: center; max-width: 46rem; margin-inline: auto; }
.gb-section-head--centre .gb-lede { margin-inline: auto; }
.gb-ticks { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.gb-ticks li { position: relative; padding-left: var(--space-m); font-size: var(--size-0); line-height: var(--leading-secondary); }
.gb-ticks li::before {
    content: ""; position: absolute; left: 0; top: 0.45em;
    width: 0.7rem; height: 0.4rem;
    border-left: var(--border-width-m) solid var(--brand-line); border-bottom: var(--border-width-m) solid var(--brand-line);
    transform: rotate(-45deg);
}

/* ── Forms page ────────────────────────────────────────────────────────── */
/* Forms page (owner's reference capture, 2026-09-28): two-column intro, then a
 * mosaic of navy-washed photo cards — two stacked on the left, the New Patient
 * Form running the full height on the right. */
.gb-forms__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.gb-forms__head .gb-title { margin-bottom: 0; }
.gb-forms {
    list-style: none; margin: var(--space-xl) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(14rem, auto));
    gap: var(--space-m);
}
.gb-form {
    position: relative; display: flex; align-items: flex-end;
    min-height: 14rem; padding: var(--space-l);
    border-radius: var(--radius-m); overflow: hidden;
    background: linear-gradient(color-mix(in srgb, var(--secondary-solid) 72%, transparent), color-mix(in srgb, var(--secondary-solid) 72%, transparent)), var(--form-img) center / cover no-repeat var(--secondary-solid);
    color: var(--secondary-on-solid);
}
.gb-form--tall { grid-column: 2; grid-row: 1 / 3; align-items: center; justify-content: center; text-align: center; }
.gb-form__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.gb-form--tall .gb-form__in { align-items: center; max-width: 30rem; }
.gb-form__h { font-family: var(--font-heading); font-size: var(--size-3); font-weight: var(--weight-heading); color: var(--secondary-on-solid); margin: 0; }
.gb-form__note { margin: 0 0 var(--space-xs); font-size: var(--size-0); line-height: var(--leading-body); color: var(--secondary-on-solid); }
.gb-form__copy { margin: 0 0 var(--space-xs); font-size: var(--size-0); line-height: var(--leading-form-card); }
.gb-form .gb-btn { margin-top: auto; }

/* ── Patient Health Hub page: static trusted resources ─────────────────── */
/* Six cards held at 3x2 (2x3 at the strip's own 60rem fold, one column on
 * phones) so no row is ever orphaned. Grey cards on the white band, as the
 * homepage quick strip; the heading IS the link, so no "read more". */
.gb-resources {
    list-style: none; margin: var(--space-xl) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m);
}
.gb-resource { display: flex; flex-direction: column; gap: var(--space-xs); background: var(--surface-lowered); }
.gb-resource h3 { font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); line-height: var(--leading-subheading); color: var(--secondary-on-soft); margin: 0; }
.gb-resource h3 a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.gb-resource h3 a:hover, .gb-resource h3 a:focus-visible { color: var(--link); }
.gb-resource p { margin: 0; font-size: var(--size-0); line-height: var(--leading-secondary); }
.gb-resources__note { margin-top: var(--space-m); }
.gb-resources__note .gb-eyebrow { margin: 0 0 var(--space-2xs); }
.gb-resources__note p { margin: 0; font-size: var(--size-1); line-height: var(--leading-secondary); }
@media (max-width: 60rem) { .gb-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .gb-resources { grid-template-columns: minmax(0, 1fr); } }

/* ── Contact page ──────────────────────────────────────────────────────── */
/* Desktop: the form card matches the left column's height; the message box
 * absorbs the difference (owner, 2026-09-28). */
.gb-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: stretch; }
.gb-contact__form { display: flex; flex-direction: column; }
.gb-contact__form form { display: flex; flex-direction: column; flex: 1; }
.gb-contact__form .gb-field:has(textarea) { flex: 1; grid-template-rows: auto 1fr; }
.gb-contact__form textarea { flex: 1; }   /* min-height: --field-textarea-h */
.gb-contact__form { background: var(--surface-lowered); }
.gb-field { display: grid; gap: var(--space-3xs); margin: 0 0 var(--space-s); }
.gb-field label { font-size: var(--size--1); font-weight: var(--weight-strong); color: var(--secondary-on-soft); }
/* The fields' look (pill, --border edge, 44px, one --primary focus ring) is
 * the --field-* tokens in :root, shared with the search box: see Form controls. */
.gb-contact__note {
    margin: var(--space-m) 0 0; padding: var(--space-s) var(--space-m);
    font-size: var(--size--1); line-height: var(--leading-secondary);
    background: var(--border); border-left: var(--border-width-l) solid var(--tertiary-solid); border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.gb-contact__note b { display: block; color: var(--secondary-on-soft); font-size: var(--size-0); margin-bottom: var(--space-3xs); }
.gb-contact__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin-top: var(--space-l); }
.gb-contact__card { padding: var(--space-l) var(--space-s); background: var(--surface-lowered); border-radius: var(--radius-m); text-align: center; }
.gb-contact__card .gb-ico { width: 1.6rem; height: 1.6rem; margin: 0 auto var(--space-xs); display: block; }
.gb-contact__card h2 { font-family: var(--font-heading); font-size: var(--size-2); font-weight: var(--weight-heading); color: var(--secondary-on-soft); margin: 0 0 var(--space-xs); }
.gb-contact__card p { margin: 0; font-size: var(--size-0); line-height: var(--leading-secondary); }
/* Rails' hours table: day | time rows, centred in the card. */
.gb-contact__card .hours-table { width: auto; margin-inline: auto; border-collapse: collapse; font-size: var(--size-0); line-height: var(--leading-secondary); }
.gb-contact__card .hours-table td { padding: 0 var(--space-3xs); border: 0; text-align: left; }
.gb-contact__card .hours-table td:first-child { font-weight: var(--weight-heading); }
.gb-contact__card .gb-contact__hours-note { margin-top: var(--space-xs); }
.gb-contact__card a { color: var(--text); text-decoration: none; }
.gb-contact__card a:hover, .gb-contact__card a:focus-visible { text-decoration: underline; }
.gb-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.gb-field-row .gb-field { margin: 0 0 var(--space-s); }
.gb-btn--block { width: 100%; }   /* a pill like every button (was the fields' 10px corner; the fields are pills now, 2026-10-05) */
.gb-map { padding-top: 0; }
.gb-map iframe { display: block; width: 100%; height: 22rem; border: 0; border-radius: var(--radius-m); background: var(--surface-lowered); }

/* ── Practice policy: two columns of cards, as live ────────────────────── */
.gb-policy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); align-items: start; }
.gb-policy__col { display: grid; gap: var(--space-m); }
.gb-policy .gb-card { padding: var(--space-l) var(--space-xl); background: var(--surface-lowered); }
.gb-policy .gb-card--deep { background: var(--border); }
.gb-policy .gb-card--outline { background: var(--surface-raised); border: var(--border-width-s) solid var(--brand-line); }
.gb-policy__full { margin-top: var(--space-m); }
.gb-policy h2 { font-size: var(--size-3); margin: 0 0 var(--space-s); }
.gb-policy h3 { font-family: var(--font-eyebrow); font-size: var(--size-1); font-weight: var(--weight-body); color: var(--brand-on-soft); margin: 0 0 var(--space-s); }
.gb-policy p { margin: 0 0 var(--space-s); font-size: var(--size-0); line-height: var(--leading-prose); }
.gb-policy p:last-child { margin-bottom: 0; }
.gb-policy a { color: var(--link); }

/* ── Prose pages (policies, privacy, terms) ────────────────────────────── */
.gb-prose { max-width: 52rem; margin-inline: auto; }
.gb-prose h2 { font-size: var(--size-3); margin: var(--space-xl) 0 var(--space-xs); }
.gb-prose h2:first-child { margin-top: 0; }
.gb-prose h3 { font-size: var(--size-1); margin: var(--space-m) 0 var(--space-3xs); }
.gb-prose p { margin: 0 0 var(--space-m); font-size: var(--size-0); line-height: var(--leading-prose); }
.gb-prose ul, .gb-prose ol { margin: 0 0 var(--space-s); padding-left: var(--space-m); display: grid; gap: var(--space-3xs); }
.gb-prose li { font-size: var(--size-0); line-height: var(--leading-copy); }
.gb-prose a { color: var(--link); }

@media (max-width: 60rem) {
    .gb-people--5 { --cols: 3; }
    .gb-people--4 { --cols: 2; }
    .gb-two--wide { grid-template-columns: minmax(0, 1fr); }
    .gb-two--divided > div + div { border-left: 0; padding-left: 0; border-top: var(--border-width-s) solid var(--border); padding-top: var(--space-l); }
    .gb-photo-band { margin-bottom: calc(-1 * var(--space-m)); }
    .gb-photo-band img { aspect-ratio: 16 / 9; }
    .gb-forms__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
    .gb-contact { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .gb-policy { grid-template-columns: minmax(0, 1fr); }
    .gb-policy .gb-card, .gb-card--navy { padding: var(--space-l); }
}
@media (max-width: 34rem) {
    .gb-people--3, .gb-people--4, .gb-people--5 { --cols: 2; }
    .gb-forms { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .gb-form--tall { grid-column: auto; grid-row: auto; min-height: 20rem; }
    .gb-managers { grid-template-columns: minmax(0, 1fr); }
    .gb-contact__cards { grid-template-columns: minmax(0, 1fr); }
    .gb-field-row { grid-template-columns: minmax(0, 1fr); }
    .gb-field-row .gb-field { margin-bottom: var(--space-s); }
    .gb-policy .gb-card, .gb-card--navy { padding: var(--space-m); }
    .gb-map iframe { height: 16rem; }
    .gb-foot__left { flex-direction: column; align-items: center; gap: var(--space-2xs); }
    .gb-foot__left > * + * { border-left: 0; padding-left: 0; }
}

.gb-404 { max-width: 46rem; text-align: center; }
.gb-404 .gb-hero__actions { justify-content: center; }

.gb-people__lede { max-width: 46rem; }
.gb-band--grey { background: var(--surface-lowered); }

/* Prose links take the site's own blue: Dials' --link, the brand blue, which
 * already passes 4.5:1 on the page, its grey and its soft tint, so it keeps
 * its exact value (5.16 on white, 4.80 on the grey card, 4.60 on the cream
 * band). Scoped to prose so buttons and chrome keep their own colours; hover
 * goes to the navy. */
.gb-prose a, .gb-lede a, .gb-contact__note a, .gb-forms__head a, p a { color: var(--link); }
.gb-prose a:hover, .gb-lede a:hover, p a:hover,
.gb-prose a:focus-visible, .gb-lede a:focus-visible, p a:focus-visible { color: var(--secondary-on-soft); }
.gb-band--navy p a { color: var(--gb-sky); }

/* ── Entrance reveals ───────────────────────────────────────────────────────
 * One-way: an element animates in once when it first enters the viewport and
 * stays put. Re-animating on scroll-back is what makes these feel gimmicky.
 *
 * The hidden state is applied only when JS is running (html.js), so a visitor
 * with JS off — or a crawler — sees the fully rendered page rather than a blank
 * one. reduce-motion gets the content with no transition at all. */
[data-reveal] { --reveal-delay: 0ms; --reveal-from: 1rem; }

.js [data-reveal] {
    opacity: 0;
    transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay),
                transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay);
    will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(var(--reveal-from)); }
.js [data-reveal="down"]  { transform: translateY(calc(var(--reveal-from) * -1)); }
.js [data-reveal="left"]  { transform: translateX(var(--reveal-from)); }
.js [data-reveal="right"] { transform: translateX(calc(var(--reveal-from) * -1)); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal][data-revealed] { opacity: 1; transform: none; }
/* Drop the compositor hint once the transition has finished. */
.js [data-reveal][data-reveal-done] { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Site search (2026-10-05) ───────────────────────────────────────────── */
/* mediflare.js writes the search box wherever the markup asks for one, as
 * plain HTML with mf-search__* class hooks and no styling; every rule here is
 * this site's, on its tokens.
 *
 *   >= 1330  a visible box in the navy utility band, beside the phone number,
 *            results dropping beneath it. The band has 550px spare there; the
 *            card has room for nothing (its nav only fits from 1330).
 *   657-1329 a magnifier in the card, between Book Appointment and the
 *            hamburger, opening the full-screen overlay.
 *   <= 656   the same magnifier on the band's phone row. The card's phone rows
 *            have no room (the hamburger, Book Appointment and a third 44px
 *            button need 320px; the card has 276 at 340), and the band has
 *            already wrapped onto two rows at these widths, so the magnifier
 *            changes no row there.
 * The desktop/phone swap is the hamburger's own (83.0625rem / 83.125rem), so
 * no width shows the box and a magnifier, or neither. In the band both are
 * held to the line's own height (negative block margins), so the band and the
 * card hanging off it do not move.
 *
 * Text fields are the site's pill, the shape of every button. Focus is ONE
 * 2px ring: sky on the navy band, the site's blue on light grounds.
 * Search and Close are .gb-btn (Close as .gb-btn--ghost), not copies.
 *
 * Style the overlay, the popup and the results ONLY through :not([hidden]).
 * Giving them a display of their own overrides the browser's
 * [hidden] { display: none } and they never close. */

:root {
    /* Form fields (owner, 2026-10-05): every text control -- contact form,
     * utility-bar search, overlay search -- is the contact field: the pill of
     * every button, white with Dials' control border (--border-strong, 3:1;
     * the source's --border edge was 1.35:1), 44px; the textarea takes half a
     * 44px control as its corner. Focus is ONE 2px ring laid over the edge,
     * Dials' --focus (the brand blue). Tokens only; see Form controls. One corner,
     * --control-radius, for every button and field: live's pill (.gb-btn,
     * the Book/CTA button). */
    --control-radius: var(--radius-pill);
    --field-h: var(--target-min);
    --field-leading: var(--leading-body);   /* 1.5 at every width; Form controls' default, --leading, is a little tighter on a phone, where fields are 16px */
    --field-pad-block: var(--space-2xs);
    --field-pad-inline: var(--space-s);
    --field-textarea-radius: calc(var(--target-min) / 2);
    --field-textarea-h: 6rem;            /* desktop: the box absorbs the card's spare height */
}
/* Field colours on the four selectors Form controls declares them on, so a
 * band follows: the edge does not change on hover. */
:root, [data-dials], .is-light, .is-dark {
    --field-border-hover: var(--field-border);
}
@media (max-width: 60rem) { :root { --field-textarea-h: 9rem; } }

/* ONE focus ring (owner, 2026-10-06): Dials' --focus, the brand blue, on
 * every light ground (5.16:1 on white, 4.80 on the header card's grey, 3.9
 * on the deep card).
 * On the navy grounds -- the utility bar (and its search box), the footer
 * bar, navy bands, the CTA box and the photo form cards -- the token is the
 * sky (as the bar's search box always was): blue on navy is only 3.45:1 and
 * 2.73 on the form cards. The bar's search popup is a white panel, so it
 * takes the blue back. Tokens only; no focus rules. */
.gb-util, .gb-foot__bar, .gb-band--navy, .gb-cta__in, .gb-form { --focus-ring: var(--gb-sky); }
.gb-util .mf-search__popup { --focus-ring: var(--focus); }
/* The bar's search box keeps the source's pale edge: on the navy band its
 * white fill is what marks the field (17:1), so the edge is decoration
 * there. On the light grounds (the contact form's grey card, the overlay)
 * the edge is Dials' 3:1 control border, since the fill barely shows. */
.gb-util { --field-border: var(--border); --field-border-hover: var(--border); }

/* The box, wherever it sits. */
.mf-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    align-items: center;
}
.mf-search__status,
.mf-search__results { grid-column: 1 / -1; }
.mf-search__input { grid-column: 1 / -1; }
[data-mf-search-submit] .mf-search__input { grid-column: auto; }

/* Read out, not shown: the placeholder says what the field is. */
.mf-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The search field IS a contact-form field: its look is the --field-* tokens
 * (Form controls), never a rule here. */

.mf-search__status {
    margin: 0;
    padding-inline: var(--space-xs);   /* level with the result titles */
    font-size: var(--size--1);
    font-weight: var(--weight-body);
    line-height: var(--leading-label);
    color: var(--text);
}
.mf-search__status:empty { display: none; }

.mf-search__results { margin: 0; padding: 0; list-style: none; }
.mf-search__results:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
.mf-search__results .mf-search__link {
    display: block;
    padding: var(--space-2xs) var(--space-xs);
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: var(--radius-m);
    transition: background var(--duration-fast) var(--ease-out);
}
.mf-search__results .mf-search__link:hover,
.mf-search__results .mf-search__link:focus-visible {
    color: var(--text);
    text-decoration: none;
    background: var(--surface-lowered);
}
/* Inside a scrolling list an outset ring is clipped, so it sits inset. */
.mf-search__results .mf-search__link:focus-visible { outline-offset: calc(var(--border-width-m) * -1); }

/* Titles in the headings' Noto Serif, navy; matches on the band's sky. */
.mf-search__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-strong);
    font-size: var(--size-1);
    line-height: var(--leading-heading);
    color: var(--secondary-on-soft);
}
.mf-search__excerpt {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--size--1);
    font-weight: var(--weight-body);
    line-height: var(--leading-label);
    color: var(--text);
}
.mf-search__excerpt mark {
    color: var(--text);
    background: color-mix(in srgb, var(--gb-sky) 45%, transparent);
    border-radius: var(--radius-xs);
}

/* --- The band: phone number and the desktop search box ------------------- */
.gb-util__end {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-width: 0;
}
.gb-util__end > .gb-util__phone,
.gb-util__end .gb-util__icon { flex: none; }   /* the box gives way, never the number */

/* Desktop: the box, then the phone number. */
.gb-util__search { display: none; }
@media (min-width: 83.125rem) {
    .gb-util__search {
        display: block;
        position: relative;
        flex: 0 1 26rem;
        min-width: 0;
        /* Controls taller than the line the band sets at its text's height:
         * the overhang goes into the band's padding, so the band keeps its
         * height. */
        margin-block: calc((1lh - var(--field-h)) / 2);
    }
}
.gb-util__search .mf-search__submit {
    min-height: var(--field-h);   /* the field's own height, whatever the bar sets it to */
    padding-block: 0;
    padding-inline: var(--space-s);
}
/* The compact size for the bar (owner, 2026-10-06, T28): the band is a small
 * line, so its box and Search button are the sm size, in proportion to its
 * 18px text rather than the page's 44px controls. Set as tokens on the bar,
 * never by restyling the controls: a 33px field (three quarters of the 44px
 * target, above WCAG 2.5.8's 24px minimum) in the band's --size--1, and the
 * button matching it in height, corner (--control-radius) and type. Desktop
 * with a fine pointer only, where the box shows; a touch screen of that width
 * keeps the 44px controls. */
@media (min-width: 83.125rem) and (pointer: fine) {
    .gb-util {
        --field-h: calc(var(--target-min) * 3 / 4);
        --field-font-size: var(--size--1);
        --field-pad-inline: var(--space-xs);
    }
    .gb-util__search .mf-search__submit {
        padding-inline: var(--space-xs);
        font-size: var(--field-font-size);
    }
}
.gb-util__search .mf-search__popup:not([hidden]) {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-end: 0;
    z-index: var(--layer-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    inline-size: max(100%, min(var(--measure-tight), calc(100vw - 2 * var(--space-l))));
    padding: var(--space-xs);
    color: var(--text);
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: 0 6px 20px color-mix(in oklab, var(--shadow-color) 80%, transparent);   /* the nav dropdowns' shadow */
}
.gb-util__search .mf-search__results:not([hidden]) {
    max-block-size: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The magnifier: in the card, beside the hamburger, at every width the
 * hamburger shows (to 1329px); never on the band (owner, 2026-10-06). */
.gb-search-open {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-m);
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gb-search-open svg { width: 1.375rem; height: 1.375rem; display: block; }
/* Navy, like the hamburger's lines beside it. */
.gb-search-open { color: var(--secondary-on-soft); }
.gb-search-open:hover,
.gb-search-open[aria-expanded="true"] { color: var(--brand-on-soft); }

@media (max-width: 83.0625rem) {
    .gb-search-open { display: inline-flex; order: 3; }   /* before the hamburger, after Book Appointment */
}
/* Phones: the hamburger's twin, the solid navy square, first in the row the
 * hamburger and Book Appointment share under the logo. */
@media (max-width: 37.5rem) {
    .gb-search-open,
    .gb-search-open:hover,
    .gb-search-open[aria-expanded="true"] {
        order: 2;
        inline-size: auto;
        block-size: auto;
        padding: var(--space-2xs);
        color: var(--secondary-on-solid);
        background: var(--secondary-solid);
    }
    .gb-search-open svg { width: 2rem; height: 2rem; }
}
/* Where the magnifier, the hamburger and the full Book Appointment do not fit
 * one row (to 384px on the phone row; 601-656 on the tablet row), the button
 * reads "Book"; its aria-label keeps the full name. */
@media (max-width: 24rem), (min-width: 37.5625rem) and (max-width: 41rem) {
    .gb-hdr__cta-more { display: none; }
}

/* --- The overlay: full screen on the header card's grey ----------------- */
/* Close on its own row at the top right (before the box, as the focus order
 * runs), then the field and Search, the status, and the results scrolling in
 * the space left. Subgrid puts the box's own children on this grid. */
.mf-search-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: var(--space-s) var(--space-2xs);
    padding-block-start: max(var(--space-s), env(safe-area-inset-top));
    padding-inline: max(var(--space-s), env(safe-area-inset-left)) max(var(--space-s), env(safe-area-inset-right));
    background: var(--surface-lowered);
}
.mf-search-overlay__header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
}
.mf-search--overlay,
.mf-search--overlay .mf-search__form {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: stretch;   /* the field and Search share one height */
}
.mf-search--overlay { grid-row: 2 / -1; }   /* below Close's row */
.mf-search--overlay .mf-search__input { grid-column: 1; grid-row: 1; }
.mf-search--overlay .mf-search__submit { grid-column: 2; grid-row: 1; padding-inline: var(--space-s); }
.mf-search--overlay .mf-search__status { grid-column: 1 / -1; grid-row: 2; }
.mf-search--overlay .mf-search__results {
    grid-column: 1 / -1;
    grid-row: 3;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: max(var(--space-s), env(safe-area-inset-bottom));
}
.mf-search--overlay .mf-search__link:hover,
.mf-search--overlay .mf-search__link:focus-visible { background: var(--surface-raised); }   /* the ground is already grey */

#doctors, #staff { scroll-margin-top: var(--space-l); }   /* About menu anchors to the team page (owner rule, 2026-10-08) */

/* Doctor photos come from the app (photo_url, #301), inside a .doctor-avatar box
 * that shows the fallback for a doctor without one. The box keeps the photo's own
 * size and shape, which .doctor-avatar would otherwise set. */
.gb-person .doctor-avatar { width: 9.375rem; height: 9.375rem; aspect-ratio: auto; border-radius: var(--radius-m); flex: none; }
/* The fallback's gradient is for a doctor with no photo: under a photo it shows as
 * a hairline ring at the anti-aliased edge, so a box holding a photo has none. */
.doctor-avatar:has(img) { background: none; }