/* The portal's two public screens (sign-in, then the one-time code after it) on the SolaryxDev site's own
   design (2026-09-25). The design system (tokens, fonts, the lockup, the island and its panels, the
   buttons, the footer) and the field's layers are the site's own files, copied by
   scripts/sync-site-design.js and loaded before this sheet (views/partials/signin_site_head.ejs). This sheet
   only lays out what the site has no page for: the copy and the form at the left of the first screen, on
   the page's grid, and the X of stars on the right. Every value is a site.css token or matches its
   contact form (fields) and its solid button.

   Layers (z): field backdrop 0 · the page 10 (the mark's drag surface inside) · the site's header, panels
   and skip link above it (site.css). */

:root {
  /* read by the shared code field (partials/otp_input.ejs) */
  --ovr: 255, 255, 255;
  --fg: var(--ink);
}
main:focus { outline: none; }

/* ── the first screen: the copy on the page's grid at the left, the X of stars on the right ──── */
.auth {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  column-gap: var(--col-gap);
  width: 100%;
  max-width: calc(var(--grid) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--pg-top) var(--gutter) 56px;
  overflow: clip;                            /* the pool under the copy never widens or lengthens the page */
}
.auth-copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: calc(440px * var(--z));
}
/* a soft pool of black under the copy, so no star ever sits behind a letter */
.auth-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -96px -140px -96px -96px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.auth-pic {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(72svh, 100%, 900px);
  aspect-ratio: 1;
  touch-action: pan-y pinch-zoom;
}
.ah1 {
  font: 500 calc(var(--fs-display) * var(--zd))/var(--lh-display) var(--font-ui);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.asub {
  margin-top: 16px;
  font-size: calc(var(--fs-body) * var(--z));
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.asub b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* status lines: an error is the one red; a note is a quiet neutral, never an alarm */
.aerr, .anote {
  margin-top: 22px;
  padding: 11px 14px;
  border-radius: var(--r-ctl);
  font-size: 13.5px;
  line-height: 1.45;
}
.aerr { color: #ffb0b0; background: rgba(255, 107, 107, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.42); }
.anote { color: var(--ink-2); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line-2); }

/* the form: the site's contact form fields and its solid button */
.aform { margin-top: 28px; display: grid; gap: 16px; }
.afield label { display: block; margin-bottom: 7px; font: 500 var(--fs-meta)/1.25 var(--font-ui); color: var(--ink-2); }
.afield input:not(.otp-in) {
  display: block; box-sizing: border-box; width: 100%; margin: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-field); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 400 15px/1.4 var(--font-ui); letter-spacing: -0.005em;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.afield input:not(.otp-in)::placeholder { color: var(--ink-3); opacity: 1; }
.afield input:not(.otp-in):hover { border-color: rgba(255, 255, 255, 0.26); }
.afield input:not(.otp-in):focus { outline: none; border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); }
/* the shared code field keeps its own cells; only their ground and corners follow the site's fields */
.afield .otp-cell { background: rgba(255, 255, 255, 0.04); border-radius: var(--r-field); }
.afield .otp-in { border-radius: var(--r-field); }

/* the one primary action of the screen (site.css .btn .btn-solid), so it spans the form */
.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100%; height: 46px; margin-top: 4px; padding: 0 20px; border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: #0a0a0b; font: 600 14.5px/1 var(--font-ui); letter-spacing: -0.005em;
  cursor: pointer; transition: background-color 0.2s, transform 0.2s var(--settle), opacity 0.2s;
}
.abtn:hover { background: #fff; }
.abtn:active { transform: scale(0.97); }
.abtn[disabled] { cursor: progress; opacity: 0.6; }
.resend {
  margin-top: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1.4 var(--font-ui); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px;
  transition: color 0.2s;
}
.resend:hover { color: var(--ink); }

/* the field's drag surface covers the mark only, never the form */
.auth-pic .astra-drag { border-radius: var(--r-field); }

/* The still poster (no WebGL, a low tier, an engine error) is a picture of the formed X, centred on the
   backdrop; its X spans about 0.36 of the picture's height. Here it is centred on the mark's box and
   sized so its X fills that box, never behind the form. The box is --s wide, centred on the second
   column (the grid: 5fr + 7fr and one column gap, inside the page's width less a gutter either side)
   and on the row, which sits half the difference of the padding (--pg-top above, 56 px below) under the
   middle of the screen. The poster's X sits 0.03 of --s right of its own centre, hence the small pull. */
.astra-poster {
  --w: min(100vw, calc(var(--grid) + 2 * var(--gutter)));
  --c: calc(var(--w) - 2 * var(--gutter) - var(--col-gap));
  --s: min(72svh, calc(var(--c) * 7 / 12), 900px);
  left: calc((100vw - var(--w)) / 2 + var(--gutter) + var(--c) * 17 / 24 + var(--col-gap) - var(--s) * 0.03);
  top: calc(50svh + (var(--pg-top) - 56px) / 2);
  height: calc(var(--s) * 2.3);
}

/* tablets and phones: one column, the X above the copy (the copy stays first for a screen reader) */
@media (max-width: 959px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    row-gap: 4px;
    padding-top: calc(var(--pg-top) + 8px);
    padding-bottom: 40px;
  }
  .auth-pic { grid-column: 1; grid-row: 1; width: min(36svh, 80vw, 360px); }
  .auth-copy { grid-column: 1; grid-row: 2; max-width: 520px; }
  .auth-copy::before { inset: -40px -40px -60px; }
  .astra-poster { --s: min(36svh, 80vw, 360px); left: calc(50% - var(--s) * 0.03); top: calc(var(--pg-top) + 8px + var(--s) / 2); height: calc(var(--s) * 2.3); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .auth-copy { justify-self: center; }
}
/* wide screens: the copy grows with the page, so the two halves keep their weight */
@media (min-width: 1800px) {
  .afield input:not(.otp-in), .abtn { height: calc(46px * var(--z)); font-size: calc(15px * var(--z)); }
}
@media (prefers-reduced-motion: reduce) {
  .abtn, .afield input { transition: none; }
}