/* GO BEST SEO: the pages a stranger sees before the app (SaaS pivot spec 4.3 to 4.7, 10.7). Package P2-C.
 * Covers the sign-in, sign-up, verify and reset pages (.auth*), the holding page, the 404 page and the placeholder of the app shell (.splash*).
 * Built on tokens.css and components.css; same rules as there: tokens only, logical properties only, 44 px targets, no inline anything.
 *
 * Layout: below 1024 px one column (header with the wordmark and the two toggles, then the card); from 1024 px a brand panel (.auth-aside, dark in both themes) takes the
 * inline-start column and the card sits in the other one. In a right-to-left page the grid mirrors by itself. */

/* ---------------------------------------------------------------- sign-in family */
.auth {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--bg);
  background-image: var(--backdrop);
}
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 100vh; min-block-size: 100dvh; }

.auth-main { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2) var(--space-3); }
.auth-tools { display: flex; align-items: center; gap: var(--space-2); }
.auth-stage { display: grid; flex: 1; place-items: center; padding-block: var(--space-4) var(--space-5); }
.auth-card { inline-size: min(100%, 460px); }
.auth-card-wide { inline-size: min(100%, 520px); }

.auth-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}
.auth-foot a { color: var(--ink-soft); }
.auth-foot a:hover { color: var(--ink); }
.auth-fine { max-inline-size: 460px; margin-inline: auto; padding-block-end: var(--space-2); color: var(--ink-soft); font-size: var(--text-xs); text-align: center; }
.auth-fine a { color: var(--ink-soft); }

/* the card's own anatomy */
.auth-head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); }
.auth-title { font-size: var(--text-3xl); }
.auth-lead { color: var(--ink-soft); }
.auth-form { display: grid; gap: var(--space-4); }
.auth-actions { display: grid; gap: var(--space-3); }
.auth-alt { color: var(--ink-soft); font-size: var(--text-sm); text-align: center; }
.auth-who { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); }
.auth-who bdi { font-weight: 600; overflow-wrap: anywhere; }
.auth-notice { margin-block-end: var(--space-4); }

/* the screens that only tell the person something (check your inbox, setting up, waiting for approval, link expired) */
.auth-status { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.auth-status .auth-head { justify-items: center; margin-block-end: 0; }
.auth-status .auth-actions { inline-size: 100%; }
.auth-icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.auth-icon .icon { inline-size: 32px; block-size: 32px; }
.auth-icon-ok { background: var(--ok-bg); color: var(--ok); }
.auth-icon-warn { background: var(--warn-bg); color: var(--warn); }
.auth-icon-crit { background: var(--crit-bg); color: var(--crit); }
.auth-address { padding: var(--space-2) var(--space-4); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.auth-progress { display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); }

/* the brand panel: only from 1024 px, dark in both themes, a glow and a faint grid instead of a picture */
.auth-aside {
  position: sticky;
  inset-block-start: 0;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  align-self: start;
  block-size: 100vh;
  block-size: 100dvh;
  overflow: auto;
  padding: var(--space-6) clamp(var(--space-5), 3vw, 56px);
  background: radial-gradient(70% 55% at 15% 0%, var(--aside-glow-1), transparent 70%), radial-gradient(60% 50% at 100% 100%, var(--aside-glow-2), transparent 70%), linear-gradient(155deg, var(--aside-bg-1), var(--aside-bg-2));
  color: var(--aside-ink);
}
.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--aside-rule) 1px, transparent 1px), linear-gradient(90deg, var(--aside-rule) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(closest-side at 30% 35%, black, transparent);
  -webkit-mask-image: radial-gradient(closest-side at 30% 35%, black, transparent);
  opacity: 0.5;
  pointer-events: none;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .wordmark { align-self: flex-start; color: var(--aside-ink); }
.auth-aside .wordmark:hover { color: var(--aside-ink); }
.auth-aside .wordmark-go { background: var(--aside-ink); color: var(--aside-bg-1); }
.auth-aside-body { display: grid; gap: var(--space-5); max-inline-size: 30rem; }
.auth-aside-title { font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; }
.auth-aside-lead { color: var(--aside-ink-soft); font-size: var(--text-md); }
.auth-points { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.auth-points li { position: relative; padding-inline-start: 38px; color: var(--aside-ink); }
.auth-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1px;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--aside-ink);
}
.auth-points li::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: 8px;
  inline-size: 12px;
  block-size: 9px;
  background: var(--aside-bg-1);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.auth-points strong { display: block; font-weight: 700; }
.auth-points span { color: var(--aside-ink-soft); font-size: var(--text-sm); }
.auth-aside-foot { color: var(--aside-ink-soft); font-size: var(--text-sm); }

@media (min-width: 480px) {
  .auth-main { padding-inline: var(--space-5); }
}

@media (min-width: 768px) {
  .auth-main { padding-block-start: var(--space-4); }
  .auth-card { padding: var(--space-6) 40px; }
}

@media (min-width: 1280px) {
  .auth-aside-title { font-size: var(--text-4xl); line-height: 1.12; }
  .auth-aside-lead { font-size: var(--text-lg); }
}

@media (min-width: 1024px) {
  .auth-shell { grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr); }
  .auth-aside { display: flex; }
  .auth-top .wordmark { display: none; }
  .auth-top { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- holding page, 404 and the app placeholder */
.splash {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--bg);
  background-image: var(--backdrop);
}
.splash-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.splash-main { display: grid; flex: 1; place-items: center; padding: var(--space-6) var(--space-4); }
.splash-card { display: grid; justify-items: center; gap: var(--space-5); max-inline-size: 640px; text-align: center; }
.splash-title { font-size: var(--text-4xl); font-weight: 800; }
.splash-lead { max-inline-size: 52ch; color: var(--ink-soft); font-size: var(--text-lg); }
.splash-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.splash-code { color: var(--accent); font-family: var(--font-mono); font-size: clamp(72px, 18vw, 128px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; direction: ltr; }
.splash-foot { padding: var(--space-4); color: var(--ink-soft); font-size: var(--text-sm); text-align: center; }
.splash-foot a { color: var(--ink-soft); }
.splash-panel { inline-size: min(100%, 520px); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); text-align: start; }

/* the holding page carries both languages; the one that matches <html lang> (set by core/boot.js before the first paint) is shown, both show without script */
.lang-block { display: grid; justify-items: center; gap: var(--space-5); }
html[lang="he"] .lang-block[lang="en"], html[lang="en"] .lang-block[lang="he"] { display: none; }
html[lang="he"] .only-en, html[lang="en"] .only-he { display: none; }

/* three short facts under the headline of the holding page (the same facts as the brand panel of the sign-in pages) */
.splash-points { display: grid; gap: var(--space-3); inline-size: min(100%, 880px); margin: 0; padding: 0; list-style: none; text-align: start; }
.splash-points li { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.splash-points strong { display: block; margin-block-end: var(--space-1); color: var(--ink); font-weight: 700; }
.splash-points span { color: var(--ink-soft); font-size: var(--text-sm); }

@media (min-width: 768px) {
  .splash-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}