/* Apple HIG layer: system-style tokens, chrome (header/sidebar), grouped cards, lists, segmented controls.
   Loaded after style.css. Brand blue stays the accent (HIG color: brand color as app accent in a mostly monochrome UI). */

:root {
    --ax-bg: #f5f5f7;
    --ax-card: #ffffff;
    --ax-card-2: #f5f5f7;
    --ax-sidebar: #fbfbfd;
    --ax-material: rgba(251, 251, 253, 0.78);
    --ax-fill: rgba(120, 120, 128, 0.12);
    --ax-fill-2: rgba(120, 120, 128, 0.07);
    --ax-fill-3: rgba(120, 120, 128, 0.18);
    --ax-label: #1d1d1f;
    --ax-label-2: #6e6e73;
    --ax-label-3: #8e8e93;
    --ax-sep: rgba(60, 60, 67, 0.13);
    --ax-accent: #2B52A3;
    --ax-accent-solid: #2B52A3;
    --ax-accent-fill: rgba(43, 82, 163, 0.10);
    --ax-link: #2B52A3;
    --ax-seg-selected: #ffffff;
    --ax-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    --ax-shadow-hover: 0 6px 20px -6px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    --ax-radius: 18px;
    --ax-radius-sm: 12px;

    /* Vivid system colors (icon fills, chart marks) */
    --ax-blue-v: #0088ff;
    --ax-green-v: #34c759;
    --ax-orange-v: #ff8d28;
    --ax-red-v: #ff383c;
    --ax-indigo-v: #6155f5;
    --ax-teal-v: #00c3d0;
    --ax-pink-v: #ff2d55;
    --ax-yellow-v: #ffcc00;
    --ax-purple-v: #cb30e0;
    --ax-gray-v: #8e8e93;

    /* Accessible system colors (text on light surfaces, ≥4.5:1) */
    --ax-blue: #1e6ef4;
    --ax-green: #008932;
    --ax-orange: #c55300;
    --ax-red: #e9152d;
    --ax-indigo: #564ade;
    --ax-teal: #008198;
    --ax-pink: #e7124d;
}

html.dark {
    --ax-bg: #000000;
    --ax-card: #1c1c1e;
    --ax-card-2: #2c2c2e;
    --ax-sidebar: #161617;
    --ax-material: rgba(22, 22, 23, 0.78);
    --ax-fill: rgba(118, 118, 128, 0.24);
    --ax-fill-2: rgba(118, 118, 128, 0.14);
    --ax-fill-3: rgba(118, 118, 128, 0.32);
    --ax-label: #f5f5f7;
    --ax-label-2: #98989f;
    --ax-label-3: #6e6e73;
    --ax-sep: rgba(84, 84, 88, 0.55);
    --ax-accent: #7da2f0;
    --ax-accent-solid: #3a64c4;
    --ax-accent-fill: rgba(125, 162, 240, 0.16);
    --ax-link: #8fb0f5;
    --ax-seg-selected: #636366;
    --ax-shadow: none;
    --ax-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.08);

    --ax-blue-v: #0091ff;
    --ax-green-v: #30d158;
    --ax-orange-v: #ff9230;
    --ax-red-v: #ff4245;
    --ax-indigo-v: #6d7cff;
    --ax-teal-v: #00d2e0;
    --ax-pink-v: #ff375f;
    --ax-yellow-v: #ffd600;
    --ax-purple-v: #db34f2;
    --ax-gray-v: #8e8e93;

    --ax-blue: #5cb8ff;
    --ax-green: #4ad968;
    --ax-orange: #ffa056;
    --ax-red: #ff6165;
    --ax-indigo: #a7aaff;
    --ax-teal: #3bddec;
    --ax-pink: #ff8ac4;
}

/* ── Base: system font, grouped background ─────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, "Segoe UI", Roboto, sans-serif;
    background-color: var(--ax-bg) !important;
    color: var(--ax-label);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html.dark body { background-color: var(--ax-bg) !important; }

@media (min-width: 1024px) {
    .app-layout-main { padding: 2rem 2.5rem; }
}

/* ── Header: translucent material bar ──────────────────────────────────── */
.app-header {
    background: var(--ax-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ax-sep);
    color: var(--ax-label);
    min-height: var(--oms-header-height);
}
.hdr-btn {
    display: inline-flex;
    height: 2.25rem;
    min-width: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0 0.5rem;
    color: var(--ax-label-2);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.hdr-btn:hover { background: var(--ax-fill-2); color: var(--ax-label); }
.hdr-btn:active { transform: scale(0.96); }
.hdr-btn:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 0; box-shadow: 0 0 0 1px var(--ax-accent); }
.hdr-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    display: flex;
    min-width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ax-red-v);
    padding: 0 0.25rem;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 0 2px var(--ax-bg);
}
.hdr-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    background: var(--ax-fill-2);
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}
.hdr-user__name { font-weight: 600; color: var(--ax-label); }
.hdr-user__role { color: var(--ax-label-2); }
.app-header .global-search-hint-kbd {
    background: var(--ax-fill) !important;
    color: var(--ax-label-2) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.app-header .global-search-hint-mark { display: none !important; }

/* ── Sidebar: macOS-style source list ──────────────────────────────────── */
#app-sidebar,
html.dark #app-sidebar {
    background-color: var(--ax-sidebar) !important;
    border-right: 1px solid var(--ax-sep) !important;
    border-color: var(--ax-sep) !important;
}
#app-sidebar .nav-link {
    min-height: 2.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ax-label);
    gap: 0.625rem;
}
#app-sidebar .nav-link .nav-icon,
#app-sidebar .nav-link svg { color: var(--ax-accent); opacity: 1; }
#app-sidebar .nav-link:hover { background: var(--ax-fill-2); color: var(--ax-label); }
#app-sidebar .nav-link.nav-link-active {
    background: var(--ax-accent-solid);
    color: #fff;
    font-weight: 600;
}
#app-sidebar .nav-link.nav-link-active svg { color: #fff; }
#app-sidebar .nav-link:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 0; box-shadow: 0 0 0 1px var(--ax-accent); }
#app-sidebar .nav-active-bar { display: none; }
#app-sidebar .nav-badge {
    margin-left: auto;
    min-width: 1.25rem;
    border-radius: 999px;
    background: var(--ax-fill);
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    color: var(--ax-label-2);
}
#app-sidebar .nav-link-active .nav-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
#app-sidebar .nav-group-label,
#app-sidebar .nav-group-toggle {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ax-label-2);
}
#app-sidebar .nav-group-toggle { margin-top: 1.125rem; padding: 0.25rem 0.625rem; }
#app-sidebar .nav-group-toggle:hover { color: var(--ax-label); background: transparent; }
#app-sidebar .nav-group-chevron { color: var(--ax-label-3); }

/* ── Shared surfaces used across pages ─────────────────────────────────── */
.chart-card,
html.dark .chart-card {
    background-color: var(--ax-card) !important;
    border: 0 !important;
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
    padding: 1.25rem;
}
.chart-card h3,
html.dark .chart-card h3 {
    font-size: 1.0625rem;
    line-height: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ax-label);
}
.chart-card__summary,
html.dark .chart-card__summary { color: var(--ax-label-2); font-size: 0.875rem; }
.chart-card__summary strong,
html.dark .chart-card__summary strong { color: var(--ax-label); }

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
}

/* Segmented control (HIG: segmented controls) */
.ax-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0 !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--ax-fill);
}
.segmented-btn,
.ax-segmented .segmented-btn {
    min-height: 1.75rem;
    border-radius: 7px;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ax-label) !important;
    background: transparent !important;
    box-shadow: none;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}
.segmented-btn:hover { background: var(--ax-fill-2) !important; }
.segmented-btn[aria-pressed="true"],
.segmented-btn[aria-pressed="true"]:hover {
    background: var(--ax-seg-selected) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.segmented-btn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 1px; }

/* ── Page components (ax-*) ────────────────────────────────────────────── */
.ax-page { max-width: 1440px; margin: 0 auto; color: var(--ax-label); }

.ax-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.ax-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ax-label-2);
}
.ax-largetitle {
    margin-top: 0.125rem;
    font-size: 2.125rem;
    line-height: 2.5625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ax-label);
}
.ax-sub { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--ax-label-2); }
.ax-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ax-btn {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, filter 150ms ease, transform 100ms ease;
}
.ax-btn:active { transform: scale(0.97); }
.ax-btn:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 1px; box-shadow: 0 0 0 1px var(--ax-accent); }
.ax-btn svg { width: 1rem; height: 1rem; }
.ax-btn--filled { background: var(--ax-accent-solid); color: #fff; }
.ax-btn--filled:hover { filter: brightness(1.1); color: #fff; }
.ax-btn--gray { background: var(--ax-fill); color: var(--ax-link); }
.ax-btn--gray:hover { background: var(--ax-fill-3); color: var(--ax-link); }

.ax-section { margin-bottom: 2.5rem; }
.ax-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.875rem;
}
.ax-title2 {
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ax-label);
}
.ax-section-sub { margin-top: 0.125rem; font-size: 0.9375rem; color: var(--ax-label-2); }
.ax-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9375rem; color: var(--ax-label-2); }
.ax-meta strong { font-weight: 600; color: var(--ax-label); font-variant-numeric: tabular-nums; }
.ax-meta a { color: inherit; text-decoration: none; }
.ax-meta a:hover { color: var(--ax-label); }

.ax-link {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.125rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--ax-link);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 150ms ease;
}
.ax-link:hover { opacity: 0.75; color: var(--ax-link); }
.ax-link:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-link svg { width: 0.75rem; height: 0.75rem; }

.ax-card {
    background: var(--ax-card);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
    overflow: hidden;
}
.ax-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
}
.ax-headline { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ax-label); }

/* Metric tiles */
.ax-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ax-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ax-tiles { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.ax-tiles--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .ax-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ax-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ax-tile {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1rem 1.125rem;
    border-radius: var(--ax-radius);
    background: var(--ax-card);
    box-shadow: var(--ax-shadow);
    color: var(--ax-label);
    text-decoration: none;
    transition: box-shadow 200ms ease, transform 150ms ease;
}
a.ax-tile { cursor: pointer; }
a.ax-tile:hover { box-shadow: var(--ax-shadow-hover); color: var(--ax-label); }
a.ax-tile:active { transform: scale(0.985); }
a.ax-tile:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 1px; box-shadow: 0 0 0 1px var(--ax-accent); }
.ax-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.ax-icon {
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border-radius: 0.5rem;
    background: var(--tone-v, var(--ax-gray-v));
    color: #fff;
}
.ax-icon svg { width: 1.0625rem; height: 1.0625rem; }
.ax-chev { width: 0.875rem; height: 0.875rem; color: var(--ax-label-3); }
.ax-tile-label { font-size: 0.8125rem; font-weight: 500; color: var(--ax-label-2); }
.ax-tile-value {
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ax-label);
    overflow-wrap: anywhere;
}
.ax-tile-value.is-flagged { color: var(--tone, var(--ax-label)); }
.ax-tile-foot { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--ax-label-2); }

.tone-blue   { --tone-v: var(--ax-blue-v);   --tone: var(--ax-blue); }
.tone-green  { --tone-v: var(--ax-green-v);  --tone: var(--ax-green); }
.tone-orange { --tone-v: var(--ax-orange-v); --tone: var(--ax-orange); }
.tone-red    { --tone-v: var(--ax-red-v);    --tone: var(--ax-red); }
.tone-indigo { --tone-v: var(--ax-indigo-v); --tone: var(--ax-indigo); }
.tone-teal   { --tone-v: var(--ax-teal-v);   --tone: var(--ax-teal); }
.tone-pink   { --tone-v: var(--ax-pink-v);   --tone: var(--ax-pink); }
.tone-gray   { --tone-v: var(--ax-gray-v);   --tone: var(--ax-label-2); }

.ax-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    border-radius: 999px;
    padding: 0.0625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ax-delta svg { width: 0.625rem; height: 0.625rem; }
.ax-delta--up { background: rgba(52, 199, 89, 0.14); color: var(--ax-green); }
.ax-delta--down { background: rgba(255, 56, 60, 0.12); color: var(--ax-red); }

/* Pipeline strip */
.ax-pipeline {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ax-pipeline > li { flex: 1 0 7.5rem; position: relative; }
.ax-pipeline > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 1px;
    background: var(--ax-sep);
}
.ax-step {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0.125rem;
    padding: 1rem 1.125rem;
    color: var(--ax-label);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.ax-step:hover { background: var(--ax-fill-2); color: var(--ax-label); }
.ax-step:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: -2px; }
.ax-step-count {
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.ax-step-count.is-zero { color: var(--ax-label-3); }
.ax-step-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--ax-label-2); white-space: nowrap; }
.ax-step-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tone-v, var(--ax-gray-v)); }

/* Inset grouped list rows */
.ax-list { list-style: none; margin: 0; padding: 0; }
.ax-row {
    position: relative;
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem 0.625rem 1.25rem;
    color: var(--ax-label);
    text-decoration: none;
    transition: background-color 150ms ease;
}
.ax-list > li + li .ax-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 0;
    height: 1px;
    background: var(--ax-sep);
}
a.ax-row { cursor: pointer; }
a.ax-row:hover { background: var(--ax-fill-2); color: var(--ax-label); }
a.ax-row:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: -2px; }
.ax-row-main { min-width: 0; flex: 1; }
.ax-row-title { font-size: 0.9375rem; font-weight: 600; color: var(--ax-label); }
.ax-row-sub { font-size: 0.8125rem; color: var(--ax-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-row-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; text-align: right; }
.ax-num { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ax-label); }
.ax-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.0625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ax-fill);
    color: var(--ax-label-2);
}
.ax-tag--red { background: rgba(255, 56, 60, 0.12); color: var(--ax-red); }

/* Tables inside cards */
.ax-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ax-table th {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ax-sep);
    background: transparent;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ax-label-2);
    white-space: nowrap;
}
.ax-table th:first-child,
.ax-table td:first-child { padding-left: 1.25rem; }
.ax-table th:last-child,
.ax-table td:last-child { padding-right: 1.25rem; }
.ax-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ax-sep);
    font-size: 0.875rem;
    color: var(--ax-label);
    vertical-align: middle;
}
.ax-table tbody tr:first-child td { border-top: 0; }
.ax-table tbody tr { transition: background-color 150ms ease; }
.ax-table tbody tr:hover,
html.dark .ax-table tbody tr:hover { background: var(--ax-fill-2); }
.ax-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ax-table .is-secondary { color: var(--ax-label-2); }
.ax-table a.ax-cell-link { font-weight: 600; color: var(--ax-label); text-decoration: none; }
.ax-table a.ax-cell-link:hover { color: var(--ax-link); }
.ax-table a.ax-cell-link:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; border-radius: 4px; }
.ax-table .ax-row-chev {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--ax-label-3);
}
.ax-table .ax-row-chev:hover { background: var(--ax-fill-2); color: var(--ax-label-2); }
.ax-table .ax-row-chev svg { width: 0.875rem; height: 0.875rem; }

.ax-avatar {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    place-items: center;
    border-radius: 999px;
    background: var(--ax-accent-fill);
    color: var(--ax-accent);
    font-size: 0.6875rem;
    font-weight: 700;
}
.ax-rank {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ax-label-2);
}
.ax-rank--top { background: rgba(255, 204, 0, 0.22); color: #8a5a00; }
html.dark .ax-rank--top { background: rgba(255, 214, 0, 0.18); color: #fedf43; }

.ax-meter { height: 0.375rem; overflow: hidden; border-radius: 999px; background: var(--ax-fill); }
.ax-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--tone-v, var(--ax-accent)); transition: width 300ms ease; }

.ax-icon-btn {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    color: var(--ax-label-2);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.ax-icon-btn:hover { background: var(--ax-fill); color: var(--ax-label); }
.ax-icon-btn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 1px; }
.ax-icon-btn svg { width: 0.875rem; height: 0.875rem; }

.ax-empty { padding: 3rem 1.5rem; text-align: center; }
.ax-empty p { margin-bottom: 1rem; font-size: 0.9375rem; color: var(--ax-label-2); }

.ax-footnote { font-size: 0.75rem; color: var(--ax-label-2); }

.ax-chart-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .ax-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-span-2 { grid-column: 1 / -1; }

/* ══ Liquid Glass (navigation + control layer only — HIG: never in the content layer) ══
   Regular variant: blur + luminosity lift, specular top edge, soft lift shadow.
   Browsers can't refract, so lensing is approximated with highlights, not distortion. */
:root {
    --lg-gap: 10px;
    --lg-radius: 22px;
    --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.55) 100%);
    --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%),
                radial-gradient(120% 70% at 50% -30%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%);
    --lg-rim: rgba(255, 255, 255, 0.75);
    --lg-edge: rgba(15, 23, 42, 0.07);
    --lg-specular: rgba(255, 255, 255, 0.95);
    --lg-lift: 0 12px 32px -12px rgba(15, 23, 42, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
    --lg-filter: blur(22px) saturate(185%) brightness(1.03);
    --lg-solid: rgba(251, 251, 253, 0.97);
    --ax-sidebar: transparent;
}
html.dark {
    --lg-fill: linear-gradient(180deg, rgba(58, 58, 62, 0.58) 0%, rgba(30, 30, 32, 0.46) 100%);
    --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 32%),
                radial-gradient(120% 70% at 50% -30%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
    --lg-rim: rgba(255, 255, 255, 0.13);
    --lg-edge: rgba(0, 0, 0, 0.55);
    --lg-specular: rgba(255, 255, 255, 0.22);
    --lg-lift: 0 14px 36px -12px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    --lg-filter: blur(24px) saturate(170%) brightness(0.92);
    --lg-solid: rgba(28, 28, 30, 0.98);
}

/* Ambient color under the glass: brand blue + logo orange washes, so the material has something to pick up. */
body {
    background-image:
        radial-gradient(56rem 36rem at 4% -8%, rgba(43, 82, 163, 0.13), transparent 62%),
        radial-gradient(44rem 30rem at 102% 2%, rgba(242, 143, 45, 0.10), transparent 60%),
        radial-gradient(60rem 40rem at 55% 112%, rgba(97, 85, 245, 0.07), transparent 62%);
    background-attachment: fixed;
}
html.dark body {
    background-image:
        radial-gradient(56rem 36rem at 4% -8%, rgba(58, 100, 196, 0.30), transparent 62%),
        radial-gradient(44rem 30rem at 102% 2%, rgba(242, 143, 45, 0.16), transparent 60%),
        radial-gradient(60rem 40rem at 55% 112%, rgba(109, 124, 255, 0.14), transparent 62%);
}

/* Floating glass top bar */
.app-header {
    position: sticky;
    top: var(--lg-gap);
    margin: var(--lg-gap) var(--lg-gap) 0;
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-radius);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), var(--lg-lift);
}
.app-header .hdr-btn:hover { background: rgba(255, 255, 255, 0.55); }
html.dark .app-header .hdr-btn:hover { background: rgba(255, 255, 255, 0.10); }
.app-header .hdr-user { background: rgba(120, 120, 128, 0.10); box-shadow: inset 0 0 0 0.5px var(--lg-edge); }

/* Floating glass sidebar */
#app-sidebar,
html.dark #app-sidebar {
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-radius);
    background: var(--lg-sheen), var(--lg-fill) !important;
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), var(--lg-lift) !important;
}
#app-sidebar .nav-link { border-radius: 0.625rem; }
#app-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.55); }
html.dark #app-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); }
#app-sidebar .nav-link.nav-link-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%), var(--ax-accent-solid);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 12px -4px rgba(43, 82, 163, 0.55);
}

@media (min-width: 768px) {
    #app-sidebar {
        top: calc(var(--oms-header-height) + var(--lg-gap) * 2);
        left: var(--lg-gap);
        bottom: var(--lg-gap);
        height: auto;
    }
    .app-layout-column { margin-left: calc(var(--oms-sidebar-width) + var(--lg-gap)); }
    body.sidebar-collapsed .app-layout-column { margin-left: calc(var(--oms-sidebar-collapsed-width) + var(--lg-gap)); }
}
@media (max-width: 767px) {
    #app-sidebar {
        top: var(--lg-gap);
        bottom: var(--lg-gap);
        left: var(--lg-gap);
        height: auto;
    }
    body:not(.sidebar-open) #app-sidebar { transform: translateX(calc(-100% - var(--lg-gap) * 3)); }
}

/* Glass buttons: prominent = accent-tinted glass, secondary = clear glass capsule */
.ax-btn--filled {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%), var(--ax-accent-solid);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(43, 82, 163, 0.60);
}
.ax-btn--gray {
    border: 1px solid var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), 0 4px 12px -6px rgba(15, 23, 42, 0.18);
}
.ax-btn--gray:hover { background: var(--lg-sheen), var(--lg-fill); filter: brightness(1.04); }

/* Glass segmented control: recessed track, floating lens for the selected segment */
.ax-segmented {
    background: rgba(120, 120, 128, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.segmented-btn[aria-pressed="true"],
.segmented-btn[aria-pressed="true"]:hover {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.86) 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 3px 8px -2px rgba(0, 0, 0, 0.18);
}
html.dark .segmented-btn[aria-pressed="true"],
html.dark .segmented-btn[aria-pressed="true"]:hover {
    background: linear-gradient(180deg, rgba(140, 140, 146, 0.60) 0%, rgba(99, 99, 102, 0.50) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.5);
}

/* Accessibility: Reduce Transparency → solid surfaces; Increase Contrast → visible rims; no backdrop support → near-opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-header, #app-sidebar, html.dark #app-sidebar, .ax-btn--gray { background: var(--lg-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
    body, html.dark body { background-image: none; }
    .app-header, #app-sidebar, html.dark #app-sidebar, .ax-btn--gray {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--lg-solid) !important;
    }
}
@media (prefers-contrast: more) {
    .app-header, #app-sidebar, html.dark #app-sidebar, .ax-btn--gray { border-color: var(--ax-label-3) !important; }
}

/* Order page: card that must not clip popovers/dropdowns, plus customer card parts */
.ax-card--open { overflow: visible; }
.ax-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ax-label-2); }
.ax-name-link { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ax-link); text-decoration: none; overflow-wrap: anywhere; }
.ax-name-link:hover { opacity: 0.75; text-decoration: underline; text-underline-offset: 3px; }
.ax-name-link:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; border-radius: 4px; }
.ax-kv { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ax-label-2); overflow-wrap: anywhere; }
.ax-pill { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.8125rem; font-weight: 600; background: var(--ax-fill); color: var(--ax-label-2); }
.ax-pill--due { background: rgba(255, 59, 48, 0.12); color: #d70015; }
.ax-pill--credit { background: rgba(52, 199, 89, 0.14); color: #1a7f37; }
.dark .ax-pill--due { color: #ff6961; }
.dark .ax-pill--credit { color: #30d158; }

/* ── Orders: Liquid Glass controls (control layer only) + content-layer polish ─────────────
   HIG materials: glass is for controls/navigation floating above content, never for the content
   layer itself. So: filter toolbar, bulk bar and the order action panel are glass; cards/table are not. */

/* Spring-ish easing shared by the new interactions */
:root { --ax-ease: cubic-bezier(0.32, 0.72, 0, 1); }

/* Content enters softly; stagger is capped so long lists never feel slow */
@keyframes ax-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ax-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.ax-enter { animation: ax-rise 380ms var(--ax-ease) both; }
.ax-table--rows tbody tr { animation: ax-rise 320ms var(--ax-ease) both; }
.ax-table--rows tbody tr:nth-child(2) { animation-delay: 30ms; }
.ax-table--rows tbody tr:nth-child(3) { animation-delay: 60ms; }
.ax-table--rows tbody tr:nth-child(4) { animation-delay: 90ms; }
.ax-table--rows tbody tr:nth-child(5) { animation-delay: 120ms; }
.ax-table--rows tbody tr:nth-child(n+6) { animation-delay: 150ms; }

/* Glass surface (toolbar / floating bars / action panel) */
.ax-glass {
    border: 1px solid var(--lg-rim);
    border-radius: 22px;
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), var(--lg-lift);
}

/* Filter toolbar: sticks under the floating header on desktop so filters stay one tap away */
.ax-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem; margin-bottom: 1.25rem; }
@media (min-width: 1024px) {
    .ax-toolbar { position: sticky; top: calc(var(--oms-header-height) + var(--lg-gap) * 2 + 0.5rem); z-index: 20; }
}

/* Text fields / selects: Apple-style filled field, focus ring instead of border swap */
.ax-field {
    min-height: 2.25rem;
    border: 0;
    border-radius: 10px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--ax-label);
    background-color: var(--ax-fill);
    box-shadow: inset 0 0 0 0.5px var(--ax-sep);
    transition: background-color 180ms var(--ax-ease), box-shadow 180ms var(--ax-ease);
}
.ax-field::placeholder { color: var(--ax-label-3); }
.ax-field:hover { background-color: var(--ax-fill-3); }
.ax-field:focus { outline: none; background-color: var(--ax-card); box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent); }

/* Buttons: pressed state + disabled for every ax-btn (incl. small variant) */
.ax-btn:disabled { opacity: 0.45; pointer-events: none; }
.ax-btn--sm { min-height: 1.75rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.ax-btn--tint { background: var(--ax-accent-fill); color: var(--ax-link); }
.ax-btn--tint:hover { background: var(--ax-fill-3); color: var(--ax-link); }

/* Floating bulk bar: glass capsule that springs in */
#bulk-assign-bar.ax-glass { border-radius: 999px; padding: 0.5rem 0.625rem 0.5rem 1.25rem; }
#bulk-assign-bar.ax-glass:not(.hidden) { animation: ax-pop 360ms var(--ax-ease) both; }
#bulk-assign-bar .ax-field { border-radius: 999px; }

/* Order actions panel is a control cluster → glass (existing classes/hooks untouched) */
.order-actions-panel.ax-card {
    overflow: visible;
    border: 1px solid var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), var(--lg-lift);
}

/* Press feedback for legacy Tailwind buttons/links on order pages (opt-in class) */
.ax-press { transition: transform 120ms var(--ax-ease), filter 150ms ease, background-color 150ms ease; }
.ax-press:active { transform: scale(0.97); }
.ax-press:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 1px; box-shadow: 0 0 0 1px var(--ax-accent); }
.order-actions-panel :is(a, button).inline-flex { transition: transform 120ms var(--ax-ease), filter 150ms ease, background-color 150ms ease; border-radius: 999px; }
.order-actions-panel :is(a, button).inline-flex:active { transform: scale(0.97); }
.order-actions-panel :is(a, button).inline-flex:hover { filter: brightness(1.06); }
.order-actions-panel :is(a, button).inline-flex:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 1px; box-shadow: 0 0 0 1px var(--ax-accent); }

/* Row action capsules (no blur: dozens of rows must stay cheap) */
.ax-rowbtn { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; color: var(--ax-link); background: var(--ax-accent-fill); transition: background-color 150ms ease, transform 120ms var(--ax-ease); }
.ax-rowbtn:hover { background: var(--ax-fill-3); color: var(--ax-link); }
.ax-rowbtn:active { transform: scale(0.96); }
.ax-rowbtn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* Card hover lift on pointer devices only */
@media (hover: hover) {
    .ax-card--lift { transition: box-shadow 220ms var(--ax-ease), transform 220ms var(--ax-ease); }
    .ax-card--lift:hover { box-shadow: var(--ax-shadow-hover); }
}

/* Accessibility: respect Reduce Motion / Reduce Transparency / Increase Contrast */
@media (prefers-reduced-motion: reduce) {
    .ax-enter, .ax-table--rows tbody tr, #bulk-assign-bar.ax-glass:not(.hidden) { animation: none !important; }
    .ax-press:active, .ax-rowbtn:active, .order-actions-panel :is(a, button).inline-flex:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .ax-glass, .order-actions-panel.ax-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--lg-solid) !important; }
}
@media (prefers-contrast: more) {
    .ax-glass, .order-actions-panel.ax-card { border-color: var(--ax-label-3) !important; }
    .ax-field { box-shadow: inset 0 0 0 1px var(--ax-label-3); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ax-glass, .order-actions-panel.ax-card { background: var(--lg-solid) !important; }
}

/* .ax-field must beat the legacy `.dark input/select` remap in style.css (it uses !important on focus) */
html.dark .ax-field { background-color: var(--ax-fill); color: var(--ax-label); border-color: transparent; }
html.dark .ax-field:hover { background-color: var(--ax-fill-3); }
html.dark .ax-field:focus { background-color: var(--ax-card); border-color: transparent !important; box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent) !important; }
.ax-field:focus { border-color: transparent; }

/* ── Orders toolbar: condenses progressively while scrolling (inline script in order/list.php) ───
   The script writes three 0→1 variables every frame the table slides under the bar:
     --p  overall progress (sizes, padding, radius)
     --c  collapse of the secondary filters (dates, user, amounts, Export) — finishes early
     --a  appearance of the inline title + "More" button — starts late
   Everything below is a plain calc() of those, so the bar morphs with the finger/wheel instead of snapping.
   The slot is the sticky element and reserves the full height, so the page never shifts. */
.ax-toolbar-slot { margin-bottom: 1.25rem; }
.ax-toolbar-slot > .ax-toolbar { margin-bottom: 0; }
@media (min-width: 1024px) {
    .ax-toolbar-slot { position: sticky; top: calc(var(--oms-header-height) + var(--lg-gap) * 2 + 0.5rem); z-index: 20; pointer-events: none; }
    .ax-toolbar-slot > .ax-toolbar { position: static; pointer-events: auto; width: fit-content; max-width: 100%; }
}

.ax-toolbar {
    --p: 0; --c: 0; --a: 0;
    --tb-gap: calc(0.5rem - var(--p) * 0.125rem);
    gap: var(--tb-gap);
    padding: calc(0.625rem - var(--p) * 0.25rem) calc(0.625rem - var(--p) * 0.25rem) calc(0.625rem - var(--p) * 0.25rem) calc(0.625rem + var(--a) * 0.375rem);
    border-radius: calc(22px + var(--p) * 8px);
}
.ax-toolbar .ax-field,
.ax-toolbar .searchable-select-input.searchable-select-input {
    min-height: calc(2.25rem - var(--p) * 0.375rem);
    font-size: calc(0.875rem - var(--p) * 0.0625rem);
    border-radius: calc(10px + var(--p) * 8px);
}
.ax-toolbar .ax-btn {
    min-height: calc(2.25rem - var(--p) * 0.375rem);
    font-size: calc(0.9375rem - var(--p) * 0.125rem);
    padding-left: calc(1rem - var(--p) * 0.125rem);
    padding-right: calc(1rem - var(--p) * 0.125rem);
}
.ax-toolbar input[name="search"] { width: calc(8rem - var(--p) * 1rem); }
.ax-toolbar .searchable-select { width: auto; flex: 0 1 calc(13rem - var(--p) * 3rem); min-width: calc(9rem - var(--p) * 1.5rem); }
.ax-toolbar select[name="sort"] { min-width: calc(11.25rem - var(--p) * 2.25rem); }

/* Secondary filters shrink to nothing; the negative margin eats the flex gap so no hole is left behind */
.ax-toolbar__more { display: contents; }
.ax-toolbar .ax-toolbar__more > *,
.ax-toolbar .ax-toolbar__export {
    max-width: calc((1 - var(--c)) * 14rem);
    opacity: calc(1 - var(--c) * 1.5);
    margin-right: calc(var(--c) * -1 * var(--tb-gap));
    padding-left: calc((1 - var(--c)) * 0.75rem);
    padding-right: calc((1 - var(--c)) * 0.75rem);
    overflow: hidden;
    white-space: nowrap;
}
/* Inline title + More grow in from zero width */
.ax-toolbar__title,
.ax-toolbar .ax-toolbar__more-btn {
    display: inline-flex;
    align-items: center;
    flex: none;
    overflow: hidden;
    white-space: nowrap;
    opacity: var(--a);
    visibility: hidden;
}
.ax-toolbar__title {
    gap: 0.375rem;
    max-width: calc(var(--a) * 10rem);
    margin-right: calc((1 - var(--a)) * -1 * var(--tb-gap) + var(--a) * 0.25rem);
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ax-label);
}
.ax-toolbar__count { font-size: 0.75rem; font-weight: 600; color: var(--ax-label-2); font-variant-numeric: tabular-nums; }
.ax-toolbar .ax-toolbar__more-btn {
    max-width: calc(var(--a) * 8rem);
    margin-left: calc((1 - var(--a)) * -1 * var(--tb-gap));
    padding-left: calc(var(--a) * 0.875rem);
    padding-right: calc(var(--a) * 0.875rem);
}
.ax-toolbar.has-inline .ax-toolbar__title,
.ax-toolbar.has-inline .ax-toolbar__more-btn { visibility: visible; }
/* Fully collapsed: take the hidden filters out of tab order / hit testing (they still submit) */
.ax-toolbar.is-collapsed .ax-toolbar__more > *,
.ax-toolbar.is-collapsed .ax-toolbar__export { visibility: hidden; pointer-events: none; }

.ax-toolbar__badge { display: inline-flex; min-width: 1.125rem; height: 1.125rem; align-items: center; justify-content: center; border-radius: 999px; padding: 0 0.3rem; font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--ax-accent-solid); }

/* searchable-select wraps the customer <select> in a w-full div with its own input — style it like a field */
.ax-toolbar .searchable-select-input.searchable-select-input {
    border: 0; padding: 0 0.75rem;
    color: var(--ax-label); background-color: var(--ax-fill); box-shadow: inset 0 0 0 0.5px var(--ax-sep);
    transition: background-color 180ms var(--ax-ease), box-shadow 180ms var(--ax-ease);
}
.ax-toolbar .searchable-select-input.searchable-select-input:focus {
    outline: none; background-color: var(--ax-card); border-color: transparent !important;
    box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent) !important;
}

/* Condensed + "More": secondary filters open as a second row inside the same glass bar */
.ax-toolbar.is-compact.is-expanded { border-radius: 22px; }
.ax-toolbar.is-compact.is-expanded .ax-toolbar__more {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-gap); flex-basis: 100%; order: 10;
    padding-top: 0.375rem; border-top: 0.5px solid var(--ax-sep);
    animation: ax-rise 240ms var(--ax-ease) both;
}
.ax-toolbar.is-compact.is-expanded .ax-toolbar__more > *,
.ax-toolbar.is-compact.is-expanded .ax-toolbar__export {
    max-width: none; opacity: 1; margin-right: 0; padding-left: 0.75rem; padding-right: 0.75rem;
    visibility: visible; pointer-events: auto;
}
.ax-toolbar.is-compact.is-expanded .ax-toolbar__export { order: 11; padding-left: 0.875rem; padding-right: 0.875rem; }
.ax-toolbar.is-compact.is-expanded .ax-toolbar__more-btn { background: var(--ax-accent-fill); color: var(--ax-link); }
@media (prefers-reduced-motion: reduce) {
    .ax-toolbar.is-compact.is-expanded .ax-toolbar__more { animation: none !important; }
}

/* ── Orders list: table, rows, notices, pager (order/list.php) ─────────────────────────────── */
.ax-crumbs { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--ax-label-3); }
.ax-crumbs a { color: var(--ax-link); text-decoration: none; border-radius: 4px; transition: opacity 150ms ease; }
.ax-crumbs a:hover { opacity: 0.7; }
.ax-crumbs a:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-crumbs [aria-current="page"] { color: var(--ax-label-2); }

/* Inline notice (content layer → tinted fill, not glass) */
.ax-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.625rem 0.625rem 0.625rem 0.875rem; border-radius: var(--ax-radius-sm); font-size: 0.875rem; color: var(--ax-label); }
.ax-notice__text { flex: 1 1 16rem; }
.ax-notice__icon { display: inline-flex; flex: none; width: 1.375rem; height: 1.375rem; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.8125rem; font-weight: 800; color: #fff; }
.ax-notice--warn { background: rgba(255, 149, 0, 0.12); box-shadow: inset 0 0 0 0.5px rgba(255, 149, 0, 0.35); }
.ax-notice--warn .ax-notice__icon { background: #ff9500; }
html.dark .ax-notice--warn { background: rgba(255, 159, 10, 0.16); }

/* Sortable headings */
.ax-table th .ax-sort { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; border-radius: 6px; padding: 0.125rem 0.25rem; margin: -0.125rem -0.25rem; transition: background-color 150ms ease, color 150ms ease; }
.ax-table th .ax-sort:hover { color: var(--ax-label); background: var(--ax-fill-2); }
.ax-table th .ax-sort:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 1px; }
.ax-table th .ax-sort svg { width: 0.625rem; height: 0.625rem; opacity: 0; transition: opacity 150ms ease, transform 200ms var(--ax-ease); }
.ax-table th .ax-sort:hover svg { opacity: 0.45; }
.ax-table th .ax-sort.is-asc, .ax-table th .ax-sort.is-desc { color: var(--ax-label); font-weight: 600; }
.ax-table th .ax-sort.is-asc svg, .ax-table th .ax-sort.is-desc svg { opacity: 1; color: var(--ax-accent); }
.ax-table th .ax-sort.is-asc svg { transform: rotate(180deg); }
.ax-table th.is-num .ax-sort { flex-direction: row-reverse; }

/* Rows: whole row is the hit target. Subtle alternating fill for a wide multicolumn table (HIG, macOS). */
.ax-table--orders tbody tr:nth-child(even) { background: rgba(120, 120, 128, 0.035); }
.ax-table--orders tr.ax-row-link { cursor: pointer; transition: background-color 150ms ease, box-shadow 150ms ease; }
.ax-table--orders tr.ax-row-link:hover { background: var(--ax-fill-2); }
.ax-table--orders tr.ax-row-link:active,
.ax-table--orders tr.ax-row-link.is-pressed { background: var(--ax-fill); }
.ax-table--orders tr.ax-row-link:focus-within { background: var(--ax-fill-2); box-shadow: inset 3px 0 0 var(--ax-accent); }
.ax-table--orders tr.ax-row-link.is-selected,
.ax-table--orders tr.ax-row-link.is-selected:hover { background: var(--ax-accent-fill); }
.ax-table--orders td { vertical-align: middle; }
.ax-table--orders .ax-cell-strong { font-weight: 500; color: var(--ax-label); font-variant-numeric: tabular-nums; }
.ax-table--orders .ax-paymeta { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--ax-label-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Disclosure chevron: slides a touch toward the detail on row hover */
.ax-table--orders .ax-row-chev { margin-left: 0.25rem; vertical-align: middle; transition: background-color 150ms ease, color 150ms ease, transform 200ms var(--ax-ease); }
.ax-table--orders tr.ax-row-link:hover .ax-row-chev { color: var(--ax-label-2); transform: translateX(2px); }
.ax-table--orders .ax-row-chev:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 1px; }

/* Selection checkboxes: system accent, comfortable hit area via the whole cell */
.ax-check-cell { width: 2.75rem; }
.ax-table th.ax-check-cell, .ax-table td.ax-check-cell { padding-right: 0.25rem; }
.ax-check { width: 1.0625rem; height: 1.0625rem; accent-color: var(--ax-accent-solid); cursor: pointer; vertical-align: middle; border-radius: 5px; }
.ax-check:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* Status + payment capsules */
.ax-table--orders .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.1875rem 0.625rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.ax-tag { display: inline-flex; align-items: center; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 0.1875rem 0.625rem; font-size: 0.75rem; font-weight: 500; color: var(--ax-label); background: var(--ax-fill); }
.ax-paystate { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.ax-paystate::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.ax-paystate--paid { color: #248a3d; }
.ax-paystate--partial { color: #c93400; }
.ax-paystate--unpaid { color: var(--ax-label-2); }
.ax-paystate--unpaid::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
html.dark .ax-paystate--paid { color: #30d158; }
html.dark .ax-paystate--partial { color: #ff9f0a; }

/* Pager (shared partial restyled only inside .ax-pager; doubled class beats its dark: utilities) */
.ax-pager.ax-pager > div { color: var(--ax-label-2); font-size: 0.8125rem; }
.ax-pager.ax-pager nav { gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--ax-fill-2); }
.ax-pager.ax-pager nav a,
.ax-pager.ax-pager nav span { min-width: 2rem; width: auto; height: 2rem; padding: 0 0.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--ax-label); font-variant-numeric: tabular-nums; transition: background-color 150ms ease, transform 120ms var(--ax-ease); }
.ax-pager.ax-pager nav a:hover { background: var(--ax-fill); }
.ax-pager.ax-pager nav a:active { transform: scale(0.94); }
.ax-pager.ax-pager nav a:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 1px; }
.ax-pager.ax-pager nav span.bg-brand-blue { background: var(--ax-card); color: var(--ax-label); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
html.dark .ax-pager.ax-pager nav span.bg-brand-blue { background: var(--ax-seg-selected); }
.ax-pager.ax-pager nav span.cursor-not-allowed { color: var(--ax-label-3); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
    .ax-table--orders tr.ax-row-link:hover .ax-row-chev, .ax-pager.ax-pager nav a:active { transform: none; }
}

/* ── Order detail (order/detail.php, scoped to .ax-order) ──────────────────────────────────── */

/* Header: large title at rest → floating Liquid Glass bar while scrolling (navigation layer).
   --p overall, --c fold of eyebrow/meta, --a glass material; written by the inline script. */
.ax-ohead-sentinel { display: block; height: 0; }
.ax-ohead-slot {
    position: sticky;
    top: calc(var(--oms-header-height) + var(--lg-gap) * 2 + 0.5rem);
    z-index: 25;
    margin-bottom: 1.5rem;
    pointer-events: none;
}
.ax-ohead {
    --p: 0; --c: 0; --a: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: calc(var(--p) * 0.5rem) calc(var(--p) * 0.5rem) calc(var(--p) * 0.5rem) calc(var(--p) * 1.25rem);
    border-radius: calc(var(--p) * 28px);
    pointer-events: auto;
}
.ax-ohead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), var(--lg-lift);
    opacity: var(--a);
    pointer-events: none;
}
.ax-ohead__main { min-width: 0; }
.ax-ohead__fold {
    max-height: calc((1 - var(--c)) * 3rem);
    opacity: calc(1 - var(--c) * 1.6);
    overflow: hidden;
}
.ax-ohead__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    font-size: calc(2rem - var(--p) * 0.9375rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ax-label);
}
.ax-ohead__number { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ax-ohead__title .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.1875rem 0.625rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.ax-ohead__meta { margin-top: calc((1 - var(--c)) * 0.25rem); font-size: 0.875rem; color: var(--ax-label-2); }
.ax-ohead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ax-ohead__actions .ax-btn { min-height: calc(2.25rem - var(--p) * 0.375rem); font-size: calc(0.9375rem - var(--p) * 0.125rem); }
@media (max-width: 639px) {
    .ax-ohead__actions .ax-tag { display: none; }
}

.ax-tag svg { width: 0.875rem; height: 0.875rem; flex: none; }
.ax-tag { gap: 0.375rem; }
.ax-tag--warn { color: #b25000; background: rgba(255, 149, 0, 0.14); }
html.dark .ax-tag--warn { color: #ffb340; background: rgba(255, 159, 10, 0.18); }

/* Status: HIG-style progress stepper (done ✓ green · current accent with soft pulse · upcoming hollow).
   Own namespace (.ax-progress*) — `.ax-step` already belongs to the dashboard pipeline tiles. */
.ax-progress { display: flex; margin: 0; padding: 0; list-style: none; }
.ax-progress__step {
    --dot: 1.375rem;
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.125rem;
    text-align: center;
}
/* Connector from the previous dot's edge to this dot's edge, on the dots' centre line */
.ax-progress__step::before {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2 - 1px);
    left: calc(-50% + var(--dot) / 2 + 0.375rem);
    right: calc(50% + var(--dot) / 2 + 0.375rem);
    height: 2px;
    border-radius: 2px;
    background: var(--ax-fill-3);
}
.ax-progress__step:first-child::before { display: none; }
.ax-progress__step.is-done::before, .ax-progress__step.is-active::before { background: var(--ax-green-v); }
.ax-progress__step.is-rejected::before { background: var(--ax-red-v); }
.ax-progress__dot {
    position: relative;
    z-index: 1;
    display: grid;
    width: var(--dot);
    height: var(--dot);
    flex: none;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--ax-card);
    box-shadow: inset 0 0 0 2px var(--ax-fill-3);
}
.ax-progress__dot svg { width: 0.75rem; height: 0.75rem; }
.ax-progress__step.is-done .ax-progress__dot { background: var(--ax-green-v); box-shadow: none; }
.ax-progress__step.is-active .ax-progress__dot { background: var(--ax-accent-solid); box-shadow: 0 0 0 4px var(--ax-accent-fill); }
.ax-progress__step.is-active .ax-progress__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--ax-accent);
    opacity: 0;
    animation: ax-progress-pulse 2.4s var(--ax-ease) infinite;
}
.ax-progress__step.is-rejected .ax-progress__dot { background: var(--ax-red-v); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.16); }
.ax-progress__label { max-width: 100%; font-size: 0.75rem; line-height: 1.25; color: var(--ax-label-3); overflow-wrap: anywhere; }
.ax-progress__step.is-done .ax-progress__label { color: var(--ax-label-2); }
.ax-progress__step.is-active .ax-progress__label,
.ax-progress__step.is-rejected .ax-progress__label { font-weight: 600; color: var(--ax-label); }
@keyframes ax-progress-pulse { 0% { opacity: 0.7; transform: scale(0.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
/* Phones: keep labels legible and let the track scroll instead of crushing them */
@media (max-width: 639px) {
    .ax-progress { overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; }
    .ax-progress::-webkit-scrollbar { display: none; }
    .ax-progress__step { min-width: 4.75rem; }
}

/* Line items + totals */
.ax-table--items td { vertical-align: middle; }
.ax-table--items .ax-cell-strong { font-weight: 500; color: var(--ax-label); font-variant-numeric: tabular-nums; }
.ax-table--items .is-num { font-variant-numeric: tabular-nums; }
.ax-totals { border-top: 1px solid var(--ax-sep); padding: 1rem 1.25rem 1.25rem; background: var(--ax-fill-2); }
.ax-totals__inner { display: grid; gap: 0.5rem; max-width: 20rem; margin-left: auto; }

/* Payment */
.ax-paystate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ax-paystate--overpaid { color: var(--ax-link); }
:is(.ax-order, .ax-cust) .ax-paysum { column-gap: 0; row-gap: 0; max-width: 26rem; }
.ax-paysum dt, .ax-paysum dd { padding: 0.3125rem 0; }
.ax-paysum dd { padding-left: 1.5rem; }
.ax-paysum dt.border-t, .ax-paysum dd.border-t { margin-top: 0.25rem; padding-top: 0.625rem; border-color: var(--ax-sep); }

/* Form fields inside the page adopt the filled Apple field (beats Tailwind + the legacy .dark input remap) */
:is(.ax-order, .ax-cust) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.sr-only), select:not(.sr-only), textarea):not(.ax-field) {
    min-height: 2.25rem;
    border-color: transparent;
    border-radius: 10px;
    color: var(--ax-label);
    background-color: var(--ax-fill-2);
    box-shadow: none;
    transition: background-color 180ms var(--ax-ease), box-shadow 180ms var(--ax-ease);
}
:is(.ax-order, .ax-cust) textarea:not(.ax-field) { min-height: 5rem; }
:is(.ax-order, .ax-cust) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.sr-only), select:not(.sr-only), textarea):not(.ax-field):hover { background-color: var(--ax-fill-3); }
:is(.ax-order, .ax-cust) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.sr-only), select:not(.sr-only), textarea):not(.ax-field):focus {
    outline: none;
    border-color: transparent !important;
    background-color: var(--ax-card);
    box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent) !important;
}
:is(.ax-order, .ax-cust) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ax-accent-solid); }

/* Buttons inside the page: solid → capsule with glass sheen + press; outline/white → tinted fill */
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg:is(.bg-brand-blue, .bg-emerald-600, .bg-red-600, .bg-amber-600, .bg-slate-600) {
    border-radius: 999px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 4px 14px -6px rgba(15, 23, 42, 0.45);
    transition: transform 120ms var(--ax-ease), filter 150ms ease, background-color 150ms ease;
}
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg.bg-white {
    border-radius: 999px;
    border-color: transparent;
    background-color: var(--ax-fill) !important;
    transition: transform 120ms var(--ax-ease), background-color 150ms ease;
}
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg.bg-white.text-slate-700 { color: var(--ax-link); }
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg.bg-white:hover { background-color: var(--ax-fill-3) !important; }
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg:is(.bg-brand-blue, .bg-emerald-600, .bg-red-600, .bg-amber-600, .bg-slate-600):hover { filter: brightness(1.07); }
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg:is(.bg-white, .bg-brand-blue, .bg-emerald-600, .bg-red-600, .bg-amber-600, .bg-slate-600):active { transform: scale(0.97); }
:is(.ax-order, .ax-cust) :is(a, button).rounded-lg:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 1px; box-shadow: 0 0 0 1px var(--ax-accent); }
:is(.ax-order, .ax-cust) :is(a, button):disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Secondary text inside cards follows system label colors */
:is(.ax-order, .ax-cust) .ax-card .text-slate-500 { color: var(--ax-label-2); }
:is(.ax-order, .ax-cust) .ax-card .text-slate-700, :is(.ax-order, .ax-cust) .ax-card .text-slate-800 { color: var(--ax-label); }

@media (prefers-reduced-motion: reduce) {
    .ax-progress__step.is-active .ax-progress__dot::after { animation: none; }
    :is(.ax-order, .ax-cust) :is(a, button).rounded-lg:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .ax-ohead::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lg-solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ax-ohead::before { background: var(--lg-solid); }
}
@media (prefers-contrast: more) {
    .ax-ohead::before { border-color: var(--ax-label-3); }
}

/* Proof-of-payment dropzone (shared partial, restyled only inside the order page) */
:is(.ax-order, .ax-cust) [data-payment-proof] .border-dashed {
    border-width: 1.5px;
    border-color: var(--ax-sep);
    border-radius: var(--ax-radius-sm);
    background-color: var(--ax-fill-2) !important;
    transition: background-color 180ms var(--ax-ease), border-color 180ms var(--ax-ease);
}
:is(.ax-order, .ax-cust) [data-payment-proof] .border-dashed:hover { border-color: var(--ax-accent); background-color: var(--ax-accent-fill) !important; }
:is(.ax-order, .ax-cust) [data-payment-proof] .border-dashed[aria-invalid="true"] { border-color: var(--ax-red-v); }

/* ── Customer profile (customer/profile.php, scoped to .ax-cust) ───────────────────────────────
   Reuses the order-detail header (.ax-ohead*) and the field/button/dropzone layer above.
   Views: the page sets data-active-view; cards carry data-seg. No JS → everything stays visible. */
.ax-ohead--cust .ax-cust-views { flex-basis: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-top: calc((1 - var(--p)) * 0.5rem); }
.ax-ohead--cust .ax-cust-views::-webkit-scrollbar { display: none; }
.ax-cust-views .ax-segmented { min-width: max-content; }
.ax-cust-views .segmented-btn { min-width: 5.5rem; cursor: pointer; }
.ax-cust .ax-tile-value { font-variant-numeric: tabular-nums; }

.ax-cust[data-active-view="overview"]  [data-seg]:not([data-seg="overview"]),
.ax-cust[data-active-view="statement"] [data-seg]:not([data-seg="statement"]),
.ax-cust[data-active-view="orders"]    [data-seg]:not([data-seg="orders"]),
.ax-cust[data-active-view="payments"]  [data-seg]:not([data-seg="payments"]),
.ax-cust[data-active-view="returns"]   [data-seg]:not([data-seg="returns"]),
.ax-cust[data-active-view="prices"]    [data-seg]:not([data-seg="prices"]) { display: none; }
.ax-cust[data-active-view] [data-seg] { animation: ax-rise 280ms var(--ax-ease) both; scroll-margin-top: 11rem; }
/* Inside a view the cards stack with one even rhythm (beats the mt-6 used for the no-JS long page) */
.ax-cust[data-active-view] [data-seg] { margin-top: 0; margin-bottom: 1.5rem; }

/* Plain tables inside cards → system table look (alignment classes on th/td are kept) */
.ax-cust .ax-card table th { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ax-sep); font-size: 0.75rem; font-weight: 500; color: var(--ax-label-2); white-space: nowrap; }
.ax-cust .ax-card table td { padding: 0.625rem 0.75rem; }
/* Separate borders so row highlights can have rounded ends (collapsed tables ignore border-radius).
   Row separators move from <tr> (not painted in this model) onto the cells. */
.ax-cust .ax-card table { border-collapse: separate; border-spacing: 0; }
.ax-cust .ax-card :is(thead, tbody, tfoot, tr), .ax-cust .ax-card .divide-y > * { border-color: var(--ax-sep); }
.ax-cust .ax-card tbody tr + tr > td { border-top: 1px solid var(--ax-sep); }
.ax-cust .ax-card tbody td { transition: background-color 150ms ease; }
.ax-cust .ax-card tbody tr:hover { background: none; }
.ax-cust .ax-card tbody tr:hover > td { background-color: var(--ax-fill-2); }
.ax-cust .ax-card tbody tr:hover > td,
.ax-cust .ax-card tfoot tr > td { border-top-color: transparent; }
.ax-cust .ax-card tbody tr:hover + tr > td { border-top-color: transparent; }
.ax-cust .ax-card :is(tbody tr:hover, tfoot tr) > td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.ax-cust .ax-card :is(tbody tr:hover, tfoot tr) > td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* Totals rows: the legacy light gradient (bg-gradient-to-r from-slate-50 …) has no dark variant and turned
   white-on-white in dark mode. Replace it with a theme-aware tinted pill spaced off the last row. */
.ax-cust .ax-card tfoot tr { background: none !important; background-image: none !important; border-top-width: 0; }
.ax-cust .ax-card tfoot tr > td { background-color: var(--ax-fill-2); padding-top: 0.875rem; padding-bottom: 0.875rem; }
html.dark .ax-cust .ax-card tfoot tr > td { background-color: rgba(255, 255, 255, 0.06); }
.ax-cust .ax-card table a { color: var(--ax-link); text-decoration: none; font-weight: 500; }
.ax-cust .ax-card table a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .ax-cust[data-active-view] [data-seg] { animation: none; }
}
/* Printing the statement must work from any view: force its card back in, drop the chrome */
@media print {
    .ax-cust[data-active-view] [data-seg="statement"] { display: block !important; animation: none !important; }
    .ax-cust .ax-ohead-slot, .ax-cust .ax-tiles { display: none !important; }
}
/* HIG: segments keep equal width */
.ax-cust-views .ax-segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ax-cust-views .segmented-btn { justify-content: center; text-align: center; padding: 0 1rem; }

/* Dark mode: legacy tinted status pills (bg-*-100 + text-*-800) have no dark variant → light pill, pale text.
   Remap them to translucent system tints inside the restyled pages. */
html.dark :is(.ax-order, .ax-cust) :is(.rounded-full, .rounded):is(.bg-emerald-100, .bg-green-100) { background-color: rgba(48, 209, 88, 0.16); color: #30d158; }
html.dark :is(.ax-order, .ax-cust) :is(.rounded-full, .rounded).bg-amber-100 { background-color: rgba(255, 159, 10, 0.18); color: #ffb340; }
html.dark :is(.ax-order, .ax-cust) :is(.rounded-full, .rounded).bg-red-100 { background-color: rgba(255, 69, 58, 0.18); color: #ff6961; }
html.dark :is(.ax-order, .ax-cust) :is(.rounded-full, .rounded).bg-blue-100 { background-color: rgba(10, 132, 255, 0.18); color: #64aaff; }
html.dark :is(.ax-order, .ax-cust) :is(.rounded-full, .rounded).bg-slate-100 { background-color: var(--ax-fill); color: var(--ax-label-2); }

/* "Show All" — sits after the segmented control as its own capsule (HIG: don't mix a different kind of
   choice into the segmented group). Pressed = accent-filled glass, like the prominent buttons. */
.ax-cust-views { display: flex; align-items: center; gap: 0.5rem; }
.ax-viewall {
    display: inline-flex; flex: none; align-items: center; gap: 0.375rem;
    min-height: 1.75rem; padding: 0 0.875rem; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    color: var(--ax-link);
    border: 1px solid var(--lg-rim);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), 0 4px 12px -6px rgba(15, 23, 42, 0.18);
    transition: transform 120ms var(--ax-ease), filter 150ms ease, color 150ms ease;
}
.ax-viewall svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.ax-viewall:hover { filter: brightness(1.04); }
.ax-viewall:active { transform: scale(0.96); }
.ax-viewall:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-viewall[aria-pressed="true"] {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%), var(--ax-accent-solid);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(43, 82, 163, 0.60);
}
@media (prefers-reduced-motion: reduce) { .ax-viewall:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .ax-viewall:not([aria-pressed="true"]) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lg-solid); } }

/* ── Auth pages (login / forgot / reset / MFA) — auth_head.php shell + auth/login.php ─────────────
   Ambient colour field (content layer) with a single Liquid Glass sheet floating over it: HIG allows glass
   over visually rich backgrounds, and the sign-in sheet is the only control surface on the page.
   Selectors are prefixed `html body.auth-page` to outrank the legacy `.auth-page …` rules in style.css. */
html body.auth-page,
html.dark body.auth-page { background: var(--ax-bg); background-image: none; }
html.dark body.auth-page { background: #000; }

.ax-auth-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ax-auth-ambient span {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.ax-auth-ambient span:nth-child(1) { top: -16vmax; left: -10vmax; background: #2b52a3; animation: ax-drift-a 26s ease-in-out infinite alternate; }
.ax-auth-ambient span:nth-child(2) { top: -8vmax; right: -14vmax; background: #f28f2d; opacity: 0.38; animation: ax-drift-b 32s ease-in-out infinite alternate; }
.ax-auth-ambient span:nth-child(3) { bottom: -20vmax; left: 22vw; background: #6155f5; opacity: 0.32; animation: ax-drift-c 38s ease-in-out infinite alternate; }
html.dark .ax-auth-ambient span { opacity: 0.42; }
html.dark .ax-auth-ambient span:nth-child(2) { opacity: 0.26; }
@keyframes ax-drift-a { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes ax-drift-b { to { transform: translate(-12vmax, 14vmax) scale(0.92); } }
@keyframes ax-drift-c { to { transform: translate(-10vmax, -12vmax) scale(1.08); } }
html body.auth-page .auth-shell { z-index: 1; }

/* The sheet */
html body.auth-page .auth-card,
html.dark body.auth-page .auth-card {
    max-width: 24rem;
    padding: 2.25rem 2rem 1.75rem;
    border: 1px solid var(--lg-rim);
    border-radius: 30px;
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), 0 30px 80px -24px rgba(15, 23, 42, 0.35), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    animation: ax-sheet-in 620ms var(--ax-ease) both;
}
html.dark body.auth-page .auth-card { box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
@keyframes ax-sheet-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Theme button → glass circle */
html body.auth-page .auth-theme-btn,
html.dark body.auth-page .auth-theme-btn {
    border-radius: 999px;
    border: 1px solid var(--lg-rim);
    color: var(--ax-label);
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 1px 0 var(--lg-specular), 0 0 0 0.5px var(--lg-edge), 0 6px 16px -8px rgba(15, 23, 42, 0.3);
    transition: transform 120ms var(--ax-ease), filter 150ms ease;
    cursor: pointer;
}
html body.auth-page .auth-theme-btn:hover { filter: brightness(1.05); }
html body.auth-page .auth-theme-btn:active { transform: scale(0.94); }
html body.auth-page .auth-theme-btn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* Brand / title */
.ax-auth-brand { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.ax-auth-icon {
    display: grid; width: 4.5rem; height: 4.5rem; place-items: center;
    border-radius: 22.5%;
    background: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 24px -10px rgba(15, 23, 42, 0.35);
    animation: ax-icon-in 700ms var(--ax-ease) 80ms both;
}
.ax-auth-icon img { width: 76%; height: 76%; object-fit: contain; }
@keyframes ax-icon-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.ax-auth-title { text-align: center; font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ax-label); }
.ax-auth-sub { margin-top: 0.25rem; margin-bottom: 1.75rem; text-align: center; font-size: 0.9375rem; color: var(--ax-label-2); }

/* Error banner + a single shake of the fields (HIG feedback: show what went wrong right where it happened) */
.ax-auth-alert {
    display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; padding: 0.625rem 0.75rem;
    border-radius: 12px; font-size: 0.875rem; line-height: 1.35;
    color: #c6150a; background: rgba(255, 59, 48, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 59, 48, 0.3);
    animation: ax-rise 320ms var(--ax-ease) both;
}
html.dark .ax-auth-alert { color: #ff6961; background: rgba(255, 69, 58, 0.14); }
.ax-auth-alert svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.0625rem; }
.ax-auth-form.has-error .ax-fieldgroup { animation: ax-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 120ms both; }
@keyframes ax-shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

/* Inset grouped fields with floating labels (one rounded group, hairline between rows) */
.ax-fieldgroup {
    overflow: hidden;
    border-radius: 14px;
    background: var(--ax-card);
    box-shadow: inset 0 0 0 0.5px var(--ax-sep), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 200ms var(--ax-ease);
}
html.dark .ax-fieldgroup { background: rgba(28, 28, 30, 0.72); }
.ax-fieldgroup:focus-within { box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent); }
.ax-float { position: relative; }
.ax-float + .ax-float::before { content: ""; position: absolute; top: 0; left: 1rem; right: 0; height: 0.5px; background: var(--ax-sep); }
.ax-float__input {
    display: block; width: 100%; height: 3.5rem;
    padding: 1.375rem 1rem 0.375rem;
    border: 0; outline: none; background: transparent;
    font-size: 1rem; /* 16px: no iOS zoom on focus */
    color: var(--ax-label);
}
.ax-float--secure .ax-float__input { padding-right: 3.25rem; }
.ax-float__label {
    position: absolute; top: 0.5625rem; left: 1rem;
    font-size: 1rem; line-height: 1.5rem; color: var(--ax-label-2);
    transform-origin: left top;
    transform: translateY(0.4375rem);
    pointer-events: none;
    transition: transform 200ms var(--ax-ease), color 200ms ease;
}
.ax-float__input:focus + .ax-float__label,
.ax-float__input:not(:placeholder-shown) + .ax-float__label,
.ax-float__input:-webkit-autofill + .ax-float__label { transform: translateY(-0.125rem) scale(0.75); }
.ax-float__input:focus + .ax-float__label { color: var(--ax-accent); }
/* Keep Chrome's autofill from painting a yellow block inside the glass */
.ax-float__input:-webkit-autofill,
.ax-float__input:-webkit-autofill:hover,
.ax-float__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ax-label);
    -webkit-box-shadow: 0 0 0 100px var(--ax-card) inset;
    caret-color: var(--ax-label);
    transition: background-color 9999s;
}
html.dark .ax-float__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #1c1c1e inset; }

.ax-reveal {
    position: absolute; top: 50%; right: 0.5rem;
    display: grid; width: 2.75rem; height: 2.75rem; place-items: center; /* 44pt hit target */
    border-radius: 999px; color: var(--ax-label-3);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.ax-reveal:hover { background: var(--ax-fill-2); color: var(--ax-label-2); }
.ax-reveal:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: -2px; }
.ax-reveal svg { width: 1.25rem; height: 1.25rem; }
.ax-reveal__hide, .ax-reveal[aria-pressed="true"] .ax-reveal__show { display: none; }
.ax-reveal[aria-pressed="true"] .ax-reveal__hide { display: block; }

.ax-capslock { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding-left: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: #b25000; animation: ax-rise 200ms var(--ax-ease) both; }
.ax-capslock[hidden] { display: none; }
html.dark .ax-capslock { color: #ffb340; }
.ax-capslock svg { width: 0.9375rem; height: 0.9375rem; }

/* Prominent action: accent-tinted glass capsule, full width, ≥44pt */
.ax-auth-submit {
    position: relative; display: flex; width: 100%; min-height: 3.125rem; margin-top: 1.25rem;
    align-items: center; justify-content: center; gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
    font-size: 1.0625rem; font-weight: 600; color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 55%), var(--ax-accent-solid);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 10px 24px -10px rgba(43, 82, 163, 0.75);
    cursor: pointer;
    transition: transform 120ms var(--ax-ease), filter 150ms ease, box-shadow 200ms ease;
}
.ax-auth-submit:hover { filter: brightness(1.08); }
.ax-auth-submit:active { transform: scale(0.98); }
.ax-auth-submit:focus-visible { outline: 3px solid var(--ax-accent-fill); outline-offset: 2px; box-shadow: 0 0 0 1.5px var(--ax-accent); }
.ax-auth-submit:disabled { cursor: progress; }
.ax-spinner { display: none; width: 1.125rem; height: 1.125rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: ax-spin 700ms linear infinite; }
.ax-auth-submit.is-loading .ax-spinner { display: inline-block; }
.ax-auth-submit.is-loading { filter: saturate(0.9); }
@keyframes ax-spin { to { transform: rotate(360deg); } }

.ax-auth-links { margin-top: 1.25rem; text-align: center; font-size: 0.9375rem; }
.ax-auth-links a { color: var(--ax-link); font-weight: 500; text-decoration: none; border-radius: 6px; padding: 0.25rem 0.375rem; transition: background-color 150ms ease; }
.ax-auth-links a:hover { background: var(--ax-fill-2); }
.ax-auth-links a:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* The other auth pages keep their markup; give their fields the same filled Apple look */
html body.auth-page .auth-input,
html.dark body.auth-page .auth-input {
    min-height: 2.75rem; border-color: transparent; border-radius: 12px;
    color: var(--ax-label); background-color: var(--ax-fill-2);
    transition: background-color 180ms var(--ax-ease), box-shadow 180ms var(--ax-ease);
}
html body.auth-page .auth-input:focus,
html.dark body.auth-page .auth-input:focus {
    border-color: transparent; background-color: var(--ax-card);
    box-shadow: 0 0 0 4px var(--ax-accent-fill), 0 0 0 1.5px var(--ax-accent);
}
html body.auth-page .auth-card :is(button[type="submit"], a).bg-brand-blue {
    border-radius: 999px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 20px -10px rgba(43, 82, 163, 0.7);
    transition: transform 120ms var(--ax-ease), filter 150ms ease;
}
html body.auth-page .auth-card :is(button[type="submit"], a).bg-brand-blue:active { transform: scale(0.98); }

/* Footer bar sits on the ambient field */
html body.auth-page .auth-footer,
html.dark body.auth-page .auth-footer { position: relative; z-index: 1; background: transparent; border-top-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
    .ax-auth-ambient span, html body.auth-page .auth-card, .ax-auth-icon, .ax-auth-alert,
    .ax-auth-form.has-error .ax-fieldgroup, .ax-capslock { animation: none !important; }
    .ax-float__label { transition: none; }
    .ax-spinner { animation-duration: 1.6s; }
}
@media (prefers-reduced-transparency: reduce) {
    html body.auth-page .auth-card, html.dark body.auth-page .auth-card,
    html body.auth-page .auth-theme-btn, html.dark body.auth-page .auth-theme-btn {
        -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lg-solid);
    }
    .ax-auth-ambient { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body.auth-page .auth-card, html.dark body.auth-page .auth-card { background: var(--lg-solid); }
}
@media (prefers-contrast: more) {
    html body.auth-page .auth-card { border-color: var(--ax-label-3); }
    .ax-fieldgroup { box-shadow: inset 0 0 0 1px var(--ax-label-3); }
}

/* ── Developer console (ADR-028) — page scope .ax-dev ─────────────────────
   Content stays solid (ax-card); only the section switcher / filter are glass controls. */
.ax-dev .ax-dev-mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ax-dev .ax-dev-code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125em; padding: 0.0625rem 0.375rem; border-radius: 6px; background: var(--ax-fill); color: var(--ax-label); white-space: nowrap; }

/* Segmented controls as links: equal-width segments, current page = selected lens */
.ax-dev .ax-dev-switch,
.ax-dev .ax-dev-filter { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; overflow-x: auto; }
.ax-dev .ax-segmented a.segmented-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ax-dev .ax-segmented a.segmented-btn:active { transform: scale(0.97); }
.ax-dev .segmented-btn[aria-current="page"],
.ax-dev .segmented-btn[aria-current="page"]:hover {
    font-weight: 600;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.86) 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 3px 8px -2px rgba(0, 0, 0, 0.18);
}
html.dark .ax-dev .segmented-btn[aria-current="page"],
html.dark .ax-dev .segmented-btn[aria-current="page"]:hover {
    background: linear-gradient(180deg, rgba(140, 140, 146, 0.60) 0%, rgba(99, 99, 102, 0.50) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.5);
}
.ax-dev .segmented-btn { transition: background-color 200ms var(--ax-ease), box-shadow 200ms var(--ax-ease), transform 120ms var(--ax-ease); }
.ax-dev .ax-dev-count { min-width: 1.25rem; padding: 0 0.375rem; border-radius: 999px; background: var(--ax-fill); font-size: 0.6875rem; font-weight: 600; line-height: 1.125rem; color: var(--ax-label-2); font-variant-numeric: tabular-nums; }
.ax-dev .ax-dev-count.is-alert { background: var(--ax-red-v); color: #fff; }

/* Status hero: one glance answer, like Apple's System Status */
.ax-dev .ax-dev-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.5rem; }
.ax-dev .ax-dev-hero__glyph { display: grid; flex: none; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; color: #fff; background: var(--ax-green-v); box-shadow: 0 6px 18px -6px var(--ax-green-v); }
.ax-dev .ax-dev-hero.is-warn .ax-dev-hero__glyph { background: var(--ax-orange-v); box-shadow: 0 6px 18px -6px var(--ax-orange-v); }
.ax-dev .ax-dev-hero.is-fail .ax-dev-hero__glyph { background: var(--ax-red-v); box-shadow: 0 6px 18px -6px var(--ax-red-v); }
.ax-dev .ax-dev-hero__glyph svg { width: 1.875rem; height: 1.875rem; }
.ax-dev .ax-dev-hero__text { min-width: 12rem; flex: 1; }
.ax-dev .ax-dev-hero__title { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ax-label); }
.ax-dev .ax-dev-hero__sub { margin-top: 0.125rem; font-size: 0.9375rem; color: var(--ax-label-2); font-variant-numeric: tabular-nums; }

/* Grouped lists: Settings-style tinted squares carry the status */
.ax-dev .ax-dev-grid { display: grid; gap: 1.5rem 1.25rem; }
@media (min-width: 1024px) { .ax-dev .ax-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-dev .ax-dev-grouplabel { margin: 0 0 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--ax-label-2); }
.ax-dev .ax-dev-status { display: grid; flex: none; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 0.4375rem; color: #fff; background: var(--ax-green-v); }
.ax-dev .ax-dev-status svg { width: 1.0625rem; height: 1.0625rem; }
.ax-dev .ax-dev-status.is-warn { background: var(--ax-orange-v); }
.ax-dev .ax-dev-status.is-fail { background: var(--ax-red-v); }
.ax-dev .ax-row-main > .ax-row-title,
.ax-dev .ax-row-main > .ax-row-sub { display: block; }
.ax-dev .ax-row-sub { white-space: normal; overflow-wrap: anywhere; }

/* Capsules */
.ax-dev .ax-dev-cap.is-ok      { color: var(--ax-green);  background: rgba(52, 199, 89, 0.14); }
.ax-dev .ax-dev-cap.is-warn    { color: var(--ax-orange); background: rgba(255, 149, 0, 0.14); }
.ax-dev .ax-dev-cap.is-fail    { color: var(--ax-red);    background: rgba(255, 56, 60, 0.12); }
.ax-dev .ax-dev-cap.is-info    { color: var(--ax-blue);   background: rgba(0, 136, 255, 0.12); }
.ax-dev .ax-dev-type { flex: none; min-width: 3.25rem; justify-content: center; text-transform: lowercase; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; }
.ax-dev .ax-dev-type.t-feat     { color: var(--ax-blue);   background: rgba(0, 136, 255, 0.12); }
.ax-dev .ax-dev-type.t-fix      { color: var(--ax-orange); background: rgba(255, 149, 0, 0.14); }
.ax-dev .ax-dev-type.t-style    { color: var(--ax-pink);   background: rgba(255, 45, 85, 0.11); }
.ax-dev .ax-dev-type.t-refactor { color: var(--ax-teal);   background: rgba(0, 195, 208, 0.13); }
.ax-dev .ax-dev-type.t-perf     { color: var(--ax-green);  background: rgba(52, 199, 89, 0.14); }
.ax-dev .ax-dev-type.t-docs,
.ax-dev .ax-dev-type.t-test     { color: var(--ax-indigo); background: rgba(97, 85, 245, 0.12); }
.ax-dev .ax-dev-hash { flex: none; font-size: 0.8125rem; color: var(--ax-label-2); }
.ax-dev .ax-dev-types { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ax-dev .ax-dev-types .ax-dev-type { min-height: 1.75rem; gap: 0.375rem; padding: 0 0.75rem; text-transform: none; font-family: inherit; font-size: 0.8125rem; }
.ax-dev .ax-dev-typecount { font-weight: 700; font-variant-numeric: tabular-nums; }
.ax-dev .ax-dev-commit.is-head .ax-row { background: var(--ax-accent-fill); }

/* Deployed card */
.ax-dev .ax-dev-deployed { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; }
.ax-dev .ax-dev-deployed .ax-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; }
.ax-dev .ax-dev-deployed .ax-icon svg { width: 1.5rem; height: 1.5rem; }
.ax-dev .ax-dev-deployed__main { min-width: 0; flex: 1; }
.ax-dev .ax-dev-deployed__hash { margin: 0.125rem 0 0.375rem; font-size: 2rem; line-height: 2.375rem; font-weight: 600; color: var(--ax-label); }
.ax-dev .ax-dev-deployed .ax-meta span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.ax-dev .ax-dev-deployed .ax-meta svg { width: 0.9375rem; height: 0.9375rem; }
.ax-dev .ax-dev-fullhash { font-size: 0.8125rem; overflow-wrap: anywhere; }

/* Environment disclosure (HIG disclosure control) */
.ax-dev .ax-dev-disclosure > summary { display: flex; min-height: 3.5rem; align-items: center; gap: 0.75rem; padding: 0.625rem 1.25rem; list-style: none; cursor: pointer; transition: background-color 150ms var(--ax-ease); }
.ax-dev .ax-dev-disclosure > summary::-webkit-details-marker { display: none; }
.ax-dev .ax-dev-disclosure > summary:hover { background: var(--ax-fill-2); }
.ax-dev .ax-dev-disclosure > summary:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: -2px; }
.ax-dev .ax-dev-disclosure > summary .ax-row-title { flex: 1; }
.ax-dev .ax-dev-disclosure > summary > svg { width: 0.875rem; height: 0.875rem; color: var(--ax-label-3); transition: transform 250ms var(--ax-ease); }
.ax-dev .ax-dev-disclosure[open] > summary > svg { transform: rotate(90deg); }
.ax-dev .ax-dev-envgrid { display: grid; gap: 0.375rem; margin: 0; padding: 0.25rem 1.25rem 1.25rem; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ax-dev .ax-dev-envgrid li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.25rem; padding: 0 0.75rem; border-radius: 10px; background: var(--ax-fill-2); font-size: 0.8125rem; color: var(--ax-label); }
.ax-dev .ax-dev-envgrid .ax-dev-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-dev .ax-dev-envstate { flex: none; font-size: 0.75rem; font-weight: 600; color: var(--ax-green); }
.ax-dev .ax-dev-envgrid .is-unset .ax-dev-envstate { color: var(--ax-label-3); }

/* Job table */
.ax-dev .ax-dev-jobs .ax-dev-error { max-width: 26rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.ax-dev .ax-dev-actions { text-align: right; white-space: nowrap; }
.ax-dev .ax-dev-actions .ax-btn svg { width: 0.875rem; height: 0.875rem; }
.ax-dev .ax-dev-empty__glyph { display: inline-grid; width: 3rem; height: 3rem; margin-bottom: 0.75rem; place-items: center; color: var(--ax-green-v); }
.ax-dev .ax-dev-empty__glyph svg { width: 3rem; height: 3rem; }
.ax-dev .ax-dev-empty .ax-headline { margin-bottom: 0.25rem; color: var(--ax-label); }

@media (prefers-reduced-motion: reduce) {
    .ax-dev .segmented-btn, .ax-dev .ax-dev-disclosure > summary, .ax-dev .ax-dev-disclosure > summary > svg { transition: none; }
    .ax-dev .ax-segmented a.segmented-btn:active { transform: none; }
}
@media (prefers-contrast: more) {
    .ax-dev .ax-dev-cap, .ax-dev .ax-dev-type, .ax-dev .ax-dev-envgrid li { box-shadow: inset 0 0 0 1px currentColor; }
}

/* ── Developer console phase 2 (ADR-029): requests, test runs, errors, what's new ──
   Same .ax-dev scope; the requester pages and What's new reuse it for one visual language. */
.ax-dev.ax-dev-narrow { max-width: 56rem; }
.ax-dev .ax-dev-title { overflow-wrap: anywhere; }
.ax-dev .ax-dev-mt { margin-top: 1.5rem; }
.ax-dev .ax-dev-cap.is-indigo  { color: var(--ax-indigo); background: rgba(97, 85, 245, 0.12); }
.ax-dev .ax-dev-cap.is-neutral { color: var(--ax-label-2); background: var(--ax-fill); }
.ax-dev .ax-dev-cap--lg { min-height: 1.75rem; padding: 0 0.875rem; font-size: 0.8125rem; align-self: flex-end; }
.ax-dev .ax-dev-status.is-idle { background: var(--ax-gray-v); }
.ax-dev .ax-dev-hero.is-idle .ax-dev-hero__glyph { background: var(--ax-gray-v); box-shadow: none; }
.ax-dev .ax-dev-hero.is-ok .ax-dev-hero__glyph { background: var(--ax-green-v); }
.ax-dev .ax-dev-meter { max-width: 28rem; margin: 0.625rem 0 0.375rem; --tone-v: var(--ax-green-v); }
.ax-dev .ax-dev-empty__glyph.is-accent { color: var(--ax-accent); }

/* Kind squares (bug / change / feature) — Settings-style tinted icons */
.ax-dev .ax-dev-kind { display: grid; flex: none; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 0.4375rem; color: #fff; background: var(--ax-blue-v); }
.ax-dev .ax-dev-kind svg { width: 1.0625rem; height: 1.0625rem; }
.ax-dev .ax-dev-kind.k-bug { background: var(--ax-red-v); }
.ax-dev .ax-dev-kind.k-feature, .ax-dev .ax-dev-kind.k-feat { background: var(--ax-indigo-v); }
.ax-dev .ax-dev-kind.k-fix { background: var(--ax-green-v); }
.ax-dev .ax-dev-kind.k-perf { background: var(--ax-orange-v); }

/* Forms: filled borderless fields, labels above, rows aligned to the top */
.ax-dev .ax-dev-formcard { display: grid; gap: 1.125rem; padding: 1.25rem 1.5rem 1.5rem; }
.ax-dev .ax-dev-fieldrow { display: grid; gap: 0.375rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ax-dev .ax-dev-fieldgrid { display: grid; gap: 1.125rem; align-items: start; }
@media (min-width: 640px) { .ax-dev .ax-dev-fieldgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-dev .ax-dev-label { font-size: 0.8125rem; font-weight: 600; color: var(--ax-label-2); }
.ax-dev .ax-field { width: 100%; background-color: var(--ax-fill-2); box-shadow: none; }
.ax-dev textarea.ax-field { min-height: 6rem; padding: 0.625rem 0.75rem; line-height: 1.45; resize: vertical; }
.ax-dev .ax-field[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--ax-red); }
.ax-dev .ax-dev-error-text { font-size: 0.8125rem; color: var(--ax-red); }
.ax-dev .ax-dev-static { min-height: 2.25rem; display: flex; align-items: center; font-size: 0.875rem; color: var(--ax-label-2); }
.ax-dev .ax-dev-help { min-height: 1rem; }
.ax-dev .ax-dev-formactions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.ax-dev .ax-dev-push-left { margin-right: auto; }
.ax-dev .ax-dev-choice { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; }
.ax-dev .ax-dev-choice .segmented-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2rem; cursor: pointer; }
.ax-dev .ax-dev-choice .segmented-btn svg { width: 0.9375rem; height: 0.9375rem; }
.ax-dev .ax-dev-choice .segmented-btn:has(input:checked) {
    font-weight: 600;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.86) 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 3px 8px -2px rgba(0, 0, 0, 0.18);
}
html.dark .ax-dev .ax-dev-choice .segmented-btn:has(input:checked) {
    background: linear-gradient(180deg, rgba(140, 140, 146, 0.60) 0%, rgba(99, 99, 102, 0.50) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.5);
}
.ax-dev .ax-dev-choice .segmented-btn:has(input:focus-visible) { outline: 2px solid var(--ax-accent); outline-offset: 1px; }
.ax-dev .ax-dev-btn-danger { color: var(--ax-red) !important; }

/* Request detail */
.ax-dev .ax-dev-split { display: grid; gap: 0 1.25rem; align-items: start; }
@media (min-width: 1024px) { .ax-dev .ax-dev-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ax-dev .ax-dev-prose { padding: 1.125rem 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ax-label); overflow-wrap: anywhere; }
.ax-dev .ax-dev-prose .ax-footnote { margin-top: 0.875rem; }
.ax-dev .ax-dev-stepcard { padding: 1.25rem 1.5rem; }
.ax-dev .ax-dev-reply { margin-top: 1.125rem; padding: 0.875rem 1rem; border-radius: var(--ax-radius-sm); background: var(--ax-fill-2); font-size: 0.9375rem; color: var(--ax-label); }
.ax-dev .ax-dev-reply .ax-eyebrow { margin-bottom: 0.25rem; }
.ax-dev .ax-dev-rejected { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--ax-label); }
.ax-dev .ax-dev-actionbar { display: grid; gap: 0.75rem; padding: 1rem 1.25rem; }
.ax-dev .ax-dev-inlineempty { padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--ax-label-2); }
.ax-dev .ax-dev-timeline { margin: 0; padding: 0.75rem 1.25rem 1rem; list-style: none; }
.ax-dev .ax-dev-timeline li { position: relative; display: flex; gap: 0.75rem; padding: 0.5rem 0; }
.ax-dev .ax-dev-timeline li + li::before { content: ""; position: absolute; left: 0.3125rem; top: -0.5rem; height: 1rem; width: 2px; border-radius: 2px; background: var(--ax-sep); }
.ax-dev .ax-dev-timeline__dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.25rem; border-radius: 999px; background: var(--ax-blue-v); }
.ax-dev .ax-dev-timeline li.is-ok .ax-dev-timeline__dot { background: var(--ax-green-v); }
.ax-dev .ax-dev-timeline li.is-warn .ax-dev-timeline__dot { background: var(--ax-orange-v); }
.ax-dev .ax-dev-timeline li.is-fail .ax-dev-timeline__dot { background: var(--ax-red-v); }
.ax-dev .ax-dev-timeline li.is-indigo .ax-dev-timeline__dot { background: var(--ax-indigo-v); }
.ax-dev .ax-dev-timeline__note { margin-top: 0.375rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--ax-fill-2); font-size: 0.875rem; color: var(--ax-label); }

/* Test runs */
.ax-dev .ax-dev-scenario .ax-dev-disclosure > summary { min-height: 3.5rem; }
.ax-dev .ax-dev-scenario .ax-row-main { min-width: 0; flex: 1; }
.ax-dev .ax-dev-code-label { margin-right: 0.25rem; padding: 0 0.375rem; border-radius: 6px; background: var(--ax-fill); font-size: 0.75rem; font-weight: 600; color: var(--ax-label-2); }
.ax-dev .ax-dev-scenario__body { padding: 0 1.25rem 1.25rem 3.75rem; }
.ax-dev .ax-dev-steps { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0 0 1rem; font-size: 0.875rem; color: var(--ax-label); }
.ax-dev .ax-dev-steps dt { font-weight: 600; color: var(--ax-label-2); }
.ax-dev .ax-dev-resultform { display: grid; gap: 0.625rem; }
.ax-dev .ax-dev-res svg { width: 0.875rem; height: 0.875rem; }
.ax-dev .ax-dev-res.is-ok   { color: var(--ax-green);  background: rgba(52, 199, 89, 0.14); }
.ax-dev .ax-dev-res.is-fail { color: var(--ax-red);    background: rgba(255, 56, 60, 0.12); }
.ax-dev .ax-dev-res.is-warn { color: var(--ax-orange); background: rgba(255, 149, 0, 0.14); }
.ax-dev .ax-dev-res:hover { filter: brightness(0.97); }
.ax-dev .ax-dev-editlink { margin-left: auto; font-size: 0.8125rem; }
@media (max-width: 639px) { .ax-dev .ax-dev-scenario__body { padding-left: 1.25rem; } }
/* Release checks (ADR-030): section intro, nested group labels, collapsed library, critical checkbox */
.ax-dev .ax-section > .ax-footnote { margin: -0.25rem 0 0.75rem 1.25rem; }
.ax-dev .ax-section h3.ax-dev-grouplabel { margin-top: 1rem; font-weight: 500; }
.ax-dev .ax-dev-library > summary .ax-row-main { display: grid; gap: 0.125rem; flex: 1; }
.ax-dev .ax-dev-library[open] { padding-bottom: 0.75rem; }
.ax-dev .ax-dev-check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.9375rem; color: var(--ax-label); cursor: pointer; }
.ax-dev .ax-dev-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--ax-accent); }
.ax-dev .ax-dev-check input:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* Error inbox */
.ax-dev .ax-dev-errrow { align-items: flex-start; padding-top: 0.875rem; padding-bottom: 0.875rem; }
.ax-dev .ax-dev-errrow .ax-row-title { font-weight: 500; overflow-wrap: anywhere; }
.ax-dev .ax-dev-occ { display: flex; flex: none; flex-direction: column; align-items: flex-end; min-width: 3.5rem; }

/* ── Create order (order/form.php) — page scope .ax-ocreate (wrapper also carries .ax-order for the shared field/button layer) ── */

/* 1. Guards: ax-* display rules load after Tailwind and would beat `.hidden`; panel rhythm (panels are display:contents children) */
.ax-ocreate :is(.ax-btn, .ax-notice, .ax-ocreate-field).hidden { display: none !important; }
@media (min-width: 768px) {
    .ax-ocreate [data-wizard-panel] + [data-wizard-panel] { margin-top: 1.5rem; }
}
/* Open cards hold dropdowns: lift them above the cards that follow (entrance animation creates stacking contexts) */
.ax-ocreate .ax-card--open { position: relative; z-index: 2; }
.ax-ocreate [data-wizard-panel="1"] .ax-card--open { z-index: 3; }

/* 2. Head: static large title by default; progressive scroll-linked condense (no script) where scroll timelines exist */
@property --ocp { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes ax-ocreate-condense { from { --ocp: 0; } to { --ocp: 1; } }
.ax-ocreate .ax-ohead-slot { position: relative; top: auto; }
@supports (animation-timeline: scroll()) {
    @media (min-width: 768px) {
        .ax-ocreate .ax-ohead-slot { position: sticky; top: calc(var(--oms-header-height) + var(--lg-gap) * 2 + 0.5rem); min-height: 5.25rem; }
        .ax-ocreate .ax-ohead {
            --p: var(--ocp);
            --c: clamp(0, var(--ocp) / 0.6, 1);
            --a: clamp(0, (var(--ocp) - 0.25) / 0.75, 1);
            animation: ax-ocreate-condense linear both;
            animation-duration: auto;
            animation-timeline: scroll(root block);
            animation-range: 0px 120px;
        }
    }
    @media (min-width: 768px) and (prefers-reduced-motion: reduce) {
        .ax-ocreate .ax-ohead { animation-timing-function: steps(1, end); animation-range: 0px 4px; }
    }
}

/* 3. Mobile stepper — state from the classes order-wizard.js already toggles (.text-brand-blue = current) */
.ax-ocreate .ax-ocreate-steps .ax-progress__step { color: inherit; font-weight: inherit; }
.ax-ocreate .ax-ocreate-steps .ax-progress__dot svg { opacity: 0; transition: opacity 200ms var(--ax-ease); }
.ax-ocreate .ax-ocreate-steps .ax-progress__dot { transition: background-color 200ms var(--ax-ease), box-shadow 200ms var(--ax-ease); }
.ax-ocreate .ax-ocreate-steps .ax-progress__step.text-brand-blue::before,
.ax-ocreate .ax-ocreate-steps .ax-progress__step:has(~ .text-brand-blue)::before { background: var(--ax-green-v); }
.ax-ocreate .ax-ocreate-steps .ax-progress__step.text-brand-blue .ax-progress__dot { background: var(--ax-accent-solid); box-shadow: 0 0 0 4px var(--ax-accent-fill); }
.ax-ocreate .ax-ocreate-steps .ax-progress__step.text-brand-blue .ax-progress__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--ax-accent);
    opacity: 0;
    animation: ax-progress-pulse 2.4s var(--ax-ease) infinite;
}
.ax-ocreate .ax-ocreate-steps .ax-progress__label { color: var(--ax-label-2); }
.ax-ocreate .ax-ocreate-steps .ax-progress__step.text-brand-blue .ax-progress__label { font-weight: 600; color: var(--ax-label); }
.ax-ocreate .ax-ocreate-steps .ax-progress__step:has(~ .text-brand-blue) .ax-progress__dot { background: var(--ax-green-v); box-shadow: none; }
.ax-ocreate .ax-ocreate-steps .ax-progress__step:has(~ .text-brand-blue) .ax-progress__dot svg { opacity: 1; }
.ax-ocreate .ax-ocreate-steps .ax-progress__step:has(~ .text-brand-blue) .ax-progress__label { color: var(--ax-label-2); }

/* 4. Field layout (dev form-card grid, top-aligned rows) */
.ax-ocreate .ax-ocreate-grid { display: grid; gap: 1.125rem; align-items: start; max-width: 52rem; padding: 0 1.25rem 1.25rem; }
@media (min-width: 640px) { .ax-ocreate .ax-ocreate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ax-ocreate .ax-ocreate-field { display: grid; gap: 0.375rem; min-width: 0; align-content: start; }
.ax-ocreate .ax-ocreate-field--wide { grid-column: 1 / -1; }
.ax-ocreate .ax-ocreate-label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ax-label-2); }
.ax-ocreate #customer_id-label + :is(.searchable-select, select) { max-width: 28rem; }
.ax-ocreate .ax-ocreate-field :is(input:not([type="checkbox"]), select) { padding: 0 0.75rem; font-size: 0.875rem; }
.ax-ocreate textarea#oc-notes { resize: vertical; padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.ax-ocreate .searchable-select-input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ocreate .ax-ocreate-discount { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: 0.5rem; }
.ax-ocreate #order-discount-value { text-align: right; font-variant-numeric: tabular-nums; }

/* 5. Searchable dropdown: solid popover (content rows → no glass) */
.ax-ocreate .searchable-select-list {
    border: 0;
    border-radius: 12px;
    padding: 0.25rem;
    background: var(--ax-card) !important;
    box-shadow: var(--ax-shadow-hover), 0 12px 32px -12px rgba(0, 0, 0, 0.25);
}
.ax-ocreate .searchable-select-list li { color: var(--ax-label-2); }
.ax-ocreate .searchable-select-list .searchable-select-option { border-radius: 8px; color: var(--ax-label); transition: background-color 150ms var(--ax-ease); }
.ax-ocreate .searchable-select-list .searchable-select-option:hover { background-color: var(--ax-fill-2); }
.ax-ocreate .searchable-select-list .searchable-select-option.bg-blue-50 { background-color: var(--ax-accent-fill) !important; color: var(--ax-label); }

/* 6. Customer info tiles (legacy .ci-* restyled in scope; JS tone classes kept) */
.ax-ocreate .ci-grid { gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ax-ocreate .ci-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ax-ocreate .ci-card,
html.dark .ax-ocreate .ci-card { padding: 0.75rem 0.875rem; border: 0; border-color: transparent; border-radius: var(--ax-radius-sm); background: var(--ax-fill-2); box-shadow: none; }
.ax-ocreate .ci-card-label { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ax-label-2); }
.ax-ocreate .ci-card-label svg { width: 12px; height: 12px; opacity: 0.8; }
.ax-ocreate .ci-card-value,
html.dark .ax-ocreate .ci-card-value { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ax-label); }
.ax-ocreate .ci-value-danger { color: var(--ax-red) !important; }
.ax-ocreate .ci-value-success { color: var(--ax-green) !important; }
.ax-ocreate .ci-value-warn { color: var(--ax-orange) !important; }
/* Light-mode tone values on --ax-fill-2 need darker ink for 4.5:1 at 17px/600 (dark tokens already pass) */
html:not(.dark) .ax-ocreate .ci-value-success { color: #007a2c !important; }
html:not(.dark) .ax-ocreate .ci-value-warn { color: #b04a00 !important; }
html:not(.dark) .ax-ocreate .ci-value-danger { color: #d1001f !important; }
.ax-ocreate .skeleton-pulse { height: 4.25rem; border-radius: var(--ax-radius-sm); background: var(--ax-fill); }

/* 7. Order lines card: quick add, cells, remove capsule, empty state, hint */
.ax-ocreate .ax-ocreate-quickadd { align-items: flex-start; gap: 0.75rem; padding: 0 1.25rem 1rem; }
.ax-ocreate .ax-ocreate-quickadd > .ax-ocreate-field:first-child { flex: 1 1 16rem; }
.ax-ocreate .ax-ocreate-quickadd > .ax-ocreate-field:nth-child(2) { flex: none; width: 5.5rem; }
.ax-ocreate .ax-ocreate-quickadd #quick-add-qty { text-align: right; font-variant-numeric: tabular-nums; }
.ax-ocreate .ax-ocreate-quickadd #quick-add-btn { align-self: flex-end; }
.ax-ocreate .ax-table th { font-weight: 500; color: var(--ax-label-2); }
.ax-ocreate .ax-ocreate-lines tbody td:nth-child(n+3):nth-child(-n+5) { text-align: right; font-variant-numeric: tabular-nums; }
.ax-ocreate #items-tbody input[readonly],
.ax-ocreate #items-tbody input[readonly]:hover,
.ax-ocreate #items-tbody input[readonly]:focus {
    min-height: 2rem;
    padding-inline: 0;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ax-label);
    cursor: default;
}
.ax-ocreate #items-tbody input[readonly]:focus-visible { box-shadow: 0 0 0 2px var(--ax-accent) !important; border-radius: 6px; }
.ax-ocreate #items-tbody td:nth-child(1) input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--ax-label-2); }
.ax-ocreate #items-tbody td:nth-child(4) input { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
.ax-ocreate #items-tbody td:nth-child(3) input { width: 5rem; padding: 0 0.625rem; text-align: right; font-variant-numeric: tabular-nums; }
.ax-ocreate #items-tbody td.line-total { font-weight: 600; color: var(--ax-label); }
.ax-ocreate .ax-ocreate-lines .remove-line-btn {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ax-red);
    background: rgba(255, 56, 60, 0.10);
    cursor: pointer;
    transition: filter 150ms var(--ax-ease), transform 120ms var(--ax-ease);
}
html.dark .ax-ocreate .ax-ocreate-lines .remove-line-btn { background: rgba(255, 69, 58, 0.18); }
.ax-ocreate .ax-ocreate-lines .remove-line-btn:hover { color: var(--ax-red); filter: brightness(0.96); }
/* Light mode: --ax-red on its 10% tint is 3.98:1; darker ink reaches 5.28:1 (dark mode already passes) */
html:not(.dark) .ax-ocreate .ax-ocreate-lines .remove-line-btn,
html:not(.dark) .ax-ocreate .ax-ocreate-lines .remove-line-btn:hover { color: #c8001c; }
.ax-ocreate .ax-ocreate-lines .remove-line-btn:active { transform: scale(0.96); }
.ax-ocreate .ax-ocreate-lines .remove-line-btn:focus-visible { outline: 2px solid var(--ax-red); outline-offset: 2px; }
.ax-ocreate .ax-ocreate-lines tbody tr { animation: ax-rise 240ms var(--ax-ease) both; }
.ax-ocreate .ax-ocreate-linesempty { display: none; padding: 1.75rem 1.25rem 2rem; text-align: center; }
.ax-ocreate .ax-ocreate-linesempty svg { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto 0.5rem; color: var(--ax-label-3); }
.ax-ocreate .ax-ocreate-linesempty .ax-footnote { margin-top: 0.25rem; font-size: 0.8125rem; }
.ax-ocreate .ax-ocreate-lines:not(:has(#items-tbody tr)) .ax-ocreate-linesempty { display: block; }
.ax-ocreate .ax-ocreate-lines:not(:has(#items-tbody tr)) .order-lines-table thead { display: none; }
.ax-ocreate .ax-ocreate-linehint { margin: 0; padding: 0.75rem 1.25rem 1rem; border-width: 1px 0 0; border-style: solid; border-color: var(--ax-sep); }
@media (min-width: 768px) {
    .ax-ocreate .ax-ocreate-mobileonly { display: none !important; }
}

/* 8. Lines on phones: stacked fill cards (overrides style.css .order-lines-table stacking inside the scope) */
@media (max-width: 767px) {
    .ax-ocreate .order-lines-table tbody tr,
    html.dark .ax-ocreate .order-lines-table tbody tr { margin: 0.75rem 1rem; padding: 0.75rem 0.875rem; border: 0; border-radius: var(--ax-radius-sm); background: var(--ax-fill-2); }
    .ax-ocreate .order-lines-table tbody td,
    .ax-ocreate .order-lines-table tbody td:first-child,
    .ax-ocreate .order-lines-table tbody td:last-child { padding: 0.375rem 0; border-top: 0; }
    .ax-ocreate .order-lines-table tbody td[data-label]::before { font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ax-label-2); }
    .ax-ocreate .ax-table tbody tr:hover { background: var(--ax-fill-2); }
}

/* 9. Product catalogue (desktop): filters, notice, cells, row capsules, empty glyph, footer + pagination */
.ax-ocreate .ax-ocreate-filters { align-items: flex-start; gap: 0.75rem; padding: 0 1.25rem 1rem; border-width: 0 0 1px; border-style: solid; border-color: var(--ax-sep); }
.ax-ocreate .ax-ocreate-filters > div { display: grid; gap: 0.375rem; min-width: 9rem; }
.ax-ocreate .ax-ocreate-filters > div:first-child { flex: 1 1 14rem; }
.ax-ocreate .ax-ocreate-filters > div:last-child { min-width: 7rem; }
.ax-ocreate .ax-ocreate-filters :is(input, select) { width: 100%; padding: 0 0.75rem; font-size: 0.875rem; }
.ax-ocreate .ax-ocreate-filters .ax-ocreate-label { margin: 0; }
.ax-ocreate #order-product-all-warning { margin: 0.75rem 1.25rem 0; }
.ax-ocreate .ax-ocreate-catalog tbody td { color: var(--ax-label); }
.ax-ocreate .ax-ocreate-catalog tbody td:first-child { font-weight: 500; overflow-wrap: anywhere; }
.ax-ocreate .ax-ocreate-catalog tbody td:nth-child(2) { color: var(--ax-label-2); }
.ax-ocreate .ax-ocreate-catalog tbody td:nth-child(5) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--ax-label-2); }
.ax-ocreate .ax-ocreate-catalog tbody td.text-right { font-variant-numeric: tabular-nums; }
html.dark .ax-ocreate .ax-ocreate-catalog tbody tr:hover { background: var(--ax-fill-2) !important; }
.ax-ocreate .ax-ocreate-catalog .add-to-order-btn {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ax-link);
    background: var(--ax-accent-fill);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 150ms var(--ax-ease), transform 120ms var(--ax-ease);
}
.ax-ocreate .ax-ocreate-catalog .add-to-order-btn:hover { color: var(--ax-link); background: var(--ax-fill-3); }
.ax-ocreate .ax-ocreate-catalog .add-to-order-btn:active { transform: scale(0.96); }
.ax-ocreate .ax-ocreate-catalog .add-to-order-btn:focus { box-shadow: none; }
.ax-ocreate .ax-ocreate-catalog .add-to-order-btn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-ocreate .product-image-preview-btn {
    border-color: transparent;
    border-radius: 999px;
    color: var(--ax-link);
    background: var(--ax-fill) !important;
    cursor: pointer;
    transition: background-color 150ms var(--ax-ease), transform 120ms var(--ax-ease);
}
.ax-ocreate .product-image-preview-btn:hover { background: var(--ax-fill-3) !important; }
.ax-ocreate .product-image-preview-btn:active { transform: scale(0.96); }
.ax-ocreate .product-image-preview-btn:focus { box-shadow: none; }
.ax-ocreate .product-image-preview-btn:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-ocreate #order-product-list-empty { padding: 2rem 1.25rem; text-align: center; font-size: 0.875rem; color: var(--ax-label-2); }
.ax-ocreate #order-product-list-empty::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.5rem;
    background: var(--ax-label-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ax-ocreate .ax-ocreate-catfoot { gap: 0.5rem; padding: 0.75rem 1.25rem; border-width: 1px 0 0; border-style: solid; border-color: var(--ax-sep); }
.ax-ocreate #order-product-list-meta { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ax-label-2); }
.ax-ocreate #order-product-list-pagination { align-items: center; gap: 0.375rem; }
.ax-ocreate #order-product-list-pagination button {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ax-link);
    background: var(--ax-fill) !important;
    cursor: pointer;
    transition: background-color 150ms var(--ax-ease), transform 120ms var(--ax-ease);
}
.ax-ocreate #order-product-list-pagination button:hover { background: var(--ax-fill-3) !important; }
.ax-ocreate #order-product-list-pagination button:active { transform: scale(0.96); }
.ax-ocreate #order-product-list-pagination button:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.ax-ocreate #order-product-list-pagination button:disabled { opacity: 0.4; transform: none; cursor: not-allowed; }
.ax-ocreate #order-product-list-pagination span { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ax-label-2); }

/* 10. Review (phones) + summary totals */
.ax-ocreate .ax-ocreate-review dl { margin: 0; }
.ax-ocreate .ax-ocreate-review dl > div { justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 1.25rem; font-size: 0.9375rem; }
.ax-ocreate .ax-ocreate-review dl > div + div { border-top: 1px solid var(--ax-sep); }
.ax-ocreate .ax-ocreate-review dt { flex: none; color: var(--ax-label-2); }
.ax-ocreate .ax-ocreate-review dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--ax-label); }
.ax-ocreate .ax-ocreate-review #wizard-review-lines { font-variant-numeric: tabular-nums; }
.ax-ocreate .ax-totals { border-top: 0; }
.ax-ocreate .ax-totals__inner > div { gap: 1rem; font-size: 0.875rem; }
.ax-ocreate .ax-totals__inner > div > span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ax-label); }
.ax-ocreate .ax-totals__inner > div:last-child { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--ax-sep); }
.ax-ocreate .ax-totals__inner > div:last-child > span:first-child { font-size: 1rem; font-weight: 600; color: var(--ax-label); }
.ax-ocreate .ax-totals__inner > div:last-child > span:last-child { gap: 0.375rem; }
.ax-ocreate #order-total { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ax-label); }
.ax-ocreate .ax-totals__inner > div:last-child > span:last-child > span:last-child { font-size: 0.875rem; font-weight: 500; color: var(--ax-label-2); }

/* 11. Credit banner (JS owns className → style by id + its state classes) and the acknowledgement row */
.ax-ocreate #credit-limit-banner:not(.hidden) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 0 !important;
    border-radius: var(--ax-radius-sm);
    font-size: 0.875rem;
    color: var(--ax-label);
}
.ax-ocreate #credit-limit-banner:not(.hidden)::before {
    content: "!";
    display: inline-flex;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff; /* glyph on a saturated disc — same as .ax-notice__icon */
    background: var(--ax-label-3);
}
.ax-ocreate #credit-limit-banner.bg-red-50 { background: rgba(255, 56, 60, 0.10) !important; box-shadow: inset 0 0 0 0.5px rgba(255, 56, 60, 0.35); }
.ax-ocreate #credit-limit-banner.bg-red-50::before { background: var(--ax-red-v); }
html.dark .ax-ocreate #credit-limit-banner.bg-red-50 { background: rgba(255, 69, 58, 0.16) !important; }
.ax-ocreate #credit-limit-banner.bg-amber-50 { background: rgba(255, 149, 0, 0.12) !important; box-shadow: inset 0 0 0 0.5px rgba(255, 149, 0, 0.35); }
.ax-ocreate #credit-limit-banner.bg-amber-50::before { background: var(--ax-orange-v); }
html.dark .ax-ocreate #credit-limit-banner.bg-amber-50 { background: rgba(255, 159, 10, 0.16) !important; }
.ax-ocreate .ax-ocreate-ack {
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--ax-radius-sm);
    font-size: 0.875rem;
    color: var(--ax-label);
    background: var(--ax-fill-2);
    cursor: pointer;
    transition: background-color 150ms var(--ax-ease);
}
.ax-ocreate .ax-ocreate-ack:hover { background: var(--ax-fill); }
.ax-ocreate .ax-ocreate-ack input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; cursor: pointer; }
.ax-ocreate .ax-ocreate-ack input:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }

/* 12. Form actions: secondary first, primary at the trailing edge (dev form-actions order) */
.ax-ocreate .ax-ocreate-actions { justify-content: flex-end; gap: 0.5rem; }
@media (max-width: 639px) {
    .ax-ocreate .ax-ocreate-actions > * { flex: 1 1 100%; }
}

/* 13. Mobile wizard bar: one floating Liquid Glass capsule (control layer), clear of the home indicator */
.ax-ocreate .ax-ocreate-bar { left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); padding: 0.5rem; border-radius: 999px; }
.ax-ocreate .ax-ocreate-bar .ax-btn { min-height: 2.75rem; }
/* No glass on glass: the bar is already .ax-glass, so the gray capsule inside it is a plain fill */
.ax-ocreate .ax-ocreate-bar .ax-btn--gray { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ax-fill); }
.ax-ocreate .ax-ocreate-bar .ax-btn--gray:hover { background: var(--ax-fill-3); filter: none; }
.ax-ocreate .ax-ocreate-bar__total { display: flex; min-width: 0; flex-direction: column; align-items: center; line-height: 1.2; }
.ax-ocreate .ax-ocreate-bar__total > span:first-child { font-size: 0.6875rem; color: var(--ax-label-2); }
.ax-ocreate #wizard-total { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ax-label); }

/* 14. Pointer + touch targets */
.ax-ocreate :is(button, [role="button"], label[for], .searchable-select-option, select) { cursor: pointer; }
.ax-ocreate :is(button, select, input):disabled { cursor: not-allowed; }
@media (pointer: coarse) {
    .ax-ocreate :is(.ax-btn, .add-to-order-btn, .remove-line-btn, #order-product-list-pagination button) { min-height: 2.75rem; }
}

/* 15. Accessibility media */
@media (prefers-reduced-motion: reduce) {
    .ax-ocreate .ax-ocreate-lines tbody tr { animation: none; }
    .ax-ocreate .ax-ocreate-steps .ax-progress__step.text-brand-blue .ax-progress__dot::after { animation: none; }
    .ax-ocreate :is(.ax-btn, .remove-line-btn, .add-to-order-btn, .product-image-preview-btn, #order-product-list-pagination button):active { transform: none; }
}
@media (prefers-contrast: more) {
    .ax-ocreate :is(.ci-card, .ax-ocreate-ack, .add-to-order-btn, .remove-line-btn, #order-product-list-pagination button) { box-shadow: inset 0 0 0 1px currentColor; }
    .ax-ocreate .ax-card { box-shadow: 0 0 0 1px var(--ax-label-3); }
}