/* ═══════════════════════════════════════════════════════════════════
   Docurensic site enhancement layer — shared by the marketing site
   (app/static/site/*) AND the auth pages (login/signup/reset).
   Loaded AFTER each page's self-contained CSS; pairs with site.js.

   Contents:
     1. cross-document View Transitions (smooth page switching)
     2. light theme (dark stays the default; html[data-theme="light"])
     3. theme toggle button
     4. scroll progress bar · nav scrolled state · animated mobile menu
     5. sticky signup bar + exit-intent dialog (self-styled dz- classes)
     6. modern polish: text-wrap, content-visibility, selection,
        focus-visible, scrollbars, reduced-motion guards
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. smooth page switching (View Transitions API, progressive) ── */
@view-transition { navigation: auto; }
.nav, .anav { view-transition-name: dz-nav; }   /* chrome stays put while content fades */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: dz-vt-out .16s ease both; }
  ::view-transition-new(root) { animation: dz-vt-in .30s cubic-bezier(.2, .6, .2, 1) both; }
}
@keyframes dz-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes dz-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ── 2. light theme ──────────────────────────────────────────────── */
html { color-scheme: dark; scrollbar-gutter: stable; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] {
  --bg: #EAE8F5; --bg-2: #F5F4FB; --panel: #FFFFFF; --panel-2: #F6F5FC; --panel-3: #EFECFA;
  --ink: #16132B; --ink-2: #423E63; --ink-3: #5C5883; --ink-4: #7B76A3;
  --line: #DCD8EE; --line-2: #E6E3F4; --line-hi: #C7C1E6;
  --uv: #6C5CE8; --uv-2: #7061D8; --uv-soft: #ECE8FC; --uv-glow: rgba(108, 92, 232, .16);
  --uv-btn: #5D4FD6; --uv-btn-h: #4C3FC4;
  --red: #C93B44; --red-soft: #FBE9EA; --red-line: rgba(201, 59, 68, .3);
  --teal: #0E8A68; --teal-soft: #E1F4ED;
  --amber: #8A6D14; --amber-soft: #F6EFD9;
  --paper: #16132B;               /* wordmark/heading color token — ink on light */
  --grid: rgba(90, 80, 160, .07);
  --shadow: 0 18px 44px rgba(38, 28, 92, .12), 0 2px 8px rgba(38, 28, 92, .08);
}

/* component surfaces that hardcode dark rgba() in the per-page CSS */
html[data-theme="light"] .nav { background: rgba(245, 244, 251, .82); }
html[data-theme="light"] .anav { background: rgba(245, 244, 251, .78); }
html[data-theme="light"] .footer { background: rgba(22, 19, 43, .03); }
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .abtn-ghost,
html[data-theme="light"] .hero-badge { background: rgba(22, 19, 43, .03); }
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .abtn-ghost:hover { background: var(--uv-soft); }
html[data-theme="light"] .nav-links a:hover { background: rgba(22, 19, 43, .05); color: var(--ink); }
/* "you are here" — pages mark their own nav item with aria-current="page" */
.nav-links a[aria-current="page"] { color: var(--uv-2, #A99BF7); font-weight: 600; }
html[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--uv, #5B4BE0); }
/* the accent word hardcodes color:#fff (fine on dark); on light it reads as ink,
   with the violet highlight bar still behind its baseline */
html[data-theme="light"] .hero h1 .accent { color: var(--ink); }
html[data-theme="light"] .acard { box-shadow: var(--shadow); }
html[data-theme="light"] .icon-wrap { box-shadow: 0 0 0 1px rgba(108, 92, 232, .14), 0 12px 30px -12px rgba(108, 92, 232, .35); }
/* the signature "forensic console" and code panes deliberately stay dark in light
   mode (terminal look) — no override on .console / pre / code panels. */

/* ── 3. theme toggle button (injected by site.js) ─────────────────── */
.dz-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; cursor: pointer; position: relative;
  border: 1px solid var(--line-hi); border-radius: 10px;
  background: transparent; color: var(--ink-2); transition: .16s;
}
.dz-theme-btn:hover { border-color: var(--uv); color: var(--ink); background: var(--uv-soft); }
.dz-theme-btn svg { position: absolute; transition: opacity .25s, transform .35s cubic-bezier(.2, .6, .2, 1); }
.dz-theme-btn .dz-i-sun { opacity: 1; transform: none; }
.dz-theme-btn .dz-i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="light"] .dz-theme-btn .dz-i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="light"] .dz-theme-btn .dz-i-moon { opacity: 1; transform: none; }

/* ── 3b. language switcher (injected by site.js) ──────────────────── */
.dz-lang { position: relative; flex: none; }
.dz-lang-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; height: 36px;
  padding: 0 10px; border: 1px solid var(--line-hi); border-radius: 10px; background: transparent;
  color: var(--ink-2); font: 600 12px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .05em; transition: .16s;
}
.dz-lang-btn:hover { border-color: var(--uv); color: var(--ink); background: var(--uv-soft); }
.dz-lang-btn svg { flex: none; }
.dz-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; z-index: 70;
  background: var(--panel, #12102A); border: 1px solid var(--line-hi); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; display: none; flex-direction: column; gap: 2px;
}
.dz-lang.dz-open .dz-lang-menu { display: flex; }
.dz-lang-item {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 11px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: .14s;
}
.dz-lang-item:hover { background: rgba(124, 111, 240, .10); color: var(--ink); }
.dz-lang-item.is-active { color: var(--uv-2, var(--uv)); background: var(--uv-soft); }
.dz-lang-item.is-active::after { content: "✓"; font-size: 12px; }

/* first-visit language suggestion (injected by site.js) */
.dz-langsuggest {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 26px); z-index: 80;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 28px);
  padding: 11px 14px 11px 18px; border-radius: 12px; opacity: 0;
  transition: opacity .35s, transform .35s cubic-bezier(.2, .6, .2, 1);
  background: var(--panel, #12102A); border: 1px solid var(--line-hi); box-shadow: var(--shadow);
  font: 500 13.5px/1.35 var(--sans, system-ui, sans-serif); color: var(--ink);
}
.dz-langsuggest.dz-show { opacity: 1; transform: translate(-50%, 0); }
.dz-langsuggest a {
  flex: none; padding: 7px 13px; border-radius: 8px; background: var(--uv-btn, var(--uv));
  color: #fff; font-weight: 600; font-size: 13px;
}
.dz-langsuggest button {
  flex: none; background: none; border: 0; color: var(--ink-3, var(--ink-2)); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 6px; text-decoration: underline; text-underline-offset: 2px;
}

/* ── 4a. scroll progress bar ──────────────────────────────────────── */
.dz-progress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; z-index: 200;
  transform-origin: left; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--uv), var(--uv-2));
  box-shadow: 0 0 8px var(--uv-glow);
}

/* ── 4b. nav elevation once the page scrolls ──────────────────────── */
.nav.dz-scrolled, .anav.dz-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
html[data-theme="light"] .nav.dz-scrolled,
html[data-theme="light"] .anav.dz-scrolled { box-shadow: 0 8px 24px rgba(38, 28, 92, .10); }

/* ── 4c. animated mobile menu (site.js replaces the inline burger) ── */
.nav-links.dz-menu {
  position: absolute; top: 64px; left: 0; right: 0; z-index: 80;
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 20px 16px; background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.nav-links.dz-menu.dz-open { display: flex !important; animation: dz-menu-in .26s cubic-bezier(.2, .6, .2, 1) both; }
.nav-links.dz-menu li { width: 100%; list-style: none; }
.nav-links.dz-menu a { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 9px; }
/* auth CTAs (Log in / Start free) cloned into the mobile menu by site.js: visible only
   inside the open dropdown, never in the horizontal desktop nav. A single divider sits
   above the group — the first item carries it; adjacent siblings drop it. */
.nav-links .dz-cta-item { display: none; }
.nav-links.dz-menu .dz-cta-item { display: block; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.nav-links.dz-menu .dz-cta-item + .dz-cta-item { margin-top: 2px; border-top: 0; padding-top: 0; }
@keyframes dz-menu-in { from { opacity: 0; transform: translateY(-8px); } }
.burger { transition: .16s; }
.burger span { transition: transform .22s cubic-bezier(.2, .6, .2, 1), opacity .18s; }
.burger.dz-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.dz-open span:nth-child(2) { opacity: 0; }
.burger.dz-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 5a. sticky signup bar (marketing pages; session-dismissable) ─── */
.dz-stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line-hi);
  transform: translateY(110%); transition: transform .38s cubic-bezier(.2, .6, .2, 1);
}
.dz-stickycta.dz-show { transform: none; }
.dz-stickycta-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.dz-stickycta-txt { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; flex: 1; min-width: 0; }
.dz-stickycta-txt b { color: var(--ink); font-weight: 600; }
.dz-cta-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13.5px; color: #fff; line-height: 1;
  background: var(--uv-btn); border: 1px solid transparent; border-radius: 10px;
  padding: 10px 16px; transition: .16s; box-shadow: 0 4px 18px var(--uv-glow);
}
.dz-cta-btn:hover { background: var(--uv-btn-h); transform: translateY(-1px); }
.dz-cta-btn:active { transform: scale(.97); }
.dz-x-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-3); transition: .14s;
}
.dz-x-btn:hover { color: var(--ink); background: rgba(128, 118, 190, .12); }
@media (max-width: 560px) {
  .dz-stickycta-txt span { display: none; }   /* keep just the bold hook on phones */
}

/* ── 5b. exit-intent dialog (desktop, rate-limited by site.js) ────── */
.dz-exit {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(5, 4, 12, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.dz-exit.dz-open { opacity: 1; pointer-events: auto; }
.dz-exit-card {
  position: relative; width: 100%; max-width: 480px;
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: 18px;
  padding: 30px 30px 26px; box-shadow: var(--shadow, 0 18px 50px rgba(0, 0, 0, .55));
  transform: translateY(14px) scale(.97); transition: transform .3s cubic-bezier(.2, .6, .2, 1);
}
.dz-exit.dz-open .dz-exit-card { transform: none; }
.dz-exit-x { position: absolute; top: 14px; right: 14px; }
.dz-exit-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--uv-2); margin-bottom: 10px;
}
.dz-exit-card h3 {
  font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .01em; font-size: 26px; line-height: 1.1;
  color: var(--ink); margin: 0 0 8px;
}
.dz-exit-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; }
.dz-exit-form { display: flex; gap: 8px; }
.dz-exit-form input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
  background: var(--bg-2); border: 1px solid var(--line-hi); border-radius: 10px; padding: 10px 13px;
  transition: border-color .16s, box-shadow .16s;
}
.dz-exit-form input:focus { border-color: var(--uv); box-shadow: 0 0 0 3px var(--uv-glow); }
.dz-exit-mini { display: block; margin-top: 12px; font-size: 11.5px; color: var(--ink-4); }
@media (max-width: 480px) { .dz-exit-form { flex-direction: column; } }

/* ── 6. modern polish ─────────────────────────────────────────────── */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sec, .footer { content-visibility: auto; contain-intrinsic-size: auto 620px; }
::selection { background: var(--uv); color: #fff; }
:focus-visible { outline: 2px solid var(--uv); outline-offset: 2px; }
html { scrollbar-color: var(--line-hi) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--uv); }
.btn:active, .abtn-primary:active, .abtn-secondary:active { transform: scale(.98); }

/* brief whole-page color transition while the theme flips (site.js adds the class) */
html.dz-theme-anim, html.dz-theme-anim body,
html.dz-theme-anim .nav, html.dz-theme-anim .anav, html.dz-theme-anim .footer {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* tight phones: compress the nav row so logo + CTA + theme + burger all fit.
   Structural guard first: the row is a flex line whose items default to
   min-width:auto, so a long wordmark cannot be shrunk and instead pushes the
   burger past the viewport edge (sideways scroll on the whole page). Letting the
   logo shrink and ellipsize keeps the row inside the viewport at ANY width, so a
   future device size can't reopen this. */
.nav-inner { min-width: 0; }
.nav-inner > .logo { min-width: 0; }
.nav-inner > .logo .wordmark {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same guard for the auth/legal nav. It carries a non-negotiable CTA ("Create an
   account"), so instead of shrinking it to nothing the row is allowed to wrap onto
   a second line on very narrow screens — always visible, never off-screen. */
.anav { flex-wrap: wrap; min-width: 0; }
.anav > .alogo { min-width: 0; }
.anav > .alogo .aword {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 520px) {
  .dz-theme-btn { width: 31px; height: 31px; border-radius: 9px; }
  .nav-inner { gap: 6px; padding: 0 10px; }   /* .wrap keeps its 34px desktop padding otherwise */
  .nav-cta { gap: 4px; }
  .nav-cta .btn-text { display: none; }
  .nav-cta .btn-primary { padding: 8px 9px; font-size: 12px; }
  .burger { width: 36px; height: 36px; flex: none; }
  .logo { gap: 8px; }
  .logo .mark { width: 28px; height: 28px; }
  .wordmark { font-size: 15.5px; }
  .logo-lockup .tag { display: none; }
  /* auth/legal nav (.anav) — same squeeze */
  .anav { padding: 10px 12px; gap: 8px 10px; }
  .anav-right { gap: 8px; }
  /* The language switcher shrinks to its globe icon: on a login page the
     account CTA matters more than the "EN" label, and those ~27px are the
     difference between fitting and spilling on a 360px phone. */
  .anav-right .dz-lang-btn { padding: 0 8px; }
  .anav-right .dz-lang-btn > span { display: none; }
  .alogo { gap: 8px; }
  .amark { width: 26px !important; height: 26px !important; }
  .aword { font-size: 15.5px !important; }
  .abtn-ghost { padding: 8px 10px; font-size: 12px; }
}

/* phones (incl. Fold cover screens): logo + theme + language + burger only.
   The threshold has to clear the widest common phone — 390/393/402/412/430 are all
   live iPhone/Pixel widths — because logo + CTA + theme + language + burger needs
   ~441px and anything narrower spilled the burger off-screen. Nothing is lost: the
   burger menu clones Log in / Start scanning (site.js), and the hero + sticky bar
   carry the CTA. */
@media (max-width: 460px) {
  .nav-cta .btn-primary { display: none; }
  .wordmark { font-size: 14.5px; }
  .aword { font-size: 14px !important; }
  .amark { width: 24px !important; height: 24px !important; }
  .abtn-ghost { padding: 7px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dz-stickycta { transition: none; }
  .dz-exit, .dz-exit-card, .dz-theme-btn svg, .burger span { transition: none; }
  .nav-links.dz-menu.dz-open { animation: none; }
}

/* ═══ promotional popup (admin-controlled; rendered by site.js dzRenderPromo) ═══
   Three templates share one card language: spotlight = centered modal with backdrop,
   corner = slide-in card bottom-right, bar = slim full-width bottom bar. */
.dz-promo { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.dz-promo-spotlight { display: grid; place-items: center; padding: 20px;
  background: rgba(5, 5, 14, .6); backdrop-filter: blur(3px); pointer-events: auto;
  animation: dz-promo-fade .25s ease; }
.dz-promo-card { position: relative; pointer-events: auto; background: var(--panel, #12102A);
  border: 1px solid var(--line-hi, #342C60); border-radius: 16px; padding: 26px 28px;
  max-width: 440px; width: 100%; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  animation: dz-promo-in .3s cubic-bezier(.2, .7, .25, 1) both; }
.dz-promo-spotlight .dz-promo-card { border-top: 3px solid var(--uv, #7C6FF0); }
.dz-promo-corner { inset: auto 18px 18px auto; }
.dz-promo-corner .dz-promo-card { max-width: 340px; padding: 20px 22px; }
.dz-promo-bar { inset: auto 0 0 0; }
.dz-promo-bar .dz-promo-card { max-width: none; border-radius: 0; border-left: 0; border-right: 0;
  border-bottom: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(18px, 4vw, 48px); }
.dz-promo-bar .dz-promo-title { margin: 0; }
.dz-promo-bar .dz-promo-msg { flex: 1; min-width: 220px; margin: 0; }
.dz-promo-bar .dz-promo-row { margin: 0; }
.dz-promo-eyebrow { display: block; font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--uv-2, #A99BF7);
  margin-bottom: 9px; }
.dz-promo-title { font-family: Oswald, "Arial Narrow", sans-serif; font-size: 22px;
  font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink, #F5F4FB); margin: 0 0 8px; }
.dz-promo-corner .dz-promo-title, .dz-promo-bar .dz-promo-title { font-size: 16.5px; }
.dz-promo-msg { font-size: 13.5px; line-height: 1.6; color: var(--ink-2, #B7B0D6); margin: 0 0 14px; }
.dz-promo-code { display: inline-block; font: 600 12.5px "IBM Plex Mono", monospace;
  letter-spacing: .1em; color: var(--uv-2, #A99BF7); background: var(--uv-soft, #1C1640);
  border: 1px dashed var(--uv, #7C6FF0); border-radius: 8px; padding: 6px 14px;
  margin: 0 0 14px; cursor: copy; }
.dz-promo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dz-promo-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--uv-btn, #6E60E8);
  color: #fff; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 8px;
  text-decoration: none; }
.dz-promo-cta:hover { background: var(--uv-btn-h, #5D4FD6); }
.dz-promo-no { background: none; border: 0; color: var(--ink-3, #9E96C2); font-size: 12.5px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.dz-promo-x { position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--ink-3, #9E96C2); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px; }
.dz-promo-x:hover { color: var(--ink, #F5F4FB); }
@keyframes dz-promo-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dz-promo-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-theme="light"] .dz-promo-spotlight { background: rgba(20, 18, 36, .35); }
html[data-theme="light"] .dz-promo-card { box-shadow: 0 24px 70px rgba(28, 22, 64, .25); }
@media (max-width: 600px) {
  .dz-promo-corner { inset: auto 10px 10px 10px; }
  .dz-promo-corner .dz-promo-card { max-width: none; }
  .dz-promo-bar .dz-promo-card { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-promo-card, .dz-promo-spotlight { animation: none; }
}