/* =============================================================================
   css/designer-controls.css — the play designer's CONTROL COMPONENTS, lifted
   into one shared sheet (T1, Sep 27 2026; Carlos: "go back to the way you had
   it and just swap out the buttons").

   THE SOURCE, rule for rule:
     .seg / .seg-tab / .seg-tab.active(::after)   css/playmaker.css ~3584-3625
     .pr-btn / .pr-btn--primary / .pr-btn--ghost   css/practice.css 192-223
     --pm-ink / --pm-ink-raised / --seg-raise      css/play-designer-v2.css 92-93
   The tray is a sunken ink strip; the active key is raised (a gradient + a lit
   top edge) and carries a thin glowing accent underline; the primary button is
   the accent as a FILL with dark text; the ghost button is a quiet ink key.

   SCOPED to [data-controls="designer"]: the two stylesheets above are whole-page
   sheets (they reset body, *, button), so a surface cannot link them; and the
   athlete app already has .seg rules of its own (athlete/css/gameday.css,
   home.css). A surface opts in by setting data-controls="designer" on its root
   — the tournament stat keeper does (athlete/modules/keeper-b.js). Sizes are
   the surface's (--dc-u: its unit, 1px by default); the look is this file's.

   TOKENS ONLY: the designer's rgba literals are written as color-mix over
   css/design-system.css tokens; the accent is the surface's (--dc-accent,
   the house accent by default).
   ========================================================================== */
[data-controls="designer"] {
  --dc-u: 1px;
  --dc-accent: var(--gc-accent-primary);
  --dc-on-accent: var(--gc-text-on-accent);
  --pm-ink: color-mix(in srgb, var(--gc-color-neutral-0) 5%, transparent);
  --pm-ink-raised: color-mix(in srgb, var(--gc-color-neutral-0) 14%, transparent);
  --pm-ink-text: var(--gc-color-neutral-400);
  --pm-ink-text-active: var(--gc-color-neutral-0);
  --seg-raise: inset 0 1px 0 color-mix(in srgb, var(--gc-color-neutral-0) 16%, transparent), 0 3px 10px color-mix(in srgb, var(--gc-color-neutral-950) 50%, transparent);
  --seg-sunk: inset 0 0 calc(6 * var(--dc-u)) color-mix(in srgb, var(--gc-color-neutral-950) 70%, transparent);
}

/* ── the segmented tray (playmaker.css .seg) ─────────────────────────── */
[data-controls="designer"] .seg {
  display: flex;
  gap: calc(2 * var(--dc-u));
  padding: calc(3 * var(--dc-u));
  border: 0;
  border-radius: calc(8 * var(--dc-u));
  background: var(--pm-ink);
  box-shadow: var(--seg-sunk);
  overflow: visible;
}
/* the key (playmaker.css .seg-tab) */
[data-controls="designer"] .seg-tab {
  position: relative;
  border: 0;
  border-radius: calc(6 * var(--dc-u));
  background: transparent;
  color: var(--pm-ink-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: color .18s ease, background .18s ease;
}
[data-controls="designer"] .seg-tab.active {
  background: linear-gradient(180deg, var(--pm-ink-raised) 0%, var(--pm-ink) 100%);
  color: var(--pm-ink-text-active);
  box-shadow: var(--seg-raise);
}
/* the accent underline — a hairline that glows; a key can name its own hue */
[data-controls="designer"] .seg-tab.active::after {
  content: "";
  position: absolute;
  bottom: calc(3 * var(--dc-u)); left: 24%; right: 24%;
  height: calc(2 * var(--dc-u));
  border-radius: calc(2 * var(--dc-u));
  background: var(--seg-accent, var(--dc-accent));
  box-shadow: 0 0 calc(8 * var(--dc-u)) var(--seg-accent, var(--dc-accent));
}

/* ── buttons (practice.css .pr-btn) ──────────────────────────────────── */
[data-controls="designer"] .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8 * var(--dc-u));
  border: 1px solid color-mix(in srgb, var(--gc-color-neutral-0) 8%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gc-color-neutral-0) 10%, transparent), 0 3px 8px color-mix(in srgb, var(--gc-color-neutral-950) 40%, transparent);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
[data-controls="designer"] .pr-btn:active { transform: translateY(1px); }
/* the accent as a FILL with dark text — the ONE primary per view */
[data-controls="designer"] .pr-btn--primary {
  background: linear-gradient(135deg, var(--dc-accent), color-mix(in srgb, var(--dc-accent) 78%, var(--gc-color-neutral-950)));
  color: var(--dc-on-accent);
  border-color: transparent;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gc-color-neutral-950) 30%, transparent);
}
[data-controls="designer"] .pr-btn--primary:hover { filter: brightness(1.04); }
/* the quiet ink key */
[data-controls="designer"] .pr-btn--ghost {
  background: var(--pm-ink);
  border-color: color-mix(in srgb, var(--gc-color-neutral-0) 12%, transparent);
  color: var(--pm-ink-text);
}
[data-controls="designer"] .pr-btn--ghost:hover { color: var(--pm-ink-text-active); }
/* a chosen (toggled) button: raised, with the accent along its foot */
[data-controls="designer"] .pr-btn.active {
  box-shadow: var(--seg-raise), inset 0 calc(-3 * var(--dc-u)) 0 var(--dc-accent);
}