/* Iridex design system — canonical source.
   Duplicated into homepage/, dashboard/, and wiki/'s assets/css/base.css
   (each Pages project deploys independently, so this can't be @imported
   across project roots). Edit here first, then re-copy into the three sites.

   Terminal / developer aesthetic, matching aboutcapy.dev and its wiki:
   grayscale-first, JetBrains Mono for anything code-shaped, Space Grotesk
   for display type. The only surviving color is a soft green "online" pulse —
   everything else is variations of near-black and off-white so nothing
   competes with the content. */

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Surfaces: near-black, layered by translucency so the page's grid
     backdrop stays faintly visible through every panel. ---- */
  --bg: #08080a;
  --bg-subtle: #0b0b0e;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-alt: rgba(255, 255, 255, 0.045);
  --surface-hi: rgba(255, 255, 255, 0.07);
  --surface-solid: #101013;
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.15);

  --text: #f0f0f3;
  --text-bright: #ffffff;
  --text-muted: #9a9aa4;
  --text-dim: #6f6f78;
  --text-faint: #5c5c65;

  /* ---- Accent = light gray, tokenised so the whole site re-themes from
     here. --iris-* names are kept from the previous palette so nothing that
     references them needs editing — they all just resolve to the same flat
     gray now, so a "gradient" built from them renders as a solid fill. ---- */
  --accent: #e8e8ee;
  --iris-1: var(--accent);
  --iris-2: var(--accent);
  --iris-3: var(--accent);
  --iris-4: var(--accent);
  --iris-5: var(--accent);
  --iris-6: var(--accent);
  --iris-gradient: var(--accent);

  --primary: var(--accent);
  --primary-dark: #c7c7d1;
  --primary-contrast: #0b0b0e;

  --success: #7dd3a0;
  --danger: #e5484d;
  --warning: #f0b429;
  --info: #8a93a6;

  /* ---- Fluid type scale (1.25 ratio, clamped so it never gets silly on
     ultrawide or unreadable on mobile) ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.06rem, 0.3vw + 1rem, 1.19rem);
  --text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.1vw + 1.25rem, 2rem);
  --text-3xl: clamp(1.9rem, 2vw + 1.4rem, 2.75rem);
  --text-4xl: clamp(2.4rem, 3.4vw + 1.5rem, 3.75rem);
  --text-5xl: clamp(2.7rem, 4.6vw + 1.4rem, 4.4rem);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  /* 7 and 9 were missing from the scale. Anything written against them
     resolved to nothing, so the rule silently applied zero padding rather
     than failing visibly. That is what kept the plan cards, the hero and
     the settings panels sitting flush against their own borders. */
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii. Smaller than the old scale on purpose — a utility, not a
     toy: nothing here should look like a rounded plastic app icon. ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.55);
  --glow-iris: 0 8px 30px rgba(0, 0, 0, 0.4);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Engineering-grid backdrop — a self-contained pattern, no external asset. */
  --grid-lines:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
}

/* Light theme — dashboard web UI only (toggled by dashboard/assets/js/theme.js).
   Inert on the other sites since they never set data-theme. The bot's
   Discord-side embeds are unaffected by any of this. */
:root[data-theme="light"] {
  --bg: #f7f7f6;
  --bg-subtle: #f0efee;
  --surface: rgba(15, 15, 20, 0.03);
  --surface-alt: rgba(15, 15, 20, 0.05);
  --surface-hi: rgba(15, 15, 20, 0.08);
  --surface-solid: #ffffff;
  --border: rgba(15, 15, 20, 0.1);
  --border-hi: rgba(15, 15, 20, 0.18);
  --text: #17171a;
  --text-bright: #000000;
  --text-muted: #55555e;
  --text-dim: #85858f;
  --text-faint: #9a99a2;
  --accent: #17171a;
  --iris-1: var(--accent); --iris-2: var(--accent); --iris-3: var(--accent);
  --iris-4: var(--accent); --iris-5: var(--accent); --iris-6: var(--accent);
  --iris-gradient: var(--accent);
  --primary-contrast: #ffffff;

  --shadow-sm: 0 1px 2px rgba(20, 15, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(20, 15, 40, 0.05), 0 6px 16px rgba(20, 15, 40, 0.08);
  --shadow-lg: 0 4px 8px rgba(20, 15, 40, 0.06), 0 12px 32px rgba(20, 15, 40, 0.1);
  --shadow-xl: 0 8px 16px rgba(20, 15, 40, 0.07), 0 24px 60px rgba(20, 15, 40, 0.13);
  --glow-iris: 0 8px 30px rgba(20, 15, 40, 0.14);
}

/* ================= RESET / BASE ================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* sticky footer: full-height flex column to push it into */
  overflow-x: hidden;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-bright);
  /* Names like "AdvancedChatFormatter" or "dashboardaccess" are single
     unbreakable words that would otherwise set a min-content width wider
     than a phone screen. */
  overflow-wrap: break-word;
  word-break: break-word;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Visible keyboard focus everywhere, without a permanent mouse-click ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Non-selectable text/images site-wide — matches the reference sites' feel
   of a crafted interface rather than a text document. Form fields and code
   need it restored to "text", or editing/copying breaks. */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, select, [contenteditable="true"], code, pre, td {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* clicks fall through to the parent <a>/<button> */
}

/* ---- Themed scrollbar ---- */
html { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }
::selection { background: rgba(255, 255, 255, 0.16); color: #fff; }
:root[data-theme="light"] ::selection { background: rgba(0, 0, 0, 0.12); color: #000; }

/* ================= SCROLL REVEAL ================= */
/* Elements start hidden only when JS is available to reveal them — the
   .js-reveal class is added to <html> by reveal.js, so with JS disabled
   or broken, content stays visible instead of being permanently invisible. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keyboard skip link — visually hidden until focused, then it parks itself
   over the nav so a keyboard user can jump past it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #0b0b0e;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ================= LAYOUT ================= */
.container {
  /* width:100% is load-bearing: body is a flex column (sticky footer), and a
     margin:auto flex item with auto width shrinks to fit-content instead of
     stretching (auto margins beat align-items:stretch per spec). A definite
     width restores max-width + margin:auto centering at full size. */
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-narrow { max-width: 800px; }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.spread { display: flex; align-items: center; justify-content: space-between; }
.center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }

/* Live countdown next to a Supporter plan's expiry (settings/plans page). */
.plan-time-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.plan-time-left span {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

/* ================= KICKER ================= */
/* Small numbered/labelled eyebrow above a section heading — the recurring
   "// 01 — section name" motif from the terminal aesthetic. */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--space-4);
}
.kicker::before { content: attr(data-n); color: var(--text-faint); letter-spacing: 0; }
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.kicker.center::after { display: none; }

/* ================= NAV (legacy static bar — site-header lives in site.css) ================= */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(10px);
  z-index: 20;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--text-bright);
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: 500;
  transition: color 0.15s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-bright); }

/* Small "online" indicator, reused for the bot's live status anywhere it
   appears (nav, hero, dashboard). */
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex: none;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(125, 211, 160, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(125, 211, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 211, 160, 0); }
}

/* ================= BUTTONS ================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease-out), background-color 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface-alt); color: var(--text-bright); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-contrast);
  font-weight: 700;
}
.btn-primary:hover { background: #fff; border-color: #fff; color: #0b0b0e; }
:root[data-theme="light"] .btn-primary:hover { background: #000; border-color: #000; color: #fff; }

.btn-outline { background: transparent; color: var(--text); border-color: var(--border-hi); }
.btn-outline:hover { border-color: var(--accent); color: var(--text-bright); background: var(--surface); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #c73338; border-color: #c73338; color: #fff; }
.btn-sm { padding: 8px 15px; font-size: var(--text-sm); }
.btn-lg { padding: 14px 26px; font-size: var(--text-base); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ================= CARDS ================= */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 0.22s var(--ease-out), background-color 0.22s var(--ease-out);
}
.card-alt { background: var(--surface-alt); }

/* Interactive card: a plain, quiet lift — no gradient hairline, no glow. */
.card-interactive { transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), background-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); }
.card-interactive:hover { transform: translateY(-3px); border-color: var(--border-hi); background: var(--surface-alt); box-shadow: var(--shadow-lg); }

/* ================= BADGES ================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-primary { background: var(--surface-hi); color: var(--text); border-color: var(--border-hi); }
.badge-success { background: rgba(125, 211, 160, 0.13); color: #9fe3bb; border-color: rgba(125, 211, 160, 0.32); }
:root[data-theme="light"] .badge-success { color: #17794a; }

/* ================= FORMS ================= */
input, textarea, select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-md);
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
/* No drag handle — a box holding more text than it was sized for scrolls
   instead of being stretched, same as the dashboard. */
textarea { resize: none; min-height: 2.4em; }
/* Chromium ignores <option> background/color entirely unless the browser
   is told the control is dark via color-scheme — without it the dropdown's
   native open-list renders light regardless of the two rules above. This
   site has no light-mode toggle, so it's unconditional. */
select { color-scheme: dark; }
select option { background: var(--surface-alt); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
label { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 6px; }
.field { margin-bottom: var(--space-4); }
.hint { font-size: var(--text-xs); color: var(--text-dim); margin-top: 6px; }

/* ================= LEGACY FOOTER (plain bar) ================= */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-md);
}
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--text-bright); }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-3); }

/* ================= 404 ================= */
.notfound {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-20) var(--space-6);
}
.notfound-inner {
  width: min(560px, 100%);
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.notfound .notfound-code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-dim);
  margin: 0;
}
.notfound h1 { font-size: var(--text-2xl); margin: var(--space-3) 0 var(--space-2); }
.notfound p { color: var(--text-muted); margin: 0 auto var(--space-6); max-width: 40ch; }
.notfound-links { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.notfound-suggest {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;
}
.notfound-suggest a {
  color: var(--text-muted); text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm); font-weight: 500;
  transition: color 0.15s var(--ease-out);
}
.notfound-suggest a:hover { color: var(--text-bright); }

/* ================= SECTION HEADINGS ================= */
.section-title { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.section-sub { color: var(--text-muted); font-size: var(--text-lg); max-width: 56ch; margin: 0; }