/*
 * Night City Daylight: the panel's light mode, the Cyberpunk 2077 theme
 * redone on paper instead of the night sky.
 *
 * Every rule is scoped to `html.fi:not(.dark)`, so it never meets Night City
 * (night-city.css, scoped to html.fi.dark) and the two files can be read and
 * changed independently. It uses the same selectors as Night City, which were
 * checked against Filament's real markup, and like it is unlayered, so it
 * beats Filament's cascade layers without !important (the few left are for
 * inline styles).
 *
 * Neon does not read on white, so each accent has two roles:
 *   - FILL (yellow, cyan, red...): solid backgrounds, bars and brackets.
 *     Text on a fill is always --cp-ink (at least 5:1 on every fill).
 *   - TEXT (--cp-*-t): the darker shade used for coloured text, every one
 *     at least 4.5:1 on both white and the page background.
 * Every hover/focus/active state sets background and colour together.
 */

html.fi:not(.dark) {
    --cp-bg: #eef0f3;
    --cp-surface: #ffffff;
    --cp-surface-2: #f6f7f9;
    --cp-ink: #07080d;
    --cp-text: #0d1020;
    --cp-muted: #4a5470;
    --cp-dim: #5f6984;
    --cp-disabled: #8d97ad;
    --cp-line: rgba(7, 8, 13, 0.13);
    --cp-line-2: rgba(7, 8, 13, 0.26);

    /* Fills. */
    --cp-yellow: #fcee0a;
    --cp-cyan: #00f0ff;
    --cp-red: #ff003c;
    --cp-magenta: #ff2a6d;
    --cp-green: #1effa0;
    --cp-orange: #ffb020;
    --cp-yellow-wash: rgba(252, 238, 10, 0.3);
    --cp-cyan-wash: rgba(0, 240, 255, 0.1);

    /* Text accents (contrast checked on #fff and --cp-bg). */
    --cp-red-t: #c8002f;
    --cp-teal-t: #00727c;
    --cp-mag-t: #c4004f;
    --cp-green-t: #00754a;
    --cp-orange-t: #995b00;

    --cp-cut: 9px;

    --cp-font-ui: 'Rajdhani', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --cp-font-display: 'Orbitron', 'Rajdhani', 'Roboto', sans-serif;
    --cp-font-mono: 'Share Tech Mono', Menlo, Consolas, monospace;

    /* A cool slate grey; 500 and up are text-safe on white. */
    --gray-50: #f3f5f9;
    --gray-100: #e8ecf3;
    --gray-200: #d6dce7;
    --gray-300: #b6bfcf;
    --gray-400: #8d97ad;
    --gray-500: #5f6984;
    --gray-600: #4a5470;
    --gray-700: #343c57;
    --gray-800: #1f2438;
    --gray-900: #11141f;
    --gray-950: #07080d;

    /* Primary and info are cyan; 600 (Filament's light text/fill shade) is
       the text-safe teal. Solid primary buttons are overridden to yellow. */
    --primary-50: #e6feff;
    --primary-100: #c2fcff;
    --primary-200: #8af8ff;
    --primary-300: #4df4ff;
    --primary-400: #00f0ff;
    --primary-500: #00b8c4;
    --primary-600: #00727c;
    --primary-700: #005d65;
    --primary-800: #004a50;
    --primary-900: #023a3e;
    --primary-950: #012a2e;

    --info-50: #e6feff;
    --info-100: #c2fcff;
    --info-200: #8af8ff;
    --info-300: #4df4ff;
    --info-400: #00f0ff;
    --info-500: #00b8c4;
    --info-600: #00727c;
    --info-700: #005d65;
    --info-800: #004a50;
    --info-900: #023a3e;
    --info-950: #012a2e;

    --success-50: #e8fff5;
    --success-100: #c4ffe6;
    --success-200: #8dffd0;
    --success-300: #5cffbb;
    --success-400: #1effa0;
    --success-500: #00c27a;
    --success-600: #00754a;
    --success-700: #005f3c;
    --success-800: #004a2f;
    --success-900: #003a25;
    --success-950: #002a1b;

    --warning-50: #fff8e8;
    --warning-100: #ffedc2;
    --warning-200: #ffdd8a;
    --warning-300: #ffcd57;
    --warning-400: #ffb020;
    --warning-500: #e08c00;
    --warning-600: #995b00;
    --warning-700: #7a4800;
    --warning-800: #5c3600;
    --warning-900: #432700;
    --warning-950: #2e1a00;

    --danger-50: #fff0f3;
    --danger-100: #ffd6de;
    --danger-200: #ffadbd;
    --danger-300: #ff8fa1;
    --danger-400: #ff4d6a;
    --danger-500: #ff003c;
    --danger-600: #c8002f;
    --danger-700: #a30026;
    --danger-800: #7a001c;
    --danger-900: #5c0016;
    --danger-950: #33000c;

    /* Rajdhani is narrow with a small x-height: one step up keeps it legible. */
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;

    color-scheme: light;
    accent-color: var(--cp-teal-t);
    background-color: var(--cp-bg);

    & ::selection {
        background: var(--cp-yellow);
        color: var(--cp-ink);
    }

    /* ── Page ─────────────────────────────────────────────────────────── */

    /* Grid paper with a magenta and a cyan wash in opposite corners. */
    & body.fi-body {
        font-family: var(--cp-font-ui);
        font-weight: 500;
        color: var(--cp-text);
        background-color: var(--cp-bg);
        background-image:
            radial-gradient(1200px 600px at 100% -10%, rgba(255, 42, 109, 0.09), transparent 60%),
            radial-gradient(900px 500px at -10% 110%, rgba(0, 240, 255, 0.12), transparent 60%),
            linear-gradient(rgba(7, 8, 13, 0.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(7, 8, 13, 0.045) 1px, transparent 1px);
        background-size: auto, auto, 44px 44px, 44px 44px;
        background-attachment: fixed;
    }

    /* Faint scanlines; never catches a click. */
    & body.fi-body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        pointer-events: none;
        mix-blend-mode: multiply;
        background: repeating-linear-gradient(to bottom, rgba(7, 8, 13, 0.025) 0 1px, transparent 1px 3px);
    }

    /* !important: the setup guide sets its code font inline. */
    & code,
    & kbd,
    & pre {
        font-family: var(--cp-font-mono) !important;
    }

    & :focus-visible {
        outline-color: var(--cp-teal-t);
    }

    /* ── Headings ─────────────────────────────────────────────────────── */

    /* Ink with a red chromatic offset, the brand's glitch at rest. */
    & .fi-header-heading,
    & .fi-simple-header-heading {
        font-family: var(--cp-font-display);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--cp-ink);
        text-shadow: 2px 0 rgba(255, 0, 60, 0.45);
    }

    /* Orbitron runs wide: step the title down with the viewport. */
    & .fi-header-heading {
        font-size: 1.75rem;
        overflow-wrap: anywhere;
    }

    @media (max-width: 1279px) {
        & .fi-header-heading {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 639px) {
        & .fi-header-heading {
            font-size: 1rem;
            letter-spacing: 0.03em;
        }
    }

    & .fi-simple-header-heading {
        font-size: 1.35rem;
    }

    & .fi-header-subheading,
    & .fi-simple-header-subheading {
        color: var(--cp-muted);
    }

    & .fi-section-header-heading,
    & .fi-ta-header-heading,
    & .fi-wi-stats-overview-stat-label,
    & .fi-fieldset > legend,
    & .fi-in-section-heading {
        font-family: var(--cp-font-ui);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-red-t);
    }

    & .fi-section-header-description,
    & .fi-ta-header-description {
        color: var(--cp-muted);
    }

    /* ── Topbar ───────────────────────────────────────────────────────── */

    & .fi-topbar {
        position: relative;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid var(--cp-red);
        box-shadow: 0 6px 24px rgba(255, 0, 60, 0.08);
        backdrop-filter: blur(6px);
    }

    /* The yellow tab hanging under the left end of the bar, inked so it
       still reads against the paper. */
    & .fi-topbar::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 180px;
        height: 4px;
        background: var(--cp-yellow);
        box-shadow: inset 0 -1px 0 var(--cp-ink);
        clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        pointer-events: none;
    }

    & .fi-topbar-ctn {
        overflow: visible;
    }

    /* ── Sidebar navigation ───────────────────────────────────────────── */

    & .fi-sidebar {
        background: transparent;
    }

    @media (max-width: 1023px) {
        & .fi-sidebar {
            background: var(--cp-surface);
            box-shadow: 1px 0 0 var(--cp-line-2), 12px 0 32px rgba(7, 8, 13, 0.18);
        }

        & .fi-body-has-topbar .fi-sidebar-header {
            background: var(--cp-surface);
            box-shadow: inset 0 -1px 0 var(--cp-red);
        }
    }

    & .fi-sidebar-close-overlay {
        background: rgba(7, 8, 13, 0.45);
    }

    & .fi-sidebar-group-label {
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--cp-red-t);
    }

    & .fi-sidebar-item-btn {
        border-radius: 0;
        background: transparent;
        transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;

        & > .fi-sidebar-item-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--cp-text);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &:hover,
        &:focus-visible {
            background: var(--cp-yellow-wash);
            box-shadow: inset 3px 0 0 var(--cp-ink);

            & > .fi-sidebar-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }
    }

    & .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background: var(--cp-yellow);
        box-shadow: inset 3px 0 0 var(--cp-ink);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%);

        & > .fi-sidebar-item-label,
        & > .fi-icon {
            color: var(--cp-ink);
        }
    }

    /* ── Cards: sections, tables, widgets ─────────────────────────────── */

    & .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    & .fi-section.fi-aside:not(.fi-section-not-contained) > .fi-section-content-ctn,
    & .fi-ta-ctn,
    & .fi-wi-stats-overview-stat,
    & .fi-simple-main,
    & .fi-tabs:not(.fi-contained) {
        position: relative;
        border-radius: 0;
        background-color: var(--cp-surface);
        box-shadow: 0 0 0 1px var(--cp-line-2), 4px 4px 0 rgba(7, 8, 13, 0.07);
    }

    /* The red L-bracket on each card's top-left corner. A pseudo element,
       not clip-path, so dropdowns can still overflow the card. */
    & .fi-section:not(.fi-section-not-contained):not(.fi-aside)::before,
    & .fi-section.fi-aside:not(.fi-section-not-contained) > .fi-section-content-ctn::before,
    & .fi-ta-ctn::before,
    & .fi-simple-main::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: 18px;
        height: 18px;
        border-top: 3px solid var(--cp-red);
        border-left: 3px solid var(--cp-red);
        pointer-events: none;
        z-index: 1;
    }

    & .fi-section.fi-secondary:not(.fi-section-not-contained) {
        background-color: var(--cp-surface-2);
    }

    /* A yellow wash behind each card's header, fading out to the right. */
    & .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
    & .fi-ta-header {
        background: linear-gradient(90deg, rgba(252, 238, 10, 0.32), transparent 70%);
    }

    & .fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
    & .fi-section .fi-section-footer,
    & .fi-ta-header-ctn,
    & .fi-ta-header-toolbar,
    & .fi-ta-footer,
    & .fi-ta-content-ctn,
    & .fi-ta-filters-header,
    & .fi-pagination,
    & .fi-divided > .fi-section-content-ctn > .fi-section-content > *,
    & .fi-ta-main {
        border-color: var(--cp-line);
    }

    /* Nested sections stay flat. */
    & .fi-section .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
        box-shadow: 0 0 0 1px var(--cp-line);
    }

    /* ── Buttons ──────────────────────────────────────────────────────── */

    /* Outlined in the text shade at rest; on hover the neon fill with ink. */
    & .fi-btn {
        --cp-btn-t: var(--cp-teal-t);
        --cp-btn-fill: var(--cp-cyan);
        border-radius: 0;
        font-family: var(--cp-font-ui);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-btn-t);
        background-color: color-mix(in srgb, var(--cp-btn-fill) 10%, var(--cp-surface));
        box-shadow: inset 0 0 0 1px var(--cp-btn-t);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%);
        transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;

        & > .fi-icon,
        & .fi-badge {
            color: currentColor;
        }

        &.fi-size-xs,
        &.fi-size-sm {
            --cp-cut: 5px;
            letter-spacing: 0.02em;
        }

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible, :active) {
            color: var(--cp-ink);
            background-color: var(--cp-btn-fill);
            box-shadow: inset 0 0 0 1px var(--cp-ink);

            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        /* clip-path clips outlines and rings, so focus is drawn inside. */
        &:focus-visible {
            outline: 2px solid var(--cp-ink);
            outline-offset: -5px;
        }

        &.fi-color-gray {
            --cp-btn-t: var(--cp-text);
            --cp-btn-fill: var(--cp-yellow);
            background-color: var(--cp-surface);
            box-shadow: inset 0 0 0 1px var(--cp-line-2);
        }

        &.fi-color-success {
            --cp-btn-t: var(--cp-green-t);
            --cp-btn-fill: var(--cp-green);
        }

        &.fi-color-warning {
            --cp-btn-t: var(--cp-orange-t);
            --cp-btn-fill: var(--cp-orange);
        }

        &.fi-color-danger {
            --cp-btn-t: var(--cp-red-t);
            --cp-btn-fill: #ff4d6a;
        }

        &.fi-color-info {
            --cp-btn-t: var(--cp-teal-t);
            --cp-btn-fill: var(--cp-cyan);
        }

        /* Primary: solid yellow with an ink edge at rest, cyan on hover. */
        &.fi-color-primary:not(.fi-outlined) {
            --cp-btn-fill: var(--cp-cyan);
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
            box-shadow: inset 0 0 0 1px var(--cp-ink);

            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &.fi-color-primary.fi-outlined {
            --cp-btn-t: var(--cp-text);
            --cp-btn-fill: var(--cp-yellow);
        }

        &:is(.fi-disabled, [disabled]):not(.fi-force-enabled) {
            opacity: 1;
            color: var(--cp-disabled);
            background-color: var(--cp-surface-2);
            box-shadow: inset 0 0 0 1px var(--cp-line);

            & > .fi-icon {
                color: var(--cp-disabled);
            }
        }
    }

    & .fi-btn-group .fi-btn,
    & .fi-input-wrp .fi-btn,
    & .fi-ac-btn-group .fi-btn {
        clip-path: none;
    }

    & .fi-btn-group {
        border-radius: 0;
        box-shadow: none;
    }

    & input:checked + label.fi-btn {
        color: var(--cp-ink);
        background-color: var(--cp-yellow);
        box-shadow: inset 0 0 0 1px var(--cp-ink);
    }

    & .fi-icon-btn {
        border-radius: 0;
        color: var(--cp-muted);
        transition: color 0.12s, background-color 0.12s;

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible) {
            color: var(--cp-ink);
            background-color: var(--cp-yellow-wash);
        }

        &.fi-color:not(.fi-color-gray) {
            color: var(--color-600);
        }

        &:focus-visible {
            outline: 2px solid var(--cp-teal-t);
            outline-offset: -2px;
            box-shadow: none;
        }
    }

    & .fi-icon-btn-badge-ctn .fi-badge {
        color: var(--cp-ink);
        background: var(--cp-red);
        box-shadow: none;
    }

    /* ── Links ────────────────────────────────────────────────────────── */

    & .fi-link {
        color: var(--cp-teal-t);

        & .fi-link-label,
        & > .fi-icon {
            color: inherit;
        }

        &.fi-color:not(.fi-color-primary):not(.fi-color-gray) {
            color: var(--color-600);
        }

        &:hover,
        &:focus-visible {
            color: var(--cp-red-t);

            & .fi-link-label {
                text-decoration: underline;
                text-underline-offset: 3px;
            }
        }

        &:focus-visible {
            outline: 2px solid var(--cp-teal-t);
            outline-offset: 3px;
        }
    }

    & .fi-prose a,
    & .fi-in-text a:not(.fi-btn):not(.fi-badge),
    & .fi-sc-text a,
    & .fi-ta-text a:not(.fi-btn):not(.fi-badge),
    & .fi-fo-field-wrp-helper-text a {
        color: var(--cp-teal-t);

        &:hover {
            color: var(--cp-red-t);
        }
    }

    /* ── Badges ───────────────────────────────────────────────────────── */

    & .fi-badge {
        border-radius: 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-muted);
        background-color: var(--cp-surface-2);
        box-shadow: inset 0 0 0 1px var(--cp-line-2);

        /* --color-700 is text-safe on the pale tint for every Filament
           colour, including the per-person Color::hex() palettes. */
        &.fi-color {
            color: var(--color-700);
            background-color: color-mix(in srgb, var(--color-400) 14%, var(--cp-surface));
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-500) 55%, transparent);
        }

        &.fi-color-primary {
            color: var(--cp-ink);
            background-color: var(--cp-yellow-wash);
            box-shadow: inset 0 0 0 1px var(--cp-ink);
        }

        & .fi-badge-delete-btn > .fi-icon {
            color: currentColor;
            opacity: 0.7;
        }
    }

    /* ── Forms ────────────────────────────────────────────────────────── */

    & .fi-input-wrp {
        border-radius: 0;
        background-color: var(--cp-surface);
        box-shadow: 0 0 0 1px var(--cp-line-2);
        transition: box-shadow 0.12s;

        &:not(.fi-disabled):hover {
            box-shadow: 0 0 0 1px rgba(7, 8, 13, 0.45);
        }

        &:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
            box-shadow: 0 0 0 1px var(--cp-teal-t), 0 0 0 4px rgba(0, 240, 255, 0.3);
        }

        &.fi-invalid {
            box-shadow: 0 0 0 1px var(--cp-red-t);

            &:focus-within {
                box-shadow: 0 0 0 1px var(--cp-red-t), 0 0 0 4px rgba(255, 0, 60, 0.18);
            }
        }

        &.fi-disabled {
            background-color: var(--cp-surface-2);
            box-shadow: 0 0 0 1px var(--cp-line);

            & .fi-input {
                color: var(--cp-muted);
                -webkit-text-fill-color: var(--cp-muted);
            }
        }

        & .fi-input-wrp-prefix:not(.fi-inline),
        & .fi-input-wrp-suffix:not(.fi-inline) {
            border-color: var(--cp-line);
            background-color: var(--cp-surface-2);
        }

        & .fi-input-wrp-label {
            color: var(--cp-teal-t);
        }

        & .fi-input-wrp-prefix > .fi-icon,
        & .fi-input-wrp-suffix > .fi-icon {
            color: var(--cp-dim);
        }
    }

    & .fi-input,
    & .fi-select-input-btn,
    & .fi-fo-date-time-picker-display-text-input,
    & .fi-fo-tags-input-wrp input,
    & .fi-fo-textarea textarea,
    & .fi-fo-select-native select {
        font-family: var(--cp-font-ui);
        font-weight: 500;
        color: var(--cp-text);
    }

    & .fi-input::placeholder,
    & textarea::placeholder,
    & .fi-select-input-placeholder,
    & .fi-fo-date-time-picker-display-text-input::placeholder {
        color: var(--cp-dim);
    }

    & select.fi-select-input,
    & .fi-fo-select-native select,
    & .fi-pagination-records-per-page-select select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300727c' stroke-linecap='square' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }

    & .fi-fo-field-label-content,
    & .fi-fo-field-label,
    & .fi-sc-section-label {
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--cp-muted);
    }

    & .fi-fo-field-label-required-mark {
        color: var(--cp-red-t);
    }

    & .fi-checkbox-list-option-label,
    & .fi-fo-checkbox-list-option-label,
    & .fi-fo-radio-label,
    & label:has(> .fi-checkbox-input) .fi-fo-field-label-content,
    & label:has(> .fi-checkbox-input) {
        color: var(--cp-text);
    }

    & .fi-fo-field-wrp-helper-text,
    & .fi-sc-text,
    & .fi-fo-field-wrp-hint {
        color: var(--cp-muted);
    }

    & .fi-fo-field-wrp-error-message,
    & .fi-fo-file-upload-error-message {
        color: var(--cp-red-t);
    }

    & .fi-checkbox-input,
    & .fi-radio-input {
        background-color: var(--cp-surface);
        border-radius: 0;
        box-shadow: inset 0 0 0 1px rgba(7, 8, 13, 0.45);
        color: var(--cp-yellow);

        &:checked {
            background-color: var(--cp-yellow);
            box-shadow: inset 0 0 0 1px var(--cp-ink);
        }

        &:focus-visible {
            outline: 2px solid var(--cp-teal-t);
            outline-offset: 2px;
        }

        &:disabled {
            background-color: var(--cp-surface-2);
            box-shadow: inset 0 0 0 1px var(--cp-line);
        }
    }

    & .fi-checkbox-input:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }

    & .fi-checkbox-input:indeterminate {
        background-color: var(--cp-yellow);
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='4' y='7' width='8' height='2'/%3e%3c/svg%3e");
    }

    & .fi-radio-input {
        border-radius: 9999px;

        &:checked {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2307080d' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
        }
    }

    /* Toggles: off is a pale track with an ink edge, on is solid yellow. */
    & .fi-toggle {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);

        & > :first-child {
            border-radius: 0;
        }

        &.fi-toggle-off {
            background-color: var(--gray-200);
            box-shadow: inset 0 0 0 1px rgba(7, 8, 13, 0.35);

            & > :first-child {
                background-color: var(--cp-surface);
                box-shadow: 0 0 0 1px rgba(7, 8, 13, 0.35);
            }
        }

        &.fi-toggle-on {
            background-color: var(--cp-yellow);
            box-shadow: inset 0 0 0 1px var(--cp-ink);

            & > :first-child {
                background-color: var(--cp-ink);
            }

            & .fi-icon {
                color: var(--cp-yellow);
            }
        }

        &:focus-visible {
            outline: 2px solid var(--cp-teal-t);
            outline-offset: 2px;
        }
    }

    & .fi-select-input-option {
        border-radius: 0;
        border-left: 3px solid transparent;
        color: var(--cp-text);

        &:hover,
        &.fi-focused {
            color: var(--cp-ink);
            background-color: var(--cp-yellow-wash);
            border-left-color: var(--cp-ink);
        }

        &.fi-selected {
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
            border-left-color: var(--cp-ink);
        }
    }

    & .fi-select-input-message {
        color: var(--cp-muted);
    }

    & .fi-fo-date-time-picker-panel {
        & .fi-fo-date-time-picker-calendar-header-day {
            color: var(--cp-teal-t);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        & .fi-fo-date-time-picker-calendar-day {
            border-radius: 0;
            color: var(--cp-text);

            &:hover,
            &.fi-focused {
                color: var(--cp-ink);
                background-color: var(--cp-yellow-wash);
            }

            &.fi-fo-date-time-picker-calendar-day-today {
                color: var(--cp-teal-t);
                box-shadow: inset 0 0 0 1px var(--cp-teal-t);
            }

            &.fi-selected {
                color: var(--cp-ink);
                background-color: var(--cp-yellow);
            }

            &.fi-disabled {
                color: var(--cp-disabled);
                background: none;
            }
        }
    }

    & .fi-fo-color-picker-panel {
        border-radius: 0;
    }

    & .fi-fo-file-upload .filepond--root {
        border-radius: 0;
        background-color: var(--cp-surface);
        box-shadow: none;
        outline: 1px dashed rgba(7, 8, 13, 0.4);
        outline-offset: -1px;
    }

    & .fi-fo-file-upload .filepond--root[data-style-panel-layout='compact circle'] {
        border-radius: 9999px;
    }

    & .filepond--panel-root {
        border-radius: 0;
        background-color: transparent;
    }

    & .filepond--drop-label,
    & .filepond--drop-label label {
        color: var(--cp-muted);
    }

    & .filepond--label-action {
        color: var(--cp-teal-t);
        text-decoration-color: var(--cp-teal-t);
    }

    & .filepond--item-panel {
        border-radius: 0;
    }

    /* ── Tables ───────────────────────────────────────────────────────── */

    & .fi-ta-table > thead > tr,
    & .fi-ta-table > thead {
        background: var(--cp-cyan-wash);
    }

    & .fi-ta-header-cell,
    & .fi-ta-header-cell-sort-btn,
    & .fi-ta-actions-header-cell {
        font-family: var(--cp-font-ui);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cp-teal-t);
    }

    & .fi-ta-header-cell {
        border-bottom: 1px solid var(--cp-line-2);

        &.fi-ta-header-cell-sorted .fi-icon,
        & .fi-ta-header-cell-sort-btn:hover .fi-icon {
            color: var(--cp-red-t);
        }

        &:not(.fi-ta-header-cell-sorted) .fi-icon {
            color: var(--cp-dim);
        }
    }

    & .fi-ta-table :is(thead, tbody, tr, td),
    & .fi-ta-content > *,
    & .fi-ta-content-grouped > * {
        border-color: var(--cp-line);
    }

    & .fi-ta-row.fi-striped {
        background-color: rgba(7, 8, 13, 0.025);
    }

    & .fi-ta-row.fi-clickable:hover,
    & .fi-ta-record.fi-clickable:hover {
        background-color: rgba(252, 238, 10, 0.2);
        box-shadow: inset 3px 0 0 var(--cp-red);
    }

    & .fi-ta-row.fi-selected:not(.fi-striped),
    & .fi-ta-record.fi-selected {
        background-color: var(--cp-cyan-wash);
    }

    & .fi-ta-group-header-row > td,
    & .fi-ta-group-header {
        background-color: var(--cp-cyan-wash);
    }

    & .fi-ta-group-heading {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-ink);
    }

    & .fi-ta-group-description,
    & .fi-ta-text-description,
    & .fi-ta-placeholder,
    & .fi-in-placeholder {
        color: var(--cp-muted);
    }

    & .fi-ta-selection-indicator {
        background-color: var(--cp-cyan-wash);
        border-color: var(--cp-line);
    }

    & .fi-ta-empty-state {
        & .fi-ta-empty-state-icon-bg {
            border-radius: 0;
            background-color: var(--cp-cyan-wash);
            box-shadow: inset 0 0 0 1px var(--cp-teal-t);

            & .fi-icon {
                color: var(--cp-teal-t);
            }
        }

        & .fi-ta-empty-state-heading {
            font-family: var(--cp-font-display);
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--cp-ink);
        }

        & .fi-ta-empty-state-description {
            color: var(--cp-muted);
        }
    }

    & .fi-ta-col-manager-heading,
    & .fi-ta-filters-heading {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-red-t);
    }

    & .fi-ta-filter-indicators-label {
        color: var(--cp-muted);
    }

    & .fi-ta-color-item {
        border-radius: 0;
        box-shadow: 0 0 0 1px var(--cp-line-2);
    }

    /* ── Tabs ─────────────────────────────────────────────────────────── */

    & .fi-tabs.fi-contained {
        border-color: var(--cp-line-2);
    }

    & .fi-tabs-item {
        border-radius: 0;

        & .fi-tabs-item-label {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--cp-muted);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &:not(.fi-active):is(:hover, :focus-visible) {
            background-color: var(--cp-yellow-wash);

            & .fi-tabs-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &.fi-active {
            background-color: var(--cp-yellow);
            box-shadow: inset 0 -2px 0 var(--cp-ink);

            & .fi-tabs-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }
    }

    /* ── Pagination ───────────────────────────────────────────────────── */

    & .fi-pagination-items {
        border-radius: 0;
        background-color: var(--cp-surface);
        box-shadow: 0 0 0 1px var(--cp-line-2);
    }

    & .fi-pagination-item {
        border-color: var(--cp-line);

        & .fi-pagination-item-btn {
            border-radius: 0;

            & .fi-pagination-item-label,
            & .fi-icon {
                color: var(--cp-teal-t);
            }

            &:enabled:is(:hover, :focus-visible) {
                background-color: var(--cp-yellow-wash);

                & .fi-pagination-item-label,
                & .fi-icon {
                    color: var(--cp-ink);
                }
            }
        }

        &.fi-active .fi-pagination-item-btn {
            background-color: var(--cp-yellow);

            & .fi-pagination-item-label {
                color: var(--cp-ink);
            }
        }

        &.fi-disabled .fi-pagination-item-btn {
            & .fi-pagination-item-label,
            & .fi-icon {
                color: var(--cp-disabled);
            }
        }
    }

    & .fi-pagination-overview {
        color: var(--cp-muted);
    }

    /* ── Dropdowns ────────────────────────────────────────────────────── */

    & .fi-dropdown-panel {
        border-radius: 0;
        background-color: var(--cp-surface);
        border: 1px solid var(--cp-line-2);
        border-top: 3px solid var(--cp-cyan);
        box-shadow: 4px 4px 0 rgba(7, 8, 13, 0.08), 0 12px 32px rgba(7, 8, 13, 0.12);
    }

    & .fi-dropdown-list {
        border-color: var(--cp-line);
    }

    & .fi-dropdown-header {
        & .fi-dropdown-header-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--cp-red-t);
        }

        & .fi-icon {
            color: var(--cp-red-t);
        }
    }

    & .fi-dropdown-list-item {
        border-radius: 0;
        border-left: 3px solid transparent;

        & .fi-dropdown-list-item-label {
            color: var(--cp-text);
        }

        & > .fi-icon {
            color: var(--cp-dim);
        }

        &.fi-color:not(.fi-color-gray) {
            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--color-600);
            }
        }

        &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible) {
            background-color: var(--cp-yellow-wash);
            border-left-color: var(--cp-ink);

            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &.fi-selected {
            background-color: var(--cp-yellow);
            border-left-color: var(--cp-ink);

            & .fi-dropdown-list-item-label,
            & > .fi-icon {
                color: var(--cp-ink);
            }
        }

        &:is(.fi-disabled, [disabled]) .fi-dropdown-list-item-label {
            color: var(--cp-disabled);
        }
    }

    & .fi-theme-switcher-btn {
        border-radius: 0;
        color: var(--cp-dim);

        &:hover,
        &:focus-visible {
            color: var(--cp-ink);
            background-color: var(--cp-yellow-wash);
        }

        &.fi-active {
            color: var(--cp-ink);
            background-color: var(--cp-yellow);
        }
    }

    & .fi-user-avatar,
    & .fi-avatar {
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    }

    & .fi-user-menu-trigger:focus-visible .fi-user-avatar {
        outline: 2px solid var(--cp-teal-t);
        outline-offset: -2px;
    }

    /* ── Modals ───────────────────────────────────────────────────────── */

    & .fi-modal-window {
        border-radius: 0;
        background-color: var(--cp-surface);
        border: 1px solid var(--cp-line-2);
        border-top: 3px solid var(--cp-red);
        box-shadow: 6px 6px 0 rgba(7, 8, 13, 0.1), 0 30px 80px rgba(7, 8, 13, 0.25);
    }

    & .fi-modal-close-overlay {
        background-color: rgba(7, 8, 13, 0.45);
    }

    & .fi-modal-heading {
        font-family: var(--cp-font-display);
        font-size: 1rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-ink);
    }

    & .fi-modal-description {
        color: var(--cp-muted);
    }

    & .fi-modal-icon-bg {
        border-radius: 0;
    }

    & .fi-modal-header,
    & .fi-modal-footer,
    & .fi-modal.fi-modal-has-sticky-header .fi-modal-header,
    & .fi-modal.fi-modal-has-sticky-footer .fi-modal-footer {
        border-color: var(--cp-line);
        background-color: var(--cp-surface);
    }

    /* ── Notifications (toasts) ───────────────────────────────────────── */

    & .fi-no-notification {
        border-radius: 0;
        background-color: var(--cp-surface);
        box-shadow: 0 0 0 1px var(--cp-line-2), 4px 4px 0 rgba(7, 8, 13, 0.08);

        &.fi-color {
            box-shadow: inset 4px 0 0 var(--color-500), 0 0 0 1px var(--cp-line-2), 4px 4px 0 rgba(7, 8, 13, 0.08);
        }

        & .fi-no-notification-title {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--cp-ink);
        }

        & .fi-no-notification-body {
            color: var(--cp-muted);
        }
    }

    /* ── Breadcrumbs, global search ───────────────────────────────────── */

    & .fi-breadcrumbs-item-label {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-muted);
    }

    & a.fi-breadcrumbs-item-label:hover {
        color: var(--cp-red-t);
    }

    & .fi-breadcrumbs-item-separator {
        color: var(--cp-mag-t);
    }

    & .fi-global-search-results-ctn {
        border-radius: 0;
        background-color: var(--cp-surface);
        border: 1px solid var(--cp-line-2);
        border-top: 3px solid var(--cp-cyan);
        box-shadow: 4px 4px 0 rgba(7, 8, 13, 0.08), 0 12px 32px rgba(7, 8, 13, 0.12);
    }

    & .fi-global-search-result-group-header {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--cp-red-t);
        background-color: var(--cp-surface-2);
    }

    & .fi-global-search-result-link:is(:hover, :focus-visible) {
        background-color: var(--cp-yellow-wash);

        & .fi-global-search-result-heading {
            color: var(--cp-ink);
        }
    }

    & .fi-global-search-result-details,
    & .fi-global-search-no-results-message {
        color: var(--cp-muted);
    }

    /* ── Infolists, prose, callouts ───────────────────────────────────── */

    & .fi-in-entry-label {
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--cp-muted);
    }

    & .fi-prose {
        color: var(--cp-text);

        & :is(h1, h2, h3) {
            font-family: var(--cp-font-display);
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--cp-ink);
        }

        & h3 {
            font-size: 0.95em;
            text-transform: uppercase;
            color: var(--cp-red-t);
        }

        & :is(h4, h5, h6) {
            color: var(--cp-teal-t);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        & strong {
            color: var(--cp-ink);
        }

        & :not(pre) > code {
            color: var(--cp-mag-t);
            background-color: rgba(255, 42, 109, 0.1);
            border-radius: 0;
            padding: 0.1em 0.35em;
        }

        & pre {
            border-radius: 0;
            background-color: var(--cp-surface-2);
            box-shadow: inset 0 0 0 1px var(--cp-line);
        }

        & blockquote {
            border-left-color: var(--cp-magenta);
            color: var(--cp-muted);
        }

        & ul > li::marker,
        & ol > li::marker {
            color: var(--cp-teal-t);
        }

        & hr {
            border-color: var(--cp-line);
        }
    }

    & .fi-callout {
        border-radius: 0;
        background-color: var(--cp-cyan-wash);
        box-shadow: inset 4px 0 0 var(--cp-teal-t), 0 0 0 1px var(--cp-line);

        &.fi-color {
            background-color: color-mix(in srgb, var(--color-400) 10%, var(--cp-surface));
            box-shadow: inset 4px 0 0 var(--color-500), 0 0 0 1px color-mix(in srgb, var(--color-500) 40%, transparent);
        }

        & .fi-callout-heading {
            font-family: var(--cp-font-display);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--cp-teal-t);
        }

        &.fi-color .fi-callout-heading {
            color: var(--color-700);
        }
    }

    & .fi-loading-indicator {
        color: var(--cp-teal-t);
    }

    /* ── Dashboard week view (WeekWidget) ─────────────────────────────── */

    /* The day headings keep their weekday hue from week-row-stripes. */
    & .fi-wi-table .fi-ta-group-heading {
        font-family: var(--cp-font-ui);
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    /* ── Month calendar (guava/calendar → EventCalendar) ──────────────── */

    & .ec {
        --ec-border-color: var(--cp-line);
        --ec-today-bg-color: rgba(252, 238, 10, 0.18);
        --ec-bg-color: transparent;
        --ec-text-color: var(--cp-text);
        font-family: var(--cp-font-ui);
        color: var(--cp-text);
    }

    & .ec-toolbar .ec-title {
        font-family: var(--cp-font-display);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--cp-ink);
        white-space: nowrap;
    }

    @media (max-width: 639px) {
        & .ec-toolbar .ec-title {
            font-size: 0.8rem;
            letter-spacing: 0.04em;
        }
    }

    & .ec-button {
        border-radius: 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-teal-t);
        background-color: color-mix(in srgb, var(--cp-cyan) 10%, var(--cp-surface));
        border-color: var(--cp-teal-t);
        transition: background-color 0.12s, color 0.12s;

        &:not(:disabled):is(:hover, :focus-visible, :active) {
            color: var(--cp-ink);
            background-color: var(--cp-cyan);
            border-color: var(--cp-ink);
        }

        &:focus-visible {
            outline: 2px solid var(--cp-ink);
            outline-offset: -4px;
        }

        &:disabled {
            color: var(--cp-disabled);
            background-color: var(--cp-surface-2);
            border-color: var(--cp-line);
            opacity: 1;
        }
    }

    & .ec-button-group .ec-button {
        border-radius: 0;
    }

    & .ec-col-head,
    & .ec-header .ec-day {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cp-teal-t);
        background: var(--cp-cyan-wash);
    }

    & .ec-day-head {
        color: var(--cp-muted);
        font-weight: 600;
    }

    & .ec-day.ec-today {
        background-color: rgba(252, 238, 10, 0.18);
        box-shadow: inset 0 3px 0 var(--cp-red);

        & .ec-day-head {
            color: var(--cp-ink);
            font-weight: 700;
        }
    }

    /* EventCalendar fades other-month dates with opacity .3; a dimmer colour
       at full opacity keeps them readable. */
    & .ec-day.ec-other-month .ec-day-head,
    & .ec-day.ec-other-month .ec-day-head time {
        color: var(--cp-disabled);
        opacity: 1;
    }

    /* The widget paints each event in its person's colour with white text,
       which fails contrast on the lighter hues. As in Night City, the colour
       moves to a tint and a left bar (--who-color, set per event by
       HouseholdCalendarWidget) and the text is ink. */
    & .ec-event {
        border-radius: 0 !important;
        color: var(--cp-ink) !important;
        background-color: color-mix(in srgb, var(--who-color, var(--cp-cyan)) 22%, var(--cp-surface)) !important;
        box-shadow: inset 3px 0 0 var(--who-color, var(--cp-cyan));
        transition: background-color 0.12s;

        & .ec-event-time,
        & .ec-event-title {
            color: inherit;
        }

        & .ec-event-time {
            font-weight: 700;
        }

        &:hover,
        &:focus-visible {
            background-color: color-mix(in srgb, var(--who-color, var(--cp-cyan)) 38%, var(--cp-surface)) !important;
            color: var(--cp-ink) !important;
        }
    }

    @media print {
        & body.fi-body::after {
            display: none;
        }
    }
}