/* Kapable design language 1.47.0: tokens.
   Source: kv2-launchpad static/next/next.css after D30 (the /next desktop).
   Every custom property name and value below is copied verbatim from that file, except the
   Glass material block at the end (1.46.0, D109; 1.47.0, D110), which the language leads and /next adopts.
   Only the dark-theme selectors differ: /next keys its own theme on data-kd-theme,
   apps key on data-theme. check-drift.py proves this file and next.css agree.

   Do not change a value here first. Change next.css, then copy it here with
   check-drift.py green (DESIGN.md, "How to change the language").

   The four --accent tokens hold a default (#ab4725). Every app must replace them
   with the org's colour at runtime, in both themes (DESIGN.md, "The org accent"). */

:root {
  --host-top: 0px;
  --host-bottom: 0px;
  --font-sans: 'InterK', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --menubar-h: 36px;
  --dock-h: 74px;
  /* Motion (1.26.0, D94): five durations and three curves. Things that arrive use --ease-out or
     --ease; things that leave use --ease-in and a shorter duration (DESIGN.md section 15). */
  --motion-press: 80ms;
  --motion-fast: 120ms;
  --motion-enter: 160ms;
  --motion-move: 240ms;
  --motion-window: 280ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --accent: #ab4725;
  --accent-text: #ab4725;
  --accent-soft: rgb(171 71 37 / 0.12);
  --accent-wash: rgb(171 71 37 / 0.12);
  --accent-ring: var(--accent-text);
  --accent-ring-desk: color-mix(in srgb, var(--accent-text) 8%, #000);

  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --hover: rgb(20 24 32 / 0.06);
  --press: rgb(20 24 32 / 0.1);
  --pressed: rgb(20 24 32 / 0.15);
  --field: rgb(20 24 32 / 0.05);
  --chrome: rgb(250 251 252 / 0.8);
  --w-bg: #ffffff;
  --w-line: rgb(255 255 255 / 0.6);
  /* The title bar of the window in use (D72) and its three inks, so a look can draw its own bar
     (presets D38). In a look whose accent reach is action-only it never takes the accent. */
  --w-bar-key: var(--accent-wash);
  --w-bar-key-text: var(--text);
  --w-bar-key-text-2: var(--text-2);
  --w-bar-key-text-3: var(--text-3);
  /* A person's avatar: the accent, or the look's ink in an action-only look (presets D34). */
  --avatar-fill: var(--accent);
  /* Its initials: white, or in an action-only look whichever of white and the look's ground reads
     on its ink (a light ink in dark, PLAT-1153). */
  --avatar-text: #ffffff;
  /* Text on an accent fill: the primary button, a send button, the switch knob, a selected desk
     tile's name. White, or a look's own ink where its dark button turns light (presets D45). */
  --on-accent: #ffffff;
  --line: rgb(18 22 30 / 0.09);
  --line-strong: rgb(18 22 30 / 0.15);
  --text: #16181d;
  --text-2: #4b515c;
  --text-3: #5f6673;
  --ok: #137b43;
  --ok-fill: #126b37;
  --ok-soft: rgb(23 138 76 / 0.12);
  --warn: #97610a; /* 4.56:1 on --surface-3/--bg, 4.90:1 on --surface-2, 5.21:1 on --surface (PLAT-1200) */
  --bad: #bd3737; /* 4.88:1 on --surface-3/--bg, 5.58:1 on --surface; white on it 5.58:1 (Folio finding, D37) */
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #d5d8de;
  --shadow-pop: 0 0 0 1px rgb(18 22 30 / 0.06), 0 12px 32px -8px rgb(12 16 24 / 0.24), 0 4px 10px -4px rgb(12 16 24 / 0.12);
  --shadow-widget: 0 1px 1px rgb(12 16 24 / 0.06), 0 10px 28px -10px rgb(12 16 24 / 0.32);
  --shadow-win: 0 0 0 1px rgb(18 22 30 / 0.1), 0 26px 56px -14px rgb(8 10 16 / 0.42), 0 10px 20px -8px rgb(8 10 16 / 0.2);
  --shadow-win-idle: 0 0 0 1px rgb(18 22 30 / 0.09), 0 12px 30px -12px rgb(8 10 16 / 0.3);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 18px 40px -12px rgb(8 10 16 / 0.4);
  /* App icons on the desk and in the dock, and the desk's folder tile: their shadows, the folder
     tile's ground and corner. A flat look sets the shadows to none (PLAT-1271). */
  --icon-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.2)) drop-shadow(0 5px 12px rgb(0 0 0 / 0.22));
  --dock-icon-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18)) drop-shadow(0 4px 8px rgb(0 0 0 / 0.16));
  --folder-tile-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 5px 12px rgb(0 0 0 / 0.18);
  --folder-tile-bg: rgb(245 247 251 / 0.82);
  --folder-tile-radius: calc(var(--radius-tile) * 15 / 14);
  --label: #ffffff;
  --label-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 8px rgb(0 0 0 / 0.32);
  /* The desk's own text on its wallpaper (greeting, tile names; group titles and empty notes; the
     date line), its shadow, and the scrim behind the desk's left side. A look with a pale day
     wallpaper sets them to a dark ink, and the desktop uses that ink only while the look's own
     wallpaper is on screen (presets D42, PLAT-1153). --label stays white for text on an image. */
  --desk-text: var(--label);
  --desk-text-2: rgb(255 255 255 / 0.86);
  --desk-text-3: rgb(255 255 255 / 0.84);
  --desk-text-shadow: var(--label-shadow);
  --desk-scrim: linear-gradient(90deg, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0) 46%);
  --scroll-thumb: color-mix(in srgb, var(--text) 36%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text) 52%, transparent);
  /* Preset tokens (taste presets, DESIGN 2.1; PLAT-1171). Each holds the value the rules below
     use today, so the default look is unchanged. No rule reads them yet: PLAT-1147 moves the
     rules onto them, and a preset overrides them. */
  /* Corners per shape role. Button and field are separate roles (presets D26). */
  --radius-tag: 6px;
  --radius-row: 7px;
  --radius-button: 8px;
  --radius-field: 8px;
  --radius-note: 10px;
  --radius-card: 12px;
  --radius-sheet: 18px;
  --radius-launcher: 16px;
  --radius-dock: 21px;
  --radius-tile: 14px;
  /* A button that holds only a glyph; it follows the button corner unless a look sets its own
     (presets D38). */
  --radius-icon-button: var(--radius-button);
  /* Type: size per role, heading weight, tracking on large titles, faces and their features. */
  --type-badge: 9.5px;
  --type-tag: 11px;
  --type-meta: 12px;
  --type-secondary: 12.5px;
  --type-control: 13px;
  --type-description: 13.5px;
  --type-body: 14px;
  --type-subheading: 15px;
  --type-dialog-title: 17px;
  --type-view-title: 22px;
  --type-greeting: 30px;
  --heading-weight: 650;
  --title-tracking: -0.015em;
  /* Titles set in the display face (view, notes and dialog titles) and the text of controls,
     menu items, row titles and labels, each apart from the heading weight (presets D38). */
  --title-weight: var(--heading-weight);
  --control-weight: 600;
  --font-ui: var(--font-sans);
  --font-display: var(--font-sans);
  --font-ui-features: 'cv11', 'ss01';
  --font-display-features: 'cv11', 'ss01';
  /* Body text and the titles of list rows, apart from controls and titles: a window's address and
     page name, launcher and window-switcher rows, voice lines. kapable sets them in the UI face at
     the control weight; a look may give them a face and weight of their own (presets D45). */
  --font-body: var(--font-ui);
  --row-title-weight: var(--control-weight);
  /* Density: padding and gaps are written as today's pixels times the factor. */
  --control-h: 30px;
  --row-h: 32px;
  /* Rows of a list (launcher results, window switcher, start doors, first-run actions, voice
     lines), apart from menu rows above (presets D37). */
  --list-row-h: 36px;
  --pad-factor: 1;
  /* Depth and edges. The window, popover, widget and dock shadows are the tokens above. */
  --shadow-banner: var(--shadow-pop), inset 0 0 0 1px var(--line);
  --shadow-launcher: 0 0 0 1px var(--line), 0 30px 80px -20px rgb(0 0 0 / 0.5);
  --shadow-toast: 0 10px 30px -8px rgb(0 0 0 / 0.5);
  --card-edge: inset 0 0 0 1px var(--line);
  /* The edge of a control (buttons, fields, the segmented control, composers, swatches), apart
     from a card's so a look can edge one and not the other (PLAT-1153). */
  --control-edge: inset 0 0 0 1px var(--line);
  --row-rule: none;
  --chrome-blur: saturate(1.7) blur(22px);
  /* The dock's own blur, a little stronger than the menu bar's. A look with blur off sets both
     to none (PLAT-1153). */
  --dock-blur: blur(24px) saturate(1.7);
  /* The primary button's raised shading (presets D38). */
  --shadow-primary: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.12);
  /* Control glyphs, the accent's reach (presets D27) and the theme for a person who never chose
     (presets D6). */
  --glyph-stroke: 1.6;
  --glyph-cap: round;
  --glyph-join: round;
  --accent-reach: full;
  --default-theme: auto;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Scrollbars: a transparent track and a quiet text-colour thumb in both themes.
   Firefox and Chromium read scrollbar-color; Safari paints the pseudo-elements. */
*:not(:root):not(body):hover {
  scrollbar-color: var(--scroll-thumb-hover) transparent;
}
*::-webkit-scrollbar {
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px; /* raw: scrollbar thumb, browser chrome, no shape role (PLAT-1147) */
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
/* The square where two scrollbars meet is opaque white by default (D56). */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark: follows the system unless the page sets data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
    --accent-ring-desk: var(--accent-ring);
    --bg: #0e0f12;
    --surface: #17181c;
    --surface-2: #1c1d22;
    --surface-3: #25272d;
    --hover: rgb(255 255 255 / 0.07);
    --press: rgb(255 255 255 / 0.11);
    --pressed: rgb(255 255 255 / 0.16);
    --field: rgb(255 255 255 / 0.06);
    --chrome: rgb(24 25 30 / 0.76);
    --w-bg: #1a1b20;
    --w-line: rgb(255 255 255 / 0.07);
    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.14);
    --text: #eceef2;
    --text-2: #b4bac4;
    --text-3: #969ca8;
    --ok: #4cc488;
    --ok-fill: #126b37;
    --ok-soft: rgb(76 196 136 / 0.14);
    --warn: #e0a441;
    --bad: #f06a6a;
    --bad-fill: #b52626;
    --neutral-fill: #4b515c;
    --light-idle: #3b3e45;
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
    --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
    --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
    --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
    --folder-tile-bg: rgb(42 46 56 / 0.86);
  }
}

/* Dark: chosen explicitly. */
:root[data-theme="dark"] {
  --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
  --accent-ring-desk: var(--accent-ring);
  --bg: #0e0f12;
  --surface: #17181c;
  --surface-2: #1c1d22;
  --surface-3: #25272d;
  --hover: rgb(255 255 255 / 0.07);
  --press: rgb(255 255 255 / 0.11);
  --pressed: rgb(255 255 255 / 0.16);
  --field: rgb(255 255 255 / 0.06);
  --chrome: rgb(24 25 30 / 0.76);
  --w-bg: #1a1b20;
  --w-line: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #eceef2;
  --text-2: #b4bac4;
  --text-3: #969ca8;
  --ok: #4cc488;
  --ok-fill: #126b37;
  --ok-soft: rgb(76 196 136 / 0.14);
  --warn: #e0a441;
  --bad: #f06a6a;
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #3b3e45;
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
  --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --folder-tile-bg: rgb(42 46 56 / 0.86);
}

/* Always-dark region (1.12.0, D76): an element with data-scheme="dark" and everything inside it
   takes the dark values in both themes, for a surface that stays dark whatever the page does:
   a call room around live video, a photo or video viewer. The values are the dark block's,
   verbatim (check-drift.py proves it). The scrollbar thumb is declared again because its
   :root value was computed from the page's --text. The app also runs applyAccent() on the
   region element with dark = true (DESIGN.md section 7), so links and fills inside it take
   the dark accent while the page around it keeps the light one. */
[data-scheme="dark"] {
  color-scheme: dark;
  --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
  --accent-ring-desk: var(--accent-ring);
  --bg: #0e0f12;
  --surface: #17181c;
  --surface-2: #1c1d22;
  --surface-3: #25272d;
  --hover: rgb(255 255 255 / 0.07);
  --press: rgb(255 255 255 / 0.11);
  --pressed: rgb(255 255 255 / 0.16);
  --field: rgb(255 255 255 / 0.06);
  --chrome: rgb(24 25 30 / 0.76);
  --w-bg: #1a1b20;
  --w-line: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #eceef2;
  --text-2: #b4bac4;
  --text-3: #969ca8;
  --ok: #4cc488;
  --ok-fill: #126b37;
  --ok-soft: rgb(76 196 136 / 0.14);
  --warn: #e0a441;
  --bad: #f06a6a;
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #3b3e45;
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
  --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --folder-tile-bg: rgb(42 46 56 / 0.86);
  --scroll-thumb: color-mix(in srgb, var(--text) 36%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text) 52%, transparent);
  /* Preset tokens built from --line and --shadow-pop resolve where they are declared, so the
     region declares them again to take its dark line and shadow (1.30.0). */
  --shadow-banner: var(--shadow-pop), inset 0 0 0 1px var(--line);
  --shadow-launcher: 0 0 0 1px var(--line), 0 30px 80px -20px rgb(0 0 0 / 0.5);
  --card-edge: inset 0 0 0 1px var(--line);
  /* The same for the control edge and the key title bar, which resolve from --line, the accent
     wash and the text levels (1.31.0). */
  --control-edge: inset 0 0 0 1px var(--line);
  --w-bar-key: var(--accent-wash);
  --w-bar-key-text: var(--text);
  --w-bar-key-text-2: var(--text-2);
  --w-bar-key-text-3: var(--text-3);
  --avatar-fill: var(--accent);
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Phone: the /next shell's own menu bar and dock grow for touch. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  :root {
    --menubar-h: 52px;
    --dock-h: 84px;
    /* Preset tokens whose phone value differs today (PLAT-1171). */
    --radius-dock: 24px;
    --type-greeting: 26px;
  }
}

/* Reduced motion: every animation and transition finishes at once. Scripted motion reads the
   --motion-* durations as 0 and does not start (DESIGN.md section 15). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important; /* raw: reduced motion turns animation off (PLAT-1147) */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; /* raw: reduced motion turns transitions off (PLAT-1147) */
  }
}

/* Pages of one app crossfade (1.27.0, D95). A link or a form that loads another page of the same
   app fades the old page into the new one over --motion-enter instead of flashing blank. Chrome
   and Safari run it, inside a desktop window's frame too; Firefox loads the page as before. Under
   reduced motion the rule is off, so the page changes at once (DESIGN.md section 15, rule 10). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-enter);
  animation-timing-function: var(--ease);
}

/* Glass material (1.46.0, D109). Off unless an organisation chooses it.
   The switch: data-material="glass" on <html>, or on a container. Standard is the attribute
   absent or any other value; nothing below matches then, so Standard draws exactly as before.
   An element takes Glass only when it names its role: data-material-role="bar", "panel",
   "surface", "popover" or "dialog", or "clear" for a ground inside one of them. Glass changes
   the material and nothing else: the ground turns translucent over a blur of what lies behind, with the declared sheen (by day) and a 1 px rim
   light. Corners, type, density, colours, icons, wallpaper and shadows stay the look's own.
   Each role keeps its own ground (--glass-ground, else the role's default below) at a strength
   measured so every text colour of the language holds 4.5:1 over the darkest and the lightest
   colour the package's wallpapers paint, and over white and black where a pane lies over an
   app's own content (DESIGN.md section 16). A pane over content says data-material-over="content";
   a pane whose top edge is another pane's bottom line says data-material-rim="none".
   Solid again: prefers-reduced-transparency: reduce, data-transparency="reduce" on the root or
   any container, and a browser without backdrop blur or color-mix(). */
[data-material="glass"] {
  --glass-blur: blur(24px) saturate(1.7);
  --glass-bar: 94%;
  --glass-panel: 97%;
  --glass-popover: 95%;
  --glass-dialog: 100%;
  --glass-surface: 98%;
  --glass-sheen: linear-gradient(160deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.04) 38%, rgb(255 255 255 / 0.04) 68%, rgb(255 255 255 / 0.2));
  --glass-rim: rgb(255 255 255 / 0.9);
}

/* Glass, dark: follows the system unless the page sets data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-material="glass"],
  :root:not([data-theme="light"]) [data-material="glass"] {
    --glass-bar: 72%;
    --glass-panel: 90%;
    --glass-popover: 95%;
    --glass-dialog: 100%;
    --glass-surface: 93%;
    --glass-sheen: none;
    --glass-rim: rgb(255 255 255 / 0.14);
  }
}

/* Glass, dark: chosen explicitly. */
:root[data-theme="dark"][data-material="glass"],
:root[data-theme="dark"] [data-material="glass"] {
  --glass-bar: 72%;
  --glass-panel: 90%;
  --glass-popover: 95%;
  --glass-dialog: 100%;
  --glass-surface: 93%;
  --glass-sheen: none;
  --glass-rim: rgb(255 255 255 / 0.14);
}

/* Glass in an always-dark region (D76). The region can sit on a light page over the day
   wallpaper, or hold a photo or a video, so its panes are measured over white and keep more of
   their dark ground. */
[data-material="glass"] [data-scheme="dark"],
:root [data-material="glass"][data-scheme="dark"],
:root [data-scheme="dark"] [data-material="glass"] {
  --glass-bar: 93%;
  --glass-panel: 94%;
  --glass-popover: 95%;
  --glass-dialog: 100%;
  --glass-surface: 96%;
  --glass-sheen: none;
  --glass-rim: rgb(255 255 255 / 0.14);
}

/* Glass over an app's own content (1.47.0, D110): a head that a list scrolls under, a sheet or
   side panel opened over the page, a window over another window. The pane, or a container of such
   panes, says so with data-material-over="content". In dark it keeps the always-dark strengths,
   which are measured over white and black; in light every role already holds there. Popovers and
   dialogs open over whatever is there, so their own strengths are measured over white and black.
   These blocks set the strengths only: a rim or sheen here would outweigh data-material-rim. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is([data-material="glass"] [data-material-over="content"], [data-material="glass"][data-material-over="content"]) {
    --glass-bar: 93%;
    --glass-panel: 94%;
    --glass-popover: 95%;
    --glass-dialog: 100%;
    --glass-surface: 96%;
  }
}
:root[data-theme="dark"] :is([data-material="glass"] [data-material-over="content"], [data-material="glass"][data-material-over="content"]) {
  --glass-bar: 93%;
  --glass-panel: 94%;
  --glass-popover: 95%;
  --glass-dialog: 100%;
  --glass-surface: 96%;
}

/* No rim (1.47.0, D110): a pane whose top edge is another pane's bottom line (a side list under
   the top bar, a head under a toolbar) draws no light of its own there, or the edge shows twice. */
:is([data-material="glass"] [data-material-rim="none"], [data-material="glass"][data-material-rim="none"]) {
  --glass-rim: transparent;
}

/* The roles. Each one names the ground it keeps (a page sets --glass-ground on the element when
   its Standard ground is another token) and how much of it. Solid until the browser shows it
   can draw the glass. --glass-ground does not inherit, so a window's ground never reaches the
   title bar or the menu inside it. */
@property --glass-ground {
  syntax: '*';
  inherits: false;
}
:is([data-material="glass"] [data-material-role="bar"], [data-material="glass"][data-material-role="bar"]) {
  --glass-base: var(--glass-ground, var(--surface-2));
  --glass-keep: var(--glass-bar);
}
:is([data-material="glass"] [data-material-role="panel"], [data-material="glass"][data-material-role="panel"]) {
  --glass-base: var(--glass-ground, var(--w-bg));
  --glass-keep: var(--glass-panel);
}
:is([data-material="glass"] [data-material-role="popover"], [data-material="glass"][data-material-role="popover"]) {
  --glass-base: var(--glass-ground, var(--surface));
  --glass-keep: var(--glass-popover);
}
:is([data-material="glass"] [data-material-role="dialog"], [data-material="glass"][data-material-role="dialog"]) {
  --glass-base: var(--glass-ground, var(--surface));
  --glass-keep: var(--glass-dialog);
}
:is([data-material="glass"] [data-material-role="surface"], [data-material="glass"][data-material-role="surface"]) {
  --glass-base: var(--glass-ground, var(--surface));
  --glass-keep: var(--glass-surface);
}
:is([data-material="glass"] [data-material-role]:not([data-material-role="clear"]), [data-material="glass"][data-material-role]:not([data-material-role="clear"])) {
  background-color: var(--glass-base);
  background-image: none;
}

/* clear: a ground inside a Glass pane (a window's content, a framed page's body) steps aside so
   the pane's glass shows through. Its text then sits on that pane, whose strength holds it. */
:is([data-material="glass"] [data-material-role="clear"], [data-material="glass"][data-material-role="clear"]) {
  background-color: transparent;
  background-image: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background-color: color-mix(in srgb, red 50%, transparent)) {
  :is([data-material="glass"] [data-material-role]:not([data-material-role="clear"]), [data-material="glass"][data-material-role]:not([data-material-role="clear"])) {
    background-color: color-mix(in srgb, var(--glass-base) var(--glass-keep), transparent);
    background-image: linear-gradient(var(--glass-rim), var(--glass-rim)), var(--glass-sheen);
    background-size: 100% 1px, 100% 100%;
    background-repeat: no-repeat;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

/* Reduced transparency: every role draws its ground solid, with no blur, sheen or rim light.
   The device asks with the media query; a person's own setting or a test asks with
   data-transparency="reduce" on the root or any container. */
@media (prefers-reduced-transparency: reduce) {
  :is([data-material="glass"] [data-material-role]:not([data-material-role="clear"]), [data-material="glass"][data-material-role]:not([data-material-role="clear"])) {
    background-color: var(--glass-base);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
:is([data-transparency="reduce"] *, [data-transparency="reduce"]):is([data-material="glass"] [data-material-role]:not([data-material-role="clear"]), [data-material="glass"][data-material-role]:not([data-material-role="clear"])) {
  background-color: var(--glass-base);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}