/* ============================================================================
   AUTOGRADE SUNDAY - overlay.css
   DESIGN.md section 9 (team overlay) + section 7 (chips, restated so the
   overlay is correct even if components.css is loaded before it).
   Load LAST, after tokens.css, base.css, components.css.

   Rules obeyed: no radius, no shadow, no gradient, no filter, no card,
   transform/opacity only, one code path for prefers-reduced-motion (the
   duration tokens collapse to 1ms in tokens.css).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Page lock while an overlay is open
   ------------------------------------------------------------------------ */
html.ov-locked,
html.ov-locked body,
html.drawer-locked,
html.drawer-locked body {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------------------
   2. The dialog shell
   ------------------------------------------------------------------------ */
.overlay[hidden] { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: block;
  overflow: hidden;
}

.ov-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.overlay[data-state="open"] .ov-scrim { opacity: 1; }

.ov-inner {
  position: relative;
  z-index: calc(var(--z-scrim) + 1);
  height: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter) var(--s-6);
  background: var(--paper-overlay);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 1240px) {
  .ov-inner { max-width: 1400px; }
}

/* ---------------------------------------------------------------------------
   3. Head - crest (the FLIP object), name, meta strap, close
   ------------------------------------------------------------------------ */
.ov-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-w-mid) solid var(--rule-mid);
}

.ov-crest {
  display: block;
  width: var(--crest-xl);
  height: var(--crest-xl);
  transform-origin: 0 0;
  will-change: transform;
}
/* The transition is armed only for the frame the FLIP plays in, so setting
   the inverse transform on open never animates. */
.ov-crest.is-flipping {
  transition: transform var(--dur-overlay) var(--ease-out);
}
/* Close travels back into the tile faster than it came out. */
.ov-crest.is-flipping-back {
  transition: transform var(--dur-mid) var(--ease-inout);
}

.ov-head h2,
.ov-head .ov-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}

.ov-meta {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-agate-sm);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  line-height: var(--lh-agate);
  color: var(--ink-3);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms var(--ease-out) 60ms;
}
.overlay[data-state="open"] .ov-meta { clip-path: inset(0); }

.ov-close {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.ov-close:hover,
.ov-close:focus-visible { color: var(--amber); }

/* ---------------------------------------------------------------------------
   4. The field
   The chip layer needs ~7% of the field width per chip. Below ~960px of
   field width the chips would collide, so the field keeps a minimum width
   and pans inside its own scroller. The page body never scrolls sideways.
   ------------------------------------------------------------------------ */
.ov-field-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-mid) transparent;
}

.ov-field {
  position: relative;
  container-type: inline-size;
  background: var(--paper-sunk);
  overflow: hidden;
  width: 100%;
  min-width: 960px;
  aspect-ratio: 3 / 4;
  min-height: 560px;
  max-height: calc(100dvh - 300px);
  transform: scaleY(0.86);
  opacity: 0;
  transform-origin: 50% 50%;
  transition:
    transform 260ms var(--ease-inout) 140ms,
    opacity 260ms var(--ease-inout) 140ms;
}
.overlay[data-state="open"] .ov-field {
  transform: scaleY(1);
  opacity: 1;
}
@media (min-width: 720px) {
  .ov-field { aspect-ratio: 16 / 9; min-height: 480px; }
}

.ov-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ov-line {
  fill: none;
  stroke: var(--rule-field);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out) var(--line-delay, 180ms);
}
.overlay[data-state="open"] .ov-line { stroke-dashoffset: 0; }

/* Sidelines first, then the yard lines walking outward, then the line of
   scrimmage last and brightest. Delays live here, not inline. */
.ov-line--side { --line-delay: 180ms; }
.ov-lines .ov-line--yard:nth-of-type(3)  { --line-delay: 190ms; }
.ov-lines .ov-line--yard:nth-of-type(4)  { --line-delay: 199ms; }
.ov-lines .ov-line--yard:nth-of-type(5)  { --line-delay: 208ms; }
.ov-lines .ov-line--yard:nth-of-type(6)  { --line-delay: 217ms; }
.ov-lines .ov-line--yard:nth-of-type(7)  { --line-delay: 226ms; }
.ov-lines .ov-line--yard:nth-of-type(8)  { --line-delay: 235ms; }
.ov-lines .ov-line--yard:nth-of-type(9)  { --line-delay: 244ms; }
.ov-lines .ov-line--yard:nth-of-type(10) { --line-delay: 253ms; }
.ov-lines .ov-line--yard:nth-of-type(11) { --line-delay: 262ms; }
.ov-line--los {
  stroke: var(--field-ink);
  --line-delay: 400ms;
}

.ov-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  max-width: 420px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  pointer-events: none;
}

.ov-chips {
  position: absolute;
  inset: 0;
}

/* Unit end-zone labels: agate, decorative, never the sole carrier of a fact
   (the chips themselves say OFF/DEF through their edge colour and their
   position relative to the line of scrimmage). */
.ov-sideline-label {
  position: absolute;
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-agate-sm);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out) 420ms;
}
.overlay[data-state="open"] .ov-sideline-label { opacity: 1; }
.ov-sideline-label--def { top: var(--s-3); }
.ov-sideline-label--off { bottom: var(--s-3); }

/* ---------------------------------------------------------------------------
   5. Chips (DESIGN section 7)
   ------------------------------------------------------------------------ */
.chip {
  background: var(--paper-raised);
  border-top: 2px solid var(--chip-edge, var(--ink-3));
  padding: var(--s-2) var(--s-3);
  min-width: 96px;
  max-width: 132px;
  display: grid;
  gap: 2px;
  text-align: center;
}
.chip--off  { --chip-edge: var(--turf);  }
.chip--def  { --chip-edge: var(--steel); }
.chip--spec { --chip-edge: var(--ink-3); }
.chip .cname {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-chip);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.chip .cmeta {
  font-family: var(--font-mono);
  font-size: var(--t-chip-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--ink-3);
}
@media (max-width: 719.98px) {
  .chip { min-width: 72px; max-width: 96px; padding: var(--s-1) var(--s-2); }
  .chip .cname { font-size: 0.75rem; }
  .chip .cmeta { font-size: 0.625rem; }
}

/* On the field the chip width is a function of the field width, because the
   placement algorithm spaces the offensive line 8% apart and a fixed-pixel
   chip would collide. 6.9cqw keeps a gutter at every breakpoint; the field's
   min-width keeps the floor legible. */
.ov-chips .chip {
  position: absolute;
  min-width: 0;
  max-width: none;
  width: clamp(64px, 6.9cqw, 128px);
  padding: var(--s-1) var(--s-2);
  overflow-wrap: anywhere;
}
.ov-chips .chip .cname { font-size: var(--t-chip); }
.ov-chips .chip .cmeta { font-size: var(--t-chip-meta); }

/* Entry. transform + opacity only, delay supplied per chip as --chip-delay. */
.ov-chips .chip {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(var(--chip-fromx, 0px), var(--chip-from, 8px));
  transition:
    opacity var(--dur-mid) var(--ease-out) var(--chip-delay, 0ms),
    transform var(--dur-mid) var(--ease-out) var(--chip-delay, 0ms);
}
.overlay[data-state="open"] .ov-chips .chip {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Per-unit entry vectors (DESIGN 9.3 table). */
.chip--u-ol, .chip--u-qb, .chip--u-rb, .chip--u-te, .chip--u-wr { --chip-from:  8px; }
.chip--u-dl, .chip--u-lb                                        { --chip-from: -8px; }
.chip--u-cb                                                     { --chip-from: -8px; }
.chip--u-s                                                      { --chip-from: -14px; }
/* Corners widen to the sideline as they set: they start 8px toward centre. */
.chip--u-cb.chip--right { --chip-fromx: -8px; }
.chip--u-cb.chip--left  { --chip-fromx:  8px; }

/* Closing: every chip leaves as one group, no reverse stagger. */
.overlay[data-state="closing"] .ov-chips .chip,
.overlay[data-state="closing"] .ov-spec-row .chip {
  opacity: 0;
  transition: opacity 120ms var(--ease-out) 0ms;
}

/* ---------------------------------------------------------------------------
   6. Specialists
   ------------------------------------------------------------------------ */
.ov-spec {
  padding-top: var(--s-3);
  border-top: var(--rule-w-hair) solid var(--rule-hair);
}
.ov-spec .kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.ov-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.ov-spec-row .chip {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-mid) var(--ease-out) var(--chip-delay, 0ms),
    transform var(--dur-mid) var(--ease-out) var(--chip-delay, 0ms);
}
.overlay[data-state="open"] .ov-spec-row .chip {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   7. States: loading and failure
   ------------------------------------------------------------------------ */
.ov-note {
  font-family: var(--font-mono);
  font-size: var(--t-agate);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: var(--s-4);
}
.ov-note--error { color: var(--flare-text); }

/* ---------------------------------------------------------------------------
   8. Prose overlay (the "What is this?" explainer, SPEC addendum 1) - it
   borrows the same shell, scrim, FLIP and focus behaviour.
   ------------------------------------------------------------------------ */
.ov-prose {
  max-width: var(--measure);
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-4);
}
.ov-prose section {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--rule-w-hair) solid var(--rule-hair);
}
.ov-prose h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-headline);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}
.ov-prose p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   9. Reduced motion. There is one code path; the tokens already collapse
   every duration to 1ms. These two lines remove the only effects that are
   not duration-driven.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ov-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ov-crest.is-flipping { transition: none; }
}

/* ---------------------------------------------------------------------------
   10. MATCHUP DRAWER - a game slides open into a fantasy-style box score
   instead of the team overlay's centred, FLIPping dialog. Same scrim and
   locking convention, different geometry: the panel lives at the right
   edge and travels in on transform, never a fade.
   ------------------------------------------------------------------------ */
.drawer[hidden] { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: block;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.drawer[data-state="open"] .drawer-scrim { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-scrim) + 1);
  width: min(760px, 94vw);
  background: var(--paper-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5) var(--s-6);
  transform: translateX(100%);
  transition: transform var(--dur-overlay) var(--ease-out);
}
.drawer[data-state="open"] .drawer-panel { transform: translateX(0); }
.drawer[data-state="closing"] .drawer-panel { transition-duration: var(--dur-mid); transition-timing-function: var(--ease-inout); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: var(--rule-w-mid) solid var(--rule-mid);
}
.drawer-titles h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-headline);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
}
.drawer-meta {
  margin: 2px 0 0;
  font-size: var(--t-agate-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--ink-3);
}
.drawer-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--s-1);
}
.drawer-close:hover, .drawer-close:focus-visible { color: var(--amber); }

.boxscore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 599.98px) {
  .boxscore { grid-template-columns: 1fr; }
}

.bs-side-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: var(--rule-w-hair) solid var(--rule-hair);
  margin-bottom: var(--s-3);
}
.bs-side-head img { width: var(--crest-sm); height: var(--crest-sm); }
.bs-side-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.bs-side-total {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-headline);
  color: var(--ink);
}
.bs-side-total--leader { color: var(--turf); }

.bs-group-head {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-agate-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--ink-3);
  margin: var(--s-3) 0 2px;
}
.bs-rows { list-style: none; margin: 0 0 0; padding: 0; }
.bs-row {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-agate-sm);
  line-height: 1.7;
  border-bottom: var(--rule-w-hair) solid var(--rule-hair);
}
.bs-pos { color: var(--ink-3); }
.bs-player { color: var(--ink); overflow-wrap: anywhere; }
.bs-nfl { color: var(--ink-3); font-size: var(--t-agate-sm); margin-left: var(--s-1); }
.bs-points { font-family: var(--font-mono); color: var(--ink-2); text-align: right; }
.bs-points--pending { color: var(--ink-4); }

.bs-note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--t-agate-sm);
  color: var(--ink-3);
  text-align: center;
  padding-block: var(--s-6);
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel { transition: none; }
  .drawer-scrim { transition: none; }
}