/* ════════════════════════════════════════════════════════════════
   Stoei Design Kit — stoei.css
   The shared look for every Stoei app (Card, Log, Voice, Scout,
   Vault). Colors and fonts come from stoei.co.

   Canonical copy lives in the Stoei Vault repo (public/ds/). Each app
   vendors its own copy at /ds/css/stoei.css and /ds/js/stoei.js.

   Dark mode: follows the device, or the user's choice via
   stoeiToggleTheme() (sets data-theme="dark" | "light" on <html>).

   Compatibility: the apps were built on the old FloForge kit, so the
   old --ffl-* variable names and .ffl-* classes are kept here and
   point at the Stoei values. New code should use --st-* tokens.
════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=Work+Sans:wght@400;500;600;700;800&display=swap");

/* ════════════════════════════════════════════════════════════════
   STOEI TOKENS — LIGHT (default)
════════════════════════════════════════════════════════════════ */
:root {
    /* Surfaces */
    --st-paper: #efe9dc;        /* page background */
    --st-surface: #f6f2e8;      /* panels, cards, inputs */
    --st-raised: #fbf8f1;       /* popovers, modals */
    --st-band: #e4dccb;         /* section headers, hovers */

    /* Lines */
    --st-line: #d6ccb8;
    --st-line-strong: #b3a68c;

    /* Text */
    --st-ink: #14100c;          /* headings, values */
    --st-ink-2: #3b332a;        /* body text */
    --st-ink-3: #6b6052;        /* secondary text */
    --st-ink-4: #8a7d6c;        /* disabled, done */

    /* Brand */
    --st-accent: #2f6d55;       /* buttons, links, active nav */
    --st-accent-hover: #17503b;
    --st-accent-tint: #e4f3ea;
    --st-on-accent: #efe9dc;    /* text on a green fill (both themes) */
    /* Solid green fills (buttons, active nav) stay deep green in BOTH
       themes so cream text on them always reads well. */
    --st-accent-fill: #2f6d55;
    --st-accent-fill-hover: #17503b;
    --st-gold: #8a6317;         /* small uppercase labels only */
    --st-gold-tint: #f3e7cc;

    /* Status (kept apart from the brand green) */
    --st-ok: #2f6d55;
    --st-ok-tint: #e4f3ea;
    --st-warn: #8a6317;
    --st-warn-tint: #f3e7cc;
    --st-bad: #a3362a;
    --st-bad-hover: #86281e;
    --st-bad-tint: #f6ddd7;
    --st-info: #3d5f7a;
    --st-info-tint: #e2eaf1;

    /* Sidebar (dark in both themes, like stoei.co's header bar) */
    --st-sidebar: #14100c;
    --st-sidebar-ink: #cfe0d4;
    --st-sidebar-muted: #a9bfb0;
    --st-sidebar-hover: rgba(207, 224, 212, 0.08);
    --st-sidebar-line: #2a231c;
    /* Same in both themes: the sidebar is always dark. */
    /* Solid status fills for badges/banners with cream text (both themes). */
    --st-ok-fill: #2f6d55;
    --st-warn-fill: #7a5714;
    --st-bad-fill: #a3362a;
    --st-info-fill: #3d5f7a;
    --st-sidebar-strong: #efe9dc;
    --st-sidebar-active: var(--st-accent-fill);
    --st-sidebar-on-active: #efe9dc;
    --st-sidebar-accent: #8cc7ae;  /* green text/icons on the dark sidebar */
    --st-sidebar-danger: #e08a7c;  /* sign out / delete on the dark sidebar */

    /* Type */
    --st-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --st-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --st-text-xs: 0.75rem;
    --st-text-sm: 0.875rem;
    --st-text-base: 1rem;
    --st-text-lg: 1.15rem;
    --st-text-xl: 1.45rem;
    --st-text-2xl: 1.9rem;
    --st-text-3xl: 2.4rem;

    /* Shape */
    --st-r-s: 0.25rem;
    --st-r-m: 0.5rem;
    --st-r-l: 0.75rem;
    --st-r-xl: 1rem;
    --st-r-full: 999px;
    --st-shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.06);
    --st-shadow-md: 0 6px 20px rgba(20, 16, 12, 0.1);
    --st-shadow-lg: 0 24px 60px rgba(20, 16, 12, 0.18);

    /* Spacing */
    --st-space-xs: 0.5rem;
    --st-space-sm: 0.75rem;
    --st-space-md: 1rem;
    --st-space-lg: 1.5rem;
    --st-space-xl: 2rem;
    --st-space-2xl: 2.5rem;

    --st-trans: 0.15s ease;
    color-scheme: light;
}

/* ════════════════════════════════════════════════════════════════
   STOEI TOKENS — DARK (device setting, or data-theme="dark")
   The two blocks below must stay identical.
════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --st-paper: #16120e;
        --st-surface: #201b16;
        --st-raised: #29231c;
        --st-band: #2a231c;
        --st-line: #3b332a;
        --st-line-strong: #5a4e40;
        --st-ink: #f3ede1;
        --st-ink-2: #d6ccb8;
        --st-ink-3: #a89b86;
        --st-ink-4: #7d725f;
        --st-accent: #6fb396;
        --st-accent-hover: #8cc7ae;
        --st-accent-tint: #1e3329;
        --st-on-accent: #efe9dc;
        --st-accent-fill: #2f6d55;
        --st-accent-fill-hover: #3a8268;
        --st-gold: #d4aa5c;
        --st-gold-tint: #33281a;
        --st-ok: #6fb396;
        --st-ok-tint: #1e3329;
        --st-warn: #d4aa5c;
        --st-warn-tint: #33281a;
        --st-bad: #e08a7c;
        --st-bad-hover: #eba597;
        --st-bad-tint: #3a1f1a;
        --st-info: #8fb3cf;
        --st-info-tint: #1c2731;
        --st-sidebar: #0e0b08;
        --st-sidebar-ink: #cfe0d4;
        --st-sidebar-muted: #8aa394;
        --st-sidebar-hover: rgba(207, 224, 212, 0.07);
        --st-sidebar-line: #221c16;
        --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --st-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
        --st-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --st-paper: #16120e;
    --st-surface: #201b16;
    --st-raised: #29231c;
    --st-band: #2a231c;
    --st-line: #3b332a;
    --st-line-strong: #5a4e40;
    --st-ink: #f3ede1;
    --st-ink-2: #d6ccb8;
    --st-ink-3: #a89b86;
    --st-ink-4: #7d725f;
    --st-accent: #6fb396;
    --st-accent-hover: #8cc7ae;
    --st-accent-tint: #1e3329;
    --st-on-accent: #efe9dc;
    --st-accent-fill: #2f6d55;
    --st-accent-fill-hover: #3a8268;
    --st-gold: #d4aa5c;
    --st-gold-tint: #33281a;
    --st-ok: #6fb396;
    --st-ok-tint: #1e3329;
    --st-warn: #d4aa5c;
    --st-warn-tint: #33281a;
    --st-bad: #e08a7c;
    --st-bad-hover: #eba597;
    --st-bad-tint: #3a1f1a;
    --st-info: #8fb3cf;
    --st-info-tint: #1c2731;
    --st-sidebar: #0e0b08;
    --st-sidebar-ink: #cfe0d4;
    --st-sidebar-muted: #8aa394;
    --st-sidebar-hover: rgba(207, 224, 212, 0.07);
    --st-sidebar-line: #221c16;
    --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --st-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --st-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════════
   COMPATIBILITY — old FloForge variable names → Stoei values.
   Defined once; they follow the theme because they point at --st-*.
════════════════════════════════════════════════════════════════ */
:root {
    --ffl-bg: var(--st-paper);
    --ffl-canvas: var(--st-paper);
    --ffl-panel: var(--st-surface);
    --ffl-surface: var(--st-surface);
    --ffl-surface-2: var(--st-band);
    --ffl-surface-3: var(--st-band);
    --ffl-surface-alt: var(--st-band);
    --ffl-surface-subtle: var(--st-band);
    --ffl-panel-raised: var(--st-raised);

    --ffl-ink: var(--st-ink);
    --ffl-text: var(--st-ink);
    --ffl-muted: var(--st-ink-3);
    --ffl-done: var(--st-ink-4);

    --ffl-line: var(--st-line);
    --ffl-border: var(--st-line);
    --ffl-line-strong: var(--st-line-strong);

    /* The old brand red was the accent; brand is now green.
       "red" names keep meaning error/danger. */
    --ffl-accent: var(--st-accent);
    --ffl-accent-hover: var(--st-accent-hover);
    --ffl-accent-soft: var(--st-accent-tint);
    --ffl-accent-subtle: var(--st-accent-tint);
    --ffl-link: var(--st-accent);
    --ffl-focus: var(--st-accent);
    --ffl-border-focus: var(--st-accent);

    --ffl-red: var(--st-bad);
    --ffl-red-hover: var(--st-bad-hover);
    --ffl-red-soft: var(--st-bad-tint);
    --ffl-red-bg: var(--st-bad-tint);
    --ffl-red-text: var(--st-bad);
    --ffl-danger: var(--st-bad);
    --ffl-danger-surface: var(--st-bad-tint);
    --ffl-success: var(--st-ok);
    --ffl-success-bg: var(--st-ok-tint);
    --ffl-warning: var(--st-warn);

    /* The old secondary "baby blue" becomes the green family. */
    --ffl-blue: var(--st-accent);
    --ffl-blue-hover: var(--st-accent-hover);
    --ffl-blue-soft: var(--st-accent-tint);
    --ffl-blue-bg: var(--st-accent-tint);
    --ffl-blue-text: var(--st-accent);

    --ffl-sb-bg: var(--st-sidebar);
    --ffl-sb-text: var(--st-sidebar-ink);
    --ffl-sb-muted: var(--st-sidebar-muted);
    --ffl-sb-hover: var(--st-sidebar-hover);
    --ffl-sb-active: var(--st-accent);
    --ffl-sb-border: var(--st-sidebar-line);

    --ffl-badge-muted-bg: var(--st-band);
    --ffl-badge-muted-text: var(--st-ink-3);
    --ffl-badge-green-bg: var(--st-ok-tint);
    --ffl-badge-green-text: var(--st-ok);
    --ffl-badge-amber-bg: var(--st-warn-tint);
    --ffl-badge-amber-text: var(--st-warn);
    --ffl-badge-purple-bg: var(--st-info-tint);
    --ffl-badge-purple-text: var(--st-info);

    --ffl-r-sm: var(--st-r-s);
    --ffl-r-md: var(--st-r-s);
    --ffl-r-lg: var(--st-r-m);
    --ffl-r-xl: var(--st-r-xl);
    --ffl-r-pill: var(--st-r-full);
    --ffl-radius: var(--st-r-m);
    --ffl-radius-sm: var(--st-r-s);

    --ffl-shadow-sm: var(--st-shadow-sm);
    --ffl-shadow-md: var(--st-shadow-md);
    --ffl-shadow-lg: var(--st-shadow-lg);

    --ffl-text-xs: var(--st-text-xs);
    --ffl-text-sm: var(--st-text-sm);
    --ffl-text-base: var(--st-text-base);
    --ffl-text-lg: var(--st-text-lg);
    --ffl-text-xl: var(--st-text-xl);
    --ffl-text-2xl: var(--st-text-2xl);
    --ffl-text-3xl: var(--st-text-3xl);

    --ffl-space-xs: var(--st-space-xs);
    --ffl-space-sm: var(--st-space-sm);
    --ffl-space-md: var(--st-space-md);
    --ffl-space-lg: var(--st-space-lg);
    --ffl-space-xl: var(--st-space-xl);
    --ffl-space-2xl: var(--st-space-2xl);
    --ffl-spacing-sm: var(--st-space-sm);
    --ffl-space-2: var(--st-space-xs);
    --ffl-space-3: var(--st-space-sm);
    --ffl-space-4: var(--st-space-md);

    --ffl-trans: var(--st-trans);
}

/* ════════════════════════════════════════════════════════════════
   RESET + BASE
════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--st-sans);
    font-size: var(--st-text-base);
    line-height: 1.55;
    background: var(--st-paper);
    color: var(--st-ink-2);
    -webkit-font-smoothing: antialiased;
    transition: background var(--st-trans), color var(--st-trans);
}

h1, h2, h3 {
    font-family: var(--st-serif);
    font-weight: 500;
    color: var(--st-ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
}
h4, h5, h6 {
    font-family: var(--st-sans);
    font-weight: 600;
    color: var(--st-ink);
}

button { font-family: inherit; cursor: pointer; }

a {
    color: var(--st-accent);
    text-decoration: none;
    transition: color var(--st-trans);
}
a:hover { color: var(--st-accent-hover); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   TYPE UTILITIES
════════════════════════════════════════════════════════════════ */
.st-display,
.ffl-display {
    font-family: var(--st-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--st-ink);
}
.st-eyebrow {
    font-family: var(--st-sans);
    font-size: var(--st-text-xs);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--st-gold);
}
.st-label,
.ffl-label {
    font-size: var(--st-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-ink-3);
}
.st-muted, .ffl-muted { color: var(--st-ink-3); }
.st-accent, .ffl-accent { color: var(--st-accent); }
.ffl-blue { color: var(--st-accent); }

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--st-ink-4); }

/* ════════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════════ */
.st-btn,
.ffl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--st-r-s);
    border: 1px solid transparent;
    font-family: var(--st-sans);
    font-size: var(--st-text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--st-trans), color var(--st-trans), border-color var(--st-trans);
}
.st-btn:hover, .ffl-btn:hover { text-decoration: none; }

.st-btn-primary,
.ffl-btn-primary {
    background: var(--st-accent-fill);
    color: var(--st-on-accent);
}
.st-btn-primary:hover,
.ffl-btn-primary:hover {
    background: var(--st-accent-fill-hover);
    color: var(--st-on-accent);
}

.st-btn-secondary,
.ffl-btn-secondary {
    background: transparent;
    color: var(--st-accent);
    border-color: var(--st-accent);
}
.st-btn-secondary:hover,
.ffl-btn-secondary:hover {
    background: var(--st-accent-tint);
    color: var(--st-accent);
}

.st-btn-ghost,
.ffl-btn-ghost {
    background: transparent;
    color: var(--st-ink-2);
    border-color: var(--st-line-strong);
}
.st-btn-ghost:hover,
.ffl-btn-ghost:hover {
    background: var(--st-band);
    color: var(--st-ink);
}

.st-btn-danger,
.ffl-btn-danger {
    background: transparent;
    color: var(--st-bad);
    border-color: var(--st-bad);
}
.st-btn-danger:hover,
.ffl-btn-danger:hover {
    background: var(--st-bad-tint);
    color: var(--st-bad);
}

.st-btn:disabled,
.ffl-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════════════════ */
.st-badge,
.ffl-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--st-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--st-r-full);
    white-space: nowrap;
    background: var(--st-band);
    color: var(--st-ink-3);
}
.ffl-badge-green, .st-badge-ok { background: var(--st-ok-tint); color: var(--st-ok); }
.ffl-badge-amber, .st-badge-warn { background: var(--st-warn-tint); color: var(--st-warn); }
.ffl-badge-red, .st-badge-bad { background: var(--st-bad-tint); color: var(--st-bad); }
.ffl-badge-blue { background: var(--st-accent-tint); color: var(--st-accent); }
.ffl-badge-purple, .st-badge-info { background: var(--st-info-tint); color: var(--st-info); }
.ffl-badge-muted { background: var(--st-band); color: var(--st-ink-3); }

/* ════════════════════════════════════════════════════════════════
   CARDS / PANELS
════════════════════════════════════════════════════════════════ */
.st-card,
.ffl-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-m);
    padding: 1.25rem;
    transition: border-color var(--st-trans);
}
.ffl-card-interactive, .st-card-interactive { cursor: pointer; }
.ffl-card-interactive:hover, .st-card-interactive:hover { border-color: var(--st-accent); }

/* ════════════════════════════════════════════════════════════════
   FORM INPUTS
════════════════════════════════════════════════════════════════ */
.st-input, .st-textarea, .st-select,
.ffl-input, .ffl-textarea, .ffl-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--st-line-strong);
    border-radius: var(--st-r-s);
    font-family: var(--st-sans);
    font-size: var(--st-text-base);
    color: var(--st-ink);
    background: var(--st-raised);
    transition: border-color var(--st-trans), box-shadow var(--st-trans);
    outline: none;
}
.st-input::placeholder, .ffl-input::placeholder,
.st-textarea::placeholder, .ffl-textarea::placeholder { color: var(--st-ink-4); }
.st-input:focus, .st-textarea:focus, .st-select:focus,
.ffl-input:focus, .ffl-textarea:focus, .ffl-select:focus {
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 22%, transparent);
}
.st-textarea, .ffl-textarea { resize: vertical; min-height: 80px; }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR + NAV
════════════════════════════════════════════════════════════════ */
.st-sidebar,
.ffl-sidebar {
    background: var(--st-sidebar);
    color: var(--st-sidebar-ink);
    border-right: 1px solid var(--st-sidebar-line);
}

/* Logo: "Stoei" in italic serif, app name underneath as a small label.
   <div class="ffl-sidebar-logo"><span class="ffl-logo-flo">Stoei</span><span class="ffl-logo-app">Card</span></div> */
.st-logo,
.ffl-sidebar-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--st-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--st-sidebar-strong);
    letter-spacing: -0.01em;
}
.st-logo-app,
.ffl-sidebar-logo .ffl-logo-app {
    font-family: var(--st-sans);
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--st-sidebar-muted);
}
.ffl-sidebar-logo .ffl-logo-flo { color: var(--st-sidebar-strong); }

.st-nav-item,
.ffl-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--st-r-s);
    font-size: var(--st-text-sm);
    color: var(--st-sidebar-ink);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    text-decoration: none;
    transition: background var(--st-trans), color var(--st-trans);
}
.st-nav-item:hover,
.ffl-nav-item:hover {
    background: var(--st-sidebar-hover);
    color: var(--st-sidebar-ink);
    text-decoration: none;
}
.st-nav-item.active,
.ffl-nav-item.active,
.st-nav-item[aria-current="page"],
.ffl-nav-item[aria-current="page"] {
    background: var(--st-sidebar-active);
    color: var(--st-sidebar-on-active);
}
.st-nav-label,
.ffl-nav-label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--st-sidebar-muted);
    padding: 0.25rem 0.75rem;
    margin-top: 1rem;
}

/* ════════════════════════════════════════════════════════════════
   THEME TOGGLE
   <button class="ffl-theme-toggle" onclick="stoeiToggleTheme()">
════════════════════════════════════════════════════════════════ */
.st-theme-toggle,
.ffl-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--st-r-s);
    border: 1px solid var(--st-line);
    background: var(--st-surface);
    color: var(--st-ink-3);
    font-size: var(--st-text-xs);
    cursor: pointer;
    transition: background var(--st-trans), color var(--st-trans);
}
.st-theme-toggle:hover,
.ffl-theme-toggle:hover {
    color: var(--st-ink);
    background: var(--st-band);
}

/* Top-bar light/dark switch (every app has one in its top bar).
   <button type="button" class="st-theme-switch" data-stoei-theme-toggle></button>
   stoei.js fills in the icon and label. Inherits the bar's text color. */
.st-theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--st-r-full);
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--st-trans), border-color var(--st-trans);
}
.st-theme-switch:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   AUTH (login / sign-up)
════════════════════════════════════════════════════════════════ */
.st-auth-wrap,
.ffl-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-paper);
    padding: 1rem;
}
.st-auth-card,
.ffl-auth-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-l);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--st-shadow-md);
}

/* ════════════════════════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════════════════════════ */
.st-divider,
.ffl-divider {
    border: none;
    border-top: 1px solid var(--st-line);
    margin: 1rem 0;
}
.st-fade-in,
.ffl-fade-in { animation: st-fade-in 0.18s ease; }
@keyframes st-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .st-fade-in, .ffl-fade-in { animation: none; }
}

/* "Made with Stoei Card" style footer badge */
.st-brand-badge,
.ffl-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--st-serif);
    font-style: italic;
    font-size: var(--st-text-sm);
    color: var(--st-ink-3);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--st-trans), color var(--st-trans);
}
.st-brand-badge:hover,
.ffl-brand-badge:hover {
    opacity: 1;
    color: var(--st-accent);
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   PILLS (tags, filters)
════════════════════════════════════════════════════════════════ */
.st-pill,
.ffl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--st-r-full);
    font-size: var(--st-text-xs);
    font-weight: 500;
    white-space: nowrap;
    background: var(--st-accent-tint);
    color: var(--st-accent);
    border: 1px solid transparent;
}
.st-pill-filter,
.ffl-pill-filter {
    background: none;
    color: var(--st-ink-3);
    border: 1px solid var(--st-line-strong);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--st-trans), color var(--st-trans), border-color var(--st-trans);
}
.st-pill-filter:hover,
.ffl-pill-filter:hover,
.st-pill-active,
.ffl-pill-active {
    background: var(--st-accent-tint);
    color: var(--st-accent);
    border-color: var(--st-accent);
}

/* ════════════════════════════════════════════════════════════════
   AVATAR
════════════════════════════════════════════════════════════════ */
.st-avatar,
.ffl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--st-accent-tint);
    color: var(--st-accent);
    font-size: var(--st-text-xs);
    font-weight: 600;
    flex-shrink: 0;
}
.st-avatar-sm, .ffl-avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.65rem; }
.st-avatar-lg, .ffl-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: var(--st-text-sm); }