/* backend/resources/static/foundation/ssr.css - #16 task 4.1. The Foundation classes the server-rendered sign-in, account
   and editor message pages need (themes/default/{auth,account}.html, views/editor/message.html), as `nl-` classes scoped
   under `.nl-ssr` so they never leak into the public Local theme around them. Mirrors design/foundation/components.css
   (sections 1-3 + card); every colour is a --nl-* token from ssr-tokens.css (load that first), tints are color-mix() of a
   token. Light / dark follow ssr-tokens.css (public data-theme attribute, else the OS). Control Size Contract: 36px
   controls, 44px on the auth forms (-auth). Hindi / Telugu: no uppercase, letter-spacing only on ASCII codes, line-height
   >= 1.5 on text. */

/* ---- Non-colour variables + the few dark adjustments the React primitives carry (components.css section 0) ---- */
.nl-ssr {
  --nl-text-ui: 0.875rem;
  --nl-radius-sm: calc(var(--nl-radius) * 0.6);
  --nl-radius-md: calc(var(--nl-radius) * 0.8);
  --nl-radius-lg: var(--nl-radius);
  --nl-radius-xl: calc(var(--nl-radius) * 1.4);
  --nl-radius-pill: calc(var(--nl-radius) * 2.6);
  --nl-control-sm: 32px;
  --nl-control: 36px;
  --nl-control-auth: 44px;
  --nl-duration: 150ms;
  --nl-field-bg: transparent;
  --nl-field-disabled-bg: color-mix(in srgb, var(--nl-input) 50%, transparent);
  --nl-outline-bg: var(--nl-background);
  --nl-outline-border: var(--nl-border);
  --nl-destructive-soft: color-mix(in srgb, var(--nl-destructive) 10%, transparent);
  --nl-ring-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-ring) 50%, transparent);
  font-family: var(--nl-font-sans);
  font-size: var(--nl-text-ui);
  line-height: 1.5;
  color: var(--nl-foreground);
  text-align: start;
}
:root[data-theme="dark"] .nl-ssr,
.dark .nl-ssr {
  --nl-field-bg: color-mix(in srgb, var(--nl-input) 30%, transparent);
  --nl-field-disabled-bg: color-mix(in srgb, var(--nl-input) 80%, transparent);
  --nl-outline-bg: color-mix(in srgb, var(--nl-input) 30%, transparent);
  --nl-outline-border: var(--nl-input);
  --nl-destructive-soft: color-mix(in srgb, var(--nl-destructive) 20%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .nl-ssr {
    --nl-field-bg: color-mix(in srgb, var(--nl-input) 30%, transparent);
    --nl-field-disabled-bg: color-mix(in srgb, var(--nl-input) 80%, transparent);
    --nl-outline-bg: color-mix(in srgb, var(--nl-input) 30%, transparent);
    --nl-outline-border: var(--nl-input);
    --nl-destructive-soft: color-mix(in srgb, var(--nl-destructive) 20%, transparent);
  }
}

/* ---- Reset inside the scope (the public theme styles bare h1 / p / button / a) ---- */
.nl-ssr *, .nl-ssr *::before, .nl-ssr *::after { box-sizing: border-box; }
.nl-ssr h1, .nl-ssr h2, .nl-ssr h3, .nl-ssr p, .nl-ssr ul, .nl-ssr form, .nl-ssr fieldset { margin: 0; }
.nl-ssr [hidden] { display: none !important; }
.nl-ssr :focus { outline: none; }
.nl-ssr :focus-visible { outline: none; box-shadow: var(--nl-ring-shadow); }
.nl-ssr a:focus-visible { border-radius: var(--nl-radius-sm); }

/* ---- Page layout ---- */
.nl-ssr.nl-page { padding: clamp(48px, 8vw, 96px) 1rem; }
.nl-ssr.nl-screen { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1rem; background: var(--nl-background); }
.nl-ssr .nl-container { width: 100%; max-width: 440px; margin-inline: auto; }
.nl-ssr .nl-container-wide { max-width: 560px; }
.nl-ssr .nl-stack { display: grid; gap: 1rem; min-width: 0; }
.nl-ssr .nl-stack-sm { gap: 0.5rem; }
.nl-ssr .nl-stack-md { gap: 0.75rem; }
.nl-ssr .nl-stack-lg { gap: 1.5rem; }
.nl-ssr .nl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.nl-ssr .nl-row-between { justify-content: space-between; }
.nl-ssr .nl-row-start { align-items: flex-start; }
.nl-ssr .nl-row-stretch { flex-wrap: nowrap; align-items: stretch; }
.nl-ssr .nl-grow { flex: 1 1 10rem; min-width: 0; }
.nl-ssr .nl-center { text-align: center; }
.nl-ssr .nl-section { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--nl-border); }

/* ---- Card (ui/card.tsx: rounded-xl, ring foreground/10, shadow-card) ---- */
.nl-ssr .nl-card {
  display: grid; gap: 1rem; min-width: 0; padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--nl-foreground) 10%, transparent); border-radius: var(--nl-radius-xl);
  background: var(--nl-card); color: var(--nl-card-foreground); box-shadow: var(--nl-shadow-card);
}
@media (min-width: 640px) { .nl-ssr .nl-card { padding: 2rem; } }
.nl-ssr .nl-card-sm { gap: 0.75rem; padding: 1.25rem 1.5rem; }
.nl-ssr .nl-card-warning { border-color: color-mix(in srgb, var(--nl-warning) 40%, transparent); background: color-mix(in srgb, var(--nl-warning) 8%, var(--nl-card)); }
.nl-ssr .nl-card-head { display: grid; gap: 0.5rem; }
.nl-ssr .nl-panel { display: grid; gap: 0.75rem; min-width: 0; padding: 1rem; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-lg); }

/* ---- Type ---- */
.nl-ssr .nl-title { font-family: var(--nl-font-sans); font-size: 1.75rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: var(--nl-foreground); overflow-wrap: anywhere; }
.nl-ssr .nl-heading { font-family: var(--nl-font-sans); font-size: 1.0625rem; line-height: 1.5; font-weight: 600; color: var(--nl-foreground); overflow-wrap: anywhere; }
.nl-ssr .nl-lead { font-size: 0.9375rem; line-height: 1.6; color: var(--nl-muted-foreground); }
.nl-ssr .nl-text { font-size: var(--nl-text-ui); line-height: 1.6; }
.nl-ssr .nl-help { font-size: 0.8125rem; line-height: 1.5; color: var(--nl-muted-foreground); }
.nl-ssr .nl-strong { font-weight: 600; }
.nl-ssr .nl-link { color: var(--nl-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.nl-ssr .nl-link:hover { text-decoration-thickness: 2px; }
.nl-ssr .nl-list { display: grid; gap: 0.25rem; padding-inline-start: 1.25rem; list-style: disc; font-size: var(--nl-text-ui); line-height: 1.6; }
.nl-ssr .nl-list li { overflow-wrap: anywhere; }

/* labelled divider ("or" between the phone and password forms) */
.nl-ssr .nl-divider-text { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--nl-muted-foreground); }
.nl-ssr .nl-divider-text::before, .nl-ssr .nl-divider-text::after { content: ""; flex: 1; border-top: 1px solid var(--nl-border); }

/* ---- Buttons (button.tsx: default / outline / destructive; sm 32 · default 36 · auth 44) ---- */
.nl-ssr .nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: var(--nl-control); padding: 0 1rem; margin: 0;
  border: 1px solid transparent; border-radius: var(--nl-radius-lg);
  font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.25; white-space: nowrap; text-align: center; text-decoration: none; user-select: none; cursor: pointer;
  background: var(--nl-primary); color: var(--nl-primary-foreground);
  transition: background-color var(--nl-duration), border-color var(--nl-duration), color var(--nl-duration), box-shadow var(--nl-duration), transform var(--nl-duration);
}
.nl-ssr .nl-btn:hover { background: color-mix(in srgb, var(--nl-primary) 80%, transparent); color: var(--nl-primary-foreground); }
.nl-ssr .nl-btn:active { transform: translateY(1px); }
.nl-ssr .nl-btn:focus-visible { border-color: var(--nl-ring); }
.nl-ssr .nl-btn:disabled, .nl-ssr .nl-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.nl-ssr .nl-btn-primary { background: var(--nl-primary); color: var(--nl-primary-foreground); }
.nl-ssr .nl-btn-outline { background: var(--nl-outline-bg); color: var(--nl-foreground); border-color: var(--nl-outline-border); }
.nl-ssr .nl-btn-outline:hover { background: var(--nl-muted); color: var(--nl-foreground); }
.nl-ssr .nl-btn-destructive { background: var(--nl-destructive-soft); color: var(--nl-destructive); }
.nl-ssr .nl-btn-destructive:hover { background: color-mix(in srgb, var(--nl-destructive) 25%, transparent); color: var(--nl-destructive); }
.nl-ssr .nl-btn-destructive:focus-visible { border-color: color-mix(in srgb, var(--nl-destructive) 40%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-destructive) 20%, transparent); }
.nl-ssr .nl-btn-sm { height: var(--nl-control-sm); padding: 0 0.75rem; font-size: 0.75rem; gap: 0.375rem; border-radius: var(--nl-radius-md); }
.nl-ssr .nl-btn-auth { height: var(--nl-control-auth); font-size: var(--nl-text-ui); font-weight: 600; }
.nl-ssr .nl-btn-block { display: flex; width: 100%; }

/* ---- Fields (field-classes.ts FIELD_BASE: rounded-lg border-input, 16px text below md, one focus ring) ---- */
.nl-ssr .nl-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.nl-ssr .nl-field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.nl-ssr .nl-field-head .nl-link { font-size: 0.8125rem; }
.nl-ssr .nl-label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--nl-text-ui); font-weight: 500; line-height: 1.5; color: var(--nl-foreground); }
.nl-ssr .nl-input, .nl-ssr .nl-select {
  display: block; width: 100%; min-width: 0; margin: 0;
  height: var(--nl-control); padding: 0.25rem 0.75rem;
  border: 1px solid var(--nl-input); border-radius: var(--nl-radius-lg);
  background: var(--nl-field-bg); color: var(--nl-foreground);
  font: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color var(--nl-duration), box-shadow var(--nl-duration);
}
@media (min-width: 768px) { .nl-ssr .nl-input, .nl-ssr .nl-select { font-size: var(--nl-text-ui); } }
.nl-ssr .nl-input::placeholder { color: var(--nl-muted-foreground); opacity: 1; }
.nl-ssr .nl-input:focus-visible, .nl-ssr .nl-select:focus-visible { border-color: var(--nl-ring); box-shadow: var(--nl-ring-shadow); }
.nl-ssr .nl-input:disabled, .nl-ssr .nl-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--nl-field-disabled-bg); }
.nl-ssr .nl-input[aria-invalid="true"], .nl-ssr .nl-select[aria-invalid="true"] {
  border-color: var(--nl-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-destructive) 20%, transparent);
}
.nl-ssr .nl-input-auth { height: var(--nl-control-auth); }
.nl-ssr .nl-input-code { font-family: var(--nl-font-mono); font-size: 1.25rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.nl-ssr .nl-input-code::placeholder { font-family: var(--nl-font-sans); font-size: var(--nl-text-ui); letter-spacing: normal; }
.nl-ssr .nl-select {
  padding-right: 2.25rem; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--nl-muted-foreground) 50%), linear-gradient(135deg, var(--nl-muted-foreground) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 0.3rem 0.3rem; background-repeat: no-repeat;
}
.nl-ssr .nl-select option { background: var(--nl-popover); color: var(--nl-popover-foreground); }

/* fieldset + radio / checkbox rows (checkbox.tsx / radio.tsx: size-4, border-input; checked = primary) */
.nl-ssr .nl-fieldset { min-width: 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
.nl-ssr .nl-fieldset legend { padding: 0; margin-bottom: 0.375rem; font-size: var(--nl-text-ui); font-weight: 500; line-height: 1.5; }
.nl-ssr .nl-choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.nl-ssr .nl-choice { display: inline-flex; align-items: flex-start; gap: 0.625rem; font-size: var(--nl-text-ui); line-height: 1.5; cursor: pointer; }
.nl-ssr .nl-choice input {
  appearance: none; flex-shrink: 0; width: 1rem; height: 1rem; margin: 0.125rem 0 0;
  border: 1px solid var(--nl-input); border-radius: var(--nl-radius-sm); background: var(--nl-field-bg);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--nl-duration), border-color var(--nl-duration);
}
.nl-ssr .nl-choice input[type="radio"] { border-radius: 50%; }
.nl-ssr .nl-choice input:checked { background: var(--nl-primary); border-color: var(--nl-primary); }
.nl-ssr .nl-choice input[type="checkbox"]:checked::before { content: ""; width: 0.6rem; height: 0.35rem; border: 2px solid var(--nl-primary-foreground); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.nl-ssr .nl-choice input[type="radio"]:checked { background: var(--nl-background); }
.nl-ssr .nl-choice input[type="radio"]:checked::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nl-primary); }
.nl-ssr .nl-choice input:focus-visible { border-color: var(--nl-ring); box-shadow: var(--nl-ring-shadow); }
.nl-ssr .nl-choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ---- Alerts (alert.tsx: rounded-lg border px-4 py-3 text-sm; neutral default + four tones) ---- */
.nl-ssr .nl-alert {
  display: block; width: 100%; padding: 0.75rem 1rem;
  border: 1px solid var(--nl-border); border-radius: var(--nl-radius-lg);
  background: var(--nl-card); color: var(--nl-card-foreground);
  font-size: var(--nl-text-ui); line-height: 1.6; overflow-wrap: anywhere;
}
.nl-ssr .nl-alert-sm { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.nl-ssr .nl-alert-info    { color: var(--nl-info-foreground);    background: color-mix(in srgb, var(--nl-info) 10%, transparent);    border-color: color-mix(in srgb, var(--nl-info) 20%, transparent); }
.nl-ssr .nl-alert-success { color: var(--nl-success-foreground); background: color-mix(in srgb, var(--nl-success) 10%, transparent); border-color: color-mix(in srgb, var(--nl-success) 20%, transparent); }
.nl-ssr .nl-alert-warning { color: var(--nl-warning-foreground); background: color-mix(in srgb, var(--nl-warning) 10%, transparent); border-color: color-mix(in srgb, var(--nl-warning) 20%, transparent); }
.nl-ssr .nl-alert-danger  { color: var(--nl-danger-foreground);  background: var(--nl-destructive-soft);                            border-color: color-mix(in srgb, var(--nl-destructive) 20%, transparent); }

/* ---- Badges (badge.tsx five tones, pill, text-xs; never uppercase) ---- */
.nl-ssr .nl-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 1.25rem; padding: 0 0.5rem; width: fit-content; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--nl-radius-pill);
  font-size: 0.75rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.nl-ssr .nl-badge-neutral { background: var(--nl-muted); color: var(--nl-muted-foreground); border-color: var(--nl-border); }
.nl-ssr .nl-badge-info    { background: color-mix(in srgb, var(--nl-info) 10%, transparent);        color: var(--nl-info-foreground);    border-color: color-mix(in srgb, var(--nl-info) 25%, transparent); }
.nl-ssr .nl-badge-success { background: color-mix(in srgb, var(--nl-success) 10%, transparent);     color: var(--nl-success-foreground); border-color: color-mix(in srgb, var(--nl-success) 25%, transparent); }
.nl-ssr .nl-badge-warning { background: color-mix(in srgb, var(--nl-warning) 10%, transparent);     color: var(--nl-warning-foreground); border-color: color-mix(in srgb, var(--nl-warning) 25%, transparent); }
.nl-ssr .nl-badge-danger  { background: color-mix(in srgb, var(--nl-destructive) 10%, transparent); color: var(--nl-danger-foreground);  border-color: color-mix(in srgb, var(--nl-destructive) 25%, transparent); }

/* ---- Method switcher (two-step sign-in: one link per method, aria-current on the active one) ---- */
.nl-ssr .nl-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.nl-ssr .nl-pill {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.75rem;
  border: 1px solid var(--nl-border); border-radius: var(--nl-radius-pill);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.5; color: var(--nl-foreground); text-decoration: none;
  transition: background-color var(--nl-duration), color var(--nl-duration);
}
.nl-ssr .nl-pill:hover { background: var(--nl-muted); }
.nl-ssr .nl-pill[aria-current="true"] { background: var(--nl-primary); border-color: var(--nl-primary); color: var(--nl-primary-foreground); }

/* ---- Codes: token to send, TOTP secret, backup codes (mono well, never overflows) ---- */
.nl-ssr .nl-code {
  display: block; min-width: 0; padding: 0.5rem 0.75rem;
  border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md); background: var(--nl-muted);
  font-family: var(--nl-font-mono); font-size: 0.9375rem; font-weight: 600; line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-all; font-variant-numeric: tabular-nums;
}
.nl-ssr .nl-code-lg { font-size: 1.0625rem; font-weight: 700; }
.nl-ssr .nl-code-plain { padding: 0; border: 0; background: transparent; }
.nl-ssr .nl-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

/* QR: always on a light well so it scans in dark mode (Canvas of a light color-scheme, no colour literal) */
.nl-ssr .nl-qr { display: block; width: 168px; height: 168px; max-width: 100%; margin-inline: auto; padding: 6px; border-radius: var(--nl-radius-md); color-scheme: light; background: Canvas; }

/* ---- Message page (editor signed-out / no access / unavailable) ---- */
.nl-ssr .nl-message { width: 100%; max-width: 26rem; text-align: center; }
.nl-ssr .nl-message .nl-btn { justify-self: center; }

/* ---- Hindi / Telugu: no negative tracking, taller lines ---- */
.nl-ssr:lang(hi) .nl-title, .nl-ssr:lang(te) .nl-title { letter-spacing: normal; line-height: 1.5; }
.nl-ssr:lang(hi) .nl-btn, .nl-ssr:lang(te) .nl-btn { line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .nl-ssr *, .nl-ssr *::before, .nl-ssr *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* #16 P4: the NextLocal mark (inline SVG in currentColor) in the brand / Local accent. */
.nl-ssr .nl-brand-mark { width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; color: var(--nl-primary); }
.nl-ssr .nl-brand-mark svg { display: block; width: 100%; height: 100%; }