/* ═══════════════════════════════════════════════════════════════════════════════
   Buttons — the template's glassy button, everywhere.

   Read off the live template's primary CTA rather than eyeballed:

       background     the accent token
       border-radius  10px
       border         1px solid transparent
       font           600 weight
       box-shadow     inset 0  1px 0 0 rgba(255,255,255,.45)   ← top bevel
                      inset 0 -1px 2px 0 rgba(0,0,0,.12)       ← bottom shade
                            0  8px 22px 0 rgba(accent,.40)     ← coloured bloom

   The three shadows are the whole effect and none is optional. The inset highlight is
   the lit top edge, the inset shade is the surface curving away underneath, and the
   outer bloom is the light it throws — take any one away and it flattens.

   SCALED, NOT COPIED. The template's is a 51px hero CTA at 15px/13px padding; a console
   button is ~34px. Reproducing the shadow at full strength on something two-thirds the
   size reads as a glow bug, so the bloom is tightened while the bevel — which is
   1px regardless of size — stays exactly as measured.

   Loaded after each page's own <style>, so these win on source order rather than by
   out-specifying every existing rule.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Every primary button in the console, whatever it happens to be called. Four names
   for one thing is its own problem, but unifying the CLASSES is a refactor and this is
   a restyle — so the selector list absorbs the inconsistency instead. */
.btn,
.btn-primary,
.hw-btn,
button.btn-primary{
  border-radius:10px;
  border:1px solid transparent;
  font-weight:600;
  font-family:var(--font);
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.45),
    inset 0 -1px 2px 0 rgba(0,0,0,.12),
    0 5px 14px -2px color-mix(in srgb, var(--accent) 40%, transparent);
  transition:box-shadow .16s var(--ease-out, cubic-bezier(.22,.61,.36,1)),
             filter .16s ease, transform .1s ease;
}

/* Hover lifts the bloom rather than changing the fill. The old rule dropped opacity to
   .88, which on a coloured button reads as "disabled" more than "hover". */
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.hw-btn:hover:not(:disabled){
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.5),
    inset 0 -1px 2px 0 rgba(0,0,0,.12),
    0 8px 20px -2px color-mix(in srgb, var(--accent) 52%, transparent);
}

/* Pressed: the bloom collapses and the bevel inverts, so the surface reads as pushed
   IN. 1px of travel — enough to feel, not enough to shift the layout around it. */
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.hw-btn:active:not(:disabled){
  transform:translateY(1px);
  filter:brightness(.98);
  box-shadow:
    inset 0 2px 4px 0 rgba(0,0,0,.18),
    inset 0 1px 0 0 rgba(255,255,255,.18),
    0 2px 6px -2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn:disabled,
.btn-primary:disabled,
.hw-btn:disabled{
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.14);
  filter:none; transform:none; opacity:.5; cursor:not-allowed;
}

/* Secondary / ghost. Same geometry and the same bevel so it belongs to the family, but
   a neutral surface and NO coloured bloom — the glow is what marks the primary action,
   and two of them on a card means neither is primary. */
.btn.ghost-btn,
.btn-ghost,
.hw-btn-ghost,
.hw-btn.hw-btn-ghost{
  background:var(--bg-input);
  color:var(--fg-muted);
  border:1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 2px 0 rgba(0,0,0,.14),
    0 1px 2px 0 rgba(0,0,0,.18);
}
.btn.ghost-btn:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.hw-btn-ghost:hover:not(:disabled){
  color:var(--fg);
  background:var(--bg-hover);
  filter:none;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.09),
    inset 0 -1px 2px 0 rgba(0,0,0,.14),
    0 2px 6px 0 rgba(0,0,0,.22);
}
.btn.ghost-btn:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.hw-btn-ghost:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px 0 rgba(0,0,0,.22),
    inset 0 1px 0 0 rgba(255,255,255,.04);
}

/* Destructive. It inherits .btn, which paints an ACCENT bloom — so a red delete button
   sat inside a blue glow, which is the one colour a destructive action must not borrow.
   .btn.danger only ever overrode background and colour, and a bloom is a shadow.

   Treated as a tonal button rather than a filled one, because that is what it already
   is: --danger-dim is a 13% tint, not a solid fill, so the 45%-white top bevel of a
   filled button was also floating over nothing. Same geometry and the same bevel as
   ghost, tinted red, with a bloom that only appears on hover — a delete button should
   not glow at rest. */
.btn.danger{
  border:1px solid var(--danger-line);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 2px 0 rgba(0,0,0,.14),
    0 1px 2px 0 rgba(0,0,0,.18);
}
.btn.danger:hover:not(:disabled){
  filter:none;
  background:color-mix(in oklab, var(--danger) 22%, transparent);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.09),
    inset 0 -1px 2px 0 rgba(0,0,0,.14),
    0 4px 12px -2px color-mix(in srgb, var(--danger) 34%, transparent);
}
.btn.danger:active:not(:disabled){
  transform:translateY(1px);
  filter:none;
  box-shadow:
    inset 0 2px 4px 0 rgba(0,0,0,.22),
    inset 0 1px 0 0 rgba(255,255,255,.04);
}

/* A light scheme needs a darker top bevel — a 45%-white highlight on a pale surface is
   invisible, and the shade underneath has to do the work instead. */
@media (prefers-color-scheme: light){
  .btn, .btn-primary, .hw-btn, button.btn-primary{
    box-shadow:
      inset 0 1px 0 0 rgba(255,255,255,.38),
      inset 0 -1px 2px 0 rgba(0,0,0,.16),
      0 5px 14px -2px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  .btn.ghost-btn, .btn-ghost, .hw-btn-ghost{
    box-shadow:
      inset 0 1px 0 0 rgba(255,255,255,.7),
      inset 0 -1px 2px 0 rgba(0,0,0,.06),
      0 1px 2px 0 rgba(0,0,0,.06);
  }
}

/* The glow is decoration; the press is feedback. Reduced motion keeps the second. */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-primary, .hw-btn, .btn.ghost-btn, .btn-ghost, .hw-btn-ghost{ transition:none; }
  .btn:active, .btn-primary:active, .hw-btn:active,
  .btn.ghost-btn:active, .btn-ghost:active, .hw-btn-ghost:active{ transform:none; }
}

@supports not (background: color-mix(in srgb, red 40%, transparent)){
  .btn, .btn-primary, .hw-btn{
    box-shadow:
      inset 0 1px 0 0 rgba(255,255,255,.45),
      inset 0 -1px 2px 0 rgba(0,0,0,.12),
      0 5px 14px -2px var(--accent-line);
  }
}