/* ═══════════════════════════════════════════════════════════════════════════
   AYU Shared Design System — shared across app, clock, admin, personas, watershed
   Tokens ported from designs/Ayu Design System/tokens/{colors,typography,spacing}.css
   — values preserved exactly from that source. See that folder's readme.md
   for voice, palette rationale, and component inventory this file implements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
  /* ---- Brand palette (Ayu Brand Guide V5) ---- */
  --morpho:        #2BA0D4; /* Blue Marble — planetary, technosphere */
  --vermillion:    #E85D3A; /* activation, ancient intelligence, primary CTA */
  --pollen:        #F5C842; /* econosphere, warmth, attention */
  --bark:          #3D3830; /* warm dark neutral */
  --fuchsia:       #D94C78; /* noosphere, vitality */
  --sunlit-linen:  #F9F5EE; /* primary background */
  --forest-floor:  #0F2418; /* deep ink, near-black-green */
  --vivid-green:   #1DB373; /* regeneration, growth */
  --white:         #FFFFFF;

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--sunlit-linen);
  --bg-surface:     #FFFCF8;
  --bg-surface-alt: #F6F1E9;
  --bg-inverse:     var(--forest-floor);

  --ink-primary:    var(--forest-floor);
  --ink-secondary:  #5B6B60;
  --ink-tertiary:   #8B8377;
  --ink-on-inverse: var(--sunlit-linen);

  --border-subtle:  #E8E1D3;
  --border-strong:  #D6CCB8;

  --accent-primary:   var(--vermillion);
  --accent-secondary: var(--morpho);

  --status-positive: var(--vivid-green);
  --status-caution:  var(--pollen);
  --status-critical: #C0432A;
  --status-neutral:  var(--ink-tertiary);

  /* ---- Sphere data-viz palette (Ten Spheres) ---- */
  --sphere-biosphere:        #5B8C3E;
  --sphere-atmosphere:       #6BA8C9;
  --sphere-hydrosphere:      #2E8BA8;
  --sphere-anthroposphere:   #C77C4E;
  --sphere-noosphere:        #8A6FA8;
  --sphere-technosphere:     #7C8694;
  --sphere-econosphere:      #C99A3A;
  --sphere-ancient-intel:    #A6592C;
  --sphere-regeneration:     #4FA06C;
  --sphere-governance:       #4A6FA5;

  /* ---- Gradients (accent use only — never a page background) ---- */
  --gradient-forest-to-sky:   linear-gradient(135deg, var(--forest-floor) 0%, var(--morpho) 100%);
  --gradient-bloom-to-pollen: linear-gradient(135deg, var(--fuchsia) 0%, var(--pollen) 100%);

  /* ---- Font families ---- */
  --font-display: 'Noto Serif', 'Georgia', serif;        /* headings — brand primary typeface */
  --font-body:    'Nunito Sans', 'Segoe UI', sans-serif; /* brand body typeface */
  --font-ui:      'Inter', 'Nunito Sans', sans-serif;    /* dense UI: labels, tables, nav */
  --font-mono:    'DM Mono', 'SF Mono', monospace;       /* data, ids, numeric readouts */
  /* Arkhip (the real logo typeface) has no licensed webfont — never set it, and
     never re-set "Ayu" as a wordmark substitute; the wordmark is always the
     real logo asset (assets/logo.png / assets/logomark.png). --font-logo-substitute
     is Unbounded, for rare logo-*adjacent* branded moments only — never loaded
     as a webfont here since nothing in this app currently uses it. */
  --font-logo-substitute: 'Unbounded', var(--font-display);

  /* ---- Major Third type scale (ratio 1.25, base 16px) ---- */
  --text-h1: 3.815rem; /* 61.04px */
  --text-h2: 3.052rem; /* 48.83px */
  --text-h3: 2.441rem; /* 39.06px */
  --text-h4: 1.953rem; /* 31.25px */
  --text-h5: 1.563rem; /* 25.00px */
  --text-h6: 1.25rem;  /* 20.00px */
  --text-body: 1rem;   /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-micro: 0.75rem;  /* 12px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* logo protective spacing, per brand guide */
  --logo-icon-wordmark-gap: 32px;
  --logo-icon-inner-margin: 100px;

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

  /* ---- Shadows (soft, warm, low-contrast — none at rest by default) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 36, 24, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 36, 24, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 36, 24, 0.10);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 220ms;

  /* ---- Legacy aliases — every var name pre-existing pages already reference,
     repointed at the exact tokens above so the whole site re-skins from this
     one file. Prefer the tokens above in new/updated markup; these exist so
     hundreds of pre-existing `var(--orange)`-style references across app,
     admin, clock and the persona pages resolve to the correct brand color
     without a page-by-page rewrite. Runtime overrides for this same set of
     names also live in worker/src/data/manifest.js DEFAULT_SITE_CONFIG.colors
     (applied by ayu.js from /api/config/site) — keep both in sync. ---- */
  --cream:    var(--sunlit-linen);
  --bg:       var(--sunlit-linen);   /* alias used by clock */
  --border:   var(--border-subtle);
  --text:     var(--ink-primary);
  --muted:    var(--ink-tertiary);
  --orange:   var(--vermillion);
  --blue:     var(--morpho);
  --cyan:     var(--morpho);         /* alias used by clock */
  --moss:     var(--vivid-green);
  --earth:    var(--bark);
  --red:      var(--status-critical);
  --yellow:   var(--pollen);
  --shadow:   var(--shadow-sm);
  --header-h: 120px;
  --logo-h:   100px;
  --footer-h: 40px;
  /* Namespaced aliases for the shared header/footer/nav chrome specifically.
     Persona pages (personas/*.html) each define their own :root with
     --border/--cream/--text for their own component palettes (different
     values per page). Chrome rules below use these --ayu-* names instead of
     the bare ones so a persona page's own palette can never bleed into the
     shared header/footer, regardless of stylesheet load order. */
  --ayu-border: var(--border-subtle);
  --ayu-cream:  var(--sunlit-linen);
  --ayu-text:   var(--ink-primary);
}

/* ─── RESET ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--ink-primary);
  padding-top: var(--header-h);
}

/* ─── HEADER — shared across all AYU modules ─── */
header, .header {
  background: var(--white);
  border-bottom: 2px solid var(--ayu-border);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  isolation: isolate;
}
.header-logo, header img, .header img {
  height: var(--logo-h);
  width: auto;
  flex-shrink: 0;       /* never compress the logo */
  display: block;       /* removes inline-block gap */
  min-width: 0;
}
.header-pagesep  { color: var(--ayu-border); font-size: 18px; font-weight: 300; flex-shrink: 0; }
.header-pagename { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ayu-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─── NAV ICON ─── */
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm); font-size: 22px; line-height: 1;
  text-decoration: none; background: none; border: 2px solid transparent;
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-icon:hover  { background: var(--ayu-cream); border-color: var(--ayu-border); }
.nav-icon.active { background: var(--accent-primary); border-color: var(--accent-primary); }

/* ─── HAMBURGER NAV ─── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
  margin-left: auto; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ayu-text); border-radius: 2px; transition: all .2s; }
.nav-label { display: none; font-size: 13px; font-weight: 500; }

/* ─── SURFACE NAV ─── */
.surface-nav {
  background: var(--white);
  border-bottom: 1px solid var(--ayu-border);
  padding: 0 32px;
  display: flex; align-items: center; gap: 4px;
  height: 40px;
  position: -webkit-sticky; position: sticky;
  top: var(--header-h); z-index: 99;
}
.surface-nav-label   { font-family: var(--font-ui); font-size: 10px; color: var(--muted); letter-spacing: .08em; margin-right: 4px; }
.surface-nav-divider { width: 1px; height: 16px; background: var(--ayu-border); margin: 0 8px; }
.surface-nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em;
  text-decoration: none; color: var(--muted);
  transition: background .15s, color .15s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.surface-nav-link:hover  { background: var(--ayu-cream); color: var(--ayu-text); }
.surface-nav-link.active { background: #fff3ef; color: var(--accent-primary); }

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .header-nav {
    display: none; position: fixed; top: var(--header-h); right: 0;
    background: var(--white); border: 1px solid var(--ayu-border);
    border-radius: 0 0 0 var(--radius-md); box-shadow: var(--shadow-sm);
    padding: 8px; flex-direction: column; gap: 4px; z-index: 99; min-width: 140px;
  }
  .header-nav.open { display: flex; }
  .nav-icon { width: 100%; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: var(--radius-sm); }
  .nav-label { display: inline; }
}
@media (max-width: 600px) {
  header, .header { padding: 8px 14px; }
  .surface-nav { padding: 0 10px; }
  .surface-nav-label, .surface-nav-divider { display: none; }
  .header-pagesep, .header-pagename { display: none; } /* logo + hamburger only — no room */
}

/* ─── SHARED FOOTER ─── */
#siteFooter {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--footer-h);
  background: var(--white);
  border-top: 2px solid var(--ayu-border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #aaa;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.footer-accent { color: var(--accent-primary); }
.footer-right  { display: flex; align-items: center; gap: 6px; }
.footer-dim    { color: #bbb; }
.footer-code   { font-size: 10px; color: #888; background: #f4f3f0; padding: 2px 6px; border-radius: 4px; letter-spacing: 0; font-family: var(--font-mono); }
#footerVersion { color: #bbb; padding: 1px 5px; }
.footer-btn    { font-size: 10px; padding: 2px 7px; border: 1px solid #ddd; border-radius: 4px; background: var(--white); cursor: pointer; color: #888; }
.footer-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ─── FOOTER — MOBILE HIDE ─── */
@media (max-width: 768px) {
  #siteFooter { display: none !important; }
  body { padding-bottom: 0; }
}

/* ─── SHARED ANIMATIONS ─── */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes blink  { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ─── SHARED BODY PRIMITIVES — card / meter / label ───────────────────────
   Reusable building blocks for the panel-and-meter look (rounded cream-alt
   cards, thin colored progress bars, small-caps section labels). Additive
   only — nothing here is wired into the header/nav chrome above, and no
   existing page class is renamed, so opting a page's own components into
   these is a per-page, low-risk choice. */
.ayu-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  /* no drop shadow at rest, per guidelines/radii-shadows */
}
.ayu-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-tertiary);
}
.ayu-metric {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-primary);
}
.ayu-meter {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  overflow: hidden;
}
.ayu-meter-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  transition: width .3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS — idiomatic CSS-class ports of designs/Ayu Design System/
   components/*/*.jsx (this codebase is server-rendered HTML/CSS/vanilla JS,
   not React, so each reference component becomes a class + modifier classes
   rather than a copy-pasted .jsx file). Reference source noted per group.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Button (components/core/Button.jsx) ───────────────────────────────── */
.ayu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.ayu-btn:active            { transform: scale(0.97); }
.ayu-btn:disabled,
.ayu-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ayu-btn:hover              { filter: brightness(0.94); }

.ayu-btn-sm { padding: 8px 16px;  font-size: var(--text-small); }
.ayu-btn-md { padding: 12px 20px; font-size: var(--text-body); }
.ayu-btn-lg { padding: 16px 28px; font-size: var(--text-h6); }

.ayu-btn-primary   { background: var(--accent-primary); color: var(--white); border-color: var(--accent-primary); }
.ayu-btn-secondary { background: var(--bg-surface); color: var(--ink-primary); border-color: var(--border-strong); }
.ayu-btn-ghost     { background: transparent; color: var(--ink-primary); border-color: transparent; }
.ayu-btn-inverse   { background: var(--forest-floor); color: var(--ink-on-inverse); border-color: var(--forest-floor); }

/* ─── IconButton (components/core/IconButton.jsx) ────────────────────────── */
.ayu-icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-standard);
  background: var(--bg-surface); color: var(--ink-primary); border: 1px solid var(--border-subtle);
}
.ayu-icon-btn:hover { filter: brightness(0.94); }
.ayu-icon-btn-primary { background: var(--accent-primary); color: var(--white); border: none; }
.ayu-icon-btn-sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }

/* ─── Badge (components/core/Badge.jsx) ──────────────────────────────────── */
.ayu-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
}
.ayu-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ayu-badge-dot-positive { background: var(--status-positive); }
.ayu-badge-dot-caution  { background: var(--status-caution); }
.ayu-badge-dot-critical { background: var(--status-critical); }
.ayu-badge-dot-neutral  { background: var(--status-neutral); }
.ayu-badge-dot-accent   { background: var(--accent-primary); }

/* ─── StatCard (components/data-viz/StatCard.jsx) ────────────────────────── */
.ayu-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ayu-stat-card-hd { display: flex; justify-content: space-between; align-items: center; }
.ayu-stat-card-title { font-family: var(--font-ui); font-size: var(--text-small); color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.ayu-stat-card-trend { font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.ayu-stat-card-trend-positive { color: var(--status-positive); }
.ayu-stat-card-trend-critical { color: var(--status-critical); }
.ayu-stat-card-value-row { display: flex; align-items: baseline; gap: 8px; }
.ayu-stat-card-value { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-bold); color: var(--ink-primary); line-height: 1; }
.ayu-stat-card-unit  { font-family: var(--font-mono); font-size: var(--text-small); color: var(--ink-tertiary); }

/* ─── ProgressBar (components/data-viz/ProgressBar.jsx) ──────────────────── */
.ayu-progress-label-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--font-ui); font-size: var(--text-small); color: var(--ink-secondary); }
.ayu-progress-value { font-family: var(--font-mono); color: var(--ink-primary); }
.ayu-progress-track { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--bg-surface-alt); overflow: hidden; }
.ayu-progress-track-sm { height: 6px; }
.ayu-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--vivid-green); transition: width var(--duration-normal) var(--ease-standard); }

/* ─── SphereRow (components/data-viz/SphereRow.jsx) ──────────────────────── */
.ayu-sphere-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.ayu-sphere-row-left { display: flex; align-items: center; gap: 10px; }
.ayu-sphere-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ayu-sphere-name { font-family: var(--font-body); font-size: var(--text-body); color: var(--ink-primary); }
.ayu-sphere-score { font-family: var(--font-mono); font-size: var(--text-body); color: var(--ink-secondary); }

/* ─── Composer (components/forms/Composer.jsx) ───────────────────────────── */
.ayu-composer {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 10px 10px 10px 22px;
  box-shadow: var(--shadow-sm);
}
.ayu-composer-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-body); color: var(--ink-primary);
}
.ayu-composer-send {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--accent-primary); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; flex-shrink: 0;
  transition: filter var(--duration-fast) var(--ease-standard);
}
.ayu-composer-send:hover { filter: brightness(0.94); }

/* ─── PromptCard (components/forms/PromptCard.jsx) ───────────────────────── */
.ayu-prompt-card {
  text-align: left;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.ayu-prompt-card:hover { border-color: var(--border-strong); }
.ayu-prompt-card-sphere-row { display: flex; align-items: center; gap: 8px; }
.ayu-prompt-card-sphere-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ayu-prompt-card-sphere-label { font-family: var(--font-ui); font-size: var(--text-micro); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.ayu-prompt-card-question { font-size: var(--text-h6); color: var(--ink-primary); line-height: var(--leading-snug); }