/* GENERATED — edit theme-*.css or shared/theme.css, not this file */

/*
  Landing app tokens + landing-only rules. Composed with shared/theme.css by
  `npm run build` (see shared/compose-css.mjs) into style.css — edit this
  file, not the generated output.
*/

:root {
  --bg:            #ffffff;
  --bg-surface:    #ffffff;
  --text:          #0a0a0a;
  --text-muted:    #555555;
  --border:        rgba(0, 0, 0, 0.15);
  --border-mid:    rgba(0, 0, 0, 0.15);
  --border-strong: rgba(0, 0, 0, 0.4);
  --accent:        #7c3aed;       /* violet pulled from the wormhole art; AA on white */
  --accent-deep:   #31226e;       /* dark violet for hover states on near-black */
  --status-ok:     #1a7f37;
  --status-err:    #c0392b;

  --font-sans: 'Inter', sans-serif;
  --font-head: 'Space Grotesk', sans-serif;

  --space-dark: #050510;
  --laser-accent: rgba(59, 130, 246, 0.3); /* Subtle blue laser glow for future animation */
}

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

/*
  Layout Architecture:
  50/50 split-screen on desktop, stacking full width on mobile.
  The footer lives outside both panels: bottom-left of the white column
  on desktop, flush against the dark visual panel when stacked.
*/
.split-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .split-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
    }

    .content-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .site-footer {
        grid-column: 1;
        grid-row: 2;
    }

    .visual-panel {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

.content-panel, .visual-panel {
    flex: 1;
}

/*
  Left Content Panel
  White background, distinct typography hierarchy
*/
.content-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 2rem;
    background-color: var(--bg);
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .content-panel {
        padding: 4rem 10%; /* Fluid padding */
    }
}

/* Header & Logo */
.content-panel header {
    margin-bottom: 2.5rem;
}

.logo {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text);
    text-transform: uppercase;
}

/* Main Content Area */
main {
    margin: auto 0; /* Centers content vertically if space allows */
    max-width: 540px;
}

.headline {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--text);
    text-wrap: balance;
}

.description {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 58ch;
}

/* ── Coming-soon badge ───────────────────────────────────────── */
.coming-soon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Footer */
footer {
    margin-top: 3rem;
}

footer p {
    font-size: 0.875rem;
    color: #6b6b6b;
}

footer a {
    color: inherit;
}

/* Landing-page footer: dark and flush against the visual panel when the
   layout stacks, back to quiet gray under the white column on desktop. */
.site-footer {
    margin-top: 0;
    padding: 1.75rem 2rem;
    background-color: #07041a;
}

.site-footer p {
    color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 1024px) {
    .site-footer {
        padding: 0 10% 3rem;
        background-color: var(--bg);
    }

    .site-footer p {
        color: #6b6b6b;
    }
}

/*
  Right Visual Panel
  Rich space background image acting as counter-weight to the minimalist left side.
*/
.visual-panel {
    background-color: #07041a;
    position: relative;
    min-height: 45vh; /* Closing image band when the layout stacks */
    overflow: hidden;
}

/* Soften the hard white/dark seam on the desktop split */
@media (min-width: 1024px) {
    .visual-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 28rem;
        background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.74) 25%,
            rgba(255, 255, 255, 0.42) 50%,
            rgba(255, 255, 255, 0.16) 75%,
            rgba(255, 255, 255, 0) 100%);
        z-index: 2;
        pointer-events: none;
    }
}

/* Overlay for styling / future laser effects */
.laser-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle vignette and blend for a touch of sci-fi depth */
    background: linear-gradient(135deg, rgba(5,5,16,0.2) 0%, rgba(20,10,46,0.4) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ── Email capture form ──────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signup-form {
    max-width: 480px;
    margin-top: 2.75rem;
}

.signup-form-row {
    display: flex;
    gap: 0.75rem;
}

.signup-form-row input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 1rem;
    appearance: none;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
}

.signup-form-row input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* Layout-only overrides for the shared .btn-three.solid CTA — height match
   with the 50px email input, no line-wrap. Color/hover come from shared. */
.signup-form-row .btn-three {
    height: 50px;
    padding: 0 1.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-turnstile {
    margin-top: 1rem;
}

.signup-status {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    min-height: 1.25rem;
}

.signup-status[data-kind="error"] {
    color: var(--status-err);
}

.signup-status[data-kind="success"] {
    color: var(--status-ok);
}

@media (max-width: 640px) {
    .signup-form-row {
        flex-direction: column;
    }

    /* In the column layout, flex: 1 would control height instead of width
       and collapse the input — let height: 50px apply again. */
    .signup-form-row input[type="email"] {
        flex: none;
    }

    .signup-form-row .btn-three {
        width: 100%;
    }
}

/* ── Single-column content pages (privacy, confirmed) ──────────── */
.page-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.content-panel-wide {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.logo {
    text-decoration: none;
}

.headline-small {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.prose h2 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.prose p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1rem;
    max-width: 100%;
}

.prose a {
    color: var(--text);
}

.prose-meta {
    font-size: 0.875rem;
    color: #999;
}

/*
  Shared theme — reset, typography, form controls, buttons, and the pulse-dot
  indicator, written entirely in terms of custom-property *names* the app
  supplies (--bg, --text, --accent, --font-sans, ...), not values.

  This file is composed by shared/compose-css.mjs into each app's own build.
  Edit this file (or the app's theme-*.css), never the generated output.
*/

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text);
}

a {
  color: var(--text);
}

/* ── Form controls — underline style, shared across apps ─────────── */
/* border-bottom width is fixed at 1.5px in both states — only the color
   changes on focus — so focusing a field never shifts surrounding layout. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
select {
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border-mid);
  transition: border-color 0.2s;
}

input:focus, select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* Textareas get a full outline (like the rich-text editor box) rather than
   an underline, so their bounds are visible without a focused/hover state. */
textarea {
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.5rem;
  transition: border-color 0.2s;
}

textarea:focus {
  outline: none;
  border-color: var(--accent);
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--border-mid);
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
}

input[type="checkbox"]:hover {
  border-color: var(--text);
}

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.05rem;
  width: 0.35rem;
  height: 0.6rem;
  border: 2px solid var(--bg-surface);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 0.18rem;
  top: 0.38rem;
  width: 0.55rem;
  height: 1.5px;
  background: var(--bg-surface);
}

/* ── Buttons — the .btn-three system ───────────────────────────────
   Canonical button used by both apps: solid / soft / outline / primary /
   danger variants, border closing in on hover. */
button, .btn-three {
  border-radius: 0;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
  font-family: var(--font-head), system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  position: relative;
  transition: all 0.3s;
}

button::before, .btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
}
button:hover:not(:disabled)::before, .btn-three:hover:not(.disabled)::before {
  opacity: 0;
  transform: scale(0.5, 0.5);
}
button::after, .btn-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid var(--border-strong);
  transform: scale(1.2, 1.2);
}
button:hover:not(:disabled)::after, .btn-three:hover:not(.disabled)::after {
  opacity: 1;
  transform: scale(1, 1);
}

button > *, .btn-three > * { position: relative; z-index: 1; }
button:disabled, .btn-three.disabled {
  opacity: 0.45;
  cursor: default;
}

button.solid, .btn-three.solid {
  background: var(--text);
  color: var(--bg-surface);
  border-color: var(--text);
}
button.solid:hover:not(:disabled), .btn-three.solid:hover:not(.disabled) {
  background: #2a2a28;
  border-color: #2a2a28;
}
button.solid::before, .btn-three.solid::before { background-color: rgba(255, 255, 255, 0.08); }
button.solid::after, .btn-three.solid::after { border-color: var(--text); }

button.soft, .btn-three.soft {
  background: rgba(90, 122, 90, 0.1);
  color: var(--status-ok);
  border-color: rgba(90, 122, 90, 0.25);
}
button.soft::before, .btn-three.soft::before { background-color: rgba(90, 122, 90, 0.05); }
button.soft::after, .btn-three.soft::after { border-color: var(--status-ok); }

button.outline, .btn-three.outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
button.outline::before, .btn-three.outline::before { background-color: rgba(0, 0, 0, 0.03); }
button.outline::after, .btn-three.outline::after { border-color: var(--text); }

/* Primary — solid accent fill, the strongest action on the page */
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
button.primary::before { background-color: rgba(255, 255, 255, 0.08); }
button.primary::after { border-color: var(--accent); }

button.danger {
  color: var(--status-err);
  border-color: rgba(139, 58, 47, 0.3);
  background: var(--bg-surface);
}
button.danger::before { background-color: rgba(139, 58, 47, 0.04); }
button.danger::after  { border-color: var(--status-err); }

/* ── Pulse dot — live/in-progress indicator ─────────────────────────
   Ported from landing's .pulse/@keyframes ping. The class selector's
   specificity beats admin's `* { border-radius: 0 !important }` reset,
   so this stays round in both apps. */
.pulse {
  width: 7px;
  height: 7px;
  color: var(--accent);
  background-color: currentColor;
  border-radius: 50% !important;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}
.pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: 50% !important;
  opacity: 0.6;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse::before {
    animation: none;
    opacity: 0;
  }
}