/* ==========================================================================
   Thames Uro — Button  (v1.0, 1 Oct 2026)
   Requires tokens.css. Spec: DESIGN_SYSTEM.md → "Button".

   Replaces the five per-page .btn definitions (landing, account, viva,
   watch, podcast) that disagreed on radius, hover and default style.

   Markup:  <a|button class="btn [primary|gold|ghost|danger] [sm|lg] [block]">
   States:  :hover  :active  :focus-visible  :disabled / [aria-disabled="true"]
            [aria-busy="true"] (loading)   [hidden]

   Each variant only sets the --btn-* properties below; the base rule does
   all the drawing. To add a variant, set those properties and nothing else.

   NOT in a cascade layer, on purpose. Unlayered CSS beats layered CSS
   whatever the specificity, so inside @layer the near-universal page resets
   *{padding:0} and a{color:...} silently stripped .btn of its padding and
   gave link-buttons the link colour (caught migrating podcast/watch, 1 Oct).
   Unlayered, plain specificity applies: .btn (0,1,0) beats * and a.
   Consequence: link this file only when migrating a page's buttons, and
   delete that page's own .btn rules in the same change.
   ========================================================================== */

.btn {
  /* default = secondary: surface button with a border */
  --btn-bg:           var(--surface);
  --btn-fg:           var(--text);
  --btn-border:       var(--border);
  --btn-bg-hover:     var(--surface);
  --btn-border-hover: var(--accent);
  --btn-fg-hover:     var(--btn-fg);
  --btn-shadow-hover: none;
  --btn-pad-y:  var(--sp-3);
  --btn-pad-x:  var(--sp-5);
  --btn-fs:     var(--fs-md);
  --btn-min-h:  var(--tap-min);

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out);
}

/* .btn sets display:inline-flex (and .block sets flex), which beat the UA [hidden]
   rule. This bit account.html on 30 Sep, so the guard lives here once. !important
   because hidden must win over every size/variant/context rule, including a page's. */
.btn[hidden] { display: none !important; }

/* ---- Variants --------------------------------------------------------- */

/* Primary: the one main action in a view. Use at most one per region. */
.btn.primary {
  --btn-bg:           var(--accent);
  --btn-fg:           var(--on-accent);
  --btn-border:       var(--accent);
  --btn-bg-hover:     var(--accent-hover);
  --btn-border-hover: var(--accent-hover);
  --btn-shadow-hover: var(--glow-accent);
  font-weight: var(--fw-heavy);
}

/* Gold: Part 2 / premium actions only (Viva room, Part 2 plan). */
.btn.gold {
  --btn-bg:           var(--gold);
  --btn-fg:           var(--on-gold);
  --btn-border:       var(--gold);
  --btn-bg-hover:     var(--gold-hover);
  --btn-border-hover: var(--gold-hover);
  --btn-shadow-hover: var(--glow-gold);
  font-weight: var(--fw-heavy);
}

/* Ghost: low-emphasis actions beside a primary (Cancel, Back, Skip). */
.btn.ghost {
  --btn-bg:       transparent;
  --btn-bg-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --btn-fg:       var(--text-2);
  --btn-fg-hover: var(--text);
  font-weight: var(--fw-semibold);
}

/* Danger: destructive or session-ending actions (End viva, Delete). */
.btn.danger {
  --btn-bg:           var(--danger-bg);
  --btn-fg:           var(--danger);
  --btn-border:       color-mix(in srgb, var(--danger) 45%, transparent);
  --btn-bg-hover:     color-mix(in srgb, var(--danger) 24%, transparent);
  --btn-border-hover: var(--danger);
}

/* ---- Sizes ------------------------------------------------------------ */

.btn.sm {
  --btn-pad-y: var(--sp-2);
  --btn-pad-x: var(--sp-4);
  --btn-fs:    var(--fs-sm);
  --btn-min-h: 36px;   /* dense toolbars only: keep 44px on touch-first screens */
}

.btn.lg {
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  --btn-fs:    var(--fs-base);
  --btn-min-h: 52px;
}

.btn.block { display: flex; width: 100%; white-space: normal; }   /* full-width: let a long label wrap rather than push its container past a phone screen (landing, 1 Oct) */

/* Icon-only: needs aria-label. Square, same height as its size. */
.btn.icon { --btn-pad-x: 0; width: var(--btn-min-h); }

/* ---- States ----------------------------------------------------------- */

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;   /* <a aria-disabled> can't be clicked */
  transform: none;
  box-shadow: none;
}

/* Loading: <button class="btn primary" aria-busy="true">Marking…</button>
   The label stays in the DOM (keeps width and is read out), and is hidden
   visually behind a spinner. Pair with `disabled` to block double submits. */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: var(--r-full);
  animation: btn-spin .7s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* Windows High Contrast / forced colours: keep a visible boundary. */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .btn:focus-visible { outline-color: Highlight; }
}

/* ---- Group ------------------------------------------------------------ */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}