/* Login — simple split-screen. Left = concise branding, right = focused form. */

.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

.brandpane {
  position: relative; overflow: hidden; color: #fff; padding: 54px 56px;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 120% at 15% 10%, var(--red) 0%, var(--red-deep) 55%, #4c0703 100%);
}
.brandpane .logo .wordmark b { color: #fff; }
.brandpane .logo .wordmark em { color: rgba(255, 255, 255, .72); }
/* Opaque white on the deep-red pane: the mark's own glyph is red, so a
   translucent tile would leave it low-contrast against the background. */
.brandpane .mark { background: #fff; border-color: rgba(255, 255, 255, .5); }
.brandpane .pane-body { margin-top: auto; max-width: 30ch; }
.brandpane h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -.6px; font-weight: 800; }
.brandpane p { color: rgba(255, 255, 255, .84); margin: 16px 0 0; font-size: 15px; }
.trust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .92); }
.trust .icon { flex: none; opacity: .9; }

/* subtle, restrained background motif (single element) */
.motif { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.motif i {
  position: absolute; right: -120px; top: -100px; width: 420px; height: 420px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
}
.motif i::after {
  content: ""; position: absolute; inset: 70px; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 50%;
}

.formpane { display: grid; place-items: center; padding: 40px 24px; position: relative; }
.formpane .theme-slot { position: absolute; top: 18px; right: 18px; }
.login-card { width: 100%; max-width: 384px; }
.login-card > .logo { margin-bottom: 26px; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; color: var(--red); margin: 0; }
.login-card h1 { font-size: 26px; letter-spacing: -.4px; margin: 10px 0 6px; }
.login-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

.login-foot { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.login-foot a { font-weight: 600; text-decoration: none; }
.secnote {
  margin-top: 26px; display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--muted); border-top: 1px dashed var(--line); padding-top: 16px;
}
.secnote .icon { flex: none; }

/* --- 2-step verification (/login2/verify) -------------------------------- */
/* ONE real input (keeps one-time-code autofill and works without JS) that is
   PRESENTED as six cells.
   Alignment note: an earlier version spaced the input's own text with
   letter-spacing to line the digits up with the boxes. That drifts, because
   letter-spacing is added after each glyph and the offset depends on the font's
   advance width and the container width. Instead the input's text is hidden and
   twofa.js mirrors each digit into its own cell, so ordinary centring does the
   work and it is exact at any width or font.
   Without JS the cells stay hidden and this is simply a normal text field. */
.otp-wrap { position: relative; }
.otp-cells { display: none; }

/* Plain single field: the no-JS baseline. */
.otp-wrap input {
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 6px;
  text-align: center;
}
.otp-wrap input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: var(--ring);
}

/* --- enhanced (JS on): six real cells, digits mirrored into them --------- */
.otp-wrap.js-otp .otp-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  pointer-events: none;   /* clicks fall through to the input beneath */
}
.otp-wrap.js-otp .otp-cells span {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
/* The input covers the cells but shows nothing: no text, no caret. The cell
   highlight below is the caret substitute. */
.otp-wrap.js-otp input {
  position: absolute;
  inset: 0;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  letter-spacing: normal;
  text-align: left;
}
.otp-wrap.js-otp input:focus { outline: none; box-shadow: none; border: 0; }

.otp-wrap.js-otp .otp-cells span.filled {
  border-color: var(--muted);
  transform: translateY(-1px);
}
/* Marks where the next digit will land - stands in for the hidden caret. */
.otp-wrap.js-otp input:focus ~ .otp-cells span.active {
  border-color: var(--red);
  box-shadow: var(--ring);
}
.otp-wrap.js-otp[data-filled="6"] .otp-cells span { border-color: var(--green); }

.otp-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 18px;
  text-align: center;
}
.countdown.expiring { color: var(--red); font-weight: 600; }
.countdown.expired  { color: var(--red); font-weight: 600; }

/* When the code has lapsed, steer the agent to the resend control. */
#resendBtn.emphasised {
  color: var(--red);
  font-weight: 700;
}
/* The resend control is its own <form> (nested forms are invalid HTML), so it
   needs to read as a continuation of the card above rather than a second card. */
.resend-card { margin-top: 14px; padding-top: 18px; }
.resend-card .login-foot { margin-top: 0; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--brand, #c0392b);
  text-decoration: underline;
}
.linklike:hover { opacity: .85; }

/* Mobile: branding stacks above the form; no large empty panel. */
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .brandpane {
    padding: 30px 24px; min-height: auto;
  }
  .brandpane .pane-body { margin-top: 18px; max-width: none; }
  .brandpane h2 { font-size: 24px; }
  .brandpane p { font-size: 14px; }
  .trust { display: none; }
  .formpane { padding: 28px 20px 44px; }
}