/* The V5 sign-in page (HENG-88).

   Measurements come from the design source, `Hatch Analytics Sign In.dc.html`
   in this ticket's functional-design folder, rather than from what the rest of
   the app happens to use: this is the one screen in the product built to V5,
   and the first pass at it reused the console's sizes and read as a different
   page. Where a value here differs from a similar one elsewhere in the
   codebase -- the card's 460px and 24px radius against the console card's
   380px and 16px, the 1180px content width against 1080px -- the difference is
   the design source's, not an oversight.

   Loaded via views/layout.js's extraHead param, after theme.css and
   common/app.css, so these rules can rely on every token those two define.
   Colour values are tokens without exception; test/test-theme-wiring.js fails
   the build on a literal in this file.

   .oauth-row/.btn-oauth are NOT here: both were dead (cursor: not-allowed, no
   click handler, superseded by Clerk's own social buttons) and were deleted
   outright rather than moved. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Page frame ---------------------------------------------------------
   The design source's `.si-stage`: a full-height column with the nav pill
   floating at the top, the main grid taking the slack, and the footer sitting
   on the bottom of the viewport when the content is short. */
body.sign-in-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.sign-in-page > main {
  flex: 1;
  display: flex;
}

/* ---- Nav pill -----------------------------------------------------------
   Layout only. .app-header__beta, .app-header__brand, .wordmark and .env keep
   the shared, cross-app styling common/app.css defines (HENG-87); this
   repositions the pill, rounds it fully, and sizes the environment chip to the
   design source's env-badge spec (14px / .14em / 9px 16px). */
.si-nav {
  position: sticky;
  top: 14px;
  z-index: 40;
  max-width: 1148px;
  width: calc(100% - 32px);
  margin: 14px auto 0;
  padding: 10px 12px 10px 20px;
  gap: 16px;
  border-radius: 999px;
}
/* Nothing in the pill overflows the viewport, and the product's own name is
   the last thing that gives. Left alone, the toggle runs off the right edge
   on a phone; shrink the brand instead and the wordmark truncates to
   "HatchAna...", which is worse than losing a chip. What actually gives is
   the environment chip, at the phone breakpoint below. */
.si-nav .app-header__brandgroup { min-width: 0; }
.si-nav .wordmark { white-space: nowrap; }
.si-nav .app-header__brand,
.si-nav .app-header__divider,
.si-nav .app-header__beta { flex: none; }
.si-nav .env {
  margin-left: auto;
  font-size: 14px;
  letter-spacing: 0.14em;
  padding: 9px 16px;
  line-height: 1;
}

/* Theme toggle: 44px round button, 32px round knob, icon inside the knob.
   The knob inverts -- deep green carrying a volt glyph on the light page,
   volt carrying a deep-green one on the dark page -- which is the design
   source's own treatment and the brand reference's. Both colours are fixed
   brand values in either theme, so they are used directly rather than through
   a flipping pair. .si-knob IS shared/theme-toggle.js's
   [data-theme-toggle-icon] span; it fills the SVG in. */
.si-toggle.theme-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-control-border);
  background: var(--surface-control-fill);
}
.si-toggle.theme-toggle:hover { background: var(--surface-control-hover-fill); }
.si-knob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-deep-green);
  color: var(--color-volt);
  transition: background 0.2s ease, color 0.2s ease;
}
:root[data-theme='dark'] .si-knob { background: var(--color-volt); color: var(--color-deep-green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .si-knob { background: var(--color-volt); color: var(--color-deep-green); }
}

/* ---- The two-column screen --------------------------------------------- */
.si-screen {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px);
  align-items: center;
  gap: 56px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 32px 64px;
  box-sizing: border-box;
}
.si-screen > * { min-width: 0; }

/* ---- Marketing column --------------------------------------------------- */
.si-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-accent);
}
.si-live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-volt);
  box-shadow: 0 0 0 4px var(--volt-28);
}
.si-headline {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.si-em {
  font-style: italic;
  color: var(--ink-accent);
}
.si-body {
  margin: 22px 0 0;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.si-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
}
/* The design source draws a 1px element between each pair; a border on the
   later sibling is the same rule with one fewer node. */
.si-stat + .si-stat {
  padding-left: 28px;
  border-left: 1px solid var(--line-hairline);
}
.si-stat__value {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink-heading);
  font-variant-numeric: tabular-nums lining-nums;
}
.si-stat__unit { font-size: 0.5em; }
.si-stat__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---- The card ----------------------------------------------------------- */
.si-card-column {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  justify-self: end;
}
/* A lighter glass than the console's --surface-card-*: see shared/theme.css's
   --_light-surface-authcard-fill for why this screen has its own recipe. */
.auth-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 36px 36px 30px;
  background: var(--surface-authcard-fill);
  backdrop-filter: var(--surface-authcard-blur);
  -webkit-backdrop-filter: var(--surface-authcard-blur);
  box-shadow: var(--surface-authcard-shadow);
}
/* The specular highlight along the top edge -- inset from both sides so it
   reads as light catching a curve rather than as a rule. */
.auth-card__edge {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--surface-card-edge-highlight), transparent);
}

.auth-card__head { margin-bottom: 28px; }
.auth-card__welcome {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--ink-muted);
}
.auth-card__lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-card__mark {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--ink-emphasis);
}
.auth-card__title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-emphasis);
}
.auth-card__title b { font-weight: 700; }
.auth-card__title sup { font-size: 0.33em; vertical-align: super; margin-left: 2px; }

.auth-card__secured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
  font-size: 12.5px;
  color: var(--ink-muted);
}

.auth-card__note {
  margin: 20px 0 0;
  font-size: 12px;
  max-width: none;
  color: var(--ink-muted);
}

.auth-banner {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.auth-banner strong { display: block; font-weight: 700; margin-bottom: 2px; }
.auth-banner span { color: inherit; }
.auth-banner--error {
  background: var(--meaning-danger-bg);
  border: 1px solid var(--meaning-danger-border);
  color: var(--meaning-danger);
}
/* The sign-out notice. Neutral rather than red: nothing failed, so borrowing
   the error treatment would make a normal thing look like a problem. */
.auth-banner--notice {
  background: var(--state-hover-fill);
  border: 1px solid var(--line-hairline);
  color: var(--ink-soft);
}
.auth-banner--success {
  background: var(--meaning-success-bg);
  border: 1px solid var(--meaning-success-border);
  color: var(--meaning-success);
}

.auth-card__switch {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
}
.auth-card__switch a { color: var(--ink-muted); }
.auth-card__switch a:hover { color: var(--ink-primary); }
/* HENG-230: the way into signup, as the signup mocks' screen 13 draws it. */
.si-create { font-size: 14px; color: var(--ink-primary); }
.si-create a { color: var(--ink-primary); font-weight: 700; }

/* ---- Clerk's mounted sign-in --------------------------------------------
   There are no structural `.cl-*` overrides here any more, and that is the
   point. Every rule this page needs -- including cardBox, card, header and
   footer, which a hands-on test on 2026-09-03 had concluded were inert --
   now goes through appearance.elements in public/login.js. Re-probed live on
   2026-09-23 against the pinned bundles with @clerk/ui loaded: all fifteen
   descriptors this page touches apply. clerk-js's own
   `structural_css_pin_clerk_ui` warning names nothing of ours as a result.

   The one rule left is a width on the mount node itself, which is OUR
   element, not one of Clerk's -- it exists in the document before Clerk
   renders into it, and no descriptor covers it. */
#clerk-signin { width: 100%; }

/* ---- Dev sign-in ---------------------------------------------------------
   Deliberately plain rather than designed (functional design §8): it sits
   outside the V5 composition and exists so the platform and anyone without a
   Clerk identity can reach the app in dev. */
.dev-signin input {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line-control-border);
  border-radius: 14px;
  background: var(--surface-input-fill);
  color: var(--ink-primary);
  font-family: inherit;
  font-size: 16px;
}
.dev-signin input:focus {
  outline: none;
  border-color: var(--line-input-focus-border);
  background: var(--surface-input-focus-fill);
  box-shadow: var(--glow-input-focus);
}
.dev-signin label {
  display: block;
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-label);
}

/* ---- Footer --------------------------------------------------------------
   Absent from every other page (views/layout.js emits no footer at all by
   default) -- this page is the only one that passes the new `footer` param. */
.si-footer {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px 28px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 22px;
}
.si-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
}
.si-footer__wordmark { height: 18px; width: auto; flex: none; }
.si-footer__copy { margin: 0; font-size: 12.5px; }
.si-footer__links {
  display: flex;
  gap: 20px;
  font-size: 13px;
}
/* Not links. See views/loginPage.js's footerHtml() for why: there is nothing
   behind any of the three yet. Muted and default-cursor so the page does not
   invite a click it cannot honour. */
.si-footer__soon {
  font-weight: 700;
  color: var(--ink-muted);
  cursor: default;
}

/* ---- Responsive ----------------------------------------------------------
   The design source's own three breakpoints. 1000px is where the two columns
   become one and the statistics drop -- earlier than the functional design's
   640px, which it satisfies by covering it. */
@media (max-width: 1000px) {
  .si-screen {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 24px;
    padding: 20px 20px 44px;
  }
  .si-marketing {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .si-eyebrow { justify-content: center; margin-bottom: 12px; }
  .si-headline { font-size: clamp(32px, 9vw, 42px); max-width: none; margin: 0 auto; }
  .si-body { font-size: 16px; margin: 12px auto 0; }
  .si-stats { display: none; }
  .si-card-column { justify-self: center; }
  .auth-card__head { text-align: center; }
  .auth-card__lockup { justify-content: center; }
}

@media (max-width: 640px) {
  .si-nav {
    width: calc(100% - 24px);
    padding: 8px 8px 8px 14px;
    gap: 8px;
  }
  .si-nav .wordmark { font-size: 21px; }
  .si-nav .app-header__mark { width: 26px; height: 26px; }
  /* The divider is pure decoration and the first thing to go. */
  .si-nav .app-header__divider { display: none; }
  /* And then the environment chip, which the design source's pill does not
     have at all. Four things do not fit beside a 21px wordmark at 375px, and
     of the four this is the one a customer never needs: it is absent on
     production anyway, so nothing is lost there, and off production it is a
     developer affordance that any wider window still shows. The Beta badge
     stays, because that one IS product state and does ship. */
  .si-nav .env { display: none; }
  .si-footer { padding: 0 20px 24px; }
}

@media (max-width: 420px) {
  .auth-card { padding: 28px 22px 24px; }
}

/* HENG-115: Support in the sign-in footer is now a link. */
a.si-footer__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }