/* theme:start — generated by bin/app-build.sh from meta.php seed #E8762B, don't edit by hand */
:root {
    --md-primary: #8C4E29;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #FFDBCA;
    --md-on-primary-container: #6F3714;
    --md-secondary: #765848;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #FFDBCA;
    --md-on-secondary-container: #5C4132;
    --md-tertiary: #636032;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #EAE5AB;
    --md-on-tertiary-container: #4B481D;
    --md-error: #BA1A1A;
    --md-on-error: #FFFFFF;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #93000A;
    --md-background: #FFF8F6;
    --md-on-background: #221A15;
    --md-surface: #FFF8F6;
    --md-on-surface: #221A15;
    --md-surface-variant: #F4DED4;
    --md-on-surface-variant: #52443C;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #FFF1EB;
    --md-surface-container: #FCEAE3;
    --md-surface-container-high: #F6E5DD;
    --md-surface-container-highest: #F0DFD7;
    --md-outline: #85746B;
    --md-outline-variant: #D7C2B9;
    --md-inverse-surface: #382E29;
    --md-inverse-on-surface: #FFEDE5;
    --md-inverse-primary: #FFB68E;
    --md-red: #B42800;
    --md-on-red: #FFFFFF;
    --md-red-container: #FFDAD2;
    --md-on-red-container: #8A1D00;
    --md-yellow: #795900;
    --md-on-yellow: #FFFFFF;
    --md-yellow-container: #FFDFA0;
    --md-on-yellow-container: #5C4300;
    --md-green: #426900;
    --md-on-green: #FFFFFF;
    --md-green-container: #BDF374;
    --md-on-green-container: #314F00;
}
@media (prefers-color-scheme: dark) {
    :root {
        --md-primary: #FFB68E;
        --md-on-primary: #532201;
        --md-primary-container: #6F3714;
        --md-on-primary-container: #FFDBCA;
        --md-secondary: #E6BEAB;
        --md-on-secondary: #432B1D;
        --md-secondary-container: #5C4132;
        --md-on-secondary-container: #FFDBCA;
        --md-tertiary: #CDC991;
        --md-on-tertiary: #343208;
        --md-tertiary-container: #4B481D;
        --md-on-tertiary-container: #EAE5AB;
        --md-error: #FFB4AB;
        --md-on-error: #690005;
        --md-error-container: #93000A;
        --md-on-error-container: #FFDAD6;
        --md-background: #1A120D;
        --md-on-background: #F0DFD7;
        --md-surface: #1A120D;
        --md-on-surface: #F0DFD7;
        --md-surface-variant: #52443C;
        --md-on-surface-variant: #D7C2B9;
        --md-surface-container-lowest: #140C09;
        --md-surface-container-low: #221A15;
        --md-surface-container: #271E19;
        --md-surface-container-high: #322823;
        --md-surface-container-highest: #3D332E;
        --md-outline: #9F8D84;
        --md-outline-variant: #52443C;
        --md-inverse-surface: #F0DFD7;
        --md-inverse-on-surface: #382E29;
        --md-inverse-primary: #8C4E29;
        --md-red: #FFB4A2;
        --md-on-red: #621100;
        --md-red-container: #8A1D00;
        --md-on-red-container: #FFDAD2;
        --md-yellow: #F8BD2A;
        --md-on-yellow: #402D00;
        --md-yellow-container: #5C4300;
        --md-on-yellow-container: #FFDFA0;
        --md-green: #A2D65B;
        --md-on-green: #203600;
        --md-green-container: #314F00;
        --md-on-green-container: #BDF374;
    }
}
/* theme:end */

/* Hoop Stats' one-off visuals: the court, the tracker, the clock keypad, the setup form and the tap list (.claude/rules/app-hoop-stats.md). */

/* The court (app_view_full_court(), app_view_shot_chart()): light floor, thin lines; made shots as small circles, missed shots as an X, both in primary. */
.app-court__floor { fill: var(--md-surface-container-high); }
.app-court__line { fill: none; stroke: var(--md-outline); stroke-width: 0.06; }
.app-court__rim { stroke: var(--md-primary); stroke-width: 0.08; }
.app-court__marker { fill: var(--md-primary); stroke: var(--md-on-primary); stroke-width: 0.08; }
.app-shot { fill: none; stroke: var(--md-primary); stroke-width: 0.09; stroke-linecap: round; }
.app-shot-chart { display: block; width: 100%; max-width: 420px; margin-inline: auto; border-radius: 12px; }

/* "Shot chart | Heat map": both courts are in the page, the checked segment shows its one (the shot chart until the heat map is picked). */
.app-shots__chart,
.app-shots__heat { margin-top: var(--spacing-small); }
.app-shots:has(.ui-segmented-button__input[value="heat"]:checked) .app-shots__chart,
.app-shots:not(:has(.ui-segmented-button__input[value="heat"]:checked)) .app-shots__heat { display: none; }
/* Every zone edge is drawn like a court line, and a zone without shots is grey, so all 14 zones show (user decision, 2026-10-14).
   Rejected: a surface-colored gap between colored zones; the court lines covered it along the arc (user report, 2026-10-14). */
.app-heat__zone { fill: var(--md-surface-container-highest); stroke: var(--md-outline); stroke-width: 0.06; }
.app-heat__zone--red { fill: var(--md-red-container); }
.app-heat__zone--yellow { fill: var(--md-yellow-container); }
.app-heat__zone--green { fill: var(--md-green-container); }
/* In the labels' scaled group a px is a pixel at the chart's full 420px width (view-heat-map.php). */
.app-heat__label { font-size: var(--md-label-large-size); font-weight: var(--md-label-large-weight); text-anchor: middle; dominant-baseline: central; }
.app-heat__label--red { fill: var(--md-on-red-container); }
.app-heat__label--yellow { fill: var(--md-on-yellow-container); }
.app-heat__label--green { fill: var(--md-on-green-container); }

/* The tracker's two slots: the buttons pane (layout 'centered': the readable column, at the top), before the start only the side choice; the court pane once live.
   The shared panes block places them: beside each other from 840px or on a low screen, otherwise joined, the court on top under the bar. */
.app-tracker { display: flex; flex-direction: column; min-height: 0; }
.app-tracker:not([data-phase="setup"]) .app-tracker__setup,
.app-tracker:not([data-phase="live"]) .app-tracker__live { display: none; }
.app-tracker__setup { display: flex; flex-direction: column; gap: var(--spacing-large); width: 100%; max-width: var(--layout-centered-max-width); margin: auto; }
.app-tracker__live { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--spacing-small); }
/* The court pane: the period 16px above the court and the toolbar 16px under it. */
.app-tracker__live--court { gap: var(--spacing-xsmall); container-type: inline-size; }
.app-tracker__live--court .app-tracker__periods { margin-bottom: var(--spacing-xsmall); }
.app-tracker__live--court .app-tracker__status { margin-top: var(--spacing-xsmall); }
/* In a pane of its own height the slot stops at the half court's height at full width, so the points stay under the court, not at the pane's foot. */
.app-tracker__live--court .app-tracker__court-slot { max-height: calc(100cqw * 15.3 / 14.18); }

/* The court slot is a size container: the court window takes the largest size that fits.
   Every size below is in court meters plus the drawing's 0.15 m margin (app_view_court_view_box()): the whole court is 28.3 × 15.3.
   A half's window is 14.18 × 15.3: the margin at the baseline and the sidelines, but at the center line only half its 0.06 m line, so no backcourt floor shows. */
/* Above the buttons (a hugging pane) the slot is the whole court at the content's full width; the half court gets the same height, so "All" and a period never change it.
   In a pane of its own height (beside the buttons) it grows into that height instead, and the court window takes the largest size that fits. */
.app-tracker__court-slot { position: relative; flex: 1 1 auto; min-height: 160px; aspect-ratio: 28.3 / 15.3; container-type: size; display: flex; align-items: center; justify-content: center; }
.app-court {
    /* Whole pixels, like the drawing's width: a scroll position is a whole pixel, so the right half's snap point lands exactly. */
    width: round(down, min(100cqw, calc(100cqh * 14.18 / 15.3)), 1px);
    aspect-ratio: 14.18 / 15.3;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.app-court::-webkit-scrollbar { display: none; }
/* Two snap points, one window each: the left half up to the center line's far edge, and the right half from its near edge.
   They lie above the drawing (the ::after one over the right half), so taps pass through them to the court.
   Rounded down, the drawing is limited by its width, so it fills the inner box from edge to edge (the viewBox keeps its ratio). */
.app-court__inner { position: relative; width: round(down, calc(100% * 28.3 / 14.18), 1px); height: 100%; }
.app-court__inner::before,
.app-court__inner::after { content: ''; position: absolute; top: 0; width: calc(100% * 14.18 / 28.3); height: 100%; pointer-events: none; }
.app-court__inner::before { left: 0; scroll-snap-align: start; }
.app-court__inner::after { right: 0; scroll-snap-align: end; }
.app-court__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-x; }
/* "All": the whole court, the largest size that fits the same slot, so nothing below moves; nothing scrolls. */
.app-tracker[data-overview] .app-court { width: min(100cqw, calc(100cqh * 28.3 / 15.3)); aspect-ratio: 28.3 / 15.3; overflow: hidden; }
.app-tracker[data-overview] .app-court__inner { width: 100%; }

/* While a shot waits for its spot: the court's lines turn primary, and "Save without spot" takes the score's place. */
.app-tracker[data-shot-pending] .app-court__line { stroke: var(--md-primary); }
/* The area where the waiting shot counts lights up: a 2 inside the attacked 3-point line, a 3 everywhere else, the backcourt too (user decision, 2026-10-14). */
.app-court__zone { fill: none; }
.app-tracker[data-shot-points="2"] .app-court__zone[data-attacked],
.app-tracker[data-shot-points="3"] .app-court__floor { fill: var(--md-surface-container-highest); }
.app-tracker[data-shot-points="3"] .app-court__zone[data-attacked] { fill: var(--md-surface-container-high); }
/* The marks take the color the lines do not have, so they stay readable on primary lines. */
.app-tracker[data-shot-pending] .app-shot { stroke: var(--md-outline); }
/* As high as the bar, so the buttons below stay put when the bar and the score swap. */
.app-tracker__status { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.app-tracker__score[hidden] { display: none; }
/* In the court's toolbar the points are plain text between the arrows. They share one cell with "Save without spot":
   the hidden one keeps its width, so the toolbar and its arrows stay put when the two swap. */
.app-tracker__status-slot { display: grid; justify-items: center; align-items: center; padding: 0 var(--spacing-xsmall); }
.app-tracker__status-slot > * { grid-area: 1 / 1; }
.app-tracker__status-slot > [hidden] { display: block; visibility: hidden; }
.app-tracker__status-slot > .app-tracker__score { padding: 0; background: none; color: var(--md-on-surface); }

/* No inset of its own: the pane's 16px padding keeps the waiting shot's outline inside the box that scrolls. */
.app-tracker__panel { display: flex; flex-direction: column; }
/* Her points as a tertiary pill, 40px like the "Save without spot" button, so the 56px row never grows when the two swap. */
.app-tracker__score {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 var(--spacing-large);
    border-radius: 20px;
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
    font-size: var(--md-title-medium-size);
    font-weight: var(--md-title-medium-weight);
    line-height: var(--md-title-medium-line-height);
    font-variant-numeric: tabular-nums;
}
/* At most 3 columns, fewer when a button would get under 160px (count circle, its gap, a two-line label). */
.app-tracker__buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(160px, (100% - 2 * var(--spacing-xsmall)) / 3), 1fr));
    gap: var(--spacing-xsmall);
}
/* The shots in two rows: 2 made, 2 missed, then 3 made, 3 missed; the waiting one keeps its color, the others turn to the disabled look. */
.app-tracker__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xsmall); }
.app-tracker__shots .ui-button,
.app-tracker__buttons .ui-button { width: 100%; }
.app-tracker__shots .ui-button[data-active] { outline: 2px solid var(--md-primary); outline-offset: 2px; }
/* The end dialog's two score fields, one under the other. */
.app-end-score { display: flex; flex-direction: column; gap: var(--spacing-small); margin-top: var(--spacing-medium); }

/* The game setup: one field per row, the save button full width at the end. */
.app-setup { display: flex; flex-direction: column; gap: var(--spacing-large); }
.app-setup > .ui-button { justify-content: center; }