@import url("/static/css/fonts.css");

/* ══════════════════════════════════════════════════════════════════
 ArtDrop, Shared Site Styles
 All pages link to this file. Page-specific styles go in <style> blocks.
 ══════════════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
 --bg: #0a0a0a;
 --bg2: #111111;
 --bg3: #181818;
 --border: rgba(255,255,255,0.07);
 --border-bright: rgba(255,255,255,0.14);
 --lime: #bfff5e;
 --lime-dim: rgba(191,255,94,0.12);
 --lime-glow: rgba(191,255,94,0.28);
 --white: #f0f0ec;
 --muted: rgba(240,240,236,0.45);
 --faint: rgba(240,240,236,0.18);
 --mono: 'DM Mono', monospace;
 --sans: 'Instrument Sans', system-ui, sans-serif;
 --display: var(--sans);
 --body: 'Instrument Sans', system-ui, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
 background: var(--bg);
 color: var(--white);
 font-family: var(--body);
 line-height: 1.6;
 overflow-x: hidden;
}

/* ── Noise Overlay ──────────────────────────────────────────────── */
body::before {
 content: '';
 position: fixed;
 inset: 0;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
 pointer-events: none;
 z-index: 1000;
 opacity: 0.6;
}

/* ── Navigation ─────────────────────────────────────────────────── */
nav {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 48px;
 background: rgba(10,10,10,0.85);
 backdrop-filter: blur(12px);
 border-bottom: 1px solid var(--border);
}

.nav-logo {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 font-family: var(--mono, 'DM Mono', monospace);
 font-weight: 500;
 font-size: 22px;
 letter-spacing: 0.05em;
 color: var(--white, #f0f0ec);
 text-decoration: none;
}
.nav-logo span { color: var(--lime, #bfff5e); }
.nav-logo .tm {
 font-size: 0.5em;
 color: var(--lime, #bfff5e);
 margin-left: 2px;
 vertical-align: super;
}
@media (max-width: 375px) {
 .nav-logo { font-size: 18px; }
}

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a:link,
.nav-links a:visited { font-family: var(--body); font-size: 13px; color: var(--muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.15s; }
.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-cta {
 font-family: var(--mono);
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.1em;
 color: var(--bg);
 background: var(--lime);
 padding: 9px 20px;
 border-radius: 3px;
 text-decoration: none;
 transition: transform 0.15s, box-shadow 0.15s;
 box-shadow: 0 0 0 0 var(--lime-glow);
}
.nav-cta:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 32px var(--lime-glow);
}
.nav-cta-mobile { display: none; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
 padding: 48px;
 border-top: 1px solid var(--border);
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 20px;
}

.footer-logo {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 font-family: var(--mono, 'DM Mono', monospace);
 font-size: 22px;
 font-weight: 500;
 color: var(--white, #f0f0ec);
 letter-spacing: 0.05em;
 text-decoration: none;
}
.footer-logo span { color: var(--lime, #bfff5e); }
.footer-logo .tm {
 font-size: 0.5em;
 color: var(--lime, #bfff5e);
 margin-left: 2px;
 vertical-align: super;
}
@media (max-width: 375px) {
 .footer-logo { font-size: 18px; }
}
.footer-links { display: flex; gap: 32px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; letter-spacing: 0.05em; }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: var(--mono);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.05em;
 color: var(--bg);
 background: var(--lime);
 padding: 16px 32px;
 border-radius: 4px;
 text-decoration: none;
 transition: transform 0.15s, box-shadow 0.15s;
 box-shadow: 0 0 0 0 var(--lime-glow);
}
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 32px var(--lime-glow);
}

/* ── Shared Page Components ─────────────────────────────────────── */
.page-hero {
 padding: 160px 48px 80px;
 border-bottom: 1px solid var(--border);
 position: relative;
 overflow: hidden;
}

.hero-grid-bg {
 position: absolute; inset: 0;
 background-image:
 linear-gradient(var(--border) 1px, transparent 1px),
 linear-gradient(90deg, var(--border) 1px, transparent 1px);
 background-size: 60px 60px;
 mask-image: radial-gradient(ellipse 100% 100% at 0% 50%, black 20%, transparent 80%);
}

.page-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 24px; position: relative; }
.page-title { font-family: var(--display); font-size: clamp(44px, 6vw, 80px); font-weight: 900; font-variation-settings: 'opsz' 96; font-feature-settings: 'liga' 0; line-height: 1.0; letter-spacing: -0.01em; margin-bottom: 28px; position: relative; max-width: 700px; }
.page-title em { font-style: italic; color: var(--lime); }
.page-intro { font-size: 17px; color: var(--muted); max-width: 520px; line-height: 1.75; position: relative; }
.page-intro a { color: var(--lime); text-decoration: none; }

/* ── Section Labels ─────────────────────────────────────────────── */
.section { padding: 100px 48px; border-top: 1px solid var(--border); }
.section-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
.section-title { font-family: var(--display); font-size: clamp(32px, 4vw, 52px); font-weight: 800; font-variation-settings: 'opsz' 48; font-feature-settings: 'liga' 0; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 64px; max-width: 600px; }
.section-title em { font-style: italic; color: var(--lime); }

/* ── Utility Classes ────────────────────────────────────────────── */
.text-lime { color: var(--lime); text-decoration: none; }
.text-muted { color: var(--muted); }
.text-white { color: var(--white); font-weight: 400; }

/* ── Legal Page Styles ──────────────────────────────────────────── */
.legal-container { max-width: 780px; margin: 0 auto; padding: 120px 40px 80px; }
.legal-label { font-family: var(--mono); font-size: 11px; color: var(--lime); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.legal-container h1 { font-size: 36px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
.legal-container .meta { color: var(--muted); font-size: 14px; margin-bottom: 56px; }
.legal-container h2 { font-size: 18px; font-weight: 600; color: var(--white); margin: 48px 0 12px; }
.legal-container p { color: var(--muted); margin-bottom: 16px; }
.legal-container ul { color: var(--muted); padding-left: 24px; margin-bottom: 16px; }
.legal-container li { margin-bottom: 8px; }
.legal-container a { color: var(--lime); text-decoration: none; }
.legal-container a:hover { text-decoration: underline; }
.legal-container strong { color: var(--white); font-weight: 400; }
.legal-callout { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--lime); padding: 20px 24px; margin: 24px 0; border-radius: 4px; }
.legal-callout p { margin: 0; }

/* ── CTA Strip ──────────────────────────────────────────────────── */
.cta-strip { background: var(--bg2); border: 1px solid var(--border-bright); border-radius: 8px; padding: 48px; text-align: center; }
.cta-strip-title { font-family: var(--body); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-strip-sub { font-size: 15px; color: var(--muted); margin-bottom: 28px; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0; }
}

/* ── Scroll Reveal ──────────────────────────────────────────────── */
.reveal { opacity: 1; transform: translateY(0); }
.reveal.animated { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.animated.visible { opacity: 1; transform: translateY(0); }

/* ── Hamburger Menu ─────────────────────────────────────────────── */
.nav-hamburger {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 z-index: 102;
}
.nav-hamburger span {
 display: block;
 width: 22px;
 height: 2px;
 background: var(--white);
 margin: 5px 0;
 transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
 nav { padding: 16px 24px; }
 .nav-hamburger { display: block; order: -1; }
 .nav-logo { order: 0; margin: 0 auto; }
 .nav-cta { display: none; }
 .nav-links {
 display: none;
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(10,10,10,0.97);
 backdrop-filter: blur(16px);
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 32px;
 z-index: 101;
 }
 .nav-links.open { display: flex; }
 .nav-links a:link.nav-links a:visited { font-size: 20px; color: var(--white); }
 .nav-links .nav-cta-mobile {
 display: block;
 font-family: var(--mono);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.1em;
 color: var(--bg);
 background: var(--lime);
 padding: 14px 32px;
 border-radius: 4px;
 text-decoration: none;
 margin-top: 16px;
 }
 .page-hero { padding: 100px 20px 50px; }
 .page-title { font-size: 32px; font-feature-settings: 'liga' 0; font-variation-settings: 'opsz' 28; }
 .section-title { font-variation-settings: 'opsz' 28; }
 .section { padding: 60px 20px; }
 .legal-container { padding: 100px 20px 60px; }
 footer { padding: 40px 20px; flex-direction: column; align-items: flex-start; }
 .footer-links { gap: 20px; flex-wrap: wrap; }
}

/* ── Accessibility ──────────────────────────────────────────────── */
:focus-visible {
 outline: 2px solid var(--lime);
 outline-offset: 2px;
}

.skip-link {
 position: absolute;
 top: -40px;
 left: 0;
 background: var(--lime);
 color: var(--bg);
 padding: 8px 16px;
 z-index: 200;
 font-family: var(--mono);
 font-size: 13px;
 text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Beta Waitlist ─────────────────────────────────────────────── */
.beta-badge {
 display: inline-block;
 font-family: var(--mono);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--bg);
 background: var(--lime);
 padding: 6px 16px;
 border-radius: 3px;
 margin-bottom: 16px;
}

.waitlist-form {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 16px;
}

.waitlist-input {
 font-family: var(--mono);
 font-size: 14px;
 padding: 14px 16px;
 border: 1px solid rgba(191, 255, 94, 0.3);
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.05);
 color: var(--white);
 outline: none;
 width: 100%;
 box-sizing: border-box;
}

.waitlist-input:focus {
 border-color: var(--lime);
}

.waitlist-input::placeholder {
 color: rgba(255, 255, 255, 0.4);
}

.btn-buy[type="submit"] {
 border: none;
 cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
 /* CSS cannot reach JS scrollIntoView({behavior}), but it CAN neutralise
    anchor scrolling triggered by the skip link and hash navigation. */
 html { scroll-behavior: auto; }
}

/* ── Form state feedback ───────────────────────────────────────────
 Disabled buttons, busy (submitting) buttons, and invalid inputs get
 clear visual feedback. Without these, JS that sets disabled=true /
 aria-busy=true looks identical to the default state, so users don't
 know a submit is in flight or a field is invalid. */
button:disabled,
.btn-primary:disabled,
.btn-ghost:disabled,
input:disabled {
 opacity: 0.55;
 cursor: not-allowed;
 pointer-events: none;
}

[aria-busy="true"] {
 opacity: 0.75;
 cursor: progress;
 position: relative;
}
[aria-busy="true"]::after {
 content: "";
 display: inline-block;
 width: 14px;
 height: 14px;
 margin-left: 10px;
 border: 2px solid currentColor;
 border-right-color: transparent;
 border-radius: 50%;
 animation: spin 0.7s linear infinite;
 vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Invalid inputs: red border + accessible description. We only style
 on :user-invalid (validated after user interaction) to avoid shouting
 at a user who just opened an empty form. Fallback to [aria-invalid]
 for the browsers / forms that wire it manually. */
input:user-invalid,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
 border-color: #dc3545 !important;
 box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* ── Extra responsive breakpoints ──────────────────────────────────
 The 768px rule above handles tablet / small-laptop. Below 480px
 the login / claim / passkey-setup centered card stops fitting, the
 email input text clips, and the single-line submit button wraps
 across multiple lines. Shrink the card padding and type so the
 form fits a 320px viewport cleanly. */
@media (max-width: 480px) {
 .page-hero { padding: 90px 16px 40px; }
 .section { padding: 50px 16px; }
 footer { padding: 32px 16px; }
 .footer-links { gap: 14px; flex-wrap: wrap; }

 /* Login / auth card */
 input[type="email"],
 input[type="text"],
 input[type="password"] {
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
 }
 .btn-primary,
 .btn-ghost,
 .btn-sso {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  white-space: normal;
 }
}

/* Content max-width on large screens so text doesn't sprawl. */
@media (min-width: 1440px) {
 .page-hero,
 .section {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
 }
}

@media (min-width: 1920px) {
 body { font-size: 17px; }
}

@media (min-width: 2560px) {
 body { font-size: 18px; }
 .page-hero,
 .section {
  max-width: 1600px;
 }
}

/* === Refactored from inline styles === */

/* Insurance line in footer (was inline style on 2nd .footer-copy) */
.footer-insurance { margin-top: 8px; font-size: 0.7rem; opacity: 0.5; }

/* Footer link hover/transition (was inline <style> block at end of footer.html) */
.footer-copy a { color: var(--muted); text-decoration: none; transition: color .2s, text-decoration .2s; }
.footer-copy a:hover { color: var(--white) !important; text-decoration: underline !important; }

/* Login + passkey-setup form helpers */
.is-hidden { display: none !important; }
.btn-sso--centered { margin-top: 4px; display: block; text-align: center; text-decoration: none; }
.btn-sso--top18 { margin-top: 18px; }
.passkey-row { margin-top: 22px; }
.field-help--mb16 { margin-bottom: 16px; }
.btn-ghost--full { width: 100%; }

/* === Refactored from inline styles in app.py (April 2026 sweep) === */

.is-hidden { display: none !important; }
.row-pad-3 { padding: 3px 0; color: var(--muted); }
.row-pad-3-half { padding: 3px 0; color: var(--muted); width: 50%; }
.text-danger { color: var(--danger); }
.mt-6 { margin-top: 6px; }
.mt-8-faded { margin-top: 8px; opacity: 0.5; }
.mt-12-gap10 { margin-top: 12px; gap: 10px; }
.mt-18-center { margin-top: 18px; align-items: center; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.is-hidden-mb12 { display: none !important; margin-bottom: 12px; }
.eyebrow-uppercase { font-size: var(--text-2xs); color: var(--muted); margin-bottom: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.text-accent { color: var(--accent, #bfff5e); }
.checkbox-accent { margin-right: 8px; accent-color: var(--accent); }
.ml-12 { margin-left: 12px; }
.text-3xs-muted { font-size: var(--text-3xs); color: var(--muted); }
.option-card { flex: 1 1 240px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.flex-row-gap8-center { display: flex; gap: 8px; align-items: center; }

/* Hardening pass 2026-09-03: WCAG 2.5.5 touch targets on phones and tablets.
   Text links in the nav, help list, and field help are 13px lines with no
   padding, which measured well under 44 by 44 on the login and claim pages. */
@media (max-width: 1023px) {
  .nav-links a,
  .help-list a,
  .field-help a,
  footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 20px;
    padding: 12px 8px;
    box-sizing: border-box;
  }
}