/* ============================================================
   Wolfgate — page styles
   Sits on top of colors_and_type.css (GoFindOne design tokens).
   Dark surface = the gate (entry). Light parchment = the register
   (interior), per the platform convention.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 5vw;
  background: linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 100%);
  backdrop-filter: blur(4px);
  border-bottom: 0.5px solid var(--border);
}
.theme-light .nav {
  background: rgba(243,239,231,0.92);
  border-bottom: 0.5px solid var(--light-border);
}
.nav-wm {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: var(--tracking-wide);
  color: var(--fg); text-decoration: none;
}
.nav-wm .accent { color: var(--accent); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

/* ── HERO (restrained — gradient drift, no canvas) ───────────── */
.hero {
  position: relative;
  padding: 96px 5vw 72px;
  overflow: hidden;
  background:
    radial-gradient(900px 340px at 80% -10%, var(--teal-soft), transparent 65%),
    linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-elevated) 100%);
}
.hero::before {
  content: '';
  position: absolute; inset: -50%;
  background: radial-gradient(600px 200px at 30% 110%, rgba(94,200,200,0.06), transparent 70%);
  animation: drift var(--dur-drift) var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes drift { to { transform: translateX(6%) translateY(-3%); } }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.92; letter-spacing: 0.02em;
  color: var(--fg);
}
.hero-title .accent { color: var(--accent); }
.hero-sub {
  margin-top: 22px;
  font-family: var(--font-serif); font-style: italic;
  font-weight: var(--weight-extralight);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--fg-muted); max-width: 620px; line-height: var(--leading-relaxed);
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.wrap { max-width: var(--content-editorial); margin: 0 auto; padding: 0 5vw 120px; }
.wrap-wide { max-width: var(--content-wide); margin: 0 auto; padding: 0 5vw 120px; }

/* ── FORM STEPS ──────────────────────────────────────────────── */
.step {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 0.5px solid var(--border);
}
.step-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.step-title {
  font-family: var(--font-serif); font-style: italic;
  font-weight: var(--weight-light);
  font-size: var(--text-2xl); color: var(--fg);
  margin-bottom: 24px;
}

/* Department chips */
.dept-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.dept-chip {
  font-family: var(--font-mono);
  font-size: var(--text-sm); letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: var(--bg-surface);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.dept-chip:hover { border-color: var(--teal-hairline); color: var(--fg); }
.dept-chip.selected {
  color: var(--dark-bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* Scaffold questions */
.q { margin-bottom: 32px; }
.q-label { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.q-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.1em;
}
.q-text {
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--text-md); color: var(--fg);
}
.q-hint {
  display: block;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-sm); color: var(--fg-dim);
  margin-bottom: 10px;
}
.q textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--fg-body);
  font-family: var(--font-body); font-weight: var(--weight-light);
  font-size: var(--text-base); line-height: var(--leading-normal);
  padding: 14px 16px;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.q textarea:focus { outline: none; border-color: var(--teal-hairline); }
.q textarea::placeholder { color: var(--fg-dimmer); font-style: italic; }
.char-counter {
  display: block; text-align: right; margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.char-counter.ready { color: var(--accent); }

/* Buttons */
.btn-primary {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dark-bg);
  background: var(--accent);
  border: none; border-radius: var(--radius-xs);
  padding: 15px 40px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: var(--elev-glow);
}
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ghost {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 0.5px solid var(--teal-hairline);
  border-radius: var(--radius-xs);
  padding: 14px 28px;
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

.loading-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.1em;
  color: var(--fg-dim);
  display: none;
}
.loading-note.visible { display: inline-block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.error-note {
  font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--error);
  margin-top: 12px; display: none;
}
.error-note.visible { display: block; }

/* Brief panel */
.brief-panel { display: none; }
.brief-panel.visible { display: block; }
.brief-panel textarea {
  width: 100%; min-height: 220px;
  background: var(--bg-surface);
  border: 0.5px solid var(--teal-hairline);
  border-radius: var(--radius-sm);
  color: var(--fg-body);
  font-family: var(--font-serif);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  padding: 20px 22px;
}
.brief-panel textarea:focus { outline: none; border-color: var(--accent); }
.brief-note {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-sm); color: var(--fg-dim);
  margin: 8px 0 0;
}

/* ── TRIAGE RESULT ───────────────────────────────────────────── */
.result { display: none; margin-top: 56px; }
.result.visible { display: block; }

.lane-card {
  border: 0.5px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 28px 32px;
}
.lane-name {
  font-family: var(--font-display);
  font-size: var(--text-3xl); letter-spacing: 0.05em;
  color: var(--fg);
}
.lane-name .mono-tag {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  vertical-align: middle; margin-left: 14px;
  padding: 4px 10px; border-radius: var(--radius-xs);
}
.lane-enablement    { border-left-color: var(--teal); }
.lane-dept          { border-left-color: var(--prize); }
.lane-governed      { border-left-color: var(--urgent); }
.lane-process       { border-left-color: var(--fg-dim); }

.lane-reasoning {
  font-family: var(--font-serif);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--fg-body); margin-top: 16px;
}
.result-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px;
  border-top: 0.5px solid var(--border);
}
.meta-item { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; }
.meta-item .k { color: var(--fg-dim); text-transform: uppercase; margin-right: 8px; }
.meta-item .v { color: var(--fg); }
.meta-item .v.warn { color: var(--urgent); }
.meta-item .v.good { color: var(--accent); }

.dedup-flag {
  margin-top: 16px; padding: 12px 16px;
  background: var(--urgent-soft);
  border-left: 2px solid var(--urgent);
  border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--fg-body);
}
.next-steps { margin-top: 20px; }
.next-steps .k {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-dim); display: block; margin-bottom: 10px;
}
.next-steps li {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--fg-body); margin: 0 0 8px 18px;
}

/* ── REGISTER (light parchment interior) ─────────────────────── */
.register-table { width: 100%; border-collapse: collapse; }
.register-table th {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-muted); text-align: left;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border-strong);
}
.register-table td {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--fg-body);
  padding: 14px; vertical-align: top;
  border-bottom: 0.5px solid var(--border);
}
.register-table tr:hover td { background: var(--card-hover); }
.reg-title { font-weight: var(--weight-medium); color: var(--fg); }
.reg-summary { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 3px; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-xs);
  white-space: nowrap;
}
.tag-enablement { background: var(--teal-on-light-soft); color: var(--teal-on-light); border: 0.5px solid rgba(46,163,163,0.3); }
.tag-dept       { background: var(--prize-soft); color: var(--prize-on-light); border: 0.5px solid rgba(139,111,46,0.3); }
.tag-governed   { background: var(--urgent-soft); color: var(--urgent-on-light); border: 0.5px solid rgba(163,90,42,0.3); }
.tag-process    { background: rgba(20,17,14,0.06); color: var(--fg-muted); border: 0.5px solid var(--border-mid); }
.tag-stage      { background: transparent; color: var(--fg-dim); border: 0.5px solid var(--border-mid); }

.demo-banner {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--urgent-on-light);
  background: var(--urgent-soft);
  border: 0.5px solid rgba(163,90,42,0.25);
  border-radius: var(--radius-xs);
  padding: 8px 14px;
  display: inline-block;
  margin-bottom: 28px;
}
.theme-dark-banner {
  color: var(--urgent);
  border-color: rgba(212,147,106,0.3);
}

/* Stat strip */
.stats { display: flex; gap: 0; border: 0.5px solid var(--border-mid); border-radius: var(--radius-sm); overflow: hidden; margin: 32px 0 40px; }
.stat { flex: 1; padding: 18px 20px; border-right: 0.5px solid var(--border); }
.stat:last-child { border-right: none; }
.stat .v {
  font-family: var(--font-display);
  font-size: var(--text-3xl); letter-spacing: 0.04em; color: var(--fg);
  display: block;
}
.stat .k {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim);
}

/* ── PASSCODE OVERLAY (reuses the .step vocabulary) ──────────── */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(6px);
  padding: 5vw;
}
.auth-overlay.visible { display: flex; }
.auth-card {
  width: 100%; max-width: 460px;
  padding: 36px 40px;
  background: var(--dark-bg-elevated);
  border: 0.5px solid var(--border-mid);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.auth-card .step-title { margin-bottom: 20px; }
.auth-input {
  width: 100%;
  background: var(--bg);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--fg-body);
  font-family: var(--font-mono);
  font-size: var(--text-base); letter-spacing: 0.14em;
  padding: 14px 16px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.auth-input:focus { outline: none; border-color: var(--teal-hairline); }
.auth-input::placeholder { color: var(--fg-dimmer); letter-spacing: 0.08em; }
.auth-card .btn-row { margin-top: 20px; }
.auth-note {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-xs); color: var(--fg-dim);
  margin-top: 16px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  padding: 40px 5vw;
  border-top: 0.5px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-family: var(--font-serif); font-style: italic; font-size: var(--text-xs); color: var(--fg-dim); }

@media (max-width: 720px) {
  .stats { flex-direction: column; }
  .stat { border-right: none; border-bottom: 0.5px solid var(--border); }
  .register-table .hide-mobile { display: none; }
}

/* ── SIGNATURE CURSOR (dot + eased-follow ring) ───────────────────
   Activated by js/cursor.js, which adds .wf-cursor-active to <body>.
   Pure-CSS never hides the native cursor, so a JS failure is harmless.
   Uses var(--accent) so it deepens automatically on the light theme. */
@media (hover: hover) and (pointer: fine) {
  body.wf-cursor-active,
  body.wf-cursor-active * { cursor: none; }

  .wf-cursor,
  .wf-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: left, top, width, height;
  }
  .wf-cursor.wf-cursor-on,
  .wf-cursor-ring.wf-cursor-on { opacity: 1; }

  .wf-cursor {
    z-index: 10000;
    width: 10px; height: 10px;
    background: var(--accent);
    transition: width var(--dur-fast) var(--ease-out),
                height var(--dur-fast) var(--ease-out),
                opacity var(--dur-normal) var(--ease-out);
  }
  .wf-cursor-ring {
    z-index: 9999;
    width: 34px; height: 34px;
    border: 1px solid var(--accent);
    transition: width var(--dur-fast) var(--ease-out),
                height var(--dur-fast) var(--ease-out),
                opacity var(--dur-normal) var(--ease-out);
  }
  .wf-cursor-ring.wf-cursor-on { opacity: 0.4; }

  /* Dark theme: 'screen' blend gives the teal a light-on-water glow.
     On the light (parchment) register page we drop the blend and let the
     deepened --teal-on-light carry on its own. */
  body:not(.theme-light) .wf-cursor { mix-blend-mode: screen; }

  /* Swell over interactive targets. */
  .wf-cursor.is-hover { width: 16px; height: 16px; }
  .wf-cursor-ring.is-hover { width: 52px; height: 52px; }
  .wf-cursor-ring.is-hover.wf-cursor-on { opacity: 0.7; }
}

/* Coarse / touch pointers never render the custom cursor. */
@media (hover: none), (pointer: coarse) {
  .wf-cursor, .wf-cursor-ring { display: none !important; }
}