/* --------------------------------------------------------------------------
   Demo sign-in

   Scrolls on its own. #view clips its overflow, and a grid-centred card that
   is taller than the viewport — 400% zoom, a phone on its side — overflowed at
   both ends with the Sign in button out of reach. Auto margins centre it when
   there is room and fall to zero when there is not, so the top stays reachable.
   -------------------------------------------------------------------------- */

.setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 50% -8%, color-mix(in srgb, var(--ds-blue) 16%, transparent), transparent 62%),
    radial-gradient(600px 400px at 85% 110%, color-mix(in srgb, var(--nura-light) 12%, transparent), transparent 60%),
    var(--page-bg);
}

.setup > :first-child,
.setup > .setup-theme + * { margin-top: auto; }

/* The theme switch, in the corner, before signing in. */
.setup-theme {
  position: absolute;
  top: 14px;
  right: 16px;
}

.setup { position: relative; }
.setup > :last-child { margin-bottom: auto; }

.setup-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 32px;
}

/* The wordmark: Nura alone (the Arabic name beside it went, 2026-10-18). */
.setup-name { display: flex; align-items: baseline; gap: 12px; }

.setup-card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-strong);
}

.setup-tagline {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--text-faint);
}

.setup-copy {
  margin: 14px 0 22px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}

.setup-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.setup-input {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-strong);
}

.setup-input:focus-visible {
  border-color: var(--select-border);
  outline-offset: 1px;
}

/* A problem at sign-in: a box with an icon, in the service's own words with
   their first letter raised (2026-10-15). Empty, it takes no room. */
.setup-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  background: var(--danger-soft);
  font-size: 13px;
  line-height: 1.45;
  color: var(--neg);
}

.setup-error:empty { display: none; }
.setup-error svg { flex: none; margin-top: 1px; }
.setup-error span { display: block; }
.setup-error span::first-letter { text-transform: uppercase; }

.setup-card .btn-primary { width: 100%; min-height: 44px; font-size: 14px; }

/* A start that failed: the reason in place of the form, then the way on. */
.setup-failed { margin: 16px 0 20px; font-size: 13.5px; line-height: 1.55; }
.setup-card .setup-signout { width: 100%; margin-top: 8px; }

.setup-mark { margin-bottom: 18px; }

/* The company, under the card. */
.setup-by { margin-top: 28px; }
.setup-by .ds-logo { height: 28px; width: auto; }

.setup-note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint);
}