/* developments/css/gate.css — the signed-out door to the platform.
 *
 * Design intent: this screen belongs to the PRODUCT, not the marketing site.
 * It reuses the devmap's warm-paper glass idiom and token palette so that
 * signing in does not flash from a dark hero into a light map — the card the
 * visitor signs into is visually the first devmap panel they will see.
 *
 * The signature is the LEDGER, not a map screenshot: the scale of the record
 * set as a dossier in the mono face, with the stage legend doing double duty as
 * the value proposition. It states what is behind the wall using the product's
 * own vocabulary (the four lifecycle stages), which is truer to the subject than
 * a decorative map image and needs no binary asset.
 *
 * Everything is quiet except one accent: gold. Same rule as the map.
 */

/* While auth is resolving, hide the app so no half-booted map is ever visible. */
html[data-dev-gate="checking"] body > *:not(#dev-gate) { visibility: hidden; }
html[data-dev-gate="signed-out"] body > *:not(#dev-gate) { visibility: hidden; }

#dev-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  overflow-y: auto;
  background: var(--surface-2, #f5f5f4);
  color: var(--ink-1, #111);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-dev-gate="signed-out"] #dev-gate { display: block; }

/* A single warm wash off the top-left, so the paper is not flat. Cheap, quiet. */
#dev-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(212, 168, 75, 0.10), transparent 62%),
    radial-gradient(700px 420px at 88% 92%, rgba(124, 108, 174, 0.07), transparent 60%);
  pointer-events: none;
}

.gate-wrap {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) clamp(20px, 5vw, 48px);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  /* `safe` matters: on a short laptop viewport the content is taller than the
   * screen, and plain `center` overflows equally in BOTH directions — putting
   * the top of the headline above the scroll origin where it can never be read. */
  align-content: safe center;
}
/* DOM order IS the mobile order: intro → sign-in → ledger. The card must come
 * before the ledger on a phone so the one action on the screen is reachable
 * without scrolling past the pitch. Desktop reassembles it into two columns via
 * named areas — no reordering of the markup, so the tab order stays sane. */
@media (min-width: 940px) {
  .gate-wrap {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "intro  card"
      "ledger card";
    column-gap: clamp(32px, 5vw, 64px);
    row-gap: 0;
    align-items: center;
    align-content: safe center;
  }
  .gate-intro  { grid-area: intro; }
  .gate-ledger { grid-area: ledger; }
  .gate-card   { grid-area: card; align-self: center; }
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.gate-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: Outfit, Inter, sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2, #374151);
  margin-bottom: clamp(20px, 4vh, 36px);
}
.gate-brand__mark {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--gold, #d4a84b);
  box-shadow: 0 0 0 4px rgba(212, 168, 75, 0.16);
}

/* ── Headline ──────────────────────────────────────────────────────────── */
.gate-title {
  font-family: Outfit, Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(31px, 3.9vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  color: var(--ink-1, #111);
}
/* The headline stays plain on purpose. A highlighted phrase here competed with
 * the ledger for the eye and broke into two ragged bars whenever it wrapped —
 * the ledger is the one thing this screen should be remembered by. */
.gate-title em { font-style: normal; }
.gate-sub {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--ink-2, #374151);
  margin: 0 0 clamp(26px, 4vh, 38px);
  max-width: 44ch;
}

/* ── The ledger (the signature) ────────────────────────────────────────── */
.gate-ledger { border-top: 1px solid var(--line, #e7e5e4); }
.gate-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #e7e5e4);
}
.gate-num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-1, #111);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gate-label {
  font-size: 13.5px;
  color: var(--ink-3, #67707c);
  letter-spacing: 0.01em;
}

/* Stage legend — the product's own vocabulary carrying the pitch. */
.gate-stages {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 20px;
}
.gate-stage {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-2, #374151);
  font-variant-numeric: tabular-nums;
}
.gate-stage::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, #999); flex: none;
}
.gate-stage--proposed     { --dot: #7c6cae; }
.gate-stage--approved     { --dot: #2563eb; }
/* Darker than the map's --stage-construction #d4a84b ON PURPOSE: brand gold on
 * this warm-paper background measures 2.03:1, under the 3:1 WCAG 1.4.11 requires
 * of a graphic that carries meaning (these dots encode lifecycle stage). #a8842f
 * measures 3.20:1 and sits in family with the other three dots (3.02–4.74).
 * Scoped to the gate legend only — the map's own stage palette is unchanged. */
.gate-stage--construction { --dot: #a8842f; }
.gate-stage--completed    { --dot: #16a34a; }
.gate-stage b { font-weight: 600; color: var(--ink-1, #111); }

/* ── Sign-in column ────────────────────────────────────────────────────────
 * No chrome of our own: Clerk's <SignIn /> already renders a card with its own
 * heading, shadow and border. A second wrapper card produced a card-in-a-card.
 * This column only positions Clerk's card and carries the escape hatch below it.
 */
.gate-card { position: relative; display: flex; flex-direction: column; align-items: stretch; }
#dev-gate-clerk { min-height: 300px; }

/* Defensive floor on Clerk's own controls.
 * appearance.variables in gate.js already sets fontSize and the on-primary
 * foreground, but those are Clerk's tokens — a Clerk release can rename or
 * re-scale them and silently drop us back under the project's own standards
 * (--touch-target-min: 44px, and the 16px input floor that stops iOS zooming
 * the page on focus, which dev.css enforces for every other input under
 * @media (pointer: coarse)). This rule is the backstop that a version bump
 * cannot regress. It sets a MINIMUM only, so Clerk keeps control of layout. */
#dev-gate-clerk button,
#dev-gate-clerk input,
#dev-gate-clerk a[role="button"] {
  min-height: 44px;
  font-size: 16px;
}
/* Clerk centres its card in the available width; keep it from stretching wide
 * on large screens so the ledger stays the dominant half of the composition. */
#dev-gate-clerk > * { margin-inline: auto; }

.gate-alt {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line, #e7e5e4);
  font-size: 13px; color: var(--ink-3, #67707c);
}
.gate-alt a {
  color: var(--ink-2, #374151); text-decoration: none;
  border-bottom: 1px solid var(--gold, #d4a84b); padding-bottom: 1px;
}
.gate-alt a:hover { color: var(--ink-1, #111); }
.gate-alt a:focus-visible { outline: 2px solid var(--gold, #d4a84b); outline-offset: 3px; border-radius: 2px; }

/* Consent line — quiet, but present at the point identity is actually given. */
.gate-legal {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #67707c);
}
.gate-legal a { color: var(--ink-2, #374151); text-decoration: underline; text-underline-offset: 2px; }
.gate-legal a:hover { color: var(--ink-1, #111); }
.gate-legal a:focus-visible { outline: 2px solid var(--gold, #d4a84b); outline-offset: 3px; border-radius: 2px; }

/* ── Load sequence: one orchestrated moment, not scattered effects ─────── */
@media (prefers-reduced-motion: no-preference) {
  .gate-anim { opacity: 0; transform: translateY(10px); animation: gate-rise 0.62s cubic-bezier(0.22, 0.68, 0.3, 1) forwards; }
  .gate-anim:nth-child(1) { animation-delay: 0.04s; }
  .gate-anim:nth-child(2) { animation-delay: 0.10s; }
  .gate-anim:nth-child(3) { animation-delay: 0.16s; }
  .gate-anim:nth-child(4) { animation-delay: 0.22s; }
  .gate-card { opacity: 0; animation: gate-rise 0.7s cubic-bezier(0.22, 0.68, 0.3, 1) 0.18s forwards; }
  /* the ledger is its own grid child now, so it needs its own place in the
     sequence rather than inheriting a :nth-child delay from the intro block */
  .gate-ledger { opacity: 0; animation: gate-rise 0.62s cubic-bezier(0.22, 0.68, 0.3, 1) 0.26s forwards; }
}
@keyframes gate-rise { to { opacity: 1; transform: none; } }

/* Mobile: the ledger condenses so the card stays reachable without scrolling. */
@media (max-width: 939px) {
  .gate-wrap { align-content: start; }
  .gate-num { font-size: 21px; }
  .gate-row { padding: 9px 0; }
}