/* Outfit — a geometric humanist sans under the SIL Open Font License (free
   for any use), used as a clean, license-safe stand-in for Google Sans /
   Product Sans (which are proprietary). Served from Google Fonts (OFL). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   Viridite — design system v2

   Rebuilt from scratch. Two real reference points instead of vibes:

   1. Color — the Viridite jade palette (light + dark blocks below):
      sky #0e0d35 (corner) → #17165a (mid), planet #31e783 (highlight) →
      #21b74c (shadow). Every accent below is a WCAG-checked descendant of
      those exact pixels, not a re-guess (see the light/dark blocks).

   2. Structure — pulled from Bluesky's actual open-source client
      (bluesky-social/social-app, src/alf/): system-ui-first font stack,
      and their breakpoint philosophy (~500 / ~800 / ~1300) instead of the
      conventional 768/1024 pair, which is what's used below. Not their
      blue — that's a different product's brand color, not "inspiration."

   Type/spacing are on real modular scales instead of ad hoc values so
   every page shares one rhythm rather than each hero picking its own
   font-size inline (the old version did this — gone now).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- Light palette (default) ---- */
  --bg:          #ffffff;
  --bg-alt:      #f7f8fa;
  --surface:     #ffffff;
  --surface-2:   #f2f4f7;
  --text:        #0f1419;
  --text-dim:    #536471;
  --text-mute:   #8b98a5;
  --border:      #e6ebe8;
  --accent:      #0c9463;
  --accent-hover:#0a7d54;
  --accent-ink:  #ffffff;
  --warn:        #a15c00;
  --warn-bg:     #fff3e0;
  --danger:      #d5304f;
  --danger-bg:   #fdecee;
  --shadow-sm:   0 1px 2px rgba(15, 20, 25, 0.06), 0 1px 1px rgba(15, 20, 25, 0.04);
  --shadow-md:   0 8px 24px rgba(15, 20, 25, 0.08), 0 2px 6px rgba(15, 20, 25, 0.05);
  --shadow-lg:   0 20px 48px rgba(15, 20, 25, 0.12), 0 6px 16px rgba(15, 20, 25, 0.06);
  color-scheme: light;

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ---- Type scale (modular, ~1.2 ratio) ---- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-hero: clamp(2rem, 4.4vw, 3.05rem);

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --max-w: 1120px;
  --font-sans: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Dark palette — "inside a green gemstone": deep teal-green darks with a
   jade accent, fitting the name (Viridite is a green mineral), not navy. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #06140f;
    --bg-alt:    #0a1e16;
    --surface:   #0f2a20;
    --surface-2: #14352a;
    --text:      #e6f1ea;
    --text-dim:  #9db8ab;
    --text-mute: #6d8a7c;
    --border:    #245043;
    --accent:    #35e0a2;
    --accent-hover:#5fecba;
    --accent-ink:#03130d;
    --warn:      #f0b94d;
    --warn-bg:   rgba(240, 185, 77, 0.14);
    --danger:    #ff6b7f;
    --danger-bg: rgba(255, 107, 127, 0.14);
    /* A literal drop shadow barely registers when the page itself is
       already near-black — nothing for it to read as "darker than."
       Elevation here comes from the (now much brighter) border above;
       these just add a soft ambient glow instead of trying to fake a cast
       shadow that dark-on-dark can't actually show. */
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 26px 60px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

/* ═══════════════════════════ Reset + base ═══════════════════════════ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(620px circle at 10% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(720px circle at 94% 4%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%);
  background-repeat: no-repeat;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

code, pre { font-family: var(--font-mono); }
code {
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.88em;
}
pre {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  overflow-x: auto;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
}
pre code { background: none; padding: 0; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }

/* ═══════════════════════════ Header / nav ═══════════════════════════ */

header.site {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

header.site .bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  min-width: 0;
}

header.site img.logo { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }

header.site .brand {
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
header.site .brand span { color: var(--accent); }

nav.site {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
}

nav.site a {
  color: var(--text-dim);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.site a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
nav.site a.active { color: var(--text); background: var(--surface-2); }

nav.site a.cta {
  color: var(--accent-ink);
  background: var(--accent);
  margin-left: var(--sp-2);
}
nav.site a.cta:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* Hamburger toggle — hidden on wide screens, real menu button on narrow */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  nav.site {
    margin-left: 0;
    position: fixed;
    inset: 65px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    overflow-y: auto;
  }
  nav.site.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  nav.site a { padding: var(--sp-4) var(--sp-2); border-radius: 0; border-bottom: 1px solid var(--border); }
  nav.site a.cta { margin: var(--sp-4) 0 0; text-align: center; border-radius: var(--radius-pill); border-bottom: none; }
}

/* ═══════════════════════════ Layout / hero ═══════════════════════════ */

main { padding: var(--sp-2) 0 var(--sp-20); }

.hero { text-align: center; padding: var(--sp-12) 0 var(--sp-2); }
.hero.compact { padding: var(--sp-8) 0 var(--sp-2); }

.hero img.logo-lg {
  width: 84px; height: 84px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-lg);
}

.hero h1 span { color: var(--accent); }

.hero p.tagline {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  max-width: 620px;
  margin: var(--sp-3) auto var(--sp-6);
}

.btn-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-base);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--accent); background: var(--surface-2); }

/* ═══════════════════════════ Callouts / cards ═══════════════════════════ */

.callout {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-8) 0;
  box-shadow: var(--shadow-sm);
}
.callout.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: var(--warn-bg); }
.callout.warn strong { color: var(--warn); }

section { margin: var(--sp-12) 0; }
section h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
section h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
section h3 { margin-top: var(--sp-6); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.shots figure { margin: 0; }
.shots .frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Real hardware captures vary wildly in content (a loading screen at
     frame 30 is mostly solid black; a menu screen is colorful) — without
     a background of its own, a dark capture visually disappears into a
     dark page instead of reading as a deliberate screenshot. */
  background: var(--bg-alt);
  aspect-ratio: 16 / 10;
}
.shots .frame:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); }
.shots img { width: 100%; height: 100%; object-fit: cover; }
.shots figcaption { font-size: var(--fs-xs); color: var(--text-mute); text-align: center; margin-top: var(--sp-2); }

.repo-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.repo-links .card { flex: 1 1 240px; }
.repo-links .card h3 { margin-top: 0; }

ul.plain, ol.plain { padding-left: 1.3em; margin: 0; }
ul.plain li, ol.plain li { margin-bottom: var(--sp-2); }

/* ═══════════════════════════ Tables ═══════════════════════════ */

.table-wrap {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--surface); }
th, td { padding: var(--sp-4) var(--sp-5); text-align: left; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
th { color: var(--text-mute); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-alt); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
}
.pill.ok { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pill.no { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* ═══════════════════════════ Compat list controls ═══════════════════════════ */

.compat-controls { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-5); }
.search-input, .sort-select {
  font: inherit; padding: 10px var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.search-input { flex: 1 1 220px; min-width: 180px; }
.search-input:focus, .sort-select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }

.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: var(--radius-pill); padding: 4px; }
.tab {
  font: inherit; font-weight: 700; font-size: var(--fs-sm);
  padding: 8px 16px; border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

tr.publisher-row th { background: var(--bg-alt); color: var(--text-mute); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px var(--sp-5); }
tr.version-row td { background: var(--bg-alt); }
.version-toggle { cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); background: var(--bg-alt); }
.version-toggle:hover { text-decoration: underline; }

.icon-wrap { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; }
.icon-wrap img { border-radius: 8px; }
.icon-wrap.blurred img { filter: blur(8px); }
.mature-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: #fff; background: rgba(0,0,0,0.45); border-radius: 8px;
}
.blurred-text { filter: blur(5px); transition: filter 0.15s ease; }
.mature-row { cursor: pointer; }
.mature-row:hover .blurred-text, .mature-row:hover .icon-wrap.blurred img { filter: blur(3px); }

/* ═══════════════════════════ Roadmap board ═══════════════════════════ */

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: start; }
.board-col h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 700; margin: 0 0 var(--sp-4); }
.board-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.board-item h4 { margin: var(--sp-2) 0 6px; }
.board-item p { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); }
.team-pill { font-size: var(--fs-xs); padding: 3px 10px; }
.team-cores   { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.team-website { color: #3b82f6; background: color-mix(in srgb, #3b82f6 16%, transparent); }
.team-testing { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.team-other   { color: var(--text-mute); background: var(--surface-2); }

/* ═══════════════════════════ Docs sidebar layout ═══════════════════════════ */

.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-10); align-items: start; }
.docs-sidebar {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-sm);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.docs-sidebar a {
  color: var(--text-dim); font-weight: 600; padding: 7px var(--sp-3);
  border-radius: var(--radius-sm); border-left: 2px solid transparent;
}
.docs-sidebar a:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.docs-sidebar a.active { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.docs-content { min-width: 0; }
.docs-content section { margin: 0 0 var(--sp-16); scroll-margin-top: 84px; }
.docs-content section:last-child { margin-bottom: 0; }

/* ═══════════════════════════ Forms ═══════════════════════════ */

.field { margin-bottom: var(--sp-6); }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field p.hint { color: var(--text-mute); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.field input[type="text"], .field input[type="url"], .field textarea {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px;
  font-size: var(--fs-base); font-family: inherit;
}
.field input[type="file"] { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); }
.field .filename { font-size: var(--fs-xs); color: var(--accent); margin: 0 0 6px; display: none; }
.field textarea { font-family: var(--font-mono); font-size: var(--fs-sm); min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }

#status { margin-top: var(--sp-5); padding: 14px 18px; border-radius: var(--radius-md); display: none; }
#status.ok  { display: block; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); }
#status.err { display: block; background: var(--danger-bg); border: 1px solid var(--danger); }
#status.pending { display: block; background: var(--surface-2); border: 1px solid var(--border); }
button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* ═══════════════════════════ Footer ═══════════════════════════ */

footer.site { border-top: 1px solid var(--border); padding: var(--sp-8) 0; color: var(--text-mute); font-size: var(--fs-sm); text-align: center; }
footer.site a { color: var(--text-dim); font-weight: 600; }
footer.site a:hover { color: var(--accent); }
footer.site .dot { color: var(--border); margin: 0 4px; }

/* ═══════════════════════════ Responsive ═══════════════════════════ */

@media (max-width: 1300px) {
  .docs-layout { grid-template-columns: 180px 1fr; gap: var(--sp-6); }
}

@media (max-width: 800px) {
  .grid-2, .shots, .board { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-10) 0 var(--sp-2); }
  section { margin: var(--sp-10) 0; }
  .compat-controls { flex-direction: column; align-items: stretch; }
  .tabs { align-self: flex-start; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-4); }
  .docs-sidebar a { border-left: none; border-bottom: 2px solid transparent; }
  .docs-sidebar a.active { border-left-color: transparent; border-bottom-color: var(--accent); }
}

@media (max-width: 500px) {
  .wrap { padding: 0 var(--sp-4); }
  header.site .brand { font-size: var(--fs-base); }
  .hero { padding: var(--sp-8) 0 var(--sp-2); }
  .hero p.tagline { font-size: var(--fs-md); }
  .btn { padding: 12px 20px; font-size: var(--fs-sm); }
  .card { padding: var(--sp-4) var(--sp-5); }
  section { margin: var(--sp-8) 0; }
  th, td { padding: var(--sp-3); }
}