/* =====================================================================================
   Fan Performance Software FPS 6.0 – dark theme (default): navy background with ambient glows, Plus Jakarta Sans,
   segmented tabs; light theme when <html data-theme="light"> (AppTheme, App.razor). Accents in the Flexxaire brand
   blue #22c0f1 (Flexxaire Identity Guidelines, the authority on colour). Blue fills carry dark text in both themes:
   white on #22c0f1 is only 2.1:1, and so is #22c0f1 text on white, so light mode uses a darker shade for blue text.
   Every colour that differs between the themes is a variable below; colours written out further down are the same
   in both (blue fills and the text on them, the sign-in card). A flatter desktop style (<html data-style="desktop">,
   AppStyle) is at the end of the file; it changes shapes and spacing, not colours.
   ===================================================================================== */

:root {
    --fpa-font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    --fpa-mono: 'JetBrains Mono', ui-monospace, monospace;
    --fpa-blue: #22c0f1;            /* Brand Blue (guidelines): buttons, active tab (fills, with dark text) */
    --fpa-blue-deep: #0d9fd2;       /* gradient start, pressed states */
    --rz-text-font-family: var(--fpa-font);
    --rz-border-radius: 8px;
}

/* Dark. The chart's colours follow the theme too (ChartTheme), each matching its card. */
:root {
    color-scheme: dark;
    --fpa-bg: #080b11;
    --fpa-card: #111620;            /* = ChartTheme.Dark surface (palette validated against it) */
    --fpa-card-raised: #171d29;
    --fpa-card-hover: #1c2433;
    --fpa-input: #0b0f17;
    --fpa-header-bg: rgba(8, 11, 17, 0.78);
    --fpa-tabs-bg: rgba(6, 28, 44, 0.6);
    --fpa-tabs-border: rgba(255, 255, 255, 0.06);
    --fpa-border: rgba(255, 255, 255, 0.08);
    --fpa-border-accent: rgba(34, 192, 241, 0.18);
    --fpa-hover: rgba(255, 255, 255, 0.06);
    --fpa-stripe: rgba(255, 255, 255, 0.02);
    --fpa-rule: #232a37;            /* table lines (= ChartPalette.Grid) */
    --fpa-shadow: rgba(0, 0, 0, 0.35);
    --fpa-shadow-strong: rgba(0, 0, 0, 0.45);
    --fpa-blue-light: #8fdcf8;      /* blue text: focus rings, links, hover text */
    --fpa-label: #22c0f1;           /* labels and section titles (8.6:1 on cards) */
    --fpa-warning: #ffd23f;         /* warnings only (tip speed, low contrast) */
    --fpa-danger: #f87171;
    --fpa-danger-bg: #2e0a0a;
    --fpa-ink: #f0efec;
    --fpa-ink-strong: #ffffff;      /* app title, tabs, headings */
    --fpa-ink-secondary: #c3c2b7;
    --fpa-ink-muted: #8d95a3;
    --fpa-level-locked: #fab219;
    --fpa-level-user: #c3c2b7;
    --fpa-level-engineer: #6fb3ff;
    --fpa-level-admin: #c4b8ff;

    /* Radzen material-dark, re-coloured */
    --rz-primary: #22c0f1;
    --rz-primary-light: #5dd0f5;
    --rz-primary-lighter: rgba(34, 192, 241, 0.14);
    --rz-primary-dark: #12a6d8;
    --rz-primary-darker: #0e86b5;
    --rz-on-primary: #080b11;
    --rz-on-primary-light: #080b11;
    --rz-on-primary-lighter: #8fdcf8;
    --rz-on-primary-dark: #080b11;
    --rz-on-primary-darker: #ffffff;
    --rz-secondary: #8fdcf8;
    --rz-secondary-light: #b8e8fa;
    --rz-secondary-lighter: rgba(143, 220, 248, 0.14);
    --rz-secondary-dark: #5dd0f5;
    --rz-secondary-darker: #2bb4e3;
    --rz-on-secondary: #080b11;
    --rz-on-secondary-lighter: #b8e8fa;
    --rz-base-50: #e8ebf0;
    --rz-base-100: #a3abb8;
    --rz-base-200: #5b6474;
    --rz-base-300: #3a4252;
    --rz-base-400: #2c3546;
    --rz-base-500: #232b3a;
    --rz-base-600: #1d2431;
    --rz-base-700: #171d29;
    --rz-base-800: #111620;
    --rz-base-900: #080b11;
    --rz-body-background-color: var(--fpa-bg);
    --rz-base-background-color: var(--fpa-card);
    --rz-card-background-color: var(--fpa-card);
    --rz-dialog-background-color: var(--fpa-card);
    --rz-input-background-color: var(--fpa-input);
    --rz-grid-background-color: var(--fpa-card);
    --rz-grid-header-background-color: var(--fpa-card-raised);
    --rz-grid-stripe-background-color: #0e131c;
    --rz-text-color: var(--fpa-ink);
    --rz-text-title-color: var(--fpa-ink-strong);
    --rz-text-secondary-color: var(--fpa-ink-secondary);
    --rz-text-tertiary-color: var(--fpa-ink-muted);
}
/* The chart card is filled with the chart's own surface, so chart and card read as one panel. Radzen draws outlined
   cards see-through, hence the class pair to outrank it. */
.rz-card.fpa-chart-card { background-color: var(--fpa-card); }
:root[data-theme="light"] .fpa-editor-preview { background: var(--fpa-card); border-radius: 8px; padding: 0.25rem 0.5rem 0.5rem; }

/* Light: cool grey page, white cards, text in the brand Dark Grey #1b2a39. Blue text and Radzen's primary (checkboxes,
   switches, sliders, text buttons) use #0a6f95, a shade of the brand blue that reads on white (5.6:1). */
:root[data-theme="light"] {
    color-scheme: light;
    --fpa-bg: #eef1f5;
    --fpa-card: #ffffff;            /* = ChartTheme.Light surface (light palette validated against it) */
    --fpa-card-raised: #f6f8fa;
    --fpa-card-hover: #e9eef4;
    --fpa-input: #f3f5f8;
    --fpa-header-bg: rgba(255, 255, 255, 0.82);
    --fpa-tabs-bg: rgba(27, 42, 57, 0.06);
    --fpa-tabs-border: rgba(27, 42, 57, 0.1);
    --fpa-border: rgba(27, 42, 57, 0.14);
    --fpa-border-accent: rgba(13, 159, 210, 0.35);
    --fpa-hover: rgba(27, 42, 57, 0.06);
    --fpa-stripe: rgba(27, 42, 57, 0.03);
    --fpa-rule: #dfe4ea;            /* table lines (= ChartTheme.Light grid) */
    --fpa-shadow: rgba(27, 42, 57, 0.14);
    --fpa-shadow-strong: rgba(27, 42, 57, 0.2);
    --fpa-blue-light: #0a6f95;
    --fpa-label: #0a6f95;
    --fpa-warning: #8a6100;
    --fpa-danger: #b42318;
    --fpa-danger-bg: #fdecec;
    --fpa-ink: #1b2a39;             /* brand Dark Grey */
    --fpa-ink-strong: #0e1824;
    --fpa-ink-secondary: #3c4858;
    --fpa-ink-muted: #5c6573;       /* 5.9:1 on white; the brand Light Grey #808893 is 3.6:1, too faint for small text */
    --fpa-level-locked: #8a5a00;
    --fpa-level-user: #4d5562;
    --fpa-level-engineer: #1d5fb0;
    --fpa-level-admin: #5a48c4;

    /* Radzen material (light), re-coloured */
    --rz-primary: #0a6f95;
    --rz-primary-light: #0b86b3;
    --rz-primary-lighter: rgba(10, 111, 149, 0.12);
    --rz-primary-dark: #085a79;
    --rz-primary-darker: #06455d;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #0a6f95;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-secondary: #1b2a39;
    --rz-secondary-light: #3c4858;
    --rz-secondary-lighter: rgba(27, 42, 57, 0.1);
    --rz-secondary-dark: #111b26;
    --rz-secondary-darker: #0a1118;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #1b2a39;
    --rz-base-50: #f8fafc;
    --rz-base-100: #f1f4f8;
    --rz-base-200: #e6eaf0;
    --rz-base-300: #d5dbe3;
    --rz-base-400: #b8c0cb;
    --rz-base-500: #949dab;
    --rz-base-600: #6b7482;
    --rz-base-700: #4e5765;
    --rz-base-800: #343c48;
    --rz-base-900: #1b2a39;
    --rz-grid-stripe-background-color: #f8fafc;
}

/* The header logo: guidelines version C (white with blue) on dark, version A (full colour) on light. */
.fpa-logo.fpa-logo-light-bg { display: none; }
:root[data-theme="light"] .fpa-logo.fpa-logo-dark-bg { display: none; }
:root[data-theme="light"] .fpa-logo.fpa-logo-light-bg { display: block; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--fpa-font);
    background: var(--fpa-bg);
    color: var(--fpa-ink);
    min-height: 100vh;
}

body { overflow-x: hidden; }

a { color: var(--fpa-blue-light); }

/* Ambient glows (decorative) */
.fpa-ambient { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.fpa-ambient-1 { top: -15vw; left: -12vw; width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(0, 102, 255, 0.13) 0%, rgba(8, 11, 17, 0) 70%); }
.fpa-ambient-2 { bottom: -18vw; right: -12vw; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(0, 240, 255, 0.09) 0%, rgba(8, 11, 17, 0) 70%); }

/* ---- Header + tabs ---- */
.fpa-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--fpa-header-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--fpa-border-accent);
}
.fpa-brand { display: flex; align-items: center; gap: 1.4rem; text-decoration: none; min-width: 0; }
/* Transparent logos from the brand guidelines: version C (white + blue) on the dark header, version A on light cards */
.fpa-logo { display: block; height: 40px; width: auto; flex: none; }
.fpa-auth-header .fpa-logo { height: 46px; }
/* Nudged up to line up with the logo's FLEXXAIRE lettering, which sits a little above the image's centre. */
.fpa-app-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fpa-ink-strong); white-space: nowrap; position: relative; top: -2px; }
/* "FPS 6.0": the sub-name marking this as the FPS 5.1 successor */
.fpa-edition {
    display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.45rem; border-radius: 6px; vertical-align: 0.12em;
    font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
    color: var(--fpa-blue-light); background: rgba(34, 192, 241, 0.12); border: 1px solid rgba(34, 192, 241, 0.4);
}
.fpa-auth-title .fpa-edition { display: table; margin: 0.4rem auto 0; color: #1b2a39; background: rgba(34, 192, 241, 0.22); border-color: rgba(27, 42, 57, 0.35); }

.fpa-tabs {
    display: inline-flex; gap: 0.25rem; padding: 0.25rem;
    background: var(--fpa-tabs-bg); border: 1px solid var(--fpa-tabs-border); border-radius: 10px;
    max-width: 100%; overflow-x: auto;
}
.fpa-tab {
    padding: 0.5rem 1.15rem; border-radius: 8px; border: 1px solid transparent;
    color: var(--fpa-ink-strong); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fpa-tab:hover { background: rgba(34, 192, 241, 0.14); }
.fpa-tab.active {
    background: linear-gradient(135deg, var(--fpa-blue) 0%, #5dd0f5 100%);
    border-color: rgba(143, 220, 248, 0.4); color: #080b11;
    box-shadow: 0 0 14px rgba(34, 192, 241, 0.35);
}
.fpa-tab:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 2px; }

/* Full width up to ultra-wide; beyond that the content stays centred rather than stretching lines absurdly. */
/* No z-index here: it would trap the Analyzer's slide-out settings drawer under the sticky header. Being positioned and
   after the ambient glows in the page is enough to sit above them. */
.fpa-main { position: relative; max-width: 3600px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
/* The Analyzer's chart fills the window down to a margin like the sides (PlotlyChart's height). */
.fpa-main:has(.fpa-analyzer-main) { padding-bottom: 1.5rem; }

/* Analyzer: fixed-width sidebar, chart area takes the rest of the width. */
.fpa-analyzer {
    --fpa-side-w: clamp(460px, 24vw, 520px); /* the longest catalogue curve name fits on one line beside its buttons */
    display: grid; grid-template-columns: var(--fpa-side-w) minmax(0, 1fr); gap: 1.5rem; align-items: start;
}
.fpa-analyzer-side, .fpa-analyzer-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 1100px) { .fpa-analyzer { grid-template-columns: minmax(0, 1fr); } }

/* Page shell: the page, plus the settings drawer (Layout/SettingsDrawer.razor) for signed-in users.
   js/settings-drawer.js sets data-drawer="docked|overlay" and data-drawer-open on .fpa-shell. */
.fpa-shell {
    --fpa-drawer-w: clamp(280px, 15vw, 360px); /* narrower than the Analyzer's left panel */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start;
}
.fpa-page { min-width: 0; }
.fpa-settings-drawer {
    width: var(--fpa-drawer-w); min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;
    border: 1px solid var(--fpa-border-accent); border-radius: 16px; background: var(--fpa-card); padding: 0.9rem 1rem 1.1rem;
    box-shadow: 0 8px 32px rgba(13, 159, 210, 0.08);
}
.fpa-settings-drawer:focus { outline: none; }
.fpa-drawer-header { display: flex; align-items: center; justify-content: space-between; }
.fpa-drawer-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--fpa-ink); }
.fpa-drawer-close {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px;
    background: none; border: 1px solid transparent; color: var(--fpa-ink-secondary); cursor: pointer;
}
.fpa-drawer-close:hover { background: var(--fpa-hover); }
.fpa-drawer-close:focus-visible, .fpa-drawer-tab:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 2px; }
.fpa-drawer-section { border-top: 1px solid var(--fpa-border); padding-top: 0.6rem; }
.fpa-drawer-section > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.15rem 0;
}
.fpa-drawer-section > summary::-webkit-details-marker { display: none; }
.fpa-drawer-section > summary::after { content: "▾"; color: var(--fpa-ink-muted); transition: transform 0.15s ease; }
.fpa-drawer-section:not([open]) > summary::after { transform: rotate(-90deg); }
.fpa-drawer-section > summary:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 2px; border-radius: 4px; }
.fpa-drawer-body { padding: 0.6rem 0 0.2rem; }
.fpa-account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.75rem; margin: 0; font-size: 0.85rem; }
.fpa-account dt { color: var(--fpa-ink-muted); }
.fpa-account dd { margin: 0; color: var(--fpa-ink); overflow-wrap: anywhere; }

/* Docked: a second column beside the page (sticky on long pages); no tab, no close button. */
.fpa-shell[data-drawer="docked"] { grid-template-columns: minmax(0, 1fr) var(--fpa-drawer-w); }
.fpa-shell[data-drawer="docked"] .fpa-settings-drawer { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
.fpa-shell[data-drawer="docked"] .fpa-drawer-close,
.fpa-shell[data-drawer="docked"] .fpa-drawer-tab,
.fpa-shell[data-drawer="docked"] .fpa-drawer-backdrop { display: none; }

/* Slide-out (also before the script has measured): off-screen on the right until the Settings tab opens it. */
.fpa-shell:not([data-drawer="docked"]) .fpa-settings-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(var(--fpa-drawer-w), 92vw);
    border-radius: 16px 0 0 16px; overflow-y: auto; background: var(--fpa-card-raised);
    box-shadow: -12px 0 40px var(--fpa-shadow-strong); transform: translateX(105%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.fpa-shell[data-drawer-open]:not([data-drawer="docked"]) .fpa-settings-drawer { transform: none; visibility: visible; transition: transform 0.25s ease; }
.fpa-drawer-backdrop { display: none; }
.fpa-shell[data-drawer-open]:not([data-drawer="docked"]) .fpa-drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(4, 6, 10, 0.45);
}
.fpa-drawer-tab {
    position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.8rem 0.45rem;
    border: 1px solid var(--fpa-border-accent); border-right: none; border-radius: 10px 0 0 10px;
    background: var(--fpa-card-raised); color: var(--fpa-blue-light); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
    box-shadow: -4px 0 18px var(--fpa-shadow);
}
.fpa-drawer-tab span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.04em; }
.fpa-drawer-tab:hover { background: var(--fpa-card-hover); }
.fpa-shell[data-drawer-open] .fpa-drawer-tab { display: none; }
@media (prefers-reduced-motion: reduce) { .fpa-settings-drawer { transition: none !important; } }

/* Very large displays: slightly larger text everywhere (Radzen sizes are rem-based). */
@media (min-width: 2400px) { html { font-size: 17px; } }
@media (min-width: 3200px) { html { font-size: 19px; } }

.fpa-header-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; min-width: 0; }
.fpa-user { display: flex; align-items: center; gap: 0.6rem; }
.fpa-user form { margin: 0; }
.fpa-user-name { font-size: 0.875rem; font-weight: 600; color: var(--fpa-ink); white-space: nowrap; }
.fpa-user-level {
    font-family: var(--fpa-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fpa-blue-light); background: rgba(34, 192, 241, 0.1); border: 1px solid rgba(34, 192, 241, 0.35);
    padding: 0.15rem 0.5rem; border-radius: 20px; white-space: nowrap;
}
.fpa-signout {
    background: none; border: 1px solid rgba(239, 68, 68, 0.4); color: var(--fpa-danger); font: inherit; font-size: 0.75rem;
    padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer; transition: background 0.2s ease;
}
.fpa-signout:hover { background: rgba(239, 68, 68, 0.18); }
.fpa-signout:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 2px; }

/* ---- Sign-in pages (after the FlexxCool Project Builder login card) ---- */
.fpa-auth { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.fpa-auth-card {
    width: 100%; max-width: 460px; padding: 2.25rem;
    background: rgba(171, 180, 197, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 240, 255, 0.15); border-radius: 16px;
    box-shadow: 0 8px 32px rgba(13, 159, 210, 0.55), 0 0 20px rgba(34, 192, 241, 0.45);
    color: #0b0d12; transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.fpa-auth-card:hover { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 12px 40px rgba(34, 192, 241, 0.7), 0 0 25px rgb(13, 159, 210); }
.fpa-auth-card:has(.fpa-field-row) { max-width: 560px; }
.fpa-auth-header { text-align: center; margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.fpa-auth-title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: rgba(8, 11, 17, 0.82); }
.fpa-auth-subtitle { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; color: rgba(8, 11, 17, 0.85); text-align: center; }
.fpa-auth-intro { margin: 0 0 1.1rem; font-size: 0.875rem; line-height: 1.45; color: #1d2230; }

.fpa-auth-tabs { display: flex; padding: 0.25rem; margin-bottom: 1.4rem; background: rgba(6, 28, 44, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; }
.fpa-auth-tab {
    flex: 1; text-align: center; padding: 0.6rem 0; border-radius: 8px; border: 1px solid transparent;
    color: #ffffff; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease;
}
.fpa-auth-tab.active {
    background: linear-gradient(135deg, var(--fpa-blue) 0%, #5dd0f5 100%); color: #080b11;
    border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}
.fpa-auth-tab:focus-visible { outline: 2px solid #080b11; outline-offset: 2px; }

.fpa-auth-form { display: flex; flex-direction: column; gap: 1.05rem; }
.fpa-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; }
.fpa-field-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.fpa-field-row > .fpa-field { flex: 1 1 190px; }
.fpa-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #1b2a39; }
.fpa-input {
    width: 100%; background: rgba(8, 11, 17, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
    padding: 0.72rem 0.85rem; color: #ffffff; font: inherit; font-size: 0.925rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fpa-input::placeholder { color: #8d95a3; }
.fpa-input:focus { outline: none; border-color: var(--fpa-blue); box-shadow: 0 0 0 3px rgba(34, 192, 241, 0.25); }
.fpa-textarea { resize: vertical; min-height: 4.5rem; }
/* Phone: the chosen country's dialling code joined to the left of the field */
.fpa-phone { display: flex; align-items: stretch; }
.fpa-phone-prefix {
    display: flex; align-items: center; padding: 0 0.6rem; border-radius: 8px 0 0 8px; white-space: nowrap;
    background: rgba(8, 11, 17, 0.65); border: 1px solid rgba(255, 255, 255, 0.1); border-right: none;
    color: var(--fpa-blue-light); font-family: var(--fpa-mono); font-size: 0.85rem;
}
.fpa-phone-prefix[hidden] { display: none; }
/* Password: the eye button (Account/Shared/PasswordReveal.razor, js/password-reveal.js) inside the field, on the right */
.fpa-password { position: relative; }
.fpa-password .fpa-input { padding-right: 2.75rem; }
.fpa-reveal {
    position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
    justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: none; border-radius: 6px; background: none;
    color: #8d95a3; cursor: pointer;
}
.fpa-reveal:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.fpa-reveal:focus-visible { outline: 2px solid var(--fpa-blue); outline-offset: 1px; }
.fpa-reveal-slash { display: none; }
.fpa-reveal[aria-pressed="true"] .fpa-reveal-slash { display: inline; }
.fpa-phone-prefix:not([hidden]) + .fpa-input { border-radius: 0 8px 8px 0; }
.fpa-code-input { font-family: var(--fpa-mono); font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.fpa-field-error { font-size: 0.8rem; color: #8b0000; font-weight: 600; }
.fpa-field-hint { margin: -0.5rem 0 0; font-size: 0.78rem; color: #2b3140; }
.fpa-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #1d2230; }
.fpa-check input { accent-color: var(--fpa-blue); width: 1rem; height: 1rem; }

.fpa-submit {
    width: 100%; margin-top: 0.25rem; padding: 0.85rem; border: none; border-radius: 8px; cursor: pointer;
    background: linear-gradient(135deg, var(--fpa-blue-deep) 0%, var(--fpa-blue) 50%, #7fd8f7 100%);
    color: #080b11; font: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.fpa-submit:hover { box-shadow: 0 0 20px rgba(34, 192, 241, 0.55); transform: translateY(-1px); }
.fpa-submit:active { transform: translateY(0); }
.fpa-submit:focus-visible { outline: 2px solid #080b11; outline-offset: 2px; }
/* Sent, waiting for the reply (js/busy-submit.js): disabled, with a spinner before the label */
.fpa-submit[aria-busy="true"] { cursor: progress; opacity: 0.85; }
.fpa-submit[aria-busy="true"]:hover { box-shadow: none; transform: none; }
.fpa-submit[aria-busy="true"]::before {
    content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.55em; vertical-align: -0.12em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fpa-spin 0.8s linear infinite;
}
@keyframes fpa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fpa-submit[aria-busy="true"]::before { animation-duration: 2.4s; } }

.fpa-auth-links { margin: 0.9rem 0 0; text-align: center; font-size: 0.85rem; }
.fpa-auth-links a, .fpa-link-button { color: #1a2a6c; font-weight: 600; }
.fpa-link-button { background: none; border: none; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

.fpa-alert { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.85rem; line-height: 1.4; word-break: break-word; }
.fpa-alert-info { background: rgba(56, 61, 65, 0.25); border: 1px solid rgba(0, 0, 0, 0.12); color: #0b0d12; }
.fpa-alert-success { background: rgba(3, 37, 26, 0.85); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; }
.fpa-alert-error { background: rgba(46, 10, 10, 0.9); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; }

/* ---- Admin ---- */
.fpa-level { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 20px; white-space: nowrap; border: 1px solid; }
.fpa-level-locked { color: var(--fpa-level-locked); border-color: rgba(250, 178, 25, 0.4); background: rgba(250, 178, 25, 0.08); }
.fpa-level-user { color: var(--fpa-level-user); border-color: rgba(195, 194, 183, 0.35); }
.fpa-level-engineer { color: var(--fpa-level-engineer); border-color: rgba(111, 179, 255, 0.4); background: rgba(57, 135, 229, 0.1); }
.fpa-level-admin { color: var(--fpa-level-admin); border-color: rgba(144, 133, 233, 0.5); background: rgba(144, 133, 233, 0.12); }
.fpa-level-disabled { margin-left: 0.35rem; color: var(--fpa-danger); border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.1); }
.fpa-danger-zone { border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 12px; padding: 0.9rem 1rem; }
.fpa-danger-zone .fpa-section-title { color: var(--fpa-danger); }
.fpa-level-note { margin-left: 0.4rem; font-size: 0.7rem; color: var(--fpa-ink-muted); font-style: italic; }
.fpa-muted { color: var(--fpa-ink-muted); }
.fpa-code { font-family: var(--fpa-mono); letter-spacing: 0.08em; }
.fpa-details th { width: 32%; text-align: left; }
.fpa-details td { text-align: left; white-space: normal; }

/* ---- Radzen refinements ---- */
.rz-card {
    border-radius: 16px;
    border: 1px solid var(--fpa-border-accent);
    box-shadow: 0 8px 32px rgba(13, 159, 210, 0.08);
}
.rz-dialog { border-radius: 16px; border: 1px solid var(--fpa-border-accent); box-shadow: 0 12px 48px rgba(13, 159, 210, 0.24); }
.rz-dialog-titlebar { background: transparent; }

/* Gradient as background-image over a solid fallback colour: Radzen's hover rule resets background-image,
   so it is restated for hover/focus/active, and the colour underneath keeps the button visible regardless. */
.rz-button.rz-primary.rz-variant-filled,
.rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):hover,
.rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):focus,
.rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):active {
    background-color: var(--fpa-blue);
    background-image: linear-gradient(135deg, var(--fpa-blue-deep) 0%, var(--fpa-blue) 50%, #7fd8f7 100%);
    background-size: auto;
    color: #080b11;
}
.rz-button.rz-primary.rz-variant-filled {
    font-weight: 700; letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):hover { box-shadow: 0 0 18px rgba(34, 192, 241, 0.45); transform: translateY(-1px); }
.rz-button { text-transform: none; font-family: var(--fpa-font); }
/* Icon buttons (✎, ✕) are ButtonStyle.Light text buttons: Radzen colours them a light grey, invisible on white. */
:root[data-theme="light"] .rz-button.rz-variant-text.rz-light { color: var(--fpa-ink-secondary); }

/* Brand blue labels, not upper-cased: these labels carry units (Pa ≠ PA, m³/s). */
.rz-form-field-label { font-weight: 600; color: var(--fpa-label); }

.rz-data-grid, .rz-grid-table { font-family: var(--fpa-font); }
/* Grid cells clip to their line box. Compact density sets it to 1rem (16px), too short for Plus Jakarta Sans at 14px
   (glyphs ~18px), so descenders (g, p, q, y) were cut off. Same selector as Radzen's; this file loads after it. */
.rz-data-grid.rz-density-compact { --rz-grid-cell-line-height: 1.25rem; }

/* ---- Analyzer ---- */
.fpa-section-title { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fpa-label); }
.fpa-curve-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fpa-curve-list li { display: flex; align-items: center; gap: 0.5rem; }
.fpa-curve-label { flex: 1; font-size: 0.8rem; line-height: 1.3; color: var(--fpa-ink); cursor: pointer; }
.fpa-swatch { font-size: 1rem; line-height: 1; width: 1rem; text-align: center; }
.fpa-swatch-edit {
    background: none; border: 1px solid transparent; border-radius: 6px; padding: 0.15rem; width: 1.7rem; height: 1.7rem;
    font-size: 1rem; line-height: 1; cursor: pointer; flex: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.fpa-swatch-edit:hover { border-color: var(--fpa-border-accent); background: var(--fpa-hover); }
.fpa-swatch-edit:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 1px; }

/* Curve style dialog */
.fpa-style-preview { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; background: var(--fpa-input); border-radius: 8px; position: relative; }
.fpa-style-preview svg { flex: none; }
.fpa-style-marker { position: absolute; left: calc(0.8rem + 80px); transform: translateX(-50%); font-size: 1.3rem; line-height: 1; text-shadow: 0 0 0 var(--fpa-card), 0 0 3px var(--fpa-card); }
.fpa-style-name { font-size: 0.85rem; color: var(--fpa-ink-secondary); }
.fpa-swatch-grid { display: grid; grid-template-columns: repeat(8, 2rem); gap: 0.5rem; }
.fpa-swatch-button { width: 2rem; height: 2rem; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.fpa-swatch-button.selected { border-color: var(--fpa-ink-strong); box-shadow: 0 0 0 2px var(--fpa-blue); }
.fpa-swatch-button:focus-visible, .fpa-symbol-button:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 2px; }
.fpa-symbol-grid { display: grid; grid-template-columns: repeat(6, 2.4rem); gap: 0.45rem; }
.fpa-symbol-button {
    width: 2.4rem; height: 2.4rem; border-radius: 8px; border: 1px solid var(--fpa-border); background: var(--fpa-input);
    font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.fpa-symbol-button.selected { border-color: var(--fpa-blue); box-shadow: 0 0 10px rgba(34, 192, 241, 0.4); }
/* Curve names open the Curve Editor (Engineer and above) */
.fpa-curve-edit { background: none; border: none; padding: 0.1rem 0.2rem; margin: 0 -0.2rem; text-align: left; font: inherit; font-size: 0.8rem; border-radius: 4px; }
.fpa-curve-edit:hover { color: var(--fpa-blue-light); text-decoration: underline; text-underline-offset: 3px; }
.fpa-curve-edit:focus-visible { outline: 2px solid var(--fpa-blue-light); outline-offset: 1px; }

/* Curve Editor dialog: inputs and points left, target and preview right; stacked when narrow */
.fpa-curve-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1000px) { .fpa-curve-editor { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.fpa-editor-heading { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fpa-label); }
.fpa-editor-heading .fpa-muted { font-weight: 500; letter-spacing: normal; text-transform: none; }
.fpa-points-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fpa-points-table th, .fpa-points-table td { padding: 0.2rem 0.25rem; vertical-align: middle; }
.fpa-points-table th:first-child, .fpa-points-table td:first-child { width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.fpa-points-table th:last-child, .fpa-points-table td:last-child { width: 2rem; }
.fpa-points-caption th { font-size: 0.75rem; font-weight: 500; color: var(--fpa-ink-muted); text-align: left; padding-top: 0; }
.fpa-points-table tbody tr:nth-child(odd) td { background: var(--fpa-stripe); }
.fpa-editor-preview { min-height: 200px; }
.fpa-problem-list { margin: 0; padding: 1rem 1rem 1rem 2rem; background: var(--fpa-input); border-radius: 8px; color: var(--fpa-ink-secondary); font-size: 0.875rem; }
.fpa-warning-text { color: var(--fpa-warning); }
.fpa-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; }

.fpa-chart-card { padding: 0.5rem; }
.fpa-line-key { margin: 0.25rem 0.75rem 0.5rem; font-size: 0.8125rem; color: var(--fpa-ink-muted); }
.fpa-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 2rem; }
.fpa-message-card { max-width: 560px; display: flex; flex-direction: column; gap: 0.75rem; }

.fpa-table-scroll { overflow-x: auto; }
.fpa-table { border-collapse: collapse; font-size: 0.8125rem; width: 100%; }
.fpa-table th, .fpa-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--fpa-rule); text-align: right; white-space: nowrap; }
.fpa-table thead th { color: var(--fpa-ink-muted); font-weight: 600; }
.fpa-table tbody th { color: var(--fpa-ink-muted); font-weight: 600; text-align: left; }
.fpa-table-numeric td { font-variant-numeric: tabular-nums; }
/* Many long headers (a wind tunnel test's channels): they wrap, to the bottom, instead of running into each other. */
.fpa-table-wrap-head thead th { white-space: normal; vertical-align: bottom; min-width: 4.5rem; }

/* ---- Small screens: 16px gutters, no horizontal scroll ---- */
@media (max-width: 640px) {
    .fpa-header { padding: 0.6rem 1rem; }
    .fpa-app-title { font-size: 0.95rem; }
    .fpa-logo { height: 30px; }
    .fpa-main { padding: 1rem 1rem 2rem; }
}

/* ---- Framework error UI ---- */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
    padding: 0.75rem 1.25rem; background: var(--fpa-danger-bg); color: var(--fpa-danger); border-top: 1px solid rgba(239, 68, 68, 0.4);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; }

.blazor-error-boundary { padding: 1rem 1rem 1rem 1.25rem; background: var(--fpa-danger-bg); color: var(--fpa-danger); border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

h1:focus { outline: none; }

/* ---- Projects ---- */
.fpa-project-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Grid cells that may wrap (Radzen keeps cell text on one line) */
.rz-data-grid td.fpa-wrap .rz-cell-data { white-space: normal; }
.fpa-project-note { font-size: 0.75rem; }
.fpa-copy-status { font-size: 0.8125rem; min-width: 7rem; }
/* Project card: the name (set by New) beside the revision (the user's number) */
.fpa-project-heading { display: flex; gap: 0.75rem; align-items: center; }
.fpa-project-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fpa-revision-field { flex: none; width: 7rem; }
.fpa-revision-field .rz-numeric { width: 100%; }
/* Open file: a label styled as a Radzen button around a visually hidden file input (still focusable) */
.fpa-file-button { position: relative; cursor: pointer; }
.fpa-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fpa-file-button:focus-within { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
/* Curve list: the custom curve version a library curve is, under its name */
.fpa-curve-source { display: block; font-size: 0.72rem; color: var(--fpa-ink-muted); font-weight: 400; }
/* Custom Curves page: a curve's details above its revisions */
.fpa-curve-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.15rem 1.5rem; font-size: 0.8125rem; margin: 0.25rem 0 0.75rem; }
.fpa-curve-details .fpa-muted { margin-right: 0.35rem; }
.fpa-curve-details > :first-child { grid-column: 1 / -1; } /* "Stated at …", the longest line */
/* Print: the PDF loads into this frame, out of sight, and prints from it (not display:none, which some browsers won't print) */
/* Chart grid lines and frame a whole number of device pixels wide on a scaled display (charts.js sets the width), so
   they all come out equally heavy. Plotly writes 1px inline, hence !important. */
.js-plotly-plot .gridlayer path,
.js-plotly-plot .minor-gridlayer path,
.js-plotly-plot path.xlines-above,
.js-plotly-plot path.ylines-above {
    stroke-width: var(--fpa-grid-width, 1px) !important;
}

/* Phones and tablets (as charts.js decides): the chart's touch hints instead of the mouse ones. */
.fpa-touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
    .fpa-mouse-only { display: none; }
    .fpa-touch-only { display: inline; }
}

.fpa-print-frame { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
/* Print dialog: the fans and their two custom columns */
.fpa-report-fans td, .fpa-report-fans th { vertical-align: middle; }
.fpa-report-fans th:first-child, .fpa-report-fans td:first-child { white-space: nowrap; }
/* A project's revisions, shown when its row on the Projects page is expanded */
.fpa-revisions { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fpa-revisions th { text-align: left; font-weight: 600; padding: 0.25rem 0.5rem; color: var(--fpa-ink-muted); }
.fpa-revisions td { padding: 0.25rem 0.5rem; border-top: 1px solid var(--rz-base-300); vertical-align: middle; }
.fpa-revisions td.fpa-revision-actions { text-align: right; white-space: nowrap; }
.fpa-revisions tr.fpa-revision-open td { background-color: var(--rz-secondary-lighter); }
.fpa-revisions tr.fpa-revision-row { cursor: pointer; }
.fpa-revisions tr.fpa-revision-row:hover td { background-color: var(--rz-secondary-lighter); }
.fpa-revisions td.fpa-revision-toggle { width: 1.75rem; color: var(--fpa-ink-muted); }
.fpa-revisions tr.fpa-versions-row > td { border-top: none; padding-top: 0; padding-bottom: 0.5rem; }
.fpa-versions { font-size: 0.8125rem; }

/* =====================================================================================
   Desktop style (<html data-style="desktop">, AppStyle, Settings → Appearance). Everything above is the touch style,
   the default. This only takes away: square corners, no glows, gradients, blur or hover lift, a system font, a little
   less padding. Colours are the theme's, unchanged.
   ===================================================================================== */
:root[data-style="desktop"] {
    --fpa-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Radzen's corners and shadows, declared on :root like these */
    --rz-border-radius: 3px;
    --rz-pager-button-border-radius: var(--rz-border-radius);
    --rz-chip-border-radius: var(--rz-border-radius);
    --rz-badge-pill-border-radius: var(--rz-border-radius);
    --rz-grid-group-header-item-border-radius: var(--rz-border-radius);
    --rz-card-shadow: none;
    --rz-panel-shadow: none;
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-active-shadow: none;
    --rz-card-padding: 0.75rem;
}
/* Material's ripple on click */
:root[data-style="desktop"] .rz-button::before { display: none; }
:root[data-style="desktop"] .fpa-ambient { display: none; }

/* Header: solid, tabs as text with the active one underlined */
:root[data-style="desktop"] .fpa-header {
    padding: 0.5rem 1rem; background: var(--fpa-card); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: var(--fpa-border);
}
:root[data-style="desktop"] .fpa-edition { border-radius: 2px; }
:root[data-style="desktop"] .fpa-tabs { gap: 0; padding: 0; background: none; border: none; border-radius: 0; }
:root[data-style="desktop"] .fpa-tab {
    padding: 0.45rem 0.9rem; border: none; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--fpa-ink-secondary); transition: none;
}
:root[data-style="desktop"] .fpa-tab:hover { background: var(--fpa-hover); color: var(--fpa-ink-strong); }
:root[data-style="desktop"] .fpa-tab.active {
    background: none; box-shadow: none; color: var(--fpa-ink-strong); border-bottom-color: var(--fpa-blue);
}
:root[data-style="desktop"] .fpa-user-level,
:root[data-style="desktop"] .fpa-signout,
:root[data-style="desktop"] .fpa-level { border-radius: 2px; }

/* Denser page */
:root[data-style="desktop"] .fpa-main { padding: 1rem 1rem 2rem; }
:root[data-style="desktop"] .fpa-main:has(.fpa-analyzer-main) { padding-bottom: 1rem; }
:root[data-style="desktop"] .fpa-analyzer,
:root[data-style="desktop"] .fpa-shell { gap: 1rem; }
:root[data-style="desktop"] .fpa-analyzer-side,
:root[data-style="desktop"] .fpa-analyzer-main { gap: 0.75rem; }

/* Cards, dialogs and the settings drawer: a thin neutral border instead of a blue glow */
:root[data-style="desktop"] .rz-card { border-radius: 3px; border-color: var(--fpa-border); box-shadow: none; }
:root[data-style="desktop"] .rz-dialog { border-radius: 3px; border-color: var(--fpa-border); box-shadow: 0 4px 16px var(--fpa-shadow-strong); }
:root[data-style="desktop"] .fpa-settings-drawer { border-radius: 3px; border-color: var(--fpa-border); box-shadow: none; padding: 0.75rem 0.85rem 0.9rem; }
:root[data-style="desktop"] .fpa-shell:not([data-drawer="docked"]) .fpa-settings-drawer { border-radius: 0; box-shadow: -4px 0 16px var(--fpa-shadow-strong); }
:root[data-style="desktop"] .fpa-drawer-tab { border-radius: 3px 0 0 3px; border-color: var(--fpa-border); box-shadow: none; }
:root[data-style="desktop"] .fpa-drawer-close { border-radius: 3px; }
:root[data-style="desktop"] .fpa-danger-zone { border-radius: 3px; }

/* Primary buttons: solid brand blue, a darker shade on hover */
:root[data-style="desktop"] .rz-button.rz-primary.rz-variant-filled,
:root[data-style="desktop"] .rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):focus,
:root[data-style="desktop"] .rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):active {
    background-image: none; font-weight: 600; letter-spacing: normal; transition: none;
}
:root[data-style="desktop"] .rz-button.rz-primary.rz-variant-filled:not(.rz-state-disabled):hover {
    background-image: none; background-color: var(--fpa-blue-deep); box-shadow: none; transform: none;
}

/* Smaller pieces */
:root[data-style="desktop"] .fpa-swatch-edit,
:root[data-style="desktop"] .fpa-swatch-button,
:root[data-style="desktop"] .fpa-symbol-button,
:root[data-style="desktop"] .fpa-style-preview,
:root[data-style="desktop"] .fpa-problem-list,
:root[data-style="desktop"] .fpa-editor-preview,
:root[data-style="desktop"] .blazor-error-boundary { border-radius: 3px; }
:root[data-style="desktop"] .fpa-symbol-button.selected { box-shadow: 0 0 0 1px var(--fpa-blue); }

/* Sign-in pages: the same card, solid and flat */
:root[data-style="desktop"] .fpa-auth-card,
:root[data-style="desktop"] .fpa-auth-card:hover {
    background: rgb(171, 180, 197); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: rgba(27, 42, 57, 0.35); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: none;
}
:root[data-style="desktop"] .fpa-auth-tabs { border-radius: 3px; }
:root[data-style="desktop"] .fpa-auth-tab { border-radius: 2px; transition: none; }
:root[data-style="desktop"] .fpa-auth-tab.active { background: var(--fpa-blue); box-shadow: none; border-color: transparent; }
:root[data-style="desktop"] .fpa-input { border-radius: 3px; }
:root[data-style="desktop"] .fpa-input:focus { box-shadow: 0 0 0 1px var(--fpa-blue); }
:root[data-style="desktop"] .fpa-phone-prefix { border-radius: 3px 0 0 3px; }
:root[data-style="desktop"] .fpa-phone-prefix:not([hidden]) + .fpa-input { border-radius: 0 3px 3px 0; }
:root[data-style="desktop"] .fpa-submit { border-radius: 3px; background: var(--fpa-blue); transition: none; }
:root[data-style="desktop"] .fpa-submit:hover { background: var(--fpa-blue-deep); box-shadow: none; transform: none; }
:root[data-style="desktop"] .fpa-alert { border-radius: 3px; }
:root[data-style="desktop"] .fpa-reveal { border-radius: 3px; }