/* offfer-auth — design tokens
 *
 * Source: Figma file jrEMdJJhGCjTmERkJ3WLeE, Page 1, auth-popup states.
 * Three layers: primitives (raw) → semantic (roles) → component (classes).
 * Screens must consume `.popup-*` classes only — no raw hex or px in screens.
 */

/* ─────────────────────────────────────────────────────────────
 * Layer 1 — primitives
 * Raw values clustered from Figma. Edit here to retune everything.
 * ───────────────────────────────────────────────────────────── */
:root {
  /* Color primitives */
  --c-gray-100: #efefef;   /* card surface (fill clustered: card bg)         */
  --c-gray-300: #d9d9d9;   /* close-bubble fill, hairline stroke             */
  --c-gray-500: #4f4f4f;   /* primary gradient top stop (rgb 0.311…)         */
  --c-gray-700: #434343;   /* default text + icon stroke                     */
  --c-black:    #000000;   /* primary gradient bottom stop                   */
  --c-white:    #ffffff;   /* on-primary text                                */
  --c-red-600:  #d10000;   /* danger (input error text, danger button fill)  */

  /* Type primitives */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Font sizes (Figma px → rem at 16-base) */
  --fs-12: 0.75rem;        /* 12 — hint / countdown                          */
  --fs-14: 0.875rem;       /* 14 — body / button / link                      */
  --fs-22: 1.375rem;       /* 22 — heading / input value                     */

  /* Line heights (px → rem) */
  --lh-18: 1.125rem;       /* 18 */
  --lh-21: 1.3125rem;      /* 21 */
  --lh-26: 1.65rem;        /* 26.4 (1.2 × 22) */

  /* Letter spacing */
  --ls-0:     0em;
  --ls-loose: 0.01em;      /* Figma "0.14" on fs 14 → ratio 0.01            */

  /* Spacing scale — 4px base in rem */
  --space-0:  0;
  --space-1:  0.25rem;     /* 4  */
  --space-2:  0.5rem;      /* 8  */
  --space-3:  0.75rem;     /* 12 */
  --space-4:  1rem;        /* 16 */
  --space-5:  1.25rem;     /* 20 */
  --space-6:  1.5rem;      /* 24 */
  --space-7:  1.75rem;     /* 28 */
  --space-8:  2rem;        /* 32 */

  /* Radii */
  --radius-sm:   0.3125rem; /* 5  — card / field / button */
  --radius-full: 999rem;

  /* Component sizes */
  --size-card-w:     23.4375rem; /* 375 */
  --size-card-min-h: 37.625rem;  /* 602 */
  --size-control:     3.125rem;  /* 50  — input + button height (Figma) */
  --size-close:       2.0625rem; /* 33  — close bubble */
  --size-close-icon:  1.0625rem; /* 17  — X icon */
  --size-logo:        3rem;      /* 48  — square logo */

  /* Stroke weights */
  --stroke-1: 1px;
  --stroke-2: 2px;

  /* Backdrop (page dim) */
  --c-backdrop: rgba(15, 18, 28, 0.42);
}

/* ─────────────────────────────────────────────────────────────
 * Layer 2 — semantic
 * Map primitives to design roles. Screens never reference primitives.
 * ───────────────────────────────────────────────────────────── */
:root {
  /* Color roles */
  --color-page-dim:        var(--c-backdrop);
  --color-surface:         var(--c-gray-100);
  --color-fg:              var(--c-gray-700);
  --color-fg-on-primary:   var(--c-white);
  --color-fg-danger:       var(--c-red-600);
  --color-stroke:          var(--c-gray-300);
  --color-stroke-strong:   var(--c-gray-700);
  --color-close-bg:        var(--c-gray-300);
  --color-close-icon:      var(--c-gray-700);

  --color-primary-from:    var(--c-gray-500);
  --color-primary-to:      var(--c-black);
  --color-danger-bg:       var(--c-red-600);

  /* Primary gradient (Figma: linear, ~vertical 0→1.84) */
  --gradient-primary: linear-gradient(180deg,
    var(--color-primary-from) 0%,
    var(--color-primary-to) 100%);

  /* Type roles (font shorthand = weight size/lh family) */
  --type-heading: var(--fw-semibold) var(--fs-22)/var(--lh-26) var(--font-sans);
  --type-body:    var(--fw-medium)   var(--fs-14)/var(--lh-21) var(--font-sans);
  --type-body-strong: var(--fw-semibold) var(--fs-14)/var(--lh-21) var(--font-sans);
  --type-input:   var(--fw-semibold) var(--fs-22)/var(--lh-26) var(--font-sans);
  --type-button:  var(--fw-bold)     var(--fs-14)/var(--lh-21) var(--font-sans);
  --type-link:    var(--fw-medium)   var(--fs-14)/var(--lh-21) var(--font-sans);
  --type-caption: var(--fw-regular)  var(--fs-12)/var(--lh-18) var(--font-sans);

  /* Spacing roles (canonical vertical rhythm, clustered from Figma deltas) */
  --gap-logo-to-heading:  var(--space-6); /* ≈25  */
  --gap-heading-to-sub:   var(--space-4); /* ≈16  */
  --gap-sub-to-input:     1.5625rem;      /* 25   — Figma gap from a reserved 2-line sub box (not from the sub's natural height) */
  --gap-input-to-button:  var(--space-5); /* ≈19  */
  --gap-button-to-hint:   var(--space-2); /*  8   */
  --gap-hint-to-link:     var(--space-6); /* ≈25  */
  --gap-stack:            var(--space-4); /* generic stack gap */

  /* Card padding */
  --pad-card-x:   1.65625rem;     /* 26.5 — exact Figma inset (375 − 322) / 2 */
  --pad-card-y:   var(--space-7); /* 28 (matches close offset) */
  --pad-card-bot: var(--space-7); /* 28 */

  /* Radii roles */
  --radius-card:   var(--radius-sm);
  --radius-field:  var(--radius-sm);
  --radius-button: var(--radius-sm);
  --radius-close:  var(--radius-full);
}

/* ─────────────────────────────────────────────────────────────
 * Layer 3 — components
 * Reusable classes. Screens consume these only.
 * ───────────────────────────────────────────────────────────── */

/* Page reset + dimmed backdrop */
.popup-page {
  margin: 0;
  min-height: 100vh;
  font: var(--type-body);
  letter-spacing: var(--ls-loose);
  color: var(--color-fg);
  background:
    radial-gradient(1200px 800px at 70% 30%, oklch(92% 0.018 250) 0%, oklch(86% 0.02 250) 100%);
  -webkit-font-smoothing: antialiased;
}
.popup-backdrop {
  position: fixed; inset: 0;
  background: var(--color-page-dim);
  display: grid; place-items: start center;
  /* No horizontal padding — the card must reach Figma's 375 width; lateral
     dim space comes from the viewport being wider than the card, not from
     trimming the card. Vertical padding is fine. */
  padding: clamp(var(--space-3), 4vw, var(--space-8)) 0;
  padding-bottom: calc(var(--space-8) * 2 + env(safe-area-inset-bottom, 0px));
  overflow: auto;
}
@media (min-height: 640px) {
  .popup-backdrop { place-items: center; }
}

/* Card */
.popup-card {
  position: relative;
  box-sizing: border-box;            /* so min-height = total card height (Figma 602) */
  width: min(var(--size-card-w), 100%);
  min-height: var(--size-card-min-h);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--pad-card-y) var(--pad-card-x) var(--pad-card-bot);
  display: flex;
  flex-direction: column;
}

/* Card head: logo top-left, close absolutely top-right (Figma offset) */
.popup-card__head { display: block; }
.popup-logo {
  /* Figma logo y=61 = close-top (28, --pad-card-y) + close-size (33, --size-close).
     Slot is 48×76 = the Figma logo BOX (70×76, width clipped to glyph). Glyph
     stays --size-logo (48) and `background: center/contain` vertically
     centers it inside the taller slot — that recovers Figma's 76px vertical
     footprint without resizing the visible glyph, so heading lands at y=162. */
  margin-top: var(--size-close);
  width: var(--size-logo);
  height: var(--size-logo);
  padding: 0.875rem 0;     /* (76 − 48) / 2 = 14px top + 14px bottom */
  box-sizing: content-box;
  background: url("../../assets/logo_trimmed.png") center / contain no-repeat;
}
.popup-close {
  position: absolute;
  top: var(--space-7);          /* 28 from card top (Figma) */
  right: var(--space-5);        /* 20 from card right (Figma) */
  appearance: none; border: 0; cursor: pointer;
  width: var(--size-close);
  height: var(--size-close);
  border-radius: var(--radius-close);
  background: var(--color-close-bg);
  display: inline-grid; place-items: center;
  color: var(--color-close-icon);
  padding: 0;
}
.popup-close__icon {
  width: var(--size-close-icon);
  height: var(--size-close-icon);
  stroke-width: var(--stroke-2);
}

/* Typography slots */
.popup-heading {
  margin: var(--gap-logo-to-heading) 0 0;
  font: var(--type-heading);
  letter-spacing: var(--ls-0);
  color: var(--color-fg);
}
.popup-sub {
  /* Reserve 2 lines so everything below the sub (input, button, hint, links,
     footer-link) lands at the same Figma y across all 5 states regardless
     of whether the sub copy wraps to 1 or 2 lines. */
  margin: var(--gap-heading-to-sub) 0 0;
  min-height: calc(2 * var(--lh-21));
  font: var(--type-body);
  letter-spacing: var(--ls-loose);
  color: var(--color-fg);
}
.popup-sub__strong {
  font: var(--type-body-strong);
  letter-spacing: var(--ls-loose);
}

/* Field */
.popup-field {
  width: 100%;
  box-sizing: border-box;
  height: var(--size-control);
  margin-top: var(--gap-sub-to-input);
  background: transparent;
  border: var(--stroke-1) solid var(--color-stroke);
  border-radius: var(--radius-field);
  padding: 0 var(--space-3);
  font: var(--type-input);
  letter-spacing: var(--ls-0);
  color: var(--color-fg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.popup-field::placeholder {
  color: var(--color-fg);
  opacity: 0.65;
}
.popup-field:focus {
  border-color: var(--color-stroke-strong);
  box-shadow: 0 0 0 var(--stroke-1) var(--color-stroke-strong);
}
.popup-field--code {
  /* Figma uses --type-input letter-spacing (0), not a forced wide tracking;
     the prior 0.35em tracking exploded "-- -- --" into "- -  - -  - -". */
  text-align: center;
}
.popup-field--danger {
  color: var(--color-fg-danger);
}

/* Button */
.popup-button {
  width: 100%;
  appearance: none; border: 0; cursor: pointer;
  height: var(--size-control);
  margin-top: var(--gap-input-to-button);
  border-radius: var(--radius-button);
  background: var(--gradient-primary);
  color: var(--color-fg);            /* dark-on-dark → reads as disabled */
  font: var(--type-button);
  letter-spacing: var(--ls-0);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  transition: transform .05s, filter .12s;
}
.popup-button:active { transform: translateY(0.5px); }
.popup-button:hover  { filter: brightness(1.08); }
.popup-button--active { color: var(--color-fg-on-primary); }
.popup-button[disabled] { cursor: not-allowed; }
.popup-button:disabled:has(.popup-button__stack) {
  background: var(--color-stroke);
  color: var(--color-fg);
}
.popup-button--danger {
  background: var(--color-danger-bg);
  color: var(--color-fg-on-primary);
}
.popup-button__stack {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-1);
  line-height: 1.1;
}
.popup-button__timer {
  font: var(--type-caption);
  letter-spacing: var(--ls-0);
  color: inherit;
  opacity: 0.85;
}

/* Hint + links */
.popup-hint {
  margin: var(--gap-button-to-hint) 0 0;
  text-align: center;
  font: var(--type-caption);
  letter-spacing: var(--ls-0);
  color: var(--color-fg);
}
.popup-link-row {
  margin-top: var(--gap-hint-to-link);
  text-align: center;
}
.popup-link {
  font: var(--type-link);
  letter-spacing: var(--ls-loose);   /* Figma SVG export: 0.01em on link text */
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.popup-footer-link {
  /* Figma pins this link to a fixed absolute y (538) across states 03–05,
     regardless of whether the "Изменить номер…" link row is present.
     Deriving it via cumulative margins puts it at 492 in states 04/05
     (off by 46) because the chain breaks without the link row above. */
  position: absolute;
  left: var(--pad-card-x);
  right: var(--pad-card-x);
  top: 33.625rem;        /* 538 (Figma absolute y from card top) */
  text-align: center;
}

/* Reviewer state-switcher (out-of-card chrome) */
.popup-switcher {
  position: fixed; left: 50%; bottom: var(--space-4);
  transform: translateX(-50%);
  display: flex; gap: var(--space-2);
  background: color-mix(in srgb, var(--c-white) 86%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-2);
  border-radius: var(--radius-full);
  font: var(--type-caption);
  z-index: 10;
}
.popup-switcher__label {
  padding: 0 var(--space-2);
  color: var(--color-fg);
  opacity: 0.7;
  display: flex; align-items: center;
}
.popup-switcher__btn {
  appearance: none; border: 0; cursor: pointer;
  width: 1.625rem; height: 1.625rem; /* 26 */
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-fg);
  font: var(--type-body-strong);
  text-decoration: none;
  display: inline-grid; place-items: center;
}
.popup-switcher__btn:hover { background: var(--color-stroke); }
.popup-switcher__btn--active {
  background: var(--color-stroke-strong);
  color: var(--color-fg-on-primary);
}

/* Mobile compaction */
/* Figma frame is 375 × 602 for every state — same on desktop and mobile.
   No mobile shrinkage; the backdrop is `overflow: auto` so the card scrolls
   if the viewport is shorter than 602. */
@media (max-width: 480px) {
  .popup-switcher {
    bottom: max(var(--space-3), env(safe-area-inset-bottom, var(--space-3)));
  }
}