/* =====================================================================
   LINESTAR THEME - common skin for all CSHTML pages
   fantasysportsco.theme.css

   This file is the shared design system. It is loaded by
   Shared/NewLayoutWrapper.cshtml BEFORE every other stylesheet so that
   page CSS can consume its tokens and override its components.

   CONTENTS
     1. Design tokens (light theme on :root)
     2. Dark theme       [data-fsc-theme="dark"]  (+ "auto" variant)
     3. Text-size modes  [data-fsc-textsize="lg" | "xl"]
     4. Base / accessibility (focus, selection, scrollbars, motion)
     5. Typography helpers   .fsc-h1 .fsc-eyebrow .fsc-section-head ...
     6. Components            .fsc-card .fsc-btn .fsc-badge .fsc-table ...
     7. Utilities              .fsc-flex .fsc-grid-* .fsc-mono ...

   USAGE RULES
   - New page CSS should reference tokens: color: var(--fsc-text);
     background: var(--fsc-panel); border-color: var(--fsc-line);
     Pages that do this get dark mode and text scaling for free.
   - DNN wraps the whole page in a single <form>. EVERY <button> you
     write must have type="button" or clicking it posts the form and
     reloads the page. .fsc-btn styling does not protect you from that.
   - Components are opt-in classes (fsc- prefix). Nothing in this file
     restyles legacy selectors, so shipping it is safe; adoption is
     incremental per page.
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS - light theme (default)
   ===================================================================== */
:root {
    /* brand */
    --fsc-red: #E5252C;
    --fsc-red-deep: #C11B22;
    --fsc-red-soft: #FDE8E9;

    /* accents (data = blue, money/positive = green, ratings = gold) */
    --fsc-blue: #2563EB;
    --fsc-blue-soft: #DBEAFE;
    --fsc-green: #149A53;
    --fsc-green-soft: #D9F2E4;
    --fsc-gold: #B98A1F;
    --fsc-gold-soft: #FBF1DC;
    --fsc-danger: #D7434A;
    --fsc-danger-soft: #FBE3E4;

    /* bet direction (Over/Under) - intentionally NOT green/red, so green
       keeps meaning "good" and red keeps meaning "bad" everywhere else */
    --fsc-over: #D97706;        /* amber  - OVER  (up)   */
    --fsc-over-soft: #FCECCB;
    --fsc-under: #7C3AED;       /* violet - UNDER (down) */
    --fsc-under-soft: #ECE3FD;

    /* surfaces */
    --fsc-bg: #F2F4F8;          /* page background            */
    --fsc-panel: #FFFFFF;       /* cards / panels             */
    --fsc-panel-2: #F8FAFC;     /* raised / nested surface    */
    --fsc-line: #E4E8EE;        /* hairline borders           */
    --fsc-line-strong: #CBD2DC;

    /* ink */
    --fsc-text: #16202E;        /* primary text               */
    --fsc-text-soft: #5A6678;   /* secondary text             */
    --fsc-text-faint: #8A94A6;  /* hints / captions           */
    --fsc-text-invert: #FFFFFF;

    /* nav chrome (matches skin.css .BGTable) */
    --fsc-nav: #1E3A8A;
    --fsc-ink-deep: #16202E;    /* dark hero / masthead       */

    /* type */
    --fsc-font-body: 'Heebo', -apple-system, 'Segoe UI', sans-serif;
    --fsc-font-display: 'Archivo', 'Hellix', 'Heebo', sans-serif;
    --fsc-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* type scale - multiplied by the text-size mode (section 3).
       Use these for any text that should respect the user's size pref. */
    --fsc-text-scale: 1;
    --fsc-fs-xs: calc(11px * var(--fsc-text-scale));
    --fsc-fs-sm: calc(12.5px * var(--fsc-text-scale));
    --fsc-fs-base: calc(14px * var(--fsc-text-scale));
    --fsc-fs-md: calc(15.5px * var(--fsc-text-scale));
    --fsc-fs-lg: calc(18px * var(--fsc-text-scale));
    --fsc-fs-xl: calc(22px * var(--fsc-text-scale));
    --fsc-fs-2xl: calc(28px * var(--fsc-text-scale));
    --fsc-fs-3xl: calc(38px * var(--fsc-text-scale));

    /* shape + depth */
    --fsc-radius-sm: 8px;
    --fsc-radius: 12px;
    --fsc-radius-lg: 16px;
    --fsc-shadow-sm: 0 2px 6px rgba(22, 32, 46, .06);
    --fsc-shadow: 0 8px 22px rgba(22, 32, 46, .08);
    --fsc-shadow-lg: 0 18px 40px rgba(22, 32, 46, .14);

    /* spacing rhythm */
    --fsc-gap-xs: 4px;
    --fsc-gap-sm: 8px;
    --fsc-gap: 16px;
    --fsc-gap-lg: 24px;
    --fsc-gap-xl: 40px;

    /* motion */
    --fsc-ease: cubic-bezier(.2, .7, .3, 1);
    --fsc-speed: .15s;

    /* ------------------------------------------------------------------
       Compatibility bridge: the most useful names from the older
       (orphaned) site-skin.css --ls-* system, mapped onto these tokens
       so code written against either prefix resolves consistently.
       ------------------------------------------------------------------ */
    --ls-blue: var(--fsc-blue);
    --ls-navy: var(--fsc-nav);
    --ls-red: var(--fsc-red);
    --ls-success: var(--fsc-green);
    --ls-error: var(--fsc-danger);
    --ls-warning: var(--fsc-gold);
    --ls-font-primary: var(--fsc-font-body);
    --ls-font-display: var(--fsc-font-display);
    --ls-font-mono: var(--fsc-font-mono);
}


/* =====================================================================
   2. DARK THEME
   Activated by FSCTheme (fantasysportsco.theme.js) setting
   data-fsc-theme="dark" on <html>. The "auto" preference is RESOLVED
   to light/dark by FSCTheme (and by the early-apply snippet in the
   skin's Header.ascx), so this single selector is the only dark hook
   any stylesheet ever needs. Palette follows the night-navy design
   reference.
   ===================================================================== */
[data-fsc-theme="dark"] {
    --fsc-red: #FF4D55;
    --fsc-red-deep: #E5252C;
    --fsc-red-soft: rgba(255, 77, 85, .14);

    --fsc-blue: #4D8DFF;
    --fsc-blue-soft: rgba(77, 141, 255, .14);
    --fsc-green: #2EE36B;
    --fsc-green-soft: rgba(46, 227, 107, .12);
    --fsc-gold: #FFC83D;
    --fsc-gold-soft: rgba(255, 200, 61, .12);
    --fsc-danger: #FF5C5C;
    --fsc-danger-soft: rgba(255, 92, 92, .12);

    --fsc-over: #FBBF24;        /* amber  - OVER  */
    --fsc-over-soft: rgba(251, 191, 36, .16);
    --fsc-under: #A78BFA;       /* violet - UNDER */
    --fsc-under-soft: rgba(167, 139, 250, .18);

    --fsc-bg: #070C16;
    --fsc-panel: #0C1322;
    --fsc-panel-2: #101A2E;
    --fsc-line: rgba(150, 170, 205, .14);
    --fsc-line-strong: rgba(150, 170, 205, .30);

    --fsc-text: #E9EEF8;
    --fsc-text-soft: #94A0B8;
    --fsc-text-faint: #6B7489;
    --fsc-text-invert: #070C16;

    --fsc-nav: #0E1C43;
    --fsc-ink-deep: #070C16;

    --fsc-shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
    --fsc-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    --fsc-shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
}

/* UA chrome (scrollbars, form controls) flips dark ONLY inside adopted
   surfaces - putting color-scheme on the root would dark-flip scrollbars
   and select popups on legacy pages that still render light. */
[data-fsc-theme="dark"] .fsc-page { color-scheme: dark; }

/* NOTE: there is intentionally no [data-fsc-theme="auto"] block.
   FSCTheme resolves the "auto" preference to a concrete light/dark
   attribute value (and re-resolves when the OS preference changes),
   which keeps every dark rule in the codebase single-sourced. */

/* Pages that have adopted tokens opt into themed page chrome by adding
   class="fsc-page" to their outermost wrapper. Legacy pages without it
   are completely unaffected by the theme switch. */
.fsc-page {
    background: var(--fsc-bg);
    color: var(--fsc-text);
    font-family: var(--fsc-font-body);
}


/* =====================================================================
   3. TEXT-SIZE MODES
   FSCTheme sets data-fsc-textsize on <html>. Anything sized with the
   --fsc-fs-* tokens scales automatically.
   ===================================================================== */
[data-fsc-textsize="lg"] { --fsc-text-scale: 1.125; }
[data-fsc-textsize="xl"] { --fsc-text-scale: 1.25; }


/* =====================================================================
   4. BASE / ACCESSIBILITY
   ===================================================================== */

/* visible keyboard focus, consistent everywhere */
.fsc-page :focus-visible,
.fsc-btn:focus-visible,
.fsc-input:focus-visible,
.fsc-select:focus-visible,
.fsc-switch:focus-visible,
.fsc-tab:focus-visible {
    outline: 2px solid var(--fsc-blue) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

.fsc-page ::selection {
    background: var(--fsc-blue);
    color: #fff;
}

/* slim, theme-aware scrollbars on opted-in scroll regions */
.fsc-scroll-x,
.fsc-scroll-y {
    scrollbar-width: thin;
    scrollbar-color: var(--fsc-line-strong) transparent;
}
.fsc-scroll-x::-webkit-scrollbar,
.fsc-scroll-y::-webkit-scrollbar { height: 8px; width: 8px; }
.fsc-scroll-x::-webkit-scrollbar-thumb,
.fsc-scroll-y::-webkit-scrollbar-thumb {
    background: var(--fsc-line-strong);
    border-radius: 99px;
}

.fsc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fsc-scroll-y { overflow-y: auto; }

/* screen-reader-only helper */
.fsc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fsc-btn, .fsc-card, .fsc-switch, .fsc-switch::after,
    .fsc-segmented button, .fsc-tab, .fsc-skeleton {
        transition: none !important;
        animation: none !important;
    }
}


/* =====================================================================
   5. TYPOGRAPHY HELPERS
   ===================================================================== */
.fsc-h1 {
    font-family: var(--fsc-font-display);
    font-weight: 800;
    font-size: var(--fsc-fs-3xl);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fsc-text);
}

.fsc-h2 {
    font-family: var(--fsc-font-display);
    font-weight: 800;
    font-size: var(--fsc-fs-2xl);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--fsc-text);
}

.fsc-h3 {
    font-family: var(--fsc-font-body);
    font-weight: 700;
    font-size: var(--fsc-fs-xl);
    line-height: 1.25;
    color: var(--fsc-text);
}

/* small uppercase kicker above a heading */
.fsc-eyebrow {
    display: inline-block;
    font-family: var(--fsc-font-body);
    font-weight: 800;
    font-size: var(--fsc-fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fsc-red);
    margin-bottom: 8px;
}

.fsc-sub {
    font-size: var(--fsc-fs-md);
    color: var(--fsc-text-soft);
    line-height: 1.55;
}

/* eyebrow + title + sub as one block */
.fsc-section-head { margin-bottom: var(--fsc-gap-lg); }
.fsc-section-head .fsc-sub { max-width: 680px; margin-top: 6px; }

.fsc-mono {
    font-family: var(--fsc-font-mono);
    font-variant-numeric: tabular-nums;
}

.fsc-text-muted { color: var(--fsc-text-soft) !important; }
.fsc-text-faint { color: var(--fsc-text-faint) !important; }
.fsc-text-pos { color: var(--fsc-green) !important; }
.fsc-text-neg { color: var(--fsc-danger) !important; }
.fsc-text-gold { color: var(--fsc-gold) !important; }


/* =====================================================================
   6. COMPONENTS
   ===================================================================== */

/* ---------- Card ---------- */
.fsc-card {
    background: var(--fsc-panel);
    border: 1px solid var(--fsc-line);
    border-radius: var(--fsc-radius);
    box-shadow: var(--fsc-shadow-sm);
    padding: var(--fsc-gap);
    color: var(--fsc-text);
}

.fsc-card--lg { padding: var(--fsc-gap-lg); border-radius: var(--fsc-radius-lg); }

.fsc-card--hover {
    transition: transform var(--fsc-speed) var(--fsc-ease),
                box-shadow var(--fsc-speed) var(--fsc-ease),
                border-color var(--fsc-speed) var(--fsc-ease);
}
.fsc-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--fsc-shadow);
    border-color: var(--fsc-line-strong);
}

/* dark masthead band (hero / promo) regardless of theme */
.fsc-card--ink {
    background: linear-gradient(120deg, var(--fsc-ink-deep) 0%, #1F2D40 70%, #27374E 100%);
    border-color: rgba(150, 170, 205, .18);
    color: #E9EEF8;
}

/* ---------- Buttons ----------
   REMINDER: <button> inside DNN MUST be type="button". */
.fsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fsc-font-body);
    font-weight: 700;
    font-size: var(--fsc-fs-base);
    line-height: 1;
    letter-spacing: .01em;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--fsc-panel-2);
    color: var(--fsc-text);
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform var(--fsc-speed) var(--fsc-ease),
                box-shadow var(--fsc-speed) var(--fsc-ease),
                filter var(--fsc-speed) var(--fsc-ease),
                background var(--fsc-speed) var(--fsc-ease),
                border-color var(--fsc-speed) var(--fsc-ease);
}
.fsc-btn:hover { transform: translateY(-1px); }
.fsc-btn:active { transform: translateY(0); }
.fsc-btn[disabled], .fsc-btn.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.fsc-btn--primary {
    background: linear-gradient(135deg, var(--fsc-red), var(--fsc-red-deep));
    color: #fff;
    box-shadow: 0 4px 12px rgba(229, 37, 44, .30);
}
.fsc-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(229, 37, 44, .40); }

.fsc-btn--success {
    background: var(--fsc-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(20, 154, 83, .30);
}
.fsc-btn--success:hover { filter: brightness(1.08); }

.fsc-btn--ghost {
    background: transparent;
    border-color: var(--fsc-line);
    color: var(--fsc-text);
}
.fsc-btn--ghost:hover { border-color: var(--fsc-line-strong); background: var(--fsc-panel-2); }

.fsc-btn--danger {
    background: transparent;
    border-color: var(--fsc-danger);
    color: var(--fsc-danger);
}
.fsc-btn--danger:hover { background: var(--fsc-danger-soft); }

.fsc-btn--sm { padding: 7px 13px; font-size: var(--fsc-fs-sm); border-radius: var(--fsc-radius-sm); }
.fsc-btn--lg { padding: 14px 28px; font-size: var(--fsc-fs-lg); border-radius: var(--fsc-radius); }

/* ---------- Badges / pills ---------- */
.fsc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: var(--fsc-fs-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--fsc-panel-2);
    border: 1px solid var(--fsc-line);
    color: var(--fsc-text-soft);
    white-space: nowrap;
}
.fsc-badge--red    { background: var(--fsc-red-soft);    border-color: transparent; color: var(--fsc-red); }
.fsc-badge--green  { background: var(--fsc-green-soft);  border-color: transparent; color: var(--fsc-green); }
.fsc-badge--blue   { background: var(--fsc-blue-soft);   border-color: transparent; color: var(--fsc-blue); }
.fsc-badge--gold   { background: var(--fsc-gold-soft);   border-color: transparent; color: var(--fsc-gold); }
.fsc-badge--danger { background: var(--fsc-danger-soft); border-color: transparent; color: var(--fsc-danger); }

/* live indicator dot */
.fsc-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--fsc-green);
    box-shadow: 0 0 8px var(--fsc-green);
    animation: fscPulse 1.6s infinite;
}
@keyframes fscPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Segmented control ---------- */
.fsc-segmented {
    display: inline-flex;
    background: var(--fsc-panel-2);
    border: 1px solid var(--fsc-line);
    border-radius: 9px;
    padding: 2px;
}
.fsc-segmented button {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-family: var(--fsc-font-body);
    font-weight: 600;
    font-size: var(--fsc-fs-sm);
    line-height: 16px;
    color: var(--fsc-text-soft);
    padding: 6px 14px;
    cursor: pointer;
    transition: background var(--fsc-speed) var(--fsc-ease), color var(--fsc-speed) var(--fsc-ease);
}
.fsc-segmented button:hover { color: var(--fsc-text); }
.fsc-segmented button.is-active {
    background: var(--fsc-panel);
    color: var(--fsc-text);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .15);
}

/* ---------- Toggle switch (CSS only, knob slides on .is-on) ---------- */
.fsc-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 40px; height: 22px;
    border: 0;
    border-radius: 999px;
    background: var(--fsc-line-strong);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background var(--fsc-speed) ease;
}
.fsc-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .25);
    transition: transform var(--fsc-speed) ease;
}
.fsc-switch.is-on { background: var(--fsc-blue); }
.fsc-switch.is-on::after { transform: translateX(18px); }

/* ---------- Tabs ---------- */
.fsc-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--fsc-line);
}
.fsc-tab {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 7px 2px 10px;
    font-family: var(--fsc-font-body);
    font-weight: 600;
    font-size: var(--fsc-fs-base);
    color: var(--fsc-text-soft);
    cursor: pointer;
}
.fsc-tab:hover { color: var(--fsc-text); }
.fsc-tab.is-active { color: var(--fsc-text); border-bottom-color: var(--fsc-red); }

/* ---------- Inputs ---------- */
.fsc-input, .fsc-select {
    font-family: var(--fsc-font-body);
    font-size: var(--fsc-fs-base);
    color: var(--fsc-text);
    background: var(--fsc-panel);
    border: 1px solid var(--fsc-line-strong);
    border-radius: var(--fsc-radius-sm);
    padding: 9px 12px;
    transition: border-color var(--fsc-speed) ease, box-shadow var(--fsc-speed) ease;
}
.fsc-input::placeholder { color: var(--fsc-text-faint); }
.fsc-input:focus, .fsc-select:focus {
    border-color: var(--fsc-blue);
    box-shadow: 0 0 0 3px var(--fsc-blue-soft) !important;
}

/* ---------- Data table ----------
   Readability-first table for the stat-heavy pages.
     .fsc-table              base
     .fsc-table--compact     tighter rows for dense screens
     .fsc-table--sticky      sticky header (scroll container needed)
     td.is-num               right-aligned tabular numerals
     td.is-pos / td.is-neg   green / red values
     tr.is-highlight         emphasized row                              */
.fsc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fsc-panel);
    color: var(--fsc-text);
    font-size: var(--fsc-fs-base);
}
.fsc-table th, .fsc-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--fsc-line);
}
.fsc-table thead th {
    font-size: var(--fsc-fs-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fsc-text-soft);
    background: var(--fsc-panel-2);
    border-bottom: 2px solid var(--fsc-line-strong);
    white-space: nowrap;
}
/* Sticky header needs a height-constrained vertical scroll container
   around the table (e.g. a .fsc-scroll-y with a max-height). It does
   NOT engage inside .fsc-table-wrap, whose overflow-x:auto makes it
   the (never-scrolling) scroll container. Borders are restructured to
   separate + inset shadow so the header line travels when stuck. */
.fsc-table--sticky {
    border-collapse: separate;
    border-spacing: 0;
}
.fsc-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: none;
    box-shadow: inset 0 -2px 0 var(--fsc-line-strong);
}
.fsc-table tbody tr:nth-child(even) td { background: var(--fsc-panel-2); }
.fsc-table td.is-num, .fsc-table th.is-num {
    text-align: right;
    font-family: var(--fsc-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fsc-fs-sm);
}
.fsc-table td.is-pos { color: var(--fsc-green); font-weight: 600; }
.fsc-table td.is-neg { color: var(--fsc-danger); font-weight: 600; }
/* highlight outranks zebra (same specificity, later in source);
   hover stays last so interactive feedback wins over both */
.fsc-table tbody tr.is-highlight td {
    background: var(--fsc-gold-soft);
    border-bottom-color: var(--fsc-gold);
}
.fsc-table tbody tr:hover td { background: var(--fsc-blue-soft); }
.fsc-table--compact th, .fsc-table--compact td { padding: 6px 9px; }

/* wrap a table for horizontal scroll on small screens */
.fsc-table-wrap {
    border: 1px solid var(--fsc-line);
    border-radius: var(--fsc-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fsc-table-wrap .fsc-table { min-width: 640px; }
.fsc-table-wrap .fsc-table th:first-child,
.fsc-table-wrap .fsc-table td:first-child { padding-left: 16px; }

/* ---------- Stat block (value over label) ---------- */
.fsc-stat { text-align: center; }
.fsc-stat .fsc-stat-val {
    font-family: var(--fsc-font-display);
    font-weight: 800;
    font-size: var(--fsc-fs-xl);
    line-height: 1.1;
    color: var(--fsc-text);
    font-variant-numeric: tabular-nums;
}
.fsc-stat .fsc-stat-lbl {
    font-size: var(--fsc-fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fsc-text-soft);
    margin-top: 2px;
}

/* ---------- Inline alerts ---------- */
.fsc-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--fsc-radius-sm);
    border: 1px solid var(--fsc-line);
    background: var(--fsc-panel-2);
    color: var(--fsc-text);
    font-size: var(--fsc-fs-base);
    padding: 12px 14px;
}
.fsc-alert--info    { background: var(--fsc-blue-soft);   border-color: var(--fsc-blue); }
.fsc-alert--success { background: var(--fsc-green-soft);  border-color: var(--fsc-green); }
.fsc-alert--warn    { background: var(--fsc-gold-soft);   border-color: var(--fsc-gold); }
.fsc-alert--danger  { background: var(--fsc-danger-soft); border-color: var(--fsc-danger); }

/* ---------- Skeleton shimmer ---------- */
.fsc-skeleton {
    background: linear-gradient(90deg, var(--fsc-panel-2) 25%, var(--fsc-line) 50%, var(--fsc-panel-2) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: fscShimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
}
@keyframes fscShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Divider ---------- */
.fsc-divider {
    border: 0;
    border-top: 1px solid var(--fsc-line) !important;
    margin: var(--fsc-gap) 0 !important;
}


/* =====================================================================
   7. LAYOUT UTILITIES
   ===================================================================== */
.fsc-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fsc-gap);
    padding-right: var(--fsc-gap);
}

.fsc-flex        { display: flex; align-items: center; gap: var(--fsc-gap-sm); }
.fsc-flex-col    { display: flex; flex-direction: column; gap: var(--fsc-gap-sm); }
.fsc-flex-wrap   { flex-wrap: wrap; }
.fsc-flex-between{ justify-content: space-between; }
.fsc-flex-center { justify-content: center; }
.fsc-grow        { flex: 1 1 auto; min-width: 0; }

.fsc-grid-2, .fsc-grid-3, .fsc-grid-4 { display: grid; gap: var(--fsc-gap); }
.fsc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fsc-gap-xs { gap: var(--fsc-gap-xs); }
.fsc-gap-sm { gap: var(--fsc-gap-sm); }
.fsc-gap-lg { gap: var(--fsc-gap-lg); }

.fsc-mt-0  { margin-top: 0 !important; }
.fsc-mt-sm { margin-top: var(--fsc-gap-sm) !important; }
.fsc-mt    { margin-top: var(--fsc-gap) !important; }
.fsc-mt-lg { margin-top: var(--fsc-gap-lg) !important; }
.fsc-mb-sm { margin-bottom: var(--fsc-gap-sm) !important; }
.fsc-mb    { margin-bottom: var(--fsc-gap) !important; }
.fsc-mb-lg { margin-bottom: var(--fsc-gap-lg) !important; }

.fsc-hide        { display: none !important; }
.fsc-text-center { text-align: center !important; }
.fsc-text-right  { text-align: right !important; }

/* responsive helpers
   .fsc-hide-mobile        hidden at <=640px
   .fsc-hide-desktop       hidden above 640px, block on mobile
   .fsc-hide-desktop--flex / --inline   same, but revealed as
                           flex / inline-block (UA default display is
                           NOT restored - pick the variant you need) */
.fsc-hide-mobile  { }
.fsc-hide-desktop,
.fsc-hide-desktop--flex,
.fsc-hide-desktop--inline { display: none !important; }

@media (max-width: 900px) {
    .fsc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fsc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .fsc-grid-2, .fsc-grid-3, .fsc-grid-4 { grid-template-columns: 1fr; }
    .fsc-hide-mobile  { display: none !important; }
    .fsc-hide-desktop { display: block !important; }
    .fsc-hide-desktop--flex { display: flex !important; }
    .fsc-hide-desktop--inline { display: inline-block !important; }
    .fsc-container { padding-left: 12px; padding-right: 12px; }
    .fsc-h1 { font-size: var(--fsc-fs-2xl); }
}

/* =====================================================================
   ACCOUNT MENU (skin: .userProperties / .userName / ul.userMenu)
   Modern refresh + light/dark support. Lives here rather than skin.css
   because this file loads on every page WITH a ?v= cache-bust, and it
   carries the --fsc-* tokens the dropdown needs. Selectors are doubled
   up (.userProperties .userName ...) to out-weigh the skin's rules
   without !important where possible.
   ===================================================================== */

/* ---- trigger pill ----
   The header band is the same navy in both themes, so the trigger stays
   light-on-dark; it just gains a real pill affordance. */
/* background/color/border are forced: the skin sets "background:none" on
   .userName > a, and the control also carries .LoginLink (which paints a
   white background on hover) - both would otherwise strip the pill */
.userProperties a.userDataWrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .14s ease, border-color .14s ease;
}
.userProperties a.userDataWrapper:hover,
.userProperties a.userDataWrapper:focus,
.userProperties a.userDataWrapper.active {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .32) !important;
    color: #fff !important;
}
/* the skin's A:Link/A:Visited rules also target descendants ("a *") */
.userProperties a.userDataWrapper * { color: #fff !important; }
.userProperties a.userDataWrapper:focus-visible {
    outline: 2px solid var(--fsc-blue, #4D8DFF);
    outline-offset: 2px;
}
.userProperties .userNameText {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}
/* chevron: inherit the trigger's color and rotate when the menu is open
   (the skin's PNG chevron is replaced by a CSS caret so it can follow
   currentColor and animate) */
.userProperties a.userDataWrapper .dropDownChevronWhite {
    width: 0;
    height: 0;
    margin: 0 2px 0 0;
    float: none;
    flex: 0 0 auto;
    background: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .8;
    transition: transform .16s ease;
}
.userProperties a.userDataWrapper.active .dropDownChevronWhite { transform: rotate(180deg); }

/* ---- dropdown panel ---- */
.userProperties ul.userMenu {
    top: 100%;
    margin: 8px 0 0;
    padding: 6px;
    min-width: 190px;
    max-width: 280px;
    background: var(--fsc-panel, #fff);
    border: 1px solid var(--fsc-line-strong, #CBD2DC);
    border-radius: 12px;
    box-shadow: var(--fsc-shadow, 0 12px 28px rgba(15, 23, 42, .18));
    /* the skin declared animation-delay/fill-mode with no animation-name;
       harmless but pointless - neutralize so nothing can latch onto it */
    animation: none;
}
.userProperties ul.userMenu li { list-style: none; }
.userProperties li.userNotifications,
.userProperties li.userProfilename { border-bottom: 1px solid var(--fsc-line, #E4E8EE); }
/* every state pinned: the skin's "A:Link, A:Visited, A:Active, a *" rule
   paints anchors #3B82F6, and .active (which the old JS mistakenly put on
   these items) has its own teal rule */
.userProperties ul.userMenu a,
.userProperties ul.userMenu a:link,
.userProperties ul.userMenu a:visited,
.userProperties ul.userMenu a:active,
.userProperties ul.userMenu a.active {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--fsc-text, #16202E) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: background-color .12s ease, color .12s ease;
}
.userProperties ul.userMenu a strong,
.userProperties ul.userMenu a * { color: inherit !important; font-weight: 700; }
.userProperties ul.userMenu li:hover > a,
.userProperties ul.userMenu li:hover > a strong,
.userProperties ul.userMenu a:hover,
.userProperties ul.userMenu a:focus-visible {
    background: var(--fsc-panel-2, #F1F5F9) !important;
    color: var(--fsc-blue, #2563EB) !important;
}
/* last item (Logout) reads as the destructive/exit action */
.userProperties ul.userMenu li:last-child > a { padding-top: 9px; }
.userProperties ul.userMenu li.userLogout > a,
.userProperties ul.userMenu li.userLogout > a:link,
.userProperties ul.userMenu li.userLogout > a:visited,
.userProperties ul.userMenu li.userLogout > a strong {
    color: var(--fsc-danger, #D7434A) !important;
}
.userProperties ul.userMenu li.userLogout:hover > a,
.userProperties ul.userMenu li.userLogout:hover > a strong,
.userProperties ul.userMenu li.userLogout > a:hover {
    background: var(--fsc-danger-soft, #FBE3E4) !important;
    color: var(--fsc-danger, #D7434A) !important;
}
/* separator above Logout instead of the old dotted borders */
.userProperties ul.userMenu li.userLogout {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--fsc-line, #E4E8EE);
}

/* phones: the skin pins the panel with position:fixed - keep it clear of
   the header and let it size to the viewport */
@media only screen and (max-width: 767px) {
    .userProperties ul.userMenu {
        right: 8px;
        left: auto !important;
        min-width: 200px;
    }
}