/* ==========================================================================
   Design Lab — pack: glass
   Translucent panel fills, backdrop blur, a hairline of light along the top
   edge, soft ambient shadow, --radius-md throughout. Personality only:
   every structural rule lives in _base.css.

   Colour comes from tokens. The only literals are rgba(255,255,255,a) and
   rgba(0,0,0,a), which express "a wash of whatever is behind me" — the one
   thing no token can say. State washes (hover, selected) use surface and
   accent tokens, so they show on light and dark themes alike.

   Blur lives on panels only. Small parts (buttons, chips, badges, inputs)
   take a token fill with no blur, so a table of chips does not stack
   dozens of blur layers.

   Overlays inside a panel: a blurred panel is a stacking context and a
   backdrop root. To let a dropdown menu or a tooltip paint over the next
   panel, the panel that holds an open overlay rises in z-index (see
   "Overlay escape" near the end). The menu and the bubble also sit on an
   opaque --surface base under the --panel-bg tint, because a nested blur
   can only sample its parent panel, not the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ground + shared panel recipe
   -------------------------------------------------------------------------- */

[data-pack="glass"] {
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
}

[data-pack="glass"] .c-card,
[data-pack="glass"] .c-stat,
[data-pack="glass"] .c-list,
[data-pack="glass"] .c-code,
[data-pack="glass"] .c-table,
[data-pack="glass"] .c-navbar,
[data-pack="glass"] .c-sidebar,
[data-pack="glass"] .c-dropdown__menu,
[data-pack="glass"] .c-modal__panel,
[data-pack="glass"] .c-drawer__panel,
[data-pack="glass"] .c-toast,
[data-pack="glass"] .c-empty,
[data-pack="glass"] .c-footer {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text);
}

[data-pack="glass"] .c-navbar,
[data-pack="glass"] .c-footer {
  border-radius: 0;
}

[data-pack="glass"] .c-sidebar {
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   1 · Button
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-btn {
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  color: var(--text);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-btn:hover {
  background-color: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

[data-pack="glass"] .c-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
}

[data-pack="glass"] .c-btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow:
    0 2px 12px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-pack="glass"] .c-btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

[data-pack="glass"] .c-btn--primary:active {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

[data-pack="glass"] .c-btn--secondary {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

[data-pack="glass"] .c-btn--secondary:hover {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
}

[data-pack="glass"] .c-btn--secondary:active {
  background-color: var(--surface-3);
}

[data-pack="glass"] .c-btn--ghost {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
}

[data-pack="glass"] .c-btn--ghost:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  border-color: var(--panel-border);
  color: var(--text);
}

[data-pack="glass"] .c-btn--ghost:active {
  background-color: var(--surface-3);
}

[data-pack="glass"] .c-btn--danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-accent);
  box-shadow:
    0 2px 12px var(--danger-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* The generic .c-btn:hover and :active rules have the same specificity and
   come first, so danger keeps its fill here. The hover shows as a lift, a
   wider glow and a brighter top highlight. */
[data-pack="glass"] .c-btn--danger:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-accent);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
  box-shadow:
    0 4px 18px var(--danger-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-pack="glass"] .c-btn--danger:active {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-accent);
  background-image: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-pack="glass"] .c-btn--danger:focus-visible {
  outline-color: var(--danger);
}

[data-pack="glass"] .c-btn__icon {
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   2 · Input   3 · Select   6 · Textarea
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-input,
[data-pack="glass"] .c-select,
[data-pack="glass"] .c-textarea {
  background-color: var(--bg-sunken);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-input::placeholder,
[data-pack="glass"] .c-textarea::placeholder {
  color: var(--text-faint);
}

[data-pack="glass"] .c-input:hover,
[data-pack="glass"] .c-select:hover,
[data-pack="glass"] .c-textarea:hover {
  border-color: var(--text-muted);
}

[data-pack="glass"] .c-input.is-error,
[data-pack="glass"] .c-select.is-error,
[data-pack="glass"] .c-textarea.is-error,
[data-pack="glass"] .c-field.is-error .c-input {
  border-color: var(--danger);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.22),
    0 0 0 3px var(--danger-soft);
}

[data-pack="glass"] .c-select option {
  background-color: var(--surface);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   4 · Checkbox   5 · Radio
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-checkbox,
[data-pack="glass"] .c-radio {
  color: var(--text);
}

[data-pack="glass"] .c-checkbox__box,
[data-pack="glass"] .c-radio__dot {
  accent-color: var(--accent);
  border-radius: var(--radius-sm);
}

[data-pack="glass"] .c-radio__dot {
  border-radius: var(--radius-full);
}

[data-pack="glass"] .c-checkbox__label,
[data-pack="glass"] .c-radio__label {
  color: var(--text);
}

[data-pack="glass"] .c-checkbox:hover .c-checkbox__box,
[data-pack="glass"] .c-radio:hover .c-radio__dot {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-pack="glass"] .c-checkbox.is-error .c-checkbox__box,
[data-pack="glass"] .c-radio.is-error .c-radio__dot,
[data-pack="glass"] .c-checkbox__box.is-error,
[data-pack="glass"] .c-radio__dot.is-error {
  accent-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

[data-pack="glass"] .c-checkbox.is-error .c-checkbox__label,
[data-pack="glass"] .c-radio.is-error .c-radio__label,
[data-pack="glass"] .c-checkbox__box.is-error ~ .c-checkbox__label,
[data-pack="glass"] .c-radio__dot.is-error ~ .c-radio__label {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   7 · Switch
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-switch {
  color: var(--text);
}

[data-pack="glass"] .c-switch__track {
  background-color: var(--surface-3);
  border: var(--border-width) solid var(--panel-border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-switch__thumb {
  background-color: var(--text-muted);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--dur-base) var(--ease-spring);
}

[data-pack="glass"] .c-switch:hover .c-switch__track {
  border-color: var(--border-strong);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.25),
    0 0 0 3px var(--accent-soft);
}

[data-pack="glass"] .c-switch.is-active .c-switch__track,
[data-pack="glass"] .c-switch[aria-checked="true"] .c-switch__track {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
}

[data-pack="glass"] .c-switch.is-active .c-switch__thumb,
[data-pack="glass"] .c-switch[aria-checked="true"] .c-switch__thumb {
  background-color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   8 · Field
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-field__label {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-field__hint {
  color: var(--text-muted);
}

[data-pack="glass"] .c-field__error {
  color: var(--danger);
}

[data-pack="glass"] .c-field__hint code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9 · Card
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-card__header {
  border-bottom: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

[data-pack="glass"] .c-card__body {
  color: var(--text-muted);
}

[data-pack="glass"] .c-card__footer {
  border-top: var(--border-width) solid var(--panel-border);
  background-color: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   10 · Stat
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-stat__label {
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

[data-pack="glass"] .c-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

[data-pack="glass"] .c-stat__delta {
  color: var(--text-muted);
}

[data-pack="glass"] .c-stat__delta.is-up {
  color: var(--success);
}

[data-pack="glass"] .c-stat__delta.is-down {
  color: var(--danger);
}

[data-pack="glass"] .c-stat__spark {
  color: var(--accent);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   11 · Badge
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-badge {
  background-color: var(--surface-3);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-badge--info {
  background-color: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}

[data-pack="glass"] .c-badge--success {
  background-color: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

[data-pack="glass"] .c-badge--warning {
  background-color: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}

[data-pack="glass"] .c-badge--danger {
  background-color: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   12 · Avatar
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-avatar {
  background-color: var(--surface-3);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-pack="glass"] .c-avatar__initials {
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

/* --------------------------------------------------------------------------
   13 · Table
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-table {
  overflow: hidden;
}

[data-pack="glass"] .c-table caption {
  color: var(--text-muted);
  text-align: left;
}

[data-pack="glass"] .c-table thead th {
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

[data-pack="glass"] .c-table tbody td,
[data-pack="glass"] .c-table tbody th {
  border-bottom: var(--border-width) solid var(--panel-border);
  color: var(--text);
}

/* A footer row (a total) has the body cell ink and a stronger top edge, so
   it reads as a result of the rows above it, not as one more row. */
[data-pack="glass"] .c-table tfoot td,
[data-pack="glass"] .c-table tfoot th {
  border-top: var(--border-width) solid var(--border-strong);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: var(--weight-bold);
}

[data-pack="glass"] .c-table tbody tr:last-child td,
[data-pack="glass"] .c-table tbody tr:last-child th {
  border-bottom: 0;
}

[data-pack="glass"] .c-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-table tbody tr:not([class*="c-diff__row--"]):hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-table tbody tr.is-selected:not([class*="c-diff__row--"]) {
  background-color: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

[data-pack="glass"] .c-table tbody tr.is-error,
[data-pack="glass"] .c-table.is-error tbody tr:first-child {
  background-color: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger);
}

[data-pack="glass"] .c-table.is-error {
  border-color: var(--danger);
}

[data-pack="glass"] .c-table thead th.is-active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

[data-pack="glass"] .c-table__num {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   14 · List row
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-list__row {
  border-bottom: var(--border-width) solid var(--panel-border);
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-list__row:last-child {
  border-bottom: 0;
}

[data-pack="glass"] .c-list__row:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-list__row.is-selected,
[data-pack="glass"] .c-list__row.is-active {
  background-color: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

[data-pack="glass"] .c-list__meta {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15 · Code block
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-code {
  font-family: var(--font-mono);
}

[data-pack="glass"] .c-code__header {
  background-color: rgba(255, 255, 255, 0.04);
  border-bottom: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-code__body {
  background-color: var(--bg-sunken);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   16 · Progress
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-progress {
  background-color: var(--surface-3);
  border: var(--border-width) solid var(--panel-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-pack="glass"] .c-progress__bar {
  background-image: linear-gradient(
    to right,
    var(--accent),
    var(--accent-hover)
  );
  box-shadow:
    0 0 10px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: width var(--dur-slow) var(--ease-out);
}

[data-pack="glass"] .c-progress.is-error .c-progress__bar {
  background-image: linear-gradient(to right, var(--danger), var(--danger));
  box-shadow: 0 0 10px var(--danger-soft);
}

/* --------------------------------------------------------------------------
   17 · Spinner + skeleton
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-spinner {
  border-color: var(--accent-soft);
  border-top-color: var(--accent);
}

[data-pack="glass"] .c-skeleton {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  background-color: var(--surface-2);
  border-radius: var(--radius-md);
  opacity: 1;
  animation: dl-glass-shimmer 1800ms var(--ease-in-out) infinite;
  background-size: 220% 100%;
}

/* --------------------------------------------------------------------------
   18 · Navbar
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-navbar {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

[data-pack="glass"] .c-navbar__brand {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-size: var(--text-lg);
}

[data-pack="glass"] .c-navbar__link {
  color: var(--text-muted);
  border-radius: var(--radius-full);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-navbar__link:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-navbar__link.is-active {
  background-color: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   19 · Sidebar
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-sidebar__label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-sidebar__item {
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-sidebar__item:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-sidebar__item.is-active {
  background-color: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   20 · Tabs
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tabs__list {
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
}

[data-pack="glass"] .c-tabs__tab {
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-tabs__tab:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-tabs__tab.is-active {
  background-color: var(--surface-2);
  color: var(--text);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-pack="glass"] .c-tabs__panel {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tabs__panel h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   21 · Breadcrumb
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-breadcrumb {
  color: var(--text-muted);
}

[data-pack="glass"] .c-breadcrumb__item a {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-breadcrumb__item a:hover {
  color: var(--text);
}

[data-pack="glass"] .c-breadcrumb__item.is-active a {
  color: var(--text);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-breadcrumb__sep {
  color: var(--text-muted);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   22 · Pagination
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-pagination__page {
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-pagination__page:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  border-color: var(--panel-border);
  color: var(--text);
}

[data-pack="glass"] .c-pagination__page.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 2px 10px var(--accent-soft);
}

[data-pack="glass"] .c-pagination__gap {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   23 · Dropdown
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-dropdown__trigger {
  background-color: var(--surface-2);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background-color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-dropdown__trigger:hover,
[data-pack="glass"] .c-dropdown.is-open .c-dropdown__trigger {
  background-color: var(--surface-3);
}

[data-pack="glass"] .c-dropdown__menu {
  background:
    linear-gradient(var(--panel-bg), var(--panel-bg)),
    var(--surface);
  box-shadow:
    var(--panel-shadow),
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: dl-glass-rise var(--dur-base) var(--ease-out) both;
}

[data-pack="glass"] .c-dropdown__item {
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-dropdown__item:hover,
[data-pack="glass"] .c-dropdown__item.is-active {
  background-color: var(--accent-soft);
  color: var(--text);
}

[data-pack="glass"] .c-dropdown__item kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

[data-pack="glass"] .c-dropdown__sep {
  background-color: var(--panel-border);
}

/* --------------------------------------------------------------------------
   24 · Modal
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) / 2));
  backdrop-filter: blur(calc(var(--panel-blur) / 2));
  animation: dl-glass-fade var(--dur-base) var(--ease-out) both;
}

[data-pack="glass"] .c-modal__panel {
  border-radius: var(--radius-lg);
  box-shadow:
    var(--panel-shadow),
    0 24px 64px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: dl-glass-rise var(--dur-slow) var(--ease-spring) both;
}

[data-pack="glass"] .c-modal__header {
  border-bottom: var(--border-width) solid var(--panel-border);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text);
}

[data-pack="glass"] .c-modal__body {
  color: var(--text-muted);
}

[data-pack="glass"] .c-modal__footer {
  border-top: var(--border-width) solid var(--panel-border);
  background-color: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   25 · Drawer
   -------------------------------------------------------------------------- */

/* The scrim blur sits on a ::before layer, not on the drawer root. A blur
   on the root makes the root a backdrop root, and then the panel blur only
   samples the dark scrim. */
[data-pack="glass"] .c-drawer {
  background-color: rgba(0, 0, 0, 0.45);
}

[data-pack="glass"] .c-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) / 2));
  backdrop-filter: blur(calc(var(--panel-blur) / 2));
}

[data-pack="glass"] .c-drawer__panel {
  border-radius: 0;
  box-shadow:
    var(--panel-shadow),
    -16px 0 48px rgba(0, 0, 0, 0.4);
  animation: dl-glass-slide-right var(--dur-slow) var(--ease-out) both;
}

[data-pack="glass"] .c-drawer--left .c-drawer__panel {
  box-shadow:
    var(--panel-shadow),
    16px 0 48px rgba(0, 0, 0, 0.4);
  animation-name: dl-glass-slide-left;
}

[data-pack="glass"] .c-drawer__header {
  border-bottom: var(--border-width) solid var(--panel-border);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text);
}

[data-pack="glass"] .c-drawer__body {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   26 · Toast
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-toast {
  box-shadow:
    var(--panel-shadow),
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: dl-glass-rise var(--dur-base) var(--ease-out) both;
}

[data-pack="glass"] .c-toast__icon {
  color: var(--info);
}

[data-pack="glass"] .c-toast__body {
  color: var(--text-muted);
}

[data-pack="glass"] .c-toast__close {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-toast__close:hover {
  color: var(--text);
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-toast--success {
  border-color: var(--success);
}

[data-pack="glass"] .c-toast--success .c-toast__icon {
  color: var(--success);
}

[data-pack="glass"] .c-toast--warning {
  border-color: var(--warning);
}

[data-pack="glass"] .c-toast--warning .c-toast__icon {
  color: var(--warning);
}

[data-pack="glass"] .c-toast--danger {
  border-color: var(--danger);
}

[data-pack="glass"] .c-toast--danger .c-toast__icon {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   27 · Alert
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-alert {
  background-color: var(--info-soft);
  border: var(--border-width) solid var(--info);
  border-radius: var(--radius-md);
  color: var(--text);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-pack="glass"] .c-alert__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text);
}

[data-pack="glass"] .c-alert__body {
  color: var(--text-muted);
}

[data-pack="glass"] .c-alert--info {
  background-color: var(--info-soft);
  border-color: var(--info);
}

[data-pack="glass"] .c-alert--info .c-alert__title {
  color: var(--info);
}

[data-pack="glass"] .c-alert--success {
  background-color: var(--success-soft);
  border-color: var(--success);
}

[data-pack="glass"] .c-alert--success .c-alert__title {
  color: var(--success);
}

[data-pack="glass"] .c-alert--warning {
  background-color: var(--warning-soft);
  border-color: var(--warning);
}

[data-pack="glass"] .c-alert--warning .c-alert__title {
  color: var(--warning);
}

[data-pack="glass"] .c-alert--danger {
  background-color: var(--danger-soft);
  border-color: var(--danger);
}

[data-pack="glass"] .c-alert--danger .c-alert__title {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   28 · Tooltip
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tooltip__bubble {
  background-color: var(--surface-3);
  background-image: linear-gradient(var(--panel-bg), var(--panel-bg));
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  transition:
    opacity var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  transform: translateX(-50%) translateY(4px);
}

[data-pack="glass"] .c-tooltip:hover .c-tooltip__bubble,
[data-pack="glass"] .c-tooltip:focus-within .c-tooltip__bubble,
[data-pack="glass"] .c-tooltip.is-open .c-tooltip__bubble {
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   29 · Empty state
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-empty {
  border-style: dashed;
  border-radius: var(--radius-lg);
}

[data-pack="glass"] .c-empty__art {
  color: var(--accent);
  opacity: 0.7;
}

[data-pack="glass"] .c-empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text);
}

[data-pack="glass"] .c-empty__body {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   30 · Footer
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-footer {
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: var(--text-muted);
}

[data-pack="glass"] .c-footer__col h2,
[data-pack="glass"] .c-footer__col h3,
[data-pack="glass"] .c-footer__col h4 {
  color: var(--text);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

[data-pack="glass"] .c-footer a {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-footer a:hover {
  color: var(--accent);
}

[data-pack="glass"] .c-footer__legal {
  border-top: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Focus + keyframes
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-btn:focus-visible,
[data-pack="glass"] .c-input:focus-visible,
[data-pack="glass"] .c-select:focus-visible,
[data-pack="glass"] .c-textarea:focus-visible,
[data-pack="glass"] .c-checkbox__box:focus-visible,
[data-pack="glass"] .c-radio__dot:focus-visible,
[data-pack="glass"] .c-switch:focus-visible,
[data-pack="glass"] .c-tabs__tab:focus-visible,
[data-pack="glass"] .c-tabs__panel:focus-visible,
[data-pack="glass"] .c-code__body:focus-visible,
[data-pack="glass"] .c-chat__log:focus-visible,
[data-pack="glass"] .c-filter__panel:focus-visible,
[data-pack="glass"] .c-prompt__send:focus-visible,
[data-pack="glass"] .c-navbar__brand:focus-visible,
[data-pack="glass"] .c-tune__num:focus-visible,
[data-pack="glass"] .c-navbar__link:focus-visible,
[data-pack="glass"] .c-sidebar__item:focus-visible,
[data-pack="glass"] .c-breadcrumb a:focus-visible,
[data-pack="glass"] .c-pagination__page:focus-visible,
[data-pack="glass"] .c-dropdown__trigger:focus-visible,
[data-pack="glass"] .c-dropdown__item:focus-visible,
[data-pack="glass"] .c-list__row:focus-visible,
[data-pack="glass"] .c-toast__close:focus-visible,
[data-pack="glass"] .c-tooltip:focus-visible,
[data-pack="glass"] .c-footer a:focus-visible,
[data-pack="glass"] .c-approval__option:focus-visible,
[data-pack="glass"] .c-chat__tab:focus-visible,
[data-pack="glass"] .c-code__copy:focus-visible,
[data-pack="glass"] .c-command__item:focus-visible,
[data-pack="glass"] .c-filter__chip:focus-visible,
[data-pack="glass"] .c-prompt__chip-remove:focus-visible,
[data-pack="glass"] .c-prompt__tool:focus-visible,
[data-pack="glass"] .c-records__link:focus-visible,
[data-pack="glass"] .c-selection__action:focus-visible,
[data-pack="glass"] .c-sidebar__action:focus-visible,
[data-pack="glass"] .c-stream__cite:focus-visible,
[data-pack="glass"] .c-stream__followup:focus-visible,
[data-pack="glass"] .c-stream__source:focus-visible,
[data-pack="glass"] .c-task__row:focus-visible,
[data-pack="glass"] .c-thinking__summary:focus-visible,
[data-pack="glass"] .c-tune__slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-pack="glass"] .c-input:focus-visible,
[data-pack="glass"] .c-select:focus-visible,
[data-pack="glass"] .c-textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 0 4px var(--accent-soft);
}

@keyframes dl-glass-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dl-glass-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dl-glass-slide-right {
  from {
    transform: translateX(6%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dl-glass-slide-left {
  from {
    transform: translateX(-6%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dl-glass-shimmer {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -40% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pack="glass"] .c-btn,
  [data-pack="glass"] .c-input,
  [data-pack="glass"] .c-select,
  [data-pack="glass"] .c-textarea,
  [data-pack="glass"] .c-switch__track,
  [data-pack="glass"] .c-switch__thumb,
  [data-pack="glass"] .c-table tbody tr,
  [data-pack="glass"] .c-list__row,
  [data-pack="glass"] .c-navbar__link,
  [data-pack="glass"] .c-sidebar__item,
  [data-pack="glass"] .c-tabs__tab,
  [data-pack="glass"] .c-breadcrumb__item a,
  [data-pack="glass"] .c-pagination__page,
  [data-pack="glass"] .c-dropdown__trigger,
  [data-pack="glass"] .c-dropdown__item,
  [data-pack="glass"] .c-progress__bar,
  [data-pack="glass"] .c-toast__close,
  [data-pack="glass"] .c-tooltip__bubble,
  [data-pack="glass"] .c-footer a,
  [data-pack="glass"] .c-thinking__summary,
  [data-pack="glass"] .c-stream__cite,
  [data-pack="glass"] .c-stream__source,
  [data-pack="glass"] .c-stream__followup,
  [data-pack="glass"] .c-approval__option,
  [data-pack="glass"] .c-task__row,
  [data-pack="glass"] .c-chat__tab,
  [data-pack="glass"] .c-prompt__tool,
  [data-pack="glass"] .c-selection__action,
  [data-pack="glass"] .c-command__item,
  [data-pack="glass"] .c-filter__chip,
  [data-pack="glass"] .c-sidebar__action,
  [data-pack="glass"] .c-code__copy,
  [data-pack="glass"] .c-records__link,
  [data-pack="glass"] .c-checkbox__box,
  [data-pack="glass"] .c-radio__dot,
  [data-pack="glass"] .c-card {
    transition: none;
  }

  [data-pack="glass"] .c-modal__panel,
  [data-pack="glass"] .c-modal__backdrop,
  [data-pack="glass"] .c-drawer__panel,
  [data-pack="glass"] .c-drawer--left .c-drawer__panel,
  [data-pack="glass"] .c-dropdown__menu,
  [data-pack="glass"] .c-toast,
  [data-pack="glass"] .c-skeleton {
    animation: none;
  }

  [data-pack="glass"] .c-btn:hover,
  [data-pack="glass"] .c-card.is-active {
    transform: none;
  }

  [data-pack="glass"] .c-tooltip__bubble {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Root containers — the tabs, pagination and modal roots carry no fill of
   their own (their personality lives on __list / __page / __panel), but they
   still need an on-theme colour context so inherited text and currentColor
   icons resolve against the theme wherever the component is mounted.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tabs {
  color: var(--text);
}

[data-pack="glass"] .c-pagination {
  color: var(--text-muted);
}

[data-pack="glass"] .c-modal {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   31 · Agent panels — the shared glass recipe, extended
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-thinking,
[data-pack="glass"] .c-approval,
[data-pack="glass"] .c-rec,
[data-pack="glass"] .c-context__chunk,
[data-pack="glass"] .c-insight,
[data-pack="glass"] .c-tune,
[data-pack="glass"] .c-chat,
[data-pack="glass"] .c-prompt,
[data-pack="glass"] .c-command,
[data-pack="glass"] .c-selection__bar,
[data-pack="glass"] .c-stream,
[data-pack="glass"] .c-task,
[data-pack="glass"] .c-context,
[data-pack="glass"] .c-diff,
[data-pack="glass"] .c-records,
[data-pack="glass"] .c-filter {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text);
}

[data-pack="glass"] .c-command,
[data-pack="glass"] .c-selection__bar {
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   32 · Agent loader
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-loader {
  color: var(--text-muted);
}

[data-pack="glass"] .c-loader__cell {
  background-color: var(--accent);
  box-shadow: 0 0 6px var(--accent-soft);
}

/* Pixels keep a soft square. Dots and orbit keep the round cell from
   _base.css, so the three variants stay different. */
[data-pack="glass"] .c-loader:not(.c-loader--dots):not(.c-loader--orbit) .c-loader__cell,
[data-pack="glass"] .c-loader--pixels .c-loader__cell {
  border-radius: 2px;
}

[data-pack="glass"] .c-loader--dots .c-loader__cell,
[data-pack="glass"] .c-loader--orbit .c-loader__cell {
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--accent-soft);
}

[data-pack="glass"] .c-loader__label {
  color: var(--text);
}

[data-pack="glass"] .c-loader__time {
  color: var(--text-muted);
}

[data-pack="glass"] .c-loader.is-error .c-loader__cell {
  background-color: var(--danger);
  box-shadow: none;
}

[data-pack="glass"] .c-loader.is-error .c-loader__label {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   33 · Thinking trace
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-thinking__summary {
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-thinking__summary:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-thinking[open] > .c-thinking__summary {
  border-bottom: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-thinking__label {
  color: var(--text);
}

[data-pack="glass"] .c-thinking__time {
  color: var(--text-muted);
}

[data-pack="glass"] .c-thinking__kind {
  color: var(--accent);
}

[data-pack="glass"] .c-thinking__body {
  color: var(--text-muted);
}

[data-pack="glass"] .c-thinking--flat {
  background: none;
  border-width: 0;
  border-top: var(--border-width) solid var(--panel-border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   34 · Streaming answer
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-stream__cite {
  background-color: var(--accent-soft);
  color: var(--accent);
}

[data-pack="glass"] .c-stream__cite:hover {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

[data-pack="glass"] .c-stream__cursor {
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

[data-pack="glass"] .c-stream__count {
  color: var(--text-muted);
}

[data-pack="glass"] .c-stream__source,
[data-pack="glass"] .c-stream__followup {
  background-color: rgba(255, 255, 255, 0.04);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-stream__source:hover,
[data-pack="glass"] .c-stream__followup:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  box-shadow: var(--panel-shadow);
  color: var(--text);
}

[data-pack="glass"] .c-stream__followup {
  border-radius: var(--radius-full);
}

[data-pack="glass"] .c-stream__mark {
  background-color: var(--accent-soft);
  color: var(--accent);
}

[data-pack="glass"] .c-stream__host {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   35 · Approval card
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-approval__detail {
  color: var(--text-muted);
}

[data-pack="glass"] .c-approval__foot {
  color: var(--text-muted);
}

[data-pack="glass"] .c-approval__option {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-approval__option:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  box-shadow: var(--panel-shadow);
}

[data-pack="glass"] .c-approval__option.is-selected {
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

[data-pack="glass"] .c-approval__note {
  color: var(--text-muted);
}

[data-pack="glass"] .c-approval--danger {
  border-color: var(--danger);
}

[data-pack="glass"] .c-approval--danger .c-approval__foot {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   36 · Tool chip
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tool {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

[data-pack="glass"] .c-tool__name {
  color: var(--text);
}

[data-pack="glass"] .c-tool__count {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tool--read .c-tool__icon {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tool--edit .c-tool__icon {
  color: var(--warning);
}

[data-pack="glass"] .c-tool--run .c-tool__icon {
  color: var(--info);
}

[data-pack="glass"] .c-tool--search .c-tool__icon {
  color: var(--accent);
}

[data-pack="glass"] .c-tool.is-loading {
  border-color: var(--accent);
}

[data-pack="glass"] .c-tool.is-error {
  background-color: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

[data-pack="glass"] .c-tool.is-error .c-tool__name,
[data-pack="glass"] .c-tool.is-error .c-tool__count {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   37 · Task rows
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-task__row {
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-task__row:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-task__row.is-selected {
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

[data-pack="glass"] .c-task__title {
  color: var(--text);
}

[data-pack="glass"] .c-task__meta,
[data-pack="glass"] .c-task__note {
  color: var(--text-muted);
}

[data-pack="glass"] .c-task__state {
  color: var(--text-muted);
}

[data-pack="glass"] .c-task__row--done .c-task__status,
[data-pack="glass"] .c-task__row--done .c-task__state {
  color: var(--success);
}

[data-pack="glass"] .c-task__row--running .c-task__status,
[data-pack="glass"] .c-task__row--running .c-task__state {
  color: var(--accent);
}

[data-pack="glass"] .c-task__row--running .c-task__status::before {
  box-shadow: 0 0 8px var(--accent);
}

[data-pack="glass"] .c-task__row--draft .c-task__status,
[data-pack="glass"] .c-task__row--draft .c-task__state {
  color: var(--warning);
}

[data-pack="glass"] .c-task__row--blocked .c-task__status,
[data-pack="glass"] .c-task__row--blocked .c-task__state {
  color: var(--danger);
}

[data-pack="glass"] .c-task__row--queued .c-task__status,
[data-pack="glass"] .c-task__row--queued .c-task__title {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   38 · Chat panel
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-chat__tabs {
  border-bottom: var(--border-width) solid var(--panel-border);
  background-color: rgba(255, 255, 255, 0.03);
}

[data-pack="glass"] .c-chat__tab {
  background-color: transparent;
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-chat__tab:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-chat__tab.is-active {
  background-color: var(--accent-soft);
  color: var(--text);
}

[data-pack="glass"] .c-chat__log {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-pack="glass"] .c-chat__turn--agent .c-chat__bubble {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

[data-pack="glass"] .c-chat__turn--user .c-chat__bubble {
  background-color: var(--accent-soft);
  border: var(--border-width) solid transparent;
}

[data-pack="glass"] .c-chat__time {
  color: var(--text-muted);
}

[data-pack="glass"] .c-chat--flush .c-chat__bubble {
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
}

[data-pack="glass"] .c-chat--flush .c-chat__turn {
  border-bottom: var(--border-width) solid var(--panel-border);
}

/* --------------------------------------------------------------------------
   39 · Prompt bar
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-prompt:focus-within {
  border-color: var(--accent);
  box-shadow:
    var(--panel-shadow),
    0 0 0 3px var(--accent-soft);
}

[data-pack="glass"] .c-prompt__field {
  background-color: transparent;
  color: var(--text);
}

[data-pack="glass"] .c-prompt__field::placeholder {
  color: var(--text-faint);
}

[data-pack="glass"] .c-prompt__chip {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

[data-pack="glass"] .c-prompt__chip-icon {
  color: var(--accent);
}

[data-pack="glass"] .c-prompt__chip-remove {
  color: var(--text-muted);
}

[data-pack="glass"] .c-prompt__chip-remove:hover {
  color: var(--text);
}

[data-pack="glass"] .c-prompt__tool {
  background-color: transparent;
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-prompt__tool:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-prompt__hint {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   40 · Recommendation card
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-rec__confidence {
  background-color: var(--success-soft);
  color: var(--success);
}

[data-pack="glass"] .c-rec--weak {
  box-shadow: none;
}

[data-pack="glass"] .c-rec--weak .c-rec__confidence {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text-muted);
}

[data-pack="glass"] .c-rec--urgent {
  border-color: var(--warning);
}

[data-pack="glass"] .c-rec--urgent .c-rec__confidence {
  background-color: var(--warning-soft);
  color: var(--warning);
}

[data-pack="glass"] .c-rec__action {
  color: var(--text-muted);
}

[data-pack="glass"] .c-rec__action code {
  font-family: var(--font-mono);
  color: var(--accent);
}

[data-pack="glass"] .c-rec__caveat {
  color: var(--text-muted);
}

[data-pack="glass"] .c-rec__fact dt {
  color: var(--text-muted);
}

[data-pack="glass"] .c-rec__fact dd {
  color: var(--text);
}

[data-pack="glass"] .c-rec__alts-label {
  color: var(--text-muted);
}

[data-pack="glass"] .c-rec__alt {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text);
}

[data-pack="glass"] .c-rec__alt-note {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   41 · Context cards
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-context__count {
  color: var(--text-muted);
}

[data-pack="glass"] .c-context__title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-context__size {
  color: var(--text-muted);
}

[data-pack="glass"] .c-context__body {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
}

[data-pack="glass"] .c-context__kind {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text-muted);
}

[data-pack="glass"] .c-context__name,
[data-pack="glass"] .c-context__where {
  color: var(--text-muted);
}

[data-pack="glass"] .c-context__score {
  color: var(--accent);
}

[data-pack="glass"] .c-context__chunk.is-selected {
  border-color: var(--accent);
  box-shadow:
    var(--panel-shadow),
    0 0 0 1px var(--accent);
}

[data-pack="glass"] .c-context__chunk.is-error {
  border-color: var(--danger);
}

/* --------------------------------------------------------------------------
   42 · Insight card
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-insight__eyebrow,
[data-pack="glass"] .c-insight__pager,
[data-pack="glass"] .c-insight__amount,
[data-pack="glass"] .c-insight__caption {
  color: var(--text-muted);
}

[data-pack="glass"] .c-insight__headline {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

[data-pack="glass"] .c-insight__metric dt {
  color: var(--text-muted);
}

[data-pack="glass"] .c-insight__metric dd {
  color: var(--text);
}

[data-pack="glass"] .c-insight__bars {
  color: var(--accent);
}

[data-pack="glass"] .c-insight__bar.is-active {
  box-shadow: 0 0 10px var(--accent-soft);
}

[data-pack="glass"] .c-insight__question {
  color: var(--text-muted);
}

[data-pack="glass"] .c-insight__ask {
  border-top: var(--border-width) solid var(--panel-border);
  padding-top: var(--space-3);
}

[data-pack="glass"] .c-insight .is-up,
[data-pack="glass"] .c-records__strength.is-up {
  color: var(--success);
}

[data-pack="glass"] .c-insight .is-down,
[data-pack="glass"] .c-records__strength.is-down {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   43 · Selection actions
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-selection__mark {
  background-color: var(--accent-soft);
  border-radius: var(--radius-sm);
}

[data-pack="glass"] .c-selection__action {
  background-color: transparent;
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-selection__action:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-selection__sep {
  background-color: var(--panel-border);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   44 · Fine-tune card
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tune__title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-tune__target,
[data-pack="glass"] .c-tune__label,
[data-pack="glass"] .c-tune__key,
[data-pack="glass"] .c-tune__unit {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tune__slider {
  accent-color: var(--accent);
}

[data-pack="glass"] .c-tune__foot {
  border-top: var(--border-width) solid var(--panel-border);
  padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   45 · Command search
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-command__field {
  border-bottom: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-command__icon {
  color: var(--text-muted);
}

[data-pack="glass"] .c-command__input {
  background-color: transparent;
  color: var(--text);
}

[data-pack="glass"] .c-command__input::placeholder {
  color: var(--text-faint);
}

[data-pack="glass"] .c-command__kbd {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

[data-pack="glass"] .c-command__group {
  color: var(--text-muted);
}

[data-pack="glass"] .c-command__item {
  border-radius: var(--radius-md);
  color: var(--text);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-command__item:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-command__item.is-selected {
  background-color: var(--accent-soft);
}

[data-pack="glass"] .c-command__meta {
  color: var(--text-muted);
}

[data-pack="glass"] .c-command__foot {
  border-top: var(--border-width) solid var(--panel-border);
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   46 · Diff table
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-diff__title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-diff__summary,
[data-pack="glass"] .c-diff__note,
[data-pack="glass"] .c-diff__caption,
[data-pack="glass"] .c-diff__gutter {
  color: var(--text-muted);
}

[data-pack="glass"] .c-diff__row--add {
  background-color: var(--success-soft);
}

[data-pack="glass"] .c-diff__row--add .c-diff__gutter {
  color: var(--success);
}

[data-pack="glass"] .c-diff__row--remove {
  background-color: var(--danger-soft);
}

[data-pack="glass"] .c-diff__row--remove .c-diff__gutter {
  color: var(--danger);
}

[data-pack="glass"] .c-diff__row--change {
  background-color: var(--warning-soft);
}

[data-pack="glass"] .c-diff__row--change .c-diff__gutter {
  color: var(--warning);
}

[data-pack="glass"] .c-diff__old {
  color: var(--text-muted);
}

[data-pack="glass"] .c-diff__new {
  color: var(--text);
}

[data-pack="glass"] .c-diff__row.is-selected {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* --------------------------------------------------------------------------
   47 · Records table
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-records__caption,
[data-pack="glass"] .c-records__where {
  color: var(--text-muted);
}

[data-pack="glass"] .c-records__tag {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

[data-pack="glass"] .c-records__strength {
  color: var(--text-muted);
}

[data-pack="glass"] .c-records__link {
  color: var(--accent);
}

[data-pack="glass"] .c-records__foot th,
[data-pack="glass"] .c-records__foot td {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   48 · Filter table
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-filter__chip {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-filter__chip:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-filter__chip.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--panel-shadow);
}

[data-pack="glass"] .c-filter__count {
  color: inherit;
  opacity: 0.72;
}

[data-pack="glass"] .c-filter__caption {
  color: var(--text-muted);
}

[data-pack="glass"] .c-filter--underline .c-filter__chip {
  background-color: transparent;
  border-width: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-filter--underline .c-filter__chip.is-active {
  background-color: transparent;
  border-bottom-color: var(--accent);
  color: var(--text);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   49 · Agent additions to the sidebar and the code block
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-sidebar__workspace {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-sidebar__search-icon,
[data-pack="glass"] .c-sidebar__count {
  color: var(--text-muted);
}

[data-pack="glass"] .c-sidebar__action {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-sidebar__action:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-code__lang {
  color: var(--text-muted);
}

[data-pack="glass"] .c-code__copy {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  color: var(--text-muted);
}

[data-pack="glass"] .c-code__copy:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-code__cursor {
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

/* --------------------------------------------------------------------------
   50 · Agent roots — frame and inner parts
   The seven agent roots (stream, task, context, diff, records, filter,
   selection) take the panel recipe from section 31. Parts inside them that
   were panels of their own (context chunks, the inner c-table) lose their
   blur and outer shadow, so one panel does not blur inside another.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-stream,
[data-pack="glass"] .c-context,
[data-pack="glass"] .c-diff,
[data-pack="glass"] .c-records,
[data-pack="glass"] .c-filter,
[data-pack="glass"] .c-selection {
  padding: var(--space-4);
}

[data-pack="glass"] .c-task {
  padding: var(--space-2);
}

/* The selection root holds the floating action bar. It keeps the glass
   fill and frame but has no blur, so it is not a stacking context and the
   bar paints over the content that follows. */
[data-pack="glass"] .c-selection {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
}

[data-pack="glass"] .c-selection__text {
  color: var(--text);
}

[data-pack="glass"] .c-selection__icon {
  color: var(--accent);
}

[data-pack="glass"] .c-context .c-context__chunk {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-context__source {
  color: var(--text-muted);
}

[data-pack="glass"] .c-diff .c-table,
[data-pack="glass"] .c-records .c-table,
[data-pack="glass"] .c-filter .c-table {
  background: transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-diff__foot {
  border-top: var(--border-width) solid var(--panel-border);
  padding-top: var(--space-3);
  color: var(--text-muted);
}

[data-pack="glass"] .c-diff__head,
[data-pack="glass"] .c-context__head {
  border-bottom: var(--border-width) solid var(--panel-border);
  padding-bottom: var(--space-3);
}

[data-pack="glass"] .c-stream__title {
  color: var(--text);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-stream__body {
  color: var(--text);
}

[data-pack="glass"] .c-records__name {
  color: var(--text);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-records__link {
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-records__link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Diff rows sit inside .c-table. The table hover skips them, so the add,
   remove and change tints stay. A hover adds an edge in the row colour. */
[data-pack="glass"] .c-table tbody tr.c-diff__row--add:hover {
  box-shadow: inset 3px 0 0 var(--success);
}

[data-pack="glass"] .c-table tbody tr.c-diff__row--remove:hover {
  box-shadow: inset 3px 0 0 var(--danger);
}

[data-pack="glass"] .c-table tbody tr.c-diff__row--change:hover {
  box-shadow: inset 3px 0 0 var(--warning);
}

[data-pack="glass"] .c-table tbody tr.c-diff__row.is-selected {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Type treatment for question and title parts */
[data-pack="glass"] .c-approval__question,
[data-pack="glass"] .c-approval__title,
[data-pack="glass"] .c-rec__question,
[data-pack="glass"] .c-rec__alt-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   51 · Controls with no hover before
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-prompt__send:hover {
  box-shadow:
    0 4px 16px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-pack="glass"] .c-tune__slider:hover {
  filter: drop-shadow(0 0 4px var(--accent-soft));
}

[data-pack="glass"] .c-card {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   52 · Variants
   -------------------------------------------------------------------------- */

/* Pill chips: fully round, on --surface-2 */
[data-pack="glass"] .c-filter--pill .c-filter__chip {
  background-color: var(--surface-2);
  border-radius: var(--radius-full);
}

[data-pack="glass"] .c-filter--pill .c-filter__chip:hover {
  background-color: var(--surface-3);
}

[data-pack="glass"] .c-filter--pill .c-filter__chip.is-active {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

/* Prompt shapes: the glass radius on .c-prompt beats the base variant
   rules, so the pack sets them again here. */
[data-pack="glass"] .c-prompt--pill {
  border-radius: var(--radius-full);
}

[data-pack="glass"] .c-prompt--docked {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Quiet insight: a report tile, not a primary card */
[data-pack="glass"] .c-insight--quiet {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-stream--typing {
  border-color: var(--accent);
}

[data-pack="glass"] .c-thinking--live {
  border-color: var(--accent);
}

[data-pack="glass"] .c-thinking--live .c-thinking__label {
  color: var(--accent);
}

/* Strip: chunks become flat rows split by hairlines. Grid keeps tiles. */
[data-pack="glass"] .c-context--strip .c-context__chunk {
  background: transparent;
  border-width: 0 0 var(--border-width) 0;
  border-radius: 0;
  box-shadow: none;
}

[data-pack="glass"] .c-context--strip .c-context__chunk:last-child {
  border-bottom-width: 0;
}

[data-pack="glass"] .c-context--grid .c-context__chunk {
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-pack="glass"] .c-selection--float .c-selection__bar,
[data-pack="glass"] .c-tune--float,
[data-pack="glass"] .c-command--wide {
  border-radius: var(--radius-lg);
  box-shadow:
    var(--panel-shadow),
    0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-pack="glass"] .c-selection--docked .c-selection__bar {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow:
    0 -8px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-tune--panel {
  border-width: 0 0 0 var(--border-width);
  border-radius: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Inline command: no dialog frame */
[data-pack="glass"] .c-command--inline {
  background: transparent;
  border-color: var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-command__label {
  color: var(--text);
}

[data-pack="glass"] .c-command__hint {
  color: var(--text-muted);
}

/* Agent sidebar: brand row, search field and count pills */
[data-pack="glass"] .c-sidebar--agent .c-sidebar__brand {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-sidebar--agent .c-sidebar__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text-muted);
}

[data-pack="glass"] .c-sidebar--agent .c-sidebar__item.is-active .c-sidebar__count {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   53 · Root states for the agent set and the classic cards
   The gallery puts each manifest state on the root. Each rule below makes
   that state visible. The is-loading veil from _base.css covers the roots
   that are not in its streaming exception list.
   -------------------------------------------------------------------------- */

/* is-error: danger edge, ring and a danger-soft layer over the glass fill */
[data-pack="glass"] .c-chat.is-error,
[data-pack="glass"] .c-stream.is-error,
[data-pack="glass"] .c-command.is-error,
[data-pack="glass"] .c-thinking.is-error,
[data-pack="glass"] .c-insight.is-error,
[data-pack="glass"] .c-prompt.is-error,
[data-pack="glass"] .c-tune.is-error,
[data-pack="glass"] .c-selection.is-error,
[data-pack="glass"] .c-records.is-error,
[data-pack="glass"] .c-context.is-error,
[data-pack="glass"] .c-code.is-error,
[data-pack="glass"] .c-stat.is-error {
  border-color: var(--danger);
  background-image: linear-gradient(var(--danger-soft), var(--danger-soft));
  box-shadow:
    var(--panel-shadow),
    0 0 0 1px var(--danger);
}

[data-pack="glass"] .c-code.is-error .c-code__body {
  box-shadow: inset 3px 0 0 var(--danger);
}

[data-pack="glass"] .c-code.is-error .c-code__lang,
[data-pack="glass"] .c-stat.is-error .c-stat__value {
  color: var(--danger);
}

/* is-selected: accent edge and ring */
[data-pack="glass"] .c-chat.is-selected,
[data-pack="glass"] .c-insight.is-selected,
[data-pack="glass"] .c-rec.is-selected,
[data-pack="glass"] .c-card.is-selected,
[data-pack="glass"] .c-context.is-selected,
[data-pack="glass"] .c-diff.is-selected,
[data-pack="glass"] .c-records.is-selected,
[data-pack="glass"] .c-task.is-selected {
  border-color: var(--accent);
  box-shadow:
    var(--panel-shadow),
    0 0 0 1px var(--accent),
    0 0 18px var(--accent-soft);
}

/* is-active */
[data-pack="glass"] .c-card.is-active {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow:
    var(--panel-shadow),
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-pack="glass"] .c-tool.is-active {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

[data-pack="glass"] .c-code.is-active {
  border-color: var(--success);
}

[data-pack="glass"] .c-code.is-active .c-code__copy {
  background-color: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

[data-pack="glass"] .c-filter.is-active,
[data-pack="glass"] .c-sidebar.is-active {
  border-color: var(--accent);
}

/* is-open */
[data-pack="glass"] .c-command.is-open,
[data-pack="glass"] .c-sidebar.is-open {
  border-color: var(--border-strong);
  box-shadow:
    var(--panel-shadow),
    0 24px 64px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-pack="glass"] .c-selection.is-open .c-selection__bar {
  border-color: var(--accent);
}

[data-pack="glass"] .c-thinking.is-open > .c-thinking__summary {
  border-bottom: var(--border-width) solid var(--panel-border);
}

/* is-loading for the streaming roots, which skip the base veil */
[data-pack="glass"] .c-stream.is-loading,
[data-pack="glass"] .c-thinking.is-loading,
[data-pack="glass"] .c-command.is-loading,
[data-pack="glass"] .c-prompt.is-loading,
[data-pack="glass"] .c-task.is-loading {
  border-color: var(--accent);
  box-shadow:
    var(--panel-shadow),
    0 0 0 3px var(--accent-soft);
}

[data-pack="glass"] .c-command.is-loading .c-command__list,
[data-pack="glass"] .c-task.is-loading .c-task__row {
  opacity: 0.55;
}

[data-pack="glass"] .c-thinking.is-loading .c-thinking__label {
  color: var(--accent);
}

/* is-disabled: dimmed, with a dashed frame so the state does not rely on
   contrast alone */
[data-pack="glass"] .c-approval.is-disabled,
[data-pack="glass"] .c-context.is-disabled,
[data-pack="glass"] .c-diff.is-disabled,
[data-pack="glass"] .c-filter.is-disabled,
[data-pack="glass"] .c-tune.is-disabled,
[data-pack="glass"] .c-prompt.is-disabled,
[data-pack="glass"] .c-rec.is-disabled,
[data-pack="glass"] .c-sidebar.is-disabled {
  border-style: dashed;
  box-shadow: none;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   54 · Overlay escape
   A blurred panel is a stacking context. When it holds an open dropdown or
   a shown tooltip, the panel rises to the overlay level, so the overlay
   paints over the next panel. Scale (same as _base.css): dropdown 40,
   tooltip 50, drawer 60, modal 70, toast 80, command 90.
   The navbar, sidebar and footer get only the z-index, because a scene
   can make them sticky.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-card:has(.c-dropdown.is-open),
[data-pack="glass"] .c-stat:has(.c-dropdown.is-open),
[data-pack="glass"] .c-list:has(.c-dropdown.is-open),
[data-pack="glass"] .c-code:has(.c-dropdown.is-open),
[data-pack="glass"] .c-table:has(.c-dropdown.is-open),
[data-pack="glass"] .c-empty:has(.c-dropdown.is-open),
[data-pack="glass"] .c-thinking:has(.c-dropdown.is-open),
[data-pack="glass"] .c-approval:has(.c-dropdown.is-open),
[data-pack="glass"] .c-rec:has(.c-dropdown.is-open),
[data-pack="glass"] .c-insight:has(.c-dropdown.is-open),
[data-pack="glass"] .c-tune:has(.c-dropdown.is-open),
[data-pack="glass"] .c-chat:has(.c-dropdown.is-open),
[data-pack="glass"] .c-prompt:has(.c-dropdown.is-open),
[data-pack="glass"] .c-command:has(.c-dropdown.is-open),
[data-pack="glass"] .c-stream:has(.c-dropdown.is-open),
[data-pack="glass"] .c-task:has(.c-dropdown.is-open),
[data-pack="glass"] .c-context:has(.c-dropdown.is-open),
[data-pack="glass"] .c-diff:has(.c-dropdown.is-open),
[data-pack="glass"] .c-records:has(.c-dropdown.is-open),
[data-pack="glass"] .c-filter:has(.c-dropdown.is-open) {
  position: relative;
  z-index: 40;
}

[data-pack="glass"] .c-card:has(.c-tooltip:hover),
[data-pack="glass"] .c-card:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-card:has(.c-tooltip.is-open),
[data-pack="glass"] .c-stat:has(.c-tooltip:hover),
[data-pack="glass"] .c-stat:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-stat:has(.c-tooltip.is-open),
[data-pack="glass"] .c-list:has(.c-tooltip:hover),
[data-pack="glass"] .c-list:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-list:has(.c-tooltip.is-open),
[data-pack="glass"] .c-code:has(.c-tooltip:hover),
[data-pack="glass"] .c-code:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-code:has(.c-tooltip.is-open),
[data-pack="glass"] .c-table:has(.c-tooltip:hover),
[data-pack="glass"] .c-table:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-table:has(.c-tooltip.is-open),
[data-pack="glass"] .c-empty:has(.c-tooltip:hover),
[data-pack="glass"] .c-empty:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-empty:has(.c-tooltip.is-open),
[data-pack="glass"] .c-thinking:has(.c-tooltip:hover),
[data-pack="glass"] .c-thinking:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-thinking:has(.c-tooltip.is-open),
[data-pack="glass"] .c-approval:has(.c-tooltip:hover),
[data-pack="glass"] .c-approval:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-approval:has(.c-tooltip.is-open),
[data-pack="glass"] .c-rec:has(.c-tooltip:hover),
[data-pack="glass"] .c-rec:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-rec:has(.c-tooltip.is-open),
[data-pack="glass"] .c-insight:has(.c-tooltip:hover),
[data-pack="glass"] .c-insight:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-insight:has(.c-tooltip.is-open),
[data-pack="glass"] .c-tune:has(.c-tooltip:hover),
[data-pack="glass"] .c-tune:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-tune:has(.c-tooltip.is-open),
[data-pack="glass"] .c-chat:has(.c-tooltip:hover),
[data-pack="glass"] .c-chat:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-chat:has(.c-tooltip.is-open),
[data-pack="glass"] .c-prompt:has(.c-tooltip:hover),
[data-pack="glass"] .c-prompt:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-prompt:has(.c-tooltip.is-open),
[data-pack="glass"] .c-command:has(.c-tooltip:hover),
[data-pack="glass"] .c-command:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-command:has(.c-tooltip.is-open),
[data-pack="glass"] .c-stream:has(.c-tooltip:hover),
[data-pack="glass"] .c-stream:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-stream:has(.c-tooltip.is-open),
[data-pack="glass"] .c-task:has(.c-tooltip:hover),
[data-pack="glass"] .c-task:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-task:has(.c-tooltip.is-open),
[data-pack="glass"] .c-context:has(.c-tooltip:hover),
[data-pack="glass"] .c-context:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-context:has(.c-tooltip.is-open),
[data-pack="glass"] .c-diff:has(.c-tooltip:hover),
[data-pack="glass"] .c-diff:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-diff:has(.c-tooltip.is-open),
[data-pack="glass"] .c-records:has(.c-tooltip:hover),
[data-pack="glass"] .c-records:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-records:has(.c-tooltip.is-open),
[data-pack="glass"] .c-filter:has(.c-tooltip:hover),
[data-pack="glass"] .c-filter:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-filter:has(.c-tooltip.is-open) {
  position: relative;
  z-index: 50;
}

[data-pack="glass"] .c-navbar:has(.c-dropdown.is-open),
[data-pack="glass"] .c-sidebar:has(.c-dropdown.is-open),
[data-pack="glass"] .c-footer:has(.c-dropdown.is-open) {
  z-index: 40;
}

[data-pack="glass"] .c-navbar:has(.c-tooltip:hover),
[data-pack="glass"] .c-navbar:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-navbar:has(.c-tooltip.is-open),
[data-pack="glass"] .c-sidebar:has(.c-tooltip:hover),
[data-pack="glass"] .c-sidebar:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-sidebar:has(.c-tooltip.is-open),
[data-pack="glass"] .c-footer:has(.c-tooltip:hover),
[data-pack="glass"] .c-footer:has(.c-tooltip:focus-within),
[data-pack="glass"] .c-footer:has(.c-tooltip.is-open) {
  z-index: 50;
}

/* --------------------------------------------------------------------------
   55 · No backdrop-filter support
   If the browser has no backdrop-filter (or the user turned it off), a
   translucent --panel-bg shows the raw page through each panel. Here each
   panel puts the --panel-bg tint on an opaque --surface base, and the
   scrims get darker.
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-card,
  [data-pack="glass"] .c-stat,
  [data-pack="glass"] .c-list,
  [data-pack="glass"] .c-code,
  [data-pack="glass"] .c-table,
  [data-pack="glass"] .c-navbar,
  [data-pack="glass"] .c-sidebar,
  [data-pack="glass"] .c-dropdown__menu,
  [data-pack="glass"] .c-modal__panel,
  [data-pack="glass"] .c-drawer__panel,
  [data-pack="glass"] .c-toast,
  [data-pack="glass"] .c-empty,
  [data-pack="glass"] .c-footer,
  [data-pack="glass"] .c-tabs__list,
  [data-pack="glass"] .c-thinking,
  [data-pack="glass"] .c-approval,
  [data-pack="glass"] .c-rec,
  [data-pack="glass"] .c-insight,
  [data-pack="glass"] .c-tune,
  [data-pack="glass"] .c-chat,
  [data-pack="glass"] .c-prompt,
  [data-pack="glass"] .c-command,
  [data-pack="glass"] .c-selection,
  [data-pack="glass"] .c-selection__bar,
  [data-pack="glass"] .c-stream,
  [data-pack="glass"] .c-task,
  [data-pack="glass"] .c-context,
  [data-pack="glass"] .c-diff,
  [data-pack="glass"] .c-records,
  [data-pack="glass"] .c-filter {
    background:
      linear-gradient(var(--panel-bg), var(--panel-bg)),
      var(--surface);
  }

  [data-pack="glass"] .c-alert[class] {
    background-color: var(--surface);
  }

  [data-pack="glass"] .c-modal__backdrop,
  [data-pack="glass"] .c-drawer {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

/* --------------------------------------------------------------------------
   56 · Stepper
   Markers are small --panel-bg discs with a light hairline and their own
   blur, so they read on any ground. A done step fills with --accent. The
   current step takes an --accent-soft glow ring. The connector fades out
   toward the next step; a done connector fades from --accent.
   Five markers per stepper keep the blur layer count low.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-stepper {
  color: var(--text);
}

[data-pack="glass"] .c-stepper__marker {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-stepper__label {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-stepper__hint {
  color: var(--text-muted);
}

[data-pack="glass"] .c-stepper__line {
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--panel-border);
}

[data-pack="glass"] .c-stepper--vertical .c-stepper__line {
  width: 2px;
  height: auto;
  background-color: var(--panel-border);
}

[data-pack="glass"] .c-stepper__step--done .c-stepper__marker {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow:
    0 2px 10px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-pack="glass"] .c-stepper__step--done .c-stepper__label {
  color: var(--text);
}

[data-pack="glass"] .c-stepper__step--done .c-stepper__line {
  background: linear-gradient(to right, var(--accent), var(--panel-border));
}

[data-pack="glass"] .c-stepper--vertical .c-stepper__step--done .c-stepper__line {
  background: linear-gradient(to bottom, var(--accent), var(--panel-border));
}

[data-pack="glass"] .c-stepper__step--done > a:hover .c-stepper__marker {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

[data-pack="glass"] .c-stepper__step--done > a:hover .c-stepper__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-pack="glass"] .c-stepper__step--current .c-stepper__marker {
  border-color: var(--accent);
  color: var(--text);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 0 18px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

[data-pack="glass"] .c-stepper__step[aria-current="step"] .c-stepper__label {
  color: var(--text);
}

[data-pack="glass"] .c-stepper__step--error .c-stepper__marker {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--text);
  font-weight: var(--weight-bold);
  box-shadow:
    0 0 0 4px var(--danger-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-pack="glass"] .c-stepper__step--error .c-stepper__hint {
  color: var(--danger);
}

[data-pack="glass"] .c-stepper__step--disabled .c-stepper__marker {
  border-style: dashed;
  box-shadow: none;
}

[data-pack="glass"] .c-stepper.is-error .c-stepper__step[aria-current="step"] .c-stepper__marker {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}

[data-pack="glass"] .c-stepper__step > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* No backdrop-filter: put the tint on an opaque --surface base. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-stepper__step:not(.c-stepper__step--done):not(.c-stepper__step--error) .c-stepper__marker {
    background:
      linear-gradient(var(--panel-bg), var(--panel-bg)),
      var(--surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-pack="glass"] .c-stepper__marker {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   57 · Activity timeline
   The spine is a faint gradient that fades toward the next event. Each
   marker is a blurred glass disc with the icon in the semantic colour and a
   soft glow in its wash. A comment body is a --panel-bg panel. The root is
   unframed, so it does not blur inside another panel.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-timeline {
  color: var(--text);
}

[data-pack="glass"] .c-timeline__item::before {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--panel-border),
    color-mix(in srgb, var(--panel-border) 25%, transparent)
  );
  border-radius: var(--radius-full);
  opacity: 1;
}

/* On a light theme the panel border is close to the page, so the spine
   starts at --border-strong and fades to half of it. */
[data-pack="glass"]:where([data-mode="light"]) .c-timeline__item::before {
  background-image: linear-gradient(
    to bottom,
    var(--border-strong),
    color-mix(in srgb, var(--border-strong) 50%, transparent)
  );
}

[data-pack="glass"] .c-timeline__marker {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text-muted);
}

[data-pack="glass"] .c-timeline__item--success .c-timeline__marker {
  color: var(--success);
  box-shadow:
    0 0 12px var(--success-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-timeline__item--warning .c-timeline__marker {
  color: var(--warning);
  box-shadow:
    0 0 12px var(--warning-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-timeline__item--danger .c-timeline__marker {
  color: var(--danger);
  box-shadow:
    0 0 12px var(--danger-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-timeline__item--info .c-timeline__marker {
  color: var(--info);
  box-shadow:
    0 0 12px var(--info-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-timeline__item--comment .c-timeline__marker {
  color: var(--accent);
}

[data-pack="glass"] .c-timeline__actor {
  font-weight: var(--weight-medium);
  color: var(--text);
}

[data-pack="glass"] .c-timeline__action,
[data-pack="glass"] .c-timeline__time,
[data-pack="glass"] .c-timeline__detail {
  color: var(--text-muted);
}

[data-pack="glass"] .c-timeline__item--comment .c-timeline__body {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
}

[data-pack="glass"] .c-timeline__item--comment .c-timeline__detail {
  color: var(--text);
}

[data-pack="glass"] .c-timeline__day {
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-pack="glass"] .c-timeline__item {
  border-radius: var(--radius-md);
}

[data-pack="glass"] .c-timeline__item:focus-visible,
[data-pack="glass"] .c-timeline a:focus-visible,
[data-pack="glass"] .c-timeline__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Without backdrop-filter, the --panel-bg tint goes on an opaque --surface
   base, the same as section 55 does for the other panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-timeline__marker,
  [data-pack="glass"] .c-timeline__item--comment .c-timeline__body {
    background:
      linear-gradient(var(--panel-bg), var(--panel-bg)),
      var(--surface);
  }
}

/* --------------------------------------------------------------------------
   58 · File upload
   The zone is a glass panel: --panel-bg with blur and a dashed hairline.
   Drag over adds an accent glow. File rows are small parts, so they take a
   token fill with no blur.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-upload__label {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-upload__hint,
[data-pack="glass"] .c-upload__meta {
  color: var(--text-muted);
}

[data-pack="glass"] .c-upload__zone {
  background: var(--panel-bg);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text-muted);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-upload__zone:hover {
  border-color: var(--text-muted);
}

[data-pack="glass"] .c-upload__zone:hover .c-upload__button {
  background-color: var(--surface-3);
  border-color: var(--border-strong);
}

/* Rows float apart, so each hairline reads on its own. */
[data-pack="glass"] .c-upload__list {
  gap: var(--space-2);
}

[data-pack="glass"] .c-upload__file {
  background-color: var(--surface);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0)
  );
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-pack="glass"] .c-upload__name {
  color: var(--text);
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-upload__file--done .c-upload__meta {
  color: var(--success);
}

[data-pack="glass"] .c-upload__file--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

[data-pack="glass"] .c-upload__error {
  color: var(--danger);
}

[data-pack="glass"] .c-upload__bar {
  background-color: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-pack="glass"] .c-upload__bar > span {
  background-image: linear-gradient(to right, var(--accent), var(--accent-hover));
  box-shadow:
    0 0 10px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: width var(--dur-slow) var(--ease-out);
}

[data-pack="glass"] .c-upload--compact .c-upload__zone {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-pack="glass"] .c-upload--avatar .c-upload__zone {
  border-radius: var(--radius-full);
}

/* States */
[data-pack="glass"] .c-upload.is-active .c-upload__zone,
[data-pack="glass"] .c-upload__zone.is-active {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 0 32px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
}

[data-pack="glass"] .c-upload.is-error .c-upload__zone {
  border-color: var(--danger);
  box-shadow:
    var(--panel-shadow),
    0 0 0 3px var(--danger-soft);
  outline: none;
}

[data-pack="glass"] .c-upload.is-error .c-upload__label {
  color: var(--danger);
}

[data-pack="glass"] .c-upload__zone:has(.c-upload__input:focus-visible) {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The error summary above the upload takes focus on submit. */
[data-pack="glass"] .c-alert[tabindex="-1"]:focus-visible,
[data-pack="glass"] .c-upload__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [data-pack="glass"] .c-upload__zone,
  [data-pack="glass"] .c-upload__bar > span {
    transition: none;
  }
}

/* No blur support: the --panel-bg tint sits on an opaque --surface base,
   as in section 55. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-upload__zone {
    background:
      linear-gradient(var(--panel-bg), var(--panel-bg)),
      var(--surface);
  }
}

/* --------------------------------------------------------------------------
   59 · Pricing plans
   Plans use the shared panel recipe. Plans that are not featured sit back:
   their fill is thinner, but their text keeps full strength. The featured
   plan is the brightest panel, with a stronger blur and an --accent
   hairline along its edge.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-pricing {
  color: var(--text);
}

[data-pack="glass"] .c-pricing__plan {
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text);
}

/* The plan the account has now. The "Current plan" button says it in text;
   the frame gives a second cue. */
[data-pack="glass"] .c-pricing__plan--current {
  border-style: dashed;
  border-color: var(--border-strong);
}

[data-pack="glass"] .c-pricing__plan--featured {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    var(--panel-bg);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--panel-border));
  box-shadow:
    var(--panel-shadow),
    0 0 0 1px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(calc(var(--panel-blur) * 1.6)) saturate(160%);
  backdrop-filter: blur(calc(var(--panel-blur) * 1.6)) saturate(160%);
}

[data-pack="glass"] .c-pricing__flag {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  background-color: var(--accent-soft);
  color: var(--text);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-pricing__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

[data-pack="glass"] .c-pricing__tagline,
[data-pack="glass"] .c-pricing__period,
[data-pack="glass"] .c-pricing__note {
  color: var(--text-muted);
}

[data-pack="glass"] .c-pricing__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

[data-pack="glass"] .c-pricing__features {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-pricing__feature {
  color: var(--text);
}

[data-pack="glass"] .c-pricing__feature > [role="img"] {
  color: var(--accent);
}

[data-pack="glass"] .c-pricing__feature--off {
  color: var(--text-muted);
}

[data-pack="glass"] .c-pricing__feature--off > [role="img"] {
  color: var(--text-faint);
}

[data-pack="glass"] .c-pricing__action[aria-disabled="true"],
[data-pack="glass"] .c-pricing__action[aria-disabled="true"]:hover,
[data-pack="glass"] .c-pricing__action[aria-disabled="true"]:active {
  background-color: transparent;
  background-image: none;
  border-color: var(--panel-border);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  color: var(--text-muted);
}

[data-pack="glass"] .c-pricing__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-pack="glass"] .c-pricing__plan.is-selected {
  outline: 0;
  border-color: var(--accent);
  box-shadow:
    var(--panel-shadow),
    0 0 0 2px var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Without backdrop-filter the thin fill shows the page through the text,
   so the plans fall back to the opaque surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-pricing__plan {
    background: var(--surface);
  }
}

/* The pack rules rows on <td> only. The row headers here are <th>, so
   they take the same hairline. */
[data-pack="glass"] .c-pricing__table tbody th {
  border-bottom: var(--border-width) solid var(--panel-border);
}

[data-pack="glass"] .c-pricing__table tbody tr:last-child th {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   60 · Tag input. The field is the c-input well. Tags are translucent pills
   with a hairline of panel border and no blur (small parts take no blur).
   The popup is a blurred panel on an opaque --surface base, like
   c-dropdown__menu, so it reads over the content under it.
   -------------------------------------------------------------------------- */

[data-pack="glass"] .c-tags__label {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

[data-pack="glass"] .c-tags__field,
[data-pack="glass"] .c-tags--stacked .c-tags__input {
  background-color: var(--bg-sunken);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-tags--stacked .c-tags__field {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

[data-pack="glass"] .c-tags__field:hover,
[data-pack="glass"] .c-tags--stacked .c-tags__input:hover {
  border-color: var(--text-muted);
}

[data-pack="glass"] .c-tags__input::placeholder {
  color: var(--text-faint);
}

[data-pack="glass"] .c-tags__tag {
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-full);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-pack="glass"] .c-tags__tag-label {
  font-weight: var(--weight-medium);
}

[data-pack="glass"] .c-tags--stacked .c-tags__list {
  gap: var(--space-2);
}

[data-pack="glass"] .c-tags__remove {
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

[data-pack="glass"] .c-tags__remove:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
  color: var(--text);
}

[data-pack="glass"] .c-tags__popup {
  background:
    linear-gradient(var(--panel-bg), var(--panel-bg)),
    var(--surface);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow:
    var(--panel-shadow),
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  backdrop-filter: blur(var(--panel-blur)) saturate(140%);
  color: var(--text);
}

[data-pack="glass"] .c-tags.is-open .c-tags__popup {
  animation: dl-glass-rise var(--dur-base) var(--ease-out) both;
}

[data-pack="glass"] .c-tags__option {
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background-color var(--dur-base) var(--ease-out);
}

[data-pack="glass"] .c-tags__option small {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tags__option:hover {
  background-color: color-mix(in srgb, var(--surface-3) 85%, transparent);
}

[data-pack="glass"] .c-tags__option.is-selected {
  background-color: var(--accent-soft);
  outline: 0;
  box-shadow: inset 0 0 0 var(--border-width) var(--accent);
}

[data-pack="glass"] .c-tags__empty,
[data-pack="glass"] .c-tags__hint {
  color: var(--text-muted);
}

[data-pack="glass"] .c-tags__popup .c-tags__hint {
  border-top: var(--border-width) solid var(--panel-border);
  background-color: rgba(0, 0, 0, 0.08);
}

[data-pack="glass"] .c-tags__error {
  color: var(--danger);
}

[data-pack="glass"] .c-tags.is-error .c-tags__field,
[data-pack="glass"] .c-tags--stacked.is-error .c-tags__input {
  border-color: var(--danger);
  outline: 0;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.22),
    0 0 0 3px var(--danger-soft);
}

[data-pack="glass"] .c-tags--stacked.is-error .c-tags__field {
  box-shadow: none;
}

/* Focus comes last, so it wins over the error ring. Inline: the ring goes
   on the field, because the input has no edge of its own. */
[data-pack="glass"] .c-tags__field:has(.c-tags__input:focus-visible),
[data-pack="glass"] .c-tags--stacked .c-tags__field .c-tags__input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.2),
    0 0 0 4px var(--accent-soft);
}

[data-pack="glass"] .c-tags:not(.c-tags--stacked) .c-tags__input:focus-visible,
[data-pack="glass"] .c-tags--stacked .c-tags__field:has(.c-tags__input:focus-visible) {
  outline: 0;
  border-color: transparent;
  box-shadow: none;
}

[data-pack="glass"] .c-tags__remove:focus-visible,
[data-pack="glass"] .c-tags__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-pack="glass"] .c-tags.is-open .c-tags__popup {
    animation: none;
  }

  [data-pack="glass"] .c-tags__field,
  [data-pack="glass"] .c-tags__input,
  [data-pack="glass"] .c-tags__remove,
  [data-pack="glass"] .c-tags__option {
    transition: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pack="glass"] .c-tags__popup {
    background: var(--surface);
  }
}

/* --------------------------------------------------------------------------
   Registry round additions (CONTRACT §3.3.1)
   -------------------------------------------------------------------------- */

/* c-visually-hidden has no look. This rule keeps pack edges and shadows
   off its 1px box. */
[data-pack="glass"] .c-visually-hidden {
  background: none;
  box-shadow: none;
}

/* Confirmed field: the hint and the control edge take --success. The check
   glyph from _base.css gives the same state in shape. */
[data-pack="glass"] .c-field--valid .c-field__hint {
  color: var(--success);
}

[data-pack="glass"] .c-field--valid .c-input,
[data-pack="glass"] .c-field--valid .c-select,
[data-pack="glass"] .c-field--valid .c-textarea {
  border-color: var(--success);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.22),
    0 0 0 3px var(--success-soft);
}

[data-pack="glass"] .c-radio__panel {
  border-inline-start: 2px solid var(--panel-border);
  background: var(--panel-bg);
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

[data-pack="glass"] .c-card__media > svg,
[data-pack="glass"] .c-card__media > img {
  background-color: var(--accent-soft);
  color: var(--accent);
}

[data-pack="glass"] .c-card__media > figcaption {
  color: var(--text-muted);
}

/* Textures, weak form: the glass blur already softens the ground. */
[data-pack="glass"] .c-card--grain:not(.is-loading)::after {
  background-image:
    radial-gradient(circle, currentColor 0.6px, transparent 1px),
    radial-gradient(circle, currentColor 0.5px, transparent 1px);
  background-size: 5px 7px, 11px 13px;
  background-position: 0 0, 3px 5px;
  opacity: 0.05;
}

[data-pack="glass"] .c-card--paper:not(.is-loading)::after {
  background-image: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px);
  opacity: 0.035;
}

[data-pack="glass"] .c-card--paper:not(.is-loading)::before {
  background: linear-gradient(225deg, var(--bg-base) 50%, var(--surface-3) 50%);
}

[data-pack="glass"] .c-tabs--vertical .c-tabs__list {
  border-radius: var(--radius-lg);
}

[data-pack="glass"] .c-tabs--vertical .c-tabs__tab {
  border-radius: var(--radius-md);
}