/* ───────────────────────────────────────────────────────────────────
   Split auth layout.

   WHY this page is 50/50 rather than a centred card:
   the wordmark is a half-filled disc — one half solid, one half open.
   At full-bleed the page becomes that mark: left half solid ink with the
   form on it, right half paper with the product on it, and the seam sits
   where the disc's vertical diameter sits. The brand does not need to be
   explained if the layout is already it.

   Tokens come from style.css. This file only adds the layout, so the two
   pages cannot drift on colour or type.
   ─────────────────────────────────────────────────────────────────── */

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Left: ink half ─────────────────────────────────────────────── */

.auth-ink {
  background: var(--bg-raised);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 40px clamp(28px, 5vw, 76px);
  /* Redeclared rather than inherited: every child on this half needs the
     inverted pair, and setting it once here keeps .mark, links and inputs
     from each carrying their own override. */
  --ink-line: rgba(14,26,43, 0.16);
  --ink-dim: rgba(14,26,43, 0.5);
}

.auth-ink .wordmark {
  color: var(--text);
  font-size: 17px;
}

/* The mark is drawn from --text in style.css, which is the background here.
   Flipping both stops it vanishing into the panel. */
/* The dark-background recolouring has been removed: the gradient mark does not depend on
   the background colour, so one definition covers every case. */

.auth-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 372px;
  width: 100%;
  /* Centred in the ink half, not pinned to its left edge.
     This was `margin: 0 auto 0 0` — margin-left 0, margin-right auto — which
     parked a 372px form against the far left of a ~700px column and left the
     remaining ~500px empty all the way to the seam. The panel then read as a
     form with a large blank field beside it rather than as one half of a
     split page.
     {MEASURED at a 1440px viewport: the left half has padding-left 72px, the form occupies
      x 72–444, and there is 276px of empty space left over to the seam on the right
      — the left-to-right whitespace ratio is close to 1:4}
     [CONFIDENCE: CONFIRMED 100% — measured with getBoundingClientRect before the change;
      user 2026-08-31 pointed out "THE SIGN IN IS NOT CENTERED IN ITS HALF"] */
  margin: 0 auto;
  padding: 48px 0;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight:600;
  letter-spacing: -0.022em;
  /* The centring was originally provided by the same-named rule in style.css. Every other
     property of that rule (30px / 500) is overridden by this file, leaving only text-align
     still in effect — it took both files together to make up one title.
     Once the property is pulled in here, the entire sign-in section of style.css can be
     deleted, and the source of signin's styling converges onto a single file.
     {MEASURED BEFORE THE CHANGE: TITLESIZE=34PX / TITLEWEIGHT=600 (from auth.css),
      while TITLEALIGN=CENTER (from style.css)}
     [CONFIDENCE: CONFIRMED 100% — used getComputedStyle to measure where each property
      actually came from] */
  text-align: center;
}

.auth-form {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border-radius: 11px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.15s ease;
}

.field input::placeholder { color: rgba(14,26,43, 0.34); }
.field input:focus { outline: none; border-color: var(--text); }

/* Inverted button: on the ink half the primary action has to be paper,
   otherwise it reads as a disabled block on a black field. */
.button-paper {
  height: 50px;
  width: 100%;
  margin-top: 6px;
  border: none;
  border-radius: 11px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.button-paper:hover { transform: translateY(-1px); opacity: 0.92; }
.button-paper:active { transform: translateY(0); }

/* ── Divider row: the alternative sign-in paths ─────────────────── */

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-line);
}

/* The `gap` here only spaces sso links from *each other*; with a single link it
   does nothing, so the row sat flush against the Google button above it —
   measured 0px between them, which made a filled button and an outlined one
   read as a single two-part control.
   20px rather than the 16px used inside .auth-form: this is a step down in
   hierarchy (sign in vs. ask for an account), so the gap has to be larger than
   the one between fields of the same form, and smaller than the 26px that
   separates the block from .auth-foot.
   {MEASURED BEFORE THE CHANGE: .BUTTON-GOOGLE BOTTOM=605, .SSO-ROW TOP=605 — GAP 0PX}
   [CONFIDENCE: CONFIRMED 100% — measured with getBoundingClientRect; user 2026-08-31
    "CONTI WITH GOOLE IS TOO CLOSE WITH REQUEST INSTTITION ACCESS"] */
.sso-row { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.sso {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 11px;
  border: 1px solid var(--ink-line);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sso:hover { border-color: var(--text); background: rgba(14,26,43, 0.04); }
.sso svg { flex: 0 0 auto; }

.auth-foot {
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-dim);
  /* Same as .auth-title: the centring was previously only provided by style.css too. */
  text-align: center;
}

.auth-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.auth-legal {
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink-dim);
  display: flex;
  gap: 18px;
}

.auth-legal a { color: var(--ink-dim); text-decoration: none; }
.auth-legal a:hover { color: var(--text); }

/* ── Right: paper half ──────────────────────────────────────────── */

.auth-paper {
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px clamp(28px, 4.5vw, 64px);
  border-left: 1px solid var(--line-soft);
  /* This column is a grid child of .auth-split, and the default min-width:auto means "must
     not be narrower than the content". The marquee track inside it is max-content wide, so
     without lifting that constraint, 1fr 1fr would be stretched into two columns of unequal
     width and the right column would overflow beyond the viewport. */
  min-width: 0;
}

.paper-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.paper-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 33px);
  font-weight:600;
  letter-spacing: -0.022em;
  line-height: 1.22;
  max-width: 15ch;
}

/* ── The model marquee ──────────────────────────────────────────────
   Two rows of model tracks scrolling in opposite directions, replacing the former static
   .chunk line chart and the three big .paper-stats numbers (6 / 4 / 1).

   Why the count is no longer reported: a "6" reads as "that's all there is", whereas a queue
   that keeps flowing past and fades out at both ends reads as "there is more out there" —
   the latter uses no number at all and still carries more information (it incidentally says
   which ones).
   {USER 2026-08-31 "DO NOT USE THE NUBMER OF MODELS AS NUMBES"}
   {USER 2026-08-31 chose DESIGN B (TWO-TRACK MARQUEE), from tools/auth-panel-lab.html}
   [CONFIDENCE: CONFIRMED 100% — both are explicit instructions from this session]

   Why the line chart was removed entirely: that chart finished drawing after 1.5s and then
   sat frozen forever — a static image with "live" written on it.
   {auth.css BEFORE THE CHANGE ".CHUNK-PLOT POLYLINE{...ANIMATION: CHUNK-DRAW 1.5S ... FORWARDS;}"}
   [CONFIDENCE: CONFIRMED 100% — forwards with no infinite, so it plays once and stops] */

.tracks {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* overflow and min-width:0 are both indispensable, otherwise the whole page overflows
     horizontally.
     .track is width:max-content (required — the track has to be wider than the container for
     there to be anything to scroll), while the min-width of a grid/flex child defaults to
     auto — meaning "must not be narrower than the content". So that 2800px-wide track would
     stretch the entire .auth-paper column open and the page would get a horizontal
     scrollbar.
     min-width:0 lifts the "must not be narrower than the content" rule, and overflow:hidden
     clips off the part that sticks out.
     {MEASURED BEFORE THE CHANGE at a 1440px viewport: .AUTH-PAPER IS 2942PX WIDE, far beyond
      the ~720PX a half column should be}
     [CONFIDENCE: CONFIRMED 100% — measured with getBoundingClientRect; the lab page did not
      expose this problem because .frame carries its own overflow:hidden, whereas the real
      page's .auth-paper does not] */
  min-width: 0;
  overflow: hidden;
  /* Fade out at both ends. This mask is the entire source of the "there is more outside the
     viewport" reading — remove it and the track becomes a row of cards cut off hard, which
     instead looks like a rendering error. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* width:max-content is required: the track has to be wider than the container for there to
   be anything to scroll. Given a percentage width, the flex children would be compressed
   back to the container width and the animation would just sit still. */
.track { display: flex; gap: 10px; width: max-content; }

/* The two rows run in opposite directions. Running them the same way would blur the two rows
   into one solid block translating together, losing the "two independent queues" reading.
   The displacement is fixed at -50%, corresponding strictly to the content being rendered
   twice in the JS: at the halfway point the second copy lands exactly on the first copy's
   starting position, so the seam is invisible. Changing the 50% here means changing the
   number of copies over there at the same time. */
.track-fwd { animation: track-l 26s linear infinite; }
.track-rev { animation: track-r 26s linear infinite; }
@keyframes track-l { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes track-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.pill {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

/* The vendor marks keep their original colours — each one sits right next to its own model
   name and acts as a recognition cue.
   16px is the lower bound for the shape still being recognisable: any smaller and NVIDIA's
   eye and Google's G blur into a smudge. */
.pill-logo { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; border-radius: 3px; }
.pill .kind { color: var(--dim); font-size: 10.5px; letter-spacing: 0.08em; }

/* ── Vendor marks ───────────────────────────────────────────────────
   A row of vendor marks along the bottom, replacing the three big numbers. The mapping is
   not invented here — the single source of truth is the MODELS dict in
   tools/sync_model_logos.py, projected and de-duplicated by vendor.
   {sync_model_logos.py MODELS "\"PI05-DROID\": (\"PHYSICAL INTELLIGENCE\", \"PI.PNG\", …)"}
   [CONFIDENCE: CONFIRMED 100% — curl'd all 9 files one by one, all returned 200] */

.marks { margin-top: 26px; }

.marks-k {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

.marks-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

/* Greyscale plus reduced opacity: this row is an endorsement of "who runs on top of this",
   not nine brand blocks competing with each other for attention. The logos come with very
   different saturation levels (NVIDIA green, Google's four colours), and without uniform
   treatment this row would look like a wall of stickers. The original colours are only
   restored on hover. */
.mark-chip {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  padding: 4px;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.mark-chip:hover { filter: none; opacity: 1; }

.marks-foot { margin-top: 13px; font-family: var(--font-ui); font-size: 11px; color: var(--dim); }
.marks-foot b { color: var(--text); font-weight: 500; }

/* The scrolling is the entire point of this panel, but it is not worth trading a headache
   for. Once it stops, the track is still a full row of pills with not a single piece of
   information missing. */
@media (prefers-reduced-motion: reduce) {
  .track-fwd, .track-rev { animation: none; }
}

/* ── Narrow screens ─────────────────────────────────────────────── */

/* Below the split's breaking point the paper half goes underneath rather
   than disappearing: on a phone it is the only thing showing what the
   product does, so hiding it would leave a bare form on a black field. */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-ink { min-height: 100vh; min-height: 100dvh; }
  /* `.auth-body { margin: 0 auto }` used to live here — it existed only to undo
     the wide-screen left-pin. The base rule now centres at every width, so the
     override had nothing left to override. */
  .auth-paper { border-left: none; border-top: 1px solid var(--line-soft); padding: 52px 28px; }
  .paper-title { max-width: none; }
}

/* ── Google sign-in ──────────────────────────────────────────────────
   One button, because there is one way in. The email/password pair that stood
   here submitted to nothing. */
.button-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
}
.button-google svg{flex:0 0 auto;display:block}
/* The error line only appears when the callback bounced with a reason. A silent
   return to this page reads as "the button is broken", which sends people to
   support instead of to a retry. */
.auth-error{
  margin-top:14px;font-size:13.5px;line-height:1.5;color:#9A2A1E;
  background:rgba(154,42,30,0.07);border:1px solid rgba(154,42,30,0.2);
  border-radius:9px;padding:10px 12px;
}