/* ==========================================================================
   ORBT 2026 · AUTH + LEGAL pages (scoped, layered after orbt.css)
   Maximalist sticker-zine: cream paper, white sticker cards, ink + rainbow.
   Auth = branded SPLIT (ink brand panel + light form). Legal = poster head
   + readable .legal-body. Reuses orbt.css tokens & components (.btn, .eyebrow…)
   New structural classes are namespaced .al-* to avoid collisions.
   ========================================================================== */

/* ======================================================================
   AUTH: branded split (form one side, bold ink brand panel the other)
   ====================================================================== */
.auth.al-split{
  min-height:100svh; display:grid; grid-template-columns:1.04fr .96fr;
  place-items:stretch; padding:0; overflow:hidden; background:var(--bg);
  /* light-theme semantic colors: styles.css ships dark-theme greens/reds (#62D08A/#FF9D9D ≈2:1 on the cream cards) */
  --ok:  #2E7D57;
  --err: #C0392B;
}
.auth.al-split::before{ display:none !important; }   /* kill old soft glow */

/* ---- form column ---- */
.al-formcol{
  position:relative; display:grid; place-items:center;
  padding:clamp(96px,13vh,128px) var(--pad) clamp(40px,6vh,64px);
}
.al-formcol::before{   /* faint paper blob behind the card */
  content:""; position:absolute; z-index:0; width:60vw; max-width:560px; aspect-ratio:1;
  top:-12%; right:-18%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-dim), transparent 68%);
  pointer-events:none;
}
.auth.al-split .auth-card{
  position:relative; z-index:1; width:100%; max-width:460px;
  background:var(--bg-1); border:2.5px solid var(--text); border-radius:var(--radius-lg);
  box-shadow:8px 8px 0 0 var(--text); padding:clamp(26px,3.4vw,40px);
  overflow:hidden;
}
/* corner registration tick: technical detail. Inset must clear the card's 28px
   border-radius, at 16px the tick sat inside the curve and read as a clipping glitch. */
.auth.al-split .auth-card::after{
  content:""; position:absolute; top:26px; right:26px; width:10px; height:10px;
  border-top:2px solid var(--line-2); border-right:2px solid var(--line-2); opacity:.7;
}
.auth.al-split .auth-card .logo{ font-size:1.35rem; margin-bottom:1.3rem; }
.auth.al-split .auth-card h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(1.7rem,3vw,2.2rem); line-height:1; text-transform:none;
}
.auth.al-split .auth-card .sub{ color:var(--muted); font-size:.96rem; margin-bottom:1.6rem; }
/* The eyebrow follows the inline-flex .logo, so without an explicit break the two
   share a line and their baselines do not agree (the mono eyebrow rides low against
   the display wordmark). Give it its own row directly above the H1, which is where
   an eyebrow belongs anyway. */
.al-eyebrow{ display:flex; width:fit-content; margin-bottom:.9rem; }

/* chunky physical fields: white, 2px ink hairline, magenta focus ring */
.auth.al-split .auth-card .input,
.auth.al-split .auth-card .field-handle{
  background:#fff; border:2px solid var(--line-2); border-radius:14px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.auth.al-split .auth-card .input:focus,
.auth.al-split .auth-card .field-handle:focus-within{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
}
.auth.al-split .auth-card .field label{ color:var(--muted); }
.auth.al-split .auth-card .field-handle .pre{ color:var(--faint); }
.auth.al-split .auth-card .btn{ width:100%; justify-content:center; margin-top:.7rem; }

/* feedback on cream: hints, alerts + the pw-eye focus ring (matches welcome.html's local patch) */
.auth.al-split .field-hint.ok{ color:var(--ok); }
.auth.al-split .field-hint.bad{ color:var(--err); }
.auth.al-split .alert.err{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.35); color:var(--err); }
.auth.al-split .alert.ok{ background:rgba(46,125,87,.08); border:1px solid rgba(46,125,87,.35); color:var(--ok); }
.auth.al-split .pw-eye:focus-visible{ color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

/* alt links + small print */
.auth.al-split .auth-alt a,
.auth.al-split #forgotLink:hover,
.auth.al-split #backToLogin:hover{ color:var(--accent); }

/* back-home: top-right over the form column */
.al-split-back{
  position:fixed; top:18px; right:var(--pad); z-index:6;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--muted);
  display:inline-flex; align-items:center; gap:.4rem;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem;
}
.al-split-back:hover{ color:var(--text); border-color:var(--line-2); }

/* ---- brand panel (ink, dramatic) ---- */
.al-brand{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--text); color:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:1.3rem;
  padding:clamp(2.4rem,4.6vw,4rem);
}
/* Scoped as `.al-brand > .al-brand-decor` (0,2,0) ON PURPOSE, so it outranks the
   `.al-brand > *` rule below (0,1,0). Previously both were (0,1,0) and the later
   one won on source order, forcing this layer to position:relative and collapsing
   it to height 0, which made every percentage inside it (ribbon top, blob offsets)
   resolve against nothing and put the ribbon straight through the ORBT logo.
   Do NOT instead add :not(.al-brand-decor) to the rule below: :not() inherits its
   argument's specificity, which lifts that rule to (0,2,0) and then IT starts
   overriding position:absolute on .al-mascot and .al-barcode, throwing both to
   the top-left corner. */
.al-brand > .al-brand-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.al-brand-decor .al-blob{ position:absolute; }
.al-brand-decor .b1{ width:46%; top:-12%; left:-10%; fill:rgba(255,255,255,.05); }
.al-brand-decor .b2{ width:38%; bottom:-14%; right:-8%; fill:rgba(255,255,255,.04); }
/* Ribbon sweeps the open band BELOW the copy.
   BOTTOM-anchored, not top:%. The panel's copy is a fixed-height block centred
   vertically, so a top percentage drifts INTO the text as the viewport grows
   (at 62% it crossed the bullet list, at 59% the headline and paragraph). Pinning
   it to the bottom keeps the same clearance at every height.
   Note its real footprint is its own height PLUS the rise from the rotation: the
   box is 124% of the panel wide, so each degree adds ~14px. -4deg keeps the
   diagonal while staying compact enough to clear the copy. */
.al-ribbon{
  position:absolute; z-index:0; left:-12%; right:-12%;
  bottom:clamp(18px,4vh,54px); height:clamp(26px,3.2vw,42px);
  background:var(--rainbow); transform:rotate(-4deg); opacity:.95;
  box-shadow:0 24px 50px -22px rgba(123,47,247,.6);
}
/* Kept at its original (0,1,0) specificity. The decor layer opts out by being
   selected more specifically above; .al-mascot / .al-barcode opt out via their own
   position:absolute, which only works while this rule stays at (0,1,0). */
.al-brand > *{ position:relative; z-index:1; }
.al-brand .logo{ font-size:1.3rem; }
.al-brand .logo-badge{ background:var(--bg); }
.al-brand .logo-badge::after{ background:var(--text); }
.al-brand .logo-word{ color:var(--bg); }
.al-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; opacity:.7;
}
.al-brand-h{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(2.1rem,3.4vw,3.4rem); text-transform:uppercase; color:var(--bg);
}
.al-brand-h em{
  font-style:normal; background:var(--rainbow-diag);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.al-brand-p{ color:rgba(243,237,225,.7); font-size:1.02rem; line-height:1.55; max-width:38ch; }
.al-points{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin:.2rem 0 0; }
.al-points li{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.84rem; color:rgba(243,237,225,.85);
}
.al-points li::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; } /* rainbow rationed */
.al-proof{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.78rem; color:rgba(243,237,225,.7); }
.al-proof .av{ display:flex; }
.al-proof .av span{ width:30px; height:30px; border-radius:50%; margin-left:-9px; border:2.5px solid var(--text); background:var(--grad-mascot); } /* rainbow rationed: matches the other avatar placeholder fills */
.al-proof .av span:first-child{ margin-left:0; }
.al-proof b{ color:#fff; }
.al-mascot{
  position:absolute; z-index:1; right:clamp(1.4rem,3vw,3rem); top:clamp(1.4rem,3vw,2.4rem);
  width:clamp(90px,11vw,150px); height:auto; filter:drop-shadow(0 18px 34px rgba(123,47,247,.5));
  animation:al-float 5s var(--ease) infinite;
}
@keyframes al-float{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-12px) rotate(3deg);} }
.al-barcode{
  /* lifted clear of the ribbon: a cream barcode printed over the rainbow was
     unreadable, and it is a quiet corner detail rather than a focal element.
     Keep this above the ribbon's bottom offset + its rotated rise. */
  position:absolute; z-index:1; bottom:clamp(7rem,15vh,10rem); right:clamp(1.4rem,3vw,3rem);
  height:26px; width:108px; opacity:.6;
  background:repeating-linear-gradient(90deg,var(--bg) 0 2px,transparent 2px 4px,var(--bg) 4px 5px,transparent 5px 9px,var(--bg) 9px 12px,transparent 12px 15px);
}

/* welcome celebratory extras */
/* welcome sits its ribbon a little higher than the auth pages (more celebratory,
   and the panel carries less copy), but still bottom-anchored so it never drifts
   into the headline the way a top:% did. */
.al-brand.al-brand-celebrate .al-ribbon{ bottom:clamp(14px,5vh,72px); }
.al-confetti{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.al-confetti i{ position:absolute; width:10px; height:10px; border-radius:3px; opacity:.85; }

@media (prefers-reduced-motion:reduce){ .al-mascot{ animation:none; } }

/* ---- responsive: stack, brand panel becomes a compact top band ---- */
@media (max-width:900px){
  .auth.al-split{ grid-template-columns:1fr; }
  .al-brand{ order:-1; padding:clamp(1.6rem,5vw,2.2rem) var(--pad) clamp(1.8rem,6vw,2.4rem); gap:.9rem; }
  .al-brand-h{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .al-brand-p{ display:none; }
  .al-points,.al-proof{ display:none; }
  .al-ribbon{ top:auto; bottom:-18px; height:30px; }
  .al-mascot{ width:clamp(72px,16vw,104px); top:auto; bottom:1rem; }
  .al-barcode{ display:none; }
  .al-formcol{ padding-top:clamp(40px,8vh,64px); }
  .al-formcol::before{ display:none; }
  /* was bottom:14px, which floated the pill directly over the password fields
     on a phone. The dark brand band at the top has clear space (the mascot is
     hidden at this width), so put it back up there, out of the form's way. */
  .al-split-back{ top:14px; bottom:auto; right:14px; }
}
@media (max-width:420px){
  .auth.al-split .auth-card{ box-shadow:5px 5px 0 0 var(--text); padding:22px; }
  .al-mascot{ display:none; }
}

/* ======================================================================
   LEGAL: poster page-head + readable branded body
   ====================================================================== */
.al-legal-head{
  position:relative; overflow:hidden;
  padding:clamp(124px,16vh,184px) 0 clamp(28px,5vw,52px);
}
.al-legal-head .hero-glow{ display:none; }
.al-legal-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.al-legal-decor .al-blob{ position:absolute; width:34vw; max-width:460px; top:-22%; right:-6%; fill:var(--text); opacity:.06; }
.al-legal-decor .al-blob.sm{ width:16vw; max-width:200px; top:auto; bottom:-30%; left:-4%; right:auto; fill:none; }
.al-legal-head .wrap{ position:relative; z-index:1; }
.al-legal-head .eyebrow{ margin-bottom:1rem; }
.al-legal-head h1.display{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(2.8rem,8vw,5.6rem); text-transform:uppercase; margin-bottom:1rem;
}
.al-legal-head .lead{ max-width:52ch; }
/* meta pills sit in a wrapping row so each claim stays one line on small screens
   (was one long pill that wrapped to three cramped lines at 390px) */
.al-meta{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:1.4rem; }
.al-updated{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-2); border-radius:999px; padding:.4rem .85rem;
}
.al-updated::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); } /* rainbow rationed */
.al-updated b{ color:var(--text); }
.al-rainbow-rule{ height:5px; border:0; border-radius:6px; background:var(--rainbow); margin:clamp(1.4rem,3vw,2rem) 0 0; max-width:120px; }

/* readable legal body with branded headings */
/* readable measure, left-aligned to the hero's edge (body now sits in a full .wrap, not a centered narrow one) */
.al-legal .legal-body{ max-width:68ch; color:var(--muted); font-size:1.02rem; line-height:1.7; }
.al-legal .legal-body .updated{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--faint);
  margin-bottom:1.6rem;
}
.al-legal .legal-body h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.25rem,2.4vw,1.7rem); color:var(--text);
  margin:2.2rem 0 .7rem; padding-left:1rem; position:relative;
}
.al-legal .legal-body h2::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:5px; border-radius:5px;
  background:var(--accent); /* rainbow rationed: the page keeps one rainbow moment (.al-rainbow-rule in the head) */
}
.al-legal .legal-body h2:first-child,
.al-legal .legal-body .updated + h2{ margin-top:0; }
.al-legal .legal-body p{ margin-bottom:1rem; }
.al-legal .legal-body strong{ color:var(--text); }
.al-legal .legal-body a{ color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-hot); }
.al-legal .legal-body a:hover{ color:var(--accent-2); }
.al-legal .legal-body ul{ list-style:none; margin:.4rem 0 1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.al-legal .legal-body li{ position:relative; padding-left:1.5rem; }
.al-legal .legal-body li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}