/* ============================================================
 * StackBuddy Design System — Global CSS
 * ============================================================
 * One file. Global classes only. No CSS isolation.
 * Prefix: sb- on every class. Tokens at top.
 *
 * Visual direction: "Stripe" — professional & calm.
 *   - Inter throughout; heavy weights (700/800) for headlines
 *   - BLURPLE (#635BFF) = primary action/brand, with WHITE text on it (--sb-on-accent)
 *   - CYAN = secondary/data accent (kept under --sb-teal token); links use blurple
 *   - White cards, subtle 1px borders, soft layered shadows, moderate rounding (~10px)
 *   - Stripe slate-navy ink on white; light blue-gray (#F6F9FC) wells; lots of whitespace
 *   - Mascot: Astro-Bot-style white robot with a glossy blue visor + glowing blue eyes
 *
 * Source of truth for all visual decisions in StackBuddy.
 * MudBlazor is being deprecated. Don't add new classes that
 * depend on Mud variables.
 * ============================================================ */


/* ── Tokens ──────────────────────────────────────────────── */
:root {
    /* Ink (text) — Stripe slate navy */
    --sb-ink: #0A2540;
    --sb-ink-soft: #425466;
    --sb-ink-mute: #697386;

    /* Text colour that sits ON the blue accent (buttons, chips) — white. */
    --sb-on-accent: #FFFFFF;

    /* Paper (surfaces) */
    --sb-paper: #FFFFFF;
    --sb-paper-soft: #F5F8FE;   /* light blue-tinted well */
    --sb-paper-2: #EAF0FB;      /* slightly deeper surface (zebra rows, wells) */

    /* Lines — subtle */
    --sb-line: #E2E8F2;
    --sb-hairline: #EBEFF6;

    /* Accent — vivid blue (primary action / brand). White text sits on it. */
    --sb-accent: #2563EB;
    --sb-accent-ink: #1D4ED8;       /* darker blue for hover / links / accent text */
    --sb-accent-soft: #E8EFFD;      /* pale blue wash */

    /* Orange — secondary / data accent. Kept under --sb-teal so existing usages shift without
       renaming; --sb-blue is the readable alias. */
    --sb-blue: #FF7A1A;
    --sb-blue-ink: #E2680C;
    --sb-blue-soft: #FFF0E3;
    --sb-teal: #FF7A1A;
    --sb-teal-ink: #E2680C;
    --sb-teal-soft: #FFF0E3;

    /* Semantic */
    --sb-success: #1A8F5C;
    --sb-success-bg: #E3F5EC;
    --sb-warn: #C77A0A;
    --sb-warn-bg: #FBF1E0;
    --sb-warning: #C77A0A;          /* alias — referenced across the codebase as --sb-warning */
    --sb-warning-bg: #FBF1E0;
    --sb-error: #DF1B41;
    --sb-error-bg: #FCE8EC;
    --sb-info: #2563EB;
    --sb-info-bg: #E8EFFD;

    /* Legacy rotating-accent palette repointed onto blue / orange. */
    --sb-coral: #FF7A1A;
    --sb-yellow: #FF7A1A;
    --sb-cyan: #2563EB;
    --sb-cream: #F5F8FE;

    /* Layout */
    --sb-shell-w: 1100px;
    --sb-shell-narrow: 720px;

    /* Geometry — moderate, Stripe-restrained */
    --sb-radius: 10px;
    --sb-radius-sm: 6px;
    --sb-radius-lg: 14px;

    /* Shadows — soft, layered (Stripe style) */
    --sb-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.04);
    --sb-shadow-md: 0 2px 5px rgba(10, 37, 64, 0.06), 0 7px 16px rgba(10, 37, 64, 0.07);
    --sb-shadow-lg: 0 15px 35px rgba(10, 37, 64, 0.10), 0 5px 15px rgba(10, 37, 64, 0.06);

    /* Spacing scale */
    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-5: 24px;
    --sb-space-6: 32px;
    --sb-space-8: 48px;

    /* Fonts — Inter (Stripe-Sans-like), one family throughout */
    --sb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sb-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sb-font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sb-font-feat: 'ss01' on, 'cv11' on;

    /* Motion */
    --sb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --sb-fast: 0.15s;
    --sb-medium: 0.25s;
}

/* ── Dark theme tokens ───────────────────────────────────────────
   Applied via `.sb-dark` (the AppLayout shell toggle, already wired) or
   `[data-theme="dark"]` on <html> for a future global theme service.
   Mirrors the legacy MudBlazor BrandThemes dark palette so the app keeps
   its current dark look once Mud's MudThemeProvider is removed (Phase 6). */
.sb-dark,
[data-theme="dark"] {
    --sb-ink: #EDF1F7;
    --sb-ink-soft: #AEB8C7;
    --sb-ink-mute: #7E8A9C;
    --sb-paper: #0A1525;
    --sb-paper-soft: #11203A;
    --sb-paper-2: #182A45;
    --sb-line: #243756;
    --sb-hairline: rgba(237, 241, 247, 0.10);

    --sb-on-accent: #FFFFFF;

    --sb-accent: #5B8DEF;          /* slightly lighter blue on dark */
    --sb-accent-ink: #93B4FF;
    --sb-accent-soft: rgba(91, 141, 239, 0.18);

    --sb-blue: #FF9445;
    --sb-blue-ink: #FFB070;
    --sb-blue-soft: rgba(255, 148, 69, 0.16);
    --sb-teal: #FF9445;
    --sb-teal-ink: #FFB070;
    --sb-teal-soft: rgba(255, 148, 69, 0.16);

    --sb-success: #34D399;
    --sb-success-bg: rgba(52, 211, 153, 0.14);
    --sb-warn: #F5A524;
    --sb-warn-bg: rgba(245, 165, 36, 0.16);
    --sb-warning: #F5A524;
    --sb-warning-bg: rgba(245, 165, 36, 0.16);
    --sb-error: #FB6E84;
    --sb-error-bg: rgba(251, 110, 132, 0.16);
    --sb-info: #5B8DEF;
    --sb-info-bg: rgba(91, 141, 239, 0.18);

    --sb-coral: #FF9445;
    --sb-yellow: #FF9445;
    --sb-cyan: #5B8DEF;
    --sb-cream: #11203A;

    --sb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sb-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}


/* ── Base scope ──────────────────────────────────────────── */
.sb {
    font-family: var(--sb-font);
    font-feature-settings: var(--sb-font-feat);
    color: var(--sb-ink);
    background: var(--sb-paper);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
.sb *,
.sb *::before,
.sb *::after {
    box-sizing: border-box;
}
/* Links inherit ink, but NOT buttons — a global .sb-hero/.sb a rule from the
   legacy landing CSS (app.css) would otherwise force on-dark buttons to inherit
   the section's white text and disappear. */
.sb a:not(.sb-btn) {
    color: inherit;
}


/* ── Layout containers ───────────────────────────────────── */
.sb-shell {
    max-width: var(--sb-shell-w);
    margin: 0 auto;
    padding: 0 32px;
}
.sb-shell-narrow {
    max-width: var(--sb-shell-narrow);
    margin: 0 auto;
    padding: 0 32px;
}


/* ── Hairline rule ───────────────────────────────────────── */
.sb-rule {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--sb-line);
    max-width: 100%;
}
.sb-rule-soft {
    border-top-color: var(--sb-hairline);
}


/* ── Top bar ─────────────────────────────────────────────── */
.sb-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--sb-hairline);
}
.sb-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
/* Brand wordmark — matches the landing's .sbx-brand (Stack in ink, Buddy in accent). */
.sb-brand {
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    text-transform: none;
    text-decoration: none;
    color: var(--sb-ink);
}
.sb-brand .sb-wordmark-accent,
.sb-brand b {
    color: var(--sb-accent);
    font-weight: inherit;
}

/* Wordmark logotype — two-tone Inter "StackBuddy" (Buddy in accent). Used in the app
   topbar and reusable on the public header. */
.sb-wordmark {
    font-family: var(--sb-font);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--sb-ink);
    text-decoration: none;
    white-space: nowrap;
}
.sb-wordmark-accent { color: var(--sb-accent); }
.sb-topnav {
    display: flex;
    gap: 24px;
    align-items: center;
}
.sb-link {
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-ink);
    letter-spacing: 0.02em;
}
.sb-link-strong {
    font-weight: 700;
}
.sb-link:hover {
    color: var(--sb-accent);
}


/* ── Footer ──────────────────────────────────────────────── */
.sb-footer {
    padding: 32px 0;
    background: var(--sb-paper);
    border-top: 1px solid var(--sb-hairline);
}
.sb-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
}
.sb-footer-brand {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 15px;
    color: var(--sb-ink);
}
.sb-footer-brand b {
    color: var(--sb-accent);
    font-weight: inherit;
}
.sb-footer-nav {
    display: flex;
    gap: 24px;
}
.sb-footer-nav a {
    color: var(--sb-ink-mute);
    text-decoration: none;
}
.sb-footer-nav a:hover {
    color: var(--sb-ink);
}


/* ── Buttons / CTAs ──────────────────────────────────────── */
.sb-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--sb-font);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: var(--sb-on-accent);
    padding: 11px 20px;
    border: 1px solid transparent;
    background: var(--sb-accent);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    cursor: pointer;
    letter-spacing: -0.005em;
    line-height: 1.1;
    white-space: nowrap;
    transition:
        background var(--sb-fast) var(--sb-ease),
        color var(--sb-fast) var(--sb-ease),
        border-color var(--sb-fast) var(--sb-ease),
        box-shadow var(--sb-fast) var(--sb-ease);
}
/* Calm press — primary is solid orange; on hover it deepens and lifts subtly, on active
   it settles. No colour inversion, no hard offset shadow. */
.sb-btn:hover {
    background: var(--sb-accent-ink);
    box-shadow: var(--sb-shadow-md);
}
.sb-btn:active {
    background: var(--sb-accent-ink);
    box-shadow: var(--sb-shadow-sm);
}
.sb-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sb-accent-soft), var(--sb-shadow-sm);
}
.sb-btn-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform var(--sb-fast) var(--sb-ease);
}
.sb-btn:hover .sb-btn-arrow {
    transform: translateX(3px);
}

/* On-dark variant — white button for use on dark/photo sections */
.sb-btn-on-dark {
    background: #fff;
    color: var(--sb-ink);
    border-color: #fff;
}
.sb-btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--sb-ink);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: var(--sb-shadow-md);
}

/* Outline (secondary) variant — white surface, neutral border, ink text. Hover tints
   toward the accent without ever competing with the primary button next to it. */
.sb-btn-outline {
    background: var(--sb-paper);
    color: var(--sb-ink);
    border-color: var(--sb-line);
    box-shadow: none;
}
.sb-btn-outline:hover {
    background: var(--sb-accent-soft);
    color: var(--sb-accent-ink);
    border-color: var(--sb-accent);
    box-shadow: none;
}
.sb-btn-outline:active {
    background: var(--sb-accent-soft);
    color: var(--sb-accent-ink);
    box-shadow: none;
}

/* Ghost (tertiary) variant — borderless, for low-emphasis actions in toolbars. */
.sb-btn-ghost {
    background: transparent;
    color: var(--sb-ink-soft);
    border-color: transparent;
    box-shadow: none;
}
.sb-btn-ghost:hover {
    background: var(--sb-paper-soft);
    color: var(--sb-ink);
    box-shadow: none;
}

/* Smaller compact variant */
.sb-btn-sm {
    font-size: 14px;
    padding: 8px 14px;
}
.sb-btn-sm .sb-btn-arrow {
    font-size: 16px;
}

/* ── Compact in-app button scale ──────────────────────────────
   The base .sb-btn above is sized for the landing-page CTAs, which is a touch large for the
   dense product UI. Apply the tighter scale to every button inside the app shell and modals. */
.sb-app-shell .sb-btn,
.sb-dialog .sb-btn {
    font-size: 13.5px;
    padding: 8px 14px;
    gap: 7px;
    border-radius: var(--sb-radius-sm);
}
.sb-app-shell .sb-btn-sm,
.sb-dialog .sb-btn-sm {
    font-size: 12.5px;
    padding: 6px 10px;
    gap: 5px;
}
.sb-app-shell .sb-btn-text,
.sb-dialog .sb-btn-text {
    padding: 6px 9px;
}
.sb-app-shell .sb-btn-arrow,
.sb-dialog .sb-btn-arrow {
    font-size: 16px;
}
.sb-app-shell .sb-btn .sb-btn-ico,
.sb-dialog .sb-btn .sb-btn-ico {
    width: 16px;
    height: 16px;
}
/* Text / toolbar buttons are flat ink-colored, never filled. */
.sb-btn-text,
.sb-app-shell .sb-btn-text,
.sb-dialog .sb-btn-text {
    background: transparent;
    color: var(--sb-ink);
    border-color: transparent;
    box-shadow: none;
    font-weight: 500;
}
.sb-btn-text:hover,
.sb-app-shell .sb-btn-text:hover,
.sb-dialog .sb-btn-text:hover {
    background: var(--sb-paper-soft);
    color: var(--sb-accent-ink);
    box-shadow: none;
}

/* ── Segmented control (tab switcher) ─────────────────────────
   Shared sticker-style tabs (Schedule, My Top Notes, …) — one definition so every page
   matches. Rounded group with an ink hairline; the active segment is magenta-filled to
   match the app's selected-state language. Supports both `.active` and `--active` so the
   existing page markup keeps working. */
.sb-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--sb-paper-soft);
    border: 1px solid var(--sb-line);
    border-radius: 10px;
}
.sb-segmented .sb-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 7px;
    font-family: var(--sb-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sb-ink-soft);
    white-space: nowrap;
    transition: background var(--sb-fast) var(--sb-ease), color var(--sb-fast) var(--sb-ease);
}
.sb-segmented .sb-seg-btn:hover { color: var(--sb-ink); }
.sb-segmented .sb-seg-btn.active,
.sb-segmented .sb-seg-btn.sb-seg-btn--active {
    background: var(--sb-accent);
    color: var(--sb-on-accent);
}


/* ── Type — display headlines ────────────────────────────── */
.sb-headline {
    font-size: clamp(54px, 9vw, 128px);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--sb-ink);
}
.sb-headline em,
.sb-headline-accent {
    font-family: var(--sb-font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--sb-accent);
}


/* ── Type — section heads ────────────────────────────────── */
.sb-section-head {
    margin-bottom: 64px;
}
.sb-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-accent);
    margin-bottom: 14px;
}
.sb-section-title {
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--sb-ink);
    max-width: 14ch;
}


/* ── Type — eyebrow / lede / aside ───────────────────────── */
.sb-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-ink-mute);
    margin: 0 0 32px;
}
.sb-lede {
    font-size: clamp(18px, 1.5vw, 22px);
    max-width: 620px;
    margin: 0 0 40px;
    line-height: 1.45;
    color: var(--sb-ink-soft);
}
.sb-aside {
    font-size: 13px;
    color: var(--sb-ink-mute);
}
.sb-aside-on-dark {
    color: rgba(255, 255, 255, 0.7);
}


/* ── Hero ────────────────────────────────────────────────── */
.sb-hero {
    padding: 120px 0 96px;
    /* Neutralize the legacy `.sb-hero` (app.css) dark navy gradient + light text
       that collide on this class name. The design hero sits on the paper `.sb` bg. */
    background: transparent;
    color: var(--sb-ink);
}
.sb-hero-cta-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}


/* ── Manifesto / tenets list ─────────────────────────────── */
.sb-tenets {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--sb-hairline);
}
.sb-tenet {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid var(--sb-hairline);
    align-items: baseline;
}
.sb-tenet-num {
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.04em;
    color: var(--sb-accent);
    line-height: 1;
}
.sb-tenet-head {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--sb-ink);
}
.sb-tenet-body {
    font-size: 17px;
    line-height: 1.55;
    color: var(--sb-ink-soft);
    margin: 0;
    max-width: 640px;
}


/* ── Steps list ──────────────────────────────────────────── */
.sb-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.sb-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sb-step-num {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-accent);
    margin-bottom: 12px;
}
.sb-step-head {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--sb-ink);
}
.sb-step-body {
    font-size: 17px;
    color: var(--sb-ink-soft);
    margin: 0;
    line-height: 1.5;
}


/* ── Image / step art placeholder ────────────────────────── */
.sb-step-art {
    background: var(--sb-paper-soft);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sb-shadow-md);
}
.sb-step-art-label {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-ink-mute);
    font-weight: 600;
}


/* ── Pull quote ──────────────────────────────────────────── */
.sb-pull {
    margin: 0;
    max-width: 900px;
}
.sb-pull-body {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
    color: var(--sb-ink);
}
.sb-quote-mark {
    font-style: italic;
    color: var(--sb-accent);
    font-weight: 900;
}
.sb-pull-attr {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sb-pull-rule {
    display: inline-block;
    width: 48px;
    height: 2px;
    background: var(--sb-ink);
}
.sb-pull-name {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--sb-ink);
}
.sb-pull-meta {
    font-size: 14px;
    color: var(--sb-ink-mute);
}


/* ── Video quote ─────────────────────────────────────────── */
.sb-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.sb-video {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sb-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-md);
}
.sb-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.sb-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.18);
    transition: background var(--sb-medium) var(--sb-ease), opacity var(--sb-medium) var(--sb-ease);
}
.sb-video-overlay:hover {
    background: rgba(0, 0, 0, 0.32);
}
.sb-video-overlay.playing {
    opacity: 0;
    pointer-events: none;
}
.sb-video-overlay.playing:hover {
    opacity: 1;
    pointer-events: auto;
}
.sb-video-btn {
    width: 56px;
    height: 56px;
    background: var(--sb-paper);
    color: var(--sb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding-left: 4px; /* optical-center the play triangle */
    border: 1px solid var(--sb-line);
}
.sb-video-line {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--sb-ink);
}
.sb-video-attr {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
}


/* ── Final / dark section ────────────────────────────────── */
.sb-final {
    padding: 140px 0;
    background: var(--sb-ink);
    color: var(--sb-paper);
    text-align: left;
}
.sb-final-head {
    font-size: clamp(48px, 7vw, 100px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 0 0 48px;
    color: var(--sb-paper);
}
.sb-final-accent {
    font-style: italic;
    color: var(--sb-accent);
}


/* ── Section padding helpers ─────────────────────────────── */
.sb-section {
    padding: 96px 0;
}
.sb-section-muted {
    background: var(--sb-paper-soft);
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
    .sb-shell, .sb-shell-narrow {
        padding: 0 20px;
    }
    .sb-step {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sb-step-art {
        order: 2;
    }
    .sb-video-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .sb-tenet {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ============================================================
 * Auth + forms (login, register)
 * ============================================================ */

/* ── Auth page shell ─────────────────────────────────────── */
.sb-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sb-paper-soft);
}
.sb-auth-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 20px 96px;
}
.sb-auth-shell {
    width: 100%;
    max-width: 460px;
}
.sb-auth-head {
    text-align: center;
    margin-bottom: 32px;
}
.sb-auth-title {
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin: 0 0 16px;
    color: var(--sb-ink);
}
.sb-auth-title em,
.sb-auth-accent {
    font-style: italic;
    color: var(--sb-accent);
}
.sb-auth-sub {
    font-size: 16px;
    color: var(--sb-ink-soft);
    margin: 0;
    line-height: 1.5;
}

/* ── Card ────────────────────────────────────────────────── */
.sb-auth-card {
    background: var(--sb-paper);
    border: 1px solid var(--sb-hairline);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    padding: 36px 32px;
}
.sb-auth-card + .sb-auth-card {
    margin-top: 28px;
}

/* ── Step header inside a card ───────────────────────────── */
.sb-step-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-accent);
    border: 1px solid var(--sb-accent);
    padding: 4px 10px;
    margin-bottom: 16px;
}
.sb-step-h {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--sb-ink);
}
.sb-step-desc {
    font-size: 15px;
    color: var(--sb-ink-soft);
    margin: 0 0 24px;
    line-height: 1.5;
}
.sb-step-hint {
    font-size: 13px;
    color: var(--sb-ink-mute);
    margin: 8px 0 0;
}

/* ── Fields ──────────────────────────────────────────────── */
.sb-field {
    margin-bottom: 18px;
}
/* When the field is the last/only child (e.g. the flex:1 cell of an input+button row),
   the blanket margin made the wrapper 18px taller than the visible input — the centered
   button then sat ~9px below the textbox ("not in one line"). Stacked forms keep rhythm. */
.sb-field:last-child {
    margin-bottom: 0;
}
.sb-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-ink-soft);
    margin-bottom: 8px;
}
.sb-input,
.sb-textarea {
    width: 100%;
    font-family: var(--sb-font);
    font-size: 16px;
    color: var(--sb-ink);
    background: var(--sb-paper);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    padding: 13px 14px;
    transition: box-shadow var(--sb-fast) var(--sb-ease), border-color var(--sb-fast) var(--sb-ease);
}
.sb-textarea {
    resize: vertical;
    min-height: 72px;
}
.sb-input::placeholder,
.sb-textarea::placeholder {
    color: var(--sb-ink-mute);
}
.sb-input:focus,
.sb-textarea:focus {
    outline: none;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
.sb-input-code {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.4em;
    padding-left: 0.4em; /* offset the trailing letter-spacing for optical centering */
}

/* ── Block button (full-width form submit) ───────────────── */
.sb-btn-block {
    width: 100%;
    justify-content: center;
}
.sb-btn:disabled,
.sb-btn[disabled],
.sb-btn:disabled:hover,
.sb-btn[disabled]:hover,
.sb-app-shell .sb-btn:disabled,
.sb-app-shell .sb-btn[disabled],
.sb-dialog .sb-btn:disabled,
.sb-dialog .sb-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Inline text/link buttons ────────────────────────────── */
.sb-link-accent {
    color: var(--sb-accent-ink);
    font-weight: 700;
    text-decoration: none;
}
.sb-link-accent:hover {
    color: var(--sb-accent);
}
.sb-btn-text {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--sb-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-ink-soft);
    cursor: pointer;
}
.sb-btn-text:hover {
    color: var(--sb-accent);
}

/* ── Form footer + dividers ──────────────────────────────── */
.sb-form-foot {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--sb-ink-soft);
}
.sb-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.sb-actions-sep {
    color: var(--sb-hairline);
}

/* ── Alerts ──────────────────────────────────────────────── */
.sb-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--sb-line);
    background: var(--sb-paper);
    line-height: 1.4;
}
.sb-alert-error {
    border-color: var(--sb-error);
    color: var(--sb-error);
    background: var(--sb-error-bg);
}

/* ── Checkbox row ────────────────────────────────────────── */
.sb-checkrow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--sb-ink-soft);
    line-height: 1.4;
    margin-bottom: 20px;
}
.sb-checkrow input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--sb-accent);
    flex-shrink: 0;
}

/* ── Spinner ─────────────────────────────────────────────── */
.sb-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes sb-spin {
    to { transform: rotate(360deg); }
}

/* ── Loading state ───────────────────────────────────────── */
.sb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    text-align: center;
}
.sb-loading-text {
    font-weight: 700;
    color: var(--sb-ink);
}
.sb-loading-hint {
    font-size: 13px;
    color: var(--sb-ink-mute);
}

/* ── Publication preview (register step 1) ───────────────── */
.sb-preview {
    border: 2px solid var(--sb-hairline);
    padding: 16px;
    margin: 20px 0;
}
.sb-preview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-ink);
    margin-bottom: 16px;
}
.sb-preview-check {
    color: var(--sb-accent);
    font-weight: 900;
}
.sb-preview-media {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.sb-preview-pub {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--sb-line);
}
.sb-preview-author {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--sb-line);
}

/* ── Trust row ───────────────────────────────────────────── */
.sb-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 28px;
    /* Override legacy `.sb-trust` (app.css) dark background strip. */
    background: transparent;
    padding: 0;
}
.sb-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sb-ink-soft);
}
.sb-trust-check {
    color: var(--sb-accent);
    font-weight: 900;
}

/* ── Auth top bar (minimal) ──────────────────────────────── */
.sb-authbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid var(--sb-hairline);
    background: var(--sb-paper);
    padding: 0 24px;
}

/* =============================================================
   COMPONENT LIBRARY — Sb* primitives (MudBlazor replacements)
   One component per .razor in Client/Components/Design; styles live here.
   All colours reference tokens so they adapt to .sb-dark automatically.
   ============================================================= */

/* SbText — typography (replaces MudText) */
.sb-text { margin: 0; font-family: var(--sb-font); color: var(--sb-ink); }
.sb-text--h1 { font-family: var(--sb-font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.sb-text--h2 { font-family: var(--sb-font-display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; }
.sb-text--h3 { font-weight: 800; font-size: 1.6rem; line-height: 1.15; }
.sb-text--h4 { font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.sb-text--h5 { font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.sb-text--h6 { font-weight: 700; font-size: 0.95rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; }
.sb-text--lead { font-size: 1.15rem; line-height: 1.6; color: var(--sb-ink-soft); }
.sb-text--body { font-size: 1rem; line-height: 1.6; }
.sb-text--caption { font-size: 0.8rem; line-height: 1.4; color: var(--sb-ink-mute); }
.sb-text--overline { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-ink-mute); }
.sb-text--soft { color: var(--sb-ink-soft); }
.sb-text--mute { color: var(--sb-ink-mute); }
.sb-text--accent { color: var(--sb-accent-ink); }
.sb-text--center { text-align: center; }
.sb-text--right { text-align: right; }

/* SbStack — flex layout (replaces MudStack). Flex config is set inline. */
.sb-stack { display: flex; flex-direction: column; }
.sb-stack--row { flex-direction: row; }
.sb-stack--wrap { flex-wrap: wrap; }

/* SbPaper — surface (replaces MudPaper) */
.sb-paper { background: var(--sb-paper); border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius); padding: 20px; }
.sb-paper--soft { background: var(--sb-paper-soft); }
.sb-paper--line { border-color: var(--sb-line); }
.sb-paper--flat { border: none; }
.sb-paper--shadow { border: 1px solid var(--sb-hairline); box-shadow: var(--sb-shadow-md); }

/* SbIcon — inline SVG (replaces MudIcon) */
.sb-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; line-height: 0; }

/* SbIconButton — icon-only button. Calm + borderless at rest; a quiet tint on hover.
   No offset shadow / no translate, matching the new flat button language. */
.sb-iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid transparent; background: transparent; color: var(--sb-ink-soft); cursor: pointer; border-radius: var(--sb-radius-sm); transition: background var(--sb-fast) var(--sb-ease), color var(--sb-fast) var(--sb-ease), border-color var(--sb-fast) var(--sb-ease); }
.sb-iconbtn:hover { background: var(--sb-paper-soft); color: var(--sb-accent-ink); }
.sb-iconbtn:active { background: var(--sb-paper-2); }
.sb-iconbtn:disabled, .sb-iconbtn[disabled], .sb-iconbtn:disabled:hover { opacity: 0.4; cursor: not-allowed; background: transparent; }
.sb-iconbtn--solid { background: var(--sb-accent); color: var(--sb-on-accent); box-shadow: var(--sb-shadow-sm); }
.sb-iconbtn--solid:hover { background: var(--sb-accent-ink); color: var(--sb-on-accent); box-shadow: var(--sb-shadow-md); }
.sb-iconbtn--outline { border-color: var(--sb-line); color: var(--sb-ink-soft); }
.sb-iconbtn--outline:hover { border-color: var(--sb-ink-mute); }

/* SbDivider — separator (replaces MudDivider) */
.sb-divider { border: 0; border-top: 1px solid var(--sb-hairline); margin: 12px 0; align-self: stretch; }
.sb-divider--strong { border-top-color: var(--sb-line); }
.sb-divider--v { border-top: 0; border-left: 1px solid var(--sb-hairline); margin: 0 12px; align-self: stretch; width: 0; }
.sb-divider--v.sb-divider--strong { border-left-color: var(--sb-line); }

/* SbSpacer — flex spacer (replaces MudSpacer) */
.sb-spacer { flex: 1 1 auto; }

/* SbLink — anchor (replaces MudLink) */
.sb-link { color: var(--sb-accent-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sb-link:hover { color: var(--sb-accent); }
.sb-link--plain { text-decoration: none; color: inherit; }
.sb-link--plain:hover { color: var(--sb-accent-ink); }

/* Data stat numbers render in teal ("data/trust") for a consistent look across Analytics,
   Tracking, etc. */
.sb-stat-num { color: var(--sb-teal-ink); }

/* Teal secondary button — the "data/trust" counterpart to the orange primary .sb-btn. */
.sb-btn-teal { background: var(--sb-teal); color: #fff; border-color: transparent; }
.sb-btn-teal:hover { background: var(--sb-teal-ink); color: #fff; }
.sb-app-shell .sb-btn-teal:hover, .sb-dialog .sb-btn-teal:hover { background: var(--sb-teal-ink); }

/* SbContainer — centered max-width wrapper (replaces MudContainer) */
.sb-container { width: 100%; margin: 0 auto; padding: 0 24px; }
.sb-container--sm { max-width: 600px; }
.sb-container--md { max-width: 840px; }
.sb-container--lg { max-width: var(--sb-shell-w); }
.sb-container--xl { max-width: 1320px; }
.sb-container--full { max-width: 100%; }

/* ── State tokens (extends the palette for alerts/chips/etc.) ── */
:root {
    --sb-error: #E5484D; --sb-error-bg: #FCEDED;
    --sb-success: #2E9E5B; --sb-success-bg: #E9F6EE;
    --sb-warn: #B6770A; --sb-warn-bg: #FBF1DC;
    --sb-info: #2D6FF0; --sb-info-bg: #E8F0FE;
}
.sb-dark, [data-theme="dark"] {
    --sb-error: #FF6166; --sb-error-bg: rgba(229, 72, 77, 0.16);
    --sb-success: #4ADE80; --sb-success-bg: rgba(46, 158, 91, 0.18);
    --sb-warn: #F5C451; --sb-warn-bg: rgba(182, 119, 10, 0.22);
    --sb-info: #6EA8FF; --sb-info-bg: rgba(45, 111, 240, 0.18);
}

/* Form fields — SbTextField / SbSelect */
.sb-field { display: flex; flex-direction: column; gap: 6px; }
.sb-field-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-ink-soft); }
.sb-input { font-family: var(--sb-font); font-size: 0.95rem; color: var(--sb-ink); background: var(--sb-paper); border: 1px solid var(--sb-line); border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color var(--sb-fast) var(--sb-ease), box-shadow var(--sb-fast) var(--sb-ease); }
.sb-input::placeholder { color: var(--sb-ink-mute); }
.sb-input:focus { outline: none; border-color: var(--sb-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-accent) 30%, transparent); }
.sb-input:disabled { opacity: 0.55; cursor: not-allowed; }
/* Single-line controls (text fields, selects, autocomplete, multiselect trigger) share
   one height that lines up with the md button next to them (~34px). Textareas (--area)
   keep growing. This is what makes fields consistent and "matching" across the app. */
.sb-input:not(.sb-input--area) { padding: 6px 12px; line-height: 1.3; min-height: 34px; }
.sb-input--area { resize: vertical; min-height: 84px; line-height: 1.5; }
.sb-input--error { border-color: var(--sb-error); }
.sb-input--error:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-error) 30%, transparent); }
.sb-select { cursor: pointer; }
.sb-field-help { font-size: 0.78rem; color: var(--sb-ink-mute); }
.sb-field-help--error { color: var(--sb-error); }

/* SbCheckbox */
.sb-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sb-check-box { width: 18px; height: 18px; accent-color: var(--sb-accent); cursor: pointer; flex: 0 0 auto; }
.sb-check-label { font-size: 0.95rem; color: var(--sb-ink); }

/* SbSwitch — pill toggle (intentional rounded affordance) */
.sb-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.sb-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.sb-switch-track { position: relative; width: 40px; height: 22px; background: var(--sb-ink-mute); border-radius: 22px; transition: background var(--sb-fast) var(--sb-ease); flex: 0 0 auto; }
.sb-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--sb-paper); border-radius: 50%; transition: transform var(--sb-fast) var(--sb-ease); }
.sb-switch-input:checked + .sb-switch-track { background: var(--sb-accent); }
.sb-switch-input:checked + .sb-switch-track .sb-switch-thumb { transform: translateX(18px); }
.sb-switch-input:disabled + .sb-switch-track { opacity: 0.5; }
.sb-switch-label { font-size: 0.95rem; color: var(--sb-ink); }

/* SbAlert */
.sb-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--sb-hairline); border-left-width: 4px; border-radius: var(--sb-radius); background: var(--sb-paper-soft); color: var(--sb-ink); }
.sb-alert--dense { padding: 8px 12px; }
.sb-alert-icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.sb-alert-body { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.5; }
.sb-alert-close { background: none; border: 0; cursor: pointer; color: inherit; opacity: 0.6; padding: 0; display: inline-flex; }
.sb-alert-close:hover { opacity: 1; }
.sb-alert--info { border-left-color: var(--sb-info); background: var(--sb-info-bg); }
.sb-alert--info .sb-alert-icon { color: var(--sb-info); }
.sb-alert--success { border-left-color: var(--sb-success); background: var(--sb-success-bg); }
.sb-alert--success .sb-alert-icon { color: var(--sb-success); }
.sb-alert--warning { border-left-color: var(--sb-warn); background: var(--sb-warn-bg); }
.sb-alert--warning .sb-alert-icon { color: var(--sb-warn); }
.sb-alert--error { border-left-color: var(--sb-error); background: var(--sb-error-bg); }
.sb-alert--error .sb-alert-icon { color: var(--sb-error); }

/* SbChip */
.sb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent; border-radius: var(--sb-radius); background: var(--sb-paper-soft); color: var(--sb-ink); white-space: nowrap; }
.sb-chip--clickable { cursor: pointer; }
.sb-chip--clickable:hover { border-color: var(--sb-line); }
.sb-chip-close { display: inline-flex; background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; color: inherit; opacity: 0.6; }
.sb-chip-close:hover { opacity: 1; }
.sb-chip--outline { background: transparent; border-color: var(--sb-line); }
.sb-chip--accent { background: color-mix(in srgb, var(--sb-accent) 16%, transparent); color: var(--sb-accent-ink); }
.sb-chip--accent.sb-chip--outline { background: transparent; border-color: var(--sb-accent); color: var(--sb-accent-ink); }
.sb-chip--success { background: var(--sb-success-bg); color: var(--sb-success); }
.sb-chip--warning { background: var(--sb-warn-bg); color: var(--sb-warn); }
.sb-chip--error { background: var(--sb-error-bg); color: var(--sb-error); }
.sb-chip--info { background: var(--sb-info-bg); color: var(--sb-info); }

/* SbBadge */
.sb-badge-wrap { position: relative; display: inline-flex; }
.sb-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; line-height: 1; border-radius: 9px; background: var(--sb-error); color: #fff; }
.sb-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -3px; right: -3px; }
.sb-badge--error { background: var(--sb-error); }
.sb-badge--success { background: var(--sb-success); }
.sb-badge--info { background: var(--sb-info); }

/* SbProgress */
.sb-progress { width: 100%; height: 8px; background: var(--sb-paper-soft); border: 1px solid var(--sb-hairline); overflow: hidden; }
.sb-progress-bar { height: 100%; background: var(--sb-accent); transition: width var(--sb-medium) var(--sb-ease); }
.sb-progress--success .sb-progress-bar { background: var(--sb-success); }
.sb-progress--error .sb-progress-bar { background: var(--sb-error); }
.sb-progress-bar--indet { width: 40%; animation: sb-progress-indet 1.2s infinite var(--sb-ease); }
@keyframes sb-progress-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* SbSpinner */
.sb-spinner { display: inline-block; border: 2.5px solid color-mix(in srgb, var(--sb-ink) 18%, transparent); border-top-color: var(--sb-accent); border-radius: 50%; animation: sb-spin 0.7s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* SbSkeleton */
.sb-skeleton { display: inline-block; background: linear-gradient(90deg, var(--sb-paper-soft) 25%, color-mix(in srgb, var(--sb-ink) 8%, var(--sb-paper-soft)) 37%, var(--sb-paper-soft) 63%); background-size: 400% 100%; animation: sb-shimmer 1.4s ease infinite; border-radius: var(--sb-radius); }
.sb-skeleton--circle { border-radius: 50%; }
@keyframes sb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* SbTooltip */
.sb-tooltip { position: relative; display: inline-flex; }
.sb-tooltip[data-sb-tip]:not([data-sb-tip=""]):hover::after,
.sb-tooltip[data-sb-tip]:not([data-sb-tip=""]):focus-visible::after { content: attr(data-sb-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--sb-ink); color: var(--sb-paper); font-size: 0.72rem; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; width: max-content; max-width: min(260px, 80vw); padding: 5px 9px; border-radius: 6px; box-shadow: var(--sb-shadow-md); z-index: 1000; pointer-events: none; }
/* Inside the fixed top bar the upward bubble clips off-screen — open below instead. */
.sb-appbar .sb-tooltip[data-sb-tip]:not([data-sb-tip=""]):hover::after,
.sb-appbar .sb-tooltip[data-sb-tip]:not([data-sb-tip=""]):focus-visible::after { bottom: auto; top: calc(100% + 6px); }
/* sb-tip-end: for triggers near the right edge (e.g. the composer rail) — anchor the
   bubble's right edge to the trigger so it opens leftward instead of clipping off-screen. */
.sb-tooltip.sb-tip-end[data-sb-tip]:not([data-sb-tip=""]):hover::after,
.sb-tooltip.sb-tip-end[data-sb-tip]:not([data-sb-tip=""]):focus-visible::after { left: auto; right: 0; transform: none; }
/* sb-tip-start: mirror, for triggers near the left edge. */
.sb-tooltip.sb-tip-start[data-sb-tip]:not([data-sb-tip=""]):hover::after,
.sb-tooltip.sb-tip-start[data-sb-tip]:not([data-sb-tip=""]):focus-visible::after { left: 0; right: auto; transform: none; }

/* SbCard — calm data-forward surface: 1px hairline border + a soft low-opacity shadow.
   No offset "sticker" shadow, no loud ink borders. */
.sb-card { background: var(--sb-paper); border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow-sm); }
.sb-card--shadow { border-color: var(--sb-hairline); box-shadow: var(--sb-shadow-md); }
.sb-card-header { padding: 18px 22px; border-bottom: 1px solid var(--sb-hairline); font-weight: 700; }
.sb-card-content { padding: 22px; }
/* A little breathing room between stacked text blocks inside cards (the "too much text
   feels cramped" fix) — only between siblings, so the first element keeps the card's padding. */
.sb-card-content > * + * { margin-top: 10px; }

/* SbAvatar */
.sb-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sb-paper-soft); color: var(--sb-ink); font-weight: 700; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--sb-hairline); }
.sb-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SbImage */
.sb-image { max-width: 100%; height: auto; display: block; }

/* SbNavLink */
.sb-navlink { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--sb-ink-soft); text-decoration: none; font-weight: 600; font-size: 0.92rem; border-left: 3px solid transparent; transition: background var(--sb-fast) var(--sb-ease), color var(--sb-fast) var(--sb-ease); }
.sb-navlink:hover { background: var(--sb-paper-soft); color: var(--sb-ink); }
.sb-navlink.active { color: var(--sb-ink); background: var(--sb-paper-soft); border-left-color: var(--sb-accent); }
.sb-navlink-text { white-space: nowrap; }

/* SbList / SbListItem */
.sb-list { display: flex; flex-direction: column; }
.sb-listitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--sb-ink); border: 0; background: none; text-align: left; width: 100%; font: inherit; }
.sb-listitem--clickable { cursor: pointer; }
.sb-listitem--clickable:hover { background: var(--sb-paper-soft); }
.sb-listitem-text { flex: 1 1 auto; }

/* SbMenu / SbMenuItem */
.sb-menu { position: relative; display: inline-block; }
.sb-menu-trigger { display: inline-flex; }
.sb-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.sb-menu-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 41; min-width: 180px; background: var(--sb-paper); border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow-lg); padding: 4px; display: flex; flex-direction: column; }
.sb-menu-list--end { left: auto; right: 0; }
.sb-menuitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--sb-ink); font: inherit; text-align: left; cursor: pointer; }
.sb-menuitem:hover { background: var(--sb-paper-soft); color: var(--sb-accent-ink); }
.sb-menuitem:disabled { opacity: 0.4; cursor: not-allowed; }
.sb-menuitem-text { flex: 1 1 auto; }

/* SbTable family (replaces MudTable / MudSimpleTable) */
.sb-table-wrap { width: 100%; overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--sb-ink); }
.sb-thead { border-bottom: 2px solid var(--sb-line); }
.sb-th { text-align: left; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sb-ink-soft); padding: 10px 12px; white-space: nowrap; }
.sb-td { padding: 12px; border-bottom: 1px solid var(--sb-hairline); vertical-align: middle; }
.sb-tr--clickable { cursor: pointer; }
.sb-table--hover tbody tr:hover { background: var(--sb-paper-soft); }
.sb-table--dense .sb-td, .sb-table--dense .sb-th { padding: 6px 10px; }
.sb-sortlabel { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sb-ink-soft); cursor: pointer; }
.sb-sortlabel:hover { color: var(--sb-ink); }
.sb-sortlabel-arrow { color: var(--sb-accent); }

/* SbGrid / SbItem — 12-column grid */
.sb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sb-col-1 { grid-column: span 1; }
.sb-col-2 { grid-column: span 2; }
.sb-col-3 { grid-column: span 3; }
.sb-col-4 { grid-column: span 4; }
.sb-col-5 { grid-column: span 5; }
.sb-col-6 { grid-column: span 6; }
.sb-col-7 { grid-column: span 7; }
.sb-col-8 { grid-column: span 8; }
.sb-col-9 { grid-column: span 9; }
.sb-col-10 { grid-column: span 10; }
.sb-col-11 { grid-column: span 11; }
.sb-col-12 { grid-column: span 12; }
@media (min-width: 600px) {
    .sb-col-sm-1 { grid-column: span 1; } .sb-col-sm-2 { grid-column: span 2; }
    .sb-col-sm-3 { grid-column: span 3; } .sb-col-sm-4 { grid-column: span 4; }
    .sb-col-sm-5 { grid-column: span 5; } .sb-col-sm-6 { grid-column: span 6; }
    .sb-col-sm-7 { grid-column: span 7; } .sb-col-sm-8 { grid-column: span 8; }
    .sb-col-sm-9 { grid-column: span 9; } .sb-col-sm-10 { grid-column: span 10; }
    .sb-col-sm-11 { grid-column: span 11; } .sb-col-sm-12 { grid-column: span 12; }
}
@media (min-width: 960px) {
    .sb-col-md-1 { grid-column: span 1; } .sb-col-md-2 { grid-column: span 2; }
    .sb-col-md-3 { grid-column: span 3; } .sb-col-md-4 { grid-column: span 4; }
    .sb-col-md-5 { grid-column: span 5; } .sb-col-md-6 { grid-column: span 6; }
    .sb-col-md-7 { grid-column: span 7; } .sb-col-md-8 { grid-column: span 8; }
    .sb-col-md-9 { grid-column: span 9; } .sb-col-md-10 { grid-column: span 10; }
    .sb-col-md-11 { grid-column: span 11; } .sb-col-md-12 { grid-column: span 12; }
}
@media (min-width: 1280px) {
    .sb-col-lg-1 { grid-column: span 1; } .sb-col-lg-2 { grid-column: span 2; }
    .sb-col-lg-3 { grid-column: span 3; } .sb-col-lg-4 { grid-column: span 4; }
    .sb-col-lg-5 { grid-column: span 5; } .sb-col-lg-6 { grid-column: span 6; }
    .sb-col-lg-7 { grid-column: span 7; } .sb-col-lg-8 { grid-column: span 8; }
    .sb-col-lg-9 { grid-column: span 9; } .sb-col-lg-10 { grid-column: span 10; }
    .sb-col-lg-11 { grid-column: span 11; } .sb-col-lg-12 { grid-column: span 12; }
}

/* SbToastHost / SbToast — notifications (replaces MudSnackbar) */
.sb-toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; }
.sb-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--sb-paper); color: var(--sb-ink); border: 1px solid var(--sb-hairline); border-left-width: 4px; border-radius: var(--sb-radius); box-shadow: var(--sb-shadow-lg); pointer-events: auto; animation: sb-toast-in var(--sb-medium) var(--sb-ease); }
@keyframes sb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sb-toast-icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.sb-toast-text { flex: 1 1 auto; font-size: 0.9rem; line-height: 1.45; }
.sb-toast-close { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: 0.55; }
.sb-toast-close:hover { opacity: 1; }
.sb-toast--info { border-left-color: var(--sb-info); }
.sb-toast--info .sb-toast-icon { color: var(--sb-info); }
.sb-toast--success { border-left-color: var(--sb-success); }
.sb-toast--success .sb-toast-icon { color: var(--sb-success); }
.sb-toast--warning { border-left-color: var(--sb-warn); }
.sb-toast--warning .sb-toast-icon { color: var(--sb-warn); }
.sb-toast--error { border-left-color: var(--sb-error); }
.sb-toast--error .sb-toast-icon { color: var(--sb-error); }

/* SbDialogHost / SbDialog — modal dialogs (replaces MudDialog) */
.sb-dialog-backdrop { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(2px); overflow-y: auto; }
.sb-dialog { background: var(--sb-paper); color: var(--sb-ink); border: 1px solid var(--sb-hairline); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg); width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; animation: sb-dialog-in var(--sb-medium) var(--sb-ease); }
@keyframes sb-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.sb-dialog--sm { max-width: 420px; }
.sb-dialog--md { max-width: 600px; }
.sb-dialog--lg { max-width: 840px; }
.sb-dialog--xl { max-width: 1100px; }
.sb-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sb-line); }
.sb-dialog-title { font-family: var(--sb-font-display, var(--sb-font)); font-weight: 800; font-size: 1.1rem; }
.sb-dialog-close { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: 0.6; }
.sb-dialog-close:hover { opacity: 1; }
.sb-dialog-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }
.sb-dialog-message { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.sb-dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--sb-hairline); }

/* ── Ported from CSS-isolation files (removed 2026-06-10, no new .razor.css) ── */
/* Schedule page: load-more row at the bottom of the scheduled list */
.schedule-load-more-row { display: flex; justify-content: center; align-items: center; padding: 12px 20px 16px; margin-right: 0 !important; }
.schedule-load-more-btn { min-width: 120px; opacity: 0.45; font-size: 0.75rem !important; letter-spacing: 0.04em; transition: opacity 0.15s ease !important; }
.schedule-load-more-btn:hover:not([disabled]) { opacity: 1; }
.schedule-load-more-end { opacity: .3; font-style: italic; font-size: 0.75rem; }
/* SearchNotes page: chip filter row */
.search-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* SbCard media + actions (card image banner / footer button row) */
.sb-card-media { display: block; width: 100%; height: 140px; object-fit: cover; border-bottom: 1px solid var(--sb-hairline); }
.sb-card-actions { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; }

/* ── Page header (SbPageHeader) — THE standard for every /app page title ── */
.sb-pagehead { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.sb-pagehead-main { flex: 1 1 auto; min-width: 0; }
.sb-pagehead-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-pagehead-ico { display: inline-flex; color: var(--sb-accent); flex: 0 0 auto; }
.sb-pagehead-title {
    margin: 0;
    font-family: var(--sb-font);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--sb-ink);
}
.sb-pagehead-pill {
    background: var(--sb-accent);
    color: var(--sb-on-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}
.sb-pagehead-sub { margin: 4px 0 0; font-size: 0.95rem; color: var(--sb-ink-soft); line-height: 1.5; max-width: 70ch; }
.sb-pagehead-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }

/* ── Spacing scale (4px step) — bounded design-system helpers, not a utility framework.
   Used by migrated screens for vertical rhythm; mt = margin-top, mb = margin-bottom. */
.sb-mt-1 { margin-top: 4px; }
.sb-mt-2 { margin-top: 8px; }
.sb-mt-3 { margin-top: 12px; }
.sb-mt-4 { margin-top: 16px; }
.sb-mt-6 { margin-top: 24px; }
.sb-mb-1 { margin-bottom: 4px; }
.sb-mb-2 { margin-bottom: 8px; }
.sb-mb-3 { margin-bottom: 12px; }
.sb-mb-4 { margin-bottom: 16px; }
.sb-mb-6 { margin-bottom: 24px; }

/* ── Legacy MudBlazor spacing utilities (4px step), still used by ~25 migrated screens.
   Bootstrap 5 (loaded globally) has px-/py-/m[bt]- but NOT pa-/ma- (Vuetify-style) and
   dropped pl-/pr-/ml-/mr- in favor of start/end — so all of these silently rendered as
   ZERO spacing ("content glued to the card border"). Defined once here on Mud's scale
   rather than rewriting every call site. */
.pa-0 { padding: 0 !important; }
.pa-1 { padding: 4px !important; }
.pa-2 { padding: 8px !important; }
.pa-3 { padding: 12px !important; }
.pa-4 { padding: 16px !important; }
.pa-5 { padding: 20px !important; }
.pa-6 { padding: 24px !important; }
.pa-8 { padding: 32px !important; }
.ma-0 { margin: 0 !important; }
.ma-1 { margin: 4px !important; }
.ma-2 { margin: 8px !important; }
.ma-3 { margin: 12px !important; }
.ma-4 { margin: 16px !important; }
.pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }
.pl-3 { padding-left: 12px !important; }
.pl-4 { padding-left: 16px !important; }
.pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; }
.pr-3 { padding-right: 12px !important; }
.pr-4 { padding-right: 16px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.ml-4 { margin-left: 16px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.mr-4 { margin-right: 16px !important; }

/* SbButton — hardened variants (text/outline-ink), icon + full-width + disabled.
   The base .sb-btn / .sb-btn-on-dark / .sb-btn-sm rules live above. */
.sb-btn--has-icon { align-items: center; }
.sb-btn-ico { flex: 0 0 auto; }
.sb-btn-full { width: 100%; justify-content: center; }
.sb-btn:disabled,
.sb-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Text variant — borderless toolbar/inline action */
.sb-btn-text {
    border-color: transparent;
    background: transparent;
    color: var(--sb-ink);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}
.sb-btn-text:hover {
    background: var(--sb-paper-soft);
    color: var(--sb-accent-ink);
    box-shadow: none;
}

/* Outline (ink) variant — secondary button: hairline border on paper, ink text. */
.sb-btn-outline-ink {
    border-color: var(--sb-line);
    background: var(--sb-paper);
    color: var(--sb-ink);
    box-shadow: none;
}
.sb-btn-outline-ink:hover {
    background: var(--sb-paper-soft);
    border-color: var(--sb-ink-mute);
    color: var(--sb-ink);
    box-shadow: none;
}

/* ============================================================
   How-to-Schedule page — migrated off MudBlazor 2026-05-30.
   Tokens only (no --mud-palette-*); was an inline <style> block.
   ============================================================ */
.sb-howto-wrap { margin-top: 24px; margin-bottom: 40px; }
.sb-howto-hero {
    background: linear-gradient(135deg, #2563EB 0%, #4F8BF0 100%);
    border-radius: var(--sb-radius-lg);
    padding: 36px 32px;
    color: #fff;
    margin-bottom: 32px;
}
.sb-howto-hero-title { font-weight: 800; color: #fff; margin-bottom: 6px; }
.sb-howto-hero-sub { color: rgba(255,255,255,0.86); margin-bottom: 20px; }
.sb-howto-hero-btn {
    background: #fff;
    color: var(--sb-accent-ink);
    border-color: #fff;
    font-weight: 700;
    border-radius: var(--sb-radius);
    box-shadow: 0 2px 12px rgba(10,37,64,0.18);
}
.sb-howto-hero-btn:hover { background: #fff; color: var(--sb-accent); border-color: #fff; }
.sb-howto-steps { display: flex; flex-direction: column; gap: 16px; }
.sb-howto-card {
    border-radius: 12px;
    border: 1px solid var(--sb-line);
    background: var(--sb-paper);
    padding: 20px 24px;
    transition: box-shadow 0.15s ease;
}
.sb-howto-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.sb-howto-card--highlight { border-color: var(--sb-accent); background: var(--sb-accent-soft); }
.sb-howto-card--success { border-color: var(--sb-success); background: rgba(34,197,94,0.04); }
.sb-howto-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}
.sb-howto-index { width: 36px; }
.sb-howto-content { min-width: 0; padding-left: 6px; }
.sb-howto-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sb-accent);
    color: var(--sb-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: var(--sb-shadow-md);
}
.sb-howto-badge--success { background: var(--sb-success); }
.sb-howto-title { font-weight: 700; font-size: 1rem; color: var(--sb-ink); margin-bottom: 10px; }
.sb-howto-title--success { color: var(--sb-success); }
.sb-howto-bullets { display: flex; flex-direction: column; gap: 6px; }
.sb-howto-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--sb-ink-soft);
    line-height: 1.5;
}
.sb-howto-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-accent);
    flex-shrink: 0;
    margin-top: 7px;
    opacity: 0.7;
}
.sb-howto-dot--success { background: var(--sb-success); }