/* ──────────────────────────────────────────────────────────
   Primarc Studio — Sign-in (Sunrise concept, v2)
   Re-rooted in the redesign design system:
   Space Grotesk / Space Mono · near-black emerald canvas ·
   emerald structural · ONE rationed lime · sharp 2/4/6 corners.
   ────────────────────────────────────────────────────────── */

/* v6.0: this file used to open with its own :root block — the fourth token
   system in the suite, and the one the audit missed. Every --p-* it declared
   now lives in primarc-core/assets/primarc-tokens.css, including the daybreak
   ground ramp (--p-ground*), which is a real brand surface rather than a
   login-only hack. --p-sun-warm was declared here and never referenced; it
   went with the rest.

   --gutter is genuinely local to this layout, so it stays. */
:root {
  --gutter: clamp(26px, 6vw, 88px);

  /* Daybreak, rewritten in 6.5.6.

     The ground used to be #e4e6e0 - near paper - rising over 52% of the
     viewport against a #080b0a canvas. Measured, that band averaged 0.745
     relative luminance where the page sits at 0.006. It was a plane of
     light, not a dawn, and it threw the eye every time the scene crossed
     stop 2.

     A real dawn is a bright LINE with dark land under it. The light is now
     concentrated in the top tenth of the band and everything below stays in
     the deep end of the emerald ramp: band mean 0.064, down 91%, while the
     seam keeps a 9.1:1 edge against the canvas - enough to still read as a
     horizon, which is the whole job.

     The .is-light flip went with it. Nothing on the scene has to change
     colour halfway through the sequence any more. */
  --dawn-seam: #8fb9a6;
  --dawn-haze: #3f6d5b;
  --dawn-mid:  #204237;
  --dawn-land: #0f1e1a;

  /* The same horizon after five in the afternoon. */
  --dusk-seam: #d9a87f;
  --dusk-haze: #8a5b45;
  --dusk-mid:  #3c2a24;
  --dusk-land: #150f0e;
}

/* The scene answers prefers-reduced-motion in login.js - it is a rAF loop
   writing inline styles, which no rule here could reach. What is left is the
   three things that loop forever on their own: the live dot, the sign-in
   spinner and the scroll hint. The spinner keeps a visible state rather than
   vanishing, because a submit button that stops responding and says nothing
   is worse than one that spins. */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; opacity: .85; }
  .s-line   { animation: none; }
  .f-btn.loading .spinner { animation: none; opacity: .6; }
  /* The panel arrives whole and the words are already drawn. login.js holds
     the scene at its last frame; these are the pieces it cannot reach. */
  .lc-edge { display: none; }
  .beat-word b { clip-path: none !important; }
  * { transition-duration: .01ms !important; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--p-bg);
  font-family: var(--p-font);
  color: var(--p-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scene shell ───────────────────────────────────────────── */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  cursor: ns-resize;
  user-select: none;
}
.scene.form-first { cursor: default; }

.layer { position: absolute; inset: 0; }

/* Liquid emerald haze canvas is injected at z-index 0 */

.bg-dark {
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(var(--p-tint-rgb), .20) 0%, transparent 55%),
    radial-gradient(120% 100% at 10% 100%, rgba(26,74,58,.22) 0%, transparent 60%),
    var(--p-bg);
  z-index: 1;
}

/* daybreak light ground rising from the bottom */
.bg-ground {
  top: auto; bottom: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(180deg,
    var(--dawn-seam) 0%,
    var(--dawn-haze) 10%,
    var(--dawn-mid)  36%,
    var(--dawn-land) 100%);
  opacity: 0;
  z-index: 2;
}
.scene.dusk .bg-ground {
  background: linear-gradient(180deg,
    var(--dusk-seam) 0%,
    var(--dusk-haze) 10%,
    var(--dusk-mid)  36%,
    var(--dusk-land) 100%);
}

/* focus vignette pulled in for the sign-in phase */
.bg-vignette {
  background: radial-gradient(115% 85% at 50% 50%, transparent 30%, rgba(4,6,5,.55) 78%, rgba(4,6,5,.85) 100%);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

/* ── Sun / orb ─────────────────────────────────────────────── */
.orb {
  position: absolute;
  left: 50%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 4;
  will-change: top, width, height;
}
.orb-glow {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(111,227,176,.28) 0%, rgba(var(--p-tint-rgb), .14) 40%, transparent 70%);
  opacity: 0;
  filter: blur(8px);
}
.orb-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 26%, var(--p-tint-lift) 0%, var(--p-tint) 34%, var(--p-tint-deep) 64%, var(--p-tint-deepest) 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
}
/* warm crown — the single permitted warmth, sits at the top of the disc */
.orb-warm {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 16%, rgba(242,169,96,.85) 0%, rgba(242,169,96,.22) 26%, transparent 50%);
  opacity: 0;
  mix-blend-mode: screen;
}

/* The scene has always been a sunrise, at seven in the evening as much as at
   seven in the morning. After five it is a sunset instead: same choreography,
   same curves, a warmer disc over a warmer horizon. */
.scene.dusk .orb-inner {
  background:
    radial-gradient(circle at 42% 26%, #f5c98d 0%, #e08a4e 34%, #a4522f 64%, #55261a 100%);
}
.scene.dusk .orb-glow {
  background: radial-gradient(circle at 50% 40%, rgba(245,180,120,.30) 0%, rgba(200,110,60,.14) 40%, transparent 70%);
}
.scene.dusk .orb-warm {
  background: radial-gradient(circle at 50% 16%, rgba(255,214,170,.85) 0%, rgba(255,214,170,.22) 26%, transparent 50%);
}

/* ── Scanline horizon ──────────────────────────────────────── */
.grid-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52%;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.grid-line {
  position: absolute;
  left: 0; right: 0;
  /* Dark lines on a light plane became light lines on dark land - the same
     drawing, read the way a section is read. */
  border-top: 0.5px solid rgba(214,238,226,.11);
}
.scene.dusk .grid-line { border-top-color: rgba(255,226,198,.11); }
.beat-word b {
  display: inline-block;
  font-weight: inherit;
  will-change: clip-path;
}

/* ── Top chrome (nav + hero) ───────────────────────────────── */
.top-layer { position: absolute; inset: 0; z-index: 12; will-change: opacity, transform; }

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3vh, 30px) var(--gutter);
}
.brand { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.brand-mark { height: 24px; width: auto; display: block; }
.brand-wordmark { height: 15px; width: auto; display: block; opacity: .92; }

.nav-right {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--p-mono);
  font-size: 11px;
  color: var(--p-text-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--p-accent-text);
  box-shadow: 0 0 0 0 rgba(111,227,176,.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(111,227,176,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(111,227,176,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,227,176,0); }
}

.hero {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(62vw, 900px);
}
.hero-eyebrow {
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-text-dim);
  margin: 0 0 clamp(18px, 3vh, 30px);
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ""; width: 34px; height: 0.5px; background: var(--p-border-strong);
}
.hero-line {
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 98px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--p-text);
  margin: 0;
}
.hero-line .em { color: var(--p-text-mid); }
.hero-sub {
  margin: clamp(20px, 3vh, 30px) 0 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--p-text-mid);
  max-width: 40ch;
}

.hero-foot {
  position: absolute;
  left: var(--gutter); bottom: clamp(20px, 3vh, 30px);
  display: flex; gap: 28px;
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-text-faint);
}

/* ── Editorial beats (big-word moments, stops 1·2·4) ───────── */
.beat {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(72vw, 1040px);
  z-index: 13;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.beat-idx {
  font-family: var(--p-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--p-text-dim);
  margin: 0 0 clamp(14px, 2.4vh, 22px);
  display: flex; align-items: center; gap: 12px;
}
.beat-idx::before { content: ""; width: 34px; height: 0.5px; background: var(--p-border-strong); }
.beat-word {
  font-weight: 500;
  font-size: clamp(46px, 8vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.042em;
  color: var(--p-text);
  margin: 0;
}
.beat-cap {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--p-text-mid);
  max-width: 38ch;
}
/* recolor beats sitting over the bright daybreak ground */
/* The four .is-light rules that used to live here flipped the beats to dark
   type as the paper ground rose. The ground is no longer paper, so they are
   gone - and with them the mid-sequence colour change that made the scene
   feel like two different screens. */

/* ── About (daybreak) ──────────────────────────────────────── */
.about {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(48px, 11vh, 120px);
  max-width: 44ch;
  z-index: 13;
  opacity: 0;
  pointer-events: none;
}
.about-tag {
  font-family: var(--p-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--p-text-dim);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 11px;
}
.about-tag::before { content: ""; width: 26px; height: 1px; background: rgba(255,255,255,.22); }
.about p {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 25px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--p-text);
}
.about .hl { color: var(--p-tint-lift); font-weight: 600; }

/* `.about p` outranks `.about-tag` - both are (0,1,1) against (0,1,0) - so the
   eyebrow has been rendering at full text weight since the block was written,
   where every other eyebrow on the scene is dimmed. Pre-dates 6.5.6; noticed
   while restyling this block for the dark ground. */
.about .about-tag { color: var(--p-text-dim); }
.scene.dusk .about .hl { color: #e8a877; }

/* ── Sign-in card ──────────────────────────────────────────── */
.login-wrap {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 384px;
  max-width: calc(100vw - 40px);
  padding: 34px 34px 30px;
  background: rgba(13,18,16,.46);
  border: 0.5px solid rgba(255,255,255,.12);
  border-radius: var(--p-radius);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px -28px rgba(0,0,0,.7);
  transition: backdrop-filter .5s cubic-bezier(.22,.61,.36,1),
              -webkit-backdrop-filter .5s cubic-bezier(.22,.61,.36,1),
              background-color .5s cubic-bezier(.22,.61,.36,1),
              border-color .4s ease;
}

/* Resting blur is enough to sit on, not enough to read a password field
   over - and behind this panel is a 360px sun that is still moving. So the
   moment somebody reaches for it, the scene behind goes soft: on hover, on
   focus, and permanently once anything has been typed. .engaged is a class
   rather than :valid so that it survives leaving the field. */
.login-card:hover,
.login-card:focus-within,
.login-card.engaged {
  backdrop-filter: blur(34px) saturate(1.18);
  -webkit-backdrop-filter: blur(34px) saturate(1.18);
  background: rgba(10,15,13,.66);
  border-color: rgba(255,255,255,.20);
}

/* The hairline that draws itself round the panel as it arrives. */
.lc-edge {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--p-lime);
  border-radius: var(--p-radius);
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.lc-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 26px;
}
.lc-mark { height: 20px; width: auto; }
.lc-wordmark { height: 13px; width: auto; opacity: .9; }

.lc-title {
  font-size: 23px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--p-text); margin: 0 0 5px;
}
.lc-sub {
  font-family: var(--p-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-text-dim); margin: 0 0 24px;
}

.lc-error {
  display: none;
  background: rgba(220,60,60,.1);
  border: 0.5px solid rgba(220,60,60,.32);
  color: var(--p-over-text);
  padding: 9px 12px;
  border-radius: var(--p-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.lc-error.show { display: block; }

.f-field { margin-bottom: 16px; }
.f-label {
  display: block;
  font-family: var(--p-mono);
  font-size: 10px; font-weight: 400;
  color: var(--p-text-dim);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.f-input-wrap { position: relative; }
.f-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 0.5px solid rgba(255,255,255,.12);
  border-radius: var(--p-radius-sm);
  padding: 12px 13px;
  font-size: 13.5px;
  color: var(--p-text);
  font-family: var(--p-font);
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.f-input::placeholder { color: rgba(255,255,255,.2); }
.f-input:focus {
  border-color: rgba(111,227,176,.55);
  background: rgba(255,255,255,.06);
  box-shadow: var(--p-focus-glow);
}
/* A filled field, and the browser's idea of one.
 *
 * Chrome paints its own pale blue over an autofilled input and it arrives
 * before any of this stylesheet is relevant: a branded sign-in with a moving
 * sunrise behind it, and two chalk-blue boxes across the middle of it. The
 * only thing that overrides the UA sheet is an inset shadow wide enough to
 * cover the box, so the fill is drawn that way rather than as a background.
 *
 * #212a15 is the sign-in button's lime laid over the panel at 12% - the same
 * hue as the button, four times darker, which is what the panel needs behind
 * white type. Measured at 14.8:1 for the value text.
 *
 * A typed value gets the identical treatment (.filled, set by the script), so
 * a password manager and a keyboard leave the form looking the same. */
.f-input.filled {
  background: #212a15;
  border-color: rgba(201,242,77,.34);
}
.f-input.filled:focus { border-color: rgba(201,242,77,.62); }

.f-input:-webkit-autofill,
.f-input:-webkit-autofill:hover,
.f-input:-webkit-autofill:focus,
.f-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--p-text);
  -webkit-box-shadow: 0 0 0 1000px #212a15 inset;
          box-shadow: 0 0 0 1000px #212a15 inset;
  border-color: rgba(201,242,77,.34);
  caret-color: var(--p-text);
  /* Chrome animates its own background in on a delay; parking the transition
     past the heat death of the tab is the standard way to stop it. */
  transition: background-color 9999s ease-out 0s;
}
.f-input:-webkit-autofill:focus { border-color: rgba(201,242,77,.62); }

.f-input.invalid {
  border-color: rgba(240,128,128,.6);
  box-shadow: 0 0 0 3px rgba(240,128,128,.12);
}
.f-input[type="password"], .f-input.has-toggle { padding-right: 64px; }

.pw-toggle {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  font-family: var(--p-mono);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-text-dim);
  padding: 5px 7px; border-radius: var(--p-radius-sm);
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--p-accent-text); background: rgba(255,255,255,.04); }

.f-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 22px;
}
.f-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--p-text-mid); cursor: pointer;
}
.f-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.f-box {
  width: 15px; height: 15px;
  border: 0.5px solid var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  transition: all .15s;
}
.f-box::after {
  content: ""; width: 7px; height: 7px;
  background: var(--p-accent-text); border-radius: var(--p-radius-sm);
  transform: scale(0); transition: transform .15s;
}
.f-check input:checked + .f-box { border-color: rgba(111,227,176,.5); }
.f-check input:checked + .f-box::after { transform: scale(1); }
.f-check input:focus-visible + .f-box { box-shadow: var(--p-focus-glow); }

.f-link {
  font-family: var(--p-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-text-dim); cursor: pointer;
  transition: color .15s;
}
.f-link:hover { color: var(--p-text-mid); }

/* THE one lime — primary action only */
.f-btn {
  width: 100%;
  padding: 13px;
  background: var(--p-lime);
  border: none;
  border-radius: var(--p-radius-sm);
  color: var(--p-on-lime);
  font-family: var(--p-font);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .08s, box-shadow .18s;
  box-shadow: 0 6px 22px -8px rgba(var(--p-lime-rgb),.5);
}
.f-btn:hover { background: var(--p-lime-dim); box-shadow: 0 8px 26px -8px rgba(var(--p-lime-rgb),.6); }
.f-btn:active { transform: translateY(1px); }
.f-btn:disabled { cursor: default; opacity: .9; }
.f-btn .arrow { transition: transform .18s; }
.f-btn:hover .arrow { transform: translateX(3px); }
.f-btn.loading { background: var(--p-lime-dim); }
.f-btn.success { background: var(--p-lime); color: var(--p-on-lime); box-shadow: none; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(11,13,12,.3);
  border-top-color: var(--p-on-lime);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lc-foot {
  margin-top: 22px;
  text-align: center;
  font-family: var(--p-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-text-faint);
}

/* ── Scroll hint ───────────────────────────────────────────── */
.s-hint {
  position: absolute;
  bottom: clamp(20px, 3vh, 30px);
  left: 50%; transform: translateX(-50%);
  z-index: 16;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transition: opacity .35s;
}
.s-hint-txt {
  font-family: var(--p-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--p-text-dim);
}
.s-line {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  position: relative; overflow: hidden;
}
.s-line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: linear-gradient(to bottom, transparent, var(--p-accent-text));
  animation: drop 1.8s ease-in-out infinite;
}
@keyframes drop { 0% { top: -50%; } 60%,100% { top: 100%; } }

/* ── Phase rail ────────────────────────────────────────────── */
.p-rail {
  position: absolute;
  right: clamp(20px, 3vw, 34px);
  top: 50%; transform: translateY(-50%);
  z-index: 18;
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
}
.prail-item {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--p-mono);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--p-text-faint);
  transition: color .25s;
}
.prail-item .pr-label { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; }
.prail-item:hover { color: var(--p-text-mid); }
.prail-item:hover .pr-label { opacity: 1; transform: translateX(0); }
.prail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  transition: all .25s;
}
.prail-item.on { color: var(--p-text-mid); }
.prail-item.on .pr-label { opacity: 1; transform: translateX(0); }
.prail-item.on .prail-dot { background: var(--p-accent-text); transform: scale(1.25); box-shadow: 0 0 10px rgba(111,227,176,.6); }

/* On light daybreak, recolor the rail + hint that sit over it */
/* Rail .is-light rules removed with the paper ground - see above. */

@media (max-width: 560px) {
  .p-rail { display: none; }
  .hero-foot { display: none; }
  .login-card { padding: 28px 24px 26px; }
}
@media (max-height: 560px) {
  .hero-foot, .s-hint { display: none; }
}