/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL — auth pages
   Loaded after terminal.css on login / register / password / 2FA screens.

   The concept: signing in is opening a session on the terminal. The form lives
   inside the same window chrome as the homepage calculator, and the desktop
   side rail is a status readout rather than a marketing panel — mono rows,
   live dot, a figure block. On a phone the rail collapses away entirely and
   the window becomes the whole screen.
   ══════════════════════════════════════════════════════════════════════════ */

.tm-auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 760px 420px at 78% -12%, var(--tm-lime-dim), transparent 62%),
    var(--tm-bg);
}

.tm-auth {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Status rail (desktop only) ─────────────────────────────────────────── */
.tm-auth-rail {
  border-right: 1px solid var(--tm-line);
  background: var(--tm-bg-2);
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.tm-auth-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.tm-auth-headline {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.1;
}
.tm-auth-headline em { font-style: normal; color: var(--tm-lime); }
.tm-auth-desc { color: var(--tm-txt-2); font-size: .92rem; line-height: 1.75; margin-top: 16px; max-width: 32em; }

.tm-auth-body-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Figure block — four hairline cells, the same component language as the
   public trust strip so the two pages read as one product. */
.tm-auth-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tm-line); border: 1px solid var(--tm-line); border-radius: var(--tm-r); overflow: hidden; margin-top: 30px; }
.tm-auth-stat { background: var(--tm-bg-3); padding: 16px 18px; }
.tm-auth-stat b { display: block; font-family: var(--tm-mono); font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; }
.tm-auth-stat span { display: block; font-family: var(--tm-mono); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-txt-3); margin-top: 5px; }

.tm-auth-checks { display: flex; flex-direction: column; gap: 1px; margin-top: 22px; }
.tm-auth-check {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--tm-mono); font-size: .78rem; color: var(--tm-txt-2);
  padding: 10px 0; border-bottom: 1px solid var(--tm-line);
}
.tm-auth-check:last-child { border-bottom: 0; }
.tm-auth-check i { color: var(--tm-lime); font-size: .8rem; width: 16px; text-align: center; flex-shrink: 0; }

.tm-auth-back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tm-mono); font-size: .76rem; color: var(--tm-txt-3);
  transition: color .16s;
}
.tm-auth-back:hover { color: var(--tm-lime); }

/* ── Form panel ─────────────────────────────────────────────────────────── */
.tm-auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 34px 26px;
  position: relative;
}
.tm-auth-toggle { position: absolute; top: 20px; right: 20px; z-index: 2; }

.tm-auth-card { width: 100%; max-width: 470px; }
.tm-auth-card .tm-term-body { padding: 26px 24px 28px; }

.tm-auth-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tm-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tm-lime);
  border: 1px solid var(--tm-line); border-radius: 5px; padding: 5px 10px;
}
.tm-auth-title { font-size: 1.62rem; font-weight: 700; letter-spacing: -.03em; margin-top: 16px; line-height: 1.16; }
.tm-auth-sub { color: var(--tm-txt-2); font-size: .88rem; margin-top: 8px; }

.tm-auth-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.tm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tm-auth-field label {
  display: block; font-family: var(--tm-mono); font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--tm-txt-3); margin-bottom: 8px;
}
.tm-auth-field label span { text-transform: none; letter-spacing: 0; color: var(--tm-txt-3); }

/* Icon sits inside the field. The input's own left padding is what makes room
   for it; the icon is pointer-events:none so a tap anywhere still focuses. */
.tm-input-wrap { position: relative; display: flex; align-items: center; }
.tm-input-icon {
  position: absolute; left: 14px; color: var(--tm-txt-3); font-size: .84rem;
  pointer-events: none; line-height: 1;
}
.tm-input-wrap .form-input { padding-left: 40px; }
.tm-input-wrap .form-input.has-toggle { padding-right: 46px; }
.tm-input-wrap:focus-within .tm-input-icon { color: var(--tm-lime); }

.tm-eye {
  position: absolute; right: 6px; width: 36px; height: 36px;
  display: grid; place-items: center; background: none; border: 0;
  color: var(--tm-txt-3); cursor: pointer; border-radius: 7px;
}
.tm-eye:hover { color: var(--tm-lime); }

.tm-auth-submit {
  width: 100%; justify-content: center; margin-top: 4px;
  min-height: 50px; font-size: .9rem;
}

.tm-auth-link { color: var(--tm-lime); font-weight: 600; }
.tm-auth-meta { display: flex; justify-content: flex-end; margin-top: 8px; }
.tm-auth-meta a { font-family: var(--tm-mono); font-size: .74rem; color: var(--tm-lime); }

.tm-auth-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tm-line);
  font-size: .84rem; color: var(--tm-txt-2); display: flex; gap: 10px;
  justify-content: space-between; flex-wrap: wrap;
}
.tm-auth-foot a { color: var(--tm-lime); font-weight: 600; }

.tm-captcha-note { font-size: .7rem; color: var(--tm-txt-3); text-align: center; margin-top: 12px; line-height: 1.6; }
.tm-captcha-note a { color: var(--tm-txt-2); text-decoration: underline; }

.tm-ref-banner {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--tm-cyan); background: var(--tm-cyan-dim);
  border-radius: var(--tm-r-sm); padding: 12px 14px; font-size: .84rem;
  margin-top: 18px; line-height: 1.55;
}
.tm-ref-banner i { color: var(--tm-cyan); margin-top: 3px; flex-shrink: 0; }

/* Terms checkbox — the label is the tap target, so it gets the padding. */
.tm-terms { display: flex; gap: 11px; align-items: flex-start; font-size: .8rem; color: var(--tm-txt-2); line-height: 1.6; }
.tm-terms input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--tm-lime-fill); cursor: pointer;
}
.tm-terms a { color: var(--tm-lime); }

/* ── Password strength meter ────────────────────────────────────────────── */
.tm-pwd-meter { display: flex; gap: 4px; margin-top: 9px; }
.tm-pwd-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--tm-bg-3); transition: background-color .2s; }
.tm-pwd-bar.weak   { background: var(--tm-red); }
.tm-pwd-bar.fair   { background: var(--tm-amber); }
.tm-pwd-bar.good   { background: var(--tm-cyan); }
.tm-pwd-bar.strong { background: var(--tm-lime-fill); }
.tm-pwd-label { font-family: var(--tm-mono); font-size: .68rem; margin-top: 6px; letter-spacing: .06em; min-height: 1em; }

/* ── One-time-code field ────────────────────────────────────────────────── */
.tm-otp {
  font-family: var(--tm-mono); letter-spacing: .5em; text-align: center;
  font-size: 1.35rem; padding-left: 14px !important; padding-right: 0 !important;
  min-height: 58px;
}

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tm-auth { grid-template-columns: 1fr; }
  .tm-auth-rail { display: none; }
  .tm-auth-panel { padding: 22px 16px 40px; align-items: flex-start; }
  .tm-auth-card { max-width: 520px; }
  .tm-auth-card .tm-term { box-shadow: none; }
  .tm-auth-toggle { top: 14px; right: 14px; }
}

@media (max-width: 520px) {
  .tm-field-row { grid-template-columns: 1fr; }
  .tm-auth-card .tm-term-body { padding: 22px 18px 24px; }
  .tm-auth-title { font-size: 1.42rem; }
}

/* A mobile-only home link, since the desktop rail that normally carries it is
   gone at this breakpoint. */
.tm-auth-mobile-home { display: none; margin-bottom: 18px; }
@media (max-width: 900px) {
  .tm-auth-mobile-home { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
}