/* =============================================================================
   fs-ui.css  -  Fantasy Simmer's own UI layer

   Replaces Bootstrap (Bootswatch Slate 5.0.1 + the Bootstrap 4.6.1 CDN script).
   Every class implemented here was found in use in the Angular templates under
   ClientApp/src/app or the Razor views under Views/, so nothing is carried for
   the sake of completeness.

   THIS IS THE ONLY STYLESHEET:

       <link href="~/lib/fs-ui/fs-ui.css" rel="stylesheet" />
       <script src="~/lib/fs-ui/fs-ui.js" defer></script>

   lib/fs-styles/FsStyles.css was merged in on 2026-08-13 and deleted - its live
   rules are section 20, its tokens and body font are in sections 1 and 2, and
   its brand buttons are part of section 8. The two-file arrangement existed so
   fs-ui could replace Bootstrap underneath FsStyles without disturbing it, and
   that job is done. What it left behind was one set of tokens declared twice and
   a .btn radius set in one file and overridden in the other.

   Recover the original from git if anything looks missing:
       git show 1f26ab9b:FantasySimmer/wwwroot/app/lib/fs-styles/FsStyles.css

   Behaviour lives in fs-ui.js. It reads the same Bootstrap 4 data attributes
   the markup already carries (data-toggle, data-target, data-parent,
   data-dismiss), so no template needed editing to switch over.

   Sections:
       1  Tokens
       2  Reset and base elements
       3  Typography
       4  Containers and grid
       5  Spacing utilities
       6  Display, flex and sizing utilities
       7  Text, colour and border utilities
       8  Buttons
       9  Cards
      10  Tables
      11  Forms
      12  Modals
      13  Collapse and accordion
      14  Alerts and badges
      15  List groups
      16  Nav and navbar
      17  Pagination
      18  Spinners
      19  Jumbotron
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1  Tokens

   The palette is the current one, pulled apart and given more room. Bootswatch
   Slate put the page at #272b30 and cards at #32383e - six points of luminance
   between them, which is why the layout reads as one flat grey sheet no matter
   how the cards are styled. The page is dropped to #15181c here and the card
   surface left where FsStyles already has it, so elevation does the work that
   borders were being asked to do.

   Accents are pulled off Bootstrap's defaults, which are the single loudest
   tell of a Bootstrap site: #0d6efd blue, #198754 green and #0dcaf0 cyan are
   replaced with slightly desaturated versions that sit on a dark ground without
   vibrating.
   ----------------------------------------------------------------------------- */
:root {
    /* Brand. Also declared in FsStyles.css, which wins - kept here so this file
       is usable on its own. */
    --fs-orange: #db5901;
    --fs-orange-bright: #f0730f;
    --fs-orange-deep: #b94a01;
    --fs-orange-soft: rgba(219, 89, 1, 0.28);

    --fs-red: #de4b4b;
    --fs-red-bright: #e9322d;
    --fs-red-deep: #c22b26;
    --fs-red-soft: rgba(222, 75, 75, 0.28);

    /* Surfaces. --fs-bg and --fs-surface-sunken are new; the other two are
       FsStyles' values, repeated. */
    --fs-bg: #15181c;
    --fs-surface: #2f343a;
    --fs-surface-raised: #363c43;
    --fs-surface-sunken: #1b1f24;

    --fs-line: rgba(255, 255, 255, 0.11);
    --fs-line-strong: rgba(255, 255, 255, 0.2);

    --fs-text: #c8ccd0;
    --fs-text-dim: #8f969d;
    --fs-text-bright: #eef1f4;

    /* Accents.

       "primary" is a charcoal, not a blue, and that is deliberate. Bootswatch
       Slate set --bs-primary to #3a3f44, so on this site .bg-primary has always
       meant "a slightly darker panel" - it is used that way on the draft
       selection card bodies and on the draft board's <thead>. Recolouring it to
       a real blue turned both of those into loud blue slabs. The value below is
       Slate's, restored.

       If something needs to shout, it uses the brand orange. That is what the
       orange is for. */
    --fs-primary: #3a3f44;
    --fs-primary-bright: #4b5157;
    --fs-primary-deep: #2e3236;

    /* .text-primary needs to be readable, and #3a3f44 on a #15181c page is not.
       Slate had this problem too - .text-primary was effectively invisible - so
       text gets a light neutral rather than the surface colour. */
    --fs-primary-text: #a7b0b8;

    --fs-secondary: #5b636c;
    --fs-secondary-bright: #6d757f;
    --fs-secondary-deep: #474e56;

    --fs-success: #3fb26a;
    --fs-success-bright: #4fc77c;
    --fs-success-deep: #2f9155;

    --fs-info: #35aec2;
    --fs-info-bright: #48c2d6;
    --fs-info-deep: #268da0;

    --fs-warning: #dfa229;
    --fs-warning-bright: #eeb443;
    --fs-warning-deep: #bb851b;

    --fs-danger: #e05252;
    --fs-danger-bright: #ea6a6a;
    --fs-danger-deep: #bf3c3c;

    --fs-light: #d5d9de;
    --fs-dark: #1b1f24;

    /* Shape. --fs-radius and --fs-radius-lg came from FsStyles. */
    --fs-radius-sm: 0.375rem;
    --fs-radius: 0.75rem;
    --fs-radius-lg: 1rem;
    --fs-radius-pill: 50rem;

    /* Controls are sharper than surfaces, and deliberately so. A card is a piece
       of paper on the page and can afford 1rem; a button is an instrument
       control sitting inside a grid of pick numbers, and 0.75rem on something
       28px tall is most of its height. See section 8. */
    --fs-radius-control: 3px;

    --fs-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.28);
    --fs-shadow-lift: 0 0.85rem 1.6rem rgba(0, 0, 0, 0.42);
    --fs-shadow-sm: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.3);

    --fs-ease: 160ms cubic-bezier(0.2, 0, 0.2, 1);

    /* Grid gutter, read by .row and its children. */
    --fs-gutter: 1.5rem;

    /* Focus. Bootstrap's focus state is a 0.25rem translucent glow that reads as
       a smudge. A 2px ring held off the element by 2px is sharper and easier to
       see against a dark background.

       The ring is orange, not --fs-primary: primary is a charcoal here, and a
       charcoal ring on a #15181c page is no ring at all. */
    --fs-focus-ring: 0 0 0 2px var(--fs-bg), 0 0 0 4px var(--fs-orange);
}

/* Anyone who has asked their OS to stop animating things gets no motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -----------------------------------------------------------------------------
   2  Reset and base elements

   A short reset rather than a full normalize. The old stack loaded Bootstrap's
   reboot, which resets a great deal the site never uses.
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: var(--fs-bg);
    color: var(--fs-text);
    font-size: 1rem;
    /* Bootstrap's 1.5, not the roomier 1.55 this file first used. Line height
       multiplies: the draft board stacks three <p> per cell across a full grid,
       and the extra 0.05 showed up there as visibly puffier boxes. */
    line-height: 1.5;
    /* Bahnschrift is a DIN - the language of signage, scoreboards and technical
       panels - which is why the buttons in section 8 are set tight and small
       rather than fighting it. Moved here from FsStyles when the two files were
       merged; the system stack is the fallback where Bahnschrift is absent. */
    font-family: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow",
                 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}

/* Controls do not inherit the page font on their own. */
button,
input,
select,
textarea {
    font-family: inherit;
}

hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--fs-line);
    opacity: 1;
}

img,
svg,
video {
    vertical-align: middle;
}

a {
    color: var(--fs-orange);
    text-decoration: none;
    transition: color var(--fs-ease);
}

a:hover {
    color: var(--fs-orange-bright);
    text-decoration: underline;
}

/* One focus treatment for everything, and only for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--fs-focus-ring);
    border-radius: var(--fs-radius-sm);
}

/* Form controls do not inherit the page font by default. */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

button {
    cursor: pointer;
}

button,
[role="button"] {
    -webkit-appearance: button;
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--fs-orange-soft);
    color: var(--fs-text-bright);
}


/* -----------------------------------------------------------------------------
   3  Typography

   Headings are tightened. Bootstrap ships 1.2 line-height and default letter
   spacing on every heading, which at h1 size leaves display text looking loose.
   The scale below is slightly flatter at the top and negatively tracked, which
   is most of what separates a 2026 heading from a 2016 one.
   ----------------------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--fs-text-bright);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: clamp(1.85rem, 1.35rem + 1.6vw, 2.6rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; letter-spacing: -0.01em; }
h5, .h5 { font-size: 1.1rem; letter-spacing: 0; }
h6, .h6 { font-size: 1rem; letter-spacing: 0; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

small, .small {
    font-size: 0.875em;
}

b, strong {
    font-weight: 600;
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
}

code {
    color: var(--fs-orange-bright);
}

/* Bootstrap's .sr-only (4) and .visually-hidden (5). Both are in the markup. */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* -----------------------------------------------------------------------------
   4  Containers and grid

   A 12 column flex grid, gutter-driven, matching Bootstrap's breakpoints and
   container widths so no existing layout shifts.

   col-xs-* and offset-xs-* are Bootstrap 3 names. They appear in the markup
   (col-xs-8, col-xs-12, offset-xs-2) and have done nothing at all since the
   site moved to Bootstrap 4, because those classes do not exist in 4 or 5.
   They are aliased to the unprefixed versions here, which is what the markup
   plainly intended. That is a behaviour change: those elements will now be
   sized where before they were full width.
   ----------------------------------------------------------------------------- */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: 100%;
    padding-right: calc(var(--fs-gutter) * 0.5);
    padding-left: calc(var(--fs-gutter) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container, .container-sm { max-width: 540px; }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 720px; }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1320px; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--fs-gutter) * -0.5);
    margin-left: calc(var(--fs-gutter) * -0.5);
}

/* `.row > *` rather than `.row > [class^="col"]`, for two reasons. It is what
   Bootstrap does, so every existing layout was authored against it - including
   the rows in the footer and the draft board that hold bare <div>s. And an
   attribute selector would score (0,2,0), out-specifying .col-4 at (0,1,0) and
   forcing every column in the site to 100% width. Source order is what lets the
   column widths below win, so they must stay after this rule. */
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--fs-gutter) * 0.5);
    padding-left: calc(var(--fs-gutter) * 0.5);
}

.col,
.col-xs {
    flex: 1 0 0%;
    width: auto;
}

.col-auto { flex: 0 0 auto; width: auto; }

.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

.offset-1  { margin-left: 8.33333333%; }
.offset-2  { margin-left: 16.66666667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.33333333%; }
.offset-5  { margin-left: 41.66666667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.33333333%; }
.offset-8  { margin-left: 66.66666667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.33333333%; }
.offset-11 { margin-left: 91.66666667%; }

.offset-xs-1  { margin-left: 8.33333333%; }
.offset-xs-2  { margin-left: 16.66666667%; }
.offset-xs-3  { margin-left: 25%; }
.offset-xs-4  { margin-left: 33.33333333%; }
.offset-xs-5  { margin-left: 41.66666667%; }

@media (min-width: 576px) {
    .col-sm { flex: 1 0 0%; width: auto; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-sm-3  { flex: 0 0 auto; width: 25%; }
    .col-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-sm-6  { flex: 0 0 auto; width: 50%; }
    .col-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9  { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
    .offset-sm-0  { margin-left: 0; }
    .offset-sm-1  { margin-left: 8.33333333%; }
    .offset-sm-2  { margin-left: 16.66666667%; }
    .offset-sm-3  { margin-left: 25%; }
    .offset-sm-4  { margin-left: 33.33333333%; }
    .offset-sm-5  { margin-left: 41.66666667%; }
}

@media (min-width: 768px) {
    .col-md { flex: 1 0 0%; width: auto; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9  { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
    .offset-md-0  { margin-left: 0; }
    .offset-md-1  { margin-left: 8.33333333%; }
    .offset-md-2  { margin-left: 16.66666667%; }
    .offset-md-3  { margin-left: 25%; }
    .offset-md-4  { margin-left: 33.33333333%; }
    .offset-md-5  { margin-left: 41.66666667%; }
    .offset-md-6  { margin-left: 50%; }
    .offset-md-10 { margin-left: 83.33333333%; }
}

@media (min-width: 992px) {
    .col-lg { flex: 1 0 0%; width: auto; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .offset-lg-0 { margin-left: 0; }
    .offset-lg-1 { margin-left: 8.33333333%; }
    .offset-lg-2 { margin-left: 16.66666667%; }
    .offset-lg-3 { margin-left: 25%; }
    .offset-lg-4 { margin-left: 33.33333333%; }
    .offset-lg-5 { margin-left: 41.66666667%; }
}

@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0%; width: auto; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3  { flex: 0 0 auto; width: 25%; }
    .col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6  { flex: 0 0 auto; width: 50%; }
    .col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9  { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
    .offset-xl-0 { margin-left: 0; }
    .offset-xl-3 { margin-left: 25%; }
    .offset-xl-4 { margin-left: 33.33333333%; }
    .offset-xl-5 { margin-left: 41.66666667%; }
}


/* -----------------------------------------------------------------------------
   5  Spacing utilities

   Bootstrap's 0/.25/.5/1/1.5/3rem scale, kept exactly, because the markup is
   dense with m-1 p-1 and changing the scale would move every page at once.

   Both the Bootstrap 4 (ml-, mr-) and Bootstrap 5 (ms-, me-) directional names
   are supported. The markup uses the 5 names, but the 4 names cost two lines
   each and the site has a long history of both.
   ----------------------------------------------------------------------------- */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

.ms-0, .ml-0 { margin-left: 0; }
.ms-1, .ml-1 { margin-left: 0.25rem; }
.ms-2, .ml-2 { margin-left: 0.5rem; }
.ms-3, .ml-3 { margin-left: 1rem; }
.ms-4, .ml-4 { margin-left: 1.5rem; }
.ms-5, .ml-5 { margin-left: 3rem; }
.ms-auto, .ml-auto { margin-left: auto; }

.me-0, .mr-0 { margin-right: 0; }
.me-1, .mr-1 { margin-right: 0.25rem; }
.me-2, .mr-2 { margin-right: 0.5rem; }
.me-3, .mr-3 { margin-right: 1rem; }
.me-4, .mr-4 { margin-right: 1.5rem; }
.me-5, .mr-5 { margin-right: 3rem; }
.me-auto, .mr-auto { margin-right: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

.ps-0, .pl-0 { padding-left: 0; }
.ps-1, .pl-1 { padding-left: 0.25rem; }
.ps-2, .pl-2 { padding-left: 0.5rem; }
.ps-3, .pl-3 { padding-left: 1rem; }
.ps-4, .pl-4 { padding-left: 1.5rem; }
.ps-5, .pl-5 { padding-left: 3rem; }

.pe-0, .pr-0 { padding-right: 0; }
.pe-1, .pr-1 { padding-right: 0.25rem; }
.pe-2, .pr-2 { padding-right: 0.5rem; }
.pe-3, .pr-3 { padding-right: 1rem; }
.pe-4, .pr-4 { padding-right: 1.5rem; }
.pe-5, .pr-5 { padding-right: 3rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* Responsive spacing at sm, md and lg. xl is deliberately absent: no template
   uses an xl spacing utility, and the grid already covers xl layout. */
@media (min-width: 576px) {
    .m-sm-0 { margin: 0; } .m-sm-1 { margin: 0.25rem; } .m-sm-2 { margin: 0.5rem; } .m-sm-3 { margin: 1rem; } .m-sm-4 { margin: 1.5rem; } .m-sm-5 { margin: 3rem; } .m-sm-auto { margin: auto; }
    .mt-sm-0 { margin-top: 0; } .mt-sm-1 { margin-top: 0.25rem; } .mt-sm-2 { margin-top: 0.5rem; } .mt-sm-3 { margin-top: 1rem; } .mt-sm-4 { margin-top: 1.5rem; } .mt-sm-5 { margin-top: 3rem; }
    .mb-sm-0 { margin-bottom: 0; } .mb-sm-1 { margin-bottom: 0.25rem; } .mb-sm-2 { margin-bottom: 0.5rem; } .mb-sm-3 { margin-bottom: 1rem; } .mb-sm-4 { margin-bottom: 1.5rem; } .mb-sm-5 { margin-bottom: 3rem; }
    .ms-sm-0, .ml-sm-0 { margin-left: 0; } .ms-sm-1, .ml-sm-1 { margin-left: 0.25rem; } .ms-sm-2, .ml-sm-2 { margin-left: 0.5rem; } .ms-sm-3, .ml-sm-3 { margin-left: 1rem; } .ms-sm-auto, .ml-sm-auto { margin-left: auto; }
    .me-sm-0, .mr-sm-0 { margin-right: 0; } .me-sm-1, .mr-sm-1 { margin-right: 0.25rem; } .me-sm-2, .mr-sm-2 { margin-right: 0.5rem; } .me-sm-3, .mr-sm-3 { margin-right: 1rem; } .me-sm-auto, .mr-sm-auto { margin-right: auto; }
    .mx-sm-0 { margin-left: 0; margin-right: 0; } .mx-sm-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-sm-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-sm-3 { margin-left: 1rem; margin-right: 1rem; } .mx-sm-auto { margin-left: auto; margin-right: auto; }
    .my-sm-0 { margin-top: 0; margin-bottom: 0; } .my-sm-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-sm-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-sm-3 { margin-top: 1rem; margin-bottom: 1rem; }
    .p-sm-0 { padding: 0; } .p-sm-1 { padding: 0.25rem; } .p-sm-2 { padding: 0.5rem; } .p-sm-3 { padding: 1rem; } .p-sm-4 { padding: 1.5rem; } .p-sm-5 { padding: 3rem; }
    .pt-sm-0 { padding-top: 0; } .pt-sm-1 { padding-top: 0.25rem; } .pt-sm-2 { padding-top: 0.5rem; } .pt-sm-3 { padding-top: 1rem; }
    .pb-sm-0 { padding-bottom: 0; } .pb-sm-1 { padding-bottom: 0.25rem; } .pb-sm-2 { padding-bottom: 0.5rem; } .pb-sm-3 { padding-bottom: 1rem; }
    .px-sm-0 { padding-left: 0; padding-right: 0; } .px-sm-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-sm-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-sm-3 { padding-left: 1rem; padding-right: 1rem; }
    .py-sm-0 { padding-top: 0; padding-bottom: 0; } .py-sm-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-sm-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-sm-3 { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (min-width: 768px) {
    .m-md-0 { margin: 0; } .m-md-1 { margin: 0.25rem; } .m-md-2 { margin: 0.5rem; } .m-md-3 { margin: 1rem; } .m-md-4 { margin: 1.5rem; } .m-md-5 { margin: 3rem; } .m-md-auto { margin: auto; }
    .mt-md-0 { margin-top: 0; } .mt-md-1 { margin-top: 0.25rem; } .mt-md-2 { margin-top: 0.5rem; } .mt-md-3 { margin-top: 1rem; } .mt-md-4 { margin-top: 1.5rem; } .mt-md-5 { margin-top: 3rem; }
    .mb-md-0 { margin-bottom: 0; } .mb-md-1 { margin-bottom: 0.25rem; } .mb-md-2 { margin-bottom: 0.5rem; } .mb-md-3 { margin-bottom: 1rem; } .mb-md-4 { margin-bottom: 1.5rem; } .mb-md-5 { margin-bottom: 3rem; }
    .ms-md-0, .ml-md-0 { margin-left: 0; } .ms-md-1, .ml-md-1 { margin-left: 0.25rem; } .ms-md-2, .ml-md-2 { margin-left: 0.5rem; } .ms-md-3, .ml-md-3 { margin-left: 1rem; } .ms-md-auto, .ml-md-auto { margin-left: auto; }
    .me-md-0, .mr-md-0 { margin-right: 0; } .me-md-1, .mr-md-1 { margin-right: 0.25rem; } .me-md-2, .mr-md-2 { margin-right: 0.5rem; } .me-md-3, .mr-md-3 { margin-right: 1rem; } .me-md-auto, .mr-md-auto { margin-right: auto; }
    .mx-md-0 { margin-left: 0; margin-right: 0; } .mx-md-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-md-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-md-3 { margin-left: 1rem; margin-right: 1rem; } .mx-md-auto { margin-left: auto; margin-right: auto; }
    .my-md-0 { margin-top: 0; margin-bottom: 0; } .my-md-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-md-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-md-3 { margin-top: 1rem; margin-bottom: 1rem; }
    .p-md-0 { padding: 0; } .p-md-1 { padding: 0.25rem; } .p-md-2 { padding: 0.5rem; } .p-md-3 { padding: 1rem; } .p-md-4 { padding: 1.5rem; } .p-md-5 { padding: 3rem; }
    .pt-md-0 { padding-top: 0; } .pt-md-1 { padding-top: 0.25rem; } .pt-md-2 { padding-top: 0.5rem; } .pt-md-3 { padding-top: 1rem; }
    .pb-md-0 { padding-bottom: 0; } .pb-md-1 { padding-bottom: 0.25rem; } .pb-md-2 { padding-bottom: 0.5rem; } .pb-md-3 { padding-bottom: 1rem; }
    .px-md-0 { padding-left: 0; padding-right: 0; } .px-md-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-md-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-md-3 { padding-left: 1rem; padding-right: 1rem; }
    .py-md-0 { padding-top: 0; padding-bottom: 0; } .py-md-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-md-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-md-3 { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (min-width: 992px) {
    .m-lg-0 { margin: 0; } .m-lg-1 { margin: 0.25rem; } .m-lg-2 { margin: 0.5rem; } .m-lg-3 { margin: 1rem; } .m-lg-4 { margin: 1.5rem; } .m-lg-5 { margin: 3rem; } .m-lg-auto { margin: auto; }
    .mt-lg-0 { margin-top: 0; } .mt-lg-1 { margin-top: 0.25rem; } .mt-lg-2 { margin-top: 0.5rem; } .mt-lg-3 { margin-top: 1rem; } .mt-lg-4 { margin-top: 1.5rem; } .mt-lg-5 { margin-top: 3rem; }
    .mb-lg-0 { margin-bottom: 0; } .mb-lg-1 { margin-bottom: 0.25rem; } .mb-lg-2 { margin-bottom: 0.5rem; } .mb-lg-3 { margin-bottom: 1rem; } .mb-lg-4 { margin-bottom: 1.5rem; } .mb-lg-5 { margin-bottom: 3rem; }
    .ms-lg-0, .ml-lg-0 { margin-left: 0; } .ms-lg-1, .ml-lg-1 { margin-left: 0.25rem; } .ms-lg-2, .ml-lg-2 { margin-left: 0.5rem; } .ms-lg-3, .ml-lg-3 { margin-left: 1rem; } .ms-lg-auto, .ml-lg-auto { margin-left: auto; }
    .me-lg-0, .mr-lg-0 { margin-right: 0; } .me-lg-1, .mr-lg-1 { margin-right: 0.25rem; } .me-lg-2, .mr-lg-2 { margin-right: 0.5rem; } .me-lg-3, .mr-lg-3 { margin-right: 1rem; } .me-lg-auto, .mr-lg-auto { margin-right: auto; }
    .mx-lg-0 { margin-left: 0; margin-right: 0; } .mx-lg-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-lg-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-lg-3 { margin-left: 1rem; margin-right: 1rem; } .mx-lg-auto { margin-left: auto; margin-right: auto; }
    .my-lg-0 { margin-top: 0; margin-bottom: 0; } .my-lg-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-lg-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-lg-3 { margin-top: 1rem; margin-bottom: 1rem; }
    .p-lg-0 { padding: 0; } .p-lg-1 { padding: 0.25rem; } .p-lg-2 { padding: 0.5rem; } .p-lg-3 { padding: 1rem; } .p-lg-4 { padding: 1.5rem; } .p-lg-5 { padding: 3rem; }
    .pt-lg-0 { padding-top: 0; } .pt-lg-1 { padding-top: 0.25rem; } .pt-lg-2 { padding-top: 0.5rem; } .pt-lg-3 { padding-top: 1rem; }
    .pb-lg-0 { padding-bottom: 0; } .pb-lg-1 { padding-bottom: 0.25rem; } .pb-lg-2 { padding-bottom: 0.5rem; } .pb-lg-3 { padding-bottom: 1rem; }
    .px-lg-0 { padding-left: 0; padding-right: 0; } .px-lg-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-lg-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-lg-3 { padding-left: 1rem; padding-right: 1rem; }
    .py-lg-0 { padding-top: 0; padding-bottom: 0; } .py-lg-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-lg-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-lg-3 { padding-top: 1rem; padding-bottom: 1rem; }
}


/* -----------------------------------------------------------------------------
   6  Display, flex and sizing utilities
   ----------------------------------------------------------------------------- */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-grid { display: grid; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-table { display: table; }
.d-table-row { display: table-row; }
.d-table-cell { display: table-cell; }

@media (min-width: 576px) {
    .d-sm-none { display: none; }
    .d-sm-inline-block { display: inline-block; }
    .d-sm-block { display: block; }
    .d-sm-flex { display: flex; }
}

@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-inline-block { display: inline-block; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-inline-block { display: inline-block; }
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none; }
    .d-xl-inline-block { display: inline-block; }
    .d-xl-block { display: block; }
    .d-xl-flex { display: flex; }
}

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }

.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }

.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }
.mw-100 { max-width: 100%; }
.mh-100 { max-height: 100%; }

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-static { position: static; }

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

.img-fluid {
    max-width: 100%;
    height: auto;
}


/* -----------------------------------------------------------------------------
   7  Text, colour and border utilities

   .text-left and .text-right are Bootstrap 3/4 names dropped in 5, and they are
   used 39 times across the Razor views and templates - so they have been doing
   nothing. They are implemented here alongside the 5 names.
   ----------------------------------------------------------------------------- */
.text-start, .text-left { text-align: left; }
.text-end, .text-right { text-align: right; }
.text-center { text-align: center; }

.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.text-capitalize { text-transform: capitalize; }

.text-nowrap { white-space: nowrap; }
.text-wrap { white-space: normal; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-break { word-wrap: break-word; word-break: break-word; }

.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fst-italic { font-style: italic; }

/* Numbers line up in columns. The site is mostly projections and point totals,
   and proportional digits make a column of them look ragged. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* The .bg-* utilities come FIRST and the .text-* colours after them, and the
   order is load-bearing. Both score (0,1,0), so whichever is written last wins.
   Several places in the app pair a background with an explicit text colour -
   `bg-info p-1 text-white`, `bg-warning mb-1 p-2 text-white` - and if .bg-info
   were declared last it would impose its own dark ink and quietly beat the
   .text-white the author asked for. */
.bg-primary { background-color: var(--fs-primary); color: #fff; }
.bg-secondary { background-color: var(--fs-secondary); color: #fff; }
.bg-success { background-color: var(--fs-success); color: #fff; }
.bg-info { background-color: var(--fs-info); color: #06232a; }
.bg-warning { background-color: var(--fs-warning); color: #241a02; }
.bg-danger { background-color: var(--fs-danger); color: #fff; }
.bg-light { background-color: var(--fs-surface-raised); color: var(--fs-text); }
.bg-dark { background-color: var(--fs-dark); color: var(--fs-text); }
.bg-transparent { background-color: transparent; }
.bg-body { background-color: var(--fs-bg); }
.bg-surface { background-color: var(--fs-surface); }

/* Text colours. After the backgrounds on purpose - see the note above. */
.text-primary { color: var(--fs-primary-text); }
.text-secondary { color: var(--fs-text-dim); }
.text-success { color: var(--fs-success-bright); }
.text-info { color: var(--fs-info-bright); }
.text-warning { color: var(--fs-warning-bright); }
.text-danger { color: var(--fs-danger-bright); }
.text-light { color: var(--fs-light); }
.text-dark { color: var(--fs-dark); }
.text-muted { color: var(--fs-text-dim); }
.text-white { color: #fff; }
.text-body { color: var(--fs-text); }
.text-reset { color: inherit; }

.border { border: 1px solid var(--fs-line); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--fs-line); }
.border-bottom { border-bottom: 1px solid var(--fs-line); }
.border-start, .border-left { border-left: 1px solid var(--fs-line); }
.border-end, .border-right { border-right: 1px solid var(--fs-line); }

.border-primary { border-color: var(--fs-primary); }
.border-secondary { border-color: var(--fs-secondary); }
.border-success { border-color: var(--fs-success); }
.border-info { border-color: var(--fs-info); }
.border-warning { border-color: var(--fs-warning); }
.border-danger { border-color: var(--fs-danger); }
.border-white { border-color: rgba(255, 255, 255, 0.75); }

.rounded { border-radius: var(--fs-radius); }
.rounded-0 { border-radius: 0; }
.rounded-sm { border-radius: var(--fs-radius-sm); }
.rounded-lg { border-radius: var(--fs-radius-lg); }
.rounded-circle { border-radius: 50%; }
.rounded-pill { border-radius: var(--fs-radius-pill); }

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--fs-shadow-sm); }
.shadow { box-shadow: var(--fs-shadow); }
.shadow-lg { box-shadow: var(--fs-shadow-lift); }

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* .fade / .show are the Bootstrap transition pair, used by modals and alerts.
   Outside a modal they are inert, which matches Bootstrap. */
.fade {
    transition: opacity var(--fs-ease);
}


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

   Rebuilt 2026-08-13. These are instrument controls, not calls to action.

   The site is a draft board: a dense grid of small labelled cells, set in
   Bahnschrift/DIN - a signage face. Controls that sit inside that grid should be
   the size and shape of the things around them. A button next to a pick number
   should look like it belongs to the same instrument as the pick number.

   WHAT WAS REMOVED, and why. Four effects were doing the "buttoney" work, and
   each one painted a light source onto a flat panel:

     - a gradient fill on the brand buttons
     - a 1px lit top edge on every button (.btn::after)
     - a drop shadow under the filled variants
     - a lift on hover (translateY(-1px) plus a bigger shadow)

   Geometry followed: radius 0.75rem -> 3px, font 1rem -> 0.8125rem, padding
   roughly halved.

   SEVEN FILLED COLOURS BECAME TWO. Bootstrap's palette had .btn-primary,
   -secondary, -success, -info, -warning, -danger and the two brand buttons all
   rendering as solid blocks, competing at equal volume across 212 buttons in the
   templates. That is the loudest remaining tell of a Bootstrap site, and it
   leaves a page with no primary action because everything is primary.

   Now: orange means DO THIS NOW. Red means destructive, or needs your account.
   Everything else keeps its hue as edge and text rather than a filled block, so
   .btn-success still reads as success and no template needed touching.

   THE MARKER is the one flourish - a 2px bar on the leading edge, worn only by
   the action you are meant to take now and by the option you have chosen. It is
   the mark a draft board puts beside the team on the clock, so it encodes
   something rather than decorating. Nothing else in the set carries it; that is
   what makes it legible.
   ----------------------------------------------------------------------------- */
.btn {
    /* inline-flex, so an icon and its label centre against each other without
       the line-height guesswork inline-block needs. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.3rem 0.72rem;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-radius-control);
    /* A bare .btn with no variant still has to look like a control. Transparent
       plus a hairline reads as a mistake on a dark page. */
    background-color: rgba(255, 255, 255, 0.045);
    color: var(--fs-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.045em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    /* Half these controls carry a seat number, a round or a draft position.
       Tabular figures stop them jittering as the numbers change. */
    font-variant-numeric: tabular-nums;
    transition: background-color 110ms linear, border-color 110ms linear,
                color 110ms linear;
}

.btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--fs-text-dim);
    color: var(--fs-text-bright);
    text-decoration: none;
}

/* No transform on press. The old set moved 1px down, which is a skeuomorphism
   that only makes sense on something that looked like a physical key. A flat
   control acknowledges the press by darkening, immediately. */
.btn:active {
    background-color: rgba(0, 0, 0, 0.25);
}

.btn:focus-visible {
    outline: 2px solid var(--fs-orange-bright);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Icons sit slightly below the cap height of the label and slightly quieter, so
   the word stays the thing being read. */
.btn > i,
.btn > .fa,
.btn > svg {
    font-size: 0.92em;
    opacity: 0.85;
}

.btn-sm {
    padding: 0.16rem 0.5rem;
    font-size: 0.72rem;
}

/* "Large" is still small. It is the emphatic control on a page, not a hero
   button - the old .btn-lg at 1.125rem was bigger than the body copy. */
.btn-lg {
    padding: 0.44rem 1.05rem;
    font-size: 0.9375rem;
}


/* --- The loud two -----------------------------------------------------------

   .btn-primary is folded in with the brand orange deliberately. Bootswatch
   Slate's primary was a charcoal (#3a3f44) which this file kept for .bg-primary
   and .text-primary, and those uses are unchanged - but a *button* asking to be
   pressed should be the brand colour, not a slightly darker panel.
   -------------------------------------------------------------------------- */
.btn-fs-orange,
.btn-primary {
    background-color: var(--fs-orange);
    border-color: var(--fs-orange-deep);
    color: #fff;
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.55);
}

.btn-fs-orange:hover,
.btn-primary:hover {
    background-color: var(--fs-orange-bright);
    border-color: var(--fs-orange-bright);
    color: #fff;
}

.btn-fs-orange:active,
.btn-primary:active {
    background-color: var(--fs-orange-deep);
}

.btn-danger,
.btn-fs-red {
    background-color: var(--fs-red-deep);
    border-color: var(--fs-red-deep);
    color: #fff;
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.45);
}

.btn-danger:hover,
.btn-fs-red:hover {
    background-color: var(--fs-red);
    border-color: var(--fs-red);
    color: #fff;
}

.btn-danger:active,
.btn-fs-red:active {
    background-color: #a82320;
}


/* --- The dimmed set ---------------------------------------------------------

   These ARE coloured buttons. They are not outlines.

   The first version of this section made them transparent with a hairline edge,
   and on a #15181c page that is nearly invisible - the colour was technically
   present and practically not. Corrected 2026-08-13.

   Each one is a three-part recipe at a fixed strength, so they read as one
   family rather than as separately-tuned colours:

       fill    the hue at 0.18 alpha  - enough to see the shape without a slab
       edge    the hue at 0.55 alpha  - the part that carries the colour
       label   a light tint of the hue - luminous enough to read at 0.8125rem

   Hover doubles the fill and takes the edge to full strength. That leaves plenty
   of headroom above them for the two solid variants, which is what keeps the
   primary action obviously primary - the difference between these and .btn-fs-orange
   is a filled block against a tinted one, not colour against no colour.
   -------------------------------------------------------------------------- */
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--fs-surface-raised);
    border-color: var(--fs-line-strong);
    color: var(--fs-text-bright);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: #434a53;
    border-color: var(--fs-text-dim);
    color: #fff;
}

.btn-success,
.btn-outline-success {
    background-color: rgba(63, 178, 106, 0.18);
    border-color: rgba(79, 199, 124, 0.55);
    color: #7fd3a1;
}

.btn-success:hover,
.btn-outline-success:hover {
    background-color: rgba(63, 178, 106, 0.34);
    border-color: #4fc77c;
    color: #a3e5be;
}

.btn-info,
.btn-outline-info {
    background-color: rgba(53, 174, 194, 0.18);
    border-color: rgba(72, 194, 214, 0.55);
    color: #74cfe0;
}

.btn-info:hover,
.btn-outline-info:hover {
    background-color: rgba(53, 174, 194, 0.34);
    border-color: #48c2d6;
    color: #9be0ed;
}

.btn-warning,
.btn-outline-warning {
    background-color: rgba(223, 162, 41, 0.18);
    border-color: rgba(238, 180, 67, 0.55);
    color: #ecbb62;
}

.btn-warning:hover,
.btn-outline-warning:hover {
    background-color: rgba(223, 162, 41, 0.34);
    border-color: #eeb443;
    color: #f7d190;
}

.btn-outline-danger,
.btn-outline-fs-red {
    background-color: rgba(224, 82, 82, 0.16);
    border-color: rgba(234, 106, 106, 0.55);
    color: #ef9b99;
    box-shadow: none;
}

.btn-outline-danger:hover,
.btn-outline-fs-red:hover {
    background-color: rgba(224, 82, 82, 0.32);
    border-color: #ea6a6a;
    color: #ffbcba;
}

.btn-outline-primary {
    background-color: rgba(219, 89, 1, 0.16);
    border-color: rgba(219, 89, 1, 0.55);
    color: #f0913f;
}

.btn-outline-primary:hover {
    background-color: rgba(219, 89, 1, 0.32);
    border-color: var(--fs-orange);
    color: #ff9f52;
}

/* Neutral pair. .btn-light was a white slab and .btn-dark a raised panel; both
   are used as plain "another option" buttons in the templates, so they sit at
   the same weight as .btn-secondary with the value swapped. */
.btn-light {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
    color: #e3e8ed;
}

.btn-light:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.btn-dark {
    background-color: #22272c;
    border-color: var(--fs-line-strong);
    color: var(--fs-text);
}

.btn-dark:hover {
    background-color: #2b3138;
    border-color: var(--fs-text-dim);
    color: var(--fs-text-bright);
}

/* .btn-link is used heavily as an accordion header, so it has to read as a
   heading that happens to be clickable. No border, no box - just the word. */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--fs-orange-bright);
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.btn-link:hover {
    background-color: transparent;
    border-color: transparent;
    color: #ff8a2a;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Chosen, not pressed. A selected option in a group of choices earns the same
   leading-edge marker as the primary action, because in that moment it is the
   thing the page is telling you about. */
.btn.active {
    background-color: rgba(219, 89, 1, 0.16);
    border-color: var(--fs-orange);
    color: #f5a463;
    box-shadow: inset 2px 0 0 var(--fs-orange);
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group-vertical {
    flex-direction: column;
    align-items: stretch;
}

/* Joined edges: the group looks like one control with divisions, not like
   buttons that happen to touch. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--fs-radius-control);
    border-bottom-left-radius: var(--fs-radius-control);
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--fs-radius-control);
    border-bottom-right-radius: var(--fs-radius-control);
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn:not(:last-child) {
    border-radius: 0;
}

.btn-group-vertical > .btn:first-child {
    border-top-left-radius: var(--fs-radius-control);
    border-top-right-radius: var(--fs-radius-control);
}

.btn-group-vertical > .btn:last-child {
    border-bottom-left-radius: var(--fs-radius-control);
    border-bottom-right-radius: var(--fs-radius-control);
}

.btn-group-vertical > .btn + .btn {
    margin-top: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn.active,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn.active {
    z-index: 1;
}

/* The selected button in a group. A full-bleed inset white wash lightens
   whatever fill the button already has - including the inline background-color
   the result view sets from Model.Colors - without this file needing to know
   what that colour is. */
.btn-group > .btn.active,
.btn-group-vertical > .btn.active,
.btn-group-toggle > .btn.active {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.14);
}

.btn-group-lg > .btn {
    padding: 0.7rem 1.5rem;
    font-size: 1.125rem;
}

/* .btn-check is a radio or checkbox hidden behind its own label. FsStyles
   depends on this rule to make .btn-outline-fs-red respond to :checked. */
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}

.btn-check:focus-visible + .btn,
.btn-check:focus-visible + .btn-link {
    box-shadow: var(--fs-focus-ring);
}

.btn-check:checked + .btn {
    background-color: var(--fs-orange);
    border-color: var(--fs-orange);
    color: #fff;
}

/* .btn-group-toggle is a Bootstrap 4 name. fs-ui.js keeps .active in sync on
   the labels inside it, so the styling hook is just .active. */
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* The Bootstrap 4 dismiss button, used in every modal header. */
.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--fs-radius-sm);
    background: transparent;
    color: var(--fs-text-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--fs-ease), color var(--fs-ease);
}

.close:hover {
    background-color: var(--fs-line);
    color: var(--fs-text-bright);
}


/* -----------------------------------------------------------------------------
   9  Cards

   FsStyles.css already sets .card's radius, border, shadow and transition. Only
   the parts it does not cover are set here: the surface colour, and a header
   that is a tint of the card rather than the separate grey band Bootstrap uses.
   ----------------------------------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--fs-surface);
    background-clip: border-box;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius-lg);
    color: var(--fs-text);
    word-wrap: break-word;
}

.card-header {
    padding: 0.85rem 1.15rem;
    margin-bottom: 0;
    background-color: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--fs-line);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    color: var(--fs-text-bright);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.card-footer {
    padding: 0.85rem 1.15rem;
    background-color: rgba(255, 255, 255, 0.035);
    border-top: 1px solid var(--fs-line);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.15rem;
}

.card-title {
    margin-bottom: 0.5rem;
    color: var(--fs-text-bright);
    font-weight: 600;
}

.card-subtitle {
    margin-top: -0.25rem;
    margin-bottom: 0;
    color: var(--fs-text-dim);
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* A card header that owns the card's top corners still needs them when the
   header is the first child and the card has a border. */
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--fs-radius-lg) - 1px);
    border-top-right-radius: calc(var(--fs-radius-lg) - 1px);
}


/* -----------------------------------------------------------------------------
   10  Tables

   The biggest single change in the file. Bootstrap's .table-bordered draws a
   1px box around every cell, which on a 200 row projection table is a grid of
   noise that competes with the numbers. Here .table-bordered is a hairline
   between columns only, .table-striped is a 3% tint rather than a grey band,
   and every table gets tabular figures so decimal points line up.

   .table-borderd, .table-boardered, .table-auto and table=sm all appear in the
   templates and are misspellings or Tailwind leftovers. They are not
   implemented - see the notes at the end of this file.
   ----------------------------------------------------------------------------- */
.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    color: var(--fs-text);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.table > thead {
    vertical-align: bottom;
}

/* Bootstrap's exact cell padding, 0.5rem / 0.25rem. It is not a detail: the
   draft board is a rounds x teams grid of .table-sm cells, and a few tenths of
   a rem per cell compounds across twelve columns into a board that no longer
   fits the screen. */
.table th,
.table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--fs-line);
    text-align: inherit;
}

/* Deliberately plain. An earlier version of this rule set uppercase, letter
   spacing and white-space: nowrap, which reads well on a wide report table and
   badly on the draft board - the team-name headers stopped wrapping and pushed
   every column wider.

   It also must not set a background. .table thead th scores (0,1,2) and would
   beat a .bg-primary (0,1,0) written on the <thead>, which is exactly how the
   draft board colours its header. Any tint here silently overrides that. */
.table thead th {
    border-bottom: 1px solid var(--fs-line-strong);
    color: var(--fs-text-bright);
    font-weight: 600;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.table-sm th,
.table-sm td {
    padding: 0.25rem;
}

.table-bordered th,
.table-bordered td {
    border-left: 1px solid var(--fs-line);
}

.table-bordered th:first-child,
.table-bordered td:first-child {
    border-left: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

.table-hover tbody tr {
    transition: background-color var(--fs-ease);
}

.table-hover tbody tr:hover {
    background-color: var(--fs-orange-soft);
    color: var(--fs-text-bright);
}

.table-dark {
    background-color: var(--fs-dark);
    color: var(--fs-text);
}

.table-dark th,
.table-dark td {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Horizontal scroll for wide tables, with the site scrollbar treatment from
   FsStyles applied automatically rather than needing .fs-scrollbar as well. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
    height: 0.6rem;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--fs-surface-sunken);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--fs-line-strong);
    border-radius: var(--fs-radius-pill);
}


/* -----------------------------------------------------------------------------
   11  Forms

   Inputs are sunken rather than raised - darker than the surface they sit on,
   which is what makes a field read as a place to type on a dark UI. Bootstrap
   fills them white, which on this theme is a hole punched in the page.

   .form-group and .control-label are Bootstrap 3/4 names still in the Razor
   views; .md-form comes from Material Design for Bootstrap, which the site no
   longer loads. Both are given a sane definition here rather than left to do
   nothing.
   ----------------------------------------------------------------------------- */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--fs-surface-sunken);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius-sm);
    color: var(--fs-text-bright);
    font-size: 1rem;
    line-height: 1.5;
    appearance: none;
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease), background-color var(--fs-ease);
}

.form-control::placeholder {
    color: var(--fs-text-dim);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--fs-line-strong);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    background-color: var(--fs-surface-sunken);
    border-color: var(--fs-orange);
    box-shadow: 0 0 0 3px var(--fs-orange-soft);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--fs-text-dim);
    cursor: not-allowed;
}

.form-control.is-invalid,
.form-control.input-validation-error {
    border-color: var(--fs-danger);
}

.form-control.is-invalid:focus,
.form-control.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--fs-red-soft);
}

/* The caret. Inlined as a data URI so the file has no external dependency. */
.form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f969d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

.form-select option {
    background-color: var(--fs-surface);
    color: var(--fs-text);
}

.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
}

.form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.form-group,
.md-form {
    margin-bottom: 1rem;
    text-align: left;
}

.form-label,
.control-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: var(--fs-text-dim);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.form-text {
    margin-top: 0.25rem;
    color: var(--fs-text-dim);
    font-size: 0.875rem;
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75rem;
    margin-bottom: 0.25rem;
}

.form-check-input {
    float: left;
    margin-left: -1.75rem;
}

/* FsStyles already sizes and tints the raw checkbox and radio; only the
   accent-color is set here, which is what actually recolours a native control
   in current browsers. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fs-orange);
}

textarea.form-control {
    min-height: 5rem;
    resize: vertical;
}

/* ASP.NET unobtrusive validation writes these classes. They were previously
   unstyled, so a failed field summary rendered as plain body text. */
.field-validation-error,
.validation-summary-errors {
    color: var(--fs-danger-bright);
    font-size: 0.875rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}


/* -----------------------------------------------------------------------------
   12  Modals

   Shown by fs-ui.js, which adds .show and appends a .modal-backdrop. The dialog
   scales up from 0.97 rather than sliding down from -50px: a shorter, smaller
   movement reads as faster even at the same duration.
   ----------------------------------------------------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 520px;
    margin: 1.75rem auto;
    pointer-events: none;
    transform: scale(0.97);
    opacity: 0;
    transition: transform var(--fs-ease), opacity var(--fs-ease);
}

.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

.modal-sm .modal-dialog,
.modal-dialog.modal-sm { max-width: 340px; }

.modal-lg .modal-dialog,
.modal-dialog.modal-lg { max-width: 860px; }

.modal-xl .modal-dialog,
.modal-dialog.modal-xl { max-width: 1140px; }

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.75rem;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--fs-surface);
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-lift);
    outline: 0;
    pointer-events: auto;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fs-line);
}

.modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--fs-line);
}

/* An empty footer - there are several in the draft templates - should not
   leave a stray rule and 30px of dead space. */
.modal-footer:empty {
    display: none;
}

/* Backdrop blur is the cheapest way to make a modal feel like it belongs to
   2026 rather than 2015. It degrades to plain dimming where unsupported. */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: rgba(8, 10, 12, 0.6);
    opacity: 0;
    transition: opacity var(--fs-ease);
}

@supports (backdrop-filter: blur(1px)) {
    .modal-backdrop {
        backdrop-filter: blur(3px) saturate(0.9);
    }
}

.modal-backdrop.show {
    opacity: 1;
}

/* fs-ui.js sets this on <body> while a modal is open. */
.modal-open {
    overflow: hidden;
}


/* -----------------------------------------------------------------------------
   13  Collapse and accordion

   fs-ui.js animates height explicitly, so .collapse only needs to define the
   closed state and the transition. The .collapsing class is set by the script
   for the duration of the animation.
   ----------------------------------------------------------------------------- */
.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

.collapsing {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* The accordion in the templates is a stack of .card, each with a .card-header
   holding a .btn-link. Bootstrap leaves those as separate floating cards with
   gaps; collapsing them into one bordered stack is what makes an accordion look
   like a single control. */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.accordion > .card {
    overflow: hidden;
}

.accordion .card-header {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid transparent;
    transition: border-color var(--fs-ease), background-color var(--fs-ease);
}

.accordion .card-header:has(+ .collapse.show),
.accordion .card-header:has(+ .collapsing) {
    border-bottom-color: var(--fs-line);
}

.accordion .card-header h1,
.accordion .card-header h2,
.accordion .card-header h3,
.accordion .card-header h4,
.accordion .card-header h5 {
    margin: 0;
    font-size: inherit;
    letter-spacing: inherit;
}

/* A full width header button with a chevron that turns. .collapsed is the
   Bootstrap convention for "this trigger's target is closed", and fs-ui.js
   maintains it.

   Scoped to .accordion on purpose. The header takes `padding: 0` above and the
   button supplies its own, so a .btn-link in a card header outside an accordion
   would end up double-padded. Every .btn-link in the app today is inside an
   .accordion (about, compSet, fsabout, home, AddToAccount), so nothing is lost
   by the narrower scope - and a stray one elsewhere still renders as a plain
   link-styled button. */
.accordion .card-header .btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.15rem;
    border-radius: 0;
    text-align: left;
}

.accordion .card-header .btn-link::before {
    content: "";
    order: 2;
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    transition: transform var(--fs-ease);
    opacity: 0.65;
}

.accordion .card-header .btn-link.collapsed::before {
    transform: rotate(-45deg) translate(-0.05rem, 0.05rem);
}

.accordion .card-header .btn-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* An open section gets a brand-coloured left edge, which is the only thing on
   the page that says "you are reading this one". */
.accordion > .card > .collapse.show,
.accordion > .card > .collapsing {
    border-left: 2px solid var(--fs-orange);
}


/* -----------------------------------------------------------------------------
   14  Alerts and badges

   Alerts are tinted rather than filled: a translucent wash of the semantic
   colour over the page, with a solid 3px edge carrying the meaning. Bootstrap's
   pastel-fill-plus-darker-text pair is built for a white page and looks wrong
   on a dark one.
   ----------------------------------------------------------------------------- */
.alert {
    position: relative;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--fs-radius-sm);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--fs-text);
    text-align: left;
}

.alert-primary   { background-color: rgba(74, 134, 247, 0.12);  border-color: rgba(74, 134, 247, 0.3);  border-left-color: var(--fs-primary); }
.alert-secondary { background-color: rgba(255, 255, 255, 0.05); border-color: var(--fs-line);           border-left-color: var(--fs-secondary-bright); }
.alert-success   { background-color: rgba(63, 178, 106, 0.12);  border-color: rgba(63, 178, 106, 0.3);  border-left-color: var(--fs-success); }
.alert-info      { background-color: rgba(53, 174, 194, 0.12);  border-color: rgba(53, 174, 194, 0.3);  border-left-color: var(--fs-info); }
.alert-warning   { background-color: rgba(223, 162, 41, 0.12);  border-color: rgba(223, 162, 41, 0.3);  border-left-color: var(--fs-warning); }
.alert-danger    { background-color: rgba(224, 82, 82, 0.12);   border-color: rgba(224, 82, 82, 0.3);   border-left-color: var(--fs-danger); }

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.badge {
    display: inline-block;
    padding: 0.3em 0.6em;
    border-radius: var(--fs-radius-pill);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* The default fill is guarded by :not([class*="bg-"]) rather than just declared.
   .badge and .bg-primary both score (0,1,0), and .badge is defined later in this
   file, so a plain `background-color` here would beat every bg-* utility and
   .badge.bg-primary would come out grey. */
.badge:not([class*="bg-"]) {
    background-color: var(--fs-surface-raised);
    color: var(--fs-text-bright);
}


/* -----------------------------------------------------------------------------
   15  List groups

   FsStyles.css styles .sidebar .list-group-item separately and that stays
   authoritative for the sidebar. This is the general case.
   ----------------------------------------------------------------------------- */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--fs-radius);
    list-style: none;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.7rem 1.05rem;
    background-color: var(--fs-surface);
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    text-align: left;
    text-decoration: none;
}

.list-group-item + .list-group-item {
    border-top-width: 0;
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.list-group-item-action {
    cursor: pointer;
    transition: background-color var(--fs-ease), color var(--fs-ease);
}

.list-group-item-action:hover {
    background-color: var(--fs-surface-raised);
    color: var(--fs-text-bright);
    text-decoration: none;
}

.list-group-item.active {
    background-color: var(--fs-orange-soft);
    border-color: var(--fs-orange);
    color: var(--fs-text-bright);
}

.list-group-item.disabled {
    color: var(--fs-text-dim);
    pointer-events: none;
}


/* -----------------------------------------------------------------------------
   16  Nav and navbar

   The site header is one navbar in _Layout.cshtml with a brand image, three
   links and the login buttons. Bootstrap's navbar carries collapse breakpoints,
   dropdowns, scrolling and four colour schemes, none of which is used. What is
   here is the part that is.

   .navbar-light is a Bootstrap 4 name asking for dark text on a light bar.
   The site is dark, so it is accepted and ignored rather than honoured - the
   bar was already being overridden to dark by FsStyles and the Slate theme.
   ----------------------------------------------------------------------------- */
.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background-color: rgba(21, 24, 28, 0.85);
    border-bottom: 1px solid var(--fs-line);
    /* A blurred, slightly translucent bar over a dark page. */
    backdrop-filter: blur(10px) saturate(1.1);
}

.navbar.bg-light,
.navbar-light {
    background-color: rgba(21, 24, 28, 0.85);
    color: var(--fs-text);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
    margin-right: 1rem;
    color: var(--fs-text-bright);
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-brand img {
    max-width: 100%;
    height: auto;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav .nav-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.navbar-text {
    margin: 0;
    color: var(--fs-text-dim);
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-item {
    display: block;
}

/* Nav links get an underline that grows from the left on hover. It is one
   pseudo-element and it does more for the "sharper" feel than any colour
   change would. */
.nav-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: var(--fs-radius-sm);
    color: var(--fs-text);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--fs-ease), background-color var(--fs-ease);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.3rem;
    height: 2px;
    border-radius: 1px;
    background-color: var(--fs-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--fs-ease);
}

.nav-link:hover,
.nav-link.active {
    color: var(--fs-text-bright);
    text-decoration: none;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.disabled {
    color: var(--fs-text-dim);
    pointer-events: none;
}

/* Pills drop the underline and use a filled chip instead. */
.nav-pills .nav-link::after {
    display: none;
}

.nav-pills .nav-link.active {
    background-color: var(--fs-orange);
    color: #fff;
}

.navbar-toggler {
    display: none;
    padding: 0.4rem 0.6rem;
    background-color: transparent;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-radius-sm);
    color: var(--fs-text);
    cursor: pointer;
    line-height: 1;
}

.navbar-toggler-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='%23c8ccd0' stroke-width='2.4' stroke-linecap='round'%3e%3cpath d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* navbar-expand-lg: below 992px the links collapse behind the toggler. */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-toggler {
        display: block;
        order: 1;
    }

    .navbar-expand-lg .navbar-collapse {
        display: none;
        order: 3;
    }

    .navbar-expand-lg .navbar-collapse.show {
        display: block;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0;
    }

    .navbar-expand-lg .navbar-nav .nav-item {
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}


/* -----------------------------------------------------------------------------
   17  Pagination
   ----------------------------------------------------------------------------- */
.pagination {
    display: flex;
    gap: 0.25rem;
    padding-left: 0;
    margin: 1rem 0;
    list-style: none;
}

.page-item {
    display: block;
}

.page-link {
    display: block;
    padding: 0.4rem 0.75rem;
    background-color: transparent;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius-sm);
    color: var(--fs-text);
    text-decoration: none;
    transition: background-color var(--fs-ease), border-color var(--fs-ease), color var(--fs-ease);
}

.page-link:hover {
    background-color: var(--fs-surface-raised);
    border-color: var(--fs-line-strong);
    color: var(--fs-text-bright);
    text-decoration: none;
}

.page-item.active .page-link {
    background-color: var(--fs-orange);
    border-color: var(--fs-orange);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--fs-text-dim);
    pointer-events: none;
    opacity: 0.6;
}


/* -----------------------------------------------------------------------------
   18  Spinners

   A thinner ring than Bootstrap's. At 0.25em the border reads as a chunky
   donut; 2px reads as a progress indicator.
   ----------------------------------------------------------------------------- */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--fs-line-strong);
    border-right-color: var(--fs-orange);
    border-radius: 50%;
    vertical-align: middle;
    animation: fs-spin 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

@keyframes fs-spin {
    to { transform: rotate(360deg); }
}


/* -----------------------------------------------------------------------------
   19  Jumbotron

   A Bootstrap 3/4 component removed in 5, still in the markup. It is given a
   modern hero treatment: no grey slab, just generous space over a faint
   radial wash of the brand colour.
   ----------------------------------------------------------------------------- */
.jumbotron {
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    border-radius: var(--fs-radius-lg);
    background-color: var(--fs-surface);
    background-image: radial-gradient(120% 140% at 50% 0%, var(--fs-orange-soft) 0%, transparent 60%);
    border: 1px solid var(--fs-line);
}

.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}


/* =============================================================================
   Classes found in the markup and deliberately NOT implemented

   These are typos or leftovers from other frameworks. They did nothing under
   Bootstrap either, so leaving them out changes no rendering - but they are
   listed rather than silently dropped, because each one is a place where the
   markup does not say what its author meant.

     table=sm            draft/playerValues - "=" for "-", so no class at all
     table-borderd       misspelling of table-bordered (2 uses)
     table-boardered     misspelling of table-bordered
     table-auto          Tailwind
     w-full              Tailwind (w-100 here)
     bg-gray-100         Tailwind
     text-red-600        Tailwind
     col-9               only in a commented-out block

   Custom classes owned by FsStyles.css and intentionally absent here:

     font-small  text-table  text-table-header  large-icon  xxl-icon
     pointer-link  db-fixed  fs-scrollbar  fs-orange  fs-red  bg-fs-red
     btn-fs-orange  btn-fs-red  btn-outline-fs-red  fs-orange-bg-fade
     home-cards  pricing  card-price  top-content  bgf-h1  bgf-h2
     no-hover  sidebar  chart-tooltip  header-wrap  skewed-bg  bordered-td-fs
   ============================================================================= */


/* =============================================================================
   20  Site styles

   Folded in from lib/fs-styles/FsStyles.css on 2026-08-13, which is deleted.

   Two stylesheets existed because fs-ui was written to replace Bootstrap
   underneath FsStyles without disturbing it - fs-ui first, FsStyles second and
   winning. That layering has done its job: the tokens were declared twice, the
   reduced-motion block twice, and .btn's radius was set in one file and
   overridden in the other, which is exactly the kind of split that makes a
   restyle feel risky.

   Everything below is FsStyles' live CSS. What was NOT carried across:

     - :root, the reduced-motion block, the body font stack and the
       button/input font-family inherit. All already in sections 1 and 2 above,
       with identical values; the font stack moved to the body rule in §2.
     - .btn-fs-orange, .btn-fs-red, .btn-outline-fs-red and the .btn radius
       override. Replaced by section 8, which now defines the brand buttons
       directly rather than patching them from a second file.
     - roughly 16k characters of commented-out "WAS:" blocks recording the
       pre-Bootstrap-removal rules. They are in git.
   ============================================================================= */

.font-small {
    font-size: 0.875rem;
    font-weight: 300;
    letter-spacing: 0.015em;
    color: var(--fs-text-dim);
}

.fs-red {
    color: var(--fs-red);
}

.fs-orange {
    color: var(--fs-orange-bright);
}

.bg-fs-red {
    background: linear-gradient(180deg, #e35c5c, var(--fs-red));
}

.bg-fs-orange {
    background: linear-gradient(180deg, var(--fs-orange-bright), var(--fs-orange));
}

.border-fs-orange {
    border-color: var(--fs-orange) !important;
}

.border-fs-red {
    border-color: var(--fs-red) !important;
}


/* --- Draft board tables ---------------------------------------------------- */

.db-fixed {
    width: 60px;
    height: 60px;
}

.text-table {
    overflow: hidden;
    white-space: nowrap;
    width: 80px;
    text-overflow: ellipsis;
    padding: 0px;
    margin: 0px;
    text-align: center !important;
}

.text-table-header {
    overflow: hidden;
    width: 80px;
    text-overflow: ellipsis;
    padding: 0px;
    margin: 0px;
    text-align: center !important;
}

.header-wrap {
    width: 65px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}

table.fixed {
    table-layout: fixed;
}

table.fixed td {
    overflow: hidden;
}

table.fixed tbody tr:nth-of-type(odd) > td:not([style*="background"]) {
    background-color: rgba(255, 255, 255, 0.022);
}

table.fixed tbody tr:hover > td:not([style*="background"]) {
    background-color: rgba(219, 89, 1, 0.1);
}

.bordered-td-fs {
    border: 1px solid var(--fs-line);
    margin: 0;
    padding: 5px 6px;
    position: relative;
    z-index: 1;
    background-clip: padding-box;
}

.no-hover:hover,
.no-hover:hover > td {
    background-color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}


/* --- Marketing surfaces ---------------------------------------------------- */

.skewed-bg {
    background: linear-gradient(135deg, var(--fs-orange-bright) 0%, var(--fs-orange) 55%, var(--fs-orange-deep) 100%);
    color: #fff;
    padding: 2em;
    position: relative;
    z-index: 1;
    min-height: 300px;
    overflow: hidden;
}

.skewed-bg::after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: -25%;
    left: 0;
    right: 0;
    height: 100%;
    background: #272b30;
    transform: skew(0deg, -9deg);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.09);
}

.top-content {
    position: relative;
    z-index: 3;
}

.fs-orange-bg-fade {
    background: var(--fs-orange);
    background: linear-gradient(110deg, var(--fs-orange-deep), var(--fs-orange), #e88b4c);
}

.bgf-h1 {
    background: linear-gradient(110deg, var(--fs-orange-deep), #dc7128);
}

.bgf-h2 {
    background: linear-gradient(110deg, #dc7128, #e88b4c);
}


/* --- Icons and links ------------------------------------------------------- */

.large-icon {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
}

.xxl-icon {
    font-size: clamp(6rem, 22vw, 15rem);
    line-height: 1;
    opacity: 0.92;
}

.pointer-link {
    cursor: pointer;
    text-decoration: none;
    transition: color var(--fs-ease), opacity var(--fs-ease);
}

.pointer-link:hover {
    color: var(--fs-orange-bright);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.pointer-link:focus-visible {
    outline: 2px solid var(--fs-orange-bright);
    outline-offset: 2px;
    border-radius: 3px;
}


/* --- Form controls --------------------------------------------------------- */

input[type='checkbox'],
input[type='radio'] {
    width: 18px;
    height: 18px;
    accent-color: var(--fs-orange);
    cursor: pointer;
    vertical-align: middle;
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
    outline: 2px solid var(--fs-orange-bright);
    outline-offset: 2px;
}


/* --- Cards ----------------------------------------------------------------- */

.card {
    border-radius: var(--fs-radius-lg);
    border: 1px solid var(--fs-line);
    transition: transform var(--fs-ease), box-shadow var(--fs-ease), border-color var(--fs-ease);
    box-shadow: var(--fs-shadow);
}

section.home-cards {
    border: none;
    border-radius: var(--fs-radius-lg);
    transition: transform var(--fs-ease), box-shadow var(--fs-ease);
    box-shadow: var(--fs-shadow);
}

.home-cards .card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--fs-shadow-lift);
    border-color: rgba(219, 89, 1, 0.45);
    background-image: linear-gradient(110deg, rgba(219, 89, 1, 0.16), rgba(238, 214, 119, 0.1));
}


/* --- Pricing --------------------------------------------------------------- */

.pricing .card {
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius-lg);
    transition: transform var(--fs-ease), box-shadow var(--fs-ease), border-color var(--fs-ease);
    box-shadow: var(--fs-shadow);
    overflow: hidden;
}

.pricing hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--fs-line);
    opacity: 1;
}

.pricing .card-title {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fs-text-dim);
}

.pricing .card-price {
    font-size: 3rem;
    margin: 0;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fs-text);
}

.pricing .card-price .period {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--fs-text-dim);
}

.pricing ul li {
    margin-bottom: 1.25rem;
    color: var(--fs-text);
}

.pricing .text-muted {
    opacity: 0.85;
    color: var(--fs-text-dim) !important;
}

/* The pricing page's call to action is the one place a big soft button is still
   right: it is a marketing surface, not the instrument, and the card is doing
   the same job a physical price card does. Kept as it was, minus the pill
   radius, which now reads as a leftover next to everything else. */
.pricing .btn {
    font-size: 0.9375rem;
    border-radius: var(--fs-radius-sm);
    letter-spacing: 0.1rem;
    font-weight: 700;
    padding: 0.9rem 1rem;
    opacity: 0.7;
    transition: opacity var(--fs-ease), filter var(--fs-ease), transform var(--fs-ease);
}

@media (min-width: 992px) {
    .pricing .card:hover {
        transform: translateY(-0.25rem);
        box-shadow: var(--fs-shadow-lift);
        border-color: rgba(219, 89, 1, 0.4);
    }

    .pricing .card:hover .btn {
        opacity: 1;
    }
}


/* --- Scrollbars ------------------------------------------------------------ */

.fs-scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.fs-scrollbar::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.fs-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.fs-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--fs-orange);
    background-clip: padding-box;
}

.fs-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.05);
}


/* --- Sidebar layout -------------------------------------------------------- */

.container-flex {
    display: flex;
}

.sidebar {
    width: 250px;
    height: 100vh;
    background-color: var(--fs-surface);
    border-right: 1px solid var(--fs-line);
}

.sidebar .list-group-item {
    border-radius: 0;
    background-color: transparent;
    border-color: var(--fs-line);
    color: var(--fs-text);
    border-left: 3px solid transparent;
    transition: background-color var(--fs-ease), color var(--fs-ease), border-left-color var(--fs-ease);
}

.sidebar .list-group-item:hover {
    background-color: rgba(219, 89, 1, 0.14);
    border-left-color: var(--fs-orange);
    color: #fff;
}

.sidebar .list-group-item.active {
    background-color: rgba(219, 89, 1, 0.22);
    border-left-color: var(--fs-orange-bright);
    color: #fff;
}

.content-right-of-sidebar {
    margin-left: 250px;
}


/* --- Chart tooltip --------------------------------------------------------- */

.chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(24, 24, 28, 0.96);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.08s ease;
}

.chart-tooltip .name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.chart-tooltip .muted {
    color: #9ca3af;
}