/*!
 * مِهَار | Mihhar — Entry screens (choose account type, sign up, sign in, reset)
 * ------------------------------------------------------------------
 * The shell is pinned to the viewport so the host theme can never add
 * page scroll around it. Only the form column scrolls, and only when the
 * form is genuinely taller than the screen — so the page itself never
 * scrolls horizontally or vertically.
 *
 * Both columns are dark now. They are separated by one step on the
 * surface ramp plus a hairline — the brand column sits on `surface`,
 * the form column on the deeper page `bg`. That reads as depth without
 * a shadow, a gradient or a second colour.
 */

.mh-auth {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mh-bg);
  color: var(--mh-text);
  color-scheme: dark;
  overflow: hidden;
  font-family: var(--mh-font);
}

/* Desktop: visual column + form column. Both tracks may shrink. */
@media (min-width: 1024px) {
  .mh-auth--split {
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  }
}
@media (min-width: 1600px) {
  .mh-auth--split {
    grid-template-columns: minmax(400px, 34%) minmax(0, 1fr);
  }
}

body.mh-auth-open { overflow: hidden; }

/* ═══════════════════════ VISUAL COLUMN ═══════════════════════ */

/* Three rows: brand, pitch, footer. The middle row is the only flexible one
   and it may shrink to zero, so a tall logo can never crop the panel. */
.mh-auth__canvas {
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--mh-6);
  padding: clamp(28px, 3.2vw, 56px);
  background: var(--mh-surface);
  border-inline-end: 1px solid var(--mh-border);
  color: var(--mh-text);
  overflow: hidden;
  min-width: 0;
}

@media (min-width: 1024px) {
  .mh-auth--split .mh-auth__canvas { display: grid; }
}

/* The brand row: large mark, breathing room, nothing else. */
.mh-auth__canvas > .mh-auth__logo { align-self: start; justify-self: start; }

.mh-auth__logo { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.mh-auth__logo img {
  max-height: clamp(34px, 3vw, 44px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* The brand mark is the hero of the entry screens. Height drives the size and
   width is capped at 100% of the column, so it can never push the layout out. */
.mh-auth__logo--hero img {
  max-height: clamp(80px, 11vw, 200px);
  max-width: 100%;
}

/* The whole product is dark, so the mark is white everywhere. Every
   opaque pixel becomes white while transparency is preserved — no part
   of the mark keeps its original colour, and nothing is blurred or
   hidden. `--invert` stays as a no-op alias for existing markup. */
.mh-auth__logo img,
.mh-auth__logo--invert img { filter: brightness(0) invert(1); }

.mh-auth__logo-text,
.mh-auth__logo-text--on-dark {
  font-size: var(--mh-t-title);
  font-weight: 700;
  color: var(--mh-text);
  letter-spacing: -0.02em;
}
.mh-auth__logo--hero .mh-auth__logo-text { font-size: var(--mh-t-display); }

.mh-auth__pitch {
  max-width: 34ch;
  align-self: center;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mh-auth__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  margin-bottom: var(--mh-5);
  padding: 3px var(--mh-3);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-sm);
  color: var(--mh-accent-text);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
}

.mh-auth__pitch h1 {
  color: var(--mh-text);
  font-size: var(--mh-t-display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: var(--mh-4);
}
.mh-auth__pitch h1 span { display: block; color: var(--mh-accent-text); }

.mh-auth__pitch p {
  color: var(--mh-text-2);
  font-size: var(--mh-t-body);
  line-height: var(--mh-lh);
  margin: 0;
}

.mh-auth__features {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  margin-top: clamp(24px, 3vw, 40px);
}
.mh-auth__feature {
  display: flex;
  align-items: center;
  gap: var(--mh-3);
  font-size: var(--mh-t-sm);
  font-weight: 500;
  color: var(--mh-text-2);
  min-width: 0;
}
.mh-auth__feature-icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-sm);
  color: var(--mh-accent-text);
}

.mh-auth__note {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-3);
  margin-top: clamp(20px, 2.5vw, 32px);
  padding-top: var(--mh-5);
  border-top: 1px solid var(--mh-border);
  color: var(--mh-text-2);
  font-size: var(--mh-t-xs);
  line-height: var(--mh-lh-snug);
}
.mh-auth__note .mh-icon { margin-top: 2px; color: var(--mh-accent-text); }

.mh-auth__foot {
  display: flex;
  align-items: center;
  gap: var(--mh-4);
  flex-wrap: wrap;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-auth__foot a { color: var(--mh-text-2); }
.mh-auth__foot a:hover { color: var(--mh-text); }

/* ═══════════════════════ FORM COLUMN ═══════════════════════ */

.mh-auth__panel {
  display: flex;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.mh-auth__box {
  width: 100%;
  max-width: 420px;
  margin: auto;
  min-width: 0;
}
.mh-auth__box--wide { max-width: 480px; }

/* Brand lock-up shown when the visual column is hidden. */
.mh-auth__mobile-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-3);
  margin-bottom: var(--mh-7);
}
/* Clear on a phone without dominating it — capped by the column, not by a
   fixed pixel width. */
.mh-auth__mobile-logo .mh-auth__logo--hero img { max-height: clamp(64px, 17vw, 120px); }
@media (min-width: 1024px) {
  .mh-auth--split .mh-auth__mobile-logo { display: none; }
}

.mh-auth__head { margin-bottom: var(--mh-6); }
.mh-auth__head h2 {
  font-size: var(--mh-t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--mh-2);
}
.mh-auth__head p { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-3); }

/* Always-visible way back to step 1 — no browser Back required. */
.mh-auth__back {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  min-height: var(--mh-control-h-sm);
  padding: 0 var(--mh-3);
  margin-bottom: var(--mh-5);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text-2);
  transition: border-color var(--mh-t-fast), color var(--mh-t-fast), background-color var(--mh-t-fast);
}
.mh-auth__back .mh-icon { color: var(--mh-text-3); transition: color var(--mh-t-fast); }
.mh-auth__back:hover { border-color: var(--mh-accent-line); background: var(--mh-accent-soft); color: var(--mh-accent-text); }
.mh-auth__back:hover .mh-icon { color: var(--mh-accent-text); }

/* Segmented tab switch between sign-in and sign-up. */
.mh-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  margin-bottom: var(--mh-6);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
}
.mh-auth__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mh-control-h-sm);
  border-radius: var(--mh-r-sm);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-text-3);
  text-decoration: none;
  transition: background-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-auth__tab:hover { color: var(--mh-text); }
.mh-auth__tab.is-active {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  color: var(--mh-accent-text);
}

.mh-auth__form { display: flex; flex-direction: column; gap: var(--mh-4); min-width: 0; }
.mh-auth__form > .mh-btn { margin-top: var(--mh-1); }

.mh-auth__form-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-3);
  flex-wrap: wrap;
}
.mh-auth__link { font-size: var(--mh-t-2xs); font-weight: 500; color: var(--mh-accent-text); }

/* Paired fields — collapses to one column early so Arabic labels never clip. */
.mh-auth__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--mh-4);
}

.mh-auth__section {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin-top: var(--mh-2);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mh-text-3);
  text-transform: uppercase;
}
.mh-auth__section::after { content: ""; flex: 1; height: 1px; background: var(--mh-border); }
.mh-auth__section .mh-icon { color: var(--mh-text-3); }

.mh-auth__switch {
  margin-top: var(--mh-6);
  padding-top: var(--mh-5);
  border-top: 1px solid var(--mh-border);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-3);
}
.mh-auth__switch a { font-weight: 500; }

.mh-auth__support {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  flex-wrap: wrap;
  margin-top: var(--mh-5);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}
.mh-auth__support .mh-icon { color: var(--mh-text-3); }
.mh-auth__support a { font-weight: 500; }

.mh-auth__done { padding: var(--mh-6) 0; }
.mh-auth__done-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--mh-4);
  border: 1px solid var(--mh-success-line);
  border-radius: var(--mh-r);
  background: var(--mh-success-bg);
  color: var(--mh-success);
}
.mh-auth__done h3 { font-size: var(--mh-t-h2); font-weight: 500; margin-bottom: var(--mh-2); }
.mh-auth__done p { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-3); }

/* ═══════════════════════ ACCOUNT TYPE CHOOSER ═══════════════════════ */

.mh-chooser {
  display: flex;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 40px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0;
}

.mh-chooser__inner {
  width: 100%;
  max-width: 640px;
  margin: auto;
  min-width: 0;
}

/* Step 1 leads with the brand: the mark is the largest element on the page. */
.mh-chooser__brand { margin-bottom: var(--mh-6); }
.mh-chooser__brand .mh-auth__logo--hero img { max-height: clamp(96px, 13vw, 200px); }

.mh-chooser__head { margin-bottom: var(--mh-6); }
.mh-chooser__head h1 {
  font-size: var(--mh-t-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--mh-2);
}
.mh-chooser__head p { margin: 0; font-size: var(--mh-t-body); color: var(--mh-text-3); }

.mh-chooser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--mh-3);
  margin-bottom: var(--mh-5);
}

/* A selection row: border + background + indicator + weight. Nothing else.
   ------------------------------------------------------------------
   The native radio inside the label is the single source of truth. It stays
   in the accessibility tree and in the tab order (opacity, not display:none),
   so mouse, touch, keyboard and screen readers all work without scripting.
   `:has(:checked)` paints the state; `.is-selected` is the identical fallback
   that the script mirrors for engines without `:has()`. */
.mh-type {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mh-3);
  padding: var(--mh-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--mh-t-fast), background-color var(--mh-t-fast);
  min-width: 0;
}
.mh-type:hover { border-color: var(--mh-n-400); }

/* Focusable but invisible: the ring is drawn on the whole card instead. */
.mh-type__input {
  position: absolute;
  inset-inline-start: var(--mh-4);
  top: var(--mh-4);
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.mh-type:has(.mh-type__input:focus-visible),
.mh-type.is-focused {
  outline: 2px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-type:has(.mh-type__input:checked),
.mh-type.is-selected {
  border-color: var(--mh-accent);
  background: var(--mh-accent-soft);
}

.mh-type__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-sm);
  background: var(--mh-surface);
  color: var(--mh-text-2);
  transition: border-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-type:has(.mh-type__input:checked) .mh-type__icon,
.mh-type.is-selected .mh-type__icon {
  border-color: var(--mh-accent-line);
  color: var(--mh-accent-text);
}

.mh-type__body { min-width: 0; }
.mh-type__title {
  display: block;
  font-size: var(--mh-t-h2);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-tight);
  transition: color var(--mh-t-fast);
}
.mh-type:has(.mh-type__input:checked) .mh-type__title,
.mh-type.is-selected .mh-type__title { color: var(--mh-accent-text); font-weight: 700; }
.mh-type__desc {
  display: block;
  margin-top: var(--mh-1);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
}
.mh-type__meta {
  display: block;
  margin-top: var(--mh-3);
  padding-top: var(--mh-3);
  border-top: 1px solid var(--mh-border);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  line-height: var(--mh-lh-snug);
  overflow-wrap: anywhere;
}
.mh-type:has(.mh-type__input:checked) .mh-type__meta,
.mh-type.is-selected .mh-type__meta { border-top-color: var(--mh-accent-line); }

.mh-type__radio {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--mh-border-strong);
  border-radius: 50%;
  transition: border-color var(--mh-t-fast);
}
.mh-type__radio::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--mh-t-fast);
}
.mh-type:has(.mh-type__input:checked) .mh-type__radio,
.mh-type.is-selected .mh-type__radio { border-color: var(--mh-accent); }
.mh-type:has(.mh-type__input:checked) .mh-type__radio::after,
.mh-type.is-selected .mh-type__radio::after { background: var(--mh-accent); }

.mh-chooser__hint {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0 0 var(--mh-4);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-danger);
}
.mh-chooser__hint[hidden] { display: none; }

.mh-chooser__actions { display: flex; gap: var(--mh-3); flex-wrap: wrap; }
.mh-chooser__actions .mh-btn { min-width: 160px; }

.mh-chooser__foot {
  margin-top: var(--mh-7);
  padding-top: var(--mh-5);
  border-top: 1px solid var(--mh-border);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-3);
}
.mh-chooser__foot a { font-weight: 500; }

/* ═══════════════════════ SMALL SCREENS ═══════════════════════ */

@media (max-width: 1023px) {
  /* Anchor to the top so the form starts where the eye expects it. */
  .mh-auth__box { margin-block: 0 auto; max-width: 460px; }
}

/* Tall tablets have room to spare — centre instead of leaving a long void. */
@media (max-width: 1023px) and (min-height: 1000px) {
  .mh-auth__box,
  .mh-chooser__inner { margin-block: auto; }
}

@media (max-width: 560px) {
  .mh-auth__panel { padding: var(--mh-6) var(--mh-4) var(--mh-10); }
  .mh-chooser { padding: var(--mh-6) var(--mh-4) var(--mh-10); }
  .mh-chooser__inner { margin-block: 0 auto; }
  .mh-auth__grid { grid-template-columns: minmax(0, 1fr); }
  .mh-chooser__actions .mh-btn { width: 100%; min-width: 0; }
  .mh-auth__mobile-logo { margin-bottom: var(--mh-6); }
  .mh-chooser__brand { margin-bottom: var(--mh-5); }
  /* One thumb: the labels drop and the numbers carry the step. */
  .mh-steps { gap: var(--mh-2); }
  .mh-steps__item { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* Very narrow phones: the label would be a single word per line. */
@media (max-width: 360px) {
  .mh-steps__label { display: none; }
}

/* Short viewports: keep each step on one screen. The brand gives up height
   first (it is sized from vh, so it always fits), then the rhythm tightens. */
@media (min-width: 1024px) and (max-height: 940px) {
  .mh-chooser__brand .mh-auth__logo--hero img { max-height: min(200px, 21vh); }
  .mh-auth__canvas > .mh-auth__logo--hero img { max-height: min(200px, 22vh); }
  .mh-chooser__brand { margin-bottom: var(--mh-4); }
  .mh-chooser__head { margin-bottom: var(--mh-4); }
  .mh-chooser .mh-steps { margin-bottom: var(--mh-4); }
  .mh-chooser__foot { margin-top: var(--mh-5); padding-top: var(--mh-4); }
}

/* Short laptop screens: trim vertical rhythm so the form still fits. */
@media (min-width: 1024px) and (max-height: 780px) {
  .mh-auth__panel { padding-block: var(--mh-6); }
  .mh-auth__head { margin-bottom: var(--mh-5); }
  .mh-auth__form { gap: var(--mh-3); }
  .mh-auth__switch { margin-top: var(--mh-5); padding-top: var(--mh-4); }
  .mh-auth__back { margin-bottom: var(--mh-4); }
  .mh-auth__panel .mh-steps { margin-bottom: var(--mh-5); }
  .mh-auth__canvas { gap: var(--mh-5); }
  .mh-auth__features { gap: var(--mh-2); margin-top: var(--mh-5); }
  .mh-auth__note { margin-top: var(--mh-4); padding-top: var(--mh-4); }
  .mh-chooser__grid { gap: var(--mh-2); }
  .mh-type { padding: var(--mh-3) var(--mh-4); }
  .mh-type__meta { margin-top: var(--mh-2); padding-top: var(--mh-2); }
}

/* ═══════════════════════ EMAIL VERIFICATION ═══════════════════════
   Reuses the chooser shell — same width, same rhythm, same tokens.
   Only the status mark and the two meta lines are new. */

.mh-verify { max-width: 520px; }

.mh-verify__result { min-width: 0; }

.mh-verify__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--mh-5);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
}
.mh-verify__icon--success { border-color: var(--mh-success-line); background: var(--mh-success-bg); color: var(--mh-success); }
.mh-verify__icon--info    { border-color: var(--mh-accent-line); background: var(--mh-accent-soft); color: var(--mh-accent-text); }
.mh-verify__icon--warn    { border-color: var(--mh-warn-line); background: var(--mh-warn-bg); color: var(--mh-warn); }
.mh-verify__icon--danger  { border-color: var(--mh-danger-line); background: var(--mh-danger-bg); color: var(--mh-danger); }

.mh-verify__meta {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin-bottom: var(--mh-5);
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
}
.mh-verify__meta .mh-icon { color: var(--mh-text-3); flex-shrink: 0; }

.mh-verify__quota {
  margin: var(--mh-4) 0 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  font-variant-numeric: tabular-nums;
}

.mh-verify #mh-verify-alert { margin-bottom: var(--mh-4); }

@media (max-width: 560px) {
  .mh-verify .mh-chooser__actions .mh-btn { width: 100%; min-width: 0; }
}

/* ═══════════════════════ GOOGLE SIGN-IN (4.18.0) ═══════════════════════ */
.mh-gsi { display: grid; gap: var(--mh-2); justify-items: center; }
.mh-gsi__btn { width: 100%; min-height: 44px; display: flex; justify-content: center; }
.mh-gsi__busy { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-2); }
.mh-gsi__err { margin: 0; font-size: var(--mh-t-xs); text-align: center; }
.mh-gsi__terms { margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); text-align: center; line-height: 1.7; }
.mh-gsi__terms a { color: inherit; text-decoration: underline; }
.mh-buyauth { display: grid; gap: var(--mh-3); padding: var(--mh-4); border: 1px solid var(--mh-border); border-radius: var(--mh-r-lg); background: var(--mh-surface-sub); }
.mh-buyauth[hidden] { display: none; }
.mh-buyauth__title { margin: 0; font-size: var(--mh-t-sm); font-weight: 700; color: var(--mh-text); text-align: center; }
.mh-buyauth__or { display: flex; align-items: center; gap: var(--mh-2); margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); }
.mh-buyauth__or::before, .mh-buyauth__or::after { content: ""; flex: 1; height: 1px; background: var(--mh-border); }
.mh-buyauth__email { display: block; text-align: center; font-size: var(--mh-t-xs); font-weight: 600; color: var(--mh-accent-text); }
.mh-auth__or { margin: var(--mh-3) 0; }
.mh-chooser__google { display: grid; gap: var(--mh-3); max-width: 420px; margin: 0 auto var(--mh-4); }
.mh-chooser__google-title { margin: 0; text-align: center; font-weight: 700; color: var(--mh-text); }