/*
 * The free-basketball modal — the comparison table's "Men's regulation outdoor
 * rubber" line, opened.
 *
 * Served as a static asset and pulled in by `<BallStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css: a bundled import
 * attaches the chunk to the shared `[brand]` layout segment and Next then emits
 * a <link> to it on every brand's every page.
 *
 * Class prefix `sf-ball-`.
 *
 * THE PANEL IS THE DELIVERY MODAL'S, RE-STATED IN ITS OWN PREFIX and NOT
 * re-invented: the same ink-55% scrim, the same 36px scrim padding, the same
 * surface panel with the control radius and the same 24/60 shadow, the same
 * `well` header band with the close disc at its top-right, the same 8px rise on
 * open and the same reduced-motion floor. That modal's own stylesheet explains
 * every one of those values; what is copied here is the RESULT, because the two
 * panels are the same pattern at two sizes and a shared base class would couple
 * this small modal to that large one's layout grid.
 *
 * The one difference that is a decision rather than a copy: this panel is 520px
 * against the delivery modal's 780. It carries a square photograph and two
 * paragraphs, and a 780px box would set those paragraphs at a line length
 * nothing else on the site uses.
 */

/* ------------------------------------------------------- the focus ring -- */

/*
 * EVERY INTERACTIVE CONTROL IN THIS SHEET, in one block — the site-wide ruling
 * (chrome.css, §the-focus-ring). The panel is `surface`, so this is the light
 * ground's ring.
 */
.sf-ball__close:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/*
 * The scrim is a scroll container, which Chrome makes keyboard-focusable so it
 * can be scrolled without a pointer. It is therefore a tab stop and needs a
 * ring, drawn INSIDE because it runs to every edge of the viewport.
 */
.sf-ball__scrim:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-inset, -2px);
}

/* ------------------------------------------------------------ the frame -- */

/*
 * The UA stylesheet gives a `<dialog>` a centred, bordered, max-width box. None
 * of that is wanted — the geometry below is the modal's own — so it is all
 * reset, exactly as `.sf-dlv` resets it.
 *
 * `line-height: normal` because globals.css sets 1.65 on `body` and this panel
 * declares its own leading per block; `text-align: left` because a modal
 * inherits from wherever it is mounted, and this one is mounted inside a table
 * cell that may be centred.
 */
.sf-ball {
  background: transparent;
  border: 0;
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-body, system-ui, sans-serif);
  height: 100%;
  inset: 0;
  line-height: normal;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  text-align: left;
  width: 100%;
}

/* One element owns the wash: a `::backdrop` left at the UA default would darken
 * underneath the scrim and the two would compound. */
.sf-ball::backdrop {
  background: transparent;
}

/*
 * `rgba(23,24,26,0.55)` — the platform's modal scrim, written as a literal for
 * the reason delivery.css records: a colour token cannot carry an alpha channel.
 *
 * `align-items: flex-start` so a panel taller than the viewport starts at the
 * top and scrolls rather than hanging off both ends; `position: relative`
 * because it is a scroll container and an absolutely positioned descendant of a
 * wholly static ancestry would otherwise extend the DOCUMENT's overflow.
 */
.sf-ball__scrim {
  align-items: flex-start;
  background: rgba(23, 24, 26, 0.55);
  display: flex;
  height: 100%;
  justify-content: center;
  overflow-y: auto;
  padding: 36px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.sf-ball__panel {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-control);
  box-shadow: 0 24px 60px rgba(23, 24, 26, 0.35);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 520px;
}

/*
 * The open transition. The boards carry appearance and never motion, so this is
 * the smallest honest thing: the panel rises 8px and fades in over 160ms.
 * Reduced motion gets the end state with no animation at all — not a shorter
 * one.
 */
@media (prefers-reduced-motion: no-preference) {
  .sf-ball[open] .sf-ball__panel {
    animation: sf-ball-rise 160ms ease-out;
  }
}

@keyframes sf-ball-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------- the header -- */

.sf-ball__head {
  background: var(--brand-color-well, #f1f0ec);
  padding: 26px 32px;
  position: relative;
  text-align: center;
}

.sf-ball__close {
  align-items: center;
  background: var(--brand-color-surface, #ffffff);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--brand-color-muted, #6c6a62);
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
}

.sf-ball__close:hover {
  color: var(--brand-color-ink, #17181a);
}

/* The clip pattern: read, never drawn. */
.sf-ball__sr {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 * globals.css styles every h1-h3 with the heading face at weight 500, a -0.015em
 * track, 1.12 leading and `text-wrap: balance`. This panel wants its own, so all
 * five are restated — `wrap`, the initial value, is what turns the balancing
 * off, and it is spelled `wrap` rather than `normal` because `normal` is
 * `white-space`'s keyword and gets dropped at parse time (the site-wide defect
 * found 2026-08-26).
 */
.sf-ball__title {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-product);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  text-wrap: wrap;
}

.sf-ball__lede {
  color: var(--brand-color-muted, #6c6a62);
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* ------------------------------------------------------------- the body -- */

/*
 * The photograph is square and runs the panel's full width, with no radius of
 * its own: the panel clips, so the corners it needs are the panel's.
 */
.sf-ball__photo {
  display: block;
  height: auto;
  width: 100%;
}

.sf-ball__body {
  padding: 24px 32px 28px;
}

.sf-ball__para {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

.sf-ball__para + .sf-ball__para {
  margin-top: 12px;
}

/* -------------------------------------------------------------- a phone -- */

@media (max-width: 767.98px) {
  /* The scrim's 36px is a desktop margin. On a 390px phone it costs a fifth of
   * the width, and the panel is already `max-width: 100%`. */
  .sf-ball__scrim {
    padding: 16px;
  }

  .sf-ball__head {
    padding: 22px 24px;
  }

  .sf-ball__body {
    padding: 20px 24px 24px;
  }
}