/* Sideline — Bootstrap 5.3 dark theme on the approved brand palette.

   Palette source of truth: _private/brandAssets/sideline-colors.css (the brand
   pack README calls these the approved tokens). Mirrored here rather than
   linking that file, because _private/ is gitignored and excluded from deploy.
   If the brand pack changes, change these four values.

   Note on the prototype: docs/sideline.jsx carries its own palette in a `C`
   object of inline styles (amber on dark green). That predates this brand pack.
   The brand tokens below win for all chrome. The one place amber is retained is
   the running clock — see --sl-clock. */

:root {
    --sideline-lime:     #7E9F2C;
    --sideline-white:    #ECECED;
    --sideline-charcoal: #232423;
    --sideline-black:    #040404;
}

[data-bs-theme="dark"] {
    --sl-panel: var(--sideline-charcoal);
    --sl-line:  #34362F;

    /* The live clock and score stay amber, not lime. This is a legibility call,
       not a brand exception: in direct sun amber (#FFB020) clears ~11:1 against
       the charcoal ground where lime clears ~6:1, and the clock is the one
       element that must be readable at a glance mid-match. Chrome stays lime. */
    --sl-clock: #FFB020;

    --sl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --bs-body-bg:           var(--sideline-black);
    --bs-body-color:        var(--sideline-white);
    --bs-secondary-color:   #9A9C97;
    --bs-border-color:      var(--sl-line);
    --bs-emphasis-color:    var(--sideline-white);

    --bs-primary:           var(--sideline-lime);
    --bs-primary-rgb:       126, 159, 44;

    --bs-link-color:        var(--sideline-lime);
    --bs-link-hover-color:  #96BA3A;
}

[data-bs-theme="dark"] .card {
    background-color: var(--sl-panel);
    border-color: var(--sl-line);
}

[data-bs-theme="dark"] .form-control {
    background-color: #2C2E2B;
    border-color: var(--sl-line);
    color: var(--sideline-white);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: #2C2E2B;
    border-color: var(--sideline-lime);
    color: var(--sideline-white);
    box-shadow: 0 0 0 0.2rem rgba(126, 159, 44, 0.25);
}

/* Bootstrap's .btn-primary derives its own tokens, so point them at the brand
   lime rather than overriding every state by hand. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg:             var(--sideline-lime);
    --bs-btn-border-color:   var(--sideline-lime);
    --bs-btn-color:          var(--sideline-black);
    --bs-btn-hover-bg:       #8FB233;
    --bs-btn-hover-border-color: #8FB233;
    --bs-btn-hover-color:    var(--sideline-black);
    --bs-btn-active-bg:      #6E8C26;
    --bs-btn-active-border-color: #6E8C26;
    --bs-btn-disabled-bg:    #4A5A22;
    --bs-btn-disabled-border-color: #4A5A22;
}

/* Turf hero — behind the sign-in card and any full-bleed header.

   Gradient values are the brand pack's own (logo-usage.html), so the white
   lockup keeps its intended contrast over the texture.

   ACCEPTED TRADE-OFF — signed off, do not "fix" without asking. The source is
   1536x1024. With `cover` on a PORTRAIT phone the binding dimension is HEIGHT,
   and height is 1024. A phone at DPR 3 needs ~2530 device px of height, so the
   image is upscaled ~2.5x and the grass softens slightly. Judged fine in place
   at 389KB; the options below were weighed and declined.

   Note this is the SAME upscale factor as the previous 1024x1024 source: the
   replacement is wider, not taller, and width was never the constraint. It is a
   better texture (even lighting, no vignette blob, no generation artifact) but
   it is not sharper on a phone.

   Two ways out, neither done here:
     1. A TALLER export — portrait, ~1536x2688 or larger. Height is what counts.
     2. A seamless tile at high density, e.g. image-set(url(tile.webp) 3x) with
        background-repeat. Renders 1:1 on DPR 3, so it is sharp at any viewport
        and a fraction of the file size. Measured: this texture's left/right
        edges already match better than random interior strips (17.3 vs 21.6
        mean abs diff), but it has a vertical brightness gradient (bottom ~35%
        darker than top) that would band if tiled. It needs flat-field
        correction first.

   Blurring to hide the grain was tried and rejected — it strips the detail that
   makes it read as turf at all. */
.sl-turf {
    background-color: var(--sideline-black);
    background-image:
        linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .58)),
        url("../brand/sideline-turf-background.webp");
    background-position: center;
    background-size: cover;
}

/* Respect a reduced-data preference: skip the image, keep the ground. */
@media (prefers-reduced-data: reduce) {
    .sl-turf { background-image: none; }
}

/* The clock and any elapsed/score readout: tabular figures so digits don't
   jitter as they tick. */
.sl-mono {
    font-family: var(--sl-mono);
    font-variant-numeric: tabular-nums;
}

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

/* Touch targets: cold hands, one thumb, moving kid. Never smaller than this. */
.sl-tap {
    min-height: 3rem;
    min-width: 3rem;
}