/* ============================================================================
   MINI TASK — WIZARDING (the global product design)
   ----------------------------------------------------------------------------
   Spec: ag-access-design-spec/WIZARDING.md. Loaded after access-kit.css.
   Everything here is scoped to html[data-ag-experience="wizarding"]; without
   that attribute this file is inert. Components keep their AG Access markup:
   the theme re-declares the --ag-token-* set per ZONE (stone shell vs lit
   parchment surfaces) and adds a few skins keyed on semantic attributes.

   Contents
     1. --wz-* tokens
     2. Shell zone (stone)          — default inherited from body
     3. Paper zone (parchment)      — re-declares the same set on read/edit surfaces
     4. Typography                  — Cinzel eyebrows, Cormorant titles
     5. Skins                       — gilded corners, candle glow, primaries
     6. Houses → states             — [data-tone], [data-wz-house]
     7. MudBlazor bridge            — dialogs, snackbar
     8. Wand cursor                 — [data-wz-wand="true"]
     9. Spell & shade motion        — [data-wz-spell="true"]
    10. Legacy variable bridge      — --mt-/--ag- shell values at the root
    11. Paper zone: Mud + legacy    — MudBlazor and unmigrated module containers
    12. MudBlazor skin              — tabs, tables, buttons, inputs, chips, alerts
    13. Legacy module skin          — Maintenance, HelpDesk panel, Ticket reports, forms
    14. Safety net                  — the only !important (documented)
   ========================================================================== */

/* ============================================================
   1. TOKENS
   ============================================================ */
/* Palette values are generated from ag-access-design-spec/tokens/wizarding-tokens.json. */

/* ============================================================
   2. SHELL ZONE — stone
   ============================================================ */
/* Body establishes the default stone zone. A kit marker is a styling boundary,
   not a surface: MudDialog portals do not forward data-ag-kit to their root,
   so even apparently top-level kit headers must inherit the paper container. */
html[data-ag-experience="wizarding"] body {
    --ag-token-color-bg-base: var(--wz-stone);
    --ag-token-color-bg-elevated: var(--wz-stone-raised);
    --ag-token-color-ink-primary: var(--wz-stone-ink);
    --ag-token-color-ink-secondary: var(--wz-stone-ink-2);
    --ag-token-color-ink-tertiary: var(--wz-stone-ink-3);
    --ag-token-color-ink-quaternary: var(--wz-stone-ink-4);
    --ag-token-color-ink-inverse: var(--wz-on-gold);
    --ag-token-color-accent-solid: var(--wz-gold);
    --ag-token-color-accent-pressed: var(--wz-gold-pressed);
    --ag-token-color-accent-disabled: rgba(226, 196, 128, .10);
    --ag-token-color-glass-subtle-tint: var(--wz-stone-glass);
    --ag-token-color-glass-regular-tint: var(--wz-stone-glass-2);
    --ag-token-color-glass-prominent-tint: var(--wz-stone-glass-3);
    --ag-token-color-surface-fallback-subtle: #14111E;
    --ag-token-color-surface-fallback-regular: #171423;
    --ag-token-color-surface-fallback-prominent: #1B1828;
    --ag-token-color-border-hairline: var(--wz-stone-hair);
    --ag-token-color-border-strong: var(--wz-stone-hair-strong);
    --ag-token-color-border-platinumStart: rgba(226, 196, 128, .24);
    --ag-token-color-border-platinumEnd: rgba(226, 196, 128, .04);
    --ag-token-color-state-error: var(--wz-scarlet-dark);
    --ag-token-color-scrim-modal: rgba(6, 5, 10, .68);
    --ag-token-color-control-trackOff: rgba(241, 232, 212, .16);
    --ag-token-color-control-thumbOff: var(--wz-stone-ink);
    --ag-token-color-control-meterTrack: rgba(241, 232, 212, .12);
    --ag-token-color-control-grabber: rgba(241, 232, 212, .20);

    /* semantic tones for this zone */
    --wz-tone-success: var(--wz-emerald-dark);
    --wz-tone-warning: var(--wz-amber-dark);
    --wz-tone-danger: var(--wz-scarlet-dark);
    --wz-tone-info: var(--wz-sapphire-dark);
    --wz-tone-success-soft: rgba(95, 176, 138, .14);
    --wz-tone-warning-soft: rgba(221, 162, 74, .14);
    --wz-tone-danger-soft: rgba(229, 110, 116, .14);
    --wz-tone-info-soft: rgba(143, 176, 238, .14);
    --wz-eyebrow-color: var(--wz-gold);

    color-scheme: dark;
}

html[data-ag-experience="wizarding"] body { background: var(--wz-stone); }
html[data-ag-experience="wizarding"] .agc-topbar { background: color-mix(in srgb, var(--wz-stone-top) 88%, transparent); }
html[data-ag-experience="wizarding"] .agc-sidebar { background: var(--wz-stone-raised); }
html[data-ag-experience="wizarding"] .agc-shell-brand__mark { box-shadow: 0 0 0 4px var(--wz-gold-glow); }
html[data-ag-experience="wizarding"] .agc-nav a.active {
    background: var(--wz-stone-glass-2);
    color: var(--wz-stone-ink);
    box-shadow: inset 0 0 0 1px var(--wz-stone-hair-strong), inset 0 0 0 2px var(--wz-gold-glow);
}
html[data-ag-experience="wizarding"] .agc-nav a.active .agc-icon { color: var(--wz-gold); }
html[data-ag-experience="wizarding"] .agc-module-nav__item.is-active,
html[data-ag-experience="wizarding"] .agc-segmented button.is-active { box-shadow: 0 4px 14px var(--wz-gold-glow); }

/* ============================================================
   3. PAPER ZONE — lit parchment
   Read/edit surfaces re-declare the same token set. Anything inside them
   (badges, fields, buttons, tables) inherits parchment values automatically.
   ============================================================ */
html[data-ag-experience="wizarding"] .agc-content > :where(div, section, main, article):not([data-ag-kit]),
html[data-ag-experience="wizarding"] :is(
    .agc-card, .agc-table-card, .agc-compliance-header, .agc-metric, .agc-risk-card,
    .agc-notice, .agc-toast, .agc-disclosure, .agc-form-section, .agc-inline-panel,
    .agc-data-board, .agc-dashboard-card, .agc-dashboard-header, .agc-dashboard-header__count,
    .agc-dashboard-panel, .agc-summary-strip, .agc-empty, .agc-record-summary, .agc-case-record,
    .agc-office-record, .agc-attachment, .agc-media-card, .agc-notifications__panel, .agc-action-menu > div,
    .agc-dialog, .agc-drawer, .agc-dev-apps, .agc-agmotors__panel, .agc-detail-summary, .agc-value-summary,
    .agc-project-row, .agc-task-row, .agc-timeline-item, .agc-goal, .agc-thread__item, .agc-ticket-note,
    .agc-ticket-desc-panel, .agc-ticket-upload-panel, .agc-corrective__note, .agc-corrective__month,
    .agc-week-day, .agc-visit-day, .agc-selection-row, .agc-file-row, .agc-upload-zone, .agc-hr-workspace__card,
    .agc-doi-case, .agc-alert, .agc-auth__panel,
    .mud-popover
) {
    --ag-token-color-bg-base: var(--wz-parchment);
    --ag-token-color-bg-elevated: var(--wz-parchment-lit);
    --ag-token-color-ink-primary: var(--wz-paper-ink);
    --ag-token-color-ink-secondary: var(--wz-paper-ink-2);
    --ag-token-color-ink-tertiary: var(--wz-paper-ink-3);
    --ag-token-color-ink-quaternary: var(--wz-paper-ink-4);
    --ag-token-color-ink-inverse: var(--wz-on-paper-action);
    --ag-token-color-accent-solid: var(--wz-paper-action);
    --ag-token-color-accent-pressed: var(--wz-paper-action-pressed);
    --ag-token-color-accent-disabled: rgba(60, 42, 12, .10);
    --ag-token-color-glass-subtle-tint: var(--wz-paper-glass);
    --ag-token-color-glass-regular-tint: var(--wz-paper-glass-2);
    --ag-token-color-glass-prominent-tint: var(--wz-paper-glass-3);
    --ag-token-color-surface-fallback-subtle: #F1E8D3;
    --ag-token-color-surface-fallback-regular: #EEE4CD;
    --ag-token-color-surface-fallback-prominent: #E9DEC4;
    --ag-token-color-border-hairline: var(--wz-paper-hair);
    --ag-token-color-border-strong: var(--wz-paper-hair-strong);
    --ag-token-color-border-platinumStart: rgba(60, 42, 12, .16);
    --ag-token-color-border-platinumEnd: rgba(60, 42, 12, .03);
    --ag-token-color-state-error: var(--wz-scarlet);
    --ag-token-color-control-trackOff: rgba(42, 32, 18, .16);
    --ag-token-color-control-thumbOff: #FFFFFF;
    --ag-token-color-control-meterTrack: rgba(42, 32, 18, .12);
    --ag-token-color-control-grabber: rgba(42, 32, 18, .20);

    --wz-tone-success: var(--wz-emerald);
    --wz-tone-warning: var(--wz-amber);
    --wz-tone-danger: var(--wz-scarlet);
    --wz-tone-info: var(--wz-sapphire);
    --wz-tone-success-soft: var(--wz-emerald-soft);
    --wz-tone-warning-soft: var(--wz-amber-soft);
    --wz-tone-danger-soft: var(--wz-scarlet-soft);
    --wz-tone-info-soft: var(--wz-sapphire-soft);
    --wz-action-glow: var(--wz-paper-action-glow);
    --wz-link: var(--wz-paper-action);
    --wz-focus: var(--wz-paper-action);
    --wz-eyebrow-color: var(--wz-paper-action);
    --wz-corner: color-mix(in srgb, var(--wz-gold-paper) 55%, transparent);

    color: var(--wz-paper-ink);
    color-scheme: light;
}

/* The shared route host owns the default reading surface for screens that
   have not declared a kit boundary. Both palette families are resolved here. */
html[data-ag-experience="wizarding"] .agc-content > :where(div, section, main, article):not([data-ag-kit]) {
    background: var(--wz-parchment-lit);
    color: var(--wz-paper-ink);
}

/* Native table body cells in the shared reading surface use its ink, including
   summary rows whose older row styles otherwise force white text. */
html[data-ag-experience="wizarding"] .agc-content > :where(div, section, main, article):not([data-ag-kit]) table tbody :is(td, th) {
    color: var(--ag-token-color-ink-primary);
}

/* Paper surfaces themselves: lit parchment, warm hairline, deep shadow over stone.
   The 8 gradient layers draw the gilded corner ticks (§4.1 of the spec) without
   extra markup; the last layer is the fill. */
html[data-ag-experience="wizarding"] :is(
    .agc-card, .agc-table-card, .agc-compliance-header, .agc-metric, .agc-risk-card,
    .agc-notice, .agc-toast, .agc-disclosure, .agc-form-section, .agc-inline-panel,
    .agc-data-board, .agc-dashboard-card, .agc-dashboard-header, .agc-dashboard-header__count,
    .agc-dashboard-panel, .agc-summary-strip, .agc-empty, .agc-case-record, .agc-office-record,
    .agc-attachment, .agc-media-card, .agc-dev-apps, .agc-agmotors__panel, .agc-detail-summary,
    .agc-notifications__panel, .agc-hr-workspace__card, .agc-doi-case, .agc-auth__panel
) {
    background:
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 1px 10px no-repeat,
        var(--wz-parchment-lit);
    border-color: var(--wz-paper-hair);
    box-shadow: var(--wz-paper-shadow);
}
/* Row-like paper containers at top level: plain lit parchment, hairline, soft shadow, no corner ticks. */
html[data-ag-experience="wizarding"] :is(.agc-project-row, .agc-task-row, .agc-timeline-item, .agc-goal, .agc-thread__item, .agc-ticket-note, .agc-ticket-desc-panel, .agc-ticket-upload-panel, .agc-corrective__note, .agc-corrective__month, .agc-week-day, .agc-visit-day, .agc-selection-row, .agc-file-row, .agc-value-summary, .agc-alert, .agc-drawer) {
    background: var(--wz-parchment-lit);
    border-color: var(--wz-paper-hair);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
html[data-ag-experience="wizarding"] .agc-drawer { box-shadow: var(--wz-paper-shadow); }
html[data-ag-experience="wizarding"] .agc-drawer__footer { background: var(--wz-paper-glass-2); }
/* Nested paper (a card inside a card, a record summary inside a dialog) stays flat. */
html[data-ag-experience="wizarding"] :where(.agc-card, .agc-dialog, .agc-modal__body, .agc-dashboard-panel, .agc-drawer, .agc-table-card, .agc-agmotors__panel, .agc-dev-apps, .agc-hr-workspace__card, .mud-paper, .mud-dialog) :is(.agc-card, .agc-notice, .agc-record-summary, .agc-disclosure, .agc-project-row, .agc-task-row, .agc-timeline-item, .agc-goal, .agc-thread__item, .agc-ticket-note, .agc-selection-row, .agc-file-row, .agc-value-summary, .agc-week-day, .agc-visit-day, .agc-corrective__note, .agc-corrective__month, .agc-media-card, .agc-upload-zone, .agc-ticket-desc-panel, .agc-ticket-upload-panel) {
    box-shadow: none;
    background: var(--wz-parchment);
}
html[data-ag-experience="wizarding"] .agc-card .agc-card { border-color: var(--wz-paper-hair); }

/* Candle glow: the ONLY decorative gradient allowed by the spec (§4.2), module headers only. */
html[data-ag-experience="wizarding"] :is(.agc-compliance-header, .agc-dashboard-header) {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(214, 178, 94, .22) 0%, rgba(214, 178, 94, 0) 55%),
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 1px 10px no-repeat,
        var(--wz-parchment-lit);
}


/* The viewer's own notes in a thread: sapphire tint (after the nested rule so it wins). */
html[data-ag-experience="wizarding"] .agc-ticket-note-mine, html[data-ag-experience="wizarding"] .agc-ticket-note.agc-ticket-note-mine { background: var(--wz-sapphire-soft); border-color: color-mix(in srgb, var(--wz-sapphire) 30%, transparent); }

/* Compact density flattens module headers in AG Access; Wizarding keeps them as a tighter parchment card. */
html[data-ag-experience="wizarding"] [data-ag-density="compact"] .agc-compliance-header {
    padding: var(--ag-token-space-16) var(--ag-token-space-20);
    border: var(--ag-token-web-hairlineWidth) solid var(--wz-paper-hair);
    border-radius: var(--ag-token-radius-lg);
}
html[data-ag-experience="wizarding"] [data-ag-density="compact"] .agc-metric--danger .agc-metric__value { color: var(--wz-tone-danger); }

/* Fields on paper sit on the deeper parchment so they read as writable. */
html[data-ag-experience="wizarding"] :is(.agc-card, .agc-dialog, .agc-form-section, .agc-disclosure) .agc-native-input {
    background: var(--wz-parchment);
    border-color: var(--wz-paper-hair);
    color: var(--wz-paper-ink);
}
html[data-ag-experience="wizarding"] .agc-native-input::placeholder { color: var(--wz-paper-ink-3); }

/* Table on parchment: Cinzel header, strong hairline under it, warm dividers. */
html[data-ag-experience="wizarding"] .agc-table th { border-bottom-color: var(--wz-paper-hair-strong); }
html[data-ag-experience="wizarding"] .agc-table td { border-bottom-color: var(--wz-paper-hair); }
html[data-ag-experience="wizarding"] .agc-table tbody tr:hover > td { background: var(--wz-paper-glass); }
html[data-ag-experience="wizarding"] .agc-record-link { color: var(--wz-sapphire); }

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
html[data-ag-experience="wizarding"] :where(.agc-eyebrow, .agc-module-nav__group-label, .agc-table th, .agc-field__label > .agc-eyebrow) {
    font-family: var(--wz-font-eyebrow);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
html[data-ag-experience="wizarding"] .agc-eyebrow { color: var(--wz-eyebrow-color); }
html[data-ag-experience="wizarding"] [data-ag-kit] :where(h1, h2, h3),
html[data-ag-experience="wizarding"] :where(.agc-metric__value, .agc-risk-card strong, .agc-dashboard-header__count strong, .agc-toast__title, .agc-shell-brand__copy strong, .agc-summary-strip strong) {
    font-family: var(--wz-font-display);
    font-weight: 700;
    letter-spacing: -0.2px;
}
html[data-ag-experience="wizarding"] [data-ag-kit] h1 { font-size: 2.375rem; line-height: 1.1; }
html[data-ag-experience="wizarding"] [data-ag-kit] h2 { font-size: 1.75rem; line-height: 1.15; }
html[data-ag-experience="wizarding"] [data-ag-kit] h3 { font-size: 1.5rem; line-height: 1.15; }
html[data-ag-experience="wizarding"] .agc-metric__value { font-size: 2.5rem; font-weight: 600; line-height: 1; }
html[data-ag-experience="wizarding"] .agc-shell-brand__copy strong { font-size: 1.375rem; }

/* ============================================================
   5. SKINS — primaries, icons, chrome
   ============================================================ */
html[data-ag-experience="wizarding"] .agc-button--primary {
    box-shadow: 0 0 0 1px var(--wz-action-glow), 0 6px 18px var(--wz-action-glow);
    transition: transform 120ms var(--ag-token-motion-easing-standard), box-shadow 120ms var(--ag-token-motion-easing-standard);
}
html[data-ag-experience="wizarding"] .agc-button--primary:active { transform: scale(.97); box-shadow: 0 0 0 6px var(--wz-action-glow), 0 6px 18px var(--wz-action-glow); }
html[data-ag-experience="wizarding"] .agc-button:focus-visible,
html[data-ag-experience="wizarding"] .agc-native-input:focus-visible,
html[data-ag-experience="wizarding"] .agc-record-link:focus-visible { outline-color: var(--wz-focus); box-shadow: 0 0 0 3px var(--wz-action-glow); }
html[data-ag-experience="wizarding"] :is(.agc-compliance-header__icon, .agc-register__icon, .agc-dashboard-card__icon, .agc-page-state__icon) {
    background: var(--ag-token-color-accent-solid);
    color: var(--ag-token-color-ink-inverse);
    box-shadow: 0 0 0 4px var(--wz-action-glow);
}
/* Shared interactive primitives inherit the containing surface, including
   nested data-ag-kit boundaries in dialogs. Destructive tones stay semantic. */
html[data-ag-experience="wizarding"] :is(.agc-button--secondary, .agc-button--text, .agc-button--icon):not(:disabled),
html[data-ag-experience="wizarding"] .agc-record-link { color: var(--wz-link); }
html[data-ag-experience="wizarding"] .agc-upload > .agc-icon { color: var(--wz-link); }
html[data-ag-experience="wizarding"] .agc-upload .agc-upload__action {
    background: var(--ag-token-color-accent-solid);
    color: var(--ag-token-color-ink-inverse);
    border-color: transparent;
}
html[data-ag-experience="wizarding"] .agc-upload[aria-disabled="true"] .agc-upload__action {
    background: var(--ag-token-color-accent-disabled);
    color: var(--ag-token-color-ink-quaternary);
}
html[data-ag-experience="wizarding"] .agc-upload:focus-within {
    outline: var(--ag-token-space-2) solid var(--wz-focus);
    outline-offset: var(--ag-token-space-2);
}
html[data-ag-experience="wizarding"] .agc-native-input::placeholder { color: var(--ag-token-color-ink-tertiary); opacity: 1; }
html[data-ag-experience="wizarding"] .agc-button--primary:disabled { box-shadow: none; }
/* The destructive confirm button is the only filled scarlet control in the theme. */
html[data-ag-experience="wizarding"] .agc-modal__footer .agc-button--danger {
    background: var(--wz-scarlet);
    color: var(--wz-parchment);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(142, 27, 36, .25), 0 6px 18px rgba(142, 27, 36, .25);
}
html[data-ag-experience="wizarding"] .agc-modal__footer .agc-button--danger:hover { background: #7A1620; }

/* ============================================================
   6. HOUSES → STATES
   Badges, tiles and risk cards carry data-tone="success|warning|danger|info|neutral"
   (set by the markup; AG Access ignores it). Nav groups carry data-wz-house.
   ============================================================ */
html[data-ag-experience="wizarding"] .agc-badge[data-tone="success"] { color: var(--wz-tone-success); border-color: var(--wz-tone-success); background: var(--wz-tone-success-soft); opacity: 1; }
html[data-ag-experience="wizarding"] .agc-badge[data-tone="warning"] { color: var(--wz-tone-warning); border-color: var(--wz-tone-warning); background: var(--wz-tone-warning-soft); opacity: 1; }
html[data-ag-experience="wizarding"] .agc-badge[data-tone="danger"]  { color: var(--wz-tone-danger);  border-color: var(--wz-tone-danger);  background: var(--wz-tone-danger-soft);  opacity: 1; }
html[data-ag-experience="wizarding"] .agc-badge[data-tone="info"]    { color: var(--wz-tone-info);    border-color: var(--wz-tone-info);    background: var(--wz-tone-info-soft);    opacity: 1; }
html[data-ag-experience="wizarding"] .agc-badge[data-tone] .agc-icon { color: inherit; }

html[data-ag-experience="wizarding"] .agc-metric[data-tone="success"] { --wz-corner: color-mix(in srgb, var(--wz-emerald-metal) 70%, transparent); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="warning"] { --wz-corner: color-mix(in srgb, var(--wz-amber-metal) 45%, transparent); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="danger"]  { --wz-corner: color-mix(in srgb, var(--wz-scarlet-metal) 80%, transparent); border-color: var(--wz-tone-danger); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="info"]    { --wz-corner: color-mix(in srgb, var(--wz-sapphire-metal) 70%, transparent); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="success"] :where(.agc-eyebrow, .agc-metric__value) { color: var(--wz-tone-success); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="warning"] :where(.agc-eyebrow, .agc-metric__value) { color: var(--wz-tone-warning); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="danger"]  :where(.agc-eyebrow, .agc-metric__value) { color: var(--wz-tone-danger); }
html[data-ag-experience="wizarding"] .agc-metric[data-tone="info"]    :where(.agc-eyebrow, .agc-metric__value) { color: var(--wz-tone-info); }
html[data-ag-experience="wizarding"] .agc-metric.is-active { border-color: var(--wz-paper-hair-strong); }
html[data-ag-experience="wizarding"] .agc-metric.is-active .agc-eyebrow { color: var(--wz-gold-text); }

html[data-ag-experience="wizarding"] .agc-risk-card--warning:not(:disabled) { border-color: var(--wz-tone-warning); --wz-corner: color-mix(in srgb, var(--wz-amber-metal) 60%, transparent); }
html[data-ag-experience="wizarding"] .agc-risk-card--danger:not(:disabled)  { border-color: var(--wz-tone-danger);  --wz-corner: color-mix(in srgb, var(--wz-scarlet-metal) 80%, transparent); }
html[data-ag-experience="wizarding"] .agc-risk-card--warning:not(:disabled) { background-color: var(--wz-tone-warning-soft); }
html[data-ag-experience="wizarding"] .agc-risk-card--danger:not(:disabled)  { background-color: var(--wz-tone-danger-soft); }
html[data-ag-experience="wizarding"] .agc-risk-card--warning:not(:disabled) :where(strong, .agc-icon) { color: var(--wz-tone-warning); }
html[data-ag-experience="wizarding"] .agc-risk-card--danger:not(:disabled)  :where(strong, .agc-icon) { color: var(--wz-tone-danger); }

/* Area groups: a house dot beside the group label, house-tinted inactive icons. */
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house] > .agc-module-nav__group-label { display: inline-flex; align-items: center; gap: 8px; }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house] > .agc-module-nav__group-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--wz-house); }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house] .agc-module-nav__item:not(.is-active) .agc-icon { color: var(--wz-house); }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house="sapphire"] { --wz-house: var(--wz-sapphire-dark); }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house="emerald"]  { --wz-house: var(--wz-emerald-dark); }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house="amber"]    { --wz-house: var(--wz-amber-dark); }
html[data-ag-experience="wizarding"] .agc-module-nav__group[data-wz-house="scarlet"]  { --wz-house: var(--wz-scarlet-dark); }

/* House colors off: every tone collapses to gold/neutral. Danger stays scarlet (safety semantics). */
html[data-ag-experience="wizarding"][data-wz-houses="false"] [data-ag-kit],
html[data-ag-experience="wizarding"][data-wz-houses="false"] :is(
    .agc-card, .agc-table-card, .agc-compliance-header, .agc-metric, .agc-risk-card,
    .agc-notice, .agc-toast, .agc-disclosure, .agc-form-section, .agc-inline-panel,
    .agc-data-board, .agc-dashboard-card, .agc-dashboard-header, .agc-dashboard-header__count,
    .agc-dashboard-panel, .agc-summary-strip, .agc-empty, .agc-record-summary, .agc-case-record,
    .agc-office-record, .agc-attachment, .agc-media-card, .agc-notifications__panel, .agc-action-menu > div,
    .agc-dialog, .agc-drawer, .agc-dev-apps, .agc-agmotors__panel, .agc-detail-summary, .agc-value-summary,
    .agc-project-row, .agc-task-row, .agc-timeline-item, .agc-goal, .agc-thread__item, .agc-ticket-note,
    .agc-ticket-desc-panel, .agc-ticket-upload-panel, .agc-corrective__note, .agc-corrective__month,
    .agc-week-day, .agc-visit-day, .agc-selection-row, .agc-file-row, .agc-upload-zone, .agc-hr-workspace__card,
    .agc-doi-case, .agc-alert,
    .mud-popover
) {
    --wz-tone-success: var(--ag-token-color-ink-primary);
    --wz-tone-warning: var(--wz-eyebrow-color);
    --wz-tone-info: var(--ag-token-color-ink-secondary);
    --wz-tone-success-soft: transparent;
    --wz-tone-warning-soft: transparent;
    --wz-tone-info-soft: transparent;
}
html[data-ag-experience="wizarding"][data-wz-houses="false"] .agc-module-nav__group[data-wz-house] { --wz-house: var(--ag-token-color-ink-tertiary); }
html[data-ag-experience="wizarding"][data-wz-houses="false"] :is(.agc-metric, .agc-risk-card)[data-tone]:not([data-tone="danger"]),
html[data-ag-experience="wizarding"][data-wz-houses="false"] .agc-risk-card--warning:not(:disabled) { --wz-corner: color-mix(in srgb, var(--wz-gold-paper) 55%, transparent); border-color: var(--wz-paper-hair); background-color: var(--wz-parchment-lit); }

/* ============================================================
   7. MUDBLAZOR BRIDGE — dialogs are paper, snackbar is paper with a house seal
   ============================================================ */
html[data-ag-experience="wizarding"] {
    --ag-bg: var(--wz-stone);
    --ag-bg-elevated: var(--wz-stone-raised);
    --ag-ink: var(--wz-stone-ink);
    --ag-ink-secondary: var(--wz-stone-ink-2);
    --ag-ink-tertiary: var(--wz-stone-ink-3);
    --ag-ink-quaternary: var(--wz-stone-ink-4);
    --ag-ink-inverse: var(--wz-on-gold);
    --ag-accent: var(--wz-gold);
    --ag-accent-pressed: var(--wz-gold-pressed);
    --ag-error: var(--wz-scarlet-dark);
    --ag-hairline: var(--wz-stone-hair);
    --ag-border-strong: var(--wz-stone-hair-strong);
    --ag-glass-subtle: var(--wz-stone-glass);
    --ag-glass-regular: var(--wz-stone-glass-2);
    --ag-glass-prominent: var(--wz-stone-glass-3);
    --ag-surface-subtle: #14111E;
    --ag-surface-regular: #171423;
    --ag-surface-prominent: #1B1828;
    --ag-scrim: rgba(6, 5, 10, .68);
}
html[data-ag-experience="wizarding"] .mud-dialog.agc-dialog {
    --mud-palette-surface: var(--wz-parchment-lit);
    --mud-palette-background: var(--wz-parchment-lit);
    --mud-palette-text-primary: var(--wz-paper-ink);
    --mud-palette-text-secondary: var(--wz-paper-ink-2);
    --mud-palette-lines-default: var(--wz-paper-hair);
    --mud-palette-divider: var(--wz-paper-hair);
    background: var(--wz-parchment-lit);
    color: var(--wz-paper-ink);
    box-shadow: var(--wz-paper-shadow), 0 0 0 1px var(--wz-gold-glow);
}
html[data-ag-experience="wizarding"] .mud-dialog.agc-dialog .agc-modal__footer { background: var(--wz-paper-glass-2); }
html[data-ag-experience="wizarding"] .mud-snackbar {
    background: var(--wz-parchment-lit);
    color: var(--wz-paper-ink);
    border: 1px solid var(--wz-paper-hair-strong);
    border-radius: 16px;
    box-shadow: var(--wz-paper-shadow), 0 0 0 1px var(--wz-gold-glow);
    font-family: var(--ag-token-typography-family-ui);
}
html[data-ag-experience="wizarding"] .mud-snackbar .mud-snackbar-icon { color: var(--wz-parchment); border-radius: 999px; padding: 6px; background: var(--wz-paper-action); }
html[data-ag-experience="wizarding"] .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { background: var(--wz-emerald); }
html[data-ag-experience="wizarding"] .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon { background: var(--wz-scarlet); }
html[data-ag-experience="wizarding"] .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { background: var(--wz-amber); }
html[data-ag-experience="wizarding"] .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon { background: var(--wz-sapphire); }
html[data-ag-experience="wizarding"] .mud-snackbar .mud-snackbar-content-message { color: var(--wz-paper-ink); }

/* ============================================================
   8. WAND CURSOR — shape only; text, resize and grab cursors stay native.
   Hotspot is the wand tip (2 30 in a 32×32 image).
   ============================================================ */
html[data-ag-experience="wizarding"][data-wz-wand="true"] body { cursor: url("img/wizarding/wand.svg") 2 30, auto; }
html[data-ag-experience="wizarding"][data-wz-wand="true"] :where(a, button, [role="button"], summary, label > input[type="checkbox"], .agc-check, .agc-button, .agc-metric, .agc-risk-card, .agc-module-nav__item, .agc-clickable-row, .agc-record-link, .agc-segmented button, .agc-nav a, select):not(:disabled) {
    cursor: url("img/wizarding/wand-lit.svg") 2 30, pointer;
}
html[data-ag-experience="wizarding"][data-wz-wand="true"] :where(:disabled, [aria-disabled="true"]) { cursor: url("img/wizarding/wand.svg") 2 30, default; }
html[data-ag-experience="wizarding"][data-wz-wand="true"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, [contenteditable="true"]) { cursor: text; }

/* ============================================================
   9. SPELL & SHADE — overlays are mounted by js/wizarding.js
   ============================================================ */
.wz-fx-layer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; }
.wz-spell { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; }
.wz-spell__ring { position: absolute; inset: 40px; border-radius: 999px; border: 3px solid var(--wz-gold, #D6B25E); opacity: .9; animation: wz-spell-ring var(--wz-spell-duration, 320ms) cubic-bezier(.2, 0, 0, 1) forwards; }
.wz-spell__core { position: absolute; inset: 52px; border-radius: 999px; background: var(--wz-gold, #D6B25E); opacity: .55; animation: wz-spell-core var(--wz-spell-duration, 320ms) cubic-bezier(.2, 0, 0, 1) forwards; }
.wz-spell__spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 999px; background: var(--wz-gold, #D6B25E); opacity: 0; animation: wz-spell-spark var(--wz-spell-duration, 320ms) cubic-bezier(.2, 0, 0, 1) forwards; transform: rotate(var(--wz-angle)) translateX(0); }
@keyframes wz-spell-ring { 0% { inset: 50px; opacity: .9; border-width: 3px; } 40% { inset: 38px; opacity: .6; border-width: 2px; } 100% { inset: 20px; opacity: 0; border-width: 1px; } }
@keyframes wz-spell-core { 0% { inset: 56px; opacity: .55; } 40% { inset: 48px; opacity: .3; } 100% { inset: 34px; opacity: 0; } }
@keyframes wz-spell-spark { 0% { opacity: 0; transform: rotate(var(--wz-angle)) translateX(12px) scale(1); } 35% { opacity: .9; transform: rotate(var(--wz-angle)) translateX(20px) scale(1.1); } 100% { opacity: 0; transform: rotate(var(--wz-angle)) translateX(34px) scale(.7); } }

.wz-shade { position: absolute; width: 140px; height: 140px; margin: -110px 0 0 -70px; pointer-events: none; opacity: 0; animation: wz-shade-rise var(--wz-shade-duration, 600ms) cubic-bezier(.2, 0, 0, 1) forwards; }
.wz-shade__veil { position: absolute; left: 50%; top: 50%; width: 44px; height: 88px; margin: -44px 0 0 -22px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--wz-shade-ink, #0B0A12); filter: blur(2px); box-shadow: 0 18px 30px var(--wz-shade-glow, rgba(143,176,238,.22)); }
.wz-shade__mist { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: var(--wz-shade-mist, #6E7A8C); opacity: 0; animation: wz-shade-mist var(--wz-shade-duration, 600ms) cubic-bezier(.2, 0, 0, 1) forwards; }
@keyframes wz-shade-rise { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 25% { opacity: .85; transform: translateY(10px) scale(.9); } 70% { opacity: .75; transform: translateY(-14px) scale(1.15); } 100% { opacity: 0; transform: translateY(-60px) scale(1.5); } }
@keyframes wz-shade-mist { 0%, 40% { opacity: 0; transform: rotate(var(--wz-angle)) translateX(6px); } 70% { opacity: .9; transform: rotate(var(--wz-angle)) translateX(28px); } 100% { opacity: 0; transform: rotate(var(--wz-angle)) translateX(56px); } }

/* Target row states driven by wizarding.js (data attributes on the row / card). */
html[data-ag-experience="wizarding"] [data-wz-target="armed"] > td,
html[data-ag-experience="wizarding"] [data-wz-target="armed"].agc-card { box-shadow: inset 0 0 0 1px var(--wz-scarlet); }
html[data-ag-experience="wizarding"] [data-wz-target="draining"] { filter: grayscale(1); opacity: .85; transform: translateY(4px); transition: filter 260ms, opacity 260ms, transform 260ms; }
html[data-ag-experience="wizarding"] [data-wz-target="draining"] :is(td, .agc-badge, .agc-badge[data-tone], .agc-record-link, strong, small, span, a) { color: var(--wz-shade-mist); border-color: var(--wz-shade-frost); background: transparent; }
html[data-ag-experience="wizarding"] [data-wz-target="dissolved"] { opacity: 0; transform: translateY(10px) scaleY(.2); transition: opacity 180ms, transform 180ms; }
html[data-ag-experience="wizarding"] [data-wz-target="deactivated"] { filter: grayscale(1); opacity: .7; }
html[data-ag-experience="wizarding"] [data-wz-target="deactivated"] :where(td, .agc-badge, strong, small, span) { color: var(--wz-shade-mist); border-color: var(--wz-shade-frost); }
html[data-ag-experience="wizarding"] [data-wz-target="restoring"] { filter: none; opacity: 1; transform: none; transition: filter 200ms, opacity 200ms, transform 200ms; }


/* ============================================================
   10. LEGACY VARIABLE BRIDGE — shell values at the root
   ag-access.css maps --mud-palette-*, --kiro-*, --color-*, --app-*, --ui-* onto
   --ag-*; app.css still reads a few --mt-*. Custom properties resolve where they
   are declared, so the paper zone (§11) has to re-declare the WHOLE chain, not
   only --ag-*.
   ============================================================ */
html[data-ag-experience="wizarding"] {
    --ag-display-font: var(--wz-font-display);
    --mt-bg: var(--wz-stone);
    --mt-bg-muted: var(--wz-stone-raised);
    --mt-surface: var(--wz-stone-raised);
    --mt-surface-hover: var(--wz-stone-glass-2);
    --mt-ink: var(--wz-stone-ink);
    --mt-text: var(--wz-stone-ink);
    --mt-text-muted: var(--wz-stone-ink-2);
    --mt-text-soft: var(--wz-stone-ink-3);
    --mt-line: var(--wz-stone-hair);
    --mt-line-soft: var(--wz-stone-hair);
    --mt-line-strong: var(--wz-stone-hair-strong);
    --mt-primary: var(--wz-gold);
    --mt-primary-strong: var(--wz-gold-pressed);
    --mt-primary-soft: var(--wz-stone-glass-2);
    --mt-danger: var(--wz-scarlet-dark);
    --mt-danger-strong: var(--wz-scarlet-dark);
    --mt-success: var(--wz-emerald-dark);
    --mt-warning: var(--wz-amber-dark);
    --mt-info: var(--wz-sapphire-dark);
}

/* ============================================================
   11. PAPER ZONE — MudBlazor and legacy containers
   Same idea as §3 for markup the kit does not own. Explicit background/color
   beat the modules' hardcoded hex; the variable chain feeds ag-access.css
   compatibility rules (which use !important with var(--ag-*)).
   ============================================================ */
html[data-ag-experience="wizarding"] .agc-content > :where(div, section, main, article):not([data-ag-kit]),
html[data-ag-experience="wizarding"] :is(
    .mud-paper:where(:not(.mud-appbar, .mud-drawer, .mud-overlay, .mud-tabs-tabbar)),
    .mud-card, .mud-table-container, .mud-table, .mud-data-grid, .mud-expansion-panels, .mud-expand-panel,
    .mud-alert, .mud-dialog, .mud-popover, .mud-menu-paper, .mud-picker, .mud-snackbar,
    .modern-card, .modern-table, .form-wrapper, .tickets-grid,
    .mt-list-container, .mt-empty-state, .mt-table-wrapper, .mtd-meta-grid, .mtd-description-panel, .mtd-upload-panel, .mtd-note-item,
    .elh-shell, .elh-metric, .elh-panel, .elh-case, .elh-empty, .elh-editor,
    .str-shell, .str-summary-card, .str-panel, .str-empty, .str-report-notice, .str-breakdown-row, .str-table,
    .ticket-report-shell, .report-summary-card, .report-panel, .report-empty, .report-breakdown-row, .report-table,
    .stl-filter-shell, .stl-board, .stl-metric, .stl-empty, .stl-status-tab,
    .stf-panel, .stf-history-panel, .stf-ticket-card, .stf-request-type, .stf-mode-option,
    .mf-container,
    .project-toolbar, .project-drop-container, .project-list, .project-row
) {
    /* --ag-* (compatibility layer) */
    --ag-bg: var(--wz-parchment);
    --ag-bg-elevated: var(--wz-parchment-lit);
    --ag-ink: var(--wz-paper-ink);
    --ag-ink-secondary: var(--wz-paper-ink-2);
    --ag-ink-tertiary: var(--wz-paper-ink-3);
    --ag-ink-quaternary: var(--wz-paper-ink-4);
    --ag-ink-inverse: var(--wz-on-paper-action);
    --ag-accent: var(--wz-paper-action);
    --ag-accent-pressed: var(--wz-paper-action-pressed);
    --ag-accent-disabled: rgba(60, 42, 12, .10);
    --ag-error: var(--wz-scarlet);
    --ag-hairline: var(--wz-paper-hair);
    --ag-border-strong: var(--wz-paper-hair-strong);
    --ag-glass-subtle: var(--wz-paper-glass);
    --ag-glass-regular: var(--wz-paper-glass-2);
    --ag-glass-prominent: var(--wz-paper-glass-3);
    --ag-surface-subtle: #F1E8D3;
    --ag-surface-regular: #EEE4CD;
    --ag-surface-prominent: #E9DEC4;
    --ag-control-track: rgba(42, 32, 18, .16);
    --ag-meter-track: rgba(42, 32, 18, .12);
    /* --mud-palette-* (MudBlazor components read these directly) */
    --mud-palette-primary: var(--wz-paper-action);
    --mud-palette-primary-text: var(--wz-on-paper-action);
    --mud-palette-info-text: var(--wz-on-paper-action);
    --mud-palette-success-text: var(--wz-on-paper-action);
    --mud-palette-warning-text: var(--wz-on-paper-action);
    --mud-palette-error-text: var(--wz-on-paper-action);
    --mud-palette-secondary: var(--wz-paper-ink-2);
    --mud-palette-tertiary: var(--wz-paper-ink-3);
    --mud-palette-info: var(--wz-sapphire);
    --mud-palette-success: var(--wz-emerald);
    --mud-palette-warning: var(--wz-amber);
    --mud-palette-error: var(--wz-scarlet);
    --mud-palette-dark: var(--wz-paper-ink);
    --mud-palette-text-primary: var(--wz-paper-ink);
    --mud-palette-text-secondary: var(--wz-paper-ink-2);
    --mud-palette-text-disabled: var(--wz-paper-ink-4);
    --mud-palette-action-default: var(--wz-paper-ink-2);
    --mud-palette-action-disabled: var(--wz-paper-ink-4);
    --mud-palette-background: var(--wz-parchment-lit);
    --mud-palette-background-gray: var(--wz-parchment);
    --mud-palette-surface: var(--wz-parchment-lit);
    --mud-palette-lines-default: var(--wz-paper-hair);
    --mud-palette-lines-inputs: var(--wz-paper-hair-strong);
    --mud-palette-divider: var(--wz-paper-hair);
    --mud-palette-table-lines: var(--wz-paper-hair);
    --mud-palette-table-hover: var(--wz-paper-glass);
    --mud-palette-table-striped: var(--wz-paper-glass);
    /* Existing platform dialog rules consume these aliases directly. */
    --dialog-primary: var(--wz-paper-action);
    --dialog-primary-strong: var(--wz-paper-action-pressed);
    --dialog-surface: var(--wz-parchment-lit);
    --dialog-bg: var(--wz-parchment);
    --dialog-line: var(--wz-paper-hair);
    --dialog-muted: var(--wz-paper-ink-2);
    --dialog-ink: var(--wz-paper-ink);
    /* legacy aliases still read by unmigrated screens */
    --mt-bg: var(--wz-parchment); --mt-bg-muted: var(--wz-parchment); --mt-surface: var(--wz-parchment-lit); --mt-surface-hover: var(--wz-paper-glass);
    --mt-ink: var(--wz-paper-ink); --mt-text: var(--wz-paper-ink); --mt-text-muted: var(--wz-paper-ink-2); --mt-text-soft: var(--wz-paper-ink-3);
    --mt-line: var(--wz-paper-hair); --mt-line-soft: var(--wz-paper-hair); --mt-line-strong: var(--wz-paper-hair-strong);
    --mt-primary: var(--wz-paper-action); --mt-primary-strong: var(--wz-paper-action-pressed); --mt-primary-soft: var(--wz-paper-glass-2);
    --mt-danger: var(--wz-scarlet); --mt-danger-strong: var(--wz-scarlet); --mt-success: var(--wz-emerald); --mt-warning: var(--wz-amber); --mt-info: var(--wz-sapphire);
    --color-primary: var(--wz-paper-action); --color-secondary: var(--wz-paper-ink-2); --color-text-primary: var(--wz-paper-ink); --color-text-secondary: var(--wz-paper-ink-2);
    --color-border: var(--wz-paper-hair); --color-background: var(--wz-parchment);
    --app-primary: var(--wz-paper-action); --app-primary-strong: var(--wz-paper-action-pressed); --app-primary-soft: var(--wz-paper-glass-2);
    --app-ink: var(--wz-paper-ink); --app-muted: var(--wz-paper-ink-2); --app-line: var(--wz-paper-hair); --app-bg: var(--wz-parchment); --app-surface: var(--wz-parchment-lit);
    --app-red: var(--wz-scarlet); --app-green: var(--wz-emerald); --app-amber: var(--wz-amber); --app-cyan: var(--wz-sapphire);
    --ui-primary: var(--wz-paper-action); --ui-primary-strong: var(--wz-paper-action-pressed); --ui-bg: var(--wz-parchment); --ui-surface: var(--wz-parchment-lit);
    --ui-text: var(--wz-paper-ink); --ui-muted: var(--wz-paper-ink-2); --ui-border: var(--wz-paper-hair);
    --kiro-primary: var(--wz-paper-action); --kiro-primary-hover: var(--wz-paper-action-pressed); --kiro-secondary: var(--wz-paper-ink-2); --kiro-dark: var(--wz-paper-ink);
    --kiro-gray: var(--wz-paper-ink-2); --kiro-light-gray: var(--wz-parchment); --kiro-border: var(--wz-paper-hair); --kiro-error: var(--wz-scarlet); --kiro-success: var(--wz-emerald);
    --kiro-warning: var(--wz-amber); --kiro-info: var(--wz-sapphire);

    --wz-tone-success: var(--wz-emerald); --wz-tone-warning: var(--wz-amber); --wz-tone-danger: var(--wz-scarlet); --wz-tone-info: var(--wz-sapphire);
    --wz-tone-success-soft: var(--wz-emerald-soft); --wz-tone-warning-soft: var(--wz-amber-soft); --wz-tone-danger-soft: var(--wz-scarlet-soft); --wz-tone-info-soft: var(--wz-sapphire-soft);
    --wz-action-glow: var(--wz-paper-action-glow);
    --wz-link: var(--wz-paper-action);
    --wz-focus: var(--wz-paper-action);
    --wz-eyebrow-color: var(--wz-paper-action);
    --wz-corner: color-mix(in srgb, var(--wz-gold-paper) 55%, transparent);
    color: var(--wz-paper-ink);
    color-scheme: light;
}

/* Card-level legacy/Mud surfaces: lit parchment with corner ticks and shadow. */
html[data-ag-experience="wizarding"] :is(
    .mud-card, .mud-expansion-panels, .mud-dialog,
    .modern-card, .form-wrapper, .tickets-grid,
    .mt-list-container, .mtd-meta-grid, .elh-shell, .elh-panel, .elh-case, .str-shell, .str-panel, .str-summary-card,
    .ticket-report-shell, .report-panel, .report-summary-card, .stl-filter-shell, .stl-board, .stf-panel, .stf-history-panel,
    .project-toolbar, .project-drop-container
) {
    background:
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) top 8px right 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px left 8px / 1px 10px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 10px 1px no-repeat,
        linear-gradient(var(--wz-corner), var(--wz-corner)) bottom 8px right 8px / 1px 10px no-repeat,
        var(--wz-parchment-lit);
    border-color: var(--wz-paper-hair);
    box-shadow: var(--wz-paper-shadow);
    color: var(--wz-paper-ink);
}
/* Plain paper surfaces (rows, tables, panels inside cards): deeper parchment, no ticks. */
html[data-ag-experience="wizarding"] :is(
    .mud-paper:where(:not(.mud-card, .mud-dialog, .mud-appbar, .mud-drawer, .mud-popover, .mud-menu-paper, .mud-picker, .mud-tabs-tabbar, .mud-expansion-panels)),
    .mud-table-container, .mud-table, .mud-data-grid, .mud-expand-panel, .mud-alert,
    .modern-table, .mt-empty-state, .mt-table-wrapper, .mtd-description-panel, .mtd-upload-panel, .mtd-note-item, .mtd-note-other,
    .elh-metric, .elh-empty, .elh-editor, .elh-table, .str-empty, .str-report-notice, .str-breakdown-row, .str-table, .str-donut-center,
    .report-empty, .report-breakdown-row, .report-table, .report-donut-center, .stl-metric, .stl-empty, .stl-status-tab, .stl-board-header,
    .stf-ticket-card, .stf-request-type, .stf-mode-option, .stf-history-empty, .stf-thread-empty, .project-list, .project-row
) {
    background: var(--wz-parchment-lit);
    border-color: var(--wz-paper-hair);
    color: var(--wz-paper-ink);
}
html[data-ag-experience="wizarding"] :where(.mud-card, .mud-dialog, .mt-list-container, .elh-shell, .str-shell, .ticket-report-shell, .stl-board, .stf-panel, .project-drop-container) :is(.mud-paper, .mud-table-container, .mud-alert, .mtd-description-panel, .mtd-upload-panel, .mtd-note-other, .elh-metric, .elh-panel, .str-summary-card, .str-panel, .str-breakdown-row, .report-summary-card, .report-panel, .report-breakdown-row, .stf-request-type, .stl-board-header, .project-row) {
    background: var(--wz-parchment);
    box-shadow: none;
}
html[data-ag-experience="wizarding"] :is(.mud-popover, .mud-menu-paper, .mud-picker) { background: var(--wz-parchment-lit); color: var(--wz-paper-ink); border: 1px solid var(--wz-paper-hair-strong); box-shadow: var(--wz-paper-shadow); }
html[data-ag-experience="wizarding"] .mud-overlay-scrim { background: rgba(6, 5, 10, .68); }

/* ============================================================
   12. MUDBLAZOR SKIN — tabs, tables, buttons, inputs, chips, alerts
   ============================================================ */
/* ag-access.css pins .mud-typography to var(--ag-font) !important (after its heading rule), so headings
   re-point --ag-font to the display face on themselves. */
html[data-ag-experience="wizarding"] :is(.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6, .mud-dialog-title, h1:not([data-ag-kit] *), h2:not([data-ag-kit] *), h3:not([data-ag-kit] *)) { --ag-font: var(--wz-font-display); --ag-display-font: var(--wz-font-display); --ag-token-typography-family-ui: var(--wz-font-display); --ag-token-typography-family-display: var(--wz-font-display); --mud-typography-h1-family: var(--wz-font-display); --mud-typography-h2-family: var(--wz-font-display); --mud-typography-h3-family: var(--wz-font-display); --mud-typography-h4-family: var(--wz-font-display); --mud-typography-h5-family: var(--wz-font-display); --mud-typography-h6-family: var(--wz-font-display); font-weight: 700; letter-spacing: -0.2px; }
html[data-ag-experience="wizarding"] :is(.mud-table-head .mud-table-cell, .mud-data-grid .mud-table-head .mud-table-cell, .mud-table-head th) {
    font-family: var(--wz-font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
}
html[data-ag-experience="wizarding"] .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--ag-hairline); }
html[data-ag-experience="wizarding"] .mud-tab { color: var(--ag-ink-secondary); text-transform: none; font-weight: 600; }
html[data-ag-experience="wizarding"] .mud-tab.mud-tab-active { color: var(--ag-accent); background: var(--wz-tone-info-soft); }
html[data-ag-experience="wizarding"] .mud-tabs-tabbar .mud-tab-slider { background: var(--ag-accent); height: 2px; }
html[data-ag-experience="wizarding"] .mud-button-filled-primary { box-shadow: 0 0 0 1px var(--wz-action-glow), 0 6px 18px var(--wz-action-glow); border-radius: 999px; }
html[data-ag-experience="wizarding"] .mud-button-filled-primary:not(:disabled) { background: var(--ag-accent); color: var(--ag-ink-inverse); }
html[data-ag-experience="wizarding"] .mud-button-filled-error { background: var(--wz-scarlet); color: var(--wz-parchment); border-radius: 999px; }
html[data-ag-experience="wizarding"] :is(.mud-button-outlined, .mud-button-text) { border-radius: 999px; }
html[data-ag-experience="wizarding"] .mud-chip { border-radius: 999px; }
html[data-ag-experience="wizarding"] .mud-alert-success, html[data-ag-experience="wizarding"] .mud-alert-filled-success { border-color: var(--wz-emerald); }
html[data-ag-experience="wizarding"] .mud-alert-warning, html[data-ag-experience="wizarding"] .mud-alert-filled-warning { border-color: var(--wz-amber); }
html[data-ag-experience="wizarding"] .mud-alert-info, html[data-ag-experience="wizarding"] .mud-alert-filled-info { border-color: var(--wz-sapphire); }
html[data-ag-experience="wizarding"] .mud-progress-linear .mud-progress-linear-bar { background: var(--ag-accent); }
html[data-ag-experience="wizarding"] .mud-dialog .mud-dialog-title { font-family: var(--wz-font-display); }
html[data-ag-experience="wizarding"] :is(.mud-input-filled, .mud-input-outlined) { background: var(--wz-parchment); }
html[data-ag-experience="wizarding"] .mud-input-filled:hover { background: var(--wz-paper-glass-2); }

/* ============================================================
   13. LEGACY MODULE SKIN — Maintenance, HelpDesk lifecycle panel, Ticket reports,
   Support ticket list/form, Project list. Hardcoded slate (#0f172a/#64748b) becomes
   paper ink; blue/indigo accents become gold; status pills take the houses.
   Temporary: delete each block when its module migrates to the AG kit.
   ============================================================ */
html[data-ag-experience="wizarding"] :is(
    .mt-title, .mt-empty-title, .mt-row-title, .mt-muted-strong, .mtd-title, .mtd-meta-value, .mtd-notes-title, .mtd-upload-title,
    .elh-title, .elh-panel-title, .elh-metric strong, .elh-case-head strong, .elh-table strong,
    .str-title, .str-panel-title, .str-summary-card strong, .str-breakdown-row strong, .str-score, .str-donut-center strong, .str-legend-row strong, .str-column-value, .str-bar-row strong, .str-hourly-value, .str-table td,
    .tickets-page-title, .report-title, .report-panel-title, .report-value, .report-breakdown-row strong, .report-donut-center strong, .report-legend-row strong, .report-column-value, .report-bar-row strong, .report-hourly-value,
    .stl-title, .stl-empty-title, .metric-value, .stf-header h1, .stf-state h1, .stf-history-header h2, .stf-card-title, .stf-mode-option strong,
    .mf-title, .mf-success h2, .mf-error h2, .project-count-chip
) { color: var(--wz-paper-ink); }
html[data-ag-experience="wizarding"] :is(
    .mt-title, .mtd-title, .elh-title, .str-title, .tickets-page-title, .report-title, .stl-title, .stf-header h1, .stf-state h1, .mf-title,
    .elh-metric strong, .str-summary-card strong, .report-value, .metric-value, .str-donut-center strong, .report-donut-center strong
) { font-family: var(--wz-font-display); font-weight: 700; letter-spacing: -0.2px; }
html[data-ag-experience="wizarding"] :is(
    .mt-subtitle, .mt-row-sub, .mt-empty-copy, .mt-date, .mtd-subtitle, .mtd-meta-label, .mtd-close-action,
    .elh-subtitle, .elh-metric span, .elh-metric small, .elh-case-head span, .elh-table small, .elh-table th, .elh-empty,
    .str-subtitle, .str-label, .str-legend-row, .str-column-label, .str-bar-label, .str-trend-day > span, .str-hourly-item > span, .str-mini-legend span, .str-table th, .str-empty, .str-report-notice, .str-donut-center span,
    .tickets-page-subtitle, .report-subtitle, .report-label, .report-legend-row, .report-column-label, .report-bar-label, .report-trend-day > span, .report-hourly-item > span, .report-mini-legend span, .report-donut-center span, .report-empty, .report-breakdown-row,
    .stl-subtitle, .metric-label, .stl-board-header, .stf-header p, .stf-state p, .stf-card-meta, .stf-mode-option span, .stf-history-empty, .stf-thread-empty,
    .mf-subtitle, .mf-label, .mf-loading
) { color: var(--wz-paper-ink-2); }
html[data-ag-experience="wizarding"] :is(.mt-title-icon, .mt-empty-icon, .stl-icon-wrap, .icon-wrapper, .order-number) { background: var(--wz-paper-glass-2); color: var(--wz-gold-text); }
html[data-ag-experience="wizarding"] :is(.mt-count-pill, .stl-count-pill, .elh-case-status, .stf-card-topline strong, .stf-detail-number, .stf-kicker) { background: var(--wz-paper-glass-2); color: var(--wz-gold-text); }

/* Legacy tables */
html[data-ag-experience="wizarding"] :is(.modern-table th, .elh-table th, .str-table th, .report-table th, .stl-board-header) { font-family: var(--wz-font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wz-paper-ink-2); border-bottom-color: var(--wz-paper-hair-strong); background: transparent; }
html[data-ag-experience="wizarding"] :is(.modern-table td, .elh-table td, .str-table td, .report-table td, .elh-case-head) { border-bottom-color: var(--wz-paper-hair); }
html[data-ag-experience="wizarding"] :is(.modern-table thead tr) { background: var(--wz-parchment); }
html[data-ag-experience="wizarding"] :is(.mt-row:hover, .str-ticket-row:hover, .project-list-item:hover, .stl-board-row:hover) { background: var(--wz-paper-glass); }
html[data-ag-experience="wizarding"] :is(.mt-filter-tabs, .mt-table-wrapper, .stl-board, .str-table) { border-color: var(--wz-paper-hair); }

/* Legacy status / priority pills → houses */
html[data-ag-experience="wizarding"] :is(.table-pill, .stf-status, .status-pill, .priority-pill) { border: 1px solid var(--wz-paper-hair); background: var(--wz-parchment); color: var(--wz-paper-ink-2); }
html[data-ag-experience="wizarding"] :is(.priority-low, .status-open, .stf-status-open) { background: var(--wz-sapphire-soft); border-color: var(--wz-sapphire); color: var(--wz-sapphire); }
html[data-ag-experience="wizarding"] :is(.priority-medium, .status-inprogress, .stf-status-inprogress) { background: var(--wz-amber-soft); border-color: var(--wz-amber); color: var(--wz-amber); }
html[data-ag-experience="wizarding"] :is(.priority-high, .priority-critical) { background: var(--wz-scarlet-soft); border-color: var(--wz-scarlet); color: var(--wz-scarlet); }
html[data-ag-experience="wizarding"] :is(.status-resolved, .stf-status-resolved) { background: var(--wz-emerald-soft); border-color: var(--wz-emerald); color: var(--wz-emerald); }
html[data-ag-experience="wizarding"] :is(.status-closed, .stf-status-closed) { background: var(--wz-parchment); border-color: var(--wz-paper-hair-strong); color: var(--wz-paper-ink-2); }
html[data-ag-experience="wizarding"] .elh-metric.tone-amber { background: var(--wz-amber-soft); border-color: var(--wz-amber); }
html[data-ag-experience="wizarding"] .elh-metric.tone-red { background: var(--wz-scarlet-soft); border-color: var(--wz-scarlet); }
html[data-ag-experience="wizarding"] .elh-metric.tone-green { background: var(--wz-emerald-soft); border-color: var(--wz-emerald); }
html[data-ag-experience="wizarding"] .report-alert-card { background: var(--wz-scarlet-soft); border-color: var(--wz-scarlet); }
html[data-ag-experience="wizarding"] :is(.stl-metric.total, .stl-metric.open) { background: var(--wz-sapphire-soft); border-color: color-mix(in srgb, var(--wz-sapphire) 35%, transparent); }
html[data-ag-experience="wizarding"] .stl-metric.progress { background: var(--wz-amber-soft); border-color: color-mix(in srgb, var(--wz-amber) 35%, transparent); }
html[data-ag-experience="wizarding"] .stl-metric.resolved { background: var(--wz-emerald-soft); border-color: color-mix(in srgb, var(--wz-emerald) 35%, transparent); }
html[data-ag-experience="wizarding"] .stl-metric.critical { background: var(--wz-scarlet-soft); border-color: color-mix(in srgb, var(--wz-scarlet) 35%, transparent); }


/* app.css pins legacy card backgrounds to var(--app-surface) / var(--ui-surface) with !important; tinted
   states re-point those variables on the element instead of fighting the declaration. */
html[data-ag-experience="wizarding"] :is(.report-alert-card, .elh-metric.tone-red, .stl-metric.critical) { --app-surface: var(--wz-scarlet-soft); --ui-surface: var(--wz-scarlet-soft); --mt-surface: var(--wz-scarlet-soft); --app-bg: var(--wz-scarlet-soft); --ui-bg: var(--wz-scarlet-soft); --mt-bg: var(--wz-scarlet-soft); --color-background: var(--wz-scarlet-soft); --kiro-light-gray: var(--wz-scarlet-soft); --ag-bg: var(--wz-scarlet-soft); --ag-bg-elevated: var(--wz-scarlet-soft); --ag-surface-subtle: var(--wz-scarlet-soft); --ag-glass-subtle: var(--wz-scarlet-soft); --mud-palette-surface: var(--wz-scarlet-soft); --mud-palette-background: var(--wz-scarlet-soft); }
html[data-ag-experience="wizarding"] :is(.elh-metric.tone-amber, .stl-metric.progress) { --app-surface: var(--wz-amber-soft); --ui-surface: var(--wz-amber-soft); --mt-surface: var(--wz-amber-soft); --app-bg: var(--wz-amber-soft); --ui-bg: var(--wz-amber-soft); --mt-bg: var(--wz-amber-soft); --color-background: var(--wz-amber-soft); --kiro-light-gray: var(--wz-amber-soft); --ag-bg: var(--wz-amber-soft); --ag-bg-elevated: var(--wz-amber-soft); --ag-surface-subtle: var(--wz-amber-soft); --ag-glass-subtle: var(--wz-amber-soft); --mud-palette-surface: var(--wz-amber-soft); --mud-palette-background: var(--wz-amber-soft); }
html[data-ag-experience="wizarding"] :is(.elh-metric.tone-green, .stl-metric.resolved) { --app-surface: var(--wz-emerald-soft); --ui-surface: var(--wz-emerald-soft); --mt-surface: var(--wz-emerald-soft); --app-bg: var(--wz-emerald-soft); --ui-bg: var(--wz-emerald-soft); --mt-bg: var(--wz-emerald-soft); --color-background: var(--wz-emerald-soft); --kiro-light-gray: var(--wz-emerald-soft); --ag-bg: var(--wz-emerald-soft); --ag-bg-elevated: var(--wz-emerald-soft); --ag-surface-subtle: var(--wz-emerald-soft); --ag-glass-subtle: var(--wz-emerald-soft); --mud-palette-surface: var(--wz-emerald-soft); --mud-palette-background: var(--wz-emerald-soft); }
html[data-ag-experience="wizarding"] :is(.stl-metric.total, .stl-metric.open) { --app-surface: var(--wz-sapphire-soft); --ui-surface: var(--wz-sapphire-soft); --mt-surface: var(--wz-sapphire-soft); --app-bg: var(--wz-sapphire-soft); --ui-bg: var(--wz-sapphire-soft); --mt-bg: var(--wz-sapphire-soft); --color-background: var(--wz-sapphire-soft); --kiro-light-gray: var(--wz-sapphire-soft); --ag-bg: var(--wz-sapphire-soft); --ag-bg-elevated: var(--wz-sapphire-soft); --ag-surface-subtle: var(--wz-sapphire-soft); --ag-glass-subtle: var(--wz-sapphire-soft); --mud-palette-surface: var(--wz-sapphire-soft); --mud-palette-background: var(--wz-sapphire-soft); }

/* Legacy charts: tracks on parchment, series in houses */
html[data-ag-experience="wizarding"] :is(.str-column-track, .str-bar-track, .str-trend-bars, .str-hourly-bars, .report-column-track, .report-bar-track, .report-trend-bars, .report-hourly-bars) { background: var(--wz-paper-glass-2); }
html[data-ag-experience="wizarding"] :is(.str-trend-bars .created, .str-mini-legend .created, .str-hourly-bars .created, .report-trend-bars .created, .report-mini-legend .created, .report-hourly-bars .created) { background: var(--wz-sapphire); }
html[data-ag-experience="wizarding"] :is(.str-trend-bars .resolved, .str-mini-legend .resolved, .str-hourly-bars .resolved, .report-trend-bars .resolved, .report-mini-legend .resolved, .report-hourly-bars .resolved) { background: var(--wz-emerald); }

/* Legacy actions use the same sapphire palette as shared paper controls. */
html[data-ag-experience="wizarding"] :is(.mt-filter-tabs .mud-tab.mud-tab-active, .stl-status-tab.active strong) { color: var(--wz-paper-action); }
html[data-ag-experience="wizarding"] .stl-status-tab.active { background: var(--wz-paper-action); border-color: var(--wz-paper-action); color: var(--wz-on-paper-action); box-shadow: 0 6px 18px var(--wz-paper-action-glow); }
html[data-ag-experience="wizarding"] .stl-status-tab.active strong { background: var(--wz-paper-action-pressed); color: var(--wz-on-paper-action); }
html[data-ag-experience="wizarding"] .mtd-note-mine { background: var(--wz-sapphire-soft); border-color: color-mix(in srgb, var(--wz-sapphire) 30%, transparent); }
html[data-ag-experience="wizarding"] :is(.mf-input, .mf-select, .mf-textarea, .mf-file-input) { background: var(--wz-parchment); border-color: var(--wz-paper-hair-strong); color: var(--wz-paper-ink); }
html[data-ag-experience="wizarding"] :is(.mf-input:focus, .mf-select:focus, .mf-textarea:focus) { border-color: var(--wz-paper-action); box-shadow: 0 0 0 3px var(--wz-paper-action-glow); }
html[data-ag-experience="wizarding"] .mf-btn-primary { background: var(--wz-paper-action); color: var(--wz-on-paper-action); }
html[data-ag-experience="wizarding"] .mf-btn-primary:hover { background: var(--wz-paper-action-pressed); }
html[data-ag-experience="wizarding"] .mf-btn-submit { background: var(--wz-scarlet); }
html[data-ag-experience="wizarding"] :is(.mf-file-chip) { background: var(--wz-paper-glass-2); border-color: var(--wz-paper-hair-strong); color: var(--wz-paper-ink); }
html[data-ag-experience="wizarding"] .mf-file-remove { color: var(--wz-paper-action); }

/* ============================================================
   14. SAFETY NET — the only !important in this file.
   These legacy rules are themselves !important (indigo fills baked into
   Maintenance / Support ticket buttons), so no specificity can reach them.
   Scoped to the Wizarding experience; delete with the module migration.
   ============================================================ */
html[data-ag-experience="wizarding"] :is(.mtd-send-action, .stl-create-btn) { background: var(--wz-paper-action) !important; color: var(--wz-on-paper-action) !important; box-shadow: 0 0 0 1px var(--wz-paper-action-glow), 0 6px 18px var(--wz-paper-action-glow) !important; }
html[data-ag-experience="wizarding"] :is(.mtd-description-panel, .mtd-upload-panel) { background: var(--wz-parchment) !important; }
html[data-ag-experience="wizarding"] .elh-case-status { color: var(--wz-paper-action) !important; }

@media (prefers-reduced-motion: reduce) {
    .wz-spell, .wz-shade { display: none; }
    html[data-ag-experience="wizarding"] [data-wz-target="draining"] { transform: none; }
    html[data-ag-experience="wizarding"] .agc-button--primary:active { transform: none; }
}