/*
 * The sign-in dialog, shared by the cream landing page and the dark app.
 *
 * landing.css and styles.css deliberately share no tokens — `--bg` and `--ink`
 * mean opposite things in each — so this file styles the dialog against its own
 * small, explicitly named palette instead. Each host page supplies the values:
 *
 *   --auth-surface   the card
 *   --auth-ink       text on the card
 *   --auth-dim       secondary text
 *   --auth-line      borders
 *   --auth-field     provider button background
 *   --auth-accent    focus rings and links
 *   --auth-scrim     the backdrop over the page behind
 *   --auth-error-bg / --auth-error-ink / --auth-error-edge   the failure state
 *   --auth-radius    corner rounding, because the two houses differ
 *
 * That keeps one dialog with one set of behaviour, themed by wherever it opens.
 * Adding a third surface means defining eight variables, not forking this file.
 *
 * Only the landing page uses this today. The app's own gate (styles.css) is
 * already a dark card in the right palette, and converting it would mean
 * rewriting the most safety-critical code in the app for no visible change —
 * so it keeps its own. If it ever adopts this, styles.css defines the eight.
 */

.auth-dialog {
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius, 18px);
  background: var(--auth-surface);
  color: var(--auth-ink);
  padding: 34px 30px 26px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.auth-dialog::backdrop {
  background: var(--auth-scrim);
  backdrop-filter: blur(3px);
}

.auth-dialog[open] {
  /* <dialog> defaults to block; the grid keeps the gaps even. */
  display: grid;
  justify-items: stretch;
}

@media (prefers-reduced-motion: no-preference) {
  .auth-dialog[open] {
    animation: auth-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.auth-mark { display: block; margin: 0 auto 14px; }

.auth-dialog h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--auth-ink);
}

.auth-sub {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--auth-dim);
}

.auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--auth-line);
  background: var(--auth-field);
  color: var(--auth-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-provider:hover:not(:disabled) { border-color: var(--auth-accent); }
.auth-provider:disabled { opacity: 0.5; cursor: progress; }
.auth-provider:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; }

/*
 * Provider marks.
 *
 * Two different rules, because the two brands ask for opposite things and the old
 * shared one served neither: a white disc with dark text, which suited a letter `G`
 * and nothing else.
 *
 * Google's mark is fixed four-colour artwork their guidance forbids recolouring, so
 * it keeps the white disc in both themes — the one thing here that ignores the
 * palette. Apple's is the reverse: their guidance is that the logo takes the
 * button's foreground, so it is drawn in currentColor with no disc at all, and
 * follows the theme by design rather than by accident.
 */
.auth-glyph {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  line-height: 1;
}

.auth-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Google: white disc, artwork untouched, inset so the G is not clipped by it. */
.auth-glyph-google {
  background: #fff;
  border-radius: 50%;
  /* A hairline edge, so the disc still reads as a disc on a white button. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
}

.auth-glyph-google svg {
  width: 74%;
  height: 74%;
}

/* Apple: no disc. The logo inherits the button's text colour, and sits very
   slightly high because the leaf makes its optical centre lower than its box. */
.auth-glyph-apple {
  color: inherit;
}

.auth-glyph-apple svg {
  width: 88%;
  height: 88%;
  transform: translateY(-1px);
}

.auth-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--auth-dim);
}

.auth-note a { color: var(--auth-dim); }
.auth-note a:hover { color: var(--auth-accent); }

.auth-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--auth-error-bg, #fdeceb);
  border-left: 3px solid var(--auth-error-edge, #d14343);
  color: var(--auth-error-ink, #8f2d2d);
  font-size: 13px;
  text-align: left;
}

/* Deliberately last: a close control that is reachable but never the thing your
   eye lands on first. Esc and a backdrop click both work too. */
.auth-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  color: var(--auth-dim);
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.auth-close:hover { color: var(--auth-ink); }
.auth-dialog { position: relative; }