/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Both native range thumbs stay keyboard accessible; the filled band shows
 * the selected interval without intercepting either handle. */
.replay-timeline { position: relative; height: 3rem; }
.replay-timeline-track { position: absolute; inset: 1.25rem 0 auto; height: .5rem; border-radius: .25rem; background: #d6d3d1; }
.replay-timeline-selection { position: absolute; height: 100%; background: #ea580c; border-radius: .25rem; }
.replay-timeline-handle { position: absolute; inset: 0; width: 100%; height: 3rem; margin: 0; background: transparent; pointer-events: none; appearance: none; }
.replay-timeline-handle::-webkit-slider-thumb { appearance: none; width: 1.25rem; height: 2.5rem; border: 2px solid white; border-radius: .4rem; background: #9a3412; pointer-events: auto; cursor: ew-resize; }
.replay-timeline-handle::-moz-range-thumb { width: 1.25rem; height: 2.5rem; border: 2px solid white; border-radius: .4rem; background: #9a3412; pointer-events: auto; cursor: ew-resize; }
.replay-timeline-handle::-moz-range-track { background: transparent; }
.replay-timeline-handle:focus-visible::-webkit-slider-thumb { outline: 3px solid #0c4a6e; }
.replay-timeline-handle:focus-visible::-moz-range-thumb { outline: 3px solid #0c4a6e; }

/* Org theming (League settings → Branding). Public-surface layouts set
 * --brand-color from the organization record; these rules consume it with
 * the stock Scrimmages orange as the fallback. Kept out of the Tailwind build
 * so org colors never require a CSS rebuild. */
.brand-bg {
  background-color: var(--brand-color, #ea580c);
  color: var(--brand-on-color, #000000);
}
.brand-bg:hover {
  text-decoration: underline;
}
/* Secondary accent + the org's chosen font theme (--brand-font), consumed by
 * public layouts; both fall back to the app default when unset. */
.brand-secondary-bg {
  background-color: var(--brand-secondary, var(--brand-color, #ea580c));
}
.brand-font {
  font-family: var(--brand-font, inherit);
}

/* ---------------------------------------------------------------------------
 * Keyboard focus safety net (WCAG 2.4.7).
 *
 * `button_classes` states a focus ring per variant, but plenty of links and
 * hand-rolled controls do not, and some of them carry a permanent `outline`
 * utility that silently suppresses the browser's own ring. Declaring this in
 * Tailwind's `base` layer (already opened by tailwind.css, so this appends to
 * it) means it lands *below* every `focus-visible:outline-*` utility: it fills
 * the gaps without ever overriding a deliberate ring, including the white and
 * orange-400 rings the film room needs on its dark surfaces.
 * ------------------------------------------------------------------------ */
@layer base {
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  [role="button"]:focus-visible,
  [role="tab"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #ea580c; /* orange-600 */
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
 * Invalid fields.
 *
 * Rails' default `field_error_proc` wraps the offending input *and* its label
 * in `<div class="field_with_errors">`, which turns an inline label into a
 * block and breaks two-column form grids. `display: contents` keeps the
 * wrapper out of layout entirely while still giving us a hook to tint the
 * label and to draw the error outline on the control itself. Paired with the
 * `form_field_error` helper, which supplies aria-invalid/aria-describedby.
 * ------------------------------------------------------------------------ */
.field_with_errors {
  display: contents;
}
.field_with_errors > label {
  color: #b91c1c; /* red-700 */
}
.field_with_errors > input:not([type="checkbox"]):not([type="radio"]),
.field_with_errors > select,
.field_with_errors > textarea {
  outline: 1px solid #dc2626; /* red-600 */
  outline-offset: -1px;
}
.field_with_errors > input:focus,
.field_with_errors > select:focus,
.field_with_errors > textarea:focus {
  outline-width: 2px;
  outline-offset: -2px;
}

.practice-mode { margin-top: 1.5rem; max-width: 70rem; }
.practice-mode .pm-grid { display: grid; gap: 1rem; }
.practice-mode .pm-card { padding: 1.25rem; border: 1px solid #d6d3d1; border-radius: 1rem; background: #fff; margin-bottom: 1rem; }
.practice-mode .pm-clock-card { background: #1c1917; color: #fafaf9; }
.practice-mode .pm-clock { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin: .5rem 0; }
.practice-mode h2 { font-size: 1.2rem; font-weight: 650; margin-bottom: .5rem; }
.practice-mode p, .practice-mode li { margin-bottom: .5rem; }
.practice-mode ul, .practice-mode ol { padding-left: 1.25rem; }
.practice-mode .pm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.practice-mode button, .practice-mode select { min-height: 44px; padding: .65rem 1rem; border-radius: .6rem; border: 1px solid #a8a29e; cursor: pointer; }
.practice-mode button { background: #fff; color: #1c1917; font-weight: 600; }
.practice-mode button.pm-primary { background: #c2410c; color: white; border-color: #c2410c; }
.practice-mode button:disabled { opacity: .5; cursor: default; }
.practice-mode button:focus-visible, .practice-mode select:focus-visible, .practice-mode textarea:focus-visible { outline: 3px solid #f97316; outline-offset: 2px; }
.practice-mode a { color: #c2410c; text-decoration: underline; }
.practice-mode textarea { width: 100%; min-height: 7rem; padding: .75rem; border: 1px solid #a8a29e; border-radius: .6rem; }
.practice-mode progress { width: 100%; accent-color: #ea580c; }
.practice-mode [role=alert] { color: #b91c1c; }
.practice-mode .pm-player { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem 0; }
.practice-mode img { max-width: 100%; max-height: 20rem; object-fit: contain; }
@media (min-width: 64rem) { .practice-mode .pm-grid { grid-template-columns: 2fr 1fr; } }
.practice-mode label { display: block; margin-top: .75rem; }
.practice-mode label.pm-player { display: flex; }