/* Tadaaah's buttons and display face, in one place.

   Every page used to style its own buttons: about thirty ways across 42
   templates, teal gradients with a teal glow, typed arrows ("Try Tadaaah →"),
   13px corners on some pages and pills on others. The user picked the three
   directions together (2026-10-02):

     .tb-pri    the navbar's ink pill, on light surfaces           (A, Ink)
     .tb-magic  starts an audit: teal with the wand from the cursor (B, Wand)
     on dark    both turn into a mint key that sinks when pressed  (C, Keycap)

   Rules: a label says what happens; no typed arrows, gradients or glows; one
   main button per screen; three sizes, one shape; lift 1px on hover, press
   in 1px; a teal ring for keyboard focus.

   A surface is dark when the button carries .tb-dark or sits anywhere inside
   [data-surface="dark"]. Included on every page by templates/_ui.html. */

:root {
  /* The display face: headlines and buttons. Plus Jakarta Sans stays loaded
     for the wordmark, which is the logo and does not change with the type. */
  --tdh-display: 'Funnel Display', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tb-ink: #0b1f1c;
  --tb-ink-hover: #1b3b35;
  --tb-teal: #0f766e;
  --tb-teal-hover: #0c6a63;
  --tb-mint: #5eead4;
  --tb-mint-hover: #72efda;
  --tb-mint-ink: #053b34;
  --tb-coral: #b4452e;
  --tb-ring: #14b8a6;
}

.tb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-family: var(--tdh-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s cubic-bezier(.2, .8, .2, 1), background-color .15s ease,
              box-shadow .15s ease, color .15s ease;
}
.tb:hover { text-decoration: none; }
.tb:focus { outline: none; }
.tb:focus-visible { outline: 2px solid var(--tb-ring); outline-offset: 3px; }
.tb:hover:not(:disabled):not(.is-disabled) { transform: translateY(-1px); }
.tb:active:not(:disabled):not(.is-disabled) { transform: translateY(1px); transition-duration: .06s; }
.tb:disabled, .tb.is-disabled, .tb[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }

.tb-sm { height: 38px; padding: 0 15px; font-size: 13.5px; gap: 7px; }
.tb-lg { height: 54px; padding: 0 28px; font-size: 16.5px; }
.tb-block { display: flex; width: 100%; }
.tb { max-width: 100%; }

/* A phone: a long label wraps rather than running past its card. Short ones
   keep their height, which becomes a minimum. */
@media (max-width: 480px) {
  .tb { white-space: normal; text-align: center; line-height: 1.2; height: auto;
        min-height: 46px; padding-block: 10px; }
  .tb-sm { min-height: 38px; padding-block: 8px; }
  .tb-lg { min-height: 54px; padding-block: 12px; }
}

/* Main: ink on light. */
.tb-pri {
  background: var(--tb-ink);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.tb-pri:hover { background: var(--tb-ink-hover); color: #fff; }
.tb-pri:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); }

/* Outline. */
.tb-sec {
  background: transparent;
  color: var(--tb-ink);
  box-shadow: inset 0 0 0 1.5px rgba(11, 31, 28, .2);
}
.tb-sec:hover { color: var(--tb-ink); box-shadow: inset 0 0 0 1.5px var(--tb-ink); }

/* Plain: a button that reads as text until you point at it. */
.tb-quiet { background: transparent; color: var(--tb-ink); padding-inline: 12px; }
.tb-quiet:hover { color: var(--tb-ink); background: rgba(11, 31, 28, .06); }

/* Destructive: only for actions that remove something. */
.tb-danger { background: transparent; color: var(--tb-coral); box-shadow: inset 0 0 0 1.5px rgba(180, 69, 46, .35); }
.tb-danger:hover { color: #fff; background: var(--tb-coral); box-shadow: none; }

/* Audit: the one action the brand is named after. */
.tb-magic {
  background: var(--tb-teal);
  color: #fff;
  padding-left: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(3, 40, 36, .4);
}
.tb-magic:hover { background: var(--tb-teal-hover); color: #fff; }
.tb-magic:active { box-shadow: inset 0 2px 0 rgba(3, 40, 36, .4); }
.tb-sm.tb-magic { padding-left: 13px; }

/* Dark surfaces: the mint key. */
.tb-dark.tb-pri, [data-surface="dark"] .tb-pri,
.tb-dark.tb-magic, [data-surface="dark"] .tb-magic {
  background: var(--tb-mint);
  color: var(--tb-mint-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(5, 59, 52, .25), 0 1px 0 rgba(0, 0, 0, .35);
}
.tb-dark.tb-pri:hover, [data-surface="dark"] .tb-pri:hover,
.tb-dark.tb-magic:hover, [data-surface="dark"] .tb-magic:hover { background: var(--tb-mint-hover); color: var(--tb-mint-ink); }
.tb-dark.tb-pri:active, [data-surface="dark"] .tb-pri:active,
.tb-dark.tb-magic:active, [data-surface="dark"] .tb-magic:active { box-shadow: inset 0 2px 0 rgba(5, 59, 52, .22); }
.tb-dark.tb-sec, [data-surface="dark"] .tb-sec {
  background: rgba(255, 255, 255, .06);
  color: #eef6f6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(255, 255, 255, .05);
}
.tb-dark.tb-sec:hover, [data-surface="dark"] .tb-sec:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tb-dark.tb-quiet, [data-surface="dark"] .tb-quiet { color: #eef6f6; }
.tb-dark.tb-quiet:hover, [data-surface="dark"] .tb-quiet:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tb-dark:focus-visible, [data-surface="dark"] .tb:focus-visible { outline-color: var(--tb-mint); }

/* Working: the label keeps its width under a spinner. */
.tb.is-loading { color: transparent !important; pointer-events: none; }
.tb.is-loading > * { visibility: hidden; }
.tb.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid;
  border-color: #fff #fff transparent transparent;
  animation: tb-spin .7s linear infinite;
}
.tb-dark.is-loading::after, [data-surface="dark"] .tb-pri.is-loading::after,
[data-surface="dark"] .tb-magic.is-loading::after { border-color: var(--tb-mint-ink) var(--tb-mint-ink) transparent transparent; }
.tb-sec.is-loading::after, .tb-quiet.is-loading::after { border-color: var(--tb-ink) var(--tb-ink) transparent transparent; }
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* The wand: its star turns and throws stardust on hover. */
.tb-wand { width: 19px; height: 19px; flex: none; overflow: visible; }
.tb-sm .tb-wand { width: 16px; height: 16px; }
.tb-wand .tb-star { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tb-wand .tb-dust { opacity: 0; transform-box: fill-box; transform-origin: center;
                    transition: opacity .25s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.tb:hover .tb-wand .tb-star { transform: rotate(72deg) scale(1.18); }
.tb:hover .tb-wand .tb-dust { opacity: 1; transform: translate(1.5px, -1.5px); }

@media (prefers-reduced-motion: reduce) {
  .tb, .tb-wand .tb-star, .tb-wand .tb-dust { transition: none; }
  .tb:hover:not(:disabled), .tb:active:not(:disabled) { transform: none; }
  .tb.is-loading::after { animation-duration: 1.6s; }
}