/* ═══════════════════════════════════════════════════════════════════════════
   public.css — the session-less pages: login, signup, reset/set password,
   link-account, join, delete-account, privacy, terms, and the bilingual
   mail-link / 404 page (bilingual_message_page). Split out of style.css so a
   sign-in form no longer downloads the whole application stylesheet
   (350 KB raw / 95 KB brotli) as render-blocking CSS.

   Every rule here was MOVED from style.css (one home per rule): a rule used
   only by these documents lives here, a rule they share with the app lives
   at the foot of theme.css under the html.fw-app scope, and a rule only the
   app uses stayed in style.css. The inventory came from CSS rule-usage
   coverage over the ten documents plus a selector-vocabulary sweep for the
   state variants coverage never reaches. Load order is theme.css first, then
   this file — exactly where style.css used to sit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Login / set-password page shared styles ────────────────────── */
.login-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 24px;
  /* Viewport-relative padding: tightens on short/narrow phone screens,
     tops out near the old 3rem/2.5rem on desktop. */
  padding: clamp(1.5rem, 4.5vh, 2.75rem) clamp(1.25rem, 6vw, 2.5rem);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-dialog);
  animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, var(--glow-ambient) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.login-card > * { position: relative; z-index: 1; }

.login-card-narrow { max-width: 480px; }

.form-group { margin-bottom: 1.5rem; text-align: right; }

[dir="ltr"] .form-group { text-align: left; }

.form-group label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; font-weight: 600; transition: color 0.3s; }

.form-group:focus-within label { color: var(--primary); }

.form-group input {
  width: 100%; padding: 1rem;
  background: var(--color-surface-input);
  color: var(--text); font-size: 1rem; text-align: right; direction: ltr;
}

[dir="ltr"] .form-group input { text-align: left; }

.form-group input:focus { background: var(--color-surface-input); }

/* 017 US5 (QW10, FR-019): password reveal/hide toggle. Logical properties
   (inset-inline-end) so the button sits at the field's trailing edge in
   both RTL and LTR, always clear of the typed text; >=44px hit area. */
.password-field-wrap { position: relative; }

.password-field-wrap input { padding-inline-end: 3rem; }

.password-toggle {
  position: absolute;
  inset-inline-end: 0.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--muted);
}

.password-toggle:hover { color: var(--text); background: var(--color-surface-hover); }

.password-toggle[aria-pressed="true"] { color: var(--primary); }

.note-compact { margin-top: var(--space-2); }

.note-before-form { margin-bottom: var(--space-4); }

.status.ok { background: var(--color-success-soft); border: 1px solid var(--green); color: var(--green); }

.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--muted); font-size: 0.85rem; }

.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.skip { display: inline-block; margin-top: 1.25rem; font-size: 0.9rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }

.skip:hover { color: var(--primary); }

/* Tighter vertical rhythm on auth pages — scoped to body.login-page so the
   same classes inside dashboard modals keep their spacing.

   These are deliberately tighter than the app's own rhythm, because the
   whole card is ONE unit the user has to see at once: a sign-in form that
   runs past the fold hides either the submit button or the provider button,
   and on a phone the thing below the fold is the thing that does not get
   used. Nothing here shrinks a control — the inputs keep their 16px floor
   and every target stays >=44px; only the gaps between them close. */
body.login-page .form-group { margin-bottom: 0.7rem; }

body.login-page .form-group label { margin-bottom: 0.3rem; }

body.login-page .subtitle { margin-bottom: 0.9rem; }

body.login-page .brand-header { margin-bottom: 0.85rem; }

body.login-page .logo-svg { margin-bottom: 0.4rem; }

body.login-page .logo-svg svg { width: 40px; height: 40px; }

body.login-page .assurance-line { margin-top: 0.2rem; }

body.login-page .divider { margin: 0.85rem 0; }

body.login-page .note { margin-top: 0.7rem; }

body.login-page .status { margin-top: 0.8rem; }

body.login-page .btn-full { margin-top: 0.2rem; }

body.login-page .social-buttons { margin-top: 0; }

body.login-page .login-footer { margin-top: 0.9rem; }

@media (max-height: 700px) {
body.login-page { padding-block: 0.5rem; }

body.login-page .brand-header { margin-bottom: 0.55rem; }

body.login-page .subtitle { margin-bottom: 0.6rem; }

body.login-page .form-group { margin-bottom: 0.55rem; }

body.login-page .divider { margin: 0.6rem 0; }

body.login-page .note { margin-top: 0.4rem; line-height: 1.4; }

body.login-page .status { margin-top: 0.6rem; }

body.login-page .login-footer { margin-top: 0.6rem; }

body.login-page .footer-links { margin-bottom: 0.25rem; }

body.login-page .login-card { padding-block: 0.75rem; }

body.login-page .btn-full { padding: 0.7rem; }

body.login-page .title { font-size: 1.05rem; }

body.login-page .logo-svg svg { width: 32px; height: 32px; }

/* The one thing that does go. A copyright notice is the only element in
     the card that neither the user nor the law needs to see here — the
     privacy and terms links, which are the ones that matter, stay. */
body.login-page .footer-copyright { display: none; }

}

.social-buttons { margin-top: 0.25rem; }

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.btn-social:last-child { margin-bottom: 0; }

/* Third-party sign-in. NOT .btn-primary: the submit button and "Continue
   with Google" were the same brand fill, so the page offered two identical-
   looking primary actions and neither read as the main one. The neutral
   provider surface (theme.css --color-provider-*) is Google's own published
   button colour in both themes, and the logo is what identifies the provider
   — which is why one family serves both and there is no .btn-google. */
.btn-provider {
  background: var(--color-provider-face);
  border-color: var(--color-provider-border);
  color: var(--color-provider-text);
  font-weight: var(--font-weight-semibold);
}

.btn-provider:hover {
  background: var(--color-provider-face-hover);
  border-color: var(--color-provider-border);
  color: var(--color-provider-text);
}

/* The Google mark is a fixed four-colour asset and must never be recoloured
   or scaled by the label; Apple's is monochrome and follows the text. */
.provider-mark { flex: none; width: 18px; height: 18px; }

.provider-mark-apple { fill: currentColor; }

/* Both providers configured: one row rather than two. Stacked, they add
   ~55px and take the card past the fold on a 640px screen, which defeats
   the reason they moved below the submit at all. */
.social-buttons-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.social-buttons-pair .divider { grid-column: 1 / -1; margin: 0 0 0.15rem; }

.social-buttons-pair .btn-social { margin-bottom: 0; }

.social-buttons-pair .provider-prefix { display: none; }

/* ─── Login page inline styles extracted here ────────────────────  */
body.login-page { display: flex; align-items: center; justify-content: center;
  /* The auth pages have no header, so the notch clearance is theirs to
     reserve. max(), not a sum: 1rem is already breathing room on a
     device with no inset. */
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }

.logo { font-size: 3rem; margin-bottom: .5rem; }

.title { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }

.subtitle { color: var(--muted); font-size: .9rem; margin-bottom: 1.75rem; }

/* Legal pages share one readable content composition in both directions. */
.legal-card { max-width: 720px; text-align: start; }

.legal-title { margin-top: var(--space-10); margin-bottom: var(--space-6); }

/* An email address is one unbreakable token: usama.mh.shehab@gmail.com
   measured 311px inside a 250px column at a 1.5x system font scale and rode
   straight out of the card. `anywhere` rather than `break-word` so the token
   also counts toward min-content and cannot stretch an ancestor either. */
.legal-content { color: var(--color-text); line-height: 1.7; overflow-wrap: anywhere; }

.legal-content h3 { margin: var(--space-6) 0 var(--space-2); color: var(--color-text); }

.legal-content p,
.legal-content ul { margin-bottom: var(--space-4); color: var(--color-text); }

.legal-content ul { padding-inline-start: var(--space-6); }

/* Email|Phone identifier mode toggle (login) */
.id-mode-toggle { display: flex; gap: .5rem; margin-bottom: 1rem; }

.id-mode-btn { flex: 1; min-height: 40px; padding: .45rem .8rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s; }

.id-mode-btn.active { background: var(--color-brand-soft); border-color: var(--primary); color: var(--primary); }

.link-summary { margin-bottom: var(--space-4); font-size: var(--font-size-md); }

@media(max-width:768px) {
/* Login page: tighten the card on mobile. Vertical padding scales with
     the viewport (3vh) so short screens get a shorter card — no fixed
     heights anywhere, the card is always content-sized. */
.login-card { padding: clamp(1rem, 2.4vh, 1.75rem) 1.25rem; border-radius: var(--radius-card); }

.logo { font-size: 2.5rem; }

.title { font-size: 1.15rem; }

/* body.login-page scope: the bare .logo-svg/.assurance-line rules are
     declared later in the file and would win the same-specificity tie. */
body.login-page .logo-svg { margin-bottom: 0.35rem; }

body.login-page .logo-svg svg { width: 36px; height: 36px; }

body.login-page .assurance-line { margin-top: 0.2rem; }

body.login-page .form-group input { padding: 0.7rem 1rem; }

}

.lang-toggle {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 100;
}

/* On the login card specifically, anchor the toggle to the card itself
   (position:relative, set above) instead of floating disconnected in the
   viewport corner — reads as part of the card, not a stray control. */
.login-card .lang-toggle {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* 049: measured at 29.8px tall — under the 44px minimum, and this class has
   exactly one user: the language toggle on every signed-out page. It is the
   first control an Arabic-first user reaches for when the page comes up in
   the wrong language, and it was the smallest target in the product. The
   width is left to the content (the glyph plus "EN" is already wide enough);
   only the height and the centring are pinned. */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--control-height);
  background: var(--color-surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Phase 5 Login Redesign */
.brand-header { text-align: center; margin-bottom: 1.5rem; }

.logo-svg { color: var(--primary); display: flex; justify-content: center; margin-bottom: 1rem; }

.assurance-line { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; font-weight: 500; }

.login-footer { margin-top: 2rem; text-align: center; }

.footer-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }

/* A link LIST, not prose — same category as marketing's .m-footer-links a,
   which has carried the floor since it was written. Measured 100x26. */
.footer-links a {
  font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: color 0.3s;
  display: inline-flex; align-items: center; min-height: var(--control-height);
}

.footer-links a:hover { color: var(--primary); }

/* 049: a BORDER token painting a visible glyph — measured from rendered
   pixels at 1.17:1 dark and 1.12:1 light, which is invisible rather than
   subtle. It separates two links a user has to tell apart, so it takes the
   muted TEXT token; --border is for hairlines, where 1.1:1 is the point. */
.footer-divider { color: var(--color-text-muted); font-size: 0.85rem; }

.footer-copyright { font-size: 0.8rem; color: var(--muted); }