/* The signed-out page's entire stylesheet.
 *
 * Adapted from /opt/ai-workflows/dashboard/public/signin.css. Everything structural comes
 * from the gateway's shared `portal-wa.css` (loaded alongside this file); what is left here
 * is one button, its interaction states, and the panel's top padding.
 *
 * This file is deliberately tiny and build-free. `/login` and the signed-out landing page
 * are the one surface that must render when the build is missing, broken or mid-deploy — a
 * human who cannot sign in cannot reach the page that would tell them why.
 *
 * Two rules from portal-ux-guidelines.md apply here: text uses TEXT tokens
 * (--wa-color-text-*), never structural ones; and light mode needs stronger accents than
 * dark, so accents mix against the surface rather than against white.
 */

/* The hover/active multiplier flips per theme: a dark surface has headroom to get brighter,
   but a light surface is already near-white and brightness(1.2) clips there — a no-op.
   Light mode darkens instead. */
:root, .wa-dark { --ctl-hover-brightness: 1.2; --ctl-active-brightness: .88; }
.wa-light { --ctl-hover-brightness: .92; --ctl-active-brightness: .85; }

.utm-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--wa-form-control-height, 28px);
  padding: 0 var(--sp-5);
  font: inherit; font-size: var(--wa-font-size-2xs); font-weight: 600;
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-form-control-border-radius, 4px);
  text-decoration: none; cursor: pointer;
  transition: filter .1s ease;
}
.utm-btn:hover { filter: brightness(var(--ctl-hover-brightness)); }
.utm-btn:active { filter: brightness(var(--ctl-active-brightness)); }
.utm-btn:focus-visible { outline: 2px solid var(--wa-color-text-link); outline-offset: 2px; }
.utm-btn-primary {
  color: var(--wa-color-text-link);
  border-color: color-mix(in srgb, var(--wa-color-text-link) 55%, var(--wa-color-surface-border));
  background: color-mix(in srgb, var(--wa-color-text-link) 12%, var(--wa-color-surface-lowered));
}

.utm-signin { padding-top: var(--sp-11); }
.utm-signin .utm-btn { margin-top: var(--sp-5); }
.utm-signin code {
  font-family: var(--wa-font-family-code, ui-monospace, monospace);
  font-size: .9em;
}