:root {
    --dig-navy-900: #0a1628;
    --dig-navy-700: #1a2d4d;
    --dig-slate-600: #475569;
    --dig-electric: #3b82f6;
    --dig-red: #dc2626;
    --dig-brand-red: #e63312;
    --dig-green: #16a34a;
    --dig-amber: #d97706;
    --dig-white: #ffffff;

    /* Semantic surface base — adapts to theme, unlike --dig-white (palette constant) */
    --dig-surface-base: #ffffff;

    --bg: var(--dig-surface-base);
    --surface: var(--dig-surface-base);
    --surface-1: var(--surface);
    --surface-2: color-mix(
        in srgb,
        var(--dig-navy-900) 5%,
        var(--dig-surface-base)
    );
    --border: color-mix(
        in srgb,
        var(--dig-slate-600) 26%,
        var(--dig-surface-base)
    );
    --border-subtle: color-mix(
        in srgb,
        var(--dig-slate-600) 18%,
        var(--dig-surface-base)
    );
    --text: var(--dig-navy-900);
    --text-muted: var(--dig-slate-600);
    --muted: var(--text-muted);
    --heading: var(--text);
    --accent: var(--dig-electric);
    --accent-hover: color-mix(
        in srgb,
        var(--dig-electric) 86%,
        var(--dig-navy-900)
    );
    --accent-pressed: color-mix(
        in srgb,
        var(--dig-electric) 70%,
        var(--dig-navy-900)
    );
    --focus-ring: color-mix(
        in srgb,
        var(--dig-electric) 42%,
        var(--dig-surface-base)
    );
    --link: var(--dig-electric);
    --link-hover: color-mix(
        in srgb,
        var(--dig-electric) 78%,
        var(--dig-navy-900)
    );
    --link-visited: var(--dig-electric);
    --focus: var(--dig-electric);
    --shadow: 0 8px 24px
        color-mix(in srgb, var(--dig-navy-900) 12%, transparent);
    --button-primary-bg: var(--dig-navy-700);
    --button-primary-text: var(--dig-white);
    --input-bg: var(--surface);
    --input-placeholder: color-mix(in srgb, var(--text-muted) 88%, var(--bg));

    /* Chip / badge tokens */
    --chip-bg: color-mix(
        in srgb,
        var(--dig-navy-700) 8%,
        var(--dig-surface-base)
    );
    --chip-text: var(--text);
    --chip-border: color-mix(
        in srgb,
        var(--dig-slate-600) 38%,
        var(--dig-surface-base)
    );

    /* Disabled state tokens */
    --disabled-bg: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
    --disabled-text: color-mix(in srgb, var(--text-muted) 76%, var(--surface));
    --disabled-border: var(--border-subtle);

    /* Evidence chip tokens */
    --evidence-chip-bg: color-mix(
        in srgb,
        var(--dig-slate-600) 10%,
        var(--dig-surface-base)
    );
    --evidence-chip-border: var(--border);

    /* Status badge variant tokens */
    --badge-danger-bg: color-mix(
        in srgb,
        var(--dig-red) 8%,
        var(--dig-surface-base)
    );
    --badge-danger-border: color-mix(
        in srgb,
        var(--dig-red) 35%,
        var(--dig-surface-base)
    );
    --badge-danger-text: var(--dig-red);
    --badge-success-bg: color-mix(
        in srgb,
        var(--dig-green) 10%,
        var(--dig-surface-base)
    );
    --badge-success-border: color-mix(
        in srgb,
        var(--dig-green) 30%,
        var(--dig-surface-base)
    );
    --badge-success-text: var(--dig-green);
    --badge-warn-bg: color-mix(
        in srgb,
        var(--dig-amber) 10%,
        var(--dig-surface-base)
    );
    --badge-warn-border: color-mix(
        in srgb,
        var(--dig-amber) 35%,
        var(--dig-surface-base)
    );
    --badge-warn-text: var(--dig-amber);

    /* Control surface token */
    --control-bg: var(--dig-surface-base);

    --dig-bg: var(--bg);
    --dig-surface-0: var(--bg);
    --dig-surface-1: var(--dig-surface-base);
    --dig-surface-2: var(--surface-2);
    --dig-border: var(--border);
    --dig-text: var(--text);
    --dig-muted: var(--text-muted);
    --dig-text-primary: var(--dig-text);
    --dig-text-muted: var(--dig-muted);
    --dig-surface-page: var(--dig-surface-0);
    --dig-surface-card: var(--dig-surface-1);
    --dig-surface-inset: var(--dig-surface-2);
    --dig-divider: var(--dig-border);
    --dig-subtle: var(--heading);

    --dig-primary: var(--dig-navy-700);
    --dig-primary-text: var(--dig-white);
    --dig-secondary: var(--dig-surface-1);
    --dig-focus-ring: var(--focus-ring);
    --dig-danger: var(--dig-red);
    --dig-success: var(--dig-green);
    --dig-warn: var(--dig-amber);
    --dig-accent: var(--dig-brand-red);
    --dig-accent-soft: color-mix(
        in srgb,
        var(--dig-brand-red) 10%,
        var(--dig-surface-base)
    );

    --dig-ink: var(--dig-text);
    --dig-panel: var(--surface);
    --dig-line: var(--dig-border);
    --dig-brand: var(--dig-electric);
    --dig-brand-soft: color-mix(
        in srgb,
        var(--dig-electric) 10%,
        var(--dig-surface-base)
    );
    --dig-info: var(--dig-navy-700);
    --dig-info-soft: var(--dig-surface-2);

    --dig-link: var(--dig-electric);
    --dig-focus: var(--dig-electric);
    --dig-btn-primary: var(--button-primary-bg);
    --dig-btn-cta: var(--dig-electric);
    --dig-btn-danger: var(--dig-red);

    --dig-shadow-1: var(--shadow);
    --dig-shadow-2: 0 16px 34px
        color-mix(in srgb, var(--dig-navy-900) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root {
        --dig-surface-base: #0a1628;
        --bg: #0a1628;
        --surface: #11203a;
        --surface-1: var(--surface);
        --surface-2: #172a48;
        --border: color-mix(in srgb, var(--dig-slate-600) 55%, #0a1628);
        --border-subtle: color-mix(in srgb, var(--dig-slate-600) 42%, #0a1628);
        --text: #e2e8f0;
        --text-muted: #cbd5e1;
        --muted: var(--text-muted);
        --heading: #f1f5f9;
        --link: #93c5fd;
        --link-hover: #bfdbfe;
        --link-visited: #bfdbfe;
        --focus-ring: #93c5fd;
        --focus: #93c5fd;
        --shadow: 0 10px 28px rgba(1, 8, 21, 0.55);
        --input-bg: var(--surface-2);
        --input-placeholder: color-mix(
            in srgb,
            var(--text-muted) 82%,
            var(--surface)
        );

        --chip-bg: var(--surface-2);
        --chip-text: var(--text);
        --chip-border: var(--border);
        --disabled-bg: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
        --disabled-text: color-mix(
            in srgb,
            var(--text-muted) 76%,
            var(--surface)
        );
        --disabled-border: var(--border-subtle);
        --evidence-chip-bg: var(--surface-2);
        --evidence-chip-border: var(--border);
        --control-bg: var(--surface-2);
        --badge-danger-bg: color-mix(
            in srgb,
            var(--dig-red) 15%,
            var(--surface)
        );
        --badge-danger-border: color-mix(
            in srgb,
            var(--dig-red) 40%,
            var(--surface)
        );
        --badge-danger-text: #fca5a5;
        --badge-success-bg: color-mix(in srgb, var(--dig-green) 15%, var(--surface));
        --badge-success-border: color-mix(in srgb, var(--dig-green) 35%, var(--surface));
        --badge-success-text: #86efac;
        --badge-warn-bg: color-mix(in srgb, var(--dig-amber) 15%, var(--surface));
        --badge-warn-border: color-mix(in srgb, var(--dig-amber) 35%, var(--surface));
        --badge-warn-text: #fcd34d;

        --dig-bg: var(--bg);
        --dig-surface-0: var(--bg);
        --dig-surface-1: var(--surface);
        --dig-surface-2: var(--surface-2);
        --dig-border: var(--border);
        --dig-text: var(--text);
        --dig-muted: var(--text-muted);
        --dig-subtle: var(--heading);
        --dig-ink: var(--dig-text);
        --dig-panel: var(--surface);
        --dig-line: var(--dig-border);
        --dig-brand-soft: color-mix(
            in srgb,
            var(--dig-electric) 22%,
            var(--surface)
        );
        --dig-info-soft: color-mix(
            in srgb,
            var(--dig-navy-700) 35%,
            var(--surface)
        );
        --dig-accent-soft: color-mix(
            in srgb,
            var(--dig-brand-red) 18%,
            var(--surface)
        );
        --dig-link: var(--link);
        --dig-focus: var(--focus-ring);
        --dig-focus-ring: var(--focus-ring);
    }
}

html.theme-light {
    color-scheme: light;
}

html.theme-dark {
    color-scheme: dark;
    --dig-surface-base: #0a1628;
    --bg: #0a1628;
    --surface: #11203a;
    --surface-2: #172a48;
    --border: color-mix(in srgb, var(--dig-slate-600) 55%, #0a1628);
    --border-subtle: color-mix(in srgb, var(--dig-slate-600) 42%, #0a1628);
    --text: #e2e8f0;
    --text-muted: #cbd5e1;
    --muted: var(--text-muted);
    --heading: #f1f5f9;
    --link: #93c5fd;
    --link-hover: #bfdbfe;
    --link-visited: #bfdbfe;
    --focus-ring: #93c5fd;
    --focus: #93c5fd;
    --shadow: 0 10px 28px rgba(1, 8, 21, 0.55);
    --input-bg: var(--surface-2);
    --input-placeholder: color-mix(
        in srgb,
        var(--text-muted) 82%,
        var(--surface)
    );

    --chip-bg: var(--surface-2);
    --chip-text: var(--text);
    --chip-border: var(--border);
    --disabled-bg: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
    --disabled-text: color-mix(in srgb, var(--text-muted) 76%, var(--surface));
    --disabled-border: var(--border-subtle);
    --evidence-chip-bg: var(--surface-2);
    --evidence-chip-border: var(--border);
    --control-bg: var(--surface-2);
    --badge-danger-bg: color-mix(in srgb, var(--dig-red) 15%, var(--surface));
    --badge-danger-border: color-mix(
        in srgb,
        var(--dig-red) 40%,
        var(--surface)
    );
    --badge-danger-text: #fca5a5;
    --badge-success-bg: color-mix(in srgb, var(--dig-green) 15%, var(--surface));
    --badge-success-border: color-mix(in srgb, var(--dig-green) 35%, var(--surface));
    --badge-success-text: #86efac;
    --badge-warn-bg: color-mix(in srgb, var(--dig-amber) 15%, var(--surface));
    --badge-warn-border: color-mix(in srgb, var(--dig-amber) 35%, var(--surface));
    --badge-warn-text: #fcd34d;

    --dig-bg: var(--bg);
    --dig-surface-0: var(--bg);
    --dig-surface-1: var(--surface);
    --dig-surface-2: var(--surface-2);
    --dig-border: var(--border);
    --dig-text: var(--text);
    --dig-muted: var(--text-muted);
    --dig-subtle: var(--heading);
    --dig-ink: var(--dig-text);
    --dig-panel: var(--surface);
    --dig-line: var(--dig-border);
    --dig-brand-soft: color-mix(
        in srgb,
        var(--dig-electric) 22%,
        var(--surface)
    );
    --dig-info-soft: color-mix(
        in srgb,
        var(--dig-navy-700) 35%,
        var(--surface)
    );
    --dig-accent-soft: color-mix(
        in srgb,
        var(--dig-brand-red) 18%,
        var(--surface)
    );
    --dig-link: var(--link);
    --dig-focus: var(--focus-ring);
    --dig-focus-ring: var(--focus-ring);
}

html[data-text-scale="100"] {
    font-size: 100%;
}

html[data-text-scale="112.5"] {
    font-size: 112.5%;
}

html[data-text-scale="125"] {
    font-size: 125%;
}

html[data-contrast="high"] {
    --dig-border: color-mix(in srgb, var(--dig-text) 46%, var(--dig-bg));
    --dig-muted: var(--dig-text);
    --dig-focus-ring: var(--dig-link);
    --input-placeholder: color-mix(in srgb, var(--dig-text) 75%, var(--dig-bg));
}

html {
    overflow-x: hidden;
}

body {
    background: var(--dig-bg);
    color: var(--dig-ink);
}

a,
.ui-link,
.dig-text-link,
.dig-back-link,
.dig-clickable-row__link {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 0.08em;
}

a:hover,
.ui-link:hover,
.dig-text-link:hover,
.dig-back-link:hover,
.dig-clickable-row__link:hover {
    color: var(--link-hover);
    text-decoration-thickness: 0.12em;
}

.dig-page-header {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dig-page-title {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading);
}

.dig-lead {
    margin: 0 0 14px;
    color: var(--dig-muted);
}

.dig-surface {
    padding: 20px;
    border: 1px solid var(--dig-line);
    border-radius: 12px;
    background: var(--dig-panel);
}

.dig-patterns-shell {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.dig-card-link {
    color: inherit;
    text-decoration: none;
}

.dig-card-link:focus-visible {
    outline: 2px solid var(--dig-brand);
    outline-offset: 2px;
    border-radius: 3px;
}

.dig-back-link {
    color: var(--dig-brand);
    font-weight: 600;
    text-decoration: none;
}

.dig-back-link:hover,
.dig-back-link:focus-visible {
    text-decoration: underline;
}

.dig-chip--mono {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.dig-chip--button {
    cursor: pointer;
    background: var(--dig-surface-1);
}

.dig-chip--button:focus-visible {
    outline: 2px solid var(--dig-brand);
    outline-offset: 2px;
}

.dig-copy-status {
    font-size: 0.8rem;
    color: var(--dig-muted);
    min-height: 1.1rem;
    align-self: center;
}

.dig-text-primary {
    color: var(--dig-text-primary);
}

.dig-text-muted {
    color: var(--dig-text-muted);
}

.dig-surface-card {
    background: var(--dig-surface-card);
    border: 1px solid var(--dig-divider);
}

.dig-surface-inset {
    background: var(--dig-surface-inset);
    border: 1px solid var(--dig-divider);
}

.dig-pattern-section {
    margin-top: 20px;
}

.dig-two-col {
    display: grid;
    gap: 14px;
}

.dig-mini-title {
    margin: 0 0 8px;
    font-size: 0.92rem;
}

.dig-code-block {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--dig-line);
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.8rem;
    line-height: 1.45;
    overflow-x: auto;
}

.dig-disclosure {
    border: 1px solid var(--dig-line);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--dig-surface-2);
}

.dig-disclosure > summary {
    cursor: pointer;
    color: var(--dig-brand);
    font-weight: 600;
}

.dig-disclosure > summary:focus-visible {
    outline: 2px solid var(--dig-brand);
    outline-offset: 2px;
}

.dig-pattern-demo-note {
    margin-top: 12px;
}

.dig-pattern-demo-title {
    font-size: 0.85rem;
    color: var(--dig-text);
}

.dig-pattern-demo-links {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--dig-muted);
}

.dig-pattern-demo-copy {
    margin: 0;
    font-size: 0.85rem;
}

.dig-pattern-demo-input {
    max-width: 240px;
}

.dig-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.dig-chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-2);
    font-size: 11px;
    color: var(--dig-muted);
    text-decoration: none;
}

.dig-chip--info {
    background: var(--dig-info-soft);
    border-color: #a5f3fc;
    color: var(--dig-info);
}

.dig-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dig-card {
    display: block;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}

.dig-card--game {
    padding: clamp(14px, 2vw, 20px);
    min-height: 280px;
    background: var(--surface);
}

.dig-card--game .dig-game__title {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--text);
}

.dig-card--game .dig-game__status,
.dig-card--game .dig-game__hint {
    color: var(--muted, var(--text-muted));
}

.dig-game-grid {
    margin-top: 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.dig-game {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: grid;
    gap: 12px;
}

.dig-game__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.dig-game__viewport {
    position: relative;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #0b1220, #111827);
    min-height: 220px;
    max-width: 100%;
    overflow: hidden;
    touch-action: none;
}

.bgame__ship {
    position: absolute;
    bottom: 10px;
    width: 34px;
    height: 18px;
    background: #22d3ee;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bgame__inv {
    position: absolute;
    width: 58px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.35);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}
.bgame__inv--0 {
    background: #fecaca;
}
.bgame__inv--1 {
    background: #fde68a;
}
.bgame__inv--2 {
    background: #bbf7d0;
}
.bgame__inv--3 {
    background: #bfdbfe;
}
.bgame__inv--4 {
    background: #e9d5ff;
}
.bgame__shot {
    position: absolute;
    width: 4px;
    height: 10px;
    background: #fde047;
    border-radius: 2px;
}
.bgame__snake {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #34d399;
}
.bgame__food {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f97316;
}

.bgame__frogger {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #22c55e;
}

.bgame__car {
    position: absolute;
    border-radius: 4px;
    background: #f87171;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.bgame__paddle {
    position: absolute;
    height: 8px;
    border-radius: 999px;
    background: #93c5fd;
}

.bgame__ball {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fef08a;
}

.bgame__brick {
    position: absolute;
    border-radius: 4px;
    background: #a78bfa;
}

.bgame__runner {
    position: absolute;
    width: 14px;
    height: 16px;
    border-radius: 3px;
    background: #34d399;
}

.bgame__obstacle {
    position: absolute;
    border-radius: 3px;
    background: #fb7185;
}

.dig-game__viewport > canvas,
.dig-game__viewport > iframe,
.dig-game__viewport > img {
    max-width: 100%;
    height: auto;
}

.dig-game__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
}

.dig-game__btn:active,
.dig-game__btn.is-active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--surface-2) 60%, var(--dig-electric));
}

.dig-game__btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.dig-game__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dig-game__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.45);
    padding: 8px;
    text-align: center;
}

.dig-error-panel {
    background: var(--surface);
    color: var(--text);
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.dig-error-panel__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--text);
}

.dig-error-panel__copy {
    margin: 0;
    color: var(--muted);
}

.dig-error-panel__links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dig-error-panel__action {
    min-width: 160px;
    justify-content: center;
    text-decoration: none;
}

.dig-error-page {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: clamp(22rem, 60vh, 30rem);
}

@media (max-width: 640px) {
    .dig-error-page {
        min-height: auto;
    }

    .dig-error-panel__action {
        width: 100%;
    }
}

.dig-card:hover,
.dig-card:focus-visible {
    border-color: color-mix(in srgb, var(--dig-border) 84%, var(--dig-primary));
}

.dig-card--primary {
    border-color: var(--dig-border);
    background: var(--dig-panel);
    color: var(--dig-text);
    font-weight: 700;
}

.dig-meta {
    margin: 0 0 8px;
    color: var(--dig-muted);
}

.dig-subtitle {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.25;
}

.dig-stack > * + * {
    margin-top: 8px;
}

.dig-list {
    margin: 0;
    padding-left: 18px;
}

.dig-list li + li {
    margin-top: 6px;
}

.dig-pattern-demo {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dig-line);
}

.ui-object-console {
    border: 1px solid var(--dig-line);
    border-radius: 12px;
    background: var(--dig-panel);
}

.ui-object-console__header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dig-line);
}

.ui-object-console__title {
    margin: 0;
    font-size: 1rem;
}

.ui-object-console__subtitle {
    margin: 4px 0 0;
    color: var(--dig-muted);
}

.ui-object-console__grid {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.ui-object-console__primary,
.ui-object-console__timeline {
    min-width: 0;
}

@media (min-width: 900px) {
    .ui-object-console__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.ui-command-palette {
    border: 1px solid var(--dig-line);
    border-radius: 12px;
    background: var(--dig-panel);
    padding: 12px;
}

.ui-command-palette__title {
    margin: 0 0 8px;
    font-size: 1rem;
}

.ui-command-palette__label {
    display: block;
    font-size: 0.85rem;
    color: var(--dig-muted);
    margin-bottom: 6px;
}

.ui-command-palette__input {
    width: 100%;
    border: 1px solid var(--dig-line);
    border-radius: 10px;
    padding: 9px 10px;
    background: var(--control-bg);
    color: var(--dig-ink);
}

.ui-command-palette__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--dig-line);
    border-radius: 10px;
    overflow: hidden;
}

.ui-command-palette__item {
    padding: 8px 10px;
    background: var(--dig-surface-1);
}

.ui-command-palette__item + .ui-command-palette__item {
    border-top: 1px solid var(--dig-line);
}

.ui-command-palette__item[aria-selected="true"] {
    background: var(--dig-brand-soft);
}

.ui-command-palette__hint {
    margin: 8px 0 0;
    color: var(--dig-muted);
    font-size: 0.85rem;
}

/* -------------------------------------------------------
   Liquid Glass Design System
   Frosted translucent surfaces with depth and high contrast.
   Uses backdrop-filter for blur/saturation with solid fallbacks.
   ------------------------------------------------------- */

/* -- Shared tokens -- */
:root {
    --lg-blur: 8px;
    --lg-saturate: 130%;
    --lg-radius: 10px;
    --lg-border-alpha: 0.42;
    --lg-shadow-alpha: 0.18;
    --lg-inset-alpha: 0.2;
    --lg-transition:
        background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

/* -- Base button -- */
.dig-liquid-glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--lg-radius);
    cursor: pointer;
    background: linear-gradient(
        180deg,
        rgba(71, 85, 105, 0.82) 0%,
        rgba(51, 65, 85, 0.82) 100%
    );
    border: 1px solid rgba(148, 163, 184, var(--lg-border-alpha));
    color: #f8fafc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, var(--lg-inset-alpha)),
        0 6px 18px rgba(15, 23, 42, var(--lg-shadow-alpha));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    transition: var(--lg-transition);
    min-height: 44px;
    min-width: 44px;
}

/* Hover */
.dig-liquid-glass-btn:hover:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(51, 65, 85, 0.9) 0%,
        rgba(30, 41, 59, 0.9) 100%
    );
    border-color: rgba(148, 163, 184, 0.52);
    color: #ffffff;
}

/* Active / pressed — depressed feel */
.dig-liquid-glass-btn:active:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(30, 41, 59, 0.94) 0%,
        rgba(15, 23, 42, 0.94) 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Focus-visible — a11y requirement */
.dig-liquid-glass-btn:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

/* Disabled */
.dig-liquid-glass-btn[disabled] {
    opacity: 1;
    cursor: not-allowed;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.6);
    background: linear-gradient(
        180deg,
        rgba(71, 85, 105, 0.5) 0%,
        rgba(51, 65, 85, 0.5) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Subtle hover scale — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .dig-liquid-glass-btn:hover:not([disabled]) {
        transform: translateY(-1px);
    }
    .dig-liquid-glass-btn:active:not([disabled]) {
        transform: translateY(0);
    }
}

/* -- Size variants -- */
.dig-liquid-glass-btn--sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.dig-liquid-glass-btn--lg {
    padding: 14px 28px;
    font-size: 1.05rem;
    border-radius: 12px;
}

.dig-liquid-glass-btn--icon {
    padding: 8px;
    border-radius: 8px;
    aspect-ratio: 1;
}

/* -- Color variants -- */

/* Secondary — lighter, less opaque companion */
.dig-liquid-glass-btn--secondary {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.35) 0%,
        rgba(100, 116, 139, 0.35) 100%
    );
    color: #1e293b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 12px rgba(15, 23, 42, 0.1);
}

.dig-liquid-glass-btn--secondary:hover:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.5) 0%,
        rgba(100, 116, 139, 0.5) 100%
    );
    color: #0f172a;
}

.dig-liquid-glass-btn--secondary:active:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(100, 116, 139, 0.6) 0%,
        rgba(71, 85, 105, 0.6) 100%
    );
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Destructive — red-tinted translucent */
.dig-liquid-glass-btn--destructive {
    background: linear-gradient(
        180deg,
        rgba(153, 27, 27, 0.82) 0%,
        rgba(127, 29, 29, 0.82) 100%
    );
    border-color: rgba(252, 165, 165, 0.42);
    color: #fef2f2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 6px 18px rgba(127, 29, 29, 0.22);
}

.dig-liquid-glass-btn--destructive:hover:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(127, 29, 29, 0.92) 0%,
        rgba(99, 19, 19, 0.92) 100%
    );
    border-color: rgba(252, 165, 165, 0.55);
}

.dig-liquid-glass-btn--destructive:active:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(99, 19, 19, 0.96) 0%,
        rgba(69, 10, 10, 0.96) 100%
    );
}

.dig-liquid-glass-btn--destructive:focus-visible {
    outline-color: #fca5a5;
}

/* Success — green-tinted translucent */
.dig-liquid-glass-btn--success {
    background: linear-gradient(
        180deg,
        rgba(22, 101, 52, 0.82) 0%,
        rgba(20, 83, 45, 0.82) 100%
    );
    border-color: rgba(134, 239, 172, 0.42);
    color: #f0fdf4;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 6px 18px rgba(20, 83, 45, 0.22);
}

.dig-liquid-glass-btn--success:hover:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(20, 83, 45, 0.92) 0%,
        rgba(5, 46, 22, 0.92) 100%
    );
    border-color: rgba(134, 239, 172, 0.55);
}

.dig-liquid-glass-btn--success:active:not([disabled]) {
    background: linear-gradient(
        180deg,
        rgba(5, 46, 22, 0.96) 0%,
        rgba(2, 32, 14, 0.96) 100%
    );
}

.dig-liquid-glass-btn--success:focus-visible {
    outline-color: #86efac;
}

/* -- Liquid Glass Card -- */
.dig-liquid-glass-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.74) 0%,
        rgba(241, 245, 249, 0.78) 100%
    );
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    color: var(--dig-ink);
}

.dig-liquid-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(248, 250, 252, 0.12) 100%
    );
}

.dig-liquid-glass-card > * {
    position: relative;
    z-index: 1;
}

.dig-liquid-glass-card strong {
    color: #0f172a;
}

.dig-liquid-glass-card p {
    color: #334155;
}

.dig-liquid-glass-card .dig-muted {
    color: #475569;
}

/* -- Liquid Glass Nav -- */
.dig-liquid-glass-nav {
    padding: 10px 16px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(248, 250, 252, 0.72) 100%
    );
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(12px) saturate(var(--lg-saturate));
    color: var(--dig-ink);
}

/* -- Liquid Glass Badge -- */
.dig-liquid-glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(71, 85, 105, 0.7) 0%,
        rgba(51, 65, 85, 0.7) 100%
    );
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #f1f5f9;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 6px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.dig-liquid-glass-badge--success {
    background: linear-gradient(
        180deg,
        rgba(22, 101, 52, 0.7) 0%,
        rgba(20, 83, 45, 0.7) 100%
    );
    border-color: rgba(134, 239, 172, 0.35);
    color: #f0fdf4;
}

.dig-liquid-glass-badge--destructive {
    background: linear-gradient(
        180deg,
        rgba(153, 27, 27, 0.7) 0%,
        rgba(127, 29, 29, 0.7) 100%
    );
    border-color: rgba(252, 165, 165, 0.35);
    color: #fef2f2;
}

/* -- Liquid Glass Input -- */
.dig-liquid-glass-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    border-radius: var(--lg-radius);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--dig-ink);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.dig-liquid-glass-input::placeholder {
    color: var(--dig-muted);
}

.dig-liquid-glass-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow:
        inset 0 1px 3px rgba(15, 23, 42, 0.06),
        0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* -- Fallback for browsers without backdrop-filter -- */
@supports not (backdrop-filter: blur(1px)) {
    .dig-liquid-glass-btn {
        background: linear-gradient(180deg, #475569 0%, #334155 100%);
    }
    .dig-liquid-glass-btn--secondary {
        background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    }
    .dig-liquid-glass-btn--destructive {
        background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
    }
    .dig-liquid-glass-btn--success {
        background: linear-gradient(180deg, #166534 0%, #14532d 100%);
    }
    .dig-liquid-glass-card {
        background: #f1f5f9;
    }
    .dig-liquid-glass-nav {
        background: #f8fafc;
    }
    .dig-liquid-glass-badge {
        background: #475569;
    }
    .dig-liquid-glass-input {
        background: #ffffff;
    }
}

/* -- Demo layout helpers (pattern library only) -- */
.dig-lg-demo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dig-lg-demo-row--buttons
    .dig-liquid-glass-btn:not(.dig-liquid-glass-btn--icon) {
    min-width: 120px;
}

.dig-lg-demo-label {
    font-size: 0.75rem;
    color: #e2e8f0;
    min-width: 82px;
    font-weight: 600;
}

.dig-lg-demo-surface {
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}

/* Dark glass card and nav inside the demo surface */
.dig-lg-demo-surface .dig-liquid-glass-card {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.6) 0%,
        rgba(30, 41, 59, 0.6) 100%
    );
    border-color: rgba(100, 116, 139, 0.35);
    color: #e2e8f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.dig-lg-demo-surface .dig-liquid-glass-nav {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.72) 0%,
        rgba(30, 41, 59, 0.72) 100%
    );
    border-bottom-color: rgba(100, 116, 139, 0.3);
    color: #e2e8f0;
}

/* -------------------------------------------------------
   Clickable Row with Actions – breakout link pattern
   The primary <a> expands its hit area over the row via
   ::before. Secondary buttons sit above the overlay.
   No interactive elements are nested inside each other.
   ------------------------------------------------------- */

.dig-clickable-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dig-clickable-row {
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 64px;
    border: 1px solid var(--dig-line);
    border-radius: 10px;
    background: var(--dig-panel);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.dig-clickable-list > .dig-clickable-row + .dig-clickable-row {
    margin-top: 6px;
}

/* Hover affordance for pointer users */
.dig-clickable-row:hover {
    border-color: color-mix(in srgb, var(--dig-border) 70%, var(--dig-primary));
}

/* Container focus ring when any child control is focused */
.dig-clickable-row:focus-within {
    border-color: var(--dig-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 45%, transparent);
}

/* Leading visual */
.dig-clickable-row__visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Body: title link + meta */
.dig-clickable-row__body {
    flex: 1;
    flex-basis: calc(100% - 52px - 12px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Primary link – breakout technique */
.dig-clickable-row__link {
    color: var(--dig-brand);
    font-weight: 600;
    text-decoration: none;
    outline: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dig-clickable-row__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.dig-clickable-row__link:focus-visible {
    text-decoration: underline;
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.dig-clickable-row__link:hover {
    text-decoration: underline;
}

/* Meta text */
.dig-clickable-row__meta {
    font-size: 0.85rem;
    color: var(--dig-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Actions container – elevated above the breakout overlay */
.dig-clickable-row__actions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
}

/* Secondary action buttons */
.dig-clickable-row__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 11px;
    border: 1px solid var(--dig-line);
    border-radius: 6px;
    background: var(--dig-panel);
    color: var(--dig-ink);
    font-size: 0.8rem;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}

.dig-clickable-row__btn:hover {
    border-color: color-mix(in srgb, var(--dig-border) 78%, var(--dig-primary));
    background: var(--dig-surface-2);
}

.dig-clickable-row__btn:active {
    background: color-mix(in srgb, var(--dig-surface-2) 82%, var(--dig-border));
}

.dig-clickable-row__btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .dig-clickable-row {
        flex-wrap: nowrap;
    }

    .dig-clickable-row__body {
        flex-basis: auto;
    }

    .dig-clickable-row__actions {
        width: auto;
    }
}

@media (prefers-contrast: more) {
    .dig-liquid-glass-card {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(241, 245, 249, 0.9) 100%
        );
    }

    .dig-liquid-glass-card p,
    .dig-liquid-glass-card .dig-muted {
        color: #1e293b;
    }
}

@media (min-width: 768px) {
    .dig-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ui-skip-link {
    position: absolute;
    left: 0.75rem;
    top: -6rem;
    z-index: 1000;
    background: #ffffff;
    color: #111111;
    border: 2px solid #111111;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    text-decoration: underline;
}

.ui-utility-bar {
    border-bottom: 1px solid var(--dig-border);
    background: var(--dig-surface-1);
}

.ui-utility-bar__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.ui-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.ui-text-scale__button:focus-visible,
.ui-contrast-toggle:focus-visible,
.ui-a11y-tools__summary:focus-visible,
.ui-header-icon-btn:focus-visible,
.ui-header-signin-btn:focus-visible,
.ui-header-auth-chip:focus-visible,
.ui-header-icon-btn:focus {
    outline: 3px solid var(--dig-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dig-surface-1) 70%, transparent);
}

.ui-a11y-tools {
    position: relative;
}

.ui-a11y-tools__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
    min-width: 44px;
}

.ui-a11y-tools__summary::-webkit-details-marker {
    display: none;
}

.ui-a11y-tools__toggle {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ui-a11y-tools__panel {
    display: flex;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--dig-border);
    border-radius: 10px;
    background: var(--dig-surface-1);
    box-shadow: var(--dig-shadow-1);
}

.ui-a11y-tools__panel[hidden] {
    display: none;
}

.ui-text-scale {
    display: inline-flex;
    border: 1px solid var(--dig-border);
    border-radius: 10px;
    overflow: hidden;
}

.ui-text-scale__button,
.ui-contrast-toggle,
.ui-a11y-tools__summary {
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--dig-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    background: var(--dig-surface-1);
    color: var(--dig-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
}

.ui-text-scale__button {
    border: 0;
    border-right: 1px solid var(--dig-border);
    min-width: 44px;
}

.ui-text-scale__button:last-child {
    border-right: 0;
}

.ui-text-scale__button[aria-pressed="true"],
.ui-contrast-toggle[aria-checked="true"] {
    background: var(--dig-surface-2);
    color: var(--dig-text);
}

.ui-text-scale__button:hover,
.ui-contrast-toggle:hover,
.ui-a11y-tools__summary:hover,
.ui-header-icon-btn:hover,
.ui-header-signin-btn:hover,
.ui-header-auth-chip:hover {
    background: var(--dig-surface-2);
}

.ui-header-icon-btn,
.ui-header-signin-btn,
.ui-header-auth-chip {
    min-height: 44px;
    border: 1px solid var(--dig-border);
    border-radius: 999px;
    background: var(--dig-surface-1);
    color: var(--dig-text);
    text-decoration: none;
    font: inherit;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--dig-border) 45%, transparent);
    transition:
        background-color 0.14s ease,
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.08s ease;
}

.ui-header-icon-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ui-header-icon-btn svg {
    width: 18px;
    height: 18px;
}

.ui-header-icon-btn[aria-expanded="true"],
.ui-header-icon-btn[aria-pressed="true"] {
    background: var(--dig-surface-2);
    border-color: color-mix(in srgb, var(--dig-border) 70%, var(--dig-link));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dig-link) 20%, transparent);
}

.ui-header-icon-btn:active,
.ui-header-signin-btn:active,
.ui-header-auth-chip:active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--dig-surface-2) 80%, var(--dig-border));
    border-color: color-mix(in srgb, var(--dig-border) 78%, var(--dig-link));
}

.ui-header-icon-btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    padding: 0 4px;
    font-size: 0.625rem;
    line-height: 14px;
    background: var(--dig-surface-2);
    color: var(--dig-text);
    border: 1px solid var(--dig-border);
}

.ui-header-signin-btn {
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.ui-header-auth-chip {
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .ui-header-controls {
        width: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .ui-header-auth-chip {
        padding-inline: 0.55rem;
    }
}

@media (max-width: 460px) {
    .ui-header-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 8px;
        min-width: 0;
    }
}

.ui-skip-link:focus,
.ui-skip-link:focus-visible {
    top: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: auto;
    overflow: visible;
}

/* DIG design language v1.1 normalization */
body {
    font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji";
    background: var(--dig-bg);
    color: var(--dig-text);
}

p,
li,
.dig-lead,
.ui-note,
.ui-mini,
.ui-page-header__subtitle {
    font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji";
    color: var(--dig-muted);
}

.dig-surface,
.dig-card,
.ui-record-card,
.ui-tile,
.ui-toast,
.ui-help,
.ui-empty,
.ui-command-palette,
.ui-object-console,
.dig-clickable-row {
    background: var(--dig-surface-1);
    border-color: var(--dig-border);
    box-shadow: var(--dig-shadow-1);
}

.dig-card--primary {
    background: var(--dig-surface-1);
    color: var(--dig-text);
    border-color: var(--dig-border);
    box-shadow: var(--dig-shadow-2);
}

.dig-chip,
.ui-badge-status,
.ui-badge {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--dig-surface-2);
    color: var(--dig-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.ui-badge-status--failed,
.ui-badge--danger,
.ui-toast--danger {
    border-color: var(--badge-danger-border);
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

.ui-badge-status--pending,
.ui-badge-status--active,
.ui-badge-status--paid,
.ui-badge--success,
.ui-toast--success {
    border-color: var(--badge-success-border);
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}

.ui-badge-status--lapsed,
.ui-badge--warn,
.ui-toast--warn {
    border-color: var(--badge-warn-border);
    background: var(--badge-warn-bg);
    color: var(--badge-warn-text);
}

.dig-liquid-glass-btn,
.ui-button,
.ui-button--primary,
.dig-liquid-glass-btn--primary,
.dig-liquid-glass-btn--destructive,
.dig-liquid-glass-btn--success {
    background: var(--dig-primary);
    color: var(--dig-primary-text);
    border: 1px solid var(--accent-hover);
    text-shadow: none;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dig-liquid-glass-btn--destructive {
    background: var(--dig-danger);
    border-color: #b91c1c;
}

.dig-liquid-glass-btn--secondary,
.ui-button--secondary,
.dig-clickable-row__btn {
    background: var(--dig-surface-1);
    color: var(--dig-text);
    border: 1px solid var(--dig-border);
    box-shadow: none;
}

.dig-liquid-glass-btn:hover:not([disabled]),
.ui-button:hover,
.ui-button--primary:hover,
.dig-liquid-glass-btn--primary:hover:not([disabled]) {
    background: var(--accent-hover);
}

.dig-liquid-glass-btn:active:not([disabled]),
.ui-button:active,
.ui-button--primary:active,
.dig-liquid-glass-btn--primary:active:not([disabled]) {
    background: var(--accent-pressed);
}

.dig-liquid-glass-btn--destructive:hover:not([disabled]) {
    background: #b91c1c;
}

.dig-liquid-glass-btn--secondary:hover:not([disabled]),
.ui-button--secondary:hover,
.dig-clickable-row__btn:hover,
.dig-clickable-row:hover,
.dig-card:hover {
    background: var(--dig-surface-2);
    border-color: var(--dig-border);
}

.dig-liquid-glass-btn[disabled],
.ui-button[disabled] {
    background: color-mix(
        in srgb,
        var(--dig-surface-2) 75%,
        var(--dig-surface-1)
    );
    color: color-mix(in srgb, var(--dig-muted) 76%, var(--dig-surface-1));
    border-color: var(--border-subtle);
    box-shadow: none;
}

a,
.ui-link,
.dig-back-link,
.dig-clickable-row__link {
    color: var(--dig-link);
}

a:visited,
.ui-link:visited,
.dig-back-link:visited,
.dig-clickable-row__link:visited {
    color: var(--link-visited);
}

*:focus-visible {
    outline: 3px solid var(--dig-focus-ring);
    outline-offset: 2px;
}

.ui-topnav {
    background: var(--dig-surface-1);
    border-bottom-color: var(--dig-border);
    backdrop-filter: none;
}

.dig-footer-meta {
    color: var(--dig-muted);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid var(--dig-border);
    padding-top: 16px;
}

/* Portal app-style subpage navigation */
.ui-topnav .portal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.ui-topnav .portal-nav-item {
    margin: 0;
}

.ui-topnav .portal-nav-link,
.ui-topnav .portal-nav-link:visited {
    color: var(--text);
    text-decoration: none;
}

.ui-topnav .ui-topnav__brandlink.portal-nav-link {
    color: var(--text);
    font-weight: 800;
}

.ui-topnav .portal-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ui-topnav .portal-nav-brand__logo {
    display: block;
}

.ui-topnav .portal-nav-brand__text {
    font-size: 1.06rem;
}

.ui-topnav .ui-topnav__links {
    gap: 8px;
}

.ui-topnav .ui-topnav__link.portal-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--text);
    background: transparent;
    font-weight: 500;
    line-height: 1.2;
    opacity: 1;
}

.ui-topnav .ui-topnav__link.portal-nav-link:hover {
    background: var(--dig-surface-2);
    border-color: var(--dig-border);
}

.ui-topnav .ui-topnav__link.portal-nav-link:focus-visible,
.ui-topnav .ui-topnav__brandlink.portal-nav-link:focus-visible,
.ui-topnav .ui-topnav__toggle:focus-visible {
    outline: 3px solid var(--dig-focus-ring);
    outline-offset: 2px;
}

.ui-topnav .ui-topnav__link.portal-nav-active,
.ui-topnav .ui-topnav__link.portal-nav-active:visited {
    background: var(--dig-navy-700);
    border-color: var(--dig-navy-700);
    color: var(--dig-white);
    font-weight: 600;
}

.ui-topnav .ui-topnav__link.portal-nav-active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dig-primary) 75%, var(--dig-navy-900));
}

.ui-topnav .ui-topnav__link.portal-nav-link:active {
    background: var(--dig-surface-2);
}

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

/* DIG Pattern Library v1.1 tokenized controls */
:root {
    --dig-ink: var(--dig-text);
    --dig-body: var(--dig-muted);
}

.ui-label,
.ui-note,
.ui-mini,
.ui-page-header__subtitle {
    color: var(--dig-body);
    opacity: 1;
}

.ui-input,
.ui-textarea,
.ui-select,
.dig-liquid-glass-input {
    background: var(--input-bg);
    color: var(--dig-text);
    border-color: var(--dig-border);
}

.ui-input::placeholder,
.ui-textarea::placeholder,
.dig-liquid-glass-input::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.ui-input:focus-visible,
.ui-textarea:focus-visible,
.ui-select:focus-visible,
.dig-liquid-glass-input:focus-visible {
    outline: 3px solid var(--dig-focus-ring);
    outline-offset: 2px;
}

.ui-footer {
    opacity: 1;
    color: var(--dig-muted);
}

a,
.ui-link,
.dig-text-link,
.dig-back-link,
.dig-clickable-row__link {
    color: var(--dig-link);
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 1px;
}

a:visited,
.ui-link:visited,
.dig-text-link:visited,
.dig-back-link:visited,
.dig-clickable-row__link:visited {
    color: var(--link-visited);
}

a:hover,
.ui-link:hover,
.dig-text-link:hover,
.dig-back-link:hover,
.dig-clickable-row__link:hover {
    text-decoration-thickness: 2px;
}

a:focus-visible,
.ui-link:focus-visible,
.dig-text-link:focus-visible,
.dig-back-link:focus-visible,
.dig-clickable-row__link:focus-visible,
.ui-topnav__link:focus-visible,
.ui-topnav__brandlink:focus-visible,
.ui-topnav__toggle:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--dig-focus);
    outline-offset: 2px;
}

.ui-topnav .portal-nav-link,
.ui-topnav .portal-nav-link:visited,
.ui-topnav .ui-topnav__brandlink.portal-nav-link {
    color: var(--dig-ink);
    text-decoration: none;
}

.ui-topnav .ui-topnav__link.portal-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-weight: 550;
    line-height: 1.15;
}

.ui-topnav .ui-topnav__link.portal-nav-link:hover {
    background: var(--dig-surface-2);
    border-color: var(--dig-border);
}

.ui-topnav .ui-topnav__link.portal-nav-link:active {
    background: color-mix(in srgb, var(--dig-surface-2) 82%, var(--dig-border));
    border-color: color-mix(in srgb, var(--dig-border) 78%, var(--dig-link));
    transform: translateY(1px);
}

.ui-topnav .ui-topnav__link.portal-nav-active,
.ui-topnav .ui-topnav__link.portal-nav-active:visited {
    background: var(--dig-navy-700);
    border-color: var(--dig-navy-700);
    color: var(--dig-white);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dig-electric) 25%, transparent);
}

.ui-topnav .ui-topnav__link.portal-nav-active::before {
    display: none;
}

@media (max-width: 1023px) {
    .ui-topnav .ui-topnav__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ui-topnav .ui-topnav__links.portal-nav-list {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 4px;
        padding-top: 8px;
        padding-bottom: 4px;
    }

    .ui-topnav .ui-topnav__links.portal-nav-list.ui-topnav__links--open {
        display: flex;
    }

    .ui-topnav .portal-nav-item,
    .ui-topnav .ui-topnav__link.portal-nav-link {
        flex: 0 0 auto;
        border-radius: 10px;
        justify-content: flex-start;
        white-space: normal;
    }
}

.ui-button,
.dig-btn,
.dig-liquid-glass-btn,
.dig-clickable-row__btn,
.ui-topnav__toggle {
    min-height: 44px;
    border-radius: 10px;
}

.ui-button,
.dig-btn,
.ui-button--primary,
.dig-btn--primary,
.dig-liquid-glass-btn {
    background: var(--dig-btn-primary);
    color: var(--dig-white);
    border: 1px solid var(--dig-btn-primary);
}

.ui-button--cta,
.dig-btn--cta,
.dig-liquid-glass-btn--secondary {
    background: var(--dig-btn-cta);
    color: var(--dig-white);
    border: 1px solid var(--dig-btn-cta);
}

.ui-button--danger,
.dig-btn--danger,
.dig-liquid-glass-btn--destructive,
.dig-liquid-glass-btn--success {
    background: var(--dig-btn-danger);
    color: var(--dig-white);
    border: 1px solid var(--dig-btn-danger);
}

.ui-button:hover,
.dig-btn:hover,
.dig-liquid-glass-btn:hover,
.dig-clickable-row__btn:hover {
    filter: brightness(0.94);
}

.ui-button:active,
.dig-btn:active,
.dig-liquid-glass-btn:active,
.dig-clickable-row__btn:active {
    filter: brightness(0.86);
}

.ui-button[disabled],
.dig-btn[disabled],
.dig-liquid-glass-btn[disabled] {
    filter: none;
    opacity: 1;
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: var(--disabled-border);
    cursor: not-allowed;
}

.dig-card,
.ui-record-card {
    border-color: var(--dig-border);
}

.dig-card:hover,
.dig-card:focus-visible {
    border-color: color-mix(
        in srgb,
        var(--dig-electric) 45%,
        var(--dig-border)
    );
}

.dig-subtitle,
.ui-record-card__title,
.ui-page-header__title,
.dig-page-title,
.dig-mini-title {
    color: var(--dig-ink);
}

.dig-card-link {
    color: var(--dig-ink);
    text-decoration: none;
}

.dig-card-link:hover,
.dig-card-link:focus-visible {
    color: var(--dig-link);
    text-decoration: underline;
}

.dig-chip,
.ui-badge-status,
.ui-badge,
.dig-liquid-glass-badge {
    background: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--chip-text);
    box-shadow: none;
}

.ui-badge-status--failed,
.ui-badge--danger,
.ui-toast--danger {
    background: var(--badge-danger-bg);
    border-color: var(--badge-danger-border);
    color: var(--badge-danger-text);
}

.ui-badge-status--pending,
.ui-badge-status--active,
.ui-badge-status--paid,
.ui-badge-status--lapsed,
.ui-badge--success,
.ui-badge--warn,
.ui-toast--success,
.ui-toast--warn {
    background: var(--badge-success-bg);
    border-color: var(--badge-success-border);
    color: var(--badge-success-text);
}

.ui-toast,
.ui-toast__badge {
    border-color: var(--chip-border);
    background: var(--dig-surface-1);
    color: var(--dig-ink);
}

.ui-tabset__tab {
    min-height: 44px;
    color: var(--dig-ink);
}

.ui-tabset__tab.is-active,
.ui-tabset__tab[aria-selected="true"] {
    background: var(--dig-navy-700);
    color: var(--dig-white);
    border-color: var(--dig-navy-700);
}

.dig-clickable-row:focus-within {
    border-color: var(--dig-link);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dig-link) 25%, transparent);
}

.dig-design-tokens {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dig-token {
    border: 1px solid var(--dig-border);
    border-radius: 12px;
    background: var(--dig-surface-1);
    overflow: hidden;
}

.dig-token__swatch {
    height: 48px;
}

.dig-token__label {
    margin: 0;
    padding: 8px 10px;
    color: var(--dig-ink);
    font-size: 0.82rem;
}

.dig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    text-decoration: none;
    font-weight: 600;
}

.dig-clickable-row__btn {
    background: var(--dig-surface-1);
    color: var(--dig-ink);
    border-color: var(--dig-border);
    filter: none;
}

.dig-clickable-row__btn:hover,
.dig-clickable-row__btn:active {
    background: var(--dig-surface-2);
    border-color: var(--dig-border);
}

.dig-code-block {
    background: var(--dig-navy-900);
    color: var(--dig-white);
}

.dig-disclosure {
    background: var(--dig-surface-2);
}

.ui-skip-link {
    background: var(--dig-surface-1);
    color: var(--dig-ink);
    border-color: var(--dig-ink);
}

.dig-lg-demo-surface,
.dig-lg-demo-surface .dig-liquid-glass-card,
.dig-lg-demo-surface .dig-liquid-glass-nav {
    background: color-mix(in srgb, var(--dig-navy-900) 92%, var(--dig-white));
    border-color: color-mix(
        in srgb,
        var(--dig-slate-600) 35%,
        var(--dig-navy-900)
    );
    color: var(--dig-white);
}

.dig-lg-demo-label,
.dig-lg-demo-surface .dig-meta,
.dig-lg-demo-surface p,
.dig-lg-demo-surface strong {
    color: var(--dig-white);
}

.dig-liquid-glass-input {
    background: var(--control-bg);
    border-color: var(--dig-border);
}

.dig-liquid-glass-input:focus {
    border-color: var(--dig-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dig-focus) 20%, transparent);
}

.dig-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.dig-status-badge--active {
    background: var(--badge-success-bg);
    border: 1px solid var(--badge-success-border);
    color: var(--badge-success-text);
}

.dig-status-badge--lapsed {
    background: var(--badge-warn-bg);
    border: 1px solid var(--badge-warn-border);
    color: var(--badge-warn-text);
}

.dig-status-badge--pending {
    background: var(--badge-success-bg);
    border: 1px solid var(--badge-success-border);
    color: var(--badge-success-text);
}

.dig-status-badge--unknown {
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    color: var(--chip-text);
}

.dig-copy-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.dig-copy-field__value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dig-copy-field__button {
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
}

.dig-copy-field__feedback {
    flex-basis: 100%;
    font-size: 0.875rem;
    color: var(--dig-text-muted);
}

/* Evidence footer chips — replaces Tailwind bg-white/70 */
.evidence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--evidence-chip-border);
    background: var(--evidence-chip-bg);
    color: var(--dig-ink);
}

.evidence-chip:hover {
    background: var(--dig-surface-2);
}

/* Header density + interactive row baseline for forum and patterns */
.ui-topnav .ui-topnav__inner {
    min-height: 58px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.ui-topnav .ui-topnav__brand,
.ui-topnav .ui-topnav__links {
    align-items: center;
}

.ui-topnav .portal-nav-brand {
    min-height: 44px;
}

.ui-topnav .ui-topnav__link.portal-nav-link {
    min-height: 44px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.ui-utility-bar {
    border-top: 0;
}

.ui-utility-bar__inner {
    min-height: 40px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.ui-header-controls {
    gap: 8px;
}

.dig-clickable-row {
    position: relative;
}

.dig-clickable-row__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.dig-clickable-row__body,
.dig-clickable-row__actions {
    position: relative;
    z-index: 2;
}

.dig-clickable-row:focus-within {
    border-color: color-mix(in srgb, var(--dig-link) 58%, var(--dig-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dig-link) 22%, transparent);
}

.dig-clickable-row__stretched-link:focus-visible {
    outline: 3px solid var(--dig-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .ui-topnav .portal-nav-brand__text {
        font-size: 1rem;
    }
}