/* The hosted login page — the light-DOM twin of Siegel's `<siegel-sign-in>`.
   Tokens come from `siegel/tokens/tokens.css`, which the page links first.
   What this mirrors and why the component itself is not used: IntegrationGuide.md §3c. */

body { display: grid; place-items: center; min-height: 100vh; padding: 24px; box-sizing: border-box; }

/* The card: <siegel-panel-shell>'s chrome, at the component's width and inset. */
.single, .face {
  box-sizing: border-box; width: 320px; max-width: 100%; padding: 28px 24px;
  border: 1px solid var(--divider); border-radius: 8px; background: var(--surface);
}
h1 { margin: 0 0 20px; font-size: 20px; font-weight: 600; text-align: center; color: var(--text); }

/* The controls: the shared sheet's rules, through the same density tokens rather than the
   numbers they resolve to. */
form { display: flex; flex-direction: column; gap: 14px; }
label { display: block; font-size: 12px; color: var(--text-muted); }
label input { display: block; width: 100%; margin-top: 4px; }
input {
  font: inherit; font-size: var(--ctl-font-size); height: var(--ctl-h); box-sizing: border-box; padding: var(--ctl-pad-y) 8px;
  border: 1px solid var(--control-border); border-radius: var(--ctl-radius);
  background: var(--control-bg); color: inherit;
}
button {
  font: inherit; font-size: var(--ctl-font-size); height: var(--ctl-h); width: 100%; margin-top: 2px; cursor: pointer;
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
  border: 1px solid var(--control-border); border-radius: var(--ctl-radius);
  background: var(--control-bg); color: inherit;
}
button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
button.primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--page)); }
button.primary:active { background: color-mix(in srgb, var(--primary) 78%, var(--page)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* One line per form, held open so the card does not resize when a message appears. */
.error { min-height: 1.2em; margin: 0; font-size: 13px; text-align: center; color: var(--error); }

/* Signup: the faces stack in one grid cell, and the hidden checkbox spins them. */
.card { width: 320px; max-width: 100%; perspective: 1200px; }
.card-inner { display: grid; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-toggle:checked ~ .card-inner { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.flip-link { display: inline-block; margin-top: 18px; color: var(--accent); font-size: 13px; cursor: pointer; }
.flip-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .card-inner { transition: none; } }