/*! Quiet Glass UI v1.0.0 · k-flow design system · fonts: IBM Plex (SIL OFL 1.1, fonts/OFL.txt) */
/* Quiet Glass fonts: IBM Plex Sans (variable 100-700) and IBM Plex Mono (400/500/600).
   Licensed under the SIL Open Font License 1.1 (fonts/OFL.txt). Subsets load on demand via unicode-range. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020, U+0061-0062, U+00A0, U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BC, U+02C7, U+02DD, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020, U+0061-0062, U+00A0, U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BC, U+02C7, U+02DD, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020, U+0061-0062, U+00A0, U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BC, U+02C7, U+02DD, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-vietnamese.woff2') format('woff2');
  unicode-range: U+0020, U+0061-0062, U+00A0, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-ext.woff2') format('woff2');
  unicode-range: U+0020, U+0061-0062, U+00A0, U+0462-0463, U+046A-046B, U+0472-0475, U+0492-04AF, U+04B2-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525, U+20B4;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0020, U+0061-0062, U+00A0, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0020, U+0061-0062, U+00A0, U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BC, U+02C7, U+02DD, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/plex-sans-var-greek.woff2') format('woff2');
  unicode-range: U+0020, U+0061-0062, U+00A0, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE;
}

/* Quiet Glass · design tokens
   The single source of truth. Every component uses var(--q-*) and never a raw value.
   The rules behind the values:
   - Brand and meaning are separate. The accent is user-tunable; status colours are fixed and must
     never be derived from the accent.
   - Working surfaces are opaque graphite. Frosted glass is reserved for sparse chrome: top bar,
     dock, launcher and Spaces.
   - Text never goes below 12px. Inputs are 16px on touch devices so iOS doesn't zoom on focus.
   - Everything lands on a 4px grid.
   Layer order for the whole library: */
@layer qg.reset, qg.tokens, qg.base, qg.components, qg.patterns, qg.utilities;

@layer qg.tokens {
  :root {
    color-scheme: dark;

    /* ---- Tunable primitives (set by presets or QG.appearance) ---------------------------- */
    --q-hue: 200; /* surface tint hue: obsidian/graphite lean slightly teal */
    --q-color: 8%; /* surface tint strength; 0% is neutral grey */
    --q-accent-h: 142; /* accent: the approved pale sage #B8D8C3 */
    --q-accent-s: 30%;
    --q-accent-l: 78%;
    --q-glow: 0.18; /* ambient light intensity, 0-0.4 */
    --q-brightness: 1; /* ambient background brightness, 0.4-1.2 */
    --q-glass-alpha: 0.62; /* chrome translucency */
    --q-blur: 24px;

    /* ---- Canvas and opaque working surfaces ---------------------------------------------- */
    --q-bg: hsl(var(--q-hue) calc(var(--q-color) * 2) 8.4%); /* obsidian #121619 */
    --q-surface-1: hsl(var(--q-hue) calc(var(--q-color) * 1.5) 11.6%); /* windows, sheets */
    --q-surface-2: hsl(var(--q-hue) calc(var(--q-color) * 1.5) 14.3%); /* cards: graphite #202629 */
    --q-surface-3: hsl(var(--q-hue) calc(var(--q-color) * 1.3) 17.5%); /* raised, hover */
    --q-field: hsl(var(--q-hue) calc(var(--q-color) * 1.6) 9.6%); /* input fill */
    --q-scrim: hsl(var(--q-hue) calc(var(--q-color) * 2) 4% / 0.62);

    /* ---- Ink ------------------------------------------------------------------------------ */
    --q-ink: #eef1ec; /* primary text: ivory */
    --q-ink-2: #c5cdcd; /* secondary text */
    --q-ink-muted: #9ca8aa; /* metadata; >= 4.5:1 on every surface */
    --q-ink-disabled: #6b7679; /* disabled only; not required to meet contrast */

    /* ---- Lines ---------------------------------------------------------------------------- */
    --q-line: hsl(var(--q-hue) 20% 90% / 0.1); /* hairlines between regions */
    --q-line-2: hsl(var(--q-hue) 20% 90% / 0.16); /* card edges */
    --q-line-strong: hsl(var(--q-hue) 8% 44%); /* input borders: >= 3:1 on --q-field (WCAG 1.4.11) */

    /* ---- Accent (brand; user-tunable) ----------------------------------------------------- */
    --q-accent: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l));
    --q-accent-hover: hsl(var(--q-accent-h) var(--q-accent-s) calc(var(--q-accent-l) + 5%));
    --q-on-accent: hsl(var(--q-accent-h) 30% 9%); /* text on accent fills */
    --q-accent-tint: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.1);
    --q-accent-line: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.42);
    --q-focus: hsl(var(--q-accent-h) calc(var(--q-accent-s) + 20%) 72%);

    /* ---- Status (fixed; never tied to the accent; always paired with text or an icon) ------- */
    --q-ok: #62d196;
    --q-warn: #eab765;
    --q-fail: #f39b93; /* "failure rose" */
    --q-info: #8dbaf2;
    --q-idle: #9ca8aa;
    --q-ok-tint: #62d19617;
    --q-warn-tint: #eab76517;
    --q-fail-tint: #f39b9317;
    --q-info-tint: #8dbaf217;
    --q-ok-line: #62d19659;
    --q-warn-line: #eab76559;
    --q-fail-line: #f39b9359;
    --q-info-line: #8dbaf259;

    /* ---- Materials ------------------------------------------------------------------------ */
    --q-glass: hsl(var(--q-hue) calc(var(--q-color) * 1.6) 13% / var(--q-glass-alpha));
    --q-glass-sheen: linear-gradient(135deg, hsl(var(--q-hue) 30% 92% / 0.08), transparent 60%);
    --q-glass-edge: hsl(var(--q-hue) 30% 94% / 0.16);
    --q-glass-filter: blur(var(--q-blur)) saturate(1.1);
    --q-glass-inset: inset 0 1px 0 hsl(var(--q-hue) 30% 96% / 0.1);

    /* ---- Type ----------------------------------------------------------------------------- */
    --q-font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --q-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --q-text-xs: 0.75rem; /* 12: floor (badges, meta) */
    --q-text-sm: 0.8125rem; /* 13: secondary UI */
    --q-text-md: 0.875rem; /* 14: desktop body */
    --q-text-lg: 1rem; /* 16: phone body, inputs on touch */
    --q-text-xl: 1.25rem; /* 20: section titles */
    --q-text-2xl: 1.5rem; /* 24: window titles */
    --q-text-3xl: 2rem; /* 32: page and hero titles */
    --q-weight-regular: 400;
    --q-weight-medium: 500;
    --q-weight-semibold: 600;
    --q-leading-tight: 1.2;
    --q-leading: 1.5;
    --q-tracking-caps: 0.08em;

    /* ---- Space (4px grid), radius, elevation ---------------------------------------------- */
    --q-space-1: 4px;
    --q-space-2: 8px;
    --q-space-3: 12px;
    --q-space-4: 16px;
    --q-space-5: 20px;
    --q-space-6: 24px;
    --q-space-7: 32px;
    --q-space-8: 48px;
    --q-radius-sm: 8px;
    --q-radius-md: 12px;
    --q-radius-lg: 20px;
    --q-radius-full: 999px;
    --q-elev-1: 0 1px 2px #0003;
    --q-elev-2: 0 8px 24px #0005;
    --q-elev-3: 0 30px 80px #0007;

    /* ---- Controls: fine pointers get desktop density, coarse pointers get 44px targets ------- */
    --q-control-h: 36px;
    --q-control-h-sm: 30px;
    --q-target: 44px;
    --q-input-size: var(--q-text-md);

    /* ---- Motion --------------------------------------------------------------------------- */
    --q-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
    --q-dur-fast: 120ms;
    --q-dur-base: 180ms;
    --q-dur-slow: 280ms;

    /* ---- Stacking --------------------------------------------------------------------------- */
    --q-z-window: 10;
    --q-z-sticky: 50;
    --q-z-topbar: 1000;
    --q-z-dock: 1100;
    --q-z-dialog: 2000;
    --q-z-toast: 3000;

    /* ---- Shell geometry and safe areas ----------------------------------------------------- */
    --q-safe-top: env(safe-area-inset-top, 0px);
    --q-safe-bottom: env(safe-area-inset-bottom, 0px);
    --q-safe-left: env(safe-area-inset-left, 0px);
    --q-safe-right: env(safe-area-inset-right, 0px);
    --q-bar-h: 56px;
    --q-dock-h: 76px;
  }

  @media (pointer: coarse) {
    :root {
      --q-control-h: 44px;
      --q-control-h-sm: 36px;
      --q-input-size: var(--q-text-lg);
    }
  }
  :root[data-device='phone'] {
    --q-control-h: 44px;
    --q-control-h-sm: 36px;
    --q-input-size: var(--q-text-lg);
    --q-bar-h: 48px;
  }

  /* ---- Appearance presets: tint and accent only; status colours never change --------------- */
  :root[data-preset='graphite'] { --q-hue: 210; --q-color: 3%; --q-accent-h: 142; --q-accent-s: 30%; --q-accent-l: 78%; }
  :root[data-preset='sage'] { --q-hue: 150; --q-color: 10%; --q-accent-h: 142; --q-accent-s: 34%; --q-accent-l: 76%; }
  :root[data-preset='ice'] { --q-hue: 205; --q-color: 14%; --q-accent-h: 186; --q-accent-s: 45%; --q-accent-l: 80%; }
  :root[data-preset='lilac'] { --q-hue: 262; --q-color: 10%; --q-accent-h: 262; --q-accent-s: 55%; --q-accent-l: 82%; }
  :root[data-preset='rose'] { --q-hue: 340; --q-color: 8%; --q-accent-h: 330; --q-accent-s: 45%; --q-accent-l: 84%; }
  :root[data-preset='amber'] { --q-hue: 36; --q-color: 10%; --q-accent-h: 44; --q-accent-s: 45%; --q-accent-l: 84%; }
}

/* Quiet Glass · base: reset, typography, focus, motion */
@layer qg.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body,
  h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    padding: 0;
  }
  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }
  svg {
    flex: none;
  }
  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
  [hidden] {
    display: none !important;
  }
}

@layer qg.base {
  :root {
    font-family: var(--q-font-ui);
    font-size: 100%;
    line-height: var(--q-leading);
    color: var(--q-ink);
    background: var(--q-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  @supports (font: -apple-system-body) {
    /* iOS: follow Dynamic Type. Every size below is rem-based. */
    :root[data-device='phone'] {
      font: -apple-system-body;
      font-family: var(--q-font-ui);
    }
  }
  body {
    font-size: var(--q-text-md);
    min-height: 100dvh;
    background: var(--q-bg);
  }
  :root[data-device='phone'] body {
    font-size: var(--q-text-lg);
  }

  /* ---- Type roles -------------------------------------------------------------------------- */
  .qg-display {
    font-size: var(--q-text-3xl);
    font-weight: var(--q-weight-medium);
    line-height: var(--q-leading-tight);
    letter-spacing: -0.02em;
  }
  .qg-h1 {
    font-size: var(--q-text-2xl);
    font-weight: var(--q-weight-medium);
    line-height: var(--q-leading-tight);
    letter-spacing: -0.012em;
  }
  .qg-h2 {
    font-size: var(--q-text-xl);
    font-weight: var(--q-weight-medium);
    line-height: 1.3;
  }
  .qg-h3 {
    font-size: var(--q-text-lg);
    font-weight: var(--q-weight-semibold);
    line-height: 1.35;
  }
  .qg-body {
    font-size: var(--q-text-md);
  }
  .qg-small {
    font-size: var(--q-text-sm);
  }
  .qg-meta {
    font-size: var(--q-text-xs);
    color: var(--q-ink-muted);
  }
  .qg-muted {
    color: var(--q-ink-muted);
  }
  .qg-eyebrow {
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-semibold);
    letter-spacing: var(--q-tracking-caps);
    text-transform: uppercase;
    color: var(--q-ink-muted);
  }
  .qg-mono,
  code,
  kbd,
  samp {
    font-family: var(--q-font-mono);
    font-size: 0.92em;
  }
  .qg-num {
    font-variant-numeric: tabular-nums;
  }
  .qg-wordmark {
    font-family: var(--q-font-ui);
    font-weight: var(--q-weight-medium);
    letter-spacing: -0.045em;
    text-transform: lowercase;
    line-height: 1;
  }
  .qg-clamp-2,
  .qg-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .qg-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
  .qg-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
  .qg-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  a {
    color: var(--q-accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  a:hover {
    color: var(--q-accent-hover);
  }

  /* ---- Focus: always visible for keyboard users ------------------------------------------- */
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--q-focus);
    outline-offset: 2px;
    border-radius: var(--q-radius-sm);
  }

  ::selection {
    background: var(--q-accent-tint);
    color: var(--q-ink);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--q-hue) 10% 60% / 0.35) transparent;
  }

  .qg-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

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

@layer qg.utilities {
  .qg-stack { display: flex; flex-direction: column; gap: var(--qg-gap, var(--q-space-3)); }
  .qg-row { display: flex; align-items: center; gap: var(--qg-gap, var(--q-space-2)); flex-wrap: wrap; }
  .qg-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--q-space-3); }
  .qg-grow { flex: 1 1 auto; min-width: 0; }
  .qg-grid { display: grid; gap: var(--qg-gap, var(--q-space-4)); grid-template-columns: repeat(auto-fill, minmax(var(--qg-min, 220px), 1fr)); }
  .qg-gap-1 { --qg-gap: var(--q-space-1); }
  .qg-gap-2 { --qg-gap: var(--q-space-2); }
  .qg-gap-4 { --qg-gap: var(--q-space-4); }
  .qg-gap-6 { --qg-gap: var(--q-space-6); }
}

/* Quiet Glass · surfaces: the ambient canvas, glass chrome and opaque working surfaces */
@layer qg.components {
  /* The calm, slowly drifting background behind everything. Two soft light fields; pause them
     when an app is focused (QG.ambient does this). No images, no canvas, transform-only motion. */
  .qg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(
      155deg,
      hsl(var(--q-hue) calc(var(--q-color) * 2.4) calc(14% * var(--q-brightness))),
      hsl(var(--q-hue) calc(var(--q-color) * 1.8) calc(6% * var(--q-brightness))) 62%,
      hsl(var(--q-hue) calc(var(--q-color) * 2.2) calc(10% * var(--q-brightness)))
    );
  }
  .qg-canvas::before,
  .qg-canvas::after {
    content: '';
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(60px);
    opacity: calc(var(--q-glow) * 2.2);
    will-change: transform;
  }
  .qg-canvas::before {
    top: -30vmax;
    left: -18vmax;
    background: radial-gradient(circle, hsl(var(--q-accent-h) 40% 70% / 0.55), transparent 62%);
    animation: qg-drift-a 48s var(--q-ease) infinite alternate;
  }
  .qg-canvas::after {
    right: -26vmax;
    bottom: -34vmax;
    background: radial-gradient(circle, hsl(var(--q-hue) 45% 62% / 0.45), transparent 60%);
    animation: qg-drift-b 67s var(--q-ease) infinite alternate;
  }
  .qg-canvas[data-still]::before,
  .qg-canvas[data-still]::after,
  :root[data-ambient='still'] .qg-canvas::before,
  :root[data-ambient='still'] .qg-canvas::after {
    animation-play-state: paused;
  }
  @keyframes qg-drift-a {
    to { transform: translate3d(22vmax, 14vmax, 0) scale(1.12); }
  }
  @keyframes qg-drift-b {
    to { transform: translate3d(-18vmax, -12vmax, 0) scale(0.92); }
  }

  /* Frosted chrome: top bar, dock, launcher, Spaces. Not for forms, logs or editors. */
  .qg-glass {
    background: var(--q-glass-sheen), var(--q-glass);
    border: 1px solid var(--q-glass-edge);
    box-shadow: var(--q-glass-inset), var(--q-elev-2);
    -webkit-backdrop-filter: var(--q-glass-filter);
    backdrop-filter: var(--q-glass-filter);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .qg-glass {
      background: var(--q-surface-2);
    }
  }

  /* Opaque working surfaces */
  .qg-surface {
    background: var(--q-surface-1);
    color: var(--q-ink);
  }
  .qg-card {
    background: var(--q-surface-2);
    border: 1px solid var(--q-line-2);
    border-radius: var(--q-radius-md);
    padding: var(--q-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--q-space-3);
    min-width: 0;
  }
  .qg-card--flush {
    padding: 0;
    overflow: hidden;
  }
  .qg-card--interactive {
    cursor: pointer;
    transition: background var(--q-dur-fast), border-color var(--q-dur-fast), transform var(--q-dur-fast) var(--q-ease);
  }
  .qg-card--interactive:hover {
    background: var(--q-surface-3);
    border-color: var(--q-line-strong);
  }
  .qg-card--interactive:active {
    transform: scale(0.99);
  }
  .qg-card[aria-selected='true'],
  .qg-card--selected {
    border-color: var(--q-accent-line);
    box-shadow: inset 0 0 0 1px var(--q-accent-line);
    background: linear-gradient(var(--q-accent-tint), var(--q-accent-tint)), var(--q-surface-2);
  }
  .qg-card__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-width: 0;
  }
  .qg-card__title {
    font-size: var(--q-text-md);
    font-weight: var(--q-weight-semibold);
    min-width: 0;
  }
  .qg-card__foot {
    display: flex;
    gap: var(--q-space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: var(--q-space-3);
    border-top: 1px solid var(--q-line);
  }

  /* Home widgets: glass cards that sit on the canvas */
  .qg-widget {
    border-radius: var(--q-radius-lg);
    padding: var(--q-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--q-space-3);
    min-width: 0;
  }
  .qg-widget__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    font-size: var(--q-text-lg);
    font-weight: var(--q-weight-medium);
  }
  .qg-widget__head > svg {
    width: 22px;
    height: 22px;
    color: var(--q-ink-2);
  }
  .qg-widget__aside {
    margin-left: auto;
    font-size: var(--q-text-sm);
    color: var(--q-ink-muted);
    font-weight: var(--q-weight-regular);
  }

  .qg-divider {
    border: 0;
    border-top: 1px solid var(--q-line);
    margin: var(--q-space-3) 0;
  }
}

/* Quiet Glass · controls: buttons, icon buttons, segmented control, icons */
@layer qg.components {
  .qg-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
  }
  .qg-icon--lg {
    width: 24px;
    height: 24px;
  }

  /* ---- Buttons. One primary per task region; the verb goes on the button. ------------------ */
  .qg-btn {
    --qg-btn-bg: var(--q-surface-3);
    --qg-btn-fg: var(--q-ink);
    --qg-btn-line: var(--q-line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--q-space-2);
    min-height: var(--q-control-h);
    padding: 0 var(--q-space-4);
    border-radius: var(--q-radius-sm);
    border: 1px solid var(--qg-btn-line);
    background: var(--qg-btn-bg);
    color: var(--qg-btn-fg);
    font-size: var(--q-text-md);
    font-weight: var(--q-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--q-dur-fast), border-color var(--q-dur-fast), transform var(--q-dur-fast) var(--q-ease), color var(--q-dur-fast);
  }
  .qg-btn:hover {
    background: color-mix(in srgb, var(--qg-btn-bg), white 6%);
    border-color: var(--q-line-strong);
  }
  .qg-btn:active {
    transform: scale(0.98);
  }
  .qg-btn > svg {
    width: 18px;
    height: 18px;
  }
  .qg-btn--primary {
    --qg-btn-bg: var(--q-accent);
    --qg-btn-fg: var(--q-on-accent);
    --qg-btn-line: transparent;
  }
  .qg-btn--primary:hover {
    background: var(--q-accent-hover);
    border-color: transparent;
  }
  .qg-btn--ghost {
    --qg-btn-bg: transparent;
    --qg-btn-line: transparent;
    --qg-btn-fg: var(--q-ink-2);
  }
  .qg-btn--ghost:hover {
    background: hsl(var(--q-hue) 20% 90% / 0.07);
    border-color: transparent;
    color: var(--q-ink);
  }
  .qg-btn--danger {
    --qg-btn-bg: var(--q-fail-tint);
    --qg-btn-fg: var(--q-fail);
    --qg-btn-line: var(--q-fail-line);
  }
  .qg-btn--danger:hover {
    background: color-mix(in srgb, var(--q-fail) 18%, transparent);
    border-color: var(--q-fail);
  }
  .qg-btn--sm {
    min-height: var(--q-control-h-sm);
    padding: 0 var(--q-space-3);
    font-size: var(--q-text-sm);
  }
  .qg-btn--lg {
    min-height: 48px;
    padding: 0 var(--q-space-6);
    font-size: var(--q-text-lg);
    border-radius: var(--q-radius-md);
  }
  .qg-btn--block {
    width: 100%;
  }
  .qg-btn--icon {
    width: var(--q-control-h);
    padding: 0;
    border-radius: var(--q-radius-full);
  }
  .qg-btn--icon.qg-btn--sm {
    width: var(--q-control-h-sm);
  }
  .qg-btn:disabled,
  .qg-btn[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
  }
  /* Waiting for the backend: keep the label, add a spinner, block repeat clicks */
  .qg-btn[aria-busy='true'] {
    cursor: progress;
    pointer-events: none;
    position: relative;
    color: transparent;
  }
  .qg-btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--qg-btn-fg);
    border-right-color: transparent;
    animation: qg-spin 0.7s linear infinite;
  }
  @keyframes qg-spin {
    to { transform: rotate(360deg); }
  }
  .qg-btn-row {
    display: flex;
    gap: var(--q-space-2);
    flex-wrap: wrap;
    align-items: center;
  }

  /* ---- Segmented control (radio group styled as one control) ------------------------------ */
  .qg-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--q-radius-sm);
    background: var(--q-field);
    border: 1px solid var(--q-line-2);
    max-width: 100%;
    overflow-x: auto;
  }
  .qg-segmented > label,
  .qg-segmented > button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: calc(var(--q-control-h) - 8px);
    padding: 0 var(--q-space-3);
    border-radius: 6px;
    border: 0;
    background: none;
    color: var(--q-ink-2);
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-medium);
    white-space: nowrap;
    cursor: pointer;
  }
  .qg-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .qg-segmented > label:has(input:checked),
  .qg-segmented > button[aria-pressed='true'],
  .qg-segmented > button[aria-selected='true'] {
    background: var(--q-surface-3);
    color: var(--q-ink);
    box-shadow: var(--q-elev-1), inset 0 0 0 1px var(--q-line-2);
  }
  .qg-segmented > label:has(input:focus-visible) {
    outline: 2px solid var(--q-focus);
    outline-offset: 1px;
  }
}

/* Quiet Glass · forms. Every control has a visible label. Borders are >= 3:1 against the field. */
@layer qg.components {
  .qg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .qg-label {
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-medium);
    color: var(--q-ink-2);
  }
  .qg-hint {
    font-size: var(--q-text-xs);
    color: var(--q-ink-muted);
  }
  .qg-error {
    font-size: var(--q-text-xs);
    color: var(--q-fail);
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .qg-error::before {
    content: '!';
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--q-fail);
    color: var(--q-bg);
    font-size: 10px;
    font-weight: 700;
    flex: none;
  }

  .qg-input,
  .qg-select,
  .qg-textarea {
    width: 100%;
    min-height: var(--q-control-h);
    padding: 0 var(--q-space-3);
    border-radius: var(--q-radius-sm);
    border: 1px solid var(--q-line-strong);
    background: var(--q-field);
    color: var(--q-ink);
    font-size: var(--q-input-size);
    transition: border-color var(--q-dur-fast), box-shadow var(--q-dur-fast);
  }
  .qg-textarea {
    padding: var(--q-space-2) var(--q-space-3);
    min-height: 96px;
    line-height: var(--q-leading);
    resize: vertical;
  }
  .qg-input::placeholder,
  .qg-textarea::placeholder {
    color: var(--q-ink-muted);
    opacity: 1;
  }
  .qg-input:hover,
  .qg-select:hover,
  .qg-textarea:hover {
    border-color: hsl(var(--q-hue) 8% 54%);
  }
  .qg-input:focus-visible,
  .qg-select:focus-visible,
  .qg-textarea:focus-visible {
    outline: none;
    border-color: var(--q-focus);
    box-shadow: 0 0 0 3px var(--q-accent-tint);
  }
  .qg-input[aria-invalid='true'],
  .qg-textarea[aria-invalid='true'],
  .qg-select[aria-invalid='true'] {
    border-color: var(--q-fail);
  }
  .qg-input:disabled,
  .qg-select:disabled,
  .qg-textarea:disabled {
    color: var(--q-ink-disabled);
    cursor: not-allowed;
  }
  .qg-select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--q-ink-2) 50%),
      linear-gradient(135deg, var(--q-ink-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }

  /* Search: an input with a leading icon */
  .qg-search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .qg-search > svg {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--q-ink-muted);
    pointer-events: none;
  }
  .qg-search > .qg-input {
    padding-left: 38px;
    border-radius: var(--q-radius-full);
  }

  /* Checkbox and radio: native inputs, restyled; the whole row is the target */
  .qg-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--q-space-2);
    min-height: var(--q-control-h-sm);
    padding: 4px 0;
    cursor: pointer;
    font-size: var(--q-text-md);
  }
  .qg-check > input {
    appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    border: 1.5px solid var(--q-line-strong);
    border-radius: 5px;
    background: var(--q-field);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--q-dur-fast), border-color var(--q-dur-fast);
  }
  .qg-check > input[type='radio'] {
    border-radius: 50%;
  }
  .qg-check > input:checked {
    background: var(--q-accent);
    border-color: var(--q-accent);
  }
  .qg-check > input[type='checkbox']:checked::after {
    content: '';
    width: 9px;
    height: 5px;
    border: 2px solid var(--q-on-accent);
    border-top: 0;
    border-right: 0;
    transform: translateY(-1px) rotate(-45deg);
  }
  .qg-check > input[type='radio']:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-on-accent);
  }
  .qg-check > input:focus-visible {
    outline: 2px solid var(--q-focus);
    outline-offset: 2px;
  }

  /* Switch: a checkbox with role="switch" */
  .qg-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--q-space-3);
    min-height: var(--q-control-h-sm);
    cursor: pointer;
  }
  .qg-switch > input {
    appearance: none;
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    background: var(--q-field);
    border: 1.5px solid var(--q-line-strong);
    cursor: pointer;
    transition: background var(--q-dur-base), border-color var(--q-dur-base);
  }
  .qg-switch > input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--q-ink-2);
    transition: transform var(--q-dur-base) var(--q-ease), background var(--q-dur-base);
  }
  .qg-switch > input:checked {
    background: var(--q-accent);
    border-color: var(--q-accent);
  }
  .qg-switch > input:checked::after {
    transform: translateX(18px);
    background: var(--q-on-accent);
  }
  .qg-switch > input:focus-visible {
    outline: 2px solid var(--q-focus);
    outline-offset: 2px;
  }

  /* Range: a native slider with a filled track (set --qg-fill from JS, or QG.range) */
  .qg-range {
    --qg-fill: 50%;
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
  }
  .qg-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--q-accent) var(--qg-fill), var(--q-line-strong) var(--qg-fill));
  }
  .qg-range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--q-line-strong);
  }
  .qg-range::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--q-accent);
  }
  .qg-range::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--q-ink);
    border: 3px solid var(--q-accent);
    box-shadow: var(--q-elev-1);
  }
  .qg-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--q-ink);
    border: 3px solid var(--q-accent);
  }
  .qg-range:focus-visible {
    outline: none;
  }
  .qg-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--q-accent-tint), 0 0 0 2px var(--q-focus);
  }

  /* Value + slider pair: editable number next to a slider */
  .qg-number-slider {
    display: grid;
    grid-template-columns: 1fr 84px;
    gap: var(--q-space-3);
    align-items: center;
  }
  .qg-number-slider .qg-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .qg-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--q-space-1);
  }
  .qg-fieldset > legend {
    padding: 0;
    margin-bottom: var(--q-space-2);
  }
}

/* Quiet Glass · feedback: status, chips, badges, alerts, toasts, empty and loading states.
   Status is never colour alone: every variant carries a word or an icon. */
@layer qg.components {
  /* Status pill: dot + label */
  .qg-status {
    --qg-c: var(--q-idle);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-medium);
    color: var(--q-ink-2);
    white-space: nowrap;
  }
  .qg-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qg-c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qg-c) 18%, transparent);
    flex: none;
  }
  .qg-status--ok { --qg-c: var(--q-ok); }
  .qg-status--warn { --qg-c: var(--q-warn); }
  .qg-status--fail { --qg-c: var(--q-fail); }
  .qg-status--info { --qg-c: var(--q-info); }
  .qg-status--live::before {
    animation: qg-pulse 2s ease-in-out infinite;
  }
  @keyframes qg-pulse {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--qg-c) 6%, transparent); }
  }
  /* Connection pill used in the top bar */
  .qg-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--q-radius-full);
    border: 1px solid var(--q-line-2);
    background: hsl(var(--q-hue) 20% 90% / 0.05);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-medium);
    color: var(--q-ink-2);
  }

  /* Chips: metadata and filters */
  .qg-chip {
    --qg-c: var(--q-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--q-radius-full);
    border: 1px solid var(--q-line-2);
    background: hsl(var(--q-hue) 20% 90% / 0.04);
    color: var(--qg-c);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-medium);
    white-space: nowrap;
    max-width: 100%;
  }
  .qg-chip > svg {
    width: 14px;
    height: 14px;
  }
  .qg-chip--ok { --qg-c: var(--q-ok); background: var(--q-ok-tint); border-color: var(--q-ok-line); }
  .qg-chip--warn { --qg-c: var(--q-warn); background: var(--q-warn-tint); border-color: var(--q-warn-line); }
  .qg-chip--fail { --qg-c: var(--q-fail); background: var(--q-fail-tint); border-color: var(--q-fail-line); }
  .qg-chip--info { --qg-c: var(--q-info); background: var(--q-info-tint); border-color: var(--q-info-line); }
  .qg-chip--accent { --qg-c: var(--q-accent); background: var(--q-accent-tint); border-color: var(--q-accent-line); }
  button.qg-chip {
    cursor: pointer;
  }
  button.qg-chip[aria-pressed='true'] {
    background: var(--q-ink);
    color: var(--q-bg);
    border-color: var(--q-ink);
  }

  /* Count badge (dock, tabs) */
  .qg-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--q-warn);
    color: #1d1405;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .qg-badge--quiet {
    background: var(--q-surface-3);
    color: var(--q-ink);
    box-shadow: inset 0 0 0 1px var(--q-line-2);
  }
  .qg-badge--fail {
    background: var(--q-fail);
    color: #2a0c0a;
  }

  /* Alert: inline banner, e.g. "Could not load: Retry". role="alert" for errors, "status" otherwise */
  .qg-alert {
    --qg-c: var(--q-info);
    display: flex;
    align-items: flex-start;
    gap: var(--q-space-3);
    padding: var(--q-space-3) var(--q-space-4);
    border-radius: var(--q-radius-md);
    border: 1px solid color-mix(in srgb, var(--qg-c) 35%, transparent);
    background: color-mix(in srgb, var(--qg-c) 9%, var(--q-surface-2));
    color: var(--q-ink);
    font-size: var(--q-text-md);
  }
  .qg-alert > svg {
    width: 20px;
    height: 20px;
    color: var(--qg-c);
    margin-top: 1px;
  }
  .qg-alert__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .qg-alert__title {
    font-weight: var(--q-weight-semibold);
  }
  .qg-alert--ok { --qg-c: var(--q-ok); }
  .qg-alert--warn { --qg-c: var(--q-warn); }
  .qg-alert--fail { --qg-c: var(--q-fail); }

  /* Toasts: bottom-centre stack above the dock; created by QG.toast() */
  .qg-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--q-dock-h) + var(--q-safe-bottom) + var(--q-space-6));
    transform: translateX(-50%);
    z-index: var(--q-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--q-space-2);
    width: min(440px, calc(100vw - 24px));
    pointer-events: none;
  }
  .qg-toast {
    --qg-c: var(--q-ink-2);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    padding: var(--q-space-3) var(--q-space-4);
    border-radius: var(--q-radius-md);
    background: var(--q-surface-3);
    border: 1px solid var(--q-line-2);
    border-left: 3px solid var(--qg-c);
    box-shadow: var(--q-elev-2);
    font-size: var(--q-text-md);
    animation: qg-toast-in var(--q-dur-slow) var(--q-ease);
  }
  .qg-toast--ok { --qg-c: var(--q-ok); }
  .qg-toast--warn { --qg-c: var(--q-warn); }
  .qg-toast--fail { --qg-c: var(--q-fail); }
  .qg-toast--info { --qg-c: var(--q-info); }
  .qg-toast__msg {
    flex: 1;
    min-width: 0;
  }
  .qg-toast[data-leaving] {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--q-dur-base), transform var(--q-dur-base);
  }
  @keyframes qg-toast-in {
    from { opacity: 0; transform: translateY(10px); }
  }

  /* Empty state: explain and offer the primary action */
  .qg-empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--q-space-3);
    padding: var(--q-space-8) var(--q-space-6);
    color: var(--q-ink-2);
  }
  .qg-empty > svg {
    width: 36px;
    height: 36px;
    color: var(--q-ink-muted);
  }
  .qg-empty__title {
    font-size: var(--q-text-lg);
    font-weight: var(--q-weight-medium);
    color: var(--q-ink);
  }
  .qg-empty__text {
    max-width: 44ch;
    font-size: var(--q-text-md);
    color: var(--q-ink-muted);
  }

  /* Loading: skeletons for layout, spinner for small waits */
  .qg-skeleton {
    border-radius: var(--q-radius-sm);
    background: linear-gradient(90deg, var(--q-surface-2) 25%, var(--q-surface-3) 45%, var(--q-surface-2) 65%);
    background-size: 300% 100%;
    animation: qg-shimmer 1.6s linear infinite;
    min-height: 12px;
  }
  @keyframes qg-shimmer {
    to { background-position: -100% 0; }
  }
  .qg-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--q-line-strong);
    border-top-color: var(--q-accent);
    animation: qg-spin 0.8s linear infinite;
  }

  /* Progress: determinate only when the backend reports real progress; otherwise indeterminate */
  .qg-progress {
    --qg-value: 0%;
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--q-field);
    box-shadow: inset 0 0 0 1px var(--q-line);
    overflow: hidden;
  }
  .qg-progress::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--qg-value);
    background: var(--q-accent);
    border-radius: inherit;
    transition: width var(--q-dur-slow) var(--q-ease);
  }
  .qg-progress--indeterminate::after {
    width: 34%;
    animation: qg-indet 1.4s var(--q-ease) infinite;
  }
  @keyframes qg-indet {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
  }
}

/* Quiet Glass · navigation: tabs, nav list, breadcrumb, pager */
@layer qg.components {
  /* Tabs: role="tablist" > role="tab"[aria-selected]. QG.tabs() adds arrow-key navigation. */
  .qg-tabs {
    display: flex;
    gap: var(--q-space-1);
    border-bottom: 1px solid var(--q-line);
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .qg-tabs::-webkit-scrollbar {
    display: none;
  }
  .qg-tabs > [role='tab'] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--q-control-h);
    padding: 0 var(--q-space-3);
    border: 0;
    background: none;
    color: var(--q-ink-muted);
    font-size: var(--q-text-md);
    font-weight: var(--q-weight-medium);
    white-space: nowrap;
    border-radius: var(--q-radius-sm) var(--q-radius-sm) 0 0;
  }
  .qg-tabs > [role='tab']:hover {
    color: var(--q-ink);
  }
  .qg-tabs > [role='tab'][aria-selected='true'] {
    color: var(--q-ink);
  }
  .qg-tabs > [role='tab'][aria-selected='true']::after {
    content: '';
    position: absolute;
    left: var(--q-space-2);
    right: var(--q-space-2);
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--q-accent);
  }
  /* Pill tabs: workspace tabs in the top bar */
  .qg-tabs--pill {
    border: 0;
    mask-image: none;
    gap: 2px;
  }
  .qg-tabs--pill > [role='tab'] {
    min-height: 36px;
    border-radius: var(--q-radius-md);
  }
  .qg-tabs--pill > [role='tab'][aria-selected='true'] {
    background: hsl(var(--q-hue) 20% 90% / 0.08);
  }
  .qg-tabs--pill > [role='tab'][aria-selected='true']::after {
    display: none;
  }

  /* Sidebar navigation list */
  .qg-navlist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .qg-navlist__section {
    padding: var(--q-space-4) var(--q-space-3) var(--q-space-1);
  }
  .qg-navlist a,
  .qg-navlist button {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-height: var(--q-control-h);
    padding: 0 var(--q-space-3);
    border: 0;
    border-radius: var(--q-radius-sm);
    background: none;
    color: var(--q-ink-2);
    text-decoration: none;
    font-size: var(--q-text-md);
    text-align: left;
    width: 100%;
  }
  .qg-navlist a:hover,
  .qg-navlist button:hover {
    background: hsl(var(--q-hue) 20% 90% / 0.06);
    color: var(--q-ink);
  }
  .qg-navlist [aria-current='page'],
  .qg-navlist [aria-current='true'] {
    background: var(--q-accent-tint);
    color: var(--q-ink);
    box-shadow: inset 2px 0 0 var(--q-accent);
  }
  .qg-navlist svg {
    width: 18px;
    height: 18px;
  }
  .qg-navlist .qg-badge {
    margin-left: auto;
  }

  .qg-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--q-text-sm);
    color: var(--q-ink-muted);
  }
  .qg-breadcrumb a {
    color: var(--q-ink-2);
    text-decoration: none;
  }
  .qg-breadcrumb a:hover {
    color: var(--q-ink);
    text-decoration: underline;
  }
  .qg-breadcrumb > * + *::before {
    content: '/';
    margin-right: 6px;
    color: var(--q-ink-disabled);
  }

  .qg-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-space-3);
    padding-top: var(--q-space-3);
    font-size: var(--q-text-sm);
    color: var(--q-ink-muted);
  }
}

/* Quiet Glass · data display: lists, key-value, tables, logs, avatars, media thumbnails */
@layer qg.components {
  /* List rows: leading visual, title and meta, trailing chips or actions */
  .qg-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .qg-list__row {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-height: 56px;
    padding: var(--q-space-2) var(--q-space-3);
    border-radius: var(--q-radius-sm);
    color: inherit;
    text-decoration: none;
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
  }
  .qg-list--divided .qg-list__row + .qg-list__row {
    border-top: 1px solid var(--q-line);
    border-radius: 0;
  }
  a.qg-list__row:hover,
  button.qg-list__row:hover {
    background: hsl(var(--q-hue) 20% 90% / 0.05);
  }
  .qg-list__row[aria-selected='true'],
  .qg-list__row[aria-current='true'] {
    background: var(--q-accent-tint);
    box-shadow: inset 2px 0 0 var(--q-accent);
  }
  .qg-list__main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .qg-list__title {
    font-size: var(--q-text-md);
    font-weight: var(--q-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qg-list__meta {
    font-size: var(--q-text-xs);
    color: var(--q-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qg-list__trail {
    display: flex;
    gap: var(--q-space-1);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Key-value (description list) */
  .qg-kv {
    display: grid;
    grid-template-columns: minmax(96px, max-content) 1fr;
    gap: var(--q-space-2) var(--q-space-5);
    font-size: var(--q-text-md);
  }
  .qg-kv dt {
    color: var(--q-ink-muted);
  }
  .qg-kv dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Tables */
  .qg-table-wrap {
    overflow: auto;
    border: 1px solid var(--q-line-2);
    border-radius: var(--q-radius-md);
    background: var(--q-surface-2);
  }
  .qg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--q-text-md);
  }
  .qg-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--q-surface-3);
    text-align: left;
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--q-ink-muted);
    padding: var(--q-space-2) var(--q-space-3);
    border-bottom: 1px solid var(--q-line-2);
    white-space: nowrap;
  }
  .qg-table td {
    padding: var(--q-space-2) var(--q-space-3);
    border-bottom: 1px solid var(--q-line);
    vertical-align: middle;
  }
  .qg-table tr:last-child td {
    border-bottom: 0;
  }
  .qg-table tbody tr:hover td {
    background: hsl(var(--q-hue) 20% 90% / 0.03);
  }
  .qg-table .qg-num,
  .qg-table td[data-num] {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Log: monospaced, timestamped, follow/pause handled by the app */
  .qg-log {
    margin: 0;
    padding: var(--q-space-3);
    max-height: 420px;
    overflow: auto;
    border-radius: var(--q-radius-md);
    background: var(--q-field);
    border: 1px solid var(--q-line-2);
    font-family: var(--q-font-mono);
    font-size: var(--q-text-xs);
    line-height: 1.65;
    color: var(--q-ink-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .qg-log time {
    color: var(--q-ink-muted);
    margin-right: var(--q-space-2);
  }
  .qg-log .qg-log--fail { color: var(--q-fail); }
  .qg-log .qg-log--warn { color: var(--q-warn); }
  .qg-log .qg-log--ok { color: var(--q-ok); }

  .qg-code {
    display: block;
    padding: var(--q-space-3) var(--q-space-4);
    border-radius: var(--q-radius-md);
    background: var(--q-field);
    border: 1px solid var(--q-line-2);
    font-family: var(--q-font-mono);
    font-size: var(--q-text-sm);
    line-height: 1.6;
    color: var(--q-ink-2);
    overflow: auto;
    white-space: pre;
  }

  /* Avatars: initials or an image, never a stock portrait */
  .qg-avatar {
    --qg-size: 36px;
    width: var(--qg-size);
    height: var(--qg-size);
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--q-surface-3);
    box-shadow: inset 0 0 0 1px var(--q-line-2);
    color: var(--q-ink-2);
    font-size: calc(var(--qg-size) * 0.36);
    font-weight: var(--q-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .qg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .qg-avatar--sm { --qg-size: 28px; }
  .qg-avatar--lg { --qg-size: 48px; }

  /* Media thumbnails: asset grids with real previews and a readable caption */
  .qg-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--qg-thumb, 160px), 1fr));
    gap: var(--q-space-3);
  }
  .qg-thumb {
    display: flex;
    flex-direction: column;
    border-radius: var(--q-radius-md);
    overflow: hidden;
    background: var(--q-surface-2);
    border: 1px solid var(--q-line-2);
    color: inherit;
    text-decoration: none;
    text-align: left;
    padding: 0;
    min-width: 0;
    transition: border-color var(--q-dur-fast), transform var(--q-dur-fast) var(--q-ease);
  }
  .qg-thumb:hover {
    border-color: var(--q-line-strong);
  }
  .qg-thumb[aria-selected='true'] {
    border-color: var(--q-accent);
    box-shadow: 0 0 0 1px var(--q-accent);
  }
  .qg-thumb__media {
    aspect-ratio: 4 / 3;
    background: repeating-conic-gradient(hsl(var(--q-hue) 8% 16%) 0% 25%, hsl(var(--q-hue) 8% 13%) 0% 50%) 50% / 16px 16px;
    display: grid;
    place-items: center;
    color: var(--q-ink-muted);
  }
  .qg-thumb__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .qg-thumb__caption {
    padding: var(--q-space-2) var(--q-space-3);
    display: grid;
    gap: 2px;
    min-width: 0;
  }
}

/* Quiet Glass · overlays: dialogs (native <dialog>), sheets, menus */
@layer qg.components {
  .qg-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: min(85dvh, 760px);
    padding: 0;
    border: 1px solid var(--q-line-2);
    border-radius: var(--q-radius-lg);
    background: var(--q-surface-1);
    color: var(--q-ink);
    box-shadow: var(--q-elev-3);
    overflow: hidden;
  }
  .qg-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: qg-dialog-in var(--q-dur-slow) var(--q-ease);
  }
  .qg-dialog::backdrop {
    background: var(--q-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  @keyframes qg-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
  }
  .qg-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    padding: var(--q-space-5) var(--q-space-5) var(--q-space-3);
  }
  .qg-dialog__title {
    flex: 1;
    font-size: var(--q-text-xl);
    font-weight: var(--q-weight-medium);
  }
  .qg-dialog__body {
    padding: 0 var(--q-space-5) var(--q-space-5);
    overflow: auto;
    display: grid;
    gap: var(--q-space-4);
    color: var(--q-ink-2);
  }
  .qg-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--q-space-2);
    flex-wrap: wrap;
    padding: var(--q-space-4) var(--q-space-5);
    border-top: 1px solid var(--q-line);
    background: var(--q-surface-2);
  }
  .qg-dialog--wide {
    width: min(880px, calc(100vw - 24px));
  }

  /* Sheet: full-height app surface on phones (and a side sheet on desktop) */
  .qg-sheet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--q-surface-1);
    border: 1px solid var(--q-line-2);
    border-radius: 28px 28px 0 0;
    box-shadow: var(--q-elev-3);
    overflow: hidden;
  }
  .qg-sheet__grab {
    align-self: center;
    width: 44px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    cursor: grab;
    touch-action: none;
  }
  .qg-sheet__grab::before {
    content: '';
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: hsl(var(--q-hue) 10% 70% / 0.45);
  }
  .qg-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    padding: 0 var(--q-space-4) var(--q-space-3);
    border-bottom: 1px solid var(--q-line);
  }
  .qg-sheet__title {
    flex: 1;
    min-width: 0;
    font-size: var(--q-text-xl);
    font-weight: var(--q-weight-medium);
  }
  .qg-sheet__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--q-space-4);
  }
  /* Sticky action bar above the home indicator */
  .qg-sheet__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--q-space-2);
    padding: var(--q-space-3) var(--q-space-4) calc(var(--q-space-3) + var(--q-safe-bottom));
    background: color-mix(in srgb, var(--q-surface-1) 92%, transparent);
    border-top: 1px solid var(--q-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .qg-sheet__foot > .qg-btn {
    flex: 1;
  }
  .qg-sheet__foot > .qg-btn--icon {
    flex: 0 0 auto;
  }
  .qg-sheet[data-dragging] {
    transition: none;
  }

  /* Menu: a small list of actions (open it with a <dialog> or a popover) */
  .qg-menu {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: var(--q-space-1);
    border-radius: var(--q-radius-md);
    background: var(--q-surface-2);
    border: 1px solid var(--q-line-2);
    box-shadow: var(--q-elev-2);
  }
  .qg-menu > button,
  .qg-menu > a {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-height: var(--q-control-h);
    padding: 0 var(--q-space-3);
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--q-ink);
    text-align: left;
    text-decoration: none;
    font-size: var(--q-text-md);
  }
  .qg-menu > button:hover,
  .qg-menu > a:hover {
    background: hsl(var(--q-hue) 20% 90% / 0.07);
  }
  .qg-menu > .qg-menu__danger {
    color: var(--q-fail);
  }
  .qg-menu > hr {
    border: 0;
    border-top: 1px solid var(--q-line);
    margin: var(--q-space-1) 0;
  }
}

/* Quiet Glass · shell: top bar, dock, app tiles, Home, windows, launcher, Spaces.
   This is the OS-like chrome: glass only here, opaque inside the windows. */
@layer qg.components {
  /* ---- Top bar ---------------------------------------------------------------------------- */
  .qg-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--q-z-topbar);
    height: calc(var(--q-bar-h) + var(--q-safe-top));
    padding: var(--q-safe-top) max(var(--q-space-6), var(--q-safe-right)) 0 max(var(--q-space-6), var(--q-safe-left));
    display: flex;
    align-items: center;
    gap: var(--q-space-5);
    background: var(--q-glass);
    border-bottom: 1px solid var(--q-line);
    -webkit-backdrop-filter: var(--q-glass-filter);
    backdrop-filter: var(--q-glass-filter);
  }
  .qg-topbar__brand {
    font-size: 22px;
    color: var(--q-ink);
    border: 0;
    background: none;
    padding: 0;
  }
  .qg-topbar__center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .qg-topbar__end {
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
    color: var(--q-ink-2);
    font-size: var(--q-text-sm);
  }
  :root[data-device='phone'] .qg-topbar__center {
    display: none;
  }

  /* ---- Dock: four labelled destinations, glass pill, floats above the home indicator ------- */
  .qg-dock {
    position: fixed;
    left: 50%;
    bottom: calc(var(--q-space-4) + var(--q-safe-bottom));
    transform: translateX(-50%);
    z-index: var(--q-z-dock);
    display: flex;
    gap: var(--q-space-2);
    padding: 8px 10px;
    border-radius: 28px;
  }
  .qg-dock__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 56px;
    padding: 6px 10px;
    border: 0;
    border-radius: 20px;
    background: none;
    color: var(--q-ink-2);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-medium);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--q-dur-fast), color var(--q-dur-fast);
  }
  .qg-dock__item > svg {
    width: 26px;
    height: 26px;
  }
  .qg-dock__item:hover {
    color: var(--q-ink);
    background: hsl(var(--q-hue) 20% 90% / 0.06);
  }
  .qg-dock__item[aria-current='page'] {
    color: var(--q-ink);
    background: hsl(var(--q-hue) 20% 90% / 0.1);
    box-shadow: inset 0 0 0 1px var(--q-glass-edge);
  }
  .qg-dock__item > .qg-badge {
    position: absolute;
    top: 2px;
    right: 14px;
  }
  :root[data-device='phone'] .qg-dock {
    left: var(--q-space-3);
    right: var(--q-space-3);
    transform: none;
    justify-content: space-around;
  }
  :root[data-device='phone'] .qg-dock__item {
    flex: 1;
    min-width: 0;
  }

  /* ---- App tile: icon tile + label (Home, launcher) --------------------------------------- */
  .qg-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--q-space-2);
    width: 88px;
    padding: var(--q-space-1);
    border: 0;
    background: none;
    color: var(--q-ink);
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-medium);
    text-align: center;
    text-decoration: none;
    border-radius: var(--q-radius-md);
    -webkit-tap-highlight-color: transparent;
  }
  .qg-app__icon {
    width: 64px;
    height: 64px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    color: var(--q-ink);
    background: linear-gradient(145deg, hsl(var(--q-hue) 30% 90% / 0.14), hsl(var(--q-hue) 20% 55% / 0.05)), var(--q-glass);
    border: 1px solid var(--q-glass-edge);
    box-shadow: var(--q-glass-inset), 0 10px 26px #0004;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: transform var(--q-dur-fast) var(--q-ease);
  }
  .qg-app__icon > svg {
    width: 30px;
    height: 30px;
  }
  .qg-app:hover .qg-app__icon {
    transform: translateY(-2px);
  }
  .qg-app:active .qg-app__icon {
    transform: scale(0.96);
  }
  .qg-app__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qg-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, 88px);
    gap: var(--q-space-5) var(--q-space-3);
    justify-content: space-between;
  }

  /* ---- Home: resume work, what needs you, recent outputs, then widgets --------------------- */
  .qg-home {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: calc(var(--q-bar-h) + var(--q-safe-top) + var(--q-space-7)) var(--q-space-6)
      calc(var(--q-dock-h) + var(--q-safe-bottom) + var(--q-space-8));
    display: grid;
    gap: var(--q-space-6);
    grid-template-columns: repeat(12, 1fr);
    align-content: start;
  }
  .qg-home > * {
    grid-column: span 12;
    min-width: 0;
  }
  @media (min-width: 1100px) {
    .qg-home > .qg-span-8 { grid-column: span 8; }
    .qg-home > .qg-span-6 { grid-column: span 6; }
    .qg-home > .qg-span-4 { grid-column: span 4; }
  }
  :root[data-device='phone'] .qg-home {
    padding-left: var(--q-space-4);
    padding-right: var(--q-space-4);
    gap: var(--q-space-4);
  }

  /* ---- Window: desktop working window. One merged 56px header, no repeated title inside. ---- */
  .qg-window {
    position: relative;
    z-index: var(--q-z-window);
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 200px;
    border-radius: var(--q-radius-lg);
    background: var(--q-surface-1);
    border: 1px solid var(--q-line-2);
    box-shadow: var(--q-elev-3), inset 0 1px 0 hsl(var(--q-hue) 30% 96% / 0.06);
    overflow: hidden;
  }
  .qg-window__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    height: 56px;
    padding: 0 var(--q-space-3) 0 var(--q-space-5);
    border-bottom: 1px solid var(--q-line);
    background: var(--q-surface-1);
    user-select: none;
  }
  .qg-window__title {
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
    font-size: var(--q-text-md);
    font-weight: var(--q-weight-semibold);
    min-width: 0;
  }
  .qg-window__title > svg {
    width: 20px;
    height: 20px;
    color: var(--q-ink-2);
  }
  .qg-window__tools {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
    min-width: 0;
  }
  .qg-window__controls {
    display: flex;
    gap: 2px;
  }
  .qg-window__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  .qg-window__foot {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-height: 32px;
    padding: 0 var(--q-space-4);
    border-top: 1px solid var(--q-line);
    font-size: var(--q-text-xs);
    color: var(--q-ink-muted);
  }
  .qg-window[data-focused='false'] {
    box-shadow: var(--q-elev-2);
  }
  .qg-window[data-focused='false'] .qg-window__head {
    color: var(--q-ink-muted);
  }

  /* ---- Launcher: search plus grouped app grid in a dialog --------------------------------- */
  .qg-launcher {
    width: min(760px, calc(100vw - 24px));
    background: var(--q-glass-sheen), var(--q-glass);
    -webkit-backdrop-filter: var(--q-glass-filter);
    backdrop-filter: var(--q-glass-filter);
    border-color: var(--q-glass-edge);
  }
  .qg-launcher .qg-dialog__body {
    padding-top: var(--q-space-2);
  }
  .qg-launcher__group {
    display: grid;
    gap: var(--q-space-3);
  }

  /* ---- Spaces overview: saved arrangements as cards --------------------------------------- */
  .qg-spaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--q-space-4);
  }
  .qg-space {
    border-radius: var(--q-radius-lg);
    padding: var(--q-space-4);
    display: grid;
    gap: var(--q-space-3);
  }
  .qg-space__preview {
    aspect-ratio: 16 / 10;
    border-radius: var(--q-radius-md);
    background: var(--q-bg);
    border: 1px solid var(--q-line);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .qg-space__preview > span {
    border-radius: 6px;
    background: var(--q-surface-2);
    border: 1px solid var(--q-line);
  }
}

/* Quiet Glass · patterns: list-detail, editor workspace, and the Decision Brief */
@layer qg.patterns {
  /* ---- List-detail: a stable list on the left, the selected object on the right ----------- */
  .qg-split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    min-height: 0;
    height: 100%;
  }
  .qg-split__list {
    border-right: 1px solid var(--q-line);
    overflow: auto;
    padding: var(--q-space-3);
    min-width: 0;
  }
  .qg-split__detail {
    overflow: auto;
    min-width: 0;
    position: relative;
  }
  .qg-split__back {
    display: none;
  }
  @container (max-width: 720px) {
    .qg-split {
      grid-template-columns: 1fr;
    }
    .qg-split[data-view='detail'] .qg-split__list,
    .qg-split:not([data-view='detail']) .qg-split__detail {
      display: none;
    }
    .qg-split__back {
      display: inline-flex;
    }
  }
  .qg-container {
    container-type: inline-size;
  }

  /* ---- Editor workspace: a dominant preview plus an inspector ------------------------------- */
  .qg-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    height: 100%;
    min-height: 0;
  }
  .qg-editor__stage {
    position: relative;
    min-height: 0;
    background: radial-gradient(ellipse at 50% 40%, hsl(var(--q-hue) 10% 18%), var(--q-bg) 70%);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .qg-editor__inspector {
    border-left: 1px solid var(--q-line);
    overflow: auto;
    padding: var(--q-space-4);
    display: grid;
    gap: var(--q-space-5);
    align-content: start;
  }
  @container (max-width: 720px) {
    .qg-editor {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(60svh, 1fr) auto;
    }
    .qg-editor__inspector {
      border-left: 0;
      border-top: 1px solid var(--q-line);
    }
  }

  /* ---- Decision Brief: what an agent did, what it asks, and what each answer does ---------- */
  .qg-brief {
    display: grid;
    gap: var(--q-space-5);
    padding: var(--q-space-6);
    max-width: 880px;
  }
  .qg-brief__ask {
    display: grid;
    gap: var(--q-space-3);
  }
  .qg-brief__ask-text {
    font-size: var(--q-text-2xl);
    font-weight: var(--q-weight-medium);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .qg-brief__agent {
    display: flex;
    align-items: center;
    gap: var(--q-space-3);
    min-width: 0;
  }
  .qg-brief__agent-name {
    font-weight: var(--q-weight-semibold);
  }
  .qg-brief__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-space-2);
  }
  .qg-brief__consequences {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--q-space-3);
  }
  .qg-consequence {
    padding: var(--q-space-4);
    border-radius: var(--q-radius-md);
    background: var(--q-surface-2);
    border: 1px solid var(--q-line-2);
    display: grid;
    gap: var(--q-space-1);
    font-size: var(--q-text-md);
  }
  .qg-consequence__label {
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-semibold);
    letter-spacing: var(--q-tracking-caps);
    text-transform: uppercase;
  }
  .qg-consequence--yes .qg-consequence__label { color: var(--q-ok); }
  .qg-consequence--no .qg-consequence__label { color: var(--q-ink-muted); }
  @container (max-width: 560px) {
    .qg-brief {
      padding: var(--q-space-4);
    }
    .qg-brief__consequences {
      grid-template-columns: 1fr;
    }
    .qg-brief__ask-text {
      font-size: var(--q-text-xl);
    }
  }
  /* The artifact under approval is the largest block */
  .qg-artifact {
    border-radius: var(--q-radius-md);
    border: 1px solid var(--q-line-2);
    background: var(--q-surface-2);
    overflow: hidden;
  }
  .qg-artifact__head {
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
    padding: var(--q-space-2) var(--q-space-3);
    border-bottom: 1px solid var(--q-line);
    font-size: var(--q-text-sm);
    color: var(--q-ink-2);
  }
  .qg-artifact__body {
    padding: var(--q-space-4);
  }
  .qg-artifact--email .qg-artifact__body {
    display: grid;
    gap: var(--q-space-3);
    font-size: var(--q-text-md);
    white-space: pre-wrap;
  }
  /* Timeline: what the agent did, each step citing evidence */
  .qg-timeline {
    display: grid;
    gap: 0;
    padding-left: var(--q-space-2);
  }
  .qg-timeline__step {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 0 0 var(--q-space-4) var(--q-space-5);
    border-left: 1px solid var(--q-line-2);
  }
  .qg-timeline__step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
  .qg-timeline__step::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--q-surface-1);
    border: 2px solid var(--q-accent);
  }
  .qg-cite {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--q-accent-tint);
    color: var(--q-accent);
    font-family: var(--q-font-mono);
    font-size: var(--q-text-xs);
    text-decoration: none;
    border: 0;
  }
  .qg-unverified {
    border-bottom: 1px dashed var(--q-warn);
  }
  /* Decision bar: always reachable (sticky), one primary action, consequence on the button row */
  .qg-decision {
    position: sticky;
    bottom: 0;
    z-index: var(--q-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
    flex-wrap: wrap;
    padding: var(--q-space-3) var(--q-space-4) calc(var(--q-space-3) + var(--q-safe-bottom));
    background: color-mix(in srgb, var(--q-surface-1) 94%, transparent);
    border-top: 1px solid var(--q-line-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .qg-decision__note {
    flex-basis: 100%;
    font-size: var(--q-text-xs);
    color: var(--q-ink-muted);
  }
}