Spry/css/themes/spry-theme-airy.css

/*
 * Spry CSS theme "airy" — Frutiger Aero / Windows 7 Aero glass
 * ----------------------------------------------------------------
 * Light-only. A port of the arc-themes "aero" reference into Spry's variable
 * system: one fixed sky gradient page (no wallpaper), Windows 7 push buttons,
 * gel command buttons, Explorer selection states, compact Win7 menus with a
 * glossy blue hover, glossy green progress with a sweeping shine, and dialogs
 * drawn as ONE Aero glass window frame. Activated with <html data-theme="airy">
 * or the demo radio #spry-theme-airy.
 */

/* The progress shine sweep: layer 2 of the value background is a diagonal
   light band, sized 300% and swept left-to-right by background-position. */
@keyframes airy-progress-shine {
  /* five layers: the 300%-wide shine sweeps; the rest hold */
  from { background-position: 100% 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0% 0, 0 0, 0 0, 0 0, 0 0; }
}

/* The 7.css marquee: a 40%-wide shine fully enters, crosses, and exits by
   60% of the cycle, then holds (the reference's faked delay). Position p%
   for a 40% layer maps to p x 60% of the track: out-left = -167%, out-right = +167% */
@keyframes airy-marquee {
  /* 35%-wide green sweep: p% maps to p x 65% — out-left = -154%, out-right = +154% */
  0% { background-position: -154% 50%, 0 0, 0 0, 0 0, 0 0; }
  60% { background-position: 154% 50%, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 154% 50%, 0 0, 0 0, 0 0, 0 0; }
}

[data-theme="airy"],
html:has(#spry-theme-airy:checked) {
  color-scheme: light; /* light-only: dark mode is ignored */

  /* ---- Palette (aero.scss / _tokens.scss, verbatim) ---- */
  --spry-bg: #dff3f8;              /* sky tone: avatar rings, wells */
  --spry-bg-alt: rgb(255 255 255 / 0.55);
  --spry-bg-inset: #eff6fb;
  --spry-surface: rgb(255 255 255 / 0.82); /* glass fill: cards, popovers */
  --spry-surface-hover: rgb(255 255 255 / 0.9);
  --spry-fg: #1e1e1e;
  --spry-fg-muted: #4f5e6e;        /* the reference's $secondary */
  --spry-border: rgb(154 194 224 / 0.7);
  --spry-border-strong: #5794bf;   /* the reference's textbox hover edge */
  --spry-accent: #1477c9;          /* the Windows 7 command blue */
  --spry-accent-hover: #1165ab;
  --spry-accent-fg: #ffffff;
  --spry-danger: #cc3b2e;
  --spry-success: #2c9c38;
  --spry-warning: #f2a71b;
  --spry-info: #0e8fb0;
  --spry-link: #0066cc;            /* Windows 7 link blues */
  --spry-link-hover: #3399ff;
  --spry-heading-color: #003399;
  --spry-heading-weight: 400;      /* Win7 headings are regular-weight blue */
  --spry-backdrop: rgb(0 26 51 / 0.45); /* Vista secure-desktop scrim */

  /* ---- Typography: Segoe UI at Win7's compact 12px; radii 3/2/6 ---- */
  --spry-font: "Segoe UI", Selawik, Frutiger, "Frutiger Linotype", "Myriad Pro",
    "Open Sans", system-ui, sans-serif;
  --spry-font-heading: var(--spry-font);
  --spry-font-mono: ui-monospace, Consolas, "Lucida Console", Menlo, monospace;
  --spry-font-size: 0.85rem;
  --spry-line-height: 1.5;
  --spry-radius: 3px;
  --spry-radius-sm: 2px;
  --spry-radius-lg: 6px;
  --spry-radius-pill: 999px;
  --spry-border-width: 1px;
  --spry-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 3px rgb(20 60 110 / 0.18);
  --spry-shadow-lg: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 12px 32px rgb(0 30 80 / 0.35);
  --spry-glass: blur(12px) saturate(1.7); /* topbar, cards, popovers, dialogs */
  --spry-transition: 120ms ease;

  /* Windows glide in the DWM way (Windows 7 Aero, T ≈ 180ms): scale 0.92→1 and
     alpha 0→1 on the same cubic ease-out f(t) = 1-(1-t)^3 — f(0.5) = 0.875, a
     fast start gliding to a soft landing. cubic-bezier(1/3, 1, 2/3, 1) IS that
     curve exactly (x(s) collapses to s). Closing mirrors it on t^3 — exactly
     cubic-bezier(1/3, 0, 2/3, 0) — and slightly faster. Transform + opacity
     only, so the whole flight is compositor-driven: the CSS analogue of DWM's
     GPU quads, VSYNC-smooth. Anchored popovers add a small translate toward
     their trigger (rule below), like DWM anchoring the scale origin to the
     launching taskbar icon. Motion vars only — the core's two-state rules are
     never touched; drawers keep the core's own translateX --spry-dialog-in
     (docked panels, not windows). */
  --spry-dialog-duration: 180ms;
  --spry-dialog-ease: cubic-bezier(0.3333, 1, 0.6667, 1);
  --spry-dialog-close-duration: 150ms;
  --spry-dialog-close-ease: cubic-bezier(0.3333, 0, 0.6667, 0);
  --spry-dialog-in: scale(0.92);

  /* ---- Controls: white wells, #abadb3 edge, blue focus halo ---- */
  --spry-control-bg: #ffffff;
  --spry-control-fg: var(--spry-fg);
  --spry-control-border: #abadb3;
  --spry-control-radius: 3px;
  --spry-control-padding-x: 0.65rem;
  --spry-control-padding-y: 0.35rem;
  --spry-focus-ring: 0 0 4px rgb(61 123 173 / 0.55);
  --spry-btn-bg: #e5e5e5;
  --spry-btn-fg: var(--spry-fg);
  --spry-btn-border: #707070;
  --spry-btn-bg-hover: #bee6fd;
  --spry-btn-bg-active: #98d1ef;

  /* ---- Aero recipes (aero/_tokens.scss, verbatim stops) ---- */
  --airy-btn: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
  --airy-btn-hover: linear-gradient(180deg, #eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
  --airy-btn-pressed: linear-gradient(180deg, #e5f4fc 0%, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%);
  --airy-gloss:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.22) 49%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.12) 100%);
  --airy-gloss-pressed: linear-gradient(180deg, rgb(0 0 0 / 0.14) 0%, rgb(0 0 0 / 0.05) 49%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.14) 100%);
  --airy-gel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 1px 2px rgb(0 0 0 / 0.25);
  --airy-hot: linear-gradient(180deg, #fafbfd 0%, #ebf3fd 100%);
  --airy-selected: linear-gradient(180deg, #dcebfc 0%, #c1dbfc 100%);
  /* Checkbox/radio marks (data: URIs from _controls.scss) */
  --airy-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2.9 6.3l2.4 2.6 4.9-5.6' fill='none' stroke='%23233c5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --airy-mixed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Crect x='3' y='3' width='7' height='7' fill='%231f9a35' stroke='%2317702a' stroke-width='.6'/%3E%3C/svg%3E");
  --airy-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cdefs%3E%3CradialGradient id='r' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23dff7ff'/%3E%3Cstop offset='.35' stop-color='%234fb6ea'/%3E%3Cstop offset='.8' stop-color='%2311528f'/%3E%3Cstop offset='1' stop-color='%230a3a6b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='6.5' cy='6.5' r='3.3' fill='url(%23r)'/%3E%3C/svg%3E");

  /* ---- Cards / tables / progress / popovers ---- */
  --spry-card-bg: var(--spry-surface);
  --spry-card-border: rgb(40 80 130 / 0.45);
  --spry-card-padding: 1.1rem;
  --spry-card-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8), 0 2px 8px rgb(0 40 90 / 0.18);
  --spry-table-header-bg: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #f3f4f6 100%);
  --spry-table-hover: var(--airy-hot);
  --spry-progress-bg: linear-gradient(180deg, #e6e6e6 0%, #f3f3f3 100%);
  --spry-progress-fg:
    linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.12) 49%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.25) 100%),
    linear-gradient(115deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / 0.6) 50%, rgb(255 255 255 / 0) 65%),
    linear-gradient(180deg, #2ec539 0%, #10b32c 49%, #06b025 50%, #0b9a25 100%);
  --spry-popover-bg: rgb(255 255 255 / 0.88);
  --spry-popover-border: rgb(60 100 140 / 0.55);
  /* $aero-window-frame verbatim: plain popovers get the frame as shadows only */
  --spry-popover-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8), 0 0 0 5px rgb(170 210 245 / 0.55),
    0 0 0 6px rgb(20 60 110 / 0.5), 0 12px 32px rgb(0 30 80 / 0.4);

  /* ---- Page: one simple fixed sky gradient + one soft white radial ---- */
  & body {
    background: radial-gradient(ellipse 120% 70% at 50% -10%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 60%),
      linear-gradient(180deg, #7ec8f5 0%, #a5d8f5 55%, #dff3e8 100%);
    background-color: #7ec8f5;
    background-attachment: fixed;
  }

  & ::selection { background: #3399ff; color: #fff; }
  & hr { border-top-color: #d5d5d5; box-shadow: 0 1px 0 rgb(255 255 255 / 0.6); }
  & :where(.btn, button):focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

  /* ---- Win7 push buttons. :where keeps (0,1,0) so core .btn-* variants and
     .btn-sm/.btn-lg (0,2,0) still win; variants are redefined after these. ---- */
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]) {
    background: var(--airy-btn);
    border: 1px solid #707070;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75);
    font-weight: 400;
  }
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):hover {
    background: var(--airy-btn-hover);
    border-color: #3c7fb1;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8);
  }
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):active {
    background: var(--airy-btn-pressed);
    border-color: #2c628b;
    box-shadow: inset 1px 1px 2px rgb(0 0 0 / 0.35);
  }
  /* Disabled buttons go flat grey, as Windows 7 draws them */
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):disabled {
    background: #f4f4f4;
    border-color: #adb2b5;
    box-shadow: none;
  }

  /* Primary: gel over the Win7 blue — colour under a gloss, glowing on hover */
  & .btn-primary { background: linear-gradient(180deg, rgb(255 255 255 / 0.15) 0%, rgb(255 255 255 / 0) 50%), #10689f; border-color: #0c4779; color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / 0.5); box-shadow: var(--airy-gel-shadow); }
  & .btn-primary:hover { background: var(--airy-gloss), #3087d0; border-color: #0a416c; box-shadow: var(--airy-gel-shadow), 0 0 10px rgb(20 119 201 / 0.8); }
  & .btn-primary:active { background: var(--airy-gloss-pressed), #1477c9; border-color: #0a416c; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.35); }

  /* Danger: glossy red gel */
  & .btn-danger { background: var(--airy-gloss), #cc3b2e; border-color: #7a231c; color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / 0.5); box-shadow: var(--airy-gel-shadow); }
  & .btn-danger:hover { background: var(--airy-gloss), #d25347; border-color: #702019; box-shadow: var(--airy-gel-shadow), 0 0 10px rgb(204 59 46 / 0.8); }
  & .btn-danger:active { background: var(--airy-gloss-pressed), #cc3b2e; border-color: #702019; box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.35); }

  /* Outline: clear glass with a coloured edge, filling with gel when hovered */
  & .btn-outline {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.7) 49%, rgb(225 235 245 / 0.55) 50%, rgb(240 245 250 / 0.8) 100%);
    border-color: rgb(11 71 121 / 0.65);
    color: #0b4779;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7);
  }
  & .btn-outline:hover { background: var(--airy-gloss), #bee6fd; border-color: #2c628b; color: #0a3f6e; box-shadow: var(--airy-gel-shadow), 0 0 10px rgb(20 119 201 / 0.7); }

  /* Ghost and link stay chrome-less (after the base rules, so they win) */
  & .btn-ghost, & .btn-link { background: none; border-color: transparent; box-shadow: none; text-shadow: none; }
  & .btn-link { border: 0; }
  & .btn-ghost:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.85) 0%, rgb(230 242 252 / 0.6) 100%); border-color: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8); }

  /* ---- Text fields: white wells; the reference's darker top edge. A local
     --spry-glass (the core's input box-shadow) adds the inner shadow. ---- */
  & :where(
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
    input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
    select, textarea, .input
  ) {
    border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
    border-radius: 2px;
    --spry-glass: inset 0 1px 2px rgb(120 165 205 / 0.35), inset 0 -1px 0 rgb(255 255 255 / 0.7);
  }
  & :where(input, textarea, select)::placeholder { color: #6d6d6d; font-style: italic; }

  /* Closed drop-down lists look like push buttons, as in the reference */
  & :where(select:not([size]):not([multiple])) { background-color: #fff; background-image: var(--airy-btn); }
  & :where(select:not([size]):not([multiple]):hover) { background-image: var(--airy-btn-hover); }

  /* ---- Checkboxes & radios: the Win7 13px well, shaded from the top left,
     lit blue on hover; a dark tick, a glossy radio dot, a green mixed square ---- */
  & input[type="checkbox"], & input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: -2px;
    border: 1px solid #8e8f8f;
    border-radius: 2px;
    background-color: #f4f4f4;
    background-image: var(--airy-mark, none), linear-gradient(135deg, #c3c8ce 0%, #e4e6e9 55%, #f8f8f8 100%);
    box-shadow: inset 0 0 0 1px #f4f4f4, inset 0 0 0 2px rgb(255 255 255 / 0.5);
  }
  & input[type="checkbox"]:hover, & input[type="radio"]:hover {
    border-color: #3c7fb1;
    background-image: var(--airy-mark, none), linear-gradient(135deg, #a9d9f8 0%, #d3eefd 55%, #f2fafe 100%);
    box-shadow: inset 0 0 0 1px #def3fd, inset 0 0 0 2px rgb(255 255 255 / 0.5);
  }
  & input[type="checkbox"]:active, & input[type="radio"]:active {
    border-color: #2c628b;
    background-image: var(--airy-mark, none), linear-gradient(135deg, #6fbdf0 0%, #b4e0fb 55%, #e2f4fe 100%);
  }
  & input[type="radio"] {
    border-radius: 50%;
    background-image: var(--airy-mark, none), radial-gradient(circle at 35% 30%, #f8f8f8 0%, #e1e3e6 50%, #c3c8ce 100%);
  }
  & input[type="radio"]:hover {
    background-image: var(--airy-mark, none), radial-gradient(circle at 35% 30%, #f2fafe 0%, #d3eefd 50%, #a9d9f8 100%);
  }
  & input[type="checkbox"]:checked { --airy-mark: var(--airy-tick); }
  & input[type="checkbox"]:indeterminate { --airy-mark: var(--airy-mixed); }
  & input[type="radio"]:checked { --airy-mark: var(--airy-dot); }

  /* ---- Switch: glossy pill track, pearl knob, blue gel when on ---- */
  & .switch .track { background: linear-gradient(180deg, #f4f6f8 0%, #dfe6ec 49%, #cfd8e0 50%, #e3e9ef 100%); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.4); }
  & .switch input:checked + .track { background: var(--airy-gloss), #1477c9; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 8px rgb(20 119 201 / 0.55); }
  & .switch .track::after { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f0f5fa 60%, #d8e2ec 100%); box-shadow: 0 1px 3px rgb(0 30 70 / 0.5), inset 0 1px 0 #ffffff; }

  /* ---- Topbar: the Win7 taskbar — #1d6fb8 glass, blur, a glowing brand in
     the start-orb pill, an accent #4fc8ff bottom edge ---- */
  & .topbar {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0.05) 49%, rgb(0 25 50 / 0.22) 50%, rgb(0 25 50 / 0) 100%), rgb(12 60 112 / 0.95);
    border-bottom-color: rgb(6 36 74 / 0.65);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 0 rgb(79 200 255 / 0.55), 0 6px 18px rgb(0 30 70 / 0.35);
  }
  & .topbar .topbar-brand {
    padding: 0.15rem 0.85rem;
    border: 1px solid rgb(0 20 50 / 0.7);
    border-radius: var(--spry-radius-pill);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.25) 0%, rgb(255 255 255 / 0.05) 48%, rgb(255 255 255 / 0) 52%),
      radial-gradient(ellipse 80% 70% at 50% 100%, #5fc8f0 0%, #1173c4 45%, #0a3f80 100%);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45), 0 0 10px rgb(110 215 255 / 0.75);
    text-shadow: 0 1px 2px rgb(0 20 50 / 0.85), 0 0 10px rgb(79 200 255 / 0.85);
  }
  & .topbar .topbar-brand:hover { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 0 18px 2px rgb(140 235 255 / 0.9); }

  /* Taskbar buttons: glass on hover, lit from below when active */
  & .topbar .nav a { color: #eaf6ff; border: 1px solid transparent; border-radius: 3px; text-shadow: 0 0 6px rgb(0 20 50 / 0.9); }
  & .topbar .nav a:hover {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.35) 0%, rgb(255 255 255 / 0.1) 49%, rgb(255 255 255 / 0.04) 50%, rgb(255 255 255 / 0.2) 100%);
    border-color: rgb(0 0 0 / 0.45);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
  }
  & .topbar .nav a.active {
    background: radial-gradient(ellipse 75% 65% at 50% 100%, rgb(150 230 255 / 0.3), rgb(150 230 255 / 0) 75%),
      linear-gradient(180deg, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.06) 49%, rgb(255 255 255 / 0.03) 50%, rgb(255 255 255 / 0.14) 100%),
      rgb(10 52 98 / 0.95);
    border-color: rgb(0 0 0 / 0.5);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 0 8px rgb(120 220 255 / 0.6);
  }
  & .topbar .breadcrumb, & .topbar .breadcrumb li + li::before { color: #d9efff; }
  & .topbar .breadcrumb a { color: #bfe9ff; }
  & .topbar .breadcrumb a:hover, & .topbar .breadcrumb [aria-current] { color: #fff; }

  /* ---- Nav (page level): chips with Explorer hot/selected states ---- */
  & .nav a { color: #1e3287; border: 1px solid transparent; border-radius: 3px; }
  & .nav a:hover { background: var(--airy-hot); border-color: #b8d6fb; color: #0a3f6e; }
  & .nav a.active { background: var(--airy-selected); border-color: #7da2ce; color: #1e3287; }

  /* ---- Menus: COMPACT Win7 menus — white face, 1px #7f9db9 border, 3px
     radius, 2px container padding, an icon gutter behind 24px-indented rows
     22px tall; hover is the glossy blue gradient with white text ---- */
  & .submenu, & .popover-menu {
    padding: 2px;
    background: linear-gradient(90deg, transparent 24px, #e2e3e3 24px 25px, #ffffff 25px 26px, transparent 26px), #ffffff;
    border: 1px solid #7f9db9;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgb(20 60 110 / 0.3);
  }
  & .submenu a, & .popover-menu a, & .popover-menu button, & .menu a {
    min-height: 22px;
    padding: 4px 10px 4px 24px;
    border-radius: 2px;
    color: #1e1e1e;
  }
  & .submenu a:hover, & .popover-menu a:hover, & .popover-menu button:hover {
    background: var(--airy-gloss), linear-gradient(180deg, #71b4ee 0%, #2f80cf 100%);
    color: #ffffff;
    text-shadow: 0 1px 1px rgb(0 20 50 / 0.5);
  }
  & .submenu a.active, & .popover-menu a.active, & .menu a.active { background: var(--airy-selected); color: #1e3287; }
  & .menu a { padding-left: 8px; }
  & .menu a:hover { background: linear-gradient(180deg, #fafbfd 0%, #ebf3fd 100%); color: #0a3f6e; }
  /* The core nests .submenu statically inside .menu: keep it unboxed there */
  & .menu .has-submenu .submenu { background: none; border: 0; box-shadow: none; }

  /* ---- Cards: white glass panes with a gloss across the top ---- */
  & .card { background-color: var(--spry-card-bg); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.9) 0, rgb(235 245 255 / 0.45) 2.2rem, rgb(255 255 255 / 0) 2.3rem); }
  & .card-header { background: linear-gradient(180deg, #f9fcfe 0%, #e9f1fb 49%, #dce7f5 50%, #e3edf9 100%); border-bottom-color: #a0afc3; color: #1e3287; }
  & .card-footer { background: linear-gradient(180deg, rgb(240 246 252 / 0.6), rgb(228 238 247 / 0.85)); }

  /* ---- Dialogs & window popovers: ONE Aero glass frame — a translucent
     glass border (the border zone shows the blurred backdrop because the
     background is clipped to the padding box) plus the frame stack's white
     inner edge, dark outline and drop shadow. No transform/opacity/transition
     is touched: the core's two-state animation runs on the motion vars. ---- */
  & dialog, & [popover]:has(> .dialog-titlebar, > .dialog-body, > .dialog-footer) {
    border: 1px solid rgb(0 0 0 / 0.7);
    border-radius: 6px;
    background: #f0f4f8;
    box-shadow: 2px 2px 10px 1px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.67);
  }
  & .dialog-titlebar {
    border: 0;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to right, rgb(255 255 255 / 0.4), rgb(0 0 0 / 0.1) 50%, rgb(255 255 255 / 0.2)), #4580c4;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 1), inset 1px 0 0 rgb(255 255 255 / 1), inset -1px 0 0 rgb(255 255 255 / 1);
    padding-top: 0.4rem;
  }
  & .dialog-title {
    color: #000;
    font-weight: 400;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 4px #fff;
  }

  /* The caption close button: a 7.css window control on glass */
  & .dialog-close {
    background: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.3) 45%, rgb(0 0 0 / 0.1) 50%, rgb(0 0 0 / 0.1) 75%, rgb(255 255 255 / 0.5));
    border: 1px solid rgb(0 0 0 / 0.3);
    border-radius: 4px;
    color: #000;
    text-shadow: 0 0 6px #fff, 0 0 6px #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.67);
  }
  & .dialog-close:hover {
    background: radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 50%);
    color: #fff;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.5);
  }
  & .dialog-close:active {
    background: radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 50%);
    color: #fff;
  }

  & .dialog-body {
    background: #ffffff;
    border: 1px solid rgb(0 0 0 / 0.7);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6);
    margin: 6px;
    margin-top: 0;
  }
  & .dialog-footer {
    border: 1px solid rgb(0 0 0 / 0.7);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: #f0f0f0;
    box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.3), inset 0 2px 0 rgb(255 255 255 / 0.6);
    margin: 0 6px 6px;
  }

  /* Anchored popovers emerge toward their trigger: the core drops them below
     the anchor (position-area: bottom), so they start 0.4rem closer to it and
     glide down into place while scaling up — DWM anchoring the scale origin to
     the launching point. Same specificity as the .popover-menu padding rules
     but none of them set --spry-dialog-in, and this is the file's only setter
     outside the tokens block, so the cascade is unambiguous. */
  & .popover-anchor {
    --spry-dialog-in: translateY(-0.4rem) scale(0.92);
  }

  /* Drawers are docked glass bars, not framed windows: reset the frame (this
     follows the frame rule on purpose) and light the docked edge instead */
  & [popover].drawer-left, & [popover].drawer-right { border: 0; border-radius: 0; background-clip: border-box; }
  & [popover].drawer-left { border-right: 1px solid rgb(60 100 140 / 0.55); box-shadow: -6px 0 0 rgb(170 210 245 / 0.55), -7px 0 0 rgb(20 60 110 / 0.5), -12px 0 32px rgb(0 30 80 / 0.4); }
  & [popover].drawer-right { border-left: 1px solid rgb(60 100 140 / 0.55); box-shadow: 6px 0 0 rgb(170 210 245 / 0.55), 7px 0 0 rgb(20 60 110 / 0.5), 12px 0 32px rgb(0 30 80 / 0.4); }
  & .drawer-left .dialog-titlebar, & .drawer-right .dialog-titlebar,
  & .drawer-left .dialog-footer, & .drawer-right .dialog-footer { border-radius: 0; }

  /* ---- Tabs: Vista/Win7 — glossy gradient labels, 3px 3px 0 0 corners, a
     bright border-top; the active label is white and connected to the panel
     (the core's nth-of-type chains are mirrored to restyle it) ---- */
  & .tab-list { border-bottom-color: #898c95; }
  & .tab-list label {
    padding: 0.45rem 0.9rem;
    border: 1px solid #898c95;
    border-top-color: #aeb4bc;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #f3f3f3 0%, #e1e1e1 100%);
    color: #1e1e1e;
  }
  & .tab-list label:hover { background: var(--airy-btn-hover); color: #0a3f6e; }
  & .tabs > input:nth-of-type(1):checked ~ .tab-list label:nth-of-type(1),
  & .tabs > input:nth-of-type(2):checked ~ .tab-list label:nth-of-type(2),
  & .tabs > input:nth-of-type(3):checked ~ .tab-list label:nth-of-type(3),
  & .tabs > input:nth-of-type(4):checked ~ .tab-list label:nth-of-type(4),
  & .tabs > input:nth-of-type(5):checked ~ .tab-list label:nth-of-type(5),
  & .tabs > input:nth-of-type(6):checked ~ .tab-list label:nth-of-type(6) {
    margin-bottom: -1px;
    padding-bottom: calc(0.45rem + 1px);
    border-color: #898c95;
    border-bottom: 1px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, #e8f1fb 100%);
    color: #1e3287;
    box-shadow: inset 0 1px 0 #ffffff;
  }

  /* ---- Tables: Explorer's details view — pale gradient header band with
     column dividers, hot rows on hover, selected rows ---- */
  & thead th {
    background: var(--spry-table-header-bg);
    color: #4c607a;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid #d5d5d5;
    box-shadow: inset -1px 0 0 #e5e5e5;
  }
  & .table-hover tbody tr:hover { background: var(--airy-hot); box-shadow: inset 0 1px 0 #b8d6fb, inset 0 -1px 0 #b8d6fb; }
  & tbody tr[aria-selected="true"] { background: var(--airy-selected); box-shadow: inset 0 1px 0 #7da2ce, inset 0 -1px 0 #7da2ce; }

  /* ---- Progress: the Win7 bar — green #06b025 under a gloss with a shine
     sweeping along it (aero-progress-shine ported to native <progress>; a
     ::after dies inside progress pseudos, so the shine is background layer 2,
     300% wide, slid by keyframes; engine rules stay separate) ---- */
  /* Progress, ported from the 7.css reference: a beveled groove with
     end-dip shading, glossy green fill, and a marquee shine that travels
     then pauses (60% move / 40% hold, exactly like the reference) */
  & progress {
    height: 0.9rem;
    border: 1px solid #7f9db9;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgb(243 243 243 / 0.53), 0 0 0 1px rgb(234 234 234 / 0.53);
    overflow: hidden;
    background:
      radial-gradient(circle at 0 50%, rgb(0 0 0 / 0.12) 10px, transparent 30px),
      radial-gradient(circle at 100% 50%, rgb(0 0 0 / 0.12) 10px, transparent 30px),
      linear-gradient(to bottom, rgb(243 243 243 / 0.68), rgb(252 252 252 / 0.68) 3px, rgb(219 219 219 / 0.68) 6px, rgb(202 202 202 / 0.68) 6px, rgb(213 213 213 / 0.68)),
      #ddd;
  }

  & progress::-webkit-progress-bar { background: transparent; }

  /* Determinate: glossy green with the 7.css traveling shine (layer 1,
     300% wide, swept by airy-progress-shine). The shine stops once the bar
     is complete: add .is-complete (value = max). */
  & progress:not(.is-complete)::-webkit-progress-value,
  & progress:not(.is-complete)::-moz-progress-bar {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
    background-color: #0bd82c;
    background-image:
      linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 0.4) 50%, transparent 75%),
      linear-gradient(to bottom, rgb(243 243 243 / 0.68), rgb(252 252 252 / 0.68) 3px, rgb(219 219 219 / 0.68) 6px, transparent 6px),
      radial-gradient(circle at 0% 50%, rgb(0 0 0 / 0.18) 10px, transparent 30px),
      radial-gradient(circle at 100% 50%, rgb(0 0 0 / 0.18) 10px, transparent 30px),
      linear-gradient(to bottom, transparent 65%, rgb(255 255 255 / 0.33));
    background-size: 300% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: airy-progress-shine 2.4s ease-in-out infinite;
  }

  & progress.is-complete::-webkit-progress-value,
  & progress.is-complete::-moz-progress-bar {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
    background-color: #0bd82c;
    background-image:
      linear-gradient(to bottom, rgb(243 243 243 / 0.68), rgb(252 252 252 / 0.68) 3px, rgb(219 219 219 / 0.68) 6px, transparent 6px),
      linear-gradient(to bottom, transparent 65%, rgb(255 255 255 / 0.33));
  }

  /* Indeterminate: the 7.css marquee — the EMPTY groove with a soft green
     sweep crossing it (enter, cross by 60% of the cycle, then hold) */
  & progress:indeterminate {
    background:
      linear-gradient(to right, transparent, rgb(11 216 44 / 0.55) 50%, transparent 100%) 0 50% / 35% 100% no-repeat,
      radial-gradient(circle at 0% 50%, rgb(0 0 0 / 0.12) 10px, transparent 30px),
      radial-gradient(circle at 100% 50%, rgb(0 0 0 / 0.12) 10px, transparent 30px),
      linear-gradient(to bottom, rgb(243 243 243 / 0.68), rgb(252 252 252 / 0.68) 3px, rgb(219 219 219 / 0.68) 6px, rgb(202 202 202 / 0.68) 6px, rgb(213 213 213 / 0.68)),
      #ddd;
    animation: airy-marquee 3s linear infinite;
  }

  /* The busy ring glows */
  & .spinner { border-color: rgb(90 180 240 / 0.25); border-top-color: #1e90e8; border-right-color: #7fdcff; filter: drop-shadow(0 0 3px rgb(80 190 255 / 0.8)); }

  /* ---- Alerts & badges: a white fade over the tint; little gel pills ---- */
  & .alert { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.65) 0%, rgb(255 255 255 / 0) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); }
  & .alert-danger { color: #a8281c; }
  & .alert-success { color: #1e6b28; }
  & .alert-warning { color: #7a5410; }
  & .alert-info { color: #0c5f78; }
  & .hero-eyebrow { color: #0a587f; }
  & .badge { color: #0f5f9e; }
  & .badge { padding-inline: 0.6em; background-image: linear-gradient(180deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0.12) 49%, rgb(0 0 0 / 0.06) 50%, rgb(255 255 255 / 0.15) 100%); border: 1px solid rgb(0 0 0 / 0.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }

  /* ---- Hero: a frosted band over the sky with an aqua glow ---- */
  & .hero {
    background: radial-gradient(60rem 24rem at 50% -8rem, rgb(79 200 255 / 0.28), rgb(255 255 255 / 0) 70%), rgb(255 255 255 / 0.55);
    border-block-color: rgb(154 194 224 / 0.75);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -1px 0 rgb(255 255 255 / 0.5);
    backdrop-filter: var(--spry-glass);
  }

  /* ---- Avatars: glass portrait chips ---- */
  & .avatar { background: linear-gradient(180deg, rgb(255 255 255 / 0.95) 0%, rgb(214 236 251 / 0.85) 100%); border: 1px solid rgb(120 170 210 / 0.7); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 1px 3px rgb(20 90 160 / 0.25); }
  & .avatar-group .avatar { border: 2px solid #dff3f8; }

  /* ---- OTP: bright frosted wells for single characters ---- */
  & .otp input { background: linear-gradient(180deg, rgb(255 255 255 / 0.95) 0%, rgb(238 247 253 / 0.95) 100%); border-color: #9bb7cc; }

  /* ---- Pagination: pages are push buttons; the current page is a blue gel ---- */
  & .pagination a { background: var(--airy-btn); border-color: #707070; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75); }
  & .pagination a:hover { background: var(--airy-btn-hover); border-color: #3c7fb1; color: #0a3f6e; }
  & .pagination [aria-current="page"] { background: linear-gradient(180deg, rgb(255 255 255 / 0.15) 0%, rgb(255 255 255 / 0) 50%), #10689f; border-color: #0c4779; color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / 0.5); box-shadow: var(--airy-gel-shadow); }

  /* ---- Breadcrumb: Explorer address-bar links, hot on hover ---- */
  & .breadcrumb a { padding: 1px 5px; border-radius: 2px; }
  & .breadcrumb a:hover { background: var(--airy-hot); color: #0066cc; text-decoration: none; }

  /* ---- Expanders: Explorer nav-pane group headers ---- */
  & details { background: #ffffff; border-color: #b6c6d8; }
  & summary:hover { background: linear-gradient(180deg, #fafbfd 0%, #ebf3fd 100%); }
  & details[open] > summary { background: linear-gradient(180deg, #fdfeff 0%, #eaf1fa 100%); color: #1e3287; }

  /* ---- Fieldset: a Win7 groupbox; kbd: a little push button ---- */
  & fieldset { border-color: #b6c6d8; border-radius: 3px; }
  & legend { color: #003399; font-weight: 400; }
  & kbd { background: var(--airy-btn); border: 1px solid #707070; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75), 0 1px 0 rgb(0 30 80 / 0.2); }
  & :not(pre) > code { background: #eff6fb; border-color: rgb(154 194 224 / 0.7); }

  /* ---- Win7 scrollbars: a guttered track, a push-button thumb (Chromium
     pseudos; Firefox keeps its native bars) ---- */
  & ::-webkit-scrollbar { width: 16px; height: 16px; }
  & ::-webkit-scrollbar-track { background: linear-gradient(90deg, #e3e3e3 0%, #f6f6f6 30%, #f0f0f0 100%); }
  & ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #f3f3f3 0%, #e8e8e8 49%, #d8d8d8 50%, #cacaca 100%); border: 1px solid #959595; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8); }
  & ::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #e3f4fc 0%, #d6eef9 49%, #b9e0f5 50%, #a7d9f5 100%); border-color: #3c7fb1; }
}