/*!
 * Fernand CSS — the design language of getfernand.com, as a framework.
 *
 * Principles
 *  1. Classless first: plain HTML (button, input, table, dialog, details…) is styled out of the box.
 *     Classes only change a behaviour or a look (.secondary, .ghost, .small…).
 *  2. Everything is a variable. Override any token in your own :root, or locally on a component.
 *  3. Light & dark mode built-in. Follows the OS by default, force it with
 *     <html data-theme="light|dark"> (or the legacy Fernand `.dark-mode` class).
 *  4. Tones: .info, .success, .warning, .danger work on buttons, alerts, badges, tags, toasts, progress…
 *
 * Everything lives in the `fernand` cascade layer: any unlayered CSS you write wins, without !important.
 */

/* ==========================================================================
   Fonts — Inter, same files as the app
   ========================================================================== */

@font-face {font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/Inter-Light.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/Inter-Italic.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Inter-Medium.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBoldItalic.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Inter-Bold.woff2") format("woff2");}
@font-face {font-family:'Inter';font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/Inter-BoldItalic.woff2") format("woff2");}

@layer fernand.tokens, fernand.base, fernand.forms, fernand.components, fernand.utilities;

/* ==========================================================================
   Tokens
   Every color is written once, as light-dark(<light>, <dark>).
   ========================================================================== */

@layer fernand.tokens {
    :root {
        color-scheme: light dark;

        /* --- Palette: same names as the Fernand app, so snippets can be copied both ways --- */
        --white:         light-dark(#fff, #121212);
        --grey-light:    light-dark(#F7FAFC, #1A1A1A);
        --grey:          #E6E9EB;
        --grey-medium:   light-dark(#5e6271, #8a8f98);
        --grey-strong:   light-dark(#9FA3B5, #8a8f98);
        --black:         light-dark(#131E40, #f7f8f8);
        --blue:          #00A0FF;
        --blue-pale:     light-dark(#e8f5ff, #2d2f36);
        --orange:        #FB8C3B;
        --orange-pale:   light-dark(#FFF7E9, #482a14);
        --red:           #dc2626;
        --red-pale:      light-dark(#FEE2E2, #281a1a);
        --green:         #2dbd33;
        --green-pale:    light-dark(#edf8eb, #1b2b18);
        --border:        light-dark(#EAECF8, rgb(255 255 255 / .1));
        --border-strong: light-dark(#E4E6EB, #44474e);

        /* --- Semantic colors: components only use these --- */
        --color-bg:             light-dark(#fff, #1f2023);       /* page */
        --color-bg-subtle:      var(--grey-light);               /* sidebars, footers, table heads */
        --color-surface:        light-dark(#fff, #191a1c);       /* cards, tags */
        --color-surface-raised: light-dark(#fff, #27282b);       /* popovers, menus, tooltips, toasts */
        --color-button-raised:  light-dark(#fff, #25262a);       /* .neutral buttons */
        --color-field:          light-dark(#fff, #1A1A1A);
        --color-field-disabled: light-dark(#F7FAFC, #303236);
        --color-field-border:   light-dark(#d1d5e6, rgb(255 255 255 / .1));
        --color-field-border-hover: light-dark(#d1d5e6, #44474e);
        --color-text:           var(--black);
        --color-text-muted:     var(--grey-medium);
        --color-text-subtle:    var(--grey-strong);
        --color-border:         var(--border);
        --color-border-strong:  var(--border-strong);
        --color-kbd:            light-dark(#eff1f4, #303236);
        --color-code:           #ff4081;
        --color-highlight:      light-dark(#fff3c4, #4a3b12);
        --color-selection:      light-dark(#d4eaff, #2c303a);
        --color-backdrop:       light-dark(rgb(193 201 210 / .3), rgb(0 0 0 / .7));
        --color-skeleton:       light-dark(#eff1f3, #2E2F31);
        --color-skeleton-shine: light-dark(#e2e2e2, #383838);
        --color-switch-off:     light-dark(#dfe1e4, #3c3f44);
        --color-switch-knob:    light-dark(#fff, #1f2023);
        --color-scrollbar:      light-dark(#d1d5e6, #303236);

        /* Tones — each has: solid fill, hover fill, text on pale bg, pale bg */
        --color-primary:        var(--blue);
        --color-primary-hover:  #0b8cd9;
        --color-primary-text:   var(--blue);
        --color-primary-pale:   var(--blue-pale);
        --color-on-primary:     #fff;

        --color-success:        var(--green);
        --color-success-hover:  #26a42b;
        --color-success-text:   light-dark(#27a52c, #3ca56a);
        --color-success-pale:   var(--green-pale);

        --color-warning:        var(--orange);
        --color-warning-hover:  #e97623;
        --color-warning-text:   light-dark(#e68139, #fb8c3b);
        --color-warning-pale:   var(--orange-pale);

        --color-danger:         var(--red);
        --color-danger-hover:   #c01d1c;
        --color-danger-text:    light-dark(#dc2626, #ff6060);
        --color-danger-pale:    var(--red-pale);

        /* --- Typography --- */
        --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
        --font-mono: Menlo, Consolas, ui-monospace, SFMono-Regular, "Liberation Mono", monospace;
        --font-size:     15px;
        --font-size-sm:  14px;
        --font-size-xs:  13px;
        --font-size-2xs: 11px;
        --line-height:   1.4667;  /* 22px at 15px, like the app */
        --font-weight-medium:   500;
        --font-weight-semibold: 600;
        --letter-spacing-caps:  1px;

        /* --- Spacing (4px grid) --- */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;
        --space-10: 40px;
        --space-12: 48px;
        --space-15: 60px;

        /* --- Shapes --- */
        --radius-sm:   3px;
        --radius:      4px;
        --radius-lg:   5px;
        --radius-pill: 999px;

        /* --- Controls --- */
        --control-height:    46px;
        --control-height-sm: 34px;
        --control-height-xs: 24px;
        --control-padding-x: 14px;

        /* --- Elevation --- */
        --shadow-ring:     0 0 0 1px light-dark(#12376914, #ffffff1a);
        --shadow-raised:   0 0 0 1px light-dark(#12376914, #303137), 0 1px 1px light-dark(#1237690a, transparent), 0 2px 4px light-dark(#12376914, transparent);
        --shadow-card:     0 1px 4px light-dark(#e7ebf3, #00000042), 0 9px 50px rgb(54 61 84 / 5%);
        --shadow-hover:    0 2px 2px light-dark(#e7ebf3b8, transparent), 0 0 15px light-dark(rgb(54 61 84 / 5%), transparent);
        --shadow-focus:    0 0 5px rgb(16 166 255 / 42%);
        --shadow-popover:  0 2px 4px light-dark(#222a3a14, #00000080), 0 9px 30px light-dark(#363d5412, #00000066);
        --shadow-modal:    0 1px 4px light-dark(#dadfea, transparent), 0 9px 50px light-dark(rgb(54 61 84 / 15%), rgb(0 0 0 / 50%));
        --focus-ring:      0 0 0 3px rgb(0 160 255 / 35%);

        /* --- Motion: Fernand's signature exponential ease --- */
        --ease:              cubic-bezier(.19, 1, .22, 1);
        --duration:          .75s;
        --duration-fast:     .5s;
        --duration-instant:  .2s;

        /* --- Layers --- */
        --z-sticky:  990;
        --z-popover: 900;
        --z-toast:   1100;
    }

    /* Force a theme. `.dark-mode` / `.light-mode` keep the app's historical class names working. */
    [data-theme="light"], .light-mode {color-scheme: light;}
    [data-theme="dark"], .dark-mode  {color-scheme: dark;}

    /* Tones: set local variables, every component reads them */
    .info    {--tone: var(--color-primary); --tone-hover: var(--color-primary-hover); --tone-text: var(--color-primary-text); --tone-pale: var(--color-primary-pale); --tone-contrast: var(--color-on-primary);}
    .success {--tone: var(--color-success); --tone-hover: var(--color-success-hover); --tone-text: var(--color-success-text); --tone-pale: var(--color-success-pale); --tone-contrast: #fff;}
    .warning {--tone: var(--color-warning); --tone-hover: var(--color-warning-hover); --tone-text: var(--color-warning-text); --tone-pale: var(--color-warning-pale); --tone-contrast: #fff;}
    .danger  {--tone: var(--color-danger);  --tone-hover: var(--color-danger-hover);  --tone-text: var(--color-danger-text);  --tone-pale: var(--color-danger-pale);  --tone-contrast: #fff;}
}

/* ==========================================================================
   Base — reset + typography on plain elements
   ========================================================================== */

@layer fernand.base {
    *, *::before, *::after {box-sizing: border-box;}

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        accent-color: var(--color-primary);
        scrollbar-color: var(--color-scrollbar) transparent;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: var(--font-size);
        line-height: var(--line-height);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    ::selection {background: var(--color-selection);}
    ::placeholder {color: var(--color-text-subtle); opacity: 1;}

    /* Smooth, never sluggish: the app animates nearly everything with the same curve */
    :where(a, button, input, select, textarea, summary, .button, .card, .tag) {
        transition-property: color, background-color, border-color, box-shadow, opacity, transform;
        transition-duration: var(--duration);
        transition-timing-function: var(--ease);
    }

    /* Set by fernand.js while switching theme, so colors don't fade for .75s */
    [data-theme-switching] *, [data-theme-switching] *::before, [data-theme-switching] *::after {transition: none !important;}

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

    /* --- Headings --- */
    h1, h2, h3, h4, h5, h6 {margin: 0 0 var(--space-4); color: var(--color-text); text-wrap: balance;}
    h1 {font-size: 25px; line-height: 30px; font-weight: 400;}
    /* The Fernand section label: small, uppercase, spaced */
    h2 {font-size: var(--font-size-xs); line-height: 18px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--color-text-subtle); margin-top: var(--space-8);}
    h3 {font-size: 17px; line-height: 24px; font-weight: var(--font-weight-medium);}
    h4 {font-size: var(--font-size); line-height: 22px; font-weight: var(--font-weight-medium);}
    h5 {font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted);}
    h6 {font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted);}
    :is(h1, h2, h3, h4, h5, h6):first-child {margin-top: 0;}

    /* Title + subtitle */
    hgroup {margin-bottom: var(--space-8);}
    hgroup > :is(h1, h2, h3, h4) {margin-bottom: var(--space-2);}
    hgroup > p {margin: 0; color: var(--color-text-muted);}

    /* --- Text --- */
    p {margin: 0 0 var(--space-4);}
    p:last-child {margin-bottom: 0;}
    a {color: var(--color-primary-text); text-decoration: none; background-color: transparent;}
    a:hover {color: var(--color-primary-hover);}
    b, strong {font-weight: var(--font-weight-medium);}  /* Fernand is never "bold" in body text */
    small {font-size: var(--font-size-xs);}
    sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
    sub {bottom: -.25em;}
    sup {top: -.5em;}
    abbr[title] {text-decoration: underline dotted; cursor: help;}
    mark {background: var(--color-highlight); color: inherit; padding: 0 2px; border-radius: var(--radius-sm);}
    del {color: var(--color-text-subtle);}
    ins {text-decoration: none; background: var(--color-success-pale); color: var(--color-success-text);}

    blockquote {margin: 0 0 var(--space-4); padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted);}
    blockquote footer, blockquote cite {display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); font-style: normal; color: var(--color-text-subtle);}

    hr {height: 0; margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--color-border);}

    /* --- Lists --- */
    ul, ol {margin: 0 0 var(--space-4); padding-left: 1.25em;}
    li + li {margin-top: var(--space-1);}
    li::marker {color: var(--color-text-subtle);}
    :where(nav, menu) :is(ul, ol), menu {list-style: none; margin: 0; padding: 0;}
    :where(nav, menu) li + li {margin-top: 0;}
    dl {margin: 0 0 var(--space-4);}
    dt {font-weight: var(--font-weight-medium);}
    dd {margin: 0 0 var(--space-3); color: var(--color-text-muted);}

    /* --- Code --- */
    code, kbd, samp, pre {font-family: var(--font-mono); font-feature-settings: "pnum"; font-variant: proportional-nums;}
    code {
        font-size: .875em;
        color: var(--color-code);
        padding: 2px 4px;
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        background: var(--color-bg-subtle);
    }
    pre {
        margin: 0 0 var(--space-4);
        padding: var(--space-4);
        overflow-x: auto;
        font-size: var(--font-size-xs);
        line-height: 22px;
        color: var(--color-text);
        background: var(--color-bg-subtle);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        tab-size: 4;
    }
    pre code {padding: 0; border: 0; background: none; color: inherit; font-size: inherit;}

    kbd {
        display: inline-block;
        min-width: 20px;
        padding: 2px 4px;
        font-family: var(--font-sans);
        font-size: var(--font-size-2xs);
        line-height: 13px;
        font-weight: var(--font-weight-medium);
        text-align: center;
        text-transform: uppercase;
        color: var(--color-text-muted);
        background: var(--color-kbd);
        border-radius: var(--radius);
        vertical-align: middle;
    }

    /* --- Media --- */
    img, svg, video, canvas, audio, iframe {vertical-align: middle;}
    img, video {max-width: 100%; height: auto;}
    img {border-style: none;}
    figure {margin: 0 0 var(--space-4);}
    figcaption {margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted);}

    [hidden] {display: none !important;}
}

/* ==========================================================================
   Forms
   ========================================================================== */

@layer fernand.forms {

    /* --- Labels & fieldsets --- */
    label, legend {
        display: block;
        margin-bottom: 10px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        cursor: pointer;
    }
    /* <label>Email <input></label>: the label wraps the field */
    label:has(> :is(input:not([type=checkbox], [type=radio]), select, textarea)) {margin-bottom: 0;}
    label > :is(input:not([type=checkbox], [type=radio]), select, textarea) {margin-top: 10px;}

    fieldset {margin: 0 0 var(--space-4); padding: 0; border: 0; min-width: 0;}
    fieldset[disabled] {opacity: .6;}
    legend {padding: 0;}

    /* --- Text-like fields --- */
    :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image], [type=hidden]), select, textarea) {
        display: block;
        width: 100%;
        height: var(--control-height);
        margin: 0 0 var(--space-4);
        padding: 0 var(--control-padding-x);
        font-family: inherit;
        font-size: var(--font-size);
        line-height: 1.2;
        color: var(--color-text);
        background-color: var(--color-field);
        border: 1px solid var(--color-field-border);
        border-radius: var(--radius);
        outline: none;
        appearance: none;
    }

    :where(input, select, textarea):hover {box-shadow: var(--shadow-hover); border-color: var(--color-field-border-hover);}
    :where(input, select, textarea):focus {border-color: var(--color-primary); box-shadow: var(--shadow-focus);}

    textarea {height: auto; min-height: 100px; padding: var(--control-padding-x); line-height: 20px; resize: vertical;}

    select {
        padding-right: 36px;
        cursor: pointer;
        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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right .5rem center;
        background-size: 1.5em 1.5em;
        background-repeat: no-repeat;
    }
    select:is([multiple], [size]:not([size="1"])) {height: auto; padding: var(--space-2); background-image: none;}
    select:is([multiple], [size]) option {padding: 6px 8px; border-radius: var(--radius-sm);}

    input[type=search] {
        padding-left: 40px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239FA3B5' stroke-width='1.75' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='6.5'/%3e%3cpath d='m16 16 4 4'/%3e%3c/svg%3e");
        background-position: 14px center;
        background-size: 18px;
        background-repeat: no-repeat;
    }
    input[type=search]::-webkit-search-decoration {appearance: none;}

    input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]) {cursor: pointer;}
    input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]):focus {cursor: text;}

    /* Sizes */
    :is(input, select).small {height: var(--control-height-sm); font-size: var(--font-size-sm); padding-left: 12px;}
    select.small {padding-right: 35px;}
    input[type=search].small {padding-left: 34px; background-position: 11px center; background-size: 16px;}

    /* Disabled & read-only */
    :where(input, select, textarea):is(:disabled, [readonly]) {
        cursor: not-allowed;
        color: var(--color-text-muted);
        background-color: var(--color-field-disabled);
        border-color: var(--color-border);
        box-shadow: none;
    }
    :where(input, textarea)[readonly] {cursor: text;}

    /* Validation: aria-invalid is set by you (or by the server), :user-invalid by the browser after interaction */
    :where(input, select, textarea):is([aria-invalid=true], :user-invalid) {
        border-color: light-dark(#fb6767, var(--color-danger));
        box-shadow: 0 0 5px light-dark(#ff00003d, transparent);
        color: var(--color-danger-text);
    }
    :where(input, select, textarea)[aria-invalid=false] {border-color: var(--color-success);}

    /* Help text: a <small> right after a field */
    :is(input, select, textarea, [role=group]) + small {
        display: block;
        margin: calc(-1 * var(--space-4) + 6px) 0 var(--space-6);
        font-size: var(--font-size-xs);
        font-weight: 400;
        color: var(--color-text-muted);
    }
    :is([aria-invalid=true], :user-invalid) + small {color: var(--color-danger-text);}
    small.warning {color: var(--color-warning-text);}

    /* Shake an invalid field: add .shake once (e.g. wrong 2FA code) */
    .shake {animation: fernand-shake .5s ease-in-out;}

    /* --- Checkbox & radio (Fernand draws the same tick for both) --- */
    input:is([type=checkbox], [type=radio]) {
        appearance: none;
        display: inline-block;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin: 0 var(--space-2) 0 0;
        padding: 0;
        vertical-align: middle;
        cursor: pointer;
        background-color: var(--color-field);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border: 1px solid var(--color-field-border);
        border-radius: var(--radius-lg);
        user-select: none;
    }
    input[type=radio] {border-radius: 50%;}
    input:is([type=checkbox], [type=radio]):focus-visible {outline: none; box-shadow: var(--focus-ring);}
    input:is([type=checkbox], [type=radio]):checked,
    input[type=checkbox]:indeterminate {
        background-color: var(--color-primary);
        border-color: transparent;
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    }
    input[type=checkbox]:indeterminate {background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 8h6' stroke='white' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");}
    input:is([type=checkbox], [type=radio]):disabled {background-color: var(--color-border); cursor: not-allowed;}
    input:is([type=checkbox], [type=radio]):checked:disabled {background-color: var(--color-text-subtle);}
    input:is([type=checkbox], [type=radio])[aria-invalid=true] {border-color: var(--color-danger);}

    /* A label that contains a checkbox/radio becomes an inline choice */
    label:has(> input:is([type=checkbox], [type=radio])) {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: fit-content;
        margin-bottom: var(--space-3);
        font-size: var(--font-size);
        font-weight: 400;
        color: var(--color-text);
    }
    label:has(> input:is([type=checkbox], [type=radio])) > input {margin: 0;}
    label:has(> input:disabled) {color: var(--color-text-subtle); cursor: not-allowed;}

    /* --- Switch: a checkbox with role="switch" --- */
    input[type=checkbox][role=switch] {
        position: relative;
        width: 30px;
        height: 20px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--color-switch-off);
        transition: background-color 100ms ease-out;
    }
    input[type=checkbox][role=switch]::before {content: ""; position: absolute; inset: -6px;}  /* larger hit area */
    input[type=checkbox][role=switch]::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--color-switch-knob);
        box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
        transition: left 100ms ease-out;
    }
    input[type=checkbox][role=switch]:checked {background: var(--color-primary); background-image: none;}
    input[type=checkbox][role=switch]:checked::after {left: 13px; background: light-dark(#fff, var(--black));}
    input[type=checkbox][role=switch]:disabled {opacity: .5;}

    /* --- Other inputs --- */
    input[type=range] {width: 100%; margin: 0 0 var(--space-4); cursor: pointer;}

    input[type=color] {
        appearance: none;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: none;
        cursor: pointer;
        vertical-align: middle;
    }
    input[type=color]::-webkit-color-swatch-wrapper {padding: 0;}
    input[type=color]::-webkit-color-swatch {border: 0; border-radius: 50%;}
    input[type=color]::-moz-color-swatch {border: 0; border-radius: 50%;}

    input[type=file] {
        display: block;
        width: 100%;
        margin: 0 0 var(--space-4);
        font: inherit;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }
    input[type=file]::file-selector-button {
        margin-right: var(--space-3);
        padding: 7px 14px;
        font: inherit;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        background: var(--color-button-raised);
        border: 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow-raised);
        cursor: pointer;
        transition: all var(--duration) var(--ease);
    }
    input[type=file]::file-selector-button:hover {background: var(--color-primary); color: var(--color-on-primary);}

    /* Big centered digits, e.g. a 2FA code: <div role="group" class="code"><input inputmode="numeric" maxlength="1">… */
    [role=group].code {justify-content: space-between; gap: var(--space-2);}
    [role=group].code > input {width: 50px; height: 50px; padding: 0; font-size: 18px; text-align: center; border-radius: var(--radius) !important; margin: 0 !important;}
}

/* ==========================================================================
   Components
   ========================================================================== */

@layer fernand.components {

    /* ----------------------------------------------------------------------
       Buttons — <button>, <input type=submit|button|reset> and <a class="button">
       The default is the primary (blue) button. Add a tone to recolor it.
       ---------------------------------------------------------------------- */

    :where(button, input:is([type=button], [type=submit], [type=reset]), .button) {
        --btn-bg: var(--tone, var(--color-primary));
        --btn-bg-hover: var(--tone-hover, var(--color-primary-hover));
        --btn-color: var(--tone-contrast, var(--color-on-primary));
        --btn-border: var(--btn-bg);
        --btn-border-width: 2px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto;
        height: auto;
        margin: 0;
        padding: calc(14px - var(--btn-border-width)) calc(20px - var(--btn-border-width));
        font-family: inherit;
        font-size: var(--font-size);
        font-weight: var(--font-weight-medium);
        line-height: 18px;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        color: var(--btn-color);
        background: var(--btn-bg);
        border: var(--btn-border-width) solid var(--btn-border);
        border-radius: var(--radius);
        box-shadow: none;
        cursor: pointer;
        user-select: none;
        appearance: none;
    }
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button):hover {--btn-bg: var(--btn-bg-hover); color: var(--btn-color);}
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button):focus-visible {outline: none; box-shadow: var(--focus-ring);}
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button):is(:disabled, [aria-disabled=true]) {opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none;}
    :where(button, .button) > svg {width: 18px; height: 18px; flex: none;}

    /* Secondary: pale tint, fills on hover */
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).secondary {
        --btn-bg: var(--tone-pale, var(--color-primary-pale));
        --btn-bg-hover: var(--tone, var(--color-primary));
        --btn-color: var(--tone-text, var(--color-primary-text));
    }
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).secondary:hover {--btn-color: var(--tone-contrast, var(--color-on-primary));}

    /* Neutral: the white, raised toolbar button of the app (turns blue on hover) */
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).neutral {
        --btn-bg: var(--color-button-raised);
        --btn-color: var(--tone-text, var(--color-text-muted));
        --btn-border: transparent;
        box-shadow: var(--shadow-raised);
    }
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).neutral:hover {
        --btn-bg: var(--tone, var(--color-primary));
        --btn-color: var(--tone-contrast, var(--color-on-primary));
        box-shadow: 0 0 0 1px var(--tone-hover, var(--color-primary-hover)), 0 1px 1px #1237690a, 0 3px 6px #1237691f;
    }

    /* Ghost: outlined, quiet — also the default look of <input type="reset"> */
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).ghost,
    input[type=reset]:not(.secondary, .neutral, .link) {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-color: var(--color-text-subtle);
        --btn-border: var(--color-border-strong);
        --btn-border-width: 1px;
    }
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).ghost:hover,
    input[type=reset]:not(.secondary, .neutral, .link):hover {
        --btn-color: var(--tone-text, var(--color-primary-text));
        --btn-border: var(--tone, var(--color-primary));
    }

    /* Link: a button that looks like text */
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).link {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-border: transparent;
        --btn-color: var(--tone-text, var(--color-text-subtle));
        --btn-border-width: 0px;
        padding: 0;
        font-weight: inherit;
    }
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).link:hover {--btn-color: var(--tone-text, var(--color-primary-text)); text-decoration: underline; text-underline-offset: 3px;}

    /* Sizes */
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).small {padding: calc(9px - var(--btn-border-width)) calc(14px - var(--btn-border-width)); font-size: var(--font-size-sm); line-height: 16px;}
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).tiny  {padding: calc(5px - var(--btn-border-width)) calc(8px - var(--btn-border-width)); font-size: 12px; line-height: 14px; gap: 4px;}
    :where(button, input:is([type=button], [type=submit], [type=reset]), .button).block {display: flex; width: 100%;}
    /* Square icon button: <button class="icon" aria-label="Edit"><svg/></button> */
    :where(button, .button).icon {aspect-ratio: 1; padding: 0; width: var(--control-height);}
    :where(button, .button).icon.small {width: var(--control-height-sm);}
    :where(button, .button).icon.tiny {width: var(--control-height-xs);}
    :where(button, .button).icon.small > svg {width: 16px; height: 16px;}
    :where(button, .button).icon.tiny > svg {width: 14px; height: 14px;}

    /* Toggle buttons: aria-pressed="true" */
    :where(button, .button)[aria-pressed=true]:is(.neutral, .ghost) {
        --btn-bg: var(--color-primary-pale);
        --btn-color: var(--color-primary-text);
        --btn-border: transparent;
        box-shadow: 0 0 0 1px var(--color-primary);
    }

    /* Keyboard hints inside buttons (the manifest: every shortcut has a visible equivalent) */
    :where(button, .button) kbd {margin: -2px -6px -2px 2px; padding: 3px 4px; color: inherit; background: rgb(255 255 255 / .2);}
    :where(button, .button):is(.neutral, .ghost, .link) kbd {color: var(--color-text-muted); background: var(--color-kbd);}
    :where(button, .button):is(.neutral, .ghost):hover kbd {color: inherit; background: rgb(255 255 255 / .2);}
    :where(button, .button).ghost:hover kbd {background: var(--color-primary-pale);}
    :where(button, .button).secondary kbd {color: var(--tone-text, var(--color-primary-text)); background: var(--color-surface); box-shadow: 0 1px 2px light-dark(#bed9e9, transparent);}

    /* Loading state: aria-busy="true" */
    [aria-busy=true]::before {
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        vertical-align: -.15em;
        animation: fernand-spin .7s linear infinite;
    }
    :where(button, .button)[aria-busy=true] {pointer-events: none; opacity: .85;}
    :where(:not(button, .button))[aria-busy=true]::before {margin-right: var(--space-2); color: var(--color-text-subtle);}

    /* Close button: <button class="close" aria-label="Close">×</button> */
    :where(button, .button).close {
        --btn-bg: transparent;
        --btn-bg-hover: var(--tone-pale, var(--color-primary-pale));
        --btn-border: transparent;
        --btn-color: var(--color-text-subtle);
        --btn-border-width: 0px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        flex: none;
    }
    :where(button, .button).close:hover {--btn-color: var(--tone-text, var(--color-primary-text));}
    :where(button, .button).close:empty::after {
        content: "";
        width: 20px;
        height: 20px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3e%3cpath d='M17.25 6.75 6.75 17.25M6.75 6.75l10.5 10.5'/%3e%3c/svg%3e") center / contain no-repeat;
    }

    /* ----------------------------------------------------------------------
       Groups — role="group" joins inputs, addons and buttons
       ---------------------------------------------------------------------- */

    [role=group] {display: flex; align-items: stretch; width: 100%; margin-bottom: var(--space-4);}
    [role=group] > * {margin: 0 !important; border-radius: 0;}
    [role=group] > :not(:first-child) {margin-left: -1px !important;}
    [role=group] > :first-child {border-start-start-radius: var(--radius); border-end-start-radius: var(--radius);}
    [role=group] > :last-child {border-start-end-radius: var(--radius); border-end-end-radius: var(--radius);}
    [role=group] > :is(input, select, textarea) {flex: 1 1 auto; min-width: 0;}
    [role=group] > :is(button, .button) {flex: none; white-space: nowrap;}
    [role=group] > :is(input, select, textarea, button, .button):is(:focus, :focus-visible) {position: relative; z-index: 1;}
    /* Text addons (prefix/suffix): <span>https://</span> */
    [role=group] > :is(span, small, output) {
        display: flex;
        align-items: center;
        padding: 0 var(--control-padding-x);
        font-size: var(--font-size);
        white-space: nowrap;
        color: var(--color-text-muted);
        background: var(--color-bg-subtle);
        border: 1px solid var(--color-field-border);
    }
    /* Button groups: segmented row of buttons */
    [role=group]:not(:has(input, select, textarea)) {width: fit-content;}
    [role=group] > :is(button, .button):is(.neutral) + :is(button, .button) {margin-left: 1px !important;}

    /* ----------------------------------------------------------------------
       Alerts
       <div class="alert success" role="status"><svg/><div><strong>Title</strong><p>…</p></div></div>
       ---------------------------------------------------------------------- */

    .alert {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        margin: 0 0 var(--space-4);
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size);
        color: var(--tone-text, var(--color-text-muted));
        background: var(--tone-pale, var(--color-bg-subtle));
        border-radius: var(--radius-lg);
    }
    .alert > svg {flex: none; width: 20px; height: 20px; margin-top: 1px;}
    .alert > div {flex: 1 1 auto; min-width: 0;}
    .alert strong {display: block; font-weight: var(--font-weight-semibold); color: inherit;}
    .alert p {margin: 0;}
    .alert strong + p {margin-top: 2px; opacity: .9;}
    .alert a:not(.button) {color: inherit; text-decoration: underline; text-underline-offset: 3px;}
    .alert .close {margin: -6px -10px -6px 0; --btn-color: currentColor;}
    .alert footer {display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3);}
    .alert:has(> .close) > div {padding-right: var(--space-2);}

    /* Confirm: asks the user for a decision, with actions. Pairs well with a tone. */
    .alert.confirm {
        color: var(--color-text);
        background: var(--color-surface);
        box-shadow: var(--shadow-raised);
        border-left: 3px solid var(--tone, var(--color-primary));
    }
    .alert.confirm > svg {color: var(--tone-text, var(--color-primary-text));}
    .alert.confirm strong + p {color: var(--color-text-muted); opacity: 1;}

    /* Banner: sticks to the top of the viewport, full width */
    .alert.banner {position: sticky; top: 0; z-index: var(--z-sticky); align-items: center; margin: 0; border-radius: 0; padding: var(--space-3) var(--space-8);}

    /* ----------------------------------------------------------------------
       Cards — <article> is a card. Use .card on any other element (e.g. a link).
       ---------------------------------------------------------------------- */

    article, .card {
        --card-padding: var(--space-5);
        position: relative;
        display: block;
        margin: 0 0 var(--space-4);
        padding: var(--card-padding);
        color: var(--color-text);
        background: var(--color-surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-ring);
    }
    :is(article, .card) > header {display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);}
    :is(article, .card) > header > :is(h1, h2, h3, h4, h5, h6) {flex: 1 1 auto; margin: 0;}
    :is(article, .card) > header > :is(h3, h4) {font-size: var(--font-size); font-weight: var(--font-weight-medium);}
    :is(article, .card) > footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        margin: var(--card-padding) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
        padding: 14px var(--card-padding);
        font-size: var(--font-size-sm);
        color: var(--tone-text, var(--color-text-muted));
        background: var(--tone-pale, var(--color-bg-subtle));
        border-top: 1px solid var(--color-border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    :is(article, .card) > :last-child:not(footer) {margin-bottom: 0;}
    :is(article, .card) > p {color: var(--color-text-muted);}

    /* Clickable card: <a class="card" href="…"> */
    :is(a, button, label).card {text-align: left; cursor: pointer; text-decoration: none;}
    :is(a, button, label).card:hover {box-shadow: var(--shadow-raised);}
    :is(a, button, label).card:hover :is(h3, h4, strong) {color: var(--color-primary-text);}

    /* Selectable card: <label class="card"><input type="radio" name="plan"> …</label> */
    label.card {width: auto; font-size: var(--font-size); font-weight: 400; color: var(--color-text);}
    .card > input:is([type=radio], [type=checkbox]) {position: absolute; top: var(--card-padding); right: var(--card-padding); margin: 0;}

    /* Toned card: <article class="danger"> gets a colored ring, its buttons follow */
    :is(article, .card):is(.info, .success, .warning, .danger) {box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent);}

    .card.raised, article.raised {box-shadow: var(--shadow-card); border: 1px solid var(--color-border);}
    :is(article, .card):is(.selected, [aria-current], :has(> input:checked)) {box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 1px #00a0ff3b;}
    :is(article, .card):is(.disabled, [aria-disabled=true]) {background: var(--color-bg-subtle); box-shadow: none; opacity: .75;}
    /* "Add new" placeholder card */
    .card.new {display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 120px; color: var(--color-text-muted); background: var(--color-bg-subtle); box-shadow: none; border: 1px dashed var(--color-border-strong);}
    .card.new:hover {color: var(--color-primary-text); border-color: var(--color-primary);}

    /* Empty state, inside a card or a page */
    .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 180px;
        padding: var(--space-6);
        text-align: center;
        color: var(--color-text-muted);
        background: var(--color-bg-subtle);
        border-radius: var(--radius-sm);
    }
    .empty > svg {width: 28px; height: 28px; color: var(--color-text-subtle);}
    .empty strong {color: var(--color-text);}

    /* ----------------------------------------------------------------------
       Tags (pills) & badges
       ---------------------------------------------------------------------- */

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 10px;
        font-size: var(--font-size-xs);
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        vertical-align: middle;
        color: var(--tone-text, var(--color-text));
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
    }
    .tag.small {height: 24px; padding: 0 8px; font-size: var(--font-size-2xs);}
    .tag.muted {color: var(--color-text-subtle); background: transparent;}
    :is(a, button).tag {cursor: pointer;}
    :is(a, button).tag:hover, .tag:is(.active, [aria-pressed=true], [aria-current]) {color: var(--color-primary-text); border-color: var(--color-primary);}
    .tag:is(.active, [aria-pressed=true], [aria-current]) {background: var(--color-primary-pale);}
    .tag > img {width: 18px; height: 18px; margin-left: -4px; border-radius: 50%;}
    .tag > svg {width: 14px; height: 14px;}
    /* Removable: <span class="tag">Billing <button aria-label="Remove"></button></span> */
    .tag > button {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-border: transparent;
        --btn-color: var(--color-text-subtle);
        --btn-border-width: 0px;
        width: 16px;
        height: 16px;
        margin-right: -4px;
        padding: 0;
        border-radius: 50%;
        font-size: 14px;
    }
    .tag > button:hover {--btn-color: var(--color-danger-text);}
    .tag > button:empty::after {content: "×"; line-height: 1;}

    /* Colored dot — a tag's color, a status, an online indicator */
    .dot {
        display: inline-block;
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dot-color, var(--tone, var(--color-text-subtle)));
        vertical-align: middle;
    }

    /* Badges: the uppercase status labels of the app (ACTIVE, CHURNED…) */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: var(--font-weight-semibold);
        line-height: 12px;
        letter-spacing: .8px;
        text-transform: uppercase;
        white-space: nowrap;
        vertical-align: middle;
        color: var(--tone-text, var(--color-text-muted));
        background: var(--tone-pale, var(--color-bg-subtle));
        border-radius: var(--radius);
    }
    /* Counter, e.g. inside a tab or a button */
    .count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--tone-contrast, var(--color-text-muted));
        background: var(--tone, var(--color-kbd));
        border-radius: var(--radius-pill);
    }

    /* ----------------------------------------------------------------------
       Tabs
       ARIA tabs:  <div role="tablist"><button role="tab" aria-selected="true">…</div>
       Link tabs:  <nav class="tabs"><a href="…" aria-current="page">…</a></nav>
       ---------------------------------------------------------------------- */

    [role=tablist], .tabs {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        margin: 0 0 var(--space-6);
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs :is(ul, ol) {display: contents;}
    .tabs li {list-style: none; margin: 0;}

    :is([role=tab], .tabs :is(a, button)) {
        --btn-bg: transparent;
        --btn-bg-hover: var(--color-bg-subtle);
        --btn-border: transparent;
        --btn-color: var(--color-text-muted);
        --btn-border-width: 0px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        font-size: var(--font-size-sm);
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
        color: var(--btn-color);
        background: var(--btn-bg);
        border: 0;
        border-radius: var(--radius-lg);
    }
    :is([role=tab], .tabs :is(a, button)):hover {--btn-color: var(--color-text); background: var(--btn-bg-hover);}
    :is([role=tab][aria-selected=true], .tabs :is(a, button):is([aria-current], [aria-selected=true], .active)) {
        --btn-color: var(--color-primary-text);
        --btn-bg: var(--color-primary-pale);
        --btn-bg-hover: var(--color-primary-pale);
    }
    [role=tab] .count, .tabs .count {height: 18px; min-width: 18px;}

    /* Segmented: raised selected tab (the "Custom data" tabs of the app) */
    :is([role=tablist], .tabs).segmented :is([role=tab], a, button) {box-shadow: var(--shadow-ring);}
    :is([role=tablist], .tabs).segmented :is([role=tab], a, button):hover {--btn-bg-hover: var(--color-button-raised);}
    :is([role=tablist], .tabs).segmented :is([role=tab][aria-selected=true], [aria-current], .active) {
        --btn-bg: var(--color-button-raised);
        --btn-bg-hover: var(--color-button-raised);
        box-shadow: var(--shadow-raised);
    }

    /* Underlined: classic tabs sitting on a line */
    :is([role=tablist], .tabs).underline {gap: var(--space-5); border-bottom: 1px solid var(--color-border); overflow-y: hidden;}
    :is([role=tablist], .tabs).underline :is([role=tab], a, button) {padding: 10px 0; margin-bottom: -1px; border-radius: 0; --btn-bg-hover: transparent; border-bottom: 2px solid transparent;}
    :is([role=tablist], .tabs).underline :is([role=tab][aria-selected=true], [aria-current], .active) {--btn-bg: transparent; border-bottom-color: var(--color-primary);}

    /* Vertical: the settings sidebar */
    :is([role=tablist], .tabs).vertical {flex-direction: column; align-items: stretch; gap: 1px; overflow: visible;}
    :is([role=tablist], .tabs).vertical :is([role=tab], a, button) {justify-content: flex-start; width: 100%; white-space: normal; text-align: left;}

    [role=tabpanel]:focus-visible {outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius);}

    /* ----------------------------------------------------------------------
       Dialog — native <dialog>, opened with showModal() or command="show-modal"
       <dialog id="x" closedby="any">
         <header><h2>Title</h2><button class="close" commandfor="x" command="close" aria-label="Close"></button></header>
         <section>…</section>
         <footer><button>Save</button> <button class="ghost" commandfor="x" command="close">Cancel</button></footer>
       </dialog>
       ---------------------------------------------------------------------- */

    dialog {
        --dialog-width: 550px;
        --dialog-padding: var(--space-8);
        width: calc(100% - 2 * var(--space-4));
        max-width: var(--dialog-width);
        max-height: calc(100dvh - 2 * var(--space-10));
        padding: var(--dialog-padding);
        color: var(--color-text);
        background: var(--color-bg);
        border: 1px solid light-dark(transparent, var(--color-border));
        border-radius: var(--radius);
        box-shadow: var(--shadow-modal);
        overflow: auto;
        overscroll-behavior: contain;
        /* Open/close animation */
        opacity: 0;
        transform: scale(.985);
        transition: opacity var(--duration-instant) var(--ease), transform var(--duration-instant) var(--ease), overlay var(--duration-instant) allow-discrete, display var(--duration-instant) allow-discrete;
    }
    dialog[open] {opacity: 1; transform: scale(1);}
    @starting-style {dialog[open] {opacity: 0; transform: scale(.985);}}

    dialog::backdrop {
        background-color: transparent;
        transition: background-color var(--duration-instant) var(--ease), overlay var(--duration-instant) allow-discrete, display var(--duration-instant) allow-discrete;
    }
    dialog[open]::backdrop {background-color: var(--color-backdrop);}
    @starting-style {dialog[open]::backdrop {background-color: transparent;}}

    /* Structured dialog: header / section / footer get their own padding, the body scrolls */
    dialog:has(> section, > form > section) {padding: 0; overflow: hidden;}
    dialog:has(> section, > form > section)[open] {display: flex; flex-direction: column;}
    dialog > form {display: contents;}
    :where(dialog, dialog > form) > header {
        flex: none;
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }
    dialog:has(> section, > form > section) > header,
    dialog:has(> section, > form > section) > form > header {margin: 0; padding: var(--dialog-padding) var(--dialog-padding) 0;}
    :where(dialog, dialog > form) > header > :is(h1, h2, h3) {flex: 1 1 auto; margin: 0; font-size: 22px; line-height: 28px; font-weight: 400; color: var(--color-text); text-transform: none; letter-spacing: normal;}
    :where(dialog, dialog > form) > header > :is(hgroup, .row) {flex: 1 1 auto; margin: 0;}
    :where(dialog, dialog > form) > header hgroup {margin: 0;}
    :where(dialog, dialog > form) > header :is(hgroup, .row) :is(h1, h2, h3) {font-size: 22px; line-height: 28px; font-weight: 400; color: var(--color-text); text-transform: none; letter-spacing: normal;}
    :where(dialog, dialog > form) > header > .close {margin: -4px -12px 0 0;}
    :where(dialog, dialog > form) > section {flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-6) var(--dialog-padding) var(--dialog-padding);}
    :where(dialog, dialog > form) > section > :last-child,
    :where(dialog, dialog > form) > section > label:last-child > :last-child {margin-bottom: 0;}
    :where(dialog, dialog > form) > footer {
        flex: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        margin: var(--dialog-padding) calc(-1 * var(--dialog-padding)) calc(-1 * var(--dialog-padding));
        padding: var(--space-4) var(--dialog-padding);
        background: var(--color-bg-subtle);
        border-top: 1px solid var(--color-border);
    }
    dialog:has(> section, > form > section) > footer,
    dialog:has(> section, > form > section) > form > footer {margin: 0;}
    :where(dialog, dialog > form) > footer > .end {margin-left: auto;}

    dialog.medium {--dialog-width: 640px;}
    dialog.large {--dialog-width: 820px;}
    dialog.small {--dialog-width: 420px;}
    dialog.fullscreen {--dialog-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0;}

    /* Side panel: slides in from the right */
    dialog.sidepanel {
        --dialog-width: 480px;
        margin: 0 0 0 auto;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-width: 0 0 0 1px;
        transform: translateX(32px);
    }
    dialog.sidepanel[open] {transform: none;}
    @starting-style {dialog.sidepanel[open] {transform: translateX(32px);}}

    /* Confirmation: centered icon + question */
    dialog.confirm {--dialog-width: 420px; text-align: center;}
    dialog.confirm > :is(svg, .icon) {display: block; width: 44px; height: 44px; margin: 0 auto var(--space-4); padding: 10px; color: var(--tone-text, var(--color-primary-text)); background: var(--tone-pale, var(--color-primary-pale)); border-radius: 50%;}
    dialog.confirm h2 {margin: 0 0 var(--space-2); font-size: 20px; line-height: 26px; font-weight: 400; color: var(--color-text); text-transform: none; letter-spacing: normal;}
    dialog.confirm p {color: var(--color-text-muted);}
    dialog.confirm footer {justify-content: center;}

    html:has(dialog[open]:modal) {overflow: hidden;}

    /* ----------------------------------------------------------------------
       Popover & menu — native [popover], anchored to its button when supported
       <button popovertarget="m">Actions</button>
       <div popover id="m"><menu><li><button>Rename</button></li>…</menu></div>
       ---------------------------------------------------------------------- */

    [popover] {
        min-width: 180px;
        max-width: 280px;
        margin: 0;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
        color: var(--color-text);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-popover);
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity var(--duration-instant) var(--ease), transform var(--duration-instant) var(--ease), overlay var(--duration-instant) allow-discrete, display var(--duration-instant) allow-discrete;
    }
    [popover]:popover-open {opacity: 1; transform: none;}
    @starting-style {[popover]:popover-open {opacity: 0; transform: translateY(-4px);}}
    @supports (position-area: bottom) {
        [popover]:not(.toasts) {inset: auto; margin: 6px 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline;}
    }
    [popover]:has(> :is(menu, ul):first-child) {padding: 6px 0;}
    [popover].large {max-width: 540px;}

    [popover] > :is(menu, ul) {margin: 0; padding: 0; list-style: none;}
    [popover] > :is(menu, ul) > li {margin: 0;}
    [popover] > :is(menu, ul) > li > :is(a, button) {
        --btn-bg: transparent;
        --btn-bg-hover: var(--color-bg-subtle);
        --btn-border: transparent;
        --btn-border-width: 0px;
        --btn-color: var(--color-text-muted);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: 8px 18px;
        font-size: var(--font-size-sm);
        font-weight: 400;
        text-align: left;
        color: var(--btn-color);
        background: var(--btn-bg);
        border-radius: 0;
    }
    [popover] > :is(menu, ul) > li > :is(a, button):is(:hover, :focus-visible) {--btn-color: var(--color-text); background: var(--btn-bg-hover); box-shadow: none;}
    [popover] > :is(menu, ul) > li > :is(a, button).danger {--btn-color: var(--color-danger-text);}
    [popover] > :is(menu, ul) > li > :is(a, button).danger:hover {--btn-bg-hover: var(--color-danger-pale);}
    [popover] > :is(menu, ul) > li > :is(a, button) > svg {width: 16px; height: 16px; color: var(--color-text-subtle);}
    [popover] > :is(menu, ul) > li > :is(a, button) > kbd {margin-left: auto;}
    [popover] > :is(menu, ul) > li > :is(a, button)[aria-checked=true]::after {content: "✓"; margin-left: auto; color: var(--color-primary-text);}
    [popover] > :is(menu, ul) > li:has(> hr) hr, [popover] > :is(menu, ul) > hr {margin: 6px 0;}
    [popover] > :is(menu, ul) > li > :is(h2, h6) {margin: 8px 18px 4px; font-size: var(--font-size-2xs);}

    /* ----------------------------------------------------------------------
       Tooltip — <button data-tooltip="Assign to me">…</button>
       ---------------------------------------------------------------------- */

    [data-tooltip] {position: relative;}
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: var(--z-popover);
        bottom: calc(100% + 8px);
        left: 50%;
        width: max-content;
        max-width: 240px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        text-transform: none;
        letter-spacing: normal;
        white-space: normal;
        color: var(--color-text);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-popover);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 4px);
        transition: opacity var(--duration-instant) var(--ease), transform var(--duration-instant) var(--ease);
    }
    [data-tooltip][data-placement=bottom]::after {bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px);}
    [data-tooltip]:is(:hover, :focus-visible)::after {opacity: 1; transform: translate(-50%, 0); transition-delay: .3s;}

    /* ----------------------------------------------------------------------
       Toasts — <div class="toasts"> region + <div class="toast success" role="status">
       ---------------------------------------------------------------------- */

    .toasts {
        position: fixed;
        z-index: var(--z-toast);
        top: var(--space-4);
        right: var(--space-4);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-2);
        width: min(356px, calc(100vw - 2 * var(--space-4)));
        pointer-events: none;
    }
    .toast {
        --toast-duration: 5s;
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
        padding: 14px var(--space-4);
        overflow: hidden;
        font-size: var(--font-size-sm);
        color: var(--color-text);
        background: light-dark(#fff, #0c0c0c);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 12px light-dark(#0000001a, transparent), 0 16px 70px light-dark(transparent, rgb(0 0 0 / 50%));
        pointer-events: auto;
        animation: fernand-toast-in var(--duration-fast) var(--ease);
    }
    .toast > svg {flex: none; width: 20px; height: 20px; color: var(--tone-text, var(--color-text-subtle));}
    .toast > div {flex: 1 1 auto;}
    .toast > .close {width: 20px; height: 20px; margin: 0 -4px 0 0;}
    .toast.timed::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background: var(--tone, var(--color-border-strong));
        opacity: .35;
        transform-origin: left;
        animation: fernand-timeout var(--toast-duration) linear forwards;
    }
    .toast.is-leaving {animation: fernand-toast-out var(--duration-instant) ease-in forwards;}

    /* ----------------------------------------------------------------------
       Tables
       ---------------------------------------------------------------------- */

    table {width: 100%; margin: 0 0 var(--space-8); border-collapse: collapse; text-indent: 0;}
    th, td {padding: 14px var(--space-4) 14px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border);}
    :is(th, td):last-child {padding-right: 0;}
    th {font-size: var(--font-size-2xs); line-height: 16px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--color-text-subtle);}
    thead th a {color: inherit;}
    thead th a:hover {color: var(--color-primary-text);}
    td {font-size: var(--font-size); color: var(--color-text);}
    tbody tr:last-child > * {border-bottom: 0;}
    tfoot td {font-weight: var(--font-weight-medium); border-top: 1px solid var(--color-border-strong); border-bottom: 0;}
    caption {caption-side: bottom; padding-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: left;}
    td.numeric, th.numeric {text-align: right; font-variant-numeric: tabular-nums;}
    tr:is(.disabled, [aria-disabled=true]) td {background: var(--color-bg-subtle); color: var(--color-text-subtle);}
    td:is(.info, .success, .warning, .danger) {background: var(--tone-pale);}
    tr:is(.info, .success, .warning, .danger) td {background: var(--tone-pale);}
    /* Actions that appear on row hover */
    td.actions {text-align: right; white-space: nowrap; width: 1%;}
    @media (hover: hover) {
        tr td.actions > * {opacity: 0;}
        tr:is(:hover, :focus-within) td.actions > * {opacity: 1;}
    }

    /* Boxed table: framed, with a tinted head */
    table.boxed {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }
    table.boxed :is(th, td) {padding: 14px;}
    table.boxed thead th {background: var(--color-bg-subtle);}
    table.boxed tbody td {background: var(--color-surface);}
    table.compact :is(th, td) {padding-top: 8px; padding-bottom: 8px; font-size: var(--font-size-sm);}
    /* Horizontal scroll on small screens: wrap the table in a <figure> */
    figure:has(> table) {overflow-x: auto;}
    figure:has(> table) > table {margin-bottom: 0;}

    /* ----------------------------------------------------------------------
       Accordion — native <details>
       ---------------------------------------------------------------------- */

    details {
        margin: 0 0 6px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        interpolate-size: allow-keywords;
    }
    summary {
        position: relative;
        display: block;
        padding: var(--space-3) 48px var(--space-3) var(--space-3);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        list-style: none;
        cursor: pointer;
        user-select: none;
        background: var(--color-bg-subtle);
        border-radius: var(--radius);
    }
    summary::-webkit-details-marker {display: none;}
    summary::after {
        content: "+";
        position: absolute;
        right: 10px;
        top: calc(50% - 12px);
        width: 24px;
        height: 24px;
        font-weight: 400;
        line-height: 21px;
        text-align: center;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 50%;
    }
    summary:hover::after {color: var(--color-primary-text); border-color: var(--color-primary);}
    summary:focus-visible {outline: none; box-shadow: var(--focus-ring);}
    details[open] > summary {border-bottom: 1px solid var(--color-border); border-radius: var(--radius) var(--radius) 0 0;}
    details[open] > summary::after {content: "−";}
    details > :not(summary) {margin: var(--space-3);}
    details::details-content {block-size: 0; overflow: hidden; transition: block-size var(--duration-fast) var(--ease), content-visibility var(--duration-fast) allow-discrete;}
    details[open]::details-content {block-size: auto;}

    /* ----------------------------------------------------------------------
       Avatars
       ---------------------------------------------------------------------- */

    .avatar {
        --avatar-size: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--avatar-size);
        height: var(--avatar-size);
        overflow: hidden;
        font-size: max(8px, calc(var(--avatar-size) * .3));
        font-weight: var(--font-weight-medium);
        line-height: 1;
        text-transform: uppercase;
        color: var(--avatar-color, var(--tone-text, var(--color-primary-text)));
        background: var(--avatar-bg, var(--tone-pale, var(--color-primary-pale)));
        border-radius: 50%;
        object-fit: cover;
        vertical-align: middle;
        user-select: none;
    }
    .avatar.small {--avatar-size: 24px;}
    .avatar.large {--avatar-size: 56px;}
    .avatar > img {width: 100%; height: 100%; object-fit: cover;}
    /* Stack: <div class="avatars"><img class="avatar">…<span class="avatar more">+3</span></div> */
    .avatars {display: inline-flex; flex-direction: row-reverse; justify-content: flex-end;}
    .avatars > .avatar {box-shadow: 0 0 0 2px var(--color-bg);}
    .avatars > .avatar:not(:last-child) {margin-left: -8px;}
    .avatar.more {color: var(--color-text-subtle); background: var(--color-surface); border: 1px solid var(--color-border);}
    /* Presence: <span class="avatar" data-status="online"> */
    .avatar[data-status] {overflow: visible; position: relative;}
    .avatar[data-status]::after {content: ""; position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; border-radius: 50%; background: var(--color-text-subtle); box-shadow: 0 0 0 2px var(--color-bg);}
    .avatar[data-status=online]::after {background: var(--color-success);}
    .avatar[data-status=busy]::after {background: var(--color-danger);}
    .avatar[data-status=away]::after {background: var(--color-warning);}

    /* ----------------------------------------------------------------------
       Progress & loading
       ---------------------------------------------------------------------- */

    progress {
        --progress-color: var(--tone, var(--color-success));
        display: block;
        width: 100%;
        height: 6px;
        margin: 0 0 var(--space-4);
        overflow: hidden;
        appearance: none;
        background: var(--color-bg-subtle);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        color: var(--progress-color);
    }
    progress::-webkit-progress-bar {background: transparent;}
    progress::-webkit-progress-value {background: var(--progress-color); border-radius: var(--radius-pill); transition: width .3s;}
    progress::-moz-progress-bar {background: var(--progress-color); border-radius: var(--radius-pill);}
    progress:indeterminate {background: linear-gradient(90deg, transparent 0 30%, var(--progress-color) 30% 60%, transparent 60%) var(--color-bg-subtle); background-size: 200% 100%; animation: fernand-indeterminate 1.2s linear infinite;}
    progress:indeterminate::-webkit-progress-bar {background: transparent;}
    progress:indeterminate::-moz-progress-bar {background: transparent;}

    meter {width: 100%; height: 8px;}

    /* Skeleton (wireframe) placeholders while data loads */
    .skeleton {
        display: block;
        width: var(--skeleton-width, 120px);
        height: var(--skeleton-height, 6px);
        margin: 0 0 var(--space-3);
        border-radius: var(--radius-lg);
        background: linear-gradient(to right, var(--color-skeleton) 4%, var(--color-skeleton-shine) 25%, var(--color-skeleton) 36%);
        background-size: 1000px 100%;
        animation: fernand-shimmer 2s infinite linear;
    }
    .skeleton.large {--skeleton-height: 8px; --skeleton-width: 200px;}
    .skeleton.circle {--skeleton-width: 40px; --skeleton-height: 40px; border-radius: 50%;}

    /* Spinner on its own: <span class="spinner" role="status" aria-label="Loading"></span> */
    .spinner {display: inline-block; width: 18px; height: 18px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary); border-radius: 50%; animation: fernand-spin .7s linear infinite; vertical-align: middle;}

    /* ----------------------------------------------------------------------
       Breadcrumb — <nav class="breadcrumb"><ol><li><a>…</a></li><li aria-current="page">…</li></ol></nav>
       ---------------------------------------------------------------------- */

    .breadcrumb ol {display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--space-6); padding: 0; list-style: none;}
    .breadcrumb li {display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-text-subtle);}
    .breadcrumb li + li::before {content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid var(--color-text-subtle);}
    .breadcrumb a {color: inherit;}
    .breadcrumb a:hover, .breadcrumb [aria-current] {color: var(--color-primary-text);}

    /* ----------------------------------------------------------------------
       Steps — numbered onboarding list: <ol class="steps"><li>…</li></ol>
       ---------------------------------------------------------------------- */

    ol.steps {
        counter-reset: steps;
        margin: 0 0 var(--space-6);
        padding: var(--space-6);
        list-style: none;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: 0 2px 3px #1a1c2108;
    }
    ol.steps > li {counter-increment: steps; display: flex; gap: var(--space-3); margin: 0; padding: 18px 0; border-bottom: 1px solid var(--color-border);}
    ol.steps > li:first-child {padding-top: 0;}
    ol.steps > li:last-child {padding-bottom: 0; border-bottom: 0;}
    ol.steps > li::before {
        content: counter(steps);
        flex: none;
        width: 24px;
        height: 24px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        line-height: 24px;
        text-align: center;
        color: #fff;
        background: var(--color-primary);
        border-radius: 50%;
    }
    ol.steps > li.done::before {content: "✓"; background: var(--color-success);}
    ol.steps > li > div > :last-child {margin-bottom: 0;}

    /* ----------------------------------------------------------------------
       Divider with text — the "OR" between login methods
       ---------------------------------------------------------------------- */

    .divider {display: flex; align-items: center; gap: 10px; margin: var(--space-6) 0; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-text-subtle);}
    .divider::before, .divider::after {content: ""; flex: 1; border-bottom: 1px solid var(--color-border-strong);}
    .divider:empty {gap: 0;}

    /* ----------------------------------------------------------------------
       Layouts
       ---------------------------------------------------------------------- */

    /* Settings layout: a fixed side navigation + a centered column
       <div class="layout"><nav>…</nav><main>…</main></div> */
    .layout {display: flex; min-height: 100dvh;}
    .layout > nav {
        position: sticky;
        top: 0;
        flex: none;
        width: 250px;
        height: 100dvh;
        padding: var(--space-10) var(--space-10) var(--space-10);
        overflow-y: auto;
        border-right: 1px solid var(--color-border);
        scrollbar-gutter: stable;
    }
    .layout > nav h2 {margin: 0 0 var(--space-3); font-size: var(--font-size-2xs);}
    .layout > nav ul {margin: 0 0 var(--space-8) -10px;}
    .layout > nav ul a {
        display: block;
        margin-bottom: 1px;
        padding: 7px 10px;
        font-size: var(--font-size-sm);
        line-height: 20px;
        color: var(--color-text-muted);
        border-radius: var(--radius-lg);
        overflow-wrap: break-word;
    }
    .layout > nav ul a:hover {background: var(--color-bg-subtle); color: var(--color-text);}
    .layout > nav ul a:is([aria-current], .active) {color: var(--color-primary-text); background: var(--color-primary-pale);}
    .layout > main {flex: 1 1 auto; min-width: 0; width: 100%; max-width: 800px; margin: 0 auto; padding: var(--space-15) var(--space-10);}
    .layout > main > h1, .layout > main > hgroup > h1 {margin-bottom: 42px;}
    .layout > main > hgroup > h1 {margin-bottom: var(--space-2);}
    .layout > main section {margin-bottom: var(--space-15);}
    .layout > main.wide {max-width: 1200px;}

    /* Centered: login, onboarding, empty pages */
    .centered {display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--space-8) var(--space-4); background: var(--color-bg-subtle);}
    .centered > * {width: 100%; max-width: 350px;}
    .centered > .wide {max-width: 640px;}

    @media (max-width: 900px) {
        .layout {flex-direction: column;}
        .layout > nav {position: static; width: 100%; height: auto; padding: var(--space-6); border-right: 0; border-bottom: 1px solid var(--color-border);}
        .layout > main {padding: var(--space-8) var(--space-6);}
    }
}

/* ==========================================================================
   Utilities — a few, on purpose
   ========================================================================== */

@layer fernand.utilities {
    .grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 220px)), 1fr)); gap: var(--grid-gap, var(--space-4));}
    .grid > :is(article, .card, [role=group], label, input, select, textarea) {margin-bottom: 0;}
    .row {display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, var(--space-3));}
    .row > :is(button, .button, input, select, label, .tag, p, h1, h2, h3, h4, [role=group], [role=tablist], .tabs, hgroup) {margin-top: 0; margin-bottom: 0;}
    .stack {display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-3));}
    .stack > * {margin: 0;}
    .end {margin-left: auto;}
    .center {text-align: center;}

    .muted {color: var(--color-text-muted);}
    .subtle {color: var(--color-text-subtle);}
    .caps {font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps);}
    .ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .tabular {font-variant-numeric: tabular-nums;}
    /* Colored text: <small class="danger">, <span class="success"> */
    :is(p, span, small, strong, em):not(.count).info, :is(p, span, small, strong, em):not(.count).success,
    :is(p, span, small, strong, em):not(.count).warning, :is(p, span, small, strong, em):not(.count).danger {color: var(--tone-text);}

    .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

    /* Swap content per theme: <img class="only-light"> <img class="only-dark">
       Hide-only + !important, so your own `display` on the element is kept when it's visible. */
    @media (prefers-color-scheme: light) {
        :root:not([data-theme=dark], :has(.dark-mode)) .only-dark {display: none !important;}
    }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme=light], :has(.light-mode)) .only-light {display: none !important;}
    }
    [data-theme=light] .only-dark, .light-mode .only-dark {display: none !important;}
    [data-theme=dark] .only-light, .dark-mode .only-light {display: none !important;}
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fernand-spin {to {transform: rotate(360deg);}}
@keyframes fernand-shimmer {0% {background-position: -1000px 0;} 100% {background-position: 1000px 0;}}
@keyframes fernand-indeterminate {from {background-position: 100% 0;} to {background-position: -100% 0;}}
@keyframes fernand-timeout {from {transform: scaleX(1);} to {transform: scaleX(0);}}
@keyframes fernand-toast-in {from {opacity: 0; transform: translate3d(0, -8px, 0) scale(.98);} to {opacity: 1; transform: none;}}
@keyframes fernand-toast-out {to {opacity: 0; transform: translate3d(16px, 0, 0);}}
@keyframes fernand-shake {
    0%, 100% {transform: translateX(0);}
    20%, 60% {transform: translateX(12px);}
    40%, 80% {transform: translateX(-12px);}
}
@keyframes fernand-fade-in {from {opacity: 0;} to {opacity: 1;}}