/*
 * KBox v36.86 visual consistency layer
 *
 * This file is intentionally loaded after app.css and kbox-ui-fixes.css.
 * It gives shared page furniture one final, predictable visual language while
 * leaving workflow-specific layouts and print rules in their owning files.
 */

:root {
    --kbox-heading: var(--kbox-primary);
    --kbox-space-1: .25rem;
    --kbox-space-2: .5rem;
    --kbox-space-3: .75rem;
    --kbox-space-4: 1rem;
    --kbox-space-5: 1.25rem;
    --kbox-space-6: 1.5rem;
    --kbox-space-8: 2rem;
    --kbox-control-height: 44px;
    --kbox-control-radius: 12px;
    --kbox-card-radius: 18px;
    --kbox-card-border: color-mix(in srgb, var(--kbox-primary) 10%, var(--kbox-border));
    --kbox-card-shadow: 0 5px 18px rgba(44, 25, 52, .055);
    --kbox-card-shadow-hover: 0 10px 28px rgba(44, 25, 52, .09);
}

/* v36.84: clearer shared Print and Excel toolbar icons */
.data-table-tool-button svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

@media screen {
    body {
        line-height: 1.5;
    }

    .content {
        padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.7vw, 2.25rem) 2.75rem;
    }

    /* Page and section hierarchy */
    .page-header {
        align-items: flex-start;
        gap: var(--kbox-space-6);
        margin-bottom: var(--kbox-space-6);
    }

    .page-header > div:first-child {
        min-width: 0;
    }

    .page-header h1 {
        max-width: 24ch;
        margin: 0;
        color: var(--kbox-heading);
        font-size: clamp(1.9rem, 3vw, 2.5rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.035em;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .page-header p {
        max-width: 76ch;
        margin-top: .55rem;
        color: var(--kbox-muted);
        font-size: .98rem;
        line-height: 1.55;
    }

    .page-actions {
        align-items: center;
        gap: var(--kbox-space-2);
        padding-top: .15rem;
    }

    .page-actions .button {
        margin: 0;
    }

    .breadcrumbs {
        margin-bottom: var(--kbox-space-3);
    }

    .breadcrumbs ol {
        gap: .35rem;
        font-size: .82rem;
        line-height: 1.45;
    }

    .breadcrumbs li:not(:last-child)::after {
        margin-left: .35rem;
    }

    .breadcrumbs li:last-child {
        color: var(--kbox-text);
        font-weight: 650;
    }

    :is(.section-heading, .section-heading-row, .dashboard-section-heading) {
        gap: var(--kbox-space-4);
        margin-bottom: var(--kbox-space-3);
    }

    :is(.section-heading, .section-heading-row, .dashboard-section-heading) h2 {
        color: var(--kbox-heading);
        font-size: 1.25rem;
        font-weight: 780;
        line-height: 1.2;
        letter-spacing: -.018em;
        text-wrap: balance;
    }

    :is(.section-heading, .section-heading-row, .dashboard-section-heading) p {
        max-width: 72ch;
        color: var(--kbox-muted);
        font-size: .9rem;
        line-height: 1.5;
    }

    /* Surfaces */
    .panel {
        border-color: var(--kbox-card-border);
        border-radius: var(--kbox-card-radius);
        box-shadow: var(--kbox-card-shadow);
    }

    .panel + .panel {
        margin-top: var(--kbox-space-5);
    }

    .panel > h2,
    .panel > header h2 {
        color: var(--kbox-heading);
        font-size: 1.25rem;
        font-weight: 780;
        line-height: 1.25;
        text-wrap: balance;
    }

    .panel > p:last-child {
        margin-bottom: 0;
    }

    :is(.form-section, .context-tabs, .table-wrap) {
        border-color: var(--kbox-card-border);
    }

    .form-section {
        border-radius: 15px;
        background: var(--kbox-surface);
    }

    .context-tabs {
        gap: var(--kbox-space-1);
        padding: .3rem;
        border-radius: 14px;
        background: var(--kbox-surface);
        scrollbar-width: thin;
    }

    .context-tabs a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        padding: .55rem .85rem;
        border-radius: 10px;
        font-size: .875rem;
        line-height: 1.2;
    }

    /* Forms and actions */
    .form-group {
        min-width: 0;
        margin-bottom: var(--kbox-space-4);
    }

    label,
    legend {
        color: color-mix(in srgb, var(--kbox-text) 88%, var(--kbox-muted));
        line-height: 1.35;
    }

    .form-group > input:not([type="checkbox"]):not([type="radio"]),
    .form-group > select,
    .form-group > textarea {
        min-height: var(--kbox-control-height);
        border-radius: var(--kbox-control-radius);
    }

    .help-text,
    .field-explanation,
    .form-check-help {
        margin-top: .4rem;
        color: var(--kbox-muted);
        font-size: .8rem;
        line-height: 1.45;
    }

    .form-actions {
        align-items: center;
        gap: .65rem;
        margin-top: var(--kbox-space-5);
    }

    .form-actions form,
    .page-actions form {
        margin: 0;
    }

    .button,
    .link-button {
        min-height: 40px;
        line-height: 1.2;
    }

    .button-small,
    .button-compact {
        min-height: 34px;
        padding-inline: .9rem;
    }

    /* Messages, statuses and data */
    .alert {
        padding: .85rem 1rem;
        border-radius: 13px;
        font-size: .92rem;
        line-height: 1.5;
        box-shadow: none;
    }

    .alert :is(ul, ol) {
        margin-block: .25rem 0;
        padding-left: 1.25rem;
    }

    .status-badge {
        align-items: center;
        min-height: 28px;
        padding: .25rem .6rem;
        border-radius: 999px;
        font-size: .75rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .table-wrap {
        border-radius: 15px;
        background: var(--kbox-surface);
    }

    th,
    td {
        padding: .8rem .9rem;
        line-height: 1.45;
        vertical-align: middle;
    }

    th {
        color: var(--kbox-heading);
        font-size: .73rem;
        font-weight: 800;
        letter-spacing: .04em;
    }

    tbody tr:last-child > td {
        border-bottom: 0;
    }

    .empty-state {
        padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
    }

    .empty-state h2 {
        margin-bottom: .4rem;
        color: var(--kbox-heading);
        font-size: 1.25rem;
    }

    /* Maker pages that previously needed one-off inline sizing. */
    .maker-resource-view-panel {
        width: min(900px, 100%);
    }

    .maker-resource-summary-value {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .manual-trading-check-cell {
        text-align: center;
    }

    .delivery-notes-cell {
        max-width: 180px;
    }

    /* Dashboard attention centre */
    .dashboard-priority-section .dashboard-attention-heading {
        align-items: center;
        margin-bottom: .7rem;
    }

    .dashboard-priority-section .dashboard-attention-heading > div:first-child {
        display: grid;
        gap: .12rem;
    }

    .dashboard-section-kicker {
        color: #8b5906;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .075em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .dashboard-priority-section .dashboard-attention-heading h2 {
        margin: 0;
        font-size: 1.35rem;
    }

    .dashboard-priority-section .dashboard-attention-heading p {
        margin: .12rem 0 0;
    }

    .dashboard-attention-total {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: baseline;
        gap: .3rem;
        min-height: 34px;
        padding: .38rem .75rem;
        border: 1px solid color-mix(in srgb, #c77708 25%, var(--kbox-border));
        border-radius: 999px;
        background: color-mix(in srgb, #f5c46b 16%, var(--kbox-surface));
        color: #704600;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .dashboard-attention-total strong {
        color: inherit;
        font-size: 1rem;
    }

    .dashboard-priority-section .dashboard-priority-panel {
        position: relative;
        overflow: hidden;
        padding: .7rem .7rem .7rem .9rem;
        border-left: 0;
        border-radius: var(--kbox-card-radius);
        background:
            linear-gradient(90deg, color-mix(in srgb, #f3b43d 5%, var(--kbox-surface)), var(--kbox-surface) 16rem);
    }

    .dashboard-priority-section .dashboard-priority-panel::before {
        width: 4px;
        background: linear-gradient(180deg, #dc971f, #a85f08);
    }

    .dashboard-priority-section .task-list {
        gap: .55rem;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr) auto;
        align-items: center;
        gap: .75rem;
        min-height: 72px;
        padding: .75rem .8rem;
        border: 1px solid color-mix(in srgb, var(--kbox-primary) 9%, var(--kbox-border));
        border-radius: 13px;
        background: color-mix(in srgb, var(--kbox-surface) 97%, var(--kbox-background));
        color: var(--kbox-text);
        transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task:hover,
    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task:focus-visible {
        border-color: color-mix(in srgb, var(--kbox-secondary) 28%, var(--kbox-border));
        background: var(--kbox-surface);
        box-shadow: 0 5px 14px rgba(44, 25, 52, .07);
        transform: translateY(-1px);
    }

    /* v36.75: override the older first-span rule so icon glyphs remain centred. */
    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task > .dashboard-priority-icon {
        display: grid;
        width: 2.35rem;
        height: 2.35rem;
        align-self: center;
        place-items: center;
        margin: 0;
        padding: 0;
        border-radius: 11px;
        background: color-mix(in srgb, var(--kbox-secondary) 9%, var(--kbox-surface));
        color: var(--kbox-primary);
        line-height: 1;
    }

    .dashboard-priority-section .dashboard-priority-icon .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: currentColor;
        opacity: 1;
    }

    .dashboard-priority-section .dashboard-priority-copy {
        display: block;
        min-width: 0;
        color: var(--kbox-text);
        white-space: normal;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list .dashboard-priority-copy strong {
        display: block;
        color: var(--kbox-heading);
        font-size: .92rem;
        font-weight: 780;
        line-height: 1.3;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list .dashboard-priority-copy small {
        display: block;
        margin-top: .16rem;
        color: var(--kbox-muted);
        font-size: .78rem;
        font-weight: 400;
        line-height: 1.38;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task > b {
        margin: 0;
        padding: .3rem .58rem;
        border: 1px solid color-mix(in srgb, #c77708 18%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, #f5c46b 17%, var(--kbox-surface));
        color: #744800;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
    }

    .dashboard-priority-section .dashboard-priority-task--urgent .dashboard-priority-icon {
        background: color-mix(in srgb, var(--kbox-danger) 9%, var(--kbox-surface));
        color: var(--kbox-danger);
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task--urgent > b {
        border-color: color-mix(in srgb, var(--kbox-danger) 18%, transparent);
        background: color-mix(in srgb, var(--kbox-danger) 9%, var(--kbox-surface));
        color: color-mix(in srgb, var(--kbox-danger) 86%, #5a130e);
    }

    /* One consistent focus treatment for shared interactive furniture. */
    :is(.context-tabs a, .dashboard-priority-task, .status-item):focus-visible {
        outline: 3px solid color-mix(in srgb, var(--kbox-secondary) 28%, transparent);
        outline-offset: 2px;
    }
}

@media screen and (max-width: 760px) {
    .content {
        padding: 1.35rem 1rem 2.25rem;
    }

    .page-header {
        gap: var(--kbox-space-4);
        margin-bottom: var(--kbox-space-5);
    }

    .page-header h1 {
        max-width: none;
        font-size: clamp(1.75rem, 8vw, 2.15rem);
    }

    .page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .panel {
        border-radius: 16px;
    }

    th,
    td {
        padding: .72rem .75rem;
    }
}

@media screen and (max-width: 560px) {
    .page-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-actions .button {
        width: 100%;
        min-width: 0;
    }

    .dashboard-priority-section .dashboard-attention-heading {
        align-items: flex-start;
    }

    .dashboard-attention-total {
        margin-top: .15rem;
    }

    .dashboard-priority-section .dashboard-priority-panel {
        padding: .6rem .6rem .6rem .75rem;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task {
        grid-template-columns: 2.35rem minmax(0, 1fr);
        gap: .65rem;
        min-height: 0;
        padding: .75rem;
    }

    .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task > b {
        grid-column: 2;
        width: fit-content;
    }
}

@media screen {
    html[data-theme-effective="dark"] {
        --kbox-card-border: var(--kbox-border);
        --kbox-card-shadow: 0 6px 20px rgba(0, 0, 0, .24);
        --kbox-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, .34);
    }

    html[data-theme-effective="dark"] .dashboard-section-kicker {
        color: #f2c879;
    }

    html[data-theme-effective="dark"] .dashboard-attention-total {
        border-color: #6e5936;
        background: #392f22;
        color: #f4d28e;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel {
        border-left: 0 !important;
        background: linear-gradient(90deg, rgba(207, 143, 33, .08), var(--kbox-surface) 14rem) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task {
        border-color: var(--kbox-border) !important;
        background: var(--kbox-surface-elevated) !important;
        color: var(--kbox-text) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task:hover,
    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task:focus-visible {
        border-color: #796286 !important;
        background: #3a3141 !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-icon {
        background: #403447;
        color: var(--kbox-primary-on-dark);
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list .dashboard-priority-copy strong {
        color: var(--kbox-heading) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task > b {
        border-color: #6e5936;
        background: #3d3222;
        color: #f4d28e !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-task--urgent .dashboard-priority-icon {
        background: #482d31;
        color: #ffb4ab;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task--urgent > b {
        border-color: #72454a;
        background: #482d31;
        color: #ffc3bc !important;
    }
}

/* v36.76: priority-led changelog presentation */
@media screen {
    .changelog-overview {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    }

    .changelog-entry {
        border-left: 4px solid var(--kbox-border);
    }

    .changelog-entry--highest {
        border-left-color: var(--kbox-primary);
    }

    .changelog-entry--important {
        border-left-color: var(--kbox-secondary);
    }

    .changelog-entry--supporting {
        border-left-color: #c77708;
    }

    .changelog-importance {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 26px;
        padding: .2rem .55rem;
        border: 1px solid var(--kbox-border);
        border-radius: 999px;
        background: var(--kbox-surface-soft);
        color: var(--kbox-muted);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .035em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .changelog-importance--highest {
        border-color: color-mix(in srgb, var(--kbox-primary) 24%, var(--kbox-border));
        background: color-mix(in srgb, var(--kbox-primary) 9%, var(--kbox-surface));
        color: var(--kbox-heading);
    }

    .changelog-importance--important {
        border-color: color-mix(in srgb, var(--kbox-secondary) 22%, var(--kbox-border));
        background: color-mix(in srgb, var(--kbox-secondary) 8%, var(--kbox-surface));
        color: var(--kbox-heading);
    }

    .changelog-importance--supporting {
        border-color: color-mix(in srgb, #c77708 22%, var(--kbox-border));
        background: color-mix(in srgb, #f5c46b 16%, var(--kbox-surface));
        color: #704600;
    }

    .changelog-entry-heading h2 {
        margin-top: .45rem;
    }

    html[data-theme-effective="dark"] .changelog-importance--highest,
    html[data-theme-effective="dark"] .changelog-importance--important {
        border-color: #765a85;
        background: #3d3144;
        color: var(--kbox-primary-on-dark);
    }

    html[data-theme-effective="dark"] .changelog-importance--supporting {
        border-color: #6e5936;
        background: #3d3222;
        color: #f4d28e;
    }

    html[data-theme-effective="dark"] .changelog-importance--minor {
        border-color: var(--kbox-border);
        background: var(--kbox-surface-elevated);
        color: var(--kbox-muted);
    }
}

/* v36.77: Material-informed, role-based Dark mode */
@media screen {
    html[data-theme-effective="dark"] {
        color-scheme: dark;

        /* Legacy brand tokens remain medium-tone containers in Dark mode. */
        --kbox-primary: #875596;
        --kbox-secondary: #8d5b9b;
        --kbox-accent: #efc475;

        /* Material-style surface and on-surface roles. */
        --kbox-background: #141216 !important;
        --kbox-surface-dim: #141216;
        --kbox-surface: #1c191f;
        --kbox-surface-container-lowest: #100e12;
        --kbox-surface-container-low: #211e24;
        --kbox-surface-elevated: #28242c;
        --kbox-surface-soft: #312c35;
        --kbox-surface-container-high: #312c35;
        --kbox-surface-container-highest: #3a343f;
        --kbox-text: #f5eff7 !important;
        --kbox-muted: #cec3d0;
        --kbox-heading: #f5eff7;
        --kbox-border: #514854;
        --kbox-outline: #8c808f;
        --kbox-outline-variant: #514854;

        /* Paired accent roles: never place a container colour on itself. */
        --kbox-primary-on-dark: #e7b9f3;
        --kbox-on-primary-dark: #29132e;
        --kbox-primary-container-dark: #5a3466;
        --kbox-on-primary-container-dark: #f3dcfa;
        --kbox-secondary-on-dark: #d5c0db;
        --kbox-secondary-container-dark: #493b4e;
        --kbox-on-secondary-container-dark: #f0e1f3;
        --kbox-link: #e7b9f3;
        --kbox-link-hover: #f5d9fc;
        --kbox-focus-on-dark: #efb7ff;

        /* Semantic container pairs. */
        --kbox-danger: #ffb4ab;
        --kbox-danger-container-dark: #3b2428;
        --kbox-success: #9edbb2;
        --kbox-success-container-dark: #1d3427;
        --kbox-warning: #f1ca7a;
        --kbox-warning-container-dark: #372e1f;
        --kbox-info: #aecbfa;
        --kbox-info-container-dark: #1e3142;

        /* Tonal elevation does most of the work; shadows stay restrained. */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .16);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, .28), 0 12px 28px rgba(0, 0, 0, .2);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, .34), 0 24px 52px rgba(0, 0, 0, .24);
        --kbox-card-border: var(--kbox-outline-variant);
        --kbox-card-shadow: var(--shadow-sm);
        --kbox-card-shadow-hover: var(--shadow-md);
        accent-color: var(--kbox-primary-on-dark);
        scrollbar-color: #746a77 var(--kbox-surface-dim);
    }

    html[data-theme-effective="dark"] body {
        background:
            radial-gradient(circle at 90% -8rem, rgba(135, 85, 150, .14), transparent 32rem),
            linear-gradient(180deg, #18151a 0, var(--kbox-background) 34rem);
        color: var(--kbox-text);
    }

    /* Tonal elevation and a calm, neutral application frame. */
    html[data-theme-effective="dark"] .topbar,
    html[data-theme-effective="dark"] .footer {
        border-color: var(--kbox-outline-variant);
        background: rgba(28, 25, 31, .94);
        color: var(--kbox-text);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
    }

    html[data-theme-effective="dark"] .sidebar {
        border-right: 1px solid var(--kbox-outline-variant);
        background:
            radial-gradient(circle at 15% 0, rgba(135, 85, 150, .16), transparent 18rem),
            linear-gradient(180deg, #211d24, #171419 72%);
        color: var(--kbox-text);
        box-shadow: 8px 0 28px rgba(0, 0, 0, .2);
    }

    html[data-theme-effective="dark"] .sidebar-brand small,
    html[data-theme-effective="dark"] .nav-heading {
        color: var(--kbox-muted);
    }

    html[data-theme-effective="dark"] .brand-mark,
    html[data-theme-effective="dark"] .sidebar-brand img {
        border-color: #665a69;
        background: var(--kbox-primary-container-dark);
        color: var(--kbox-on-primary-container-dark);
        box-shadow: none;
    }

    html[data-theme-effective="dark"] .sidebar-nav a {
        color: #ddd4df;
    }

    html[data-theme-effective="dark"] .sidebar-nav a:hover {
        background: var(--kbox-surface-container-high);
        color: var(--kbox-text);
    }

    html[data-theme-effective="dark"] .sidebar-nav a.active {
        background: var(--kbox-primary-container-dark);
        color: var(--kbox-on-primary-container-dark);
        box-shadow: inset 0 0 0 1px rgba(243, 220, 250, .12);
    }

    html[data-theme-effective="dark"] .sidebar-nav .nav-icon {
        border-color: #5c525f;
        background: var(--kbox-surface-container-high);
        color: currentColor;
    }

    html[data-theme-effective="dark"] .sidebar-nav a:is(:hover, .active) .nav-icon {
        border-color: rgba(243, 220, 250, .22);
        background: rgba(243, 220, 250, .1);
    }

    html[data-theme-effective="dark"] :is(
        .panel,
        .stat,
        .stat-card,
        .maker-summary-card,
        .agreement-summary-card,
        .maker-dashboard-summary > article,
        .dashboard-welcome,
        .dashboard-priority-panel,
        .dashboard-priority-summary,
        .dashboard-command-centre,
        .dashboard-collapsible,
        .dashboard-concern-card,
        .dashboard-action-card,
        .maker-dash-card,
        .maker-dash-stat,
        .maker-dash-action,
        .maker-dash-account,
        .maker-glance-card,
        .maker-notification-controlbar,
        .maker-notification-card,
        .report-chart-card,
        .help-topic-card,
        .help-related,
        .help-formula,
        .code-preview,
        .workflow-guide-toolbar,
        .form-section,
        .settings-hub-card,
        .context-tabs,
        .maker-product-context,
        .store-context,
        .agreement-workflow-guide,
        .agreement-save-bar,
        .agreement-editor-section,
        .account-access-summary,
        .system-overview-summary-card,
        .finance-direction-guide,
        .finance-overview-card
    ) {
        border-color: var(--kbox-outline-variant) !important;
        background: var(--kbox-surface-container-low) !important;
        color: var(--kbox-text) !important;
        box-shadow: var(--shadow-sm);
    }

    html[data-theme-effective="dark"] :is(
        .status-item,
        .task-list a,
        .dashboard-glance-card,
        .dashboard-task-card,
        .dashboard-workflow-mini-link,
        .dashboard-link-list a,
        .maker-link-row,
        .maker-primary-action,
        .maker-account-chip,
        .maker-home-attention-list a,
        .maker-home-quick-actions a,
        .maker-home-month-grid a,
        .maker-optional-settings,
        .maker-filter-disclosure,
        .maker-advanced-breakdown,
        .maker-history-disclosure,
        .maker-space-term-grid > div,
        .global-search-result,
        .sale-transaction-summary > div,
        .sale-maker-group-row th,
        .changelog-day-link
    ) {
        border-color: var(--kbox-outline-variant) !important;
        background: var(--kbox-surface-elevated) !important;
        color: var(--kbox-text) !important;
        box-shadow: none;
    }

    html[data-theme-effective="dark"] :is(
        .task-list a,
        .dashboard-task-card,
        .dashboard-workflow-mini-link,
        .dashboard-link-list a,
        .maker-link-row,
        .maker-primary-action,
        .maker-home-attention-list a,
        .maker-home-quick-actions a,
        .maker-home-month-grid a,
        .global-search-result,
        .changelog-day-link
    ):is(:hover, :focus-visible) {
        border-color: var(--kbox-outline) !important;
        background: var(--kbox-surface-container-high) !important;
        box-shadow: var(--shadow-sm);
    }

    /* On-surface text is neutral; colour is reserved for actions and state. */
    html[data-theme-effective="dark"] :is(h1, h2, h3, h4, h5, h6),
    html[data-theme-effective="dark"] :is(
        .topbar-title,
        .page-header h1,
        .panel h2,
        .section-heading h2,
        .section-heading-row h2,
        .dashboard-section-heading h2,
        .dashboard-priority-copy strong,
        .dashboard-task-copy strong,
        .dashboard-link-list strong,
        .maker-link-row strong,
        .maker-primary-action strong,
        .maker-account-chip strong,
        .maker-product-context-heading > strong,
        .dashboard-empty-state strong,
        .dashboard-collapsible-summary h2,
        .workflow-next-step h2,
        .role-guide strong,
        .recovery-error h1,
        .account-recovery-page h1,
        .sale-notes-details summary
    ) {
        color: var(--kbox-heading) !important;
    }

    html[data-theme-effective="dark"] :is(
        .page-header p,
        .page-intro,
        .section-description,
        .field-explanation,
        .form-check-help,
        .help-text,
        .muted,
        .summary-label,
        .summary-help,
        .stat-label,
        .maker-link-row small,
        .maker-account-chip span,
        .dashboard-priority-copy small
    ) {
        color: var(--kbox-muted) !important;
    }

    html[data-theme-effective="dark"] a:not(.button):not(.sidebar-nav a),
    html[data-theme-effective="dark"] :is(
        .link-button,
        .button-link,
        .dashboard-text-link,
        .context-help-link,
        .settings-hub-kicker,
        .footer-version-info a
    ) {
        color: var(--kbox-link) !important;
    }

    html[data-theme-effective="dark"] a:not(.button):not(.sidebar-nav a):hover,
    html[data-theme-effective="dark"] :is(.link-button, .button-link, .dashboard-text-link, .context-help-link):hover {
        color: var(--kbox-link-hover) !important;
    }

    html[data-theme-effective="dark"] :is(
        .stat-value,
        .stat-card strong,
        .maker-summary-card .summary-value,
        .maker-dash-stat-value,
        .maker-money-primary-value,
        .chart-donut-total
    ) {
        color: var(--kbox-primary-on-dark) !important;
        fill: var(--kbox-primary-on-dark);
    }

    /* Material paired icon containers fix legacy dark-purple glyph leakage. */
    html[data-theme-effective="dark"] :is(
        .dashboard-priority-icon,
        .dashboard-concern-icon,
        .dashboard-task-icon,
        .maker-space-payment-icon,
        .maker-space-store-icon,
        .finance-overview-icon,
        .maker-directory-icon-young,
        .maker-directory-icon-volunteer,
        .maker-directory-icon-active,
        .maker-home-action-icon,
        .maker-notification-summary-icon,
        .maker-dash-list-icon,
        .setup-step-marker
    ) {
        border: 1px solid #6d5574 !important;
        background: var(--kbox-primary-container-dark) !important;
        color: var(--kbox-on-primary-container-dark) !important;
        box-shadow: none !important;
    }

    html[data-theme-effective="dark"] :is(
        .dashboard-priority-icon,
        .dashboard-concern-icon,
        .dashboard-task-icon,
        .maker-space-payment-icon,
        .maker-space-store-icon,
        .finance-overview-icon,
        .maker-topbar-notifications
    ) .nav-icon {
        color: inherit !important;
        fill: none !important;
        stroke: currentColor !important;
        opacity: 1;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-task--urgent .dashboard-priority-icon {
        border-color: #75494e !important;
        background: var(--kbox-danger-container-dark) !important;
        color: var(--kbox-danger) !important;
    }

    html[data-theme-effective="dark"] .setup-step-list li.is-complete .setup-step-marker {
        border-color: #486b54 !important;
        background: var(--kbox-success-container-dark) !important;
        color: var(--kbox-success) !important;
    }

    html[data-theme-effective="dark"] :is(.workflow-next-marker, .sale-step-number) {
        background: var(--kbox-primary-on-dark) !important;
        color: var(--kbox-on-primary-dark) !important;
        box-shadow: 0 0 0 5px rgba(231, 185, 243, .1) !important;
    }

    html[data-theme-effective="dark"] .workflow-next-step.is-complete .workflow-next-marker {
        background: var(--kbox-success) !important;
        color: #0c2114 !important;
    }

    /* Controls use surface-container-highest, as in Material text fields. */
    html[data-theme-effective="dark"] :is(
        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        .maker-autocomplete-list,
        .topbar-account-popover
    ) {
        border-color: var(--kbox-outline) !important;
        background: var(--kbox-surface-container-highest) !important;
        color: var(--kbox-text) !important;
        box-shadow: none;
    }

    html[data-theme-effective="dark"] :is(input, textarea)::placeholder {
        color: #b6aab9;
        opacity: 1;
    }

    html[data-theme-effective="dark"] :is(input, select, textarea):hover:not(:disabled) {
        border-color: #a094a3 !important;
    }

    html[data-theme-effective="dark"] :is(input, select, textarea):focus {
        border-color: var(--kbox-primary-on-dark) !important;
        box-shadow: 0 0 0 3px rgba(239, 183, 255, .2) !important;
    }

    html[data-theme-effective="dark"] :is(input[type="checkbox"], input[type="radio"]) {
        accent-color: var(--kbox-primary-on-dark);
    }

    html[data-theme-effective="dark"] option {
        background: var(--kbox-surface-container-highest);
        color: var(--kbox-text);
    }

    html[data-theme-effective="dark"] :is(label, legend, .form-check-label) {
        color: var(--kbox-text) !important;
    }

    html[data-theme-effective="dark"] .required-marker {
        color: var(--kbox-muted) !important;
    }

    /* Material button hierarchy: filled, outlined, tonal and error. */
    html[data-theme-effective="dark"] .button:not(.button-secondary):not(.button-muted):not(.button-danger) {
        border-color: var(--kbox-primary-on-dark);
        background: var(--kbox-primary-on-dark);
        color: var(--kbox-on-primary-dark);
        box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
        filter: none;
    }

    html[data-theme-effective="dark"] .button:not(.button-secondary):not(.button-muted):not(.button-danger):hover {
        border-color: #f1ccfa;
        background: #f1ccfa;
        color: var(--kbox-on-primary-dark);
        box-shadow: var(--shadow-sm);
        filter: none;
    }

    html[data-theme-effective="dark"] .button-secondary {
        border-color: var(--kbox-outline);
        background: transparent;
        color: var(--kbox-primary-on-dark);
        box-shadow: none;
    }

    html[data-theme-effective="dark"] .button-secondary:hover {
        border-color: var(--kbox-primary-on-dark);
        background: rgba(231, 185, 243, .1);
        color: var(--kbox-link-hover);
    }

    html[data-theme-effective="dark"] .button-muted {
        border-color: #665c69;
        background: var(--kbox-secondary-container-dark);
        color: var(--kbox-on-secondary-container-dark);
        box-shadow: none;
    }

    html[data-theme-effective="dark"] .button-muted:hover {
        border-color: var(--kbox-outline);
        background: #58485d;
        color: #fff;
    }

    html[data-theme-effective="dark"] .button-danger {
        border-color: var(--kbox-danger);
        background: var(--kbox-danger);
        color: #2d1114;
        box-shadow: none;
    }

    html[data-theme-effective="dark"] .button-danger:is(:hover, :focus-visible) {
        border-color: #ffc9c3;
        background: #ffc9c3;
        color: #2d1114;
    }

    html[data-theme-effective="dark"] :is(.button:disabled, .button.is-disabled) {
        border-color: transparent !important;
        background: rgba(245, 239, 247, .12) !important;
        color: rgba(245, 239, 247, .38) !important;
        box-shadow: none !important;
    }

    html[data-theme-effective="dark"] .theme-switcher-toggle {
        border-color: var(--kbox-outline);
        background: var(--kbox-surface-container-high);
        color: var(--kbox-secondary-on-dark);
    }

    html[data-theme-effective="dark"] .theme-switcher-toggle:hover {
        border-color: var(--kbox-primary-on-dark);
        background: var(--kbox-surface-container-highest);
        color: var(--kbox-primary-on-dark);
    }

    html[data-theme-effective="dark"] .theme-switcher-track {
        background: var(--kbox-primary-on-dark);
    }

    html[data-theme-effective="dark"] .theme-switcher-track > span {
        background: var(--kbox-on-primary-dark);
        box-shadow: none;
    }

    /* Data surfaces keep header, row and hover levels visibly distinct. */
    html[data-theme-effective="dark"] .table-wrap,
    html[data-theme-effective="dark"] table {
        border-color: var(--kbox-outline-variant);
        background: var(--kbox-surface-container-low) !important;
        color: var(--kbox-text) !important;
    }

    html[data-theme-effective="dark"] th {
        border-color: var(--kbox-outline-variant);
        background: var(--kbox-surface-container-high) !important;
        color: var(--kbox-primary-on-dark) !important;
    }

    html[data-theme-effective="dark"] td {
        border-color: var(--kbox-outline-variant);
        color: var(--kbox-text) !important;
    }

    html[data-theme-effective="dark"] tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, .018);
    }

    html[data-theme-effective="dark"] :is(tbody tr:hover, .clickable-table-row:hover, .clickable-table-row:focus) {
        background: var(--kbox-surface-container-high) !important;
    }

    html[data-theme-effective="dark"] .status-badge {
        border-color: #665c69;
        background: var(--kbox-surface-container-high);
        color: var(--kbox-text);
    }

    /* Semantic feedback uses matched container/on-container pairs. */
    html[data-theme-effective="dark"] :is(.alert-success, .system-state-pill.is-good, .system-health-status--pass) {
        border-color: #486b54 !important;
        background: var(--kbox-success-container-dark) !important;
        color: var(--kbox-success) !important;
    }

    html[data-theme-effective="dark"] :is(
        .alert-warning,
        .label-reminder,
        .maker-reminder-panel,
        .maker-glance-card.is-attention,
        .product-lookup-result.is-warning,
        .system-state-pill.is-warning,
        .system-health-status--warning
    ) {
        border-color: #705d36 !important;
        background: var(--kbox-warning-container-dark) !important;
        color: var(--kbox-warning) !important;
    }

    html[data-theme-effective="dark"] :is(
        .alert-error,
        .product-lookup-result.is-error,
        .product-lookup-result.stock-empty,
        .system-state-pill.is-alert,
        .system-health-status--fail
    ) {
        border-color: #75494e !important;
        background: var(--kbox-danger-container-dark) !important;
        color: var(--kbox-danger) !important;
    }

    html[data-theme-effective="dark"] :is(.alert-info, .relationship-note) {
        border-color: #49647b !important;
        background: var(--kbox-info-container-dark) !important;
        color: var(--kbox-info) !important;
    }

    html[data-theme-effective="dark"] :is(
        .alert-success,
        .alert-warning,
        .alert-error,
        .alert-info,
        .relationship-note,
        .maker-reminder-panel
    ) :is(strong, b, p, span) {
        color: inherit !important;
    }

    html[data-theme-effective="dark"] .dashboard-attention-total,
    html[data-theme-effective="dark"] .dashboard-priority-panel .task-list a.dashboard-priority-task > b,
    html[data-theme-effective="dark"] .maker-home-count,
    html[data-theme-effective="dark"] .maker-home-attention-count {
        border-color: #705d36 !important;
        background: var(--kbox-warning-container-dark) !important;
        color: var(--kbox-warning) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-panel .task-list a.dashboard-priority-task--urgent > b {
        border-color: #75494e !important;
        background: var(--kbox-danger-container-dark) !important;
        color: var(--kbox-danger) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel {
        background:
            linear-gradient(90deg, rgba(241, 202, 122, .055), transparent 16rem),
            var(--kbox-surface-container-low) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task {
        border-color: var(--kbox-outline-variant) !important;
        background: var(--kbox-surface-elevated) !important;
    }

    html[data-theme-effective="dark"] .dashboard-priority-section .dashboard-priority-panel .task-list a.dashboard-priority-task:is(:hover, :focus-visible) {
        border-color: var(--kbox-outline) !important;
        background: var(--kbox-surface-container-high) !important;
    }

    html[data-theme-effective="dark"] .dashboard-section-kicker {
        color: var(--kbox-warning);
    }

    html[data-theme-effective="dark"] .maker-notification-card.is-unread {
        border-left-color: var(--kbox-primary-on-dark) !important;
        background:
            linear-gradient(90deg, rgba(231, 185, 243, .07), transparent 16rem),
            var(--kbox-surface-elevated) !important;
    }

    html[data-theme-effective="dark"] .maker-notification-unread-dot {
        background: var(--kbox-primary-on-dark) !important;
        box-shadow: 0 0 0 4px rgba(231, 185, 243, .13) !important;
    }

    html[data-theme-effective="dark"] .maker-notification-badge {
        background: var(--kbox-warning);
        color: #261c08;
    }

    html[data-theme-effective="dark"] .maker-primary-kicker,
    html[data-theme-effective="dark"] .notification-queue-count,
    html[data-theme-effective="dark"] .maker-dash-pill {
        border: 1px solid #6d5574;
        background: var(--kbox-primary-container-dark) !important;
        color: var(--kbox-on-primary-container-dark) !important;
    }

    html[data-theme-effective="dark"] :is(
        .maker-link-arrow,
        .workflow-step.is-next .workflow-step-state,
        .maker-autocomplete-toggle:hover
    ) {
        color: var(--kbox-primary-on-dark) !important;
    }

    html[data-theme-effective="dark"] :is(.maker-reminder-content, .maker-reminder-content strong) {
        color: var(--kbox-warning) !important;
    }

    html[data-theme-effective="dark"] .maker-directory-filters legend {
        color: var(--kbox-text) !important;
    }

    html[data-theme-effective="dark"] .skip-link {
        border: 2px solid var(--kbox-primary-on-dark);
        background: var(--kbox-primary-on-dark);
        color: var(--kbox-on-primary-dark);
    }

    html[data-theme-effective="dark"] :is(
        a,
        button,
        input,
        select,
        textarea,
        summary,
        [tabindex]
    ):focus-visible {
        outline: 3px solid var(--kbox-focus-on-dark) !important;
        outline-offset: 3px;
    }

    html[data-theme-effective="dark"] ::selection {
        background: var(--kbox-primary-on-dark);
        color: var(--kbox-on-primary-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-priority-task {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .dashboard-attention-total,
    .dashboard-priority-icon,
    .dashboard-priority-task > b {
        border: 1px solid currentColor;
    }
}

/* v36.81: flatter, clearer maker product-sheet workspace */
@media screen {
    .product-sheet-guidance {
        max-width: 100ch;
        margin: 0 0 .8rem;
        color: var(--kbox-muted);
        font-size: .9rem;
        line-height: 1.5;
    }

    .product-sheet-guidance strong {
        color: var(--kbox-text);
    }

    .product-sheet-panel {
        border-radius: var(--kbox-card-radius);
        background: var(--kbox-surface);
    }

    .product-sheet-toolbar {
        grid-template-columns: minmax(240px, 1.4fr) minmax(210px, .8fr) auto;
        padding: 1rem 1.1rem;
        background: transparent;
    }

    .product-sheet-toolbar-meta {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .9rem;
        padding-bottom: .05rem;
    }

    .product-sheet-show-archived {
        min-height: 44px;
        white-space: nowrap;
    }

    .product-sheet-count {
        align-self: auto;
    }

    .product-sheet-entry-tools {
        background: color-mix(in srgb, var(--kbox-primary) 2.5%, var(--kbox-surface));
    }

    .product-sheet-paste {
        margin: 0;
        padding: .85rem 1.1rem;
        border: 0;
        border-bottom: 1px solid var(--kbox-card-border);
        border-radius: 0;
        background: transparent;
    }

    .product-sheet-panel .product-sheet-table-wrap {
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .product-sheet-table thead th {
        padding-top: .7rem;
        padding-bottom: .7rem;
        vertical-align: bottom;
        border-bottom: 1px solid var(--kbox-card-border);
    }

    .product-sheet-store-heading {
        text-align: left;
        border-left: 0;
        background: color-mix(in srgb, var(--kbox-primary) 4%, var(--kbox-surface-soft));
    }

    .product-sheet-store-heading-start {
        border-left: 1px solid var(--kbox-card-border);
    }

    .product-sheet-column-store,
    .product-sheet-column-measure {
        display: block;
    }

    .product-sheet-column-store {
        color: var(--kbox-muted);
        font-size: .68rem;
        font-weight: 760;
        letter-spacing: .045em;
        line-height: 1.25;
    }

    .product-sheet-column-measure {
        margin-top: .18rem;
        color: var(--kbox-heading);
        font-size: .8rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .product-sheet-savebar {
        padding: .75rem 1.1rem;
        background: var(--kbox-surface);
        box-shadow: 0 -4px 12px rgba(38, 20, 46, .045);
        backdrop-filter: none;
    }
}

html[data-theme-effective="dark"] .product-sheet-entry-tools {
    background: var(--kbox-surface-container-low) !important;
}

html[data-theme-effective="dark"] .product-sheet-store-heading {
    background: var(--kbox-surface-container-high) !important;
}

html[data-theme-effective="dark"] .product-sheet-column-measure {
    color: var(--kbox-primary-on-dark);
}

@media screen and (max-width: 980px) {
    .product-sheet-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .product-sheet-toolbar-meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 620px) {
    .product-sheet-toolbar {
        grid-template-columns: 1fr;
    }

    .product-sheet-toolbar-meta {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }
}

/* v36.80: clearer grouped navigation within a maker record */
@media screen {
    .maker-context-tabs {
        display: grid;
        grid-template-columns: minmax(370px, .95fr) minmax(590px, 2.1fr) minmax(270px, .8fr);
        gap: .6rem;
        align-items: stretch;
        padding: .55rem;
        overflow: visible;
        background: color-mix(in srgb, var(--kbox-primary) 2.5%, var(--kbox-surface));
    }

    .maker-context-tabs .maker-context-tab-group,
    .maker-context-tabs .maker-context-tab-group:last-child {
        min-width: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: .4rem;
        padding: .55rem;
        border: 1px solid var(--kbox-card-border);
        border-radius: 12px;
        background: var(--kbox-surface);
    }

    .maker-context-tabs .maker-context-tab-label {
        display: flex;
        align-items: center;
        min-height: 20px;
        padding: 0 .45rem;
        color: color-mix(in srgb, var(--kbox-text) 72%, var(--kbox-muted));
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .09em;
        line-height: 1.2;
    }

    .maker-context-tabs .maker-context-tab-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: .3rem;
        min-width: 0;
    }

    .maker-context-tabs .maker-context-tab-group--account .maker-context-tab-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .maker-context-tabs .maker-context-tab-group--trading .maker-context-tab-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .maker-context-tabs .maker-context-tab-group--finance .maker-context-tab-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maker-context-tabs .maker-context-tab-links a {
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: .5rem;
        padding: .62rem .7rem;
        border: 1px solid transparent;
        border-radius: 10px;
        color: color-mix(in srgb, var(--kbox-text) 80%, var(--kbox-muted));
        font-size: .875rem;
        font-weight: 720;
        line-height: 1.2;
        transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    }

    .maker-context-tabs .maker-context-tab-links a > span {
        min-width: 0;
        white-space: nowrap;
    }

    .maker-context-tabs .maker-context-tab-links a:hover {
        border-color: var(--kbox-card-border);
        background: var(--kbox-surface-soft);
        color: var(--kbox-heading);
        transform: translateY(-1px);
    }

    .maker-context-tabs .maker-context-tab-links a.active {
        border-color: color-mix(in srgb, var(--kbox-primary) 24%, var(--kbox-card-border));
        background: color-mix(in srgb, var(--kbox-primary) 11%, var(--kbox-surface));
        color: var(--kbox-primary);
        box-shadow: inset 3px 0 0 var(--kbox-primary);
    }

    .maker-context-tabs .nav-icon {
        flex: 0 0 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: currentColor;
        opacity: .86;
        stroke-width: 1.9;
    }

    .maker-context-tabs a:is(:hover, .active) .nav-icon {
        background: transparent;
        opacity: 1;
        transform: none;
    }
}

html[data-theme-effective="dark"] .maker-context-tabs {
    background: var(--kbox-surface-container-low) !important;
}

html[data-theme-effective="dark"] .maker-context-tabs .maker-context-tab-group {
    border-color: var(--kbox-outline-variant) !important;
    background: var(--kbox-surface-elevated) !important;
    box-shadow: none;
}

html[data-theme-effective="dark"] .maker-context-tabs .maker-context-tab-links a.active {
    border-color: #6d5574 !important;
    background: var(--kbox-primary-container-dark) !important;
    color: var(--kbox-on-primary-container-dark) !important;
    box-shadow: inset 3px 0 0 var(--kbox-primary-on-dark);
}

@media screen and (max-width: 1320px) {
    .maker-context-tabs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .maker-context-tabs .maker-context-tab-group {
        flex: 0 0 390px;
        scroll-snap-align: start;
    }

    .maker-context-tabs .maker-context-tab-group--trading {
        flex-basis: 650px;
    }

    .maker-context-tabs .maker-context-tab-group--finance {
        flex-basis: 290px;
    }
}

@media screen and (max-width: 720px) {
    .maker-context-tabs {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        scroll-snap-type: none;
    }

    .maker-context-tabs .maker-context-tab-group,
    .maker-context-tabs .maker-context-tab-group--trading {
        width: auto;
    }

    .maker-context-tabs .maker-context-tab-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maker-context-tabs .maker-context-tab-group--account .maker-context-tab-links,
    .maker-context-tabs .maker-context-tab-group--trading .maker-context-tab-links,
    .maker-context-tabs .maker-context-tab-group--finance .maker-context-tab-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .maker-context-tabs .maker-context-tab-links a > span {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maker-context-tabs .maker-context-tab-links a {
        transition: none;
    }
}

@media (forced-colors: active) {
    .maker-context-tabs .maker-context-tab-group,
    .maker-context-tabs .maker-context-tab-links a.active {
        border: 1px solid currentColor;
    }
}