/* ============================================================================
   Glass (1.1.3): frosted glass for MiniPlanner, after DICE-Suite's glass.css.

   · Built on GlassKit v1.37.0 (Jungherz GmbH, MIT), vendored whole at
     ../lib/glasskit/dist/glasskit.css with its licence beside it. The layout loads
     glasskit.css, then this sheet, after site.css, only while a person's theme is
     Glass (Services/Appearance.cs), and every rule here is keyed on
     [data-skin="glass"] on <html>. Vanilla never sees either file. GlassKit's own
     markup (.glass-*) is not used: this is the override layer its docs describe.
   · Dark and light: the kit flips its --gl-* tokens on [data-theme="light"], which the
     layout writes next to data-bs-theme. So every value here is a --gl-* reference or a
     color-mix() of them, never a literal colour (white and black only as mix partners),
     and there is no color-scheme: site.css sets it per mode. MiniPlanner.Tests/
     GlassThemeTests checks all three rules.
   · The channel ramp (--ch-*, --mp-accent) is not declared: each module keeps its hue on
     the glass, in both modes. Status hues keep their meaning; only their washes change.
   · Panes are tinted, not blurred: over the fixed aurora a blur shows nothing, and a
     backdrop-filter makes each card a stacking context that traps the drop-down inside
     it under the next card. What overlays scrolling content blurs: the top bar, toasts,
     and the sidebar when it is a drawer. (The guide's /Help/Book is a paper document with
     its own layout, always light: no theme reaches it.)
   · --surface-solid is the one opaque pane, for what must not be see-through: the
     conference drop-down, the user menu, the options of a native select.
   · Screen only: printing keeps site.css's light palette.
   ========================================================================== */

@media screen {

/* ── Tokens ──
   :root[data-skin="glass"] is 0,2,0 and outranks site.css's :root and [data-bs-theme]
   blocks in both modes. Anything that should keep switching with site.css (the channel
   ramp, the pill and chip text, --purple, --teal, the info banner) is simply not declared. */
:root[data-skin="glass"] {
  --surface-solid: color-mix(in srgb, #fff 10%, var(--gl-color-bg-mid));
  --glass-primary-grad: linear-gradient(135deg, var(--gl-color-primary) 0%, var(--gl-color-primary-mid) 50%, var(--gl-color-primary-dark) 100%);
  --glass-bar-grad: linear-gradient(to bottom, var(--gl-surface-3) 0%, var(--gl-surface-1) 100%);
  --glass-aurora:
    radial-gradient(ellipse at 20% 40%, var(--gl-bg-aurora-1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 65%, var(--gl-bg-aurora-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 20%, var(--gl-bg-aurora-3) 0%, transparent 50%),
    linear-gradient(170deg, var(--gl-color-bg-light) 0%, var(--gl-color-bg-mid) 50%, var(--gl-color-bg-dark) 100%);

  --ground: var(--gl-color-bg-dark);          /* a flat colour: the body, and ink on a pastel .btn-accent */
  --surface: var(--gl-surface-2);             /* the translucent pane */
  --surface-2: var(--gl-surface-3);           /* inputs, hover fills, inner boxes */
  --surface-3: var(--gl-surface-4);           /* pressed, strong hover, disabled fields */
  --sidebar: var(--gl-surface-1);
  --sidebar-hover: var(--gl-surface-2);
  --sidebar-active: var(--gl-color-primary-surface);
  --sidebar-text: var(--gl-color-text-muted);
  --sidebar-muted: var(--gl-icon-muted);
  --sidebar-ink: var(--gl-color-text);
  --ink: var(--gl-color-text);
  --muted: var(--gl-color-text-muted);
  --border: var(--gl-border-medium);
  --border-soft: var(--gl-border-subtle);
  --line: var(--gl-border-strong);

  --primary: var(--gl-color-primary);
  --primary-hover: var(--gl-color-primary-mid);
  --primary-soft: var(--gl-color-primary-surface);
  --primary-soft-bd: var(--gl-color-primary-border);
  --primary-ink: var(--gl-color-primary-on-surface);   /* the primary as text: lighter in dark, deeper in light */
  --on-primary: var(--gl-color-on-primary);

  --danger: var(--gl-color-error-on-surface);
  --warn: var(--gl-color-warning-on-surface);
  --ok: var(--gl-color-success-on-surface);

  /* Badge washes: the state's own text hue at glass strength. */
  --pill-filled-bg: color-mix(in srgb, var(--pill-filled-fg) 18%, transparent);
  --pill-vacant-bg: color-mix(in srgb, var(--pill-vacant-fg) 18%, transparent);
  --pill-sourcing-bg: color-mix(in srgb, var(--pill-sourcing-fg) 18%, transparent);
  --pill-pending-bg: color-mix(in srgb, var(--pill-pending-fg) 18%, transparent);
  --pill-review-bg: color-mix(in srgb, var(--pill-review-fg) 18%, transparent);
  --pill-loss-bg: color-mix(in srgb, var(--pill-loss-fg) 18%, transparent);
  --pill-hold-bg: color-mix(in srgb, var(--pill-hold-fg) 18%, transparent);

  --banner-warn-bg: var(--gl-color-warning-surface); --banner-warn-bd: var(--gl-color-warning-border); --banner-warn-fg: var(--gl-color-warning-on-surface);
  --banner-bad-bg: var(--gl-color-error-surface);    --banner-bad-bd: var(--gl-color-error-border);    --banner-bad-fg: var(--gl-color-error-on-surface);
  --banner-ok-bg: var(--gl-color-success-surface);   --banner-ok-bd: var(--gl-color-success-border);   --banner-ok-fg: var(--gl-color-success-on-surface);

  --avatar-bg: var(--gl-color-primary-surface); --avatar-fg: var(--gl-color-primary-on-surface);
  /* The kit's card shadow with its inner highlight along the top, on every pane that uses --shadow. */
  --shadow: var(--gl-shadow-card), var(--gl-inset-strong);
  --shadow-pop: var(--gl-shadow-modal);
  --focus-ring: var(--gl-color-primary-border);   /* a colour: site.css wraps it in 0 0 0 3px */

  --sans: var(--gl-font-family);                  /* the system stack; --mono stays IBM Plex Mono */
  --radius: var(--gl-radius-card);
  --radius-sm: var(--gl-radius-input);
  --radius-xs: var(--gl-radius-xs);
}
:root[data-skin="glass"][data-theme="light"] {
  --surface-solid: color-mix(in srgb, #fff 85%, var(--gl-color-bg-mid));
}

/* ── The field: the aurora behind everything ──
   On a fixed pseudo, so the page scrolls over a still scene. body is no stacking context,
   so z-index -1 paints it under every element and over the root's own colour. */
:root[data-skin="glass"] { background: var(--gl-color-bg-dark); }
:root[data-skin="glass"] body { background: transparent; }
:root[data-skin="glass"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glass-aurora); }
:root[data-skin="glass"] * { scrollbar-width: thin; scrollbar-color: var(--gl-border-strong) transparent; }
:root[data-skin="glass"] ::selection { background: var(--gl-color-primary-surface); }
:root[data-skin="glass"] h1, :root[data-skin="glass"] .mp-page-head h1 { color: var(--gl-color-text-heading); }
:root[data-skin="glass"] .main a:not([class]), :root[data-skin="glass"] .auth-card a:not([class]) { color: var(--primary-ink); }

/* ── The sidebar ──
   A frosted column with a hairline at its edge; the lit link an amber wash with the kit's
   inner highlight. Its foot is part of the same pane, so it takes no second tint. */
:root[data-skin="glass"] .sidebar { border-right: 1px solid var(--gl-border-subtle); }
:root[data-skin="glass"] .sidebar-bottom { background: transparent; border-top-color: var(--gl-border-subtle); }
:root[data-skin="glass"] .nav-link-d.active { box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .brand-mark { background: var(--glass-primary-grad); color: var(--gl-color-on-primary); box-shadow: var(--gl-inset-strong); }
:root[data-skin="glass"] .user-menu { background: var(--surface-solid); border-color: var(--gl-border-medium); border-radius: var(--gl-radius-btn); box-shadow: var(--gl-shadow-card), var(--gl-inset-strong); }
:root[data-skin="glass"][data-sidebar="collapsed"] .nav-link-d .mp-dot { box-shadow: 0 0 0 2px var(--surface-solid); }

/* ── The top bar ──
   The kit's nav bar: a surface gradient with a real blur, since the page scrolls under it. */
:root[data-skin="glass"] .topbar {
  background: var(--glass-bar-grad); backdrop-filter: blur(var(--gl-blur)); -webkit-backdrop-filter: blur(var(--gl-blur));
  border-bottom: 1px solid var(--gl-border-subtle); box-shadow: var(--gl-inset-subtle);
}
:root[data-skin="glass"] .icon-btn, :root[data-skin="glass"] .mp-conf-switch { background: var(--gl-surface-2); border-color: var(--gl-border-medium); box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .icon-btn:hover, :root[data-skin="glass"] .mp-conf-switch:hover,
:root[data-skin="glass"] .mp-conf-switch[aria-expanded="true"] { background: var(--gl-surface-3); border-color: var(--gl-border-strong); }

/* ── Drop-downs ──
   Anything that escapes its pane is solid: see-through, it would read against whatever
   lies under it. */
:root[data-skin="glass"] .dropdown-menu {
  --bs-dropdown-bg: var(--surface-solid); --bs-dropdown-border-color: var(--gl-border-medium);
  --bs-dropdown-box-shadow: var(--gl-shadow-card), var(--gl-inset-strong);
  box-shadow: var(--gl-shadow-card), var(--gl-inset-strong);
}
:root[data-skin="glass"] .modal { --bs-modal-bg: var(--surface-solid); }
/* A native select's list takes the field's see-through colour in Chrome, Edge and Firefox. */
:root[data-skin="glass"] select option { background-color: var(--surface-solid); color: var(--ink); }

/* ── Buttons ──
   The kit's three: the primary as its amber gradient with a warm rim, a frosted neutral
   that lifts on hover, and the status outlines on the same frosted base. Each kind names
   its shadow in --glass-btn-shadow and one rule draws it, skipping :focus-visible, where
   Bootstrap draws the focus ring as a box-shadow. */
:root[data-skin="glass"] .btn { --glass-btn-shadow: var(--gl-shadow-btn), var(--gl-inset-subtle); }
:root[data-skin="glass"] .btn-accent { --glass-btn-shadow: var(--gl-shadow-btn), var(--gl-inset-strong); }
:root[data-skin="glass"] .btn-primary {
  --glass-btn-shadow: var(--gl-shadow-btn-primary), var(--gl-inset-strong);
  --bs-btn-border-color: var(--gl-border-warm); --bs-btn-hover-border-color: var(--gl-border-warm); --bs-btn-active-border-color: var(--gl-border-warm);
  --bs-btn-color: var(--gl-color-on-primary); --bs-btn-hover-color: var(--gl-color-on-primary); --bs-btn-active-color: var(--gl-color-on-primary);
  background-image: var(--glass-primary-grad);
}
:root[data-skin="glass"] .btn-primary:hover { filter: brightness(1.06); }
:root[data-skin="glass"] .btn:not(.btn-link):not(:focus-visible) { box-shadow: var(--glass-btn-shadow); }
:root[data-skin="glass"] .btn:not(.btn-link):not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
:root[data-skin="glass"] .btn-outline-secondary, :root[data-skin="glass"] .btn-secondary, :root[data-skin="glass"] .btn-outline-primary,
:root[data-skin="glass"] .btn-light, :root[data-skin="glass"] .btn-outline-dark, :root[data-skin="glass"] .btn-outline-light,
:root[data-skin="glass"] .btn-outline-danger, :root[data-skin="glass"] .btn-danger, :root[data-skin="glass"] .btn-outline-success,
:root[data-skin="glass"] .btn-success, :root[data-skin="glass"] .btn-outline-warning, :root[data-skin="glass"] .btn-warning {
  --bs-btn-bg: var(--gl-surface-2); --bs-btn-hover-bg: var(--gl-surface-3); --bs-btn-active-bg: var(--gl-surface-4);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
:root[data-skin="glass"] .btn-outline-secondary, :root[data-skin="glass"] .btn-secondary, :root[data-skin="glass"] .btn-outline-primary,
:root[data-skin="glass"] .btn-light, :root[data-skin="glass"] .btn-outline-dark, :root[data-skin="glass"] .btn-outline-light {
  --bs-btn-hover-border-color: var(--gl-border-strong);
}

/* ── Panes: cards, KPI tiles, the guide's cards ──
   --shadow already carries the highlight; the rim is the kit's medium border. KPI tiles keep
   their module edge, and the lighter status-card surface; the active one keeps its module
   wash under the pointer too. */
:root[data-skin="glass"] .card { --bs-card-border-color: var(--gl-border-medium); }
:root[data-skin="glass"] .mp-kpi { background: var(--gl-surface-1); border-color: var(--gl-border-subtle); }
:root[data-skin="glass"] a.mp-kpi:hover { background: var(--gl-surface-2); }
:root[data-skin="glass"] .mp-kpi.is-active,
:root[data-skin="glass"] a.mp-kpi.is-active:hover { background: color-mix(in srgb, var(--mp-accent) 12%, var(--gl-surface-2)); }
:root[data-skin="glass"] .guide-card, :root[data-skin="glass"] .guide-pager a { background: var(--gl-surface-1); border-color: var(--gl-border-subtle); }
:root[data-skin="glass"] .guide-card:hover, :root[data-skin="glass"] .guide-card:focus-visible, :root[data-skin="glass"] .guide-pager a:hover {
  background: var(--gl-color-primary-surface); border-color: var(--gl-color-primary-border);
}
/* Admin Settings' panels: the guide cards' surfaces, the icon square with the kit's highlight. */
:root[data-skin="glass"] .mp-panel { background: var(--gl-surface-1); border-color: var(--gl-border-subtle); }
:root[data-skin="glass"] .mp-panel:hover, :root[data-skin="glass"] .mp-panel:focus-visible {
  background: var(--gl-color-primary-surface); border-color: var(--gl-color-primary-border);
}
:root[data-skin="glass"] .mp-panel-icon { box-shadow: var(--gl-inset-medium); }

/* ── Tables ──
   The kit's table: a clear head over a medium rule, the faintest surface on a hovered row. */
:root[data-skin="glass"] .table > thead th, :root[data-skin="glass"] .guide-table th { background: transparent; border-bottom: 1px solid var(--gl-border-medium); }
:root[data-skin="glass"] .table { --bs-table-hover-bg: var(--gl-surface-1); --bs-table-striped-bg: var(--gl-surface-1); }

/* ── Fields ──
   The kit's inner highlight on every input surface; the tokens already give them the pane
   step, the amber focus rim and ring. Bootstrap's floating label backs itself with a chip in
   the field colour, which shows on a see-through field, so it goes clear. */
:root[data-skin="glass"] .form-control, :root[data-skin="glass"] .form-select,
:root[data-skin="glass"] .dt-container .dt-search input, :root[data-skin="glass"] .dt-container .dt-length select,
:root[data-skin="glass"] .wn-filter select, :root[data-skin="glass"] .guide-search input { box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .form-control:focus, :root[data-skin="glass"] .form-select:focus,
:root[data-skin="glass"] .guide-search input:focus { border-color: var(--gl-border-focus); box-shadow: 0 0 0 3px var(--focus-ring), var(--gl-inset-subtle); }
:root[data-skin="glass"] .form-floating > .form-control:focus ~ label::after,
:root[data-skin="glass"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
:root[data-skin="glass"] .form-floating > .form-select ~ label::after,
:root[data-skin="glass"] .form-floating > .form-control:disabled ~ label::after,
:root[data-skin="glass"] .form-floating > .form-control[readonly] ~ label::after { background-color: transparent; }
:root[data-skin="glass"] ::placeholder { color: var(--gl-color-text-muted); opacity: 1; }

/* ── Badges, avatars ──
   The kit's badge: a full pill with a rim in the state's own hue (currentColor is its text). */
:root[data-skin="glass"] .mp-badge, :root[data-skin="glass"] .badge { border-radius: var(--gl-radius-full); }
:root[data-skin="glass"] .mp-badge { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); padding: 2px 10px; box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .avatar { border: 1px solid var(--gl-color-primary-border); box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .avatar.dark { border-color: var(--gl-border-medium); }

/* ── Alerts, toasts ──
   The toast is the kit's: a surface gradient under its tint, blurred over whatever it covers. */
:root[data-skin="glass"] .alert { box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .flash {
  background: linear-gradient(var(--flash-bg), var(--flash-bg)), linear-gradient(to bottom, var(--gl-surface-4) 0%, var(--gl-surface-2) 100%);
  backdrop-filter: blur(var(--gl-blur)); -webkit-backdrop-filter: blur(var(--gl-blur));
  border-radius: var(--gl-radius-btn); box-shadow: var(--gl-shadow-toast), var(--gl-inset-medium);
}

/* ── Signed out ──
   The sign-in card is the kit's dialog: the glow gradient, brighter at the top, the modal
   shadow, over the aurora. */
:root[data-skin="glass"] .auth-wrap { background: transparent; }
:root[data-skin="glass"] .auth-card {
  background: linear-gradient(to bottom, var(--gl-dialog-glow-top) 0%, var(--gl-card-glow-low) 50%, var(--gl-card-glow-bottom) 100%);
  border-color: var(--gl-border-medium); box-shadow: var(--gl-shadow-modal), var(--gl-inset-strong);
}

/* ── The appearance pickers (Shared/_AppearancePicker): the chosen card in the kit's amber ── */
:root[data-skin="glass"] .theme-opt { background: var(--gl-surface-1); box-shadow: var(--gl-inset-subtle); }
:root[data-skin="glass"] .theme-opt:has(input:checked) { background: var(--gl-color-primary-surface); }

}

/* ── Narrow windows: the sidebar is a drawer over the page ──
   Then the page is right behind it, so it frosts for real, with a tint strong enough to read
   on. site.css makes it the drawer below 992px. */
@media screen and (max-width: 991.98px) {
  :root[data-skin="glass"] .sidebar {
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    backdrop-filter: blur(var(--gl-blur-heavy)); -webkit-backdrop-filter: blur(var(--gl-blur-heavy));
  }
}

/* ── Without a backdrop filter ──
   What blurs would be see-through over the page, so it goes solid instead. */
@media screen {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-skin="glass"] .topbar { background: var(--surface-solid); }
    :root[data-skin="glass"] .flash { background: linear-gradient(var(--flash-bg), var(--flash-bg)), var(--surface-solid); }
  }
}
@media screen and (max-width: 991.98px) {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-skin="glass"] .sidebar { background: var(--surface-solid); }
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  :root[data-skin="glass"] .btn { transition: none; }
  :root[data-skin="glass"] .btn:not(.btn-link):not(:disabled):not(.disabled):hover { transform: none; }
}