/* ZooBC Foundation — design system.
 *
 * Editorial dark-first typography with a restrained teal/amber palette lifted
 * from the ZooBC family but toned down for a foundation surface (Web3
 * Foundation + Stellar sober, not zoobc.com bio-dome). Serifs for editorial
 * prose (news, reports), grotesk for UI, mono for on-chain evidence.
 *
 * Theme model:
 *   :root                       → dark tokens (default)
 *   [data-theme="light"]        → light overrides (explicit user pick)
 *   @media (prefers-color-scheme: light) → light overrides (system pick, if user hasn't chosen)
 *
 * Explicit body background so a font swap can't flash a white page against
 * dark tokens (the brief called this out).
 */

/* ─── tokens: dark (default) ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* palette */
  --ink:            #eef2f4;     /* body text on dark */
  --ink-muted:      #a9b3ba;
  --ink-faint:      #6f7a83;
  --bg:             #0a0d10;     /* page */
  --bg-elev-1:      #10151a;     /* card */
  --bg-elev-2:      #171d24;     /* input, hover */
  --bg-elev-3:      #1e2630;
  --line:           #232c36;
  --line-strong:    #2f3a46;

  --accent:         #17c3a2;     /* teal — primary */
  --accent-strong:  #2ee0bd;
  --accent-soft:    #0b3b34;
  --amber:          #f4a259;     /* warm secondary */
  --amber-soft:     #3a2416;
  --red:            #e5484d;
  --green:          #46c07a;
  --violet:         #9d7cff;

  /* typography */
  --font-sans:  "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", "Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Source Serif Pro", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.375rem;  /* 38 */
  --fs-4xl:  3.25rem;   /* 52 */
  --fs-5xl:  4.5rem;    /* 72 */

  /* spacing scale (4px base) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 4px rgba(23,195,162,.15);

  --measure: 68ch;
  --page-max: 1200px;
  --page-max-narrow: 780px;

  --transition: 160ms cubic-bezier(.2,.6,.2,1);
}

/* ─── tokens: light (explicit + system pref) ─────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --ink:           #101418;
  --ink-muted:     #4a5560;
  --ink-faint:     #7a8794;
  --bg:            #f7f8f9;
  --bg-elev-1:     #ffffff;
  --bg-elev-2:     #f0f2f4;
  --bg-elev-3:     #e6e9ec;
  --line:          #dde1e5;
  --line-strong:   #c7cdd3;
  --accent:        #08897a;
  --accent-strong: #05615a;
  --accent-soft:   #d4f0eb;
  --amber:         #b96b1d;
  --amber-soft:    #f6e3d2;
  --shadow-1: 0 1px 2px rgba(20,30,40,.06);
  --shadow-2: 0 4px 20px rgba(20,30,40,.08);
  --shadow-glow: 0 0 0 4px rgba(8,137,122,.16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ink:           #101418;
    --ink-muted:     #4a5560;
    --ink-faint:     #7a8794;
    --bg:            #f7f8f9;
    --bg-elev-1:     #ffffff;
    --bg-elev-2:     #f0f2f4;
    --bg-elev-3:     #e6e9ec;
    --line:          #dde1e5;
    --line-strong:   #c7cdd3;
    --accent:        #08897a;
    --accent-strong: #05615a;
    --accent-soft:   #d4f0eb;
    --amber:         #b96b1d;
    --amber-soft:    #f6e3d2;
    --shadow-1: 0 1px 2px rgba(20,30,40,.06);
    --shadow-2: 0 4px 20px rgba(20,30,40,.08);
    --shadow-glow: 0 0 0 4px rgba(8,137,122,.16);
  }
}

/* ─── reset + base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); font-family: var(--font-sans); font-weight: 600; }
h6 { font-size: var(--fs-md); font-family: var(--font-sans); font-weight: 600; }

/* The HTML hidden attribute is only `display: none` in the UA stylesheet, so
   ANY author rule that sets display beats it. `.cube-marker` sets
   `display: inline-block`, which meant hidden did nothing to it and the admin
   notice preview drew both icons at once — stacking them into two grid rows,
   which is what made that bar tall with its content pinned to the bottom.
   One !important here rather than chasing every element that might one day be
   toggled with hidden. */
[hidden] { display: none !important; }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
p.lead { font-size: var(--fs-lg); color: var(--ink-muted); line-height: 1.6; }
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
small { font-size: var(--fs-sm); color: var(--ink-muted); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-elev-2);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--line);
}
pre {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  overflow-x: auto;
  line-height: 1.5;
  font-size: var(--fs-sm);
}
pre code { background: transparent; border: 0; padding: 0; }

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-3) var(--sp-5);
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
  font-style: italic;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.5rem; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-6) 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-5);
}
th, td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { color: var(--ink-muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }

/* ─── layout primitives ──────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.wrap-narrow {
  width: 100%;
  max-width: var(--page-max-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.section { padding: var(--sp-8) 0; }
.section-sm { padding: var(--sp-6) 0; }
.section-lg { padding: var(--sp-9) 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.row-between { justify-content: space-between; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-metric { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ─── site header ────────────────────────────────────────────────────────── */
/* NOTE: this rule is currently inert on every page that also loads
   foundation-next.css (which loads second and overrides `.site-header` at
   equal specificity — see foundation-next.css around `.site-header { position:
   relative; ... }`). The real sticky mechanism there is the `.site-chrome`
   wrapper in foundation-next.css (`position: sticky; top: 0; z-index: 200`),
   which sticks the notice bar and header together as one unit. Do not "fix"
   this rule to make it sticky again — that would double-stick the header
   (this rule plus .site-chrome) on any page where load order changes or a
   future page stops loading foundation-next.css after this file. Left in
   place, not deleted, because other pages' stylesheet load order is not
   something to assume from here. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 13, 16, 0.85);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-header,
:root:not([data-theme="dark"]) .site-header {
  background: rgba(247, 248, 249, 0.85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header {
    background: rgba(247, 248, 249, 0.85);
  }
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: 60px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.site-brand:hover { color: var(--accent); text-decoration: none; }
.site-brand svg,
.site-brand img { height: 28px; width: auto; }
.site-brand .brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand .brand-title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 500; }
.site-brand .brand-sub   { font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  transition: var(--transition);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); background: var(--bg-elev-2); text-decoration: none; }
.site-nav a.is-active { color: var(--ink); background: var(--bg-elev-2); }

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: #041412;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.site-cta:hover { background: var(--accent-strong); color: #041412; text-decoration: none; transform: translateY(-1px); }

.header-tools { display: flex; align-items: center; gap: var(--sp-2); }
.theme-toggle, .header-icon-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle:hover, .header-icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-elev-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-dark, .theme-toggle .theme-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-light { display: block; }
[data-theme="light"] .theme-toggle .theme-dark { display: block; }
:root:not([data-theme]) .theme-toggle .theme-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .theme-light { display: none; }
  :root:not([data-theme]) .theme-toggle .theme-dark  { display: block; }
}

/* mobile menu button */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 40px; height: 40px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    box-shadow: var(--shadow-2);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: var(--sp-3); }
}

/* ─── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-9);
  background: var(--bg-elev-1);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { color: var(--ink-muted); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--ink-faint);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.footer-brand svg, .footer-brand img { height: 32px; width: auto; }

/* ─── hero ───────────────────────────────────────────────────────────────── */
.hero-foundation {
  padding: var(--sp-9) 0 var(--sp-8);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-foundation::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(23,195,162,0.10), transparent 60%),
    radial-gradient(60% 50% at 100% 30%, rgba(244,162,89,0.06), transparent 60%);
  z-index: -1;
}
.hero-foundation .eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}
.hero-foundation .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hero-foundation h1 {
  font-size: clamp(2.5rem, 6vw, var(--fs-5xl));
  margin-bottom: var(--sp-5);
  max-width: 20ch;
}
.hero-foundation .lead {
  max-width: 42rem;
  font-size: var(--fs-xl);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ─── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: #041412;
}
.btn-primary:hover { background: var(--accent-strong); color: #041412; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elev-1); }
.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  padding: var(--sp-2) var(--sp-3);
}
.btn-ghost:hover { color: var(--ink); background: var(--bg-elev-2); }
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(229,72,77,0.4);
}
.btn-danger:hover { background: rgba(229,72,77,0.1); }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: var(--transition);
}
.card-hover { cursor: pointer; }
.card-hover:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card-title { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--ink); font-family: var(--font-sans); }
.card-body { color: var(--ink-muted); }
.card-footer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-faint); }
.card-eyebrow { font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: var(--sp-2); }
.card-numbered { position: relative; padding-left: var(--sp-7); }
.card-numbered::before {
  content: attr(data-num);
  position: absolute;
  left: var(--sp-5); top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* metric tile — live number from zoobc.network */
.metric {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  transition: var(--transition);
}
.metric:hover { border-color: var(--accent); }
.metric-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; margin-bottom: var(--sp-2); }
.metric-value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.metric-value.is-stale { color: var(--ink-muted); }
.metric-sub { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--sp-2); font-family: var(--font-mono); }
.metric a { color: inherit; }
.metric a:hover { color: var(--accent); text-decoration: none; }

/* stale/live indicator */
.pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(23,195,162,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(23,195,162,.6); }
  70% { box-shadow: 0 0 0 8px rgba(23,195,162,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,195,162,0); }
}
.pulse.stale { background: var(--amber); animation: none; }

/* ─── pill/tag/status ────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pill-accent  { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.pill-amber   { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill-live    { background: rgba(70,192,122,.14); color: var(--green); border-color: transparent; }
.pill-testnet { background: rgba(244,162,89,.14); color: var(--amber); border-color: transparent; }

/* ─── forms ──────────────────────────────────────────────────────────────── */
.form-field { margin-bottom: var(--sp-5); }
.form-field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); color: var(--ink); }
.form-field .hint { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--sp-2); }
.form-field .error { font-size: var(--fs-sm); color: var(--red); margin-top: var(--sp-2); }
/* Named by what is NOT a text box rather than by what is. The allow-list this
   replaces listed six types, so every other one fell through to browser
   defaults — which is why phone and WhatsApp (type=tel, set in PHP) and the
   date fields sat at a different size to everything around them. A deny-list
   cannot go stale the next time a field needs a type nobody thought of. */
input:not([type]),
input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea, select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-md);
  transition: var(--transition);
}
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  color-scheme: inherit;   /* the picker glyph follows the theme, not the OS */
}
/* Safari/Chrome centre a date value oddly when the box is wider than its text;
   this keeps it reading like every other field. */
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* The two that stay their natural size still need to sit on the same baseline
   as the fields beside them. */
input[type="file"] { max-width: 100%; color: var(--ink-muted, inherit); font-family: inherit; font-size: var(--fs-sm); }
input[type="color"] { width: 54px; height: 38px; padding: 2px; background: var(--bg-elev-2);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }

textarea { min-height: 140px; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-glow);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23a9b3ba' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-7);
}

/* ─── empty state ────────────────────────────────────────────────────────── */
.empty {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elev-1);
  color: var(--ink-muted);
}
.empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}
.empty-icon svg { width: 24px; height: 24px; }
.empty h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--ink); }
.empty p { max-width: 42ch; margin: 0 auto; color: var(--ink-muted); }
.empty .btn { margin-top: var(--sp-4); }

/* ─── notice/callout ─────────────────────────────────────────────────────── */
.notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev-1);
  display: flex; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.notice-accent { border-left: 3px solid var(--accent); }
.notice-amber  { border-left: 3px solid var(--amber); }
.notice-red    { border-left: 3px solid var(--red); }
.notice-title { font-weight: 600; margin-bottom: var(--sp-1); color: var(--ink); }
.notice-body { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; max-width: none; }

/* ─── prose (markdown-rendered content) ──────────────────────────────────── */
.prose {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--ink);
}
.prose p, .prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose h2 { font-size: var(--fs-2xl); }
.prose h3 { font-size: var(--fs-xl); }
.prose code { font-size: 0.85em; }
.prose blockquote { font-family: var(--font-serif); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ─── page-title band ────────────────────────────────────────────────────── */
.page-title {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.page-title .eyebrow { color: var(--ink-faint); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.1em; font-weight: 600; margin-bottom: var(--sp-3); }
.page-title h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); max-width: 24ch; }
.page-title .lead { max-width: 42rem; color: var(--ink-muted); font-size: var(--fs-lg); }

/* ─── breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--line-strong); }

/* ─── person card ────────────────────────────────────────────────────────── */
.person-card {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: flex-start;
  transition: var(--transition);
}
.person-card:hover { border-color: var(--line-strong); }
.person-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  border: 1px solid var(--line);
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-info { flex: 1; min-width: 0; }
.person-name { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg); margin: 0 0 var(--sp-1); color: var(--ink); }
.person-title { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-3); }
.person-bio { font-size: var(--fs-sm); color: var(--ink-muted); }
.person-links { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.person-links a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  padding: 2px var(--sp-2);
  border-radius: 4px;
}
.person-links a:hover { color: var(--accent); background: var(--bg-elev-2); text-decoration: none; }

/* ─── role/seat card (founding roles overview) ───────────────────────────── */
.role-seat {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.role-seat:hover { border-color: var(--accent); transform: translateY(-2px); }
.role-seat .num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-3);
}
.role-seat .title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--ink);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}
.role-seat .subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
  flex: 1;
}
.role-seat .filled-by {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.role-seat .filled-by .name { color: var(--ink); font-weight: 600; }
.role-seat .filled-by .vacant { color: var(--amber); }
.role-seat .mini-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.role-seat .mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─── news post cards ────────────────────────────────────────────────────── */
.news-item {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 640px) { .news-item { grid-template-columns: 1fr; } }
.news-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.news-title { font-family: var(--font-serif); font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--accent); }
.news-excerpt { color: var(--ink-muted); font-size: var(--fs-md); margin: 0; max-width: 65ch; }

/* ─── evidence chip (links to on-chain proof) ────────────────────────────── */
.evidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
}
.evidence:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.evidence svg { width: 10px; height: 10px; }

/* ─── admin row actions ──────────────────────────────────────────────────────
   One shape for every control in an Actions column, whether it is a link, a
   submit button or a disabled placeholder. The three used to be a link with an
   arrow glyph, a bare link and a full-weight button, which read as three
   different kinds of thing rather than three choices about one row.

   A control that does not apply keeps its place and greys out. Removing it
   reflows the column row by row and makes an unavailable action look like a
   missing feature. */
.admin-act {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.admin-act:first-child { margin-left: 0; }
.admin-act:hover { color: var(--ink); border-color: var(--ink-faint); }
.admin-act:focus-visible { outline: 2px solid var(--z-cyan, #48d1cc); outline-offset: 1px; }
.admin-act-danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.admin-act.is-off {
  opacity: .38;
  cursor: default;
  /* Greyed, not hidden: the row keeps the same three slots. */
}
.admin-act.is-off:hover { color: var(--ink-muted); border-color: var(--line); }

/* ─── admin surface tweaks ───────────────────────────────────────────────── */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 60px); position: relative; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } }

/* The band is painted on the shell, not on the sidebar.
   .admin-side is position:sticky with align-self:start (foundation-next.css),
   and align-self:start is the line that makes sticky work at all -- a stretched
   grid item is already as tall as its scroll range, so it never sticks. The
   cost is that the element is only as tall as its menu, so its background and
   border stopped at the last item and the column looked cut off halfway down.
   Painting the column on the shell keeps the sticky behaviour and gives the
   band the full height of the page. */
@media (min-width: 901px) {
  .admin-shell::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 240px;
    background: var(--bg-elev-1);
    border-right: 1px solid var(--line);
    pointer-events: none;
  }
  .admin-side, .admin-main { position: relative; }
  .admin-side { background: transparent; border-right: 0; }
}
.admin-side {
  border-right: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-elev-1);
}
.admin-side h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin: var(--sp-4) 0 var(--sp-2); font-weight: 600; }
.admin-side h5:first-child { margin-top: 0; }
.admin-side ul { list-style: none; padding: 0; margin: 0; }
.admin-side li { margin: 0; }
.admin-side a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink-muted);
  border-radius: 6px;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.admin-side a:hover, .admin-side a.is-active { background: var(--bg-elev-2); color: var(--ink); }
/* Grouped sidebar sections (e.g. Grants > Directory / Applications). The group
   label is not a link — only its children navigate — so it reads as a heading
   rather than a dead click target. */
.admin-side .admin-nav-group-label { display: block; padding: var(--sp-2) var(--sp-3) 4px; color: var(--ink-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.admin-side .admin-nav-group.is-open .admin-nav-group-label { color: var(--ink-muted); }
.admin-side .admin-nav-group ul { margin: 0 0 var(--sp-2); }
.admin-side .admin-nav-group ul a { padding-left: calc(var(--sp-3) + 12px); }
/* Row actions in admin tables. The inline form exists only so destructive
   actions are POSTs rather than links — it must not disturb the row's layout. */
.admin-row-actions { white-space: nowrap; text-align: right; }
.admin-row-actions > * { vertical-align: middle; }
.admin-inline-form { display: inline; margin: 0; }
.admin-danger { color: #e5484d; }
.admin-danger:hover { color: #fff; background: #e5484d; }
/* Sub-view tabs inside an admin section. */
.admin-tabs { display: flex; gap: 2px; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.admin-tabs a { padding: var(--sp-2) var(--sp-4); color: var(--ink-muted); font-size: var(--fs-sm); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a.is-active { color: var(--ink); border-bottom-color: var(--accent, #48d1cc); }
/* min-width:0 is load-bearing, not tidiness. .admin-main is a grid ITEM of
   .admin-shell, and a grid item's default min-width is auto — meaning it
   refuses to shrink below the widest unbreakable thing inside it. One long
   line in a bug's reproduction steps therefore set the floor for the whole
   column, the column overflowed the viewport, and the page scrolled sideways
   with the right-hand side of every card cut off. Reported on the bug screen
   at a shrunk window; it was never specific to that page.
   The inner scrollers (.table-scroll and friends) only work once the thing
   containing them is allowed to be narrower than they are. */
.admin-main { padding: var(--sp-6); min-width: 0; }
/* Same reason: at =<900px the shell is one column and the sidebar is the item. */
.admin-side { min-width: 0; }
.admin-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); gap: var(--sp-4); flex-wrap: wrap; }
.admin-title h1 { font-size: var(--fs-2xl); margin: 0; }

/* Account chip in the admin header. The avatar stands in for the signed-in
   name, and everything that used to sit beside it as its own control — back to
   site, account links, sign out — lives in the menu it opens. Sippis holds the
   profile picture but /auth/me returns no URL for it, so the circle carries a
   monogram; .user-avatar img is here for the day that changes. */
.user-menu { position: relative; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-elev-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.user-avatar:hover, .user-avatar[aria-expanded="true"] { border-color: var(--line-strong); background: var(--bg-elev-3); }
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 320;
  min-width: 15rem;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elev-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.user-menu-id { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.user-menu-id strong { font-size: var(--fs-sm); color: var(--ink); }
.user-menu-id span { font-size: var(--fs-xs); color: var(--ink-faint); word-break: break-all; }
.user-menu-panel a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: 6px; color: var(--ink-muted); font-size: var(--fs-sm); text-decoration: none; }
.user-menu-panel a:hover, .user-menu-panel a:focus-visible { color: var(--ink); background: var(--bg-elev-2); }
.user-menu-panel .user-menu-danger { color: #e5484d; }
.user-menu-panel .user-menu-danger:hover { color: #fff; background: #e5484d; }
/* The role pill sits between controls that all set a height; on its own it is
   only as tall as its text, which is what made "super" a shorter box than the
   buttons either side of it. */
.header-tools .pill { min-height: 34px; }

/* utility */
.text-muted { color: var(--ink-muted); }
.text-faint { color: var(--ink-faint); }
.text-accent { color: var(--accent); }
.text-amber { color: var(--amber); }
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.flex-1 { flex: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--line); margin: var(--sp-5) 0; }
.big-arrow::after { content: " →"; }

/* ─── skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent); color: #041412;
  padding: var(--sp-2) var(--sp-4);
  /* Must stay above .site-chrome (foundation-next.css, z-index: 200) — the
     sticky notice bar + header — or a focused skip link paints underneath
     the opaque chrome and is invisible to keyboard users (WCAG 2.4.1). */
  z-index: 300;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0; }