/* =====================================================================
   NextUp Component Library — the single source for governed UI
   components across every NextUp surface. Registered components are
   listed in COMPONENT-REGISTRY.md. Pages CONSUME these classes; they
   never copy component CSS locally. Change a component here and every
   profile inherits the change on next deploy.
   ===================================================================== */

/* ---------------------------------------------------------------------
   COMPONENT: Taka Button  (registry id: taka-button)
   Official design approved by Jerry, 2026-10-20 (reference screenshot:
   royal-blue gradient pill, luminous blue outline, large gold play
   disc with black triangle, bold condensed uppercase white label).
   Markup contract (emitted by the profile renderer and baked into
   static profiles — never hand-edited per page):

     <a class="nu-taka-btn" data-nu-component="taka-button"
        data-live-taka="1" href="/taka/<slug>/"
        aria-label="Watch <FirstName> on Taka">
       <span class="nu-taka-btn__disc" aria-hidden="true">
         <svg viewBox="0 0 24 24" focusable="false"><path d="M8 5v14l11-7z"/></svg>
       </span>
       <span class="nu-taka-btn__label">WATCH ON TAKA</span>
     </a>

   Display rule: rendered ONLY when the player has an authorized Taka
   destination in the canonical D1 records (the /taka/<slug>/ bridge
   resolves it). No destination, no button — never a placeholder link.
   --------------------------------------------------------------------- */
.nu-taka-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* FROZEN GEOMETRY — Jerry's approved size (the original Oct 15
     design, restored 2026-10-21 by his direct order after the
     standardization stretched the pill to full hero width).
     Content-sized compact pill: it must NEVER span the hero width.
     Do not enlarge, restyle, or reposition this component without
     Jerry's explicit permission; a functional fix does not
     authorize a visual change. Regression: tools/component-visual-check.py
     measures this geometry against the frozen baseline. */
  flex: 0 0 auto;
  width: auto;
  min-height: 46px;
  padding: 10px 20px 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 185, 255, .9);
  background: linear-gradient(100deg, #0a2a6e 0%, #1450b4 42%, #2f7de1 78%, #3b8bff 100%);
  box-shadow:
    0 12px 36px rgba(30, 100, 230, .45),
    0 3px 10px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -14px 26px rgba(0, 18, 70, .28);
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nu-taka-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}
.nu-taka-btn__disc {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe37e 0%, #f6c945 55%, #eaa90c 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .35),
    0 0 22px rgba(246, 201, 69, .45),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 8px rgba(160, 100, 0, .35);
}
.nu-taka-btn__disc svg {
  width: 42%;
  height: 42%;
  margin-left: 6%;
  fill: #0b0b0e;
  display: block;
}
.nu-taka-btn__label {
  font-family: "NU Display", "Arial Narrow", "Roboto Condensed", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 20, 80, .35);
}
.nu-taka-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 44px rgba(30, 100, 230, .55),
    0 5px 14px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -14px 26px rgba(0, 18, 70, .28);
}
.nu-taka-btn:active {
  transform: translateY(0) scale(.99);
  filter: brightness(.98);
}
.nu-taka-btn:focus-visible {
  outline: 3px solid #f6c945;
  outline-offset: 3px;
}
/* Disabled: no authorized destination rendered as an inert control
   (only used where a layout must reserve the slot; profiles omit the
   button entirely instead). */
.nu-taka-btn--disabled,
.nu-taka-btn[aria-disabled="true"] {
  opacity: .45;
  filter: grayscale(.35);
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
/* Loading: gentle disc pulse while the destination resolves. */
.nu-taka-btn--loading .nu-taka-btn__disc {
  animation: nu-taka-pulse 1.1s ease-in-out infinite;
}
@keyframes nu-taka-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .nu-taka-btn { transition: none; }
  .nu-taka-btn:hover { transform: none; }
  .nu-taka-btn:active { transform: none; }
  .nu-taka-btn--loading .nu-taka-btn__disc { animation: none; }
}