/*
 * FUNFOR.YOU Tools design system.
 *
 * One set of tokens and components for every page under /tools/: a very
 * dark navy page, deep teal glass panels, mint for actions and completed
 * states, gold kept for key figures and premium accents. Page stylesheets
 * only arrange these pieces. The report images use the same values
 * (RecapCore.THEMES.midnight), so the page and the recap match.
 */

:root {
    color-scheme: dark;

    /* colour */
    --bg-primary: #060c0e;
    --bg-secondary: #0a1619;
    --surface: #0f1e21;
    --surface-elevated: #14282b;
    --surface-sunken: #07100f;
    --surface-glass: linear-gradient(150deg, rgb(20 40 42 / 76%), rgb(10 21 23 / 76%));
    --border-subtle: #1e3434;
    --border-strong: #2d4b48;
    --text-primary: #f3efe6;
    --text-secondary: #a1adab;
    --text-tertiary: #74827f;
    --accent-teal: #2fb99a;
    --accent-mint: #5fe3bf;
    --accent-mint-ink: #04201a;
    --accent-gold: #e6c27f;
    --accent-gold-deep: #b88d44;
    --success: #5fe3bf;
    --warning: #f2b85b;
    --danger: #ff8f80;
    --tile-teal: linear-gradient(145deg, #17493f, #0c2824);
    --tile-gold: linear-gradient(145deg, #4f3d1c, #231a0c);

    /* type */
    --font-sans: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --text-xs: .75rem;
    --text-sm: .8125rem;
    --text-md: .9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: clamp(1.9rem, 3.4vw, 2.9rem);
    --label-size: .6875rem;
    --label-spacing: .2em;

    /* shape, space, depth */
    --radius-sm: .6rem;
    --radius-md: .85rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --card-pad: clamp(1rem, 1.6vw, 1.35rem);
    --section-gap: clamp(.9rem, 1.6vw, 1.25rem);
    --control-h: 2.75rem;
    --button-h: 3rem;
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-tile: 2.5rem;
    --header-h: 4rem;
    --shadow-card: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 20px 44px rgb(0 0 0 / 28%);
    --glow-mint: 0 0 0 1px rgb(95 227 191 / 38%), 0 0 22px rgb(95 227 191 / 12%);
    --glow-gold: 0 0 0 1px rgb(230 194 127 / 45%), 0 0 24px rgb(230 194 127 / 10%);
    --focus-ring: 0 0 0 3px rgb(95 227 191 / 42%);
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* surfaces that change with the palette */
    --scheme: dark;
    --header-bg: rgb(6 12 14 / 80%);
    --inset-bg: rgb(3 8 9 / 45%);
    --soft-fill: #11292a;
    --danger-fill: #2a1a19;
    --table-head-bg: #0b1719;
    --dialog-bg: linear-gradient(160deg, #132628, #0a1518 60%);
}

/*
 * Ivory: the same design system on paper. The spreadsheet pages switch
 * between Midnight and Ivory with the Theme chips in their header; the
 * downloaded workbook follows the same choice.
 */
body.ffy-tool[data-theme="clean"] {
    color-scheme: light;
    --scheme: light;
    --bg-primary: #f4efe4;
    --bg-secondary: #ece5d6;
    --surface: #fffdf8;
    --surface-elevated: #faf6ee;
    --surface-sunken: #fbf8f1;
    --surface-glass: linear-gradient(150deg, rgb(255 253 248 / 97%), rgb(250 246 238 / 97%));
    --border-subtle: #e2d8c5;
    --border-strong: #cfc0a3;
    --text-primary: #14221f;
    --text-secondary: #56635f;
    --text-tertiary: #6b7571;
    --accent-teal: #127a63;
    --accent-mint: #0b7a5e;
    --accent-mint-ink: #ffffff;
    --accent-gold: #8a6422;
    --accent-gold-deep: #7f5a1c;
    --success: #0b7a5e;
    --warning: #9a5f0d;
    --danger: #b3402c;
    --tile-teal: linear-gradient(145deg, #e2f2ea, #cbe5d9);
    --tile-gold: linear-gradient(145deg, #f8ebd0, #eed9ab);
    --shadow-card: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 14px 32px rgb(70 56 24 / 9%);
    --glow-mint: 0 0 0 1px rgb(14 135 104 / 35%), 0 0 18px rgb(14 135 104 / 10%);
    --glow-gold: 0 0 0 1px rgb(153 112 42 / 40%), 0 0 20px rgb(153 112 42 / 8%);
    --focus-ring: 0 0 0 3px rgb(14 135 104 / 28%);
    --header-bg: rgb(247 242 231 / 90%);
    --inset-bg: #f7f2e7;
    --soft-fill: #e6f3ec;
    --danger-fill: #fbe8e4;
    --table-head-bg: #efe8da;
    --dialog-bg: linear-gradient(160deg, #fffdf8, #f5efe3 60%);
}

/* Premium palettes share the spreadsheet layout and accessibility states. */
body.ffy-tool[data-theme="obsidian-gold"],body.ffy-tool[data-theme="royal-navy"],body.ffy-tool[data-theme="evergreen"],body.ffy-tool[data-theme="burgundy"] { --surface-glass:linear-gradient(150deg,var(--surface-elevated),var(--bg-secondary));--inset-bg:var(--surface-sunken);--soft-fill:var(--surface-elevated);--table-head-bg:var(--bg-secondary);--tile-teal:linear-gradient(145deg,var(--surface-elevated),var(--bg-secondary));--tile-gold:linear-gradient(145deg,var(--surface-elevated),var(--surface-sunken));--success:var(--accent-mint);--focus-ring:0 0 0 3px var(--accent-mint); }
body.ffy-tool[data-theme="obsidian-gold"] { --bg-primary:#08090a;--bg-secondary:#161411;--surface:#1d1a15;--surface-elevated:#292317;--surface-sunken:#11100d;--border-subtle:#382f21;--border-strong:#594a2d;--text-primary:#fff7e9;--text-secondary:#c4b6a0;--text-tertiary:#9a8b73;--accent-teal:#d2a34c;--accent-mint:#f2c66d;--accent-mint-ink:#201506;--accent-gold:#ffd686;--accent-gold-deep:#be8b33;--header-bg:rgb(8 9 10 / 88%);--table-head-bg:#161411;--dialog-bg:linear-gradient(160deg,#292317,#11100d); }
body.ffy-tool[data-theme="royal-navy"] { --bg-primary:#081021;--bg-secondary:#0e1b35;--surface:#142845;--surface-elevated:#1c3453;--surface-sunken:#0d1d34;--border-subtle:#263e60;--border-strong:#375574;--text-primary:#f3f8ff;--text-secondary:#b0c1d8;--text-tertiary:#879bb5;--accent-teal:#5eaddb;--accent-mint:#87c9f4;--accent-mint-ink:#08182a;--accent-gold:#d9c089;--accent-gold-deep:#af9258;--header-bg:rgb(8 16 33 / 88%);--table-head-bg:#0e1b35;--dialog-bg:linear-gradient(160deg,#1c3453,#0d1d34); }
body.ffy-tool[data-theme="evergreen"] { --bg-primary:#08140f;--bg-secondary:#142a1e;--surface:#193726;--surface-elevated:#254733;--surface-sunken:#102419;--border-subtle:#294c39;--border-strong:#41654b;--text-primary:#fff9e8;--text-secondary:#c1d2bb;--text-tertiary:#91ae95;--accent-teal:#77bd85;--accent-mint:#a8e1a0;--accent-mint-ink:#0d2412;--accent-gold:#e5c782;--accent-gold-deep:#ad8b4a;--header-bg:rgb(8 20 15 / 88%);--table-head-bg:#142a1e;--dialog-bg:linear-gradient(160deg,#254733,#102419); }
body.ffy-tool[data-theme="burgundy"] { --bg-primary:#1a0c15;--bg-secondary:#2a1423;--surface:#361d2d;--surface-elevated:#48263c;--surface-sunken:#24131f;--border-subtle:#56364d;--border-strong:#744a62;--text-primary:#fff4f4;--text-secondary:#d8bacb;--text-tertiary:#ae8c9e;--accent-teal:#d183a9;--accent-mint:#f0a9c9;--accent-mint-ink:#341525;--accent-gold:#e9c187;--accent-gold-deep:#b78c54;--header-bg:rgb(26 12 21 / 88%);--table-head-bg:#2a1423;--dialog-bg:linear-gradient(160deg,#48263c,#24131f); }
body.ffy-tool[data-theme="arctic"],body.ffy-tool[data-theme="rose-quartz"],body.ffy-tool[data-theme="sage-ledger"],body.ffy-tool[data-theme="copper-linen"] { color-scheme:light;--scheme:light;--accent-mint-ink:#fff;--surface-glass:linear-gradient(150deg,var(--surface),var(--surface-elevated));--inset-bg:var(--surface-sunken);--soft-fill:var(--bg-secondary);--danger-fill:#fbe8e4;--tile-teal:linear-gradient(145deg,var(--bg-secondary),var(--surface-sunken));--tile-gold:linear-gradient(145deg,var(--surface-elevated),var(--bg-secondary));--success:#287858;--warning:#9a5f0d;--danger:#b3402c;--shadow-card:0 1px 0 rgb(255 255 255 / 70%) inset,0 14px 32px rgb(70 56 24 / 9%);--focus-ring:0 0 0 3px var(--accent-mint); }
body.ffy-tool[data-theme="arctic"] { --bg-primary:#eff7fb;--bg-secondary:#e0eef6;--surface:#fff;--surface-elevated:#f4faff;--surface-sunken:#e7f3fa;--border-subtle:#d4e4ec;--border-strong:#bad2e2;--text-primary:#102c40;--text-secondary:#46687c;--text-tertiary:#66859a;--accent-teal:#1689a8;--accent-mint:#126f9f;--accent-gold:#9b742f;--accent-gold-deep:#795b28;--header-bg:rgb(239 247 251 / 90%);--table-head-bg:#e0eef6;--dialog-bg:linear-gradient(160deg,#fff,#e7f3fa); }
body.ffy-tool[data-theme="rose-quartz"] { --bg-primary:#fcf3f1;--bg-secondary:#f3e4e1;--surface:#fffdfc;--surface-elevated:#fdf7f5;--surface-sunken:#f8eae8;--border-subtle:#ecdad8;--border-strong:#dfc3c3;--text-primary:#392631;--text-secondary:#755b69;--text-tertiary:#967c88;--accent-teal:#a25877;--accent-mint:#9a416c;--accent-gold:#946321;--accent-gold-deep:#734c1a;--header-bg:rgb(252 243 241 / 90%);--table-head-bg:#f3e4e1;--dialog-bg:linear-gradient(160deg,#fffdfc,#f8eae8); }
body.ffy-tool[data-theme="sage-ledger"] { --bg-primary:#f2f4ea;--bg-secondary:#e8eddf;--surface:#fcfdf8;--surface-elevated:#f7f9f1;--surface-sunken:#eaf1e4;--border-subtle:#d9e3d2;--border-strong:#c4d2be;--text-primary:#1d3629;--text-secondary:#536b5b;--text-tertiary:#758a79;--accent-teal:#4a8d65;--accent-mint:#337858;--accent-gold:#8b6e2d;--accent-gold-deep:#6f5423;--header-bg:rgb(242 244 234 / 90%);--table-head-bg:#e8eddf;--dialog-bg:linear-gradient(160deg,#fcfdf8,#eaf1e4); }
body.ffy-tool[data-theme="copper-linen"] { --bg-primary:#f7f1e9;--bg-secondary:#eee2d4;--surface:#fffdf9;--surface-elevated:#fbf5ed;--surface-sunken:#f2e4d5;--border-subtle:#e6d7c5;--border-strong:#d8c2a9;--text-primary:#34291f;--text-secondary:#705e50;--text-tertiary:#8e7a69;--accent-teal:#a66a43;--accent-mint:#9c5832;--accent-gold:#986a28;--accent-gold-deep:#754e1d;--header-bg:rgb(247 241 233 / 90%);--table-head-bg:#eee2d4;--dialog-bg:linear-gradient(160deg,#fffdf9,#f2e4d5); }

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.ffy-tool,
body.ffy-page {
    margin: 0;
    min-height: 100vh;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    background:
        radial-gradient(70rem 36rem at 88% -8%, rgb(31 143 119 / 15%), transparent 62%),
        radial-gradient(52rem 30rem at -6% 108%, rgb(217 173 98 / 6%), transparent 60%),
        var(--bg-primary);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.ffy-tool a, .ffy-page a { color: var(--accent-mint); }
.ffy-tool button, .ffy-tool input, .ffy-tool select, .ffy-tool textarea,
.ffy-page button, .ffy-page input, .ffy-page select, .ffy-page textarea { font: inherit; color: inherit; }

.ffy-tool :focus-visible, .ffy-page :focus-visible { outline: none; box-shadow: var(--focus-ring); }

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

/* ------------------------------------------------------------------ */
/* ToolHeader                                                          */
/* ------------------------------------------------------------------ */

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .7rem clamp(1rem, 3vw, 2rem);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-subtle);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.app-header > strong {
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: .01em;
    text-align: center;
}

.back-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: 0 .2rem;
    color: var(--text-secondary) !important;
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover { color: var(--text-primary) !important; }

.header-actions { justify-self: end; display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }

/* StatusBadge */
.local-badge, .local-pill, .ffy-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    justify-self: end;
    padding: .34rem .72rem;
    border: 1px solid rgb(95 227 191 / 32%);
    border-radius: var(--radius-pill);
    color: var(--accent-mint);
    background: rgb(95 227 191 / 6%);
    font-size: var(--text-xs);
    font-weight: 650;
    white-space: nowrap;
}

.local-badge::before, .local-pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent-mint); box-shadow: 0 0 10px rgb(95 227 191 / 70%); }

.ffy-badge--gold { color: var(--accent-gold); border-color: rgb(230 194 127 / 40%); background: rgb(230 194 127 / 8%); }

/* ------------------------------------------------------------------ */
/* Panels (SectionCard for the workspace)                              */
/* ------------------------------------------------------------------ */

.ffy-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    box-shadow: var(--shadow-card);
}

.eyebrow, .ffy-label {
    margin: 0;
    color: var(--accent-mint);
    font-size: var(--label-size);
    font-weight: 700;
    letter-spacing: var(--label-spacing);
    text-transform: uppercase;
}

.ffy-kicker { margin: .15rem 0 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* IconTile: the square tile that heads a card */
.ffy-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--icon-tile);
    height: var(--icon-tile);
    border-radius: .7rem;
    background: var(--tile-teal);
    border: 1px solid #2f7c6a;
    color: #86f0d2;
}

.ffy-tile svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ffy-tile--gold { background: var(--tile-gold); border-color: #957238; color: #f0cf8f; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.ffy-btn, .primary-button, .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--button-h);
    padding: .6rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.ffy-btn svg, .export-grid button svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ffy-btn--primary, .primary-button { background: var(--accent-mint); color: var(--accent-mint-ink) !important; }
.ffy-btn--primary:hover:not(:disabled), .primary-button:hover:not(:disabled) { background: #7eedcf; box-shadow: var(--glow-mint); }

.ffy-btn--secondary, .secondary-button { background: rgb(255 255 255 / 4%); border-color: var(--border-strong); color: var(--text-primary) !important; }
.ffy-btn--secondary:hover:not(:disabled), .secondary-button:hover:not(:disabled) { border-color: var(--accent-mint); background: rgb(95 227 191 / 8%); }

.ffy-btn--gold { background: linear-gradient(135deg, #f0d08e, #d5a954); color: #1d1604 !important; }
.ffy-btn--gold:hover:not(:disabled) { box-shadow: var(--glow-gold); }

.quiet-button {
    min-height: 2.5rem;
    padding: .35rem .55rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-mint);
    font-weight: 650;
    cursor: pointer;
}

.quiet-button:hover:not(:disabled) { background: rgb(95 227 191 / 8%); }

.ffy-tool button:disabled, .ffy-page button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Form fields                                                         */
/* ------------------------------------------------------------------ */

/*
 * Field styles are the default, not a rule: :where() keeps them at the lowest
 * specificity, so dense places (tables, filter bars) size their own controls.
 */
.ffy-tool :where(label), .ffy-page :where(label) { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 550; }

.ffy-tool :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.ffy-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    margin-top: .35rem;
    padding: .6rem .8rem;
    color: var(--text-primary);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 500;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
/* values in the primary ink: the reset above would hand them the label's grey */
.ffy-tool input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), .ffy-tool select, .ffy-tool textarea,
.ffy-page input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), .ffy-page select, .ffy-page textarea { color: var(--text-primary); }

.ffy-tool :where(textarea), .ffy-page :where(textarea) { min-height: 5.2rem; resize: vertical; line-height: 1.45; }

.ffy-tool :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: var(--border-strong); }

.ffy-tool :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.ffy-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    outline: none;
    border-color: var(--accent-mint);
    box-shadow: var(--focus-ring);
}

.ffy-tool :where(input:invalid) { border-color: rgb(255 143 128 / 60%); }

.ffy-tool :where(input[type="date"], input[type="month"]) { color-scheme: var(--scheme); }

.ffy-tool :where(input[type="checkbox"], input[type="radio"]), .ffy-page :where(input[type="checkbox"]) {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0;
    flex: none;
    accent-color: var(--accent-mint);
}

.ffy-tool :where(input[type="file"]) {
    display: block;
    width: 100%;
    margin-top: .4rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.ffy-tool input[type="file"]::file-selector-button {
    margin-right: .8rem;
    padding: .55rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 4%);
    color: var(--text-primary);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.ffy-tool :where(select) {
    appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
    background-size: .35rem .35rem, .35rem .35rem;
    background-repeat: no-repeat;
}

.field-hint { display: block; margin-top: .35rem; color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.45; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Workspace tabs on phones (segmented control)                        */
/* ------------------------------------------------------------------ */

.mobile-tabs { display: none; }

@media (max-width: 48rem) {
    .mobile-tabs {
        position: sticky;
        top: var(--header-h);
        z-index: 19;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .25rem;
        margin: .6rem .75rem 0;
        padding: .3rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-pill);
        background: var(--header-bg);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .mobile-tabs button {
        min-height: 2.6rem;
        border: 0;
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--text-secondary);
        font-weight: 650;
        cursor: pointer;
    }

    .mobile-tabs button[aria-selected="true"] { background: var(--accent-mint); color: var(--accent-mint-ink); }
}

/* ------------------------------------------------------------------ */
/* Empty and loading states                                            */
/* ------------------------------------------------------------------ */

.ffy-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 2.2rem 1.2rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-align: center;
}

.ffy-empty strong { color: var(--text-primary); font-size: var(--text-lg); }

.ffy-skeleton {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface-elevated) 50%, var(--surface) 100%);
    background-size: 200% 100%;
    animation: ffy-shimmer 1.4s linear infinite;
}

@keyframes ffy-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .ffy-skeleton { animation: none; }
    .ffy-btn, .primary-button, .secondary-button { transition: none; }
}

@media (max-width: 48rem) {
    :root { --header-h: 3.6rem; }
    .app-header { grid-template-columns: 1fr auto; padding-inline: .9rem; }
    .app-header > strong { display: none; }
}

@media (max-width: 26rem) {
    .local-badge { display: none; }
}