/* ═══════════════════════════════════════════════════════════════════════════
 * signitur — SIGN IN / SIGN UP (split shell)
 * Sep 5. The front door now reads like the product behind it: a dark panel on
 * the left (the rail's colour, carrying the wordmark, the pitch and the live
 * animated signature lit by the dashboard's beam) and the form on the light
 * workspace ground. Everything the owner designed for these pages stays —
 * the two-line gradient heading, the fields, the buttons, the copy, the
 * tilting signature card — it is re-seated, not redrawn.
 * Loads LAST, after brand.css. Deleting the <link> reverts to the single
 * column (the markup degrades to it: the side panel just becomes a block).
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rail-bg: #1A110A; --rail-ink: #FBF7F3; --rail-ink-2: #A69384;
  --work-bg: #F7F5F2; --hairline: rgba(30, 18, 9, .09);
  --lift-1: 0 1px 2px rgba(30, 18, 9, .05), 0 1px 1px rgba(30, 18, 9, .03);
  --ease: cubic-bezier(.32, .72, 0, 1);
}

body.auth-lab { background: #FFFFFF; }   /* WHITE PAGES (owner, Nov 2 2026): every page background is plain white, no cream (was var(--work-bg) #F7F5F2 + dots) */
/* brand.css never carried this, so pages.js's admin door (el.hidden = true on the
   Google row / divider / sign-up note) lost to .bdiv{display:flex} and .bbtn{display:inline-flex} */
.auth-lab [hidden] { display: none !important; }
.auth-lab .glow { display: none; }             /* the beam moved into the side panel */

.auth-shell { display: grid; grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); min-height: 100dvh; }

/* ── the dark side ───────────────────────────────────────────────────── */
.auth-side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 44px 24px;
  background: var(--rail-bg); color: var(--rail-ink);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.auth-brand { display: inline-flex; align-self: flex-start; position: relative; z-index: 1; }
.auth-brand img { display: block; height: 26px; width: auto; }
.auth-side-body { position: relative; z-index: 1; margin: auto 0; padding: 48px 0; max-width: 460px; }

/* the pitch heading: the sign-in heading's shape, in the rail's colours.
   NOT .bhead — pages.js retitles the FIRST .bhead for the admin door. */
.side-head {
  margin: 0 0 14px; font-weight: 800; font-size: clamp(30px, 3.2vw, 42px);
  line-height: .9; letter-spacing: -.02em; color: var(--rail-ink);
}
.side-head .g {
  display: block; padding-bottom: .08em;
  background: linear-gradient(90deg, #FB8221, #FA962B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.side-sub { margin: 0 0 28px; max-width: 400px; font-size: 14px; line-height: 1.6; color: var(--rail-ink-2); }

.auth-side .sig-hero { position: relative; justify-content: flex-start; margin: 0; }
.auth-side .sig-tilt { position: relative; z-index: 1; }
/* the dashboard's beam (brand.css .glow, the angular 4-stop conic), sized for a card */
.side-beam {
  position: absolute; left: 50%; top: 50%; width: 130%; height: 150%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  opacity: .55; filter: blur(46px);
  background: conic-gradient(from 210deg at 50% 50%,
    #FB8221 0%, #FB8221 18%, #FA962B 30%, rgba(251, 130, 33, 0) 68%, rgba(250, 150, 43, 0) 82%, #FB8221 100%);
}
@media (prefers-reduced-motion: reduce) { .side-beam { filter: blur(30px); } }
.auth-side .sig-card-b {
  color: var(--ink, #0A0A0A);            /* the panel's near-white must not leak into the white card */
  border-color: rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.auth-side .sig-cap { position: relative; z-index: 1; text-align: left; margin: 16px 0 0; color: var(--rail-ink-2); font-size: 13px; }
.auth-side-foot { position: relative; z-index: 1; display: flex; gap: 18px; font-size: 12px; color: var(--rail-ink-2); }
.auth-side-foot a { color: var(--rail-ink-2); text-decoration: none; }
.auth-side-foot a:hover { color: var(--rail-ink); }

/* ── the form side: the workspace ground, the owner's form ───────────── */
.auth-lab .auth-page {
  min-height: 0; justify-content: center; padding: 48px 24px;
  background: #FFFFFF;   /* white pages (Nov 2 2026): was the cream workspace ground + dot grid */
}
.auth-lab .bfield { background: #fff; border-color: rgba(30, 18, 9, .12); }
.auth-lab .bfield:focus { border-color: #F4761B; box-shadow: 0 0 0 3px rgba(251, 130, 33, .18); }
.auth-lab .bbtn-primary {
  background: linear-gradient(90deg, #FB8221, #FA962B);
  box-shadow: 0 0 0 1px rgba(251, 130, 33, .5), 0 6px 22px rgba(251, 130, 33, .28);
}
.auth-lab .bbtn-ghost { background: #fff; border-color: rgba(30, 18, 9, .12); box-shadow: var(--lift-1); }
@media (hover: hover) and (pointer: fine) {
  .auth-lab .bbtn-primary:hover { filter: brightness(1.04); box-shadow: 0 0 0 1px rgba(251, 130, 33, .65), 0 8px 28px rgba(251, 130, 33, .4); }
  .auth-lab .bbtn-ghost:hover { background: #FFF3E7; }
}
.auth-lab .bdiv { color: #6B615A; font-weight: 600; }
.auth-lab .bdiv::before, .auth-lab .bdiv::after { background: rgba(30, 18, 9, .12); }
.auth-lab .bnote-quiet { color: #6B615A; }

/* ── narrow: panel becomes a header band, form follows ───────────────── */
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-side { padding: 18px 20px 24px; border-right: 0; }
  .auth-side-body { margin: 0; padding: 22px 0 0; max-width: none; }
  .side-head { font-size: 30px; }
  .side-sub { font-size: 13.5px; margin-bottom: 18px; }
  .auth-side.side-compact .sig-hero, .auth-side.side-compact .sig-cap, .auth-side.side-compact .side-sub { display: none; }
  .auth-side-foot { display: none; }
  .auth-lab .auth-page { padding: 28px 20px 40px; }
  .auth-lab .bhead { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * SIGN-IN HERO (owner, Sep 5): the dark panel's content is centred, the
 * headline is the pitch, and the card is the owner's own signature layout
 * rebranded — portrait through five diagonal slices, icon rail, wordmark,
 * David Simons. Entrance animates once; js/sig-hover.js adds the tilt, depth
 * parallax, sheen and glow (all off under reduced motion).
 * ══════════════════════════════════════════════════════════════════════ */
.auth-side.hero-center { align-items: center; text-align: center; }
.hero-center .auth-brand { align-self: center; }
.hero-center .auth-side-body { margin: auto; width: 100%; max-width: 500px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-center .auth-side-foot { justify-content: center; }
.hero-center .side-head { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 12px; }
.hero-center .side-head .g { display: inline; padding-bottom: 0; }
.hero-center .side-sub { margin: 0 auto 30px; max-width: 380px; }
.hero-center .sig-hero { justify-content: center; width: 100%; }
.hero-stage { position: relative; perspective: 900px; }
.hero-stage .side-beam { transition: opacity .5s ease; }
.hero-stage.is-hover .side-beam { opacity: .78; }

/* the card — a signature, so it types like one (Arial, as the email does) */
.hcard {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  width: min(100%, 470px); padding: 16px 18px 16px 14px; border-radius: 16px;
  background: #fff; color: #0A0A0A; text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: var(--gx, 0px) var(--gy, 18px) 48px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .35s ease;
  animation: hcardIn .7s cubic-bezier(.32, .72, 0, 1) both;
}
.hcard.is-hover { box-shadow: var(--gx, 0px) var(--gy, 18px) 48px rgba(0, 0, 0, .45), 0 24px 70px rgba(251, 130, 33, .32), 0 0 0 1px rgba(255, 255, 255, .06); }
.hcard > * { transform-style: preserve-3d; }
.hcard-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: soft-light; transition: opacity .35s ease;
}
.hcard.is-hover .hcard-sheen { opacity: 1; }

/* the portrait: the product's own animated profile GIF (owner's file, Sep 5) */
.hcard-photo { position: relative; flex: 0 0 auto; width: 188px; height: 188px; overflow: hidden; border-radius: 6px; display: block; }
.hcard-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* hover-in: a light sweep across the slices */
.hcard-photo::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-18deg); opacity: 0;
}
.hcard.is-hover .hcard-photo::after { animation: hcardSweep .9s ease-out .05s 1 both; }
@keyframes hcardSweep { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(460%) skewX(-18deg); opacity: 0; } }

.hcard-rule { flex: 0 0 1px; align-self: stretch; margin: 10px 0; background: rgba(10, 10, 10, .14); }
.hcard-rail { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; }
.hcard-rail li {
  width: 20px; height: 20px; display: grid; place-items: center; color: #1F1F1F;
  animation: railIn .5s cubic-bezier(.32, .72, 0, 1) both; animation-delay: calc(.7s + (4 - var(--i)) * 70ms);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), color .3s ease; transition-delay: calc(var(--i) * 35ms);
}
.hcard-rail li svg { width: 17px; height: 17px; fill: currentColor; display: block; }
/* the icons and the logo are the product's own animated GIFs (7,520 ms loop, in step with the photo): they bring
   their own entrance, so the CSS entrance stays off them; the hover lift stays, plus an orange glow */
.hcard-rail li img { width: 20px; height: 20px; display: block; }
.hcard-rail li { animation: none; }
.hcard-logo { animation: none; }
.hcard.is-hover .hcard-rail li img { filter: drop-shadow(0 0 3px rgba(251, 130, 33, .55)); }
.hcard.is-hover .hcard-rail li { transform: translateY(-2px); color: #FB8221; }

.hcard-text { min-width: 0; flex: 1 1 auto; }
.hcard-text > * { animation: rise .5s cubic-bezier(.32, .72, 0, 1) both; animation-delay: calc(.55s + var(--i) * 65ms); }
.hcard-logo { display: block; height: 30px; width: auto; margin: 0 0 8px; }
.hcard-name { display: flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hcard-badge { width: 18px; height: 18px; display: block; }
.hcard-role { font-size: 13px; color: #555; margin: 2px 0 8px; }
.hcard-co { font-size: 14px; font-weight: 700; }
.hcard-line { font-size: 12.5px; color: #333; line-height: 1.45; }

@keyframes hcardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes railIn { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hcard, .hcard-rail li, .hcard-text > *, .hcard-photo::after { animation: none !important; opacity: 1; transform: none; }
  .hcard-rail li { transition: none; }
}
@media (max-width: 1100px) {
  .hcard-photo { width: 150px; height: 150px; }
  .hcard-name { font-size: 18px; }
  .hcard-logo { height: 26px; }
}

/* sign-up's left column is a copy of sign-in's (owner, Sep 5) — same rules apply */
.hero-center .sig-cap { text-align: center; margin: 16px auto 0; }

/* ═══ MOBILE HERO (owner, Sep 6): the sample signature shows on phones and tablets
   too — the card just types smaller so it fits a 390px screen with room to spare. ═══ */
@media (max-width: 860px) {
  .auth-side.side-compact .sig-hero { display: flex; margin-top: 2px; }
  .hero-center .auth-side-body { padding: 16px 0 6px; }
  .hero-center .side-head { font-size: 26px; margin-bottom: 18px; }
  .hcard { width: 100%; max-width: 420px; padding: 12px 14px 12px 12px; gap: 10px; }
  .hcard-photo { width: 130px; height: 130px; }
  .hcard-rule { margin: 6px 0; }
  .hcard-rail { padding: 0; }
  .hcard-rail li img { width: 17px; height: 17px; }
  .hcard-logo { height: 22px; margin-bottom: 5px; }
  .hcard-name { font-size: 16px; }
  .hcard-badge { width: 15px; height: 15px; }
  .hcard-role { font-size: 11.5px; margin: 1px 0 5px; }
  .hcard-co { font-size: 12.5px; }
  .hcard-line { font-size: 11.5px; }
  .hero-stage .side-beam { opacity: .55; }
}
@media (max-width: 400px) {
  .hcard { gap: 8px; padding: 10px; }
  .hcard-photo { width: 115px; height: 115px; }
}

/* ── the legal lines (META-EVENT-PLAN A15 / A17, notices.md (d)(e)) ─────────
 * Quiet ink, the page's own orange links, visible at every width. The side
 * footer is hidden on phones, so .auth-legal-m repeats its Privacy pair under
 * the form there. */
.auth-lab .bnote-legal { color: #6B615A; font-size: 11px; line-height: 1.5; margin-top: 8px; }
.auth-legal-m { display: none; text-align: center; margin-top: 14px; font-size: 11px; color: #6B615A; }
.auth-legal-m a { color: #6B615A; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .auth-legal-m { display: block; } }

/* Oct 26 2026: iPhone Safari zooms the page into any text field under 16px when it is tapped, and it stays
 * zoomed (owner: "I have to use 2 fingers to zoom out"). Phones and touch screens get 16px fields; desktop is
 * unchanged and pinch-zoom stays available (no maximum-scale in the viewport). */
@media (max-width: 860px), (pointer: coarse) { .auth-lab .bfield { font-size: 16px; } }