/* Blindex design tokens - HAND WRITTEN.
 *
 * One set of colours, radii, spacing and small components for every custom
 * Blade screen (docs/ui-standard.md, "Look and feel" and "Components"). The
 * screens we draw ourselves read from here, and since 29 Sep 2026 Filament's
 * own components are restyled here too (the "Filament wears the same" block
 * at the end), so the whole admin reads as the 3D workspace's product.
 *
 * Loaded by both panels (AdminPanelProvider and VendorPanelProvider, render
 * hook panels::styles.after, cache-busted by filemtime). There is no Tailwind
 * build, so nothing here is a utility class: tokens are CSS custom properties
 * and the components are a handful of plain .blx-* classes.
 *
 * COLOUR MEANS SOMETHING. Green is done or money in, amber is waiting, red
 * needs somebody, blue is the primary action, grey is information. The
 * accent scale exists for diagrams and chart series only, where two kinds of
 * line must be told apart; it is never a status.
 *
 * The palette values are the admin panel's own (AdminPanelProvider::colors):
 * primary is its blue, gray its gray. Success, warning and danger are the
 * scales Filament itself uses for those names.
 */

:root {
    /* Primary: the admin panel's blue. */
    --blx-primary-50: #eff6ff;
    --blx-primary-100: #dbeafe;
    --blx-primary-200: #bfdbfe;
    --blx-primary-300: #93c5fd;
    --blx-primary-400: #60a5fa;
    --blx-primary-500: #3b82f6;
    --blx-primary-600: #2563eb;
    --blx-primary-700: #1d4ed8;
    --blx-primary-800: #1e40af;
    --blx-primary-900: #1e3a8a;
    --blx-primary-950: #172554;

    /* Gray: the admin panel's gray. */
    --blx-gray-50: #f9fafb;
    --blx-gray-100: #f3f4f6;
    --blx-gray-200: #e5e7eb;
    --blx-gray-300: #d1d5db;
    --blx-gray-400: #9ca3af;
    --blx-gray-500: #6b7280;
    --blx-gray-600: #4b5563;
    --blx-gray-700: #374151;
    --blx-gray-800: #1f2937;
    --blx-gray-900: #111827;
    --blx-gray-950: #030712;

    /* Success: done, money in. */
    --blx-success-50: #f0fdf4;
    --blx-success-100: #dcfce7;
    --blx-success-200: #bbf7d0;
    --blx-success-300: #86efac;
    --blx-success-400: #4ade80;
    --blx-success-500: #22c55e;
    --blx-success-600: #16a34a;
    --blx-success-700: #15803d;
    --blx-success-800: #166534;
    --blx-success-900: #14532d;
    --blx-success-950: #052e16;

    /* Warning: waiting on something or somebody. */
    --blx-warning-50: #fffbeb;
    --blx-warning-100: #fef3c7;
    --blx-warning-200: #fde68a;
    --blx-warning-300: #fcd34d;
    --blx-warning-400: #fbbf24;
    --blx-warning-500: #f59e0b;
    --blx-warning-600: #d97706;
    --blx-warning-700: #b45309;
    --blx-warning-800: #92400e;
    --blx-warning-900: #78350f;
    --blx-warning-950: #451a03;

    /* Danger: needs somebody now. */
    --blx-danger-50: #fef2f2;
    --blx-danger-100: #fee2e2;
    --blx-danger-200: #fecaca;
    --blx-danger-300: #fca5a5;
    --blx-danger-400: #f87171;
    --blx-danger-500: #ef4444;
    --blx-danger-600: #dc2626;
    --blx-danger-700: #b91c1c;
    --blx-danger-800: #991b1b;
    --blx-danger-900: #7f1d1d;
    --blx-danger-950: #450a0a;

    /* Accent: diagrams and chart series only, never a status. */
    --blx-accent-50: #f5f3ff;
    --blx-accent-100: #ede9fe;
    --blx-accent-200: #ddd6fe;
    --blx-accent-300: #c4b5fd;
    --blx-accent-400: #a78bfa;
    --blx-accent-500: #8b5cf6;
    --blx-accent-600: #7c3aed;
    --blx-accent-700: #6d28d9;
    --blx-accent-800: #5b21b6;
    --blx-accent-900: #4c1d95;
    --blx-accent-950: #2e1065;

    /* The process maps' own two series: a task a step raises, and the way
       into a flow. Diagrams only. */
    --blx-diagram-task: #f06ab4;
    --blx-diagram-entry: #5fa8f0;

    /* Info, in Filament's sense of the word (its info colour is blue). On a
       custom screen plain information is grey; this is for the rare badge
       that must match a Filament info badge beside it. */
    --blx-info-50: var(--blx-primary-50);
    --blx-info-100: var(--blx-primary-100);
    --blx-info-200: var(--blx-primary-200);
    --blx-info-500: var(--blx-primary-500);
    --blx-info-600: var(--blx-primary-600);
    --blx-info-700: var(--blx-primary-700);

    --blx-white: #ffffff;
    --blx-black: #000000;

    /* What things are, rather than what colour they are. */
    --blx-surface: var(--blx-white);
    --blx-surface-muted: var(--blx-gray-50);
    --blx-surface-sunken: var(--blx-gray-100);
    --blx-border: var(--blx-gray-200);
    --blx-border-strong: var(--blx-gray-300);
    --blx-text: var(--blx-gray-900);
    --blx-text-soft: var(--blx-gray-700);
    --blx-text-muted: var(--blx-gray-500);
    --blx-text-faint: var(--blx-gray-400);
    --blx-link: var(--blx-primary-700);

    /* Radius: sm for chips and inputs, the default for tiles and buttons,
       lg for cards (Filament's sections are rounded-xl, 0.75rem). */
    --blx-radius-sm: 0.375rem;
    --blx-radius: 0.5rem;
    --blx-radius-lg: 0.75rem;
    --blx-radius-full: 9999px;

    /* Spacing: a 4px step, the same as Filament's. */
    --blx-space-1: 0.25rem;
    --blx-space-2: 0.5rem;
    --blx-space-3: 0.75rem;
    --blx-space-4: 1rem;
    --blx-space-5: 1.25rem;
    --blx-space-6: 1.5rem;
    --blx-space-8: 2rem;

    --blx-font-xs: 0.75rem;

    /* THE PROCESS FAMILIES' COLOURS (D14, 6 Oct 2026): the map, the graph
       and the whole-business board all read these by name; the PHP registry
       carries the token, never the hex, so a hue lives here once. */
    --blx-family-money-in: #5FA8F0;
    --blx-family-making: #F0A65F;
    --blx-family-partners: #9B8BF4;
    --blx-family-last-mile: #4FC3A1;
    --blx-family-money-out: #E8825F;
    --blx-family-buying: #C9A227;
    --blx-family-everywhere: #8FA2B3;
    --blx-family-getting-found: #F06AB4;
    --blx-family-none: #8FA2B3;
    --blx-family-ungrouped: #B91C1C;
    --blx-font-sm: 0.875rem;
    --blx-font-base: 1rem;
    --blx-font-lg: 1.125rem;
    --blx-font-xl: 1.25rem;
    --blx-font-2xl: 1.5rem;

    /* THE 3D WORKSPACE'S LANGUAGE, for the whole panel (29 Sep 2026: "this
       nice 3D view kind of design revamp applied on our whole crm. Be
       consistent"). The viewer's own sheet (partials/mfg3d-styles) is where
       these numbers were proven on the iPad; they live here once so every
       other screen, and Filament's own cards, read as the same product.

       Radius: xl for things that float (glass bars, dropdowns, tiles you
       press), 2xl for sheets and modals. Cards stay lg, like a Filament
       section. */
    --blx-radius-xl: 0.875rem;
    --blx-radius-2xl: 1.125rem;

    /* A fingertip needs 44px; the big dock buttons are 56. */
    --blx-touch: 2.75rem;
    --blx-touch-lg: 3.5rem;

    /* The page behind the cards: the stage's cool grey, so white cards lift
       off it the way the glass lifts off the model. */
    --blx-canvas: #eef1f5;
    /* A pressed-in track (segmented controls, the tab rail) and a hairline. */
    --blx-fill: rgb(15 23 42 / 0.06);
    --blx-line: rgb(15 23 42 / 0.08);
    /* Glass: what floats over content. */
    --blx-glass: rgb(255 255 255 / 0.74);
    --blx-glass-strong: rgb(255 255 255 / 0.92);
    --blx-glass-line: rgb(255 255 255 / 0.65);
    --blx-blur: blur(18px) saturate(1.5);

    /* Shadows, softest first. Card sits on the page; raised is the chosen
       segment; float is glass; sheet is a modal. */
    --blx-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 2px 8px 0 rgb(15 23 42 / 0.04);
    --blx-ring: 0 0 0 1px rgb(15 23 42 / 0.06);
    --blx-card-shadow: var(--blx-shadow), var(--blx-ring);
    --blx-shadow-raised: 0 1px 3px rgb(15 23 42 / 0.16);
    --blx-shadow-float: 0 8px 28px rgb(15 23 42 / 0.14), 0 1px 2px rgb(15 23 42 / 0.08);
    --blx-shadow-sheet: 0 24px 64px rgb(15 23 42 / 0.28), 0 2px 6px rgb(15 23 42 / 0.08);

    /* The section label: small capitals, the inspector's "SCENE", "LIGHT". */
    --blx-label-size: 0.6875rem;
    --blx-label-track: 0.08em;
}

/* Both panels run with dark mode off today; these keep a custom screen
   readable if it is ever switched on, keyed on Filament's own .dark class and
   never on prefers-color-scheme (which asks iOS, not the panel). */
.dark {
    --blx-surface: rgb(255 255 255 / 0.03);
    --blx-surface-muted: rgb(255 255 255 / 0.04);
    --blx-surface-sunken: rgb(255 255 255 / 0.06);
    --blx-border: rgb(255 255 255 / 0.1);
    --blx-border-strong: rgb(255 255 255 / 0.2);
    --blx-text: var(--blx-gray-50);
    --blx-text-soft: var(--blx-gray-300);
    --blx-text-muted: var(--blx-gray-400);
    --blx-text-faint: var(--blx-gray-500);
    --blx-link: var(--blx-primary-400);
    --blx-ring: 0 0 0 1px rgb(255 255 255 / 0.1);
    --blx-canvas: var(--blx-gray-950);
    --blx-fill: rgb(255 255 255 / 0.07);
    --blx-line: rgb(255 255 255 / 0.08);
    --blx-glass: rgb(24 24 27 / 0.68);
    --blx-glass-strong: rgb(24 24 27 / 0.92);
    --blx-glass-line: rgb(255 255 255 / 0.08);
}

/* ── Card: the same box as a Filament section ─────────────────────────── */
.blx-card {
    background: var(--blx-surface);
    border-radius: var(--blx-radius-lg);
    box-shadow: var(--blx-card-shadow);
    padding: var(--blx-space-4) var(--blx-space-5);
    min-width: 0;
}
.blx-card__title {
    font-size: var(--blx-font-base);
    font-weight: 600;
    color: var(--blx-text);
    margin: 0;
}
.blx-card__meta {
    font-size: var(--blx-font-sm);
    color: var(--blx-text-muted);
    margin: var(--blx-space-1) 0 0;
}
.blx-section-title {
    font-size: var(--blx-font-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blx-text-muted);
    margin: 0 0 var(--blx-space-2);
}

/* ── Stat tiles: a number that opens the list behind it ───────────────── */
.blx-tiles {
    display: grid;
    gap: var(--blx-space-3);
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
@media (min-width: 768px) {
    .blx-tiles--fixed { grid-template-columns: repeat(var(--blx-tile-cols, 4), minmax(0, 1fr)); }
}
.blx-tile {
    display: flex;
    flex-direction: column;
    gap: var(--blx-space-1);
    min-width: 0;
    min-height: 44px;
    padding: var(--blx-space-3) var(--blx-space-4);
    background: var(--blx-surface);
    border-radius: var(--blx-radius-lg);
    box-shadow: var(--blx-card-shadow);
    border-left: 4px solid var(--blx-border);
    color: inherit;
    text-decoration: none;
}
a.blx-tile:hover,
a.blx-tile:focus-visible {
    box-shadow: var(--blx-shadow), 0 0 0 1px var(--blx-border-strong);
    outline: none;
}
.blx-tile__label {
    display: flex;
    align-items: center;
    gap: var(--blx-space-2);
    font-size: var(--blx-font-sm);
    font-weight: 500;
    color: var(--blx-text-muted);
}
.blx-tile__label svg { width: 1.1rem; height: 1.1rem; flex: none; }
.blx-tile__value {
    font-size: var(--blx-font-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--blx-text);
    font-variant-numeric: tabular-nums;
}
.blx-tile__hint {
    font-size: var(--blx-font-xs);
    color: var(--blx-text-muted);
    overflow-wrap: anywhere;
}
.blx-tile--success { border-left-color: var(--blx-success-500); }
.blx-tile--success .blx-tile__value { color: var(--blx-success-700); }
.blx-tile--warning { border-left-color: var(--blx-warning-500); }
.blx-tile--warning .blx-tile__value { color: var(--blx-warning-700); }
.blx-tile--danger { border-left-color: var(--blx-danger-500); }
.blx-tile--danger .blx-tile__value { color: var(--blx-danger-700); }
.blx-tile--primary { border-left-color: var(--blx-primary-500); }
.blx-tile--primary .blx-tile__value { color: var(--blx-primary-700); }
.blx-tile--gray { border-left-color: var(--blx-gray-300); }

/* Zero tiles, folded into one line under the tiles that carry a number. */
.blx-allclear {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blx-space-1) var(--blx-space-3);
    margin: var(--blx-space-3) 0 0;
    font-size: var(--blx-font-sm);
    color: var(--blx-text-muted);
}
.blx-allclear svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--blx-success-500); }
.blx-allclear__lead { font-weight: 500; color: var(--blx-text); }
.blx-allclear__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--blx-border-strong);
}
.blx-allclear__item:hover,
.blx-allclear__item:focus-visible { color: var(--blx-text); border-bottom-style: solid; outline: none; }

/* ── Chips and badges ─────────────────────────────────────────────────── */
.blx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--blx-space-1);
    padding: 0.2rem var(--blx-space-2);
    border-radius: var(--blx-radius-full);
    border: 1px solid var(--blx-gray-200);
    background: var(--blx-gray-50);
    color: var(--blx-gray-700);
    font-size: var(--blx-font-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.blx-chip--success { background: var(--blx-success-50); border-color: var(--blx-success-200); color: var(--blx-success-800); }
.blx-chip--warning { background: var(--blx-warning-50); border-color: var(--blx-warning-200); color: var(--blx-warning-800); }
.blx-chip--danger { background: var(--blx-danger-50); border-color: var(--blx-danger-200); color: var(--blx-danger-800); }
.blx-chip--primary { background: var(--blx-primary-50); border-color: var(--blx-primary-200); color: var(--blx-primary-800); }
.blx-chip--gray { background: var(--blx-gray-50); border-color: var(--blx-gray-200); color: var(--blx-gray-700); }

/* ── Empty state: icon, one sentence, the action if allowed ───────────── */
.blx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--blx-space-2);
    padding: var(--blx-space-6) var(--blx-space-4);
    color: var(--blx-text-muted);
}
.blx-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--blx-radius-full);
    background: var(--blx-gray-100);
    color: var(--blx-gray-500);
}
.blx-empty__icon svg { width: 1.4rem; height: 1.4rem; }
.blx-empty--success .blx-empty__icon { background: var(--blx-success-50); color: var(--blx-success-600); }
.blx-empty__text {
    margin: 0;
    font-size: var(--blx-font-sm);
    color: var(--blx-text-soft);
    max-width: 32rem;
}
.blx-empty__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--blx-space-4);
    border-radius: var(--blx-radius);
    background: var(--blx-primary-600);
    color: var(--blx-white);
    font-size: var(--blx-font-sm);
    font-weight: 600;
    text-decoration: none;
}
.blx-empty__action:hover { background: var(--blx-primary-700); }

/* ── Links and buttons drawn by hand ──────────────────────────────────── */
.blx-link { color: var(--blx-link); text-decoration: underline; text-underline-offset: 2px; }
.blx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--blx-space-2);
    min-height: 2.5rem;
    padding: 0 var(--blx-space-4);
    border: 1px solid var(--blx-border-strong);
    border-radius: 0.625rem;
    background: var(--blx-surface);
    color: var(--blx-text-soft);
    font-size: var(--blx-font-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-button svg { width: 1.1rem; height: 1.1rem; flex: none; }
.blx-button:hover:not(:disabled) { border-color: var(--blx-gray-400); color: var(--blx-text); }
.blx-button:disabled, .blx-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.blx-button--primary { background: var(--blx-primary-600); border-color: var(--blx-primary-600); color: var(--blx-white); }
.blx-button--primary:hover:not(:disabled) { background: var(--blx-primary-700); border-color: var(--blx-primary-700); color: var(--blx-white); }
.blx-button--warning { background: var(--blx-warning-500); border-color: var(--blx-warning-500); color: var(--blx-white); }
.blx-button--success { background: var(--blx-success-600); border-color: var(--blx-success-600); color: var(--blx-white); }
.blx-button--danger { background: var(--blx-surface); border-color: var(--blx-danger-300); color: var(--blx-danger-700); }
.blx-button--ghost { background: transparent; border-color: transparent; }
.blx-button--ghost:hover:not(:disabled) { background: var(--blx-fill); border-color: transparent; }

/* ── Loading: a skeleton, never an empty white box ────────────────────── */
@keyframes blx-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
.blx-skeleton {
    display: block;
    border-radius: var(--blx-radius-sm);
    background: linear-gradient(90deg, var(--blx-gray-100) 25%, var(--blx-gray-200) 37%, var(--blx-gray-100) 63%);
    background-size: 400% 100%;
    animation: blx-shimmer 1.4s ease infinite;
}

/* Filament draws a lazy widget (and a deferred stats box on a list page) as
 * .fi-loading-section: an empty white card that pulses. On a slow line it
 * read as a broken, blank box. It now shows the shape of what is coming - a
 * short label bar and a figure bar - drawn with backgrounds so no markup
 * changes. */
.fi-loading-section {
    position: relative;
    overflow: hidden;
    background-color: var(--blx-surface);
    background-image:
        linear-gradient(var(--blx-gray-200), var(--blx-gray-200)),
        linear-gradient(var(--blx-gray-100), var(--blx-gray-100)),
        linear-gradient(var(--blx-gray-100), var(--blx-gray-100));
    background-repeat: no-repeat;
    background-size: 7rem 0.75rem, 4.5rem 1.6rem, 60% 0.6rem;
    background-position: var(--blx-space-5) var(--blx-space-5), var(--blx-space-5) 2.6rem, var(--blx-space-5) 4.9rem;
    border-radius: var(--blx-radius-lg);
    box-shadow: var(--blx-card-shadow);
}
.fi-loading-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 0.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: blx-sweep 1.4s ease-in-out infinite;
}
@keyframes blx-sweep {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .blx-skeleton, .fi-loading-section::after { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   THE COMPONENT LIBRARY (29 Sep 2026)

   The 3D workspace's controls, lifted out of partials/mfg3d-styles so every
   custom screen draws the same ones (docs/ui-standard.md, "Components").
   The rules they carry:

   - A control you press is at least 44px on a touchscreen (--blx-touch).
   - A choice between a few options is a segmented control (.blx-seg), not a
     row of separate buttons that look like actions.
   - A thing that is on or off is a switch (.blx-switch) or an on/off chip
     (.blx-chipbtn), and it says which with aria-checked / aria-pressed.
   - Things that float over content are glass (.blx-glass); a panel with a
     title bar over the page is a sheet (.blx-sheet).
   - An icon-only button always carries aria-label and title (.blx-iconbtn).
   - Colour still means something: blue is the chosen thing, amber waiting,
     red needs somebody, green done.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Glass: a bar or panel that floats over the page ─────────────────── */
.blx-glass {
    background: var(--blx-glass);
    -webkit-backdrop-filter: var(--blx-blur);
    backdrop-filter: var(--blx-blur);
    border: 1px solid var(--blx-glass-line);
    border-radius: var(--blx-radius-xl);
    box-shadow: var(--blx-shadow-float);
    color: var(--blx-text);
}

/* ── Toolbar: the strip above a board (date steps, view choice, actions) ─
   One bar, the page's own steps grouped left and the view choices right,
   wrapping rather than scrolling when the iPad runs out of width. */
.blx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--blx-space-2) var(--blx-space-3);
    padding: 0.375rem;
    background: var(--blx-surface);
    border-radius: var(--blx-radius-xl);
    box-shadow: var(--blx-card-shadow);
    min-width: 0;
}
.blx-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blx-space-2); min-width: 0; }
.blx-toolbar__title {
    padding: 0 var(--blx-space-2);
    font-size: var(--blx-font-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--blx-text);
    white-space: nowrap;
}
.blx-toolbar__select {
    min-height: 2.5rem;
    max-width: 16rem;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--blx-border-strong);
    border-radius: 0.625rem;
    background-color: var(--blx-surface);
    color: var(--blx-text);
    font-size: 16px; /* iOS zooms the page on a focused field under 16px */
}

/* ── Icon button: round-cornered, always labelled ────────────────────── */
.blx-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--blx-text-soft);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-iconbtn svg { width: 1.25rem; height: 1.25rem; }
.blx-iconbtn:hover:not(:disabled), .blx-iconbtn:active:not(:disabled) { background: var(--blx-fill); color: var(--blx-text); }
.blx-iconbtn:disabled { opacity: 0.3; cursor: default; }
.blx-iconbtn--sm { width: 2rem; height: 2rem; border-radius: var(--blx-radius); }
.blx-iconbtn--sm svg { width: 1rem; height: 1rem; }
.blx-iconbtn--danger:hover:not(:disabled) { color: var(--blx-danger-700); background: var(--blx-danger-50); }

/* ── Segmented control: one choice of a few ──────────────────────────────
   A pressed-in track with the chosen segment raised in white. Buttons with
   aria-pressed, or radio inputs inside labels (the input is hidden but
   still takes the keyboard). */
.blx-seg {
    display: inline-flex;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: 0.75rem;
    background: var(--blx-fill);
    max-width: 100%;
}
.blx-seg--full { display: flex; width: 100%; }
.blx-seg__btn {
    position: relative;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--blx-text-soft);
    font-size: var(--blx-font-sm);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-seg__btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.blx-seg__btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.blx-seg__btn.is-on,
.blx-seg__btn[aria-pressed="true"],
.blx-seg__btn:has(input:checked) {
    background: var(--blx-surface);
    color: var(--blx-text);
    box-shadow: var(--blx-shadow-raised);
}
.dark .blx-seg__btn.is-on, .dark .blx-seg__btn[aria-pressed="true"] { background: var(--blx-gray-700); }
.blx-seg__btn:disabled, .blx-seg__btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.blx-seg__btn:focus-visible { outline: 2px solid var(--blx-primary-500); outline-offset: -2px; }

/* ── On/off chip: a filter that is either on or off ──────────────────── */
.blx-chipbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--blx-border-strong);
    border-radius: var(--blx-radius-full);
    background: var(--blx-surface);
    color: var(--blx-text-soft);
    font-size: var(--blx-font-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-chipbtn svg { width: 1rem; height: 1rem; flex: none; }
.blx-chipbtn.is-on, .blx-chipbtn[aria-pressed="true"] {
    border-color: var(--blx-primary-500);
    background: var(--blx-primary-50);
    color: var(--blx-primary-800);
}
.blx-chipbtn--warning { border-color: var(--blx-warning-300); background: var(--blx-surface); color: var(--blx-warning-800); }
.blx-chipbtn--danger { border-color: var(--blx-danger-300); background: var(--blx-surface); color: var(--blx-danger-700); }
.blx-chipbtn--fixed { cursor: default; }
.blx-chipbtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Switch: the iOS switch from the inspector ───────────────────────────
   <button type="button" role="switch" aria-checked="true" class="blx-switch"><span></span></button>
   Its face is 31px; the hit area reaches past it to 45px. */
.blx-switch {
    position: relative;
    flex: 0 0 auto;
    width: 3.1875rem;
    height: 1.9375rem;
    padding: 0;
    border: 0;
    border-radius: var(--blx-radius-full);
    background: var(--blx-gray-300);
    cursor: pointer;
    transition: background 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-switch::before { content: ''; position: absolute; inset: -0.4375rem; }
.blx-switch > span {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: var(--blx-radius-full);
    background: var(--blx-white);
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.25);
    transition: transform 0.2s ease;
}
.blx-switch.is-on, .blx-switch[aria-checked="true"] { background: var(--blx-primary-600); }
.blx-switch.is-on > span, .blx-switch[aria-checked="true"] > span { transform: translateX(1.25rem); }
.blx-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.blx-switch:focus-visible { outline: 2px solid var(--blx-primary-500); outline-offset: 2px; }

/* ── Row: a label (with an optional line under it) and its control ───── */
.blx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--blx-space-3);
    min-height: 3.25rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--blx-line);
}
.blx-row:last-child { border-bottom: 0; }
.blx-row__label { display: flex; flex-direction: column; min-width: 0; font-size: var(--blx-font-sm); font-weight: 600; line-height: 1.25; color: var(--blx-text); }
.blx-row__label small { margin-top: 0.1rem; font-size: 0.8125rem; font-weight: 400; color: var(--blx-text-muted); }

/* ── Tabs with an icon over the label (the inspector's six) ──────────────
   For custom screens; Filament's own tabs wear the same rail below. */
.blx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: 0.75rem;
    background: var(--blx-fill);
}
.blx-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 4.5rem;
    min-height: 3.25rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--blx-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.blx-tab svg { width: 1.25rem; height: 1.25rem; }
.blx-tab.is-active, .blx-tab[aria-selected="true"] { background: var(--blx-surface); color: var(--blx-text); box-shadow: var(--blx-shadow-raised); }

/* ── Sheet: a panel with a title bar ─────────────────────────────────── */
.blx-sheet {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--blx-surface);
    border-radius: var(--blx-radius-2xl);
    box-shadow: var(--blx-card-shadow);
    color: var(--blx-text);
}
.blx-sheet--float {
    background: var(--blx-glass-strong);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid var(--blx-glass-line);
    box-shadow: var(--blx-shadow-sheet);
}
.blx-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--blx-space-2);
    padding: 0.75rem 0.875rem 0.75rem 1rem;
    border-bottom: 1px solid var(--blx-line);
}
.blx-sheet__title { margin: 0; font-size: var(--blx-font-base); font-weight: 700; color: var(--blx-text); }
.blx-sheet__body { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem 1.25rem; font-size: var(--blx-font-sm); min-width: 0; }

/* ── Callout: one message that needs reading, in its meaning's colour ─── */
.blx-callout {
    display: flex;
    flex-direction: column;
    gap: var(--blx-space-2);
    padding: var(--blx-space-3) var(--blx-space-4);
    border-radius: var(--blx-radius-xl);
    background: var(--blx-surface-muted);
    color: var(--blx-text-soft);
    font-size: var(--blx-font-sm);
    line-height: 1.45;
}
.blx-callout__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blx-space-2); margin: 0; font-weight: 700; color: var(--blx-text); }
.blx-callout__title svg { width: 1.1rem; height: 1.1rem; flex: none; }
.blx-callout__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blx-space-2); }
.blx-callout__note { margin: 0; font-size: 0.8125rem; }
.blx-callout--warning { background: rgb(245 158 11 / 0.12); color: var(--blx-warning-800); }
.blx-callout--warning .blx-callout__title { color: var(--blx-warning-800); }
.blx-callout--danger { background: var(--blx-danger-50); color: var(--blx-danger-800); }
.blx-callout--danger .blx-callout__title { color: var(--blx-danger-800); }
.blx-callout--primary { background: var(--blx-primary-50); color: var(--blx-primary-800); }
.blx-callout--primary .blx-callout__title { color: var(--blx-primary-800); }
.blx-callout--success { background: var(--blx-success-50); color: var(--blx-success-800); }
.blx-callout--success .blx-callout__title { color: var(--blx-success-800); }

/* ── Legend: the key under a board ───────────────────────────────────── */
.blx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blx-space-2) var(--blx-space-4); font-size: 0.8125rem; color: var(--blx-text-muted); }
.blx-legend__item { display: inline-flex; align-items: center; gap: 0.375rem; }
.blx-dot { display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; border-radius: var(--blx-radius-full); background: var(--blx-gray-400); }
.blx-dot--success { background: var(--blx-success-500); }
.blx-dot--warning { background: var(--blx-warning-500); }
.blx-dot--danger { background: var(--blx-danger-500); }
.blx-dot--danger-soft { background: var(--blx-danger-100); }
.blx-dot--gray-soft { background: var(--blx-gray-200); }
.blx-dot--primary { background: var(--blx-primary-500); }
.blx-dot--ring-danger { background: transparent; box-shadow: inset 0 0 0 2px var(--blx-danger-500); }

/* ── Meter: a thin bar for "how full" ────────────────────────────────── */
.blx-meter { display: block; height: 0.375rem; border-radius: var(--blx-radius-full); background: var(--blx-fill); overflow: hidden; }
.blx-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--blx-success-500); }
.blx-meter--warning > span { background: var(--blx-warning-500); }
.blx-meter--danger > span { background: var(--blx-danger-500); }

@media (any-pointer: coarse) {
    .blx-button, .blx-seg__btn, .blx-chipbtn, .blx-toolbar__select { min-height: var(--blx-touch); }
    .blx-iconbtn:not(.blx-iconbtn--sm) { width: var(--blx-touch); height: var(--blx-touch); }
    .blx-iconbtn--sm { width: 2.25rem; height: 2.25rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   REPORT PAGES: figures across the top, sections of tables below.

   Finance Reports, Money In & Out, Spending Overview, Bank Reconciliation,
   Period Close, Accounts Payable and Owed & Due each drew this same set in
   their own <style> under their own prefix - one rule written seven times,
   and already drifting (two paddings, two value sizes, three empty states).
   One copy. A page keeps a <style> only for what is its own.
   ═════════════════════════════════════════════════════════════════════════ */
.blx-report { display: flex; flex-direction: column; gap: 1.25rem; }
.blx-report__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.blx-report__card,
.blx-report__section { border: 1px solid var(--blx-gray-200); border-radius: var(--blx-radius-lg); background: var(--blx-surface); }
.blx-report__card { padding: 0.9rem 1rem; }
.blx-report__section { overflow: hidden; }
.blx-report__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--blx-gray-500); font-weight: 600; }
.blx-report__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-top: .15rem; color: var(--blx-gray-900); font-variant-numeric: tabular-nums; }
.blx-report__hint { font-size: 0.74rem; color: var(--blx-gray-500); margin-top: .2rem; }
.blx-report__pos { color: var(--blx-success-700); }
.blx-report__neg { color: var(--blx-danger-700); }
.blx-report__muted { color: var(--blx-gray-500); }
.blx-report__head { padding: .8rem 1rem; border-bottom: 1px solid var(--blx-gray-200); }
/* A heading with its pickers beside it: words left, choices right, wrapping. */
.blx-report__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.blx-report__title { font-weight: 700; color: var(--blx-gray-900); }
.blx-report__sub { font-size: .76rem; color: var(--blx-gray-500); margin-top: .15rem; line-height: 1.45; }
.blx-report__pick { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.blx-report__field { display: flex; flex-direction: column; gap: .15rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--blx-gray-500); font-weight: 600; }
.blx-report__select { min-height: var(--blx-touch); padding: .45rem .6rem; border: 1px solid var(--blx-gray-200); border-radius: var(--blx-radius); background: var(--blx-surface); color: var(--blx-gray-900); font-size: 16px; }
.blx-report__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blx-report__empty { padding: 1.25rem 1rem; color: var(--blx-gray-500); font-size: .85rem; }
.blx-report__who { font-size: .72rem; color: var(--blx-gray-500); margin-top: .15rem; line-height: 1.35; }
.blx-report table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.blx-report th,
.blx-report td { padding: .5rem .75rem; text-align: left; }
.blx-report th { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--blx-gray-500); border-bottom: 1px solid var(--blx-gray-200); white-space: nowrap; }
.blx-report tbody tr + tr td { border-top: 1px solid var(--blx-gray-100); }
.blx-report td.num,
.blx-report th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blx-report td.nowrap { white-space: nowrap; }
/* Written to outrank the row divider above, never forced. */
.blx-report tbody tr.blx-report__rowtotal td { font-weight: 700; border-top: 2px solid var(--blx-gray-200); }
/* A table of short figures that should scroll sideways rather than wrap. */
.blx-report--tight td { white-space: nowrap; }
.blx-report--tight th,
.blx-report--tight td { padding-left: .6rem; padding-right: .6rem; }
.blx-report a:not(.blx-button):not(.blx-empty__action) { color: var(--blx-primary-700); text-decoration: underline; }
/* A link inside a row is still a thing a finger presses. */
@media (any-pointer: coarse) {
    .blx-report td a { display: inline-block; padding: .55rem 0; }
}

/* ============================================================================
   PRICE GRID
   One grid for every product's grid entry screen (livewire/partials/
   pricing-grid). The width header and the drop column stay put while the
   prices scroll under them, so the grid reads on an iPad either way up.
   ========================================================================= */
.blx-grid { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.blx-grid__notice { border: 1px solid var(--blx-warning-300); background: var(--blx-warning-50); color: var(--blx-warning-900); border-radius: var(--blx-radius); padding: 0.6rem 0.9rem; font-size: var(--blx-font-sm); }
.blx-grid__pick { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.blx-grid__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.blx-grid__field > span { font-size: var(--blx-label-size); letter-spacing: var(--blx-label-track); text-transform: uppercase; color: var(--blx-text-muted); font-weight: 600; }
.blx-grid__field > select { width: 100%; min-height: var(--blx-touch); border: 1px solid var(--blx-border-strong); border-radius: var(--blx-radius); background: var(--blx-surface); color: var(--blx-text); padding: 0 0.75rem; font-size: var(--blx-font-sm); }
.blx-grid__status { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; font-size: var(--blx-font-sm); color: var(--blx-text-soft); }
.blx-grid__unsaved { color: var(--blx-warning-700); font-weight: 600; }
.blx-grid__hint { margin-left: auto; color: var(--blx-text-muted); font-size: var(--blx-font-xs); }
.blx-grid__scroll { overflow: auto; max-height: calc(100dvh - 15rem); min-height: 14rem; border: 1px solid var(--blx-border); border-radius: var(--blx-radius); background: var(--blx-surface); -webkit-overflow-scrolling: touch; }
.blx-grid__scroll--busy { opacity: 0.5; }
.blx-grid__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(3.5rem + var(--blx-grid-cols, 12) * 3rem); table-layout: fixed; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.blx-grid__table th,
.blx-grid__table td { box-sizing: border-box; border-right: 1px solid var(--blx-border); border-bottom: 1px solid var(--blx-border); padding: 0; }
.blx-grid__table thead th { position: sticky; top: 0; z-index: 2; background: var(--blx-gray-100); color: var(--blx-text-soft); font-weight: 600; text-align: right; padding: 0.5rem 0.2rem; }
.blx-grid__table tbody th { position: sticky; left: 0; z-index: 1; background: var(--blx-gray-100); color: var(--blx-text-soft); font-weight: 600; text-align: right; padding: 0 0.4rem; width: 3.5rem; }
.blx-grid__table thead th.blx-grid__corner { left: 0; z-index: 3; width: 3.5rem; text-align: left; padding-left: 0.4rem; font-size: 0.6875rem; line-height: 1.1; }
.blx-grid__table input { box-sizing: border-box; display: block; width: 100%; height: 2.5rem; border: 0; border-radius: 0; background: transparent; color: var(--blx-text); text-align: right; padding: 0 0.2rem; font: inherit; font-variant-numeric: tabular-nums; }
.blx-grid__table input:focus { outline: 2px solid var(--blx-primary-500); outline-offset: -2px; background: var(--blx-primary-50); }
.blx-grid__table input:disabled { background: var(--blx-surface-muted); }
.blx-grid__table tbody tr:hover td { background: var(--blx-surface-muted); }
.blx-grid__fabrics { font-size: var(--blx-font-sm); color: var(--blx-text-soft); line-height: 1.45; }
.blx-grid__derive { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; border: 1px solid var(--blx-border); border-radius: var(--blx-radius); background: var(--blx-surface-muted); padding: 0.6rem 0.9rem; font-size: var(--blx-font-sm); color: var(--blx-text-soft); }
.blx-grid__derive-title { font-weight: 600; color: var(--blx-text); }
.blx-grid__derive label { display: inline-flex; align-items: center; gap: 0.4rem; }
.blx-grid__derive input,
.blx-grid__derive select { min-height: var(--blx-touch); border: 1px solid var(--blx-border-strong); border-radius: var(--blx-radius); background: var(--blx-surface); color: var(--blx-text); padding: 0 0.6rem; font-size: var(--blx-font-sm); }
.blx-grid__derive input { width: 5rem; text-align: right; }
.blx-grid__table input::placeholder { color: var(--blx-text-faint); }
.blx-grid__table input.blx-grid__under { color: var(--blx-danger-700); background: var(--blx-danger-50); font-weight: 600; }
.blx-grid__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.blx-grid__spacer { flex: 1 1 auto; }

/* ============================================================================
   PICKER
   Choosing by sight, the way the 3D view chooses a finish: pills for a short
   list, chips for a longer one, a swatch for a colour. Used by the fabric
   picker on the roller quote and order forms (livewire/partials/
   fabric-picker).
   ========================================================================= */
.blx-pick { display: flex; flex-direction: column; border: 1px solid var(--blx-border); border-radius: var(--blx-radius-lg); background: var(--blx-surface); padding: 0 1rem; }
.blx-pick__sec { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 0; border-bottom: 1px solid var(--blx-line); }
.blx-pick__sec:last-child { border-bottom: 0; }
.blx-pick__title { margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: var(--blx-text-muted); }
.blx-pick__req { margin-left: 0.35rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--blx-text-faint); }
.blx-pick__cap { margin: 0; font-size: 0.8125rem; color: var(--blx-text-muted); line-height: 1.4; }
.blx-pick__error { margin: 0; font-size: var(--blx-font-sm); color: var(--blx-danger-700); }
.blx-pick__form { display: flex; flex-direction: column; gap: 0.75rem; }
/* A form is a run of numbered steps (components/blx-step): a step opens when
   the one before it is answered, so nobody is left to guess what comes next. */
.blx-steps { list-style: none; margin: 0 0 0.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.blx-steps__item { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.2rem 0.7rem 0.2rem 0.25rem; border-radius: var(--blx-radius-full); background: var(--blx-fill); color: var(--blx-text-soft); font-size: 0.8125rem; font-weight: 600; }
.blx-steps__num,
.blx-step__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--blx-radius-full); background: var(--blx-surface); color: var(--blx-text-soft); font-size: 0.8125rem; font-weight: 700; box-shadow: var(--blx-ring); }
.blx-steps__item.is-next { background: var(--blx-warning-50); color: var(--blx-warning-700); box-shadow: 0 0 0 1px var(--blx-warning-500) inset; }
.blx-steps__item.is-next .blx-steps__num { background: var(--blx-warning-500); color: var(--blx-white); box-shadow: none; }
.blx-steps__item.is-done .blx-steps__num,
.blx-step.is-done .blx-step__num { background: var(--blx-success-600); color: var(--blx-white); box-shadow: none; }
.blx-steps__item.is-locked { color: var(--blx-text-faint); }
.blx-step { display: flex; flex-direction: column; gap: 0.5rem; }
.blx-step__head { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.25rem; }
.blx-step__num { width: 1.75rem; height: 1.75rem; background: var(--blx-warning-500); color: var(--blx-white); box-shadow: none; }
.blx-step__title { margin: 0; font-size: var(--blx-font-base); font-weight: 700; color: var(--blx-text); }
.blx-step__state { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--blx-text-muted); }
.blx-step.is-done .blx-step__state { color: var(--blx-success-700); }
.blx-step.is-locked .blx-step__head { opacity: 0.6; }
.blx-step.is-locked .blx-step__num { background: var(--blx-fill); color: var(--blx-text-muted); }
.blx-step__body { display: flex; flex-direction: column; gap: 0.75rem; }
.blx-step__body[hidden] { display: none; }
.blx-pick__form { gap: 1.1rem; }
.blx-pick__heading { margin: 0; font-size: var(--blx-font-base); font-weight: 700; color: var(--blx-text); }
.blx-pick__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.875rem 1.5rem; align-items: start; }
.blx-pick__opt { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.blx-pick__opt--wide { grid-column: 1 / -1; }
.blx-pick__box { border: 1px solid var(--blx-border); border-radius: var(--blx-radius); padding: 0.75rem; background: var(--blx-surface-muted); }
.blx-pick__opts > .col-span-full,
.blx-pick__opts > [class*="col-span-3"] { grid-column: 1 / -1; }
.blx-pick__opthead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.blx-pick__clear { border: 0; background: none; padding: 0; min-height: 1.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--blx-link); cursor: pointer; }
.blx-pick__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1rem; align-items: start; }
.blx-pick__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.blx-pick__input { box-sizing: border-box; width: 100%; min-height: var(--blx-touch); border: 1px solid var(--blx-border-strong); border-radius: var(--blx-radius); background: var(--blx-surface); color: var(--blx-text); padding: 0 0.75rem; font-size: var(--blx-font-sm); }
textarea.blx-pick__input { padding: 0.6rem 0.75rem; min-height: 4.5rem; }
.blx-pick__input:focus { outline: 2px solid var(--blx-warning-500); outline-offset: 1px; }
.blx-pick__input--bad { border-color: var(--blx-danger-500); }
.blx-pick__swatches.blx-pick__swatches--tight { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.blx-pick input[type="checkbox"],
.blx-pick input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.blx-pick__seg { display: flex; flex-wrap: wrap; gap: 0.1875rem; padding: 0.1875rem; border-radius: 0.75rem; background: var(--blx-fill); }
.blx-pick__segbtn { position: relative; flex: 1 1 7rem; border: 0; background: none; font-family: inherit; display: flex; align-items: center; justify-content: center; min-height: var(--blx-touch); padding: 0 0.75rem; border-radius: 0.5625rem; font-size: 0.8125rem; font-weight: 600; color: var(--blx-text); text-align: center; line-height: 1.15; cursor: pointer; touch-action: manipulation; }
.blx-pick__segbtn.is-on,
.blx-pick__segbtn:has(input:checked) { background: var(--blx-surface); box-shadow: var(--blx-shadow-raised); }
.blx-pick__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.blx-pick__chip { position: relative; display: inline-flex; align-items: center; min-height: var(--blx-touch); padding: 0 0.875rem; border-radius: var(--blx-radius-full); border: 1px solid var(--blx-border); font-size: 0.8125rem; font-weight: 600; color: var(--blx-text); cursor: pointer; touch-action: manipulation; }
.blx-pick__chip.is-on,
.blx-pick__chip:has(input:checked) { border-color: var(--blx-warning-500); background: var(--blx-warning-50); color: var(--blx-warning-700); }
.blx-pick__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.375rem; }
.blx-pick__swatch { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.375rem 0.5rem; border-radius: 0.75rem; border: 1px solid var(--blx-border); font-size: 0.8125rem; font-weight: 600; color: var(--blx-text); cursor: pointer; touch-action: manipulation; }
.blx-pick__swatch.is-on,
.blx-pick__swatch:has(input:checked) { border-color: var(--blx-warning-500); box-shadow: 0 0 0 1px var(--blx-warning-500) inset; }
.blx-pick__segbtn:focus-within,
.blx-pick__chip:focus-within,
.blx-pick__swatch:focus-within { outline: 2px solid var(--blx-warning-500); outline-offset: 1px; }
.blx-pick__dot { flex: 0 0 auto; width: 1.625rem; height: 1.625rem; border-radius: var(--blx-radius-full); box-shadow: inset 0 0 0 1px var(--blx-border-strong), var(--blx-shadow); }
.blx-pick__dot--none { background: repeating-linear-gradient(45deg, var(--blx-gray-100), var(--blx-gray-100) 4px, var(--blx-gray-200) 4px, var(--blx-gray-200) 8px); }
.blx-pick__name { line-height: 1.15; }

/* ═════════════════════════════════════════════════════════════════════════
   FILAMENT WEARS THE SAME

   Filament's compiled sheet puts every fi-* rule inside @layer components.
   This file is not in a layer, so a plain selector here wins over any of
   Filament's without !important and without copying its specificity. Only
   the look changes: colour, radius, shadow, height. Nothing here moves a
   column, changes a grid or hides anything, so the iPad layout (about 890px
   of content with the sidebar open) is what it was. Never edit Filament's
   vendor files for looks; restyle its fi-* classes here.

   Each panel keeps its own accent: these read Filament's --primary-* and
   --gray-* variables, which each panel sets from its own colors().
   ═════════════════════════════════════════════════════════════════════════ */

/* The page: the workspace's cool grey, so the white cards lift off it. */
.fi-body { background-color: var(--blx-canvas); }

/* The top bar is glass, like the bars floating over the model. The blur is
   on a pseudo-element so the bar itself does not become a containing block
   for the fixed-position menus that open from it. */
.fi-topbar { position: relative; background-color: transparent; box-shadow: 0 1px 0 var(--blx-line); }
.fi-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--blx-glass-strong);
    -webkit-backdrop-filter: var(--blx-blur);
    backdrop-filter: var(--blx-blur);
    pointer-events: none;
}

/* Cards: sections, tables, stat boxes and repeater items share one box. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    box-shadow: var(--blx-card-shadow);
}
.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-ta-ctn .fi-ta-header-toolbar { border-color: var(--blx-line); }

/* Tabs are the inspector's rail: a pressed-in track, the open tab raised in
   white, its label in ink. */
.fi-tabs:not(.fi-contained) {
    background-color: var(--blx-fill);
    box-shadow: none;
    padding: 0.1875rem;
    column-gap: 0.1875rem;
    border-radius: 0.75rem;
}
.fi-tabs.fi-contained {
    margin: 0.625rem 0.625rem 0;
    padding: 0.1875rem;
    column-gap: 0.1875rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--blx-fill);
}
.fi-tabs-item {
    min-height: 2.5rem;
    border-radius: 0.6rem;
    font-weight: 600;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.fi-tabs-item.fi-active {
    background-color: var(--blx-surface);
    box-shadow: var(--blx-shadow-raised);
}
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--gray-950); }
.fi-tabs-item.fi-active > .fi-icon { color: var(--primary-600); }
.fi-tabs-item:not(.fi-active):hover { background-color: rgb(255 255 255 / 0.55); }
/* A record page's tabs (a Tabs schema, contained): the tabs share the
   rail's width and an icon sits over its label, as in the inspector. */
.fi-tabs.fi-contained > .fi-tabs-item { flex: 1 1 0; }
.fi-tabs.fi-contained > .fi-tabs-item:has(> .fi-icon) {
    flex-direction: column;
    row-gap: 0.15rem;
    min-height: 3.25rem;
    padding-block: 0.3rem;
}

/* Switches are the inspector's: 51 x 31 with a 27px knob and a hit area
   that reaches past the face. A table's inline toggle keeps its smaller
   size so a row does not grow. The knob's travel (20px) is Filament's own,
   and so are the on and off colours (a field may choose them). */
.fi-toggle { width: 3.1875rem; height: 1.9375rem; }
.fi-toggle > :first-child { width: 1.6875rem; height: 1.6875rem; box-shadow: 0 2px 5px rgb(0 0 0 / 0.25); }
.fi-toggle::before { content: ''; position: absolute; inset: -0.4375rem; }
.fi-ta-cell .fi-toggle { width: 2.75rem; height: 1.5rem; }
.fi-ta-cell .fi-toggle > :first-child { width: 1.25rem; height: 1.25rem; }
.fi-ta-cell .fi-toggle::before { inset: -0.5rem -0.25rem; }

/* Buttons and fields: the workspace's 10px corner and firmer label. */
.fi-btn { border-radius: 0.625rem; font-weight: 600; touch-action: manipulation; }
.fi-btn-group { border-radius: 0.625rem; }
.fi-btn-group > .fi-btn:nth-child(1 of .fi-btn) { border-start-start-radius: 0.625rem; border-end-start-radius: 0.625rem; }
.fi-btn-group > .fi-btn:nth-last-child(1 of .fi-btn) { border-start-end-radius: 0.625rem; border-end-end-radius: 0.625rem; }
.fi-btn-group > .fi-btn { border-radius: 0; }
.fi-input-wrp { border-radius: 0.625rem; }

/* Badges are pills, like the chips over the model and the summary strip. */
.fi-badge { border-radius: var(--blx-radius-full); }


/* Menus (the row menu, More, filters, the user menu) float as glass. */
.fi-dropdown-panel {
    border-radius: var(--blx-radius-xl);
    background-color: var(--blx-glass-strong);
    -webkit-backdrop-filter: var(--blx-blur);
    backdrop-filter: var(--blx-blur);
    box-shadow: var(--blx-shadow-float), var(--blx-ring);
}
.fi-dropdown-list-item { border-radius: 0.5rem; }

/* Modals are sheets: the big soft shadow, the 18px corner, and the page
   behind softly blurred rather than only darkened. */
.fi-modal > .fi-modal-close-overlay {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: var(--blx-radius-2xl);
    box-shadow: var(--blx-shadow-sheet);
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen).fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
    border-top-left-radius: var(--blx-radius-2xl);
    border-top-right-radius: var(--blx-radius-2xl);
}
.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen).fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
    border-bottom-left-radius: var(--blx-radius-2xl);
    border-bottom-right-radius: var(--blx-radius-2xl);
}
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window { box-shadow: var(--blx-shadow-sheet); }

/* On a touchscreen every control a finger presses is 44px. Table rows are
   left alone (compact-styles owns their density). */
/* The smallest named size is 13px on a touchscreen (sweep D13, 6 Oct
   2026): one rule, and every scoped size that reads the token follows. */
@media (any-pointer: coarse) {
    :root { --blx-font-xs: 0.8125rem; }
}
@media (any-pointer: coarse) {
    .fi-tabs-item { min-height: var(--blx-touch); }
    .fi-header-actions-ctn .fi-btn,
    .fi-modal-footer .fi-btn,
    .fi-sc-actions .fi-btn,
    .fi-form-actions .fi-btn { min-height: var(--blx-touch); }
    .fi-dropdown-list-item { min-height: var(--blx-touch); }
}

/* The global Back link (partials/back-link): a ghost button, quiet and
   muted, pulled onto the page's left edge so its text lines up with the
   title under it. Shorter than a full button because it sits above every
   page header, and the iPad's height is the scarcer of its two sizes. */
.blx-back-link__btn,
.blx-back-link__btn:hover:not(:disabled) {
    min-height: 2.25rem;
    margin-left: -0.625rem;
    padding: 0 0.625rem;
    color: var(--blx-text-muted);
}
.blx-back-link__btn:hover:not(:disabled) { background: var(--blx-fill); color: var(--blx-text); }
@media (any-pointer: coarse) {
    .blx-back-link__btn { min-height: 2.5rem; }
}