/* ==========================================================================
   Soul Sounds Academy (SSA) — buttons
   One system for every button. Markup:
     <button class="btn btn--primary">…</button>        (or <a class="btn …">)
     variants  btn--primary · btn--secondary · btn--outline · btn--ghost
               btn--danger · btn--link (+ btn--link-danger) · btn--icon
     sizes     btn--sm · (md default) · btn--lg
     standout  btn--cta on a primary (Sign in, "Enroll a student")

   The Btn module in app.js adds the hover layers and sets .is-hot for a
   real cursor or keyboard focus:
     primary / outline / danger  .btn__clip > .btn__fill, moved in from the
                                 edge the cursor crossed (Motion)
     secondary                   svg.btn__draw, a gold line runs the border
     ghost                       .btn__roll, the label rolls up
     cta                         ::before lifts a shade, .btn__swap arrow leans
                                 forward (sign-in keeps its sheen and twin arrow)
   ========================================================================== */
.btn {
  /* Type: one weight for every label (primary steps up a notch), sizes on a
     12 / 13.5 / 15 ladder, tracking opened a touch at the small end where
     Plex Sans reads tight and closed at the large end */
  --btn-h: 40px;
  --btn-px: 18px;
  --btn-fs: 0.84375rem;   /* 13.5 */
  --btn-track: 0.006em;
  --btn-r: 11px;
  --btn-fill: rgb(var(--paper-rgb) / 0.08);
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-r);
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--btn-fs);
  font-weight: 500;
  letter-spacing: var(--btn-track);
  line-height: 1;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color var(--dur-btn-hover) var(--ease-out),
    background-color var(--dur-btn-hover) var(--ease-out),
    border-color var(--dur-btn-hover) var(--ease-out),
    box-shadow 300ms var(--ease-out),
    opacity var(--dur-btn-hover) var(--ease-out);
}
.btn > * { position: relative; z-index: 1; }
.btn:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--o-3); cursor: not-allowed; box-shadow: none; }
html:not(.fx) .btn:active:not(:disabled) { transform: scale(0.97); }

/* ---------- Sizes ---------- */
.btn--sm { --btn-h: 34px; --btn-px: 12px; --btn-fs: var(--fs-xs); --btn-track: 0.014em; --btn-r: 9px; }
.btn--lg { --btn-h: 50px; --btn-px: 24px; --btn-fs: 0.9375rem; --btn-track: -0.004em; --btn-r: 14px; }
.btn--icon { --btn-h: 36px; width: var(--btn-h); padding: 0; --btn-r: 10px; }
.btn--icon.btn--sm { --btn-h: 28px; --btn-r: 8px; }
.btn:not(.btn--icon):has(> .btn__icon:first-child) { padding-left: calc(var(--btn-px) - 3px); }

.btn__icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.btn--sm .btn__icon { width: 14px; height: 14px; }
.btn__icon-arrow { transition: transform 300ms var(--ease-rise); }
.btn.is-hot .btn__icon-arrow { transform: translateY(2px); }

/* ---------- Variants ---------- */
.btn--primary {
  background: var(--gold-grad);
  color: var(--brass-ink);
  border-color: rgb(var(--brass-rgb) / 0.6);
  /* A lit top edge and a short, neutral drop; no coloured halo */
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.3) inset, 0 1px 2px rgb(0 0 0 / 0.28);
  font-weight: 560;
  --btn-fill: rgb(255 255 255 / 0.14);
}
:root[data-theme="paper"] .btn--primary { --btn-fill: rgb(255 255 255 / 0.12); box-shadow: 0 1px 0 rgb(255 255 255 / 0.3) inset, 0 1px 2px rgb(40 30 10 / 0.18); }

.btn--secondary {
  background: rgb(var(--brass-rgb) / 0.07);
  color: var(--brass);
  border-color: rgb(var(--brass-rgb) / 0.3);
}
.btn--secondary.is-hot { color: var(--brass-hover); background: rgb(var(--brass-rgb) / 0.12); }

.btn--outline {
  color: var(--text-1);
  border-color: var(--line-strong);
  background: var(--surface);
}
.btn--outline.is-hot { border-color: var(--line-hot); }

.btn--ghost { color: var(--text-2); }
.btn--ghost.is-hot { color: var(--text-1); background: var(--surface-2); }

.btn--danger {
  color: var(--ember);
  border-color: rgb(var(--ember-rgb) / 0.4);
  background: rgb(var(--ember-rgb) / 0.06);
  --btn-fill: rgb(var(--ember-rgb) / 0.16);
}
.btn--danger.is-hot { border-color: rgb(var(--ember-rgb) / 0.8); }

.btn--link {
  /* Row actions (Edit / Delete / Enroll): sized as real click targets */
  --btn-h: 34px; --btn-px: 14px; --btn-fs: var(--fs-sm); --btn-track: 0.006em;
  border: 0; background: none; color: var(--text-2);
}
.btn--link.is-hot { color: var(--text-1); }
.btn--link-danger.is-hot { color: var(--ember); }

.btn--icon { color: var(--text-2); }
.btn--icon.is-hot { color: var(--text-1); }

/* ---------- Hover layers ---------- */
.btn > .btn__clip {
  position: absolute; inset: 0; z-index: 0;
  border-radius: calc(var(--btn-r) - 1px);
  overflow: hidden;
  pointer-events: none;
}
.btn__fill { position: absolute; inset: 0; background: var(--btn-fill); transform: translateX(-101%); }
html:not(.fx) .btn__fill,
.reduce-motion .btn__fill { transform: none !important; opacity: 0; transition: opacity var(--dur-btn-hover) var(--ease-out); }
html:not(.fx) .btn.is-hot .btn__fill,
.reduce-motion .btn.is-hot .btn__fill { opacity: 1; }
.btn:disabled .btn__fill { opacity: 0; }

.btn > .btn__draw {
  position: absolute; z-index: 2;
  left: -1px; top: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  overflow: visible; pointer-events: none;
}
.btn__draw rect {
  fill: none; stroke: var(--brass); stroke-width: 1.2;
  rx: var(--btn-r);
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 620ms var(--ease-emphasis);
}
.btn.is-hot .btn__draw rect { stroke-dashoffset: 0; }
.btn.is-drawn-out .btn__draw rect { stroke-dashoffset: -100; }
.btn.is-draw-reset .btn__draw rect { transition: none; stroke-dashoffset: 100; }

.btn__roll { display: inline-grid; overflow: hidden; line-height: 1.3; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.btn__roll-row { grid-area: 1 / 1; transition: transform 380ms var(--ease-emphasis); }
.btn__roll-row + .btn__roll-row { transform: translateY(115%); }
.btn.is-hot .btn__roll-row:first-child { transform: translateY(-115%); }
.btn.is-hot .btn__roll-row + .btn__roll-row { transform: none; }

/* CTA: the surface lifts a shade and the arrow leans forward. Nothing else. */
.btn--cta { overflow: hidden; }
.btn--cta::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: var(--btn-fill);
  opacity: 0;
  transition: opacity var(--dur-btn-hover) var(--ease-out);
  pointer-events: none;
}
.btn--cta.is-hot::before { opacity: 1; }
.btn__swap { display: inline-grid; overflow: hidden; }
.btn__swap > * { grid-area: 1 / 1; transition: transform 240ms var(--ease-out), opacity 220ms var(--ease-out); }
.btn__swap > :last-child { display: none; }
.btn.is-hot .btn__swap > :first-child { transform: translateX(3px); }

/* Sign-in keeps its original treatment (the login screen is left as it was):
   a sheen sweep, a glow ring and the arrow handing over to its twin */
.btn--primary.btn--cta.login-submit { box-shadow: var(--shadow-btn-rest); --btn-fs: var(--fs-base); --btn-track: 0.005em; font-weight: 600; font-variant-numeric: normal; }
.login-submit.btn--cta::before {
  inset: -2px; opacity: 1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-emphasis);
}
.login-submit.btn--cta.is-hot::before { transform: translateX(120%); }
.login-submit.btn--cta.is-hot { box-shadow: var(--shadow-btn-hover), var(--glow-brass-soft), 0 0 0 4px rgb(var(--brass-rgb) / 0.12); }
.login-submit .btn__swap > * { transition: transform 380ms var(--ease-emphasis), opacity 220ms var(--ease-out); }
.login-submit .btn__swap > :last-child { display: block; transform: translateX(-130%); opacity: 0; }
.login-submit.is-hot .btn__swap > :first-child { transform: translateX(130%); opacity: 0; }
.login-submit.is-hot .btn__swap > :last-child { transform: none; opacity: 1; }

.btn--link::after {
  content: ""; position: absolute; z-index: 1;
  left: var(--btn-px); right: var(--btn-px); bottom: 8px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 280ms var(--ease-emphasis);
}
.btn--link.is-hot::after { transform: scaleX(1); transform-origin: left; }

.btn--icon::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: var(--surface-3);
  opacity: 0; transform: scale(0.7);
  transition: opacity var(--dur-btn-hover) var(--ease-out), transform 360ms var(--ease-rise);
}
.btn--icon.is-hot::before { opacity: 1; transform: none; }
.btn--icon .btn__icon { transition: transform 420ms var(--ease-rise); }
.btn--icon.is-hot .btn__icon { transform: rotate(90deg); }

/* ---------- Loading & success ---------- */
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading:disabled { opacity: 1; }
.btn.is-loading > :not(.btn__clip):not(.btn__draw),
.btn.is-success > :not(.btn__clip):not(.btn__draw):not(.btn__check) { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; z-index: 3;
  left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  transform: none; background: none;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { rotate: 360deg; } }
.btn > .btn__check {
  position: absolute; z-index: 3;
  left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Reduced motion ---------- */
.reduce-motion .btn__roll-row { transition-property: none; }
.reduce-motion .btn.is-hot .btn__roll-row:first-child,
.reduce-motion .btn__roll-row + .btn__roll-row { transform: none; }
.reduce-motion .btn__roll-row + .btn__roll-row { visibility: hidden; }
.reduce-motion .btn__draw rect { transition: none; }
.reduce-motion .login-submit.btn--cta::before { display: none; }
.reduce-motion .btn__swap > * { transition-property: opacity; }
.reduce-motion .btn.is-hot .btn__swap > :first-child { transform: none; opacity: 1; }
.reduce-motion .btn__swap > :last-child { display: none; }
.reduce-motion .btn--link::after,
.reduce-motion .btn--icon::before { transition-property: opacity; }
.reduce-motion .btn--link::after { transform: scaleX(1); opacity: 0; }
.reduce-motion .btn--link.is-hot::after { opacity: 1; }
.reduce-motion .btn--icon::before { transform: none; }
.reduce-motion .btn--icon.is-hot .btn__icon { transform: none; }
.reduce-motion .btn.is-loading::after { animation: none; border-right-color: currentColor; opacity: 0.45; }

.chip__x:disabled, .dp__nav:disabled, .dp__quick:disabled { opacity: var(--o-3); cursor: not-allowed; }