/* ============================================================
   /login and /add — the two small single-card pages.

   PUBLIC: the gate serves this sheet without a session (isPublicRoute), because the
   login page has to paint for someone who is not signed in yet. Keep it to layout.

   Every colour, size and radius comes from studio.css's tokens. No width media query:
   testInterfaceScaleBreakpoints counts them across a fixed list of sheets, and a
   single centred card does not need one. Class names are `lg-` prefixed; studio.css
   owns component names and donates declarations to any it already defines.
   ============================================================ */

.lg-page {
  max-width: 420px;
}

.lg-card {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--elev-1);
}

.lg-card[hidden] { display: none; }

.lg-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--label);
}

.lg-hint {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3);
  color: var(--label-2);
}

.lg-url {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3);
  color: var(--label);
  overflow-wrap: anywhere;
}

.lg-error {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-3);
  color: var(--red);
  background: var(--red-soft);
  border-radius: var(--r-2);
}

.lg-error[hidden] { display: none; }