/*
 * Auth screens: sign in, sign up, forgot and reset password.
 *
 * The frame is the LearnBoard instant demo layout, which the owner asked for:
 * a white panel floating over a blurred screenshot of the product, the form in
 * a tinted well on the left, and on the right an eyebrow pill, a display
 * heading, a lede, three points and the compliance framework marquee.
 *
 * The colours are Risenoow's, not LearnBoard's: the product teal, Inter, and
 * both themes, because these pages sit in front of a product that has a dark
 * mode and people arrive from it. The light values are the ones the product
 * uses in light mode, so the page does not change identity at the door.
 *
 * Every class here is one the pages already used (hn-auth-*), so the four
 * pages carry their own fields and handlers exactly as before.
 */

:root {
  --auth-ink: #23262b;
  --auth-ink-deep: #0f1f22;
  --auth-ink-muted: #5c6a70;
  --auth-ink-on-dark: #ffffff;
  --auth-paper: #f3f7f7;
  --auth-surface: #ffffff;
  --auth-well: #f7fafa;
  --auth-rule: #dbe5e6;
  --auth-teal: var(--rn-primary, #00b39d);
  --auth-teal-ink: var(--rn-primary-light, #037c88);
  --auth-green: #1e9446;
  --auth-green-ink: #1e9446;
  --auth-amber: #b86b00;
  --auth-purple: #7a3fd6;
  --auth-red-ink: #c62828;
  --auth-backdrop: url("/assets/img/auth/backdrop-light.webp");
  --auth-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
[data-theme="dark"] {
  --auth-ink: #f8fafc;
  --auth-ink-deep: #f8fafc;
  --auth-ink-muted: #8f97a3;
  --auth-ink-on-dark: #04201d;
  --auth-paper: #0f1518;
  --auth-surface: #1b262b;
  --auth-well: #16211f;
  --auth-rule: #29393f;
  --auth-teal: var(--rn-primary, #00c3ab);
  --auth-teal-ink: var(--rn-primary-tint, #7fe6d7);
  --auth-green: #3fbf5f;
  --auth-green-ink: #3fbf5f;
  --auth-amber: #f5a623;
  --auth-purple: #9c62e5;
  --auth-red-ink: #ff7a6a;
  --auth-backdrop: url("/assets/img/auth/backdrop-dark.webp");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/pb/fonts/inter-latin.woff2") format("woff2");
}

/* The operating system draws a select's open list and a date picker's
   calendar; color-scheme is the only lever over them, so each theme says
   which palette it is. The closed control is ours. */
html[data-theme="light"] body.hn-auth-workspace { color-scheme: light; }
html[data-theme="dark"] body.hn-auth-workspace { color-scheme: dark; }
.hn-auth-workspace select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%235c6a70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
html[data-theme="dark"] .hn-auth-workspace select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%238f97a3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------------------------------------------------------------- page */

body.hn-auth-workspace {
  margin: 0;
  background: var(--auth-paper);
  color: var(--auth-ink);
  font-family: var(--auth-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Padding counts inside the width, everywhere on these screens.
   Without it a full width control adds its own padding on top of 100% and
   hangs out of the panel: the Return to sign in button was 48px wider than the
   box it sat in (RN-42). Two controls had been patched one at a time; this is
   the rule those patches were each half of. */
.hn-auth, .hn-auth *, .hn-auth *::before, .hn-auth *::after { box-sizing: border-box; }

.hn-auth {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  overflow: clip;
}
/* The product itself, blurred, under a wash of the page colour. Two layers,
   because a blur on the wash would blur the wash. */
.hn-auth__backdrop {
  position: absolute; inset: 0; z-index: -2;
  background: var(--auth-backdrop) center center / contain no-repeat, var(--auth-paper);
  filter: blur(8px);
}
.hn-auth__wash {
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--auth-paper) 55%, transparent);
}
.hn-auth__in { width: 100%; max-width: 1280px; margin-inline: auto; }
.hn-auth__logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.hn-auth__logo a { display: inline-flex; border-radius: 8px; }
.hn-auth__logo a:focus-visible { outline: 2px solid var(--auth-teal); outline-offset: 4px; }
.hn-auth__logo img { display: block; width: auto; }

/* The product behind the card is dark in both themes (owner, 2026-09-30): the
   theme is the card's, so the page, the blurred backdrop, its wash and the
   logo above the card keep their dark values whichever is chosen. */
body.hn-auth-workspace { background: #0f1518; }
.hn-auth__backdrop { background: url("/assets/img/auth/backdrop-dark.webp") center center / contain no-repeat, #0f1518; }
.hn-auth__wash { background: color-mix(in srgb, #0f1518 55%, transparent); }
html body .hn-auth__logo img.rn-on-light { display: none !important; }
html body .hn-auth__logo img.rn-on-dark { display: block !important; }

/* The theme control, in the card's top right corner (owner, 2026-09-30). It
   sits on the card, so it takes the card's colours in each theme. */
.hn-auth-panel { position: relative; }
.hn-auth-theme {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--auth-rule); border-radius: 999px;
  background: var(--auth-surface); color: var(--auth-ink-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.hn-auth-theme:hover { color: var(--auth-ink); border-color: var(--auth-teal); }
.hn-auth-theme:focus-visible { outline: 2px solid var(--auth-teal); outline-offset: 3px; }
@media (max-width: 640px) { .hn-auth-theme { top: 14px; right: 14px; width: 34px; height: 34px; } }
/* Phones: the logo and the text links get a thumb sized target without moving (2026-10-01). */
@media (max-width: 640px) { .hn-auth__logo a, .hn-auth-form-row .hn-auth-link { padding-block: 7px; margin-block: -7px; } }
/* Close, in the corner; the theme control moves in beside it (owner, 2026-10-01). */
.hn-auth-panel > .hn-auth-theme { right: 64px; }
.hn-auth-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--auth-rule); border-radius: 999px;
  background: var(--auth-surface); color: var(--auth-ink-muted);
  transition: color .2s ease, border-color .2s ease;
}
.hn-auth-close:hover { color: var(--auth-ink); border-color: var(--auth-teal); }
.hn-auth-close:focus-visible { outline: 2px solid var(--auth-teal); outline-offset: 3px; }
.hn-auth-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (max-width: 640px) {
  .hn-auth-close { top: 14px; right: 14px; width: 34px; height: 34px; }
  .hn-auth-panel > .hn-auth-theme { right: 56px; }
}
.hn-auth-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hn-auth-theme__sun { display: none; }
[data-theme="dark"] .hn-auth-theme__sun { display: block; }
[data-theme="dark"] .hn-auth-theme__moon { display: none; }

/* --------------------------------------------------------------- panel */

.hn-auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: stretch;
  padding: 36px;
  border: 1px solid var(--auth-rule);
  border-radius: 24px;
  background: var(--auth-surface);
  box-shadow: 0 24px 60px -24px rgb(15 31 34 / .34);
}
/* The well fills the card, so a short form leaves no dead band under it. */
.hn-auth-form-shell {
  display: flex; flex-direction: column; min-width: 0;
  padding: 28px;
  border-radius: 16px;
  background: var(--auth-well);
}
.hn-auth-form-header { margin-bottom: 20px; }
.hn-auth-form-header h2 {
  margin: 0;
  font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.018em;
  color: var(--auth-ink);
}
.hn-auth-form-header p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--auth-ink-muted); }
.hn-auth-form-footer { margin-top: auto; padding-top: 16px; font-size: 12px; line-height: 1.6; color: var(--auth-ink-muted); text-align: center; }

/* ------------------------------------------------------ the right column */

.hn-auth-copy { min-width: 0; display: flex; flex-direction: column; }
.hn-auth-eyebrow { margin: 0 0 18px; }
.hn-auth-eyebrow span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 2px solid transparent; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  color: var(--auth-ink);
  background:
    linear-gradient(var(--auth-surface), var(--auth-surface)) padding-box,
    linear-gradient(90deg, var(--auth-teal), var(--auth-green), var(--auth-teal-ink), var(--auth-teal)) border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 50%;
  animation: hn-auth-drift 9s linear infinite;
}
@keyframes hn-auth-drift { to { background-position: 0 0, 300% 50%; } }
.hn-auth-spark { width: 15px; height: 15px; flex: none; fill: var(--auth-teal); }
.hn-auth-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 1.4rem + 2.6vw, 52px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  color: var(--auth-ink);
  text-wrap: balance;
}
.hn-auth-lede { margin: 0 0 28px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--auth-ink-muted); }
.hn-auth-points { list-style: none; display: grid; gap: 14px; margin: 0 0 30px; padding: 0; }
.hn-auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--auth-ink); }
.hn-auth-points span.hn-auth-point-ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--hue, var(--auth-teal)) 14%, var(--auth-surface));
  color: var(--hue-ink, var(--auth-teal-ink));
}
.hn-auth-points svg { width: 15px; height: 15px; }
.hn-auth-hue-teal { --hue: var(--auth-teal); --hue-ink: var(--auth-teal-ink); }
.hn-auth-hue-green { --hue: var(--auth-green); --hue-ink: var(--auth-green-ink); }
.hn-auth-hue-amber { --hue: var(--auth-amber); --hue-ink: var(--auth-amber); }
.hn-auth-hue-purple { --hue: var(--auth-purple); --hue-ink: var(--auth-purple); }

.hn-auth-trust {
  margin: auto 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--auth-ink-muted);
}
/* Two rows, three copies each, travelling exactly one copy in opposite
   directions, faded at both ends and paused under the pointer. */
.hn-auth-marquee {
  display: grid; gap: 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .05) 3%, rgb(0 0 0 / .35) 6%, #000 9%, #000 91%, rgb(0 0 0 / .35) 94%, rgb(0 0 0 / .05) 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .05) 3%, rgb(0 0 0 / .35) 6%, #000 9%, #000 91%, rgb(0 0 0 / .35) 94%, rgb(0 0 0 / .05) 97%, transparent 100%);
}
.hn-auth-mq-row { overflow: hidden; }
.hn-auth-mq-track {
  list-style: none; display: flex; align-items: center; gap: 30px;
  width: max-content; margin: 0; padding: 0;
  animation: hn-auth-mq-left 45s linear infinite;
}
.hn-auth-mq-row--rtl .hn-auth-mq-track { animation-name: hn-auth-mq-right; }
@keyframes hn-auth-mq-left  { from { transform: translateX(0); }         to { transform: translateX(-33.3333%); } }
@keyframes hn-auth-mq-right { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
.hn-auth-mq-row:hover .hn-auth-mq-track, .hn-auth-mq-track:focus-within { animation-play-state: paused; }
.hn-auth-mq-track li { flex: none; display: flex; align-items: center; }
.hn-auth-mq-track img {
  display: block; height: 38px; width: auto;
  filter: grayscale(1); opacity: .74;
  transition: filter .26s ease, opacity .26s ease;
}
.hn-auth-mq-track li:hover img { filter: grayscale(0); opacity: 1; }
[data-theme="dark"] .hn-auth-mq-track img { filter: grayscale(1) invert(1); opacity: .7; }
[data-theme="dark"] .hn-auth-mq-track li:hover img { filter: grayscale(1) invert(1); opacity: 1; }

/* ------------------------------------------------------- fields and form */

.hn-auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.hn-auth-field { display: block; }
.hn-auth-field label {
  display: block; margin: 0 0 8px;
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--auth-ink);
}
.hn-auth-field input,
.hn-auth-field select,
.hn-auth-field textarea {
  display: block; width: 100%; margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--auth-rule); border-radius: 10px;
  background: var(--auth-surface); color: var(--auth-ink);
  font: inherit; font-size: 17px; line-height: 1.6;
  box-sizing: border-box;
}
.hn-auth-field input::placeholder { color: var(--auth-ink-muted); opacity: .7; }
.hn-auth-field input:focus, .hn-auth-field select:focus, .hn-auth-field textarea:focus {
  outline: 2px solid var(--auth-teal); outline-offset: 1px; border-color: var(--auth-rule);
}
.hn-auth-password { position: relative; }
.hn-auth-password input { padding-right: 48px; }
.hn-auth-password button {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--auth-ink-muted); cursor: pointer;
}
.hn-auth-password button:hover { color: var(--auth-ink); }
.hn-auth-password svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hn-auth-password__hide { display: none; }
.hn-auth-password button[aria-pressed="true"] .hn-auth-password__show { display: none; }
.hn-auth-password button[aria-pressed="true"] .hn-auth-password__hide { display: block; }

.hn-auth-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.hn-auth-link { color: var(--auth-ink); font-weight: 500; text-decoration: underline; text-underline-offset: .15em; }
.hn-auth-link:hover { text-decoration: none; }

/* The button wears the product's own spectrum, and drifts with it. */
.hn-auth-button {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px;
  border: 0; border-radius: 12px;
  font: inherit; font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.6;
  color: #ffffff; text-decoration: none; cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(100deg,
    var(--rn-primary, #00b39d), color-mix(in srgb, var(--rn-primary, #00c3ab) 95%, #000), #2f8fd0, #5f7fd8, #2f8fd0, color-mix(in srgb, var(--rn-primary, #00c3ab) 95%, #000), var(--rn-primary, #00b39d), #1e9446, var(--rn-primary, #00b39d));
  background-size: 1200px 100%; background-repeat: repeat-x;
  text-shadow: 0 1px 2px rgb(0 0 0 / .28);
  animation: hn-auth-spectrum 18s linear infinite;
  transition: transform .16s cubic-bezier(.2, 0, 0, 1), filter .16s linear;
}
@keyframes hn-auth-spectrum { from { background-position-x: 0; } to { background-position-x: -1200px; } }
.hn-auth-button:hover { transform: translateY(-2px); filter: saturate(1.12); }
.hn-auth-button:focus-visible { outline: 2px solid var(--auth-teal); outline-offset: 2px; }
.hn-auth-button:disabled { opacity: .6; cursor: wait; transform: none; }
.hn-auth-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hn-auth-alert {
  margin: 0 0 16px; padding: 12px 16px;
  border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--auth-red-ink) 12%, var(--auth-surface));
  color: var(--auth-red-ink);
  font-size: 14px; line-height: 1.6;
}
.hn-auth-alert--success {
  background: color-mix(in srgb, var(--auth-green) 14%, var(--auth-surface));
  color: var(--auth-green-ink);
}
/* The state a form leaves behind: a sent reset, a dead invitation, an
   expired link. Its own small block, because it replaces the fields. */
.hn-auth-status { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; color: var(--auth-ink-muted); }
.hn-auth-status__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: color-mix(in srgb, var(--auth-teal) 14%, var(--auth-surface));
  color: var(--auth-teal-ink);
}
.hn-auth-status__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hn-auth-status h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--auth-ink); }
.hn-auth-status p { margin: 0; line-height: 1.6; }
.hn-auth-status .hn-auth-button { margin-top: 8px; }
.hn-auth-route { margin: 18px 0 0; font-size: 14px; text-align: center; color: var(--auth-ink-muted); }
.hn-auth-route a { color: var(--auth-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.hn-auth-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; text-align: center; color: var(--auth-ink-muted); }

/* Cloudflare draws its own fixed-size frame here; this only gives it the
   form's rhythm and hides the box when no key is configured. */
.hn-auth-form .cf-turnstile, .hn-auth-turnstile { width: 100%; }
.hn-auth-turnstile:empty { display: none; }

/* Sign up carries three steps, a code box and a consent line. */
.hn-auth-steps { display: flex; gap: 6px; margin: 0 0 18px; }
.hn-auth-steps span { flex: 1; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--auth-ink-muted) 28%, transparent); }
.hn-auth-steps span.on { background: var(--auth-teal); }
.hn-auth-code {
  letter-spacing: 14px; text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; font-weight: 700;
}
/* Six boxes for a six-digit code: one per digit, all the same width, so the
   code shows its own length and how far the reader has got. */
.hn-auth-digits-field { margin: 0; padding: 0; border: 0; }
.hn-auth-digits-field legend {
  padding: 0; margin: 0 0 8px;
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--auth-ink);
}
.hn-auth-digits { display: flex; gap: 8px; }
.hn-auth-digit {
  width: 100%; height: 56px; margin: 0; padding: 0;
  border: 1px solid var(--auth-rule); border-radius: 10px;
  background: var(--auth-surface); color: var(--auth-ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 600; text-align: center;
  box-sizing: border-box;
}
.hn-auth-digit:focus { outline: 2px solid var(--auth-teal); outline-offset: 1px; }
@media (max-width: 400px) {
  .hn-auth-digits { gap: 6px; }
  .hn-auth-digit { height: 48px; font-size: 19px; }
}
.hn-auth-consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--auth-ink); }
.hn-auth-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--auth-teal); cursor: pointer; }
.hn-auth-consent a { color: var(--auth-teal-ink); font-weight: 600; text-decoration: none; cursor: pointer; }
.hn-auth-consent a:hover { text-decoration: underline; }
.hn-auth-inline-note { margin: 0; font-size: 13px; color: var(--auth-ink-muted); }
.hn-auth-inline-note strong { color: var(--auth-ink); }
.hn-auth-notice {
  margin: 0 0 14px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--auth-teal) 45%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--auth-teal) 10%, var(--auth-surface));
  color: var(--auth-teal-ink); font-size: 13.5px;
}
.hn-auth-linkbtn {
  padding: 0; border: 0; background: none;
  color: var(--auth-teal-ink); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.hn-auth-linkbtn:hover { text-decoration: none; }
.hn-auth-otp-actions { display: grid; grid-template-columns: max-content minmax(0, 1fr); justify-content: stretch; align-items: center; gap: 8px 18px; margin-top: 14px; }
/* The two forms give their contents to the grid, so the bot check and the
   two links are laid out together whatever Cloudflare decides to draw.
   RN-33, then RN-4 on 7 Oct: the fix before this one recognised a drawn
   challenge by the iframe inside it, but Cloudflare now draws inside a
   shadow root, so the rule never fired and the challenge sat beside
   "Use a different email" with the links at two heights. Now the check, if
   it draws anything, always has the full first row, and the two links share
   the row under it. Nothing here depends on how Cloudflare builds its box. */
.hn-auth-otp-actions > .pb-inline-form { display: contents; }
.hn-auth-otp-actions .cf-turnstile { grid-column: 1 / -1; grid-row: 1; display: block; width: 100%; margin: 0; }
.hn-auth-otp-actions .hn-auth-linkbtn { grid-row: 2; justify-self: start; }

/* The product, in a window frame, on the workspace sign in (2026-10-20). */
.hn-auth-shot { margin: 4px 0 30px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #dfe5e8; box-shadow: 0 30px 60px -28px rgba(10, 30, 40, .35); }
.hn-auth-shot img { display: block; width: 100%; height: auto; }
.hn-auth-shot__bar { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; background: #f1f4f6; border-bottom: 1px solid #e3e8eb; }
.hn-auth-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9d1d6; }
.hn-auth-shot__bar i:nth-child(1) { background: #ff5f57; } .hn-auth-shot__bar i:nth-child(2) { background: #febc2e; } .hn-auth-shot__bar i:nth-child(3) { background: #28c840; }
.hn-auth-shot__bar span { margin: 0 auto; transform: translateX(-24px); padding: 2px 14px; border-radius: 6px; background: #fff; color: #6b7780; font: 500 11px/1.3 system-ui, sans-serif; }
.hn-auth-shot__dark { display: none !important; }
[data-theme="dark"] .hn-auth-shot { background: #0f1519; border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); }
[data-theme="dark"] .hn-auth-shot__bar { background: #141c21; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .hn-auth-shot__bar span { background: #0c1216; color: #8c99a3; }
[data-theme="dark"] .hn-auth-shot__light { display: none !important; }
[data-theme="dark"] .hn-auth-shot__dark { display: block !important; }

.hn-auth-maker { position: relative; margin: 18px 0 0; text-align: center; color: rgba(214, 226, 236, .62); font-size: 12px; }
.hn-auth-maker a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(214, 226, 236, .3); text-underline-offset: 3px; }
.hn-auth-maker a:hover, .hn-auth-maker a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* --------------------------------------------------- phones and narrow */

@media (max-width: 960px) {
  .hn-auth { min-height: 0; padding: 22px 14px; }
  .hn-auth-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px; }
  .hn-auth-form-shell { padding: 18px; }
  /* The introduction reads first, then the form, then the points and the
     marquee: one copy of the content, ordered by CSS. */
  .hn-auth-copy { display: contents; }
  .hn-auth-copy > .hn-auth-eyebrow, .hn-auth-copy > h1, .hn-auth-copy > .hn-auth-lede { order: -1; }
  .hn-auth-form-shell { order: 0; }
  .hn-auth-copy > .hn-auth-points, .hn-auth-copy > .hn-auth-shot, .hn-auth-copy > .hn-auth-trust, .hn-auth-copy > .hn-auth-marquee { order: 1; }
  .hn-auth-copy > .hn-auth-lede { margin-bottom: 0; }
  .hn-auth-copy > .hn-auth-points { margin-top: 8px; }
  .hn-auth-copy > .hn-auth-trust { margin-top: 0; }
  .hn-auth-copy h1 { font-size: clamp(28px, 6vw, 38px); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-auth-eyebrow span, .hn-auth-mq-track, .hn-auth-button { animation: none; }
  .hn-auth-button:hover { transform: none; }
}