/* Standalone web sign-in page (archiv-o.com/login).
 * Builds on styles.css tokens (.glass, .btn, .grad-text, --ink, --grad…).
 * Two-pane on desktop (brand showcase | form), single card on mobile —
 * mirrors the app's AuthLayout so the web sign-in feels like the app's. */

.login-body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.login-footer { position: relative; z-index: 1; padding-top: 72px; }

@media (max-width: 540px) {
  .login-footer { padding-top: 48px; }
}

/* Header: shares noma-shared.css's unified .site-header/.nav system. Only the
   position differs — the sign-in page overlays its split-screen hero, so the
   bar is absolute and scrolls away rather than staying fixed. */
/* Full-bleed so the inner .nav.shell can still center via margin-inline:auto —
   without left/right the absolute header shrink-wraps to the shell width and
   pins the logo to x=0 (the viewport edge). */
/* ambient glow behind everything */
.login__aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 82% 12%, var(--green-glow), transparent 70%),
    radial-gradient(55% 50% at 12% 88%, rgba(126, 200, 106, 0.16), transparent 72%);
}

.login {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 92px 18px 40px;
}

.login__grid {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  min-height: 592px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--glass-blur));
}

/* ---------- hero / animation panel (RIGHT on desktop) ---------- */
.login__panel {
  position: relative;
  order: 2; /* hero on the RIGHT — browser mirror of the app (form-right) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 22px;
  padding: 46px 42px;
  color: #f3fbf5;
  background:
    linear-gradient(155deg, rgba(9, 38, 26, 0.74), rgba(7, 24, 18, 0.86)),
    var(--grad);
  overflow: hidden;
}
.login__panel::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  right: -120px; top: -110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(183, 218, 50, 0.4), transparent);
  filter: blur(6px);
  pointer-events: none;
}
.login__panel-brand { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.login__panel-brand span { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.1rem; }
.login__panel-copy { position: relative; z-index: 1; }
.login__panel-copy h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.login__panel-copy p { color: rgba(230, 245, 235, 0.82); font-size: 0.96rem; line-height: 1.55; margin: 0; max-width: 34ch; }
/* ---------- square app preview (hero panel — one unified frame, its own space) ---------- */
.login__preview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 1; }
.pv {
  width: min(300px, 100%);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
}
.pv__media { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- form column (LEFT on desktop, DOM-first) ---------- */
.login__form-col {
  order: 1; /* DOM-first for a11y, shown on the LEFT on desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 38px;
  background: var(--bg);
}
.login__card { width: 100%; max-width: 366px; }
.login__head { text-align: center; margin-bottom: 22px; }
.login__head h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.login__head p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

.login__field { margin: 0 0 12px; }
.login__field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.login__field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-subtle);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login__field input::placeholder { color: var(--ink-faint); }
.login__field input:focus {
  outline: none;
  border-color: var(--archivo-teal);
  box-shadow: 0 0 0 3px var(--green-glow);
}
.login__password-control { position: relative; }
.login__password-control input { padding-right: 56px; }
.login__password-toggle {
  position: absolute;
  top: 50%; right: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.login__password-toggle:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); }
.login__password-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-glow); }
.login__password-toggle:disabled { cursor: not-allowed; opacity: 0.5; }
.login__password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; }
.login__remember { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 0.82rem; cursor: pointer; }
.login__remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--archivo-teal); }
.login__remember:has(input:focus-visible) { outline: 2px solid var(--archivo-teal); outline-offset: 3px; border-radius: 3px; }
.login__link {
  background: none; border: none; padding: 0;
  color: var(--archivo-teal); font: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
}
.login__link:hover { text-decoration: underline; }

.login__or { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 0.8rem; margin: 16px 0; }
.login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--glass-brd); }

.btn--block { width: 100%; justify-content: center; }
.btn--google { display: flex; align-items: center; gap: 10px; }

.login__msg {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}
.login__msg[hidden] { display: none; }
.login__msg--warn { background: rgba(180, 35, 31, 0.12); color: #d9433f; }
.login__msg--ok { background: rgba(31, 157, 107, 0.14); color: #1f9d6b; }
.login__msg--info { background: rgba(37, 99, 235, 0.14); color: #2f6bff; }
.login__msg a { color: inherit; font-weight: 700; text-decoration: underline; }

/* login vs register mode — toggle which controls are visible (JS flips
   .login__card[data-mode]). Keeps one card doing both jobs. */
.login__card[data-mode="login"] .is-register-only { display: none; }
.login__card[data-mode="register"] .is-login-only { display: none; }

/* provider-link step ("connect Google to the account you already have") — the
   Google button is hidden because that is the flow being finished, and the email
   is hidden because it came from Google's credential rather than the keyboard.
   "Forgot password?" deliberately stays: it's the escape hatch for someone who
   doesn't know the password. JS flips .login__card[data-link]. */
.login__card[data-link="1"] #googleBtn,
.login__card[data-link="1"] .login__or,
.login__card[data-link="1"] .login__field--email,
.login__card[data-link="1"] .login__remember,
.login__card[data-link="1"] .login__fine .is-login-only { display: none !important; }

/* resume ("you're already signed in") — replaces the form rather than sitting
   above it, so the card never shows two competing ways to sign in. JS flips
   .login__card[data-resume]. */
.login__card[data-resume="1"] #googleBtn,
.login__card[data-resume="1"] .login__or,
.login__card[data-resume="1"] #emailForm,
.login__card[data-resume="1"] .login__fine { display: none !important; }
.login__resume-label { text-align: center; font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 4px; }
.login__resume-id { text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0 0 16px; overflow-wrap: anywhere; }
.login__resume-alt { display: block; width: 100%; text-align: center; margin: 14px 0 0; }

/* saved accounts ("choose an account") — same replace-the-form contract as
   resume, so the card never offers two ways in at once. This list is display
   data only; picking a row still runs a real sign-in. JS flips
   .login__card[data-accounts]. */
.login__card[data-accounts="1"] #googleBtn,
.login__card[data-accounts="1"] .login__or,
.login__card[data-accounts="1"] #emailForm,
.login__card[data-accounts="1"] .login__fine { display: none !important; }
.login__accounts-label { text-align: center; font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 12px; }
.login__accounts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.login__account {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--glass-brd); border-radius: var(--r-sm);
  background: transparent;
}
.login__account:hover { border-color: var(--archivo-teal); }
.login__account-pick {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 4px 10px 10px;
  font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.login__account-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: var(--archivo-teal);
  display: grid; place-items: center;
  color: #fff; font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
}
.login__account-text { min-width: 0; }
.login__account-name { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.login__account-meta {
  display: block; font-size: 0.78rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.login__account-forget {
  flex: none; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; line-height: 1; font-size: 1rem;
  color: var(--ink-faint); border-radius: var(--r-sm);
}
.login__account-forget:hover { color: #d9433f; }
.login__accounts-alt { display: block; width: 100%; text-align: center; margin: 14px 0 0; }

.login__fine { margin: 20px 0 0; text-align: center; font-size: 0.84rem; color: var(--ink-faint); }
.login__fine a { color: var(--archivo-teal); font-weight: 600; text-decoration: none; }
.login__fine a:hover { text-decoration: underline; }
.login__guest { margin: 14px 0 0; text-align: center; }
.login__guest a { color: var(--ink-faint); font-size: 0.82rem; text-decoration: none; }
.login__guest a:hover { color: var(--ink-soft); text-decoration: underline; }

/* ---------- plans band (below the sign-in hero) ---------- */
.login__plans {
  position: relative;
  z-index: 1;
  padding: clamp(46px, 8vh, 84px) 18px 76px;
  border-top: 1px solid var(--glass-brd);
}
.login__plans-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.login__plans-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 12px 0;
}
.login__plans-head p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.login__plans-foot { margin-top: 42px; text-align: center; }
.login__plans-foot .btn { min-height: 44px; }
.login__plans-foot p { margin: 12px 0 0; color: var(--ink-faint); font-size: 0.82rem; }

/* Plan cards — same model as the app's login panel (PlanCards.tsx): accent bar,
   badge, price row, checkmark features, highlighted Go. */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 720px; margin: 0 auto; }
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pcard--hi { border-color: rgba(40, 184, 135, 0.5); box-shadow: var(--shadow-lg); }
.pcard__bar { height: 6px; width: 46px; border-radius: 999px; background: var(--glass-brd); margin-bottom: 18px; }
.pcard--hi .pcard__bar { background: linear-gradient(90deg, #b7da32, #28b887); }
.pcard__badge { position: absolute; right: 18px; top: 18px; padding: 4px 11px; border-radius: 999px; background: rgba(40, 184, 135, 0.16); color: var(--archivo-teal); font-size: 0.72rem; font-weight: 700; }
.pcard h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.pcard__price { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.pcard__amt { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.pcard__cmp { padding-bottom: 4px; font-size: 0.86rem; color: var(--ink-faint); text-decoration: line-through; }
.pcard__sub { padding-bottom: 4px; font-size: 0.86rem; color: var(--ink-soft); }
.pcard__blurb { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.pcard .btn { margin-top: 20px; min-height: 46px; }
.pcard__feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.pcard__feats li { font-size: 0.88rem; line-height: 1.45; color: var(--ink); }
.pcard__feats li:not(.head) {
  padding-left: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.5 5.5 8 14l-4.5-4.5' stroke='%2328B887' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 3px;
}
.pcard__feats li.head { padding-top: 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }

/* ---------- responsive: collapse to a single card ---------- */
@media (max-width: 860px) {
  .login__grid { grid-template-columns: 1fr; max-width: 420px; min-height: 0; }
  .login__panel { display: none; }
  .login__form-col { padding: 40px 26px; }
  .pgrid { grid-template-columns: 1fr; max-width: 380px; }
}
@media (max-width: 420px) {
  .login { padding-top: 84px; }
  .login__form-col { padding: 34px 20px; }
}

/* App-aligned browser sign-in shell ------------------------------------------------
 * Keep the web page as a plain, full-viewport split layout: full-bleed artwork first
 * visually, then the form. This deliberately replaces the centred glass card and
 * promotional background above. */
.login__aura { display: none; }

.login {
  display: block;
  min-height: 100vh;
  padding: 0;
}

.login__grid {
  max-width: none;
  min-height: 100vh;
  /* Widen the artwork column as far as the form allows. The "ARCHIVO" wordmark
     spans ~97% of the source frame's width (x 18..1420 of 1448), and a
     full-bleed cover-crop reveals only (panel width / panel height) x 0.75 of
     it — so panel WIDTH is the only lever on how much of the word reads, and
     the panel has to be ~1.29x its own height to show all of it. Sizing the
     form column to the card instead of to a fraction of the grid spends every
     spare pixel on the art rather than on the form's gutters. */
  grid-template-columns: minmax(0, 1fr) clamp(380px, 27vw, 480px);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}

.login__panel {
  order: 1;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 0;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}

.login__panel::after { content: none; }
.login__panel-brand { display: none; }

.login__preview {
  flex: 1;
  width: 100%;
  max-width: none;
  min-height: 100%;
  gap: 0;
}

.pv {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.pv__media {
  /* the "ARCHIVO" wordmark's bounding box sits centered in the source frame,
     so a centered cover-crop keeps it as balanced as the panel width allows. */
  object-position: center;
}

.login__form-col {
  order: 2;
  /* Gutters scale with the (now narrower) column, not the viewport — 7vw here
     pinned to the 56px cap and ate the card's width on every desktop size. */
  padding: 48px clamp(28px, 2.6vw, 44px);
}

.login__card { max-width: 448px; }

@media (max-width: 860px) {
  .login { padding: 0; }
  .login__grid { min-height: auto; grid-template-columns: 1fr; }
  .login__form-col { min-height: 100vh; padding: 40px 26px; }
}

@media (max-width: 420px) {
  .login__form-col { padding: 34px 20px; }
}