/* ═══════════════════════════════════════════════════════════════════
   PYTHIC COSMOS — HILI LIGHT REFRESH
   Brings Pythic Cosmos onto the HILI Design System: paper + ink, a
   single forest accent, Atkinson Hyperlegible, hairline borders, flat
   surfaces, no italics, no gradients, no glow. Load LAST.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  /* paper / surface */
  --paper: #FAFAF7; --paper-2: #F4F4F0; --paper-3: #ECEBE5; --surface: #FFFFFF;
  /* ink */
  --ink: #0F0F11; --ink-2: #52525B; --ink-3: #8E8E93; --ink-4: #B5B5AE;
  /* lines */
  --line: #E5E5E0; --line-2: #C9C9C2;
  /* forest accent */
  --accent: #1A3A2E; --accent-2: #2D4A3E; --accent-3: #3F6E4F;
  --accent-soft: #E8EFE9; --accent-softer: #F1F5F2;

  /* remap every legacy variable the app uses onto the HILI system */
  --gold: var(--accent); --gold-dim: var(--accent-3); --gold-bright: var(--accent-2);
  --bg-deep: var(--paper); --bg-mid: var(--paper-2);
  --bg-card: var(--surface); --bg-card-solid: var(--surface);
  --border: var(--line); --border-dim: var(--line);
  --text: var(--ink); --text-dim: var(--ink-2); --text-muted: var(--ink-3);
  --text-faint: var(--ink-3); --text-ghost: var(--ink-4); --text-deepghost: var(--ink-4);
  --accent-red: var(--accent);
  /* element colours, muted to one family so the wheel stops looking neon */
  --fire: var(--accent-3); --earth: var(--accent); --air: var(--accent-3); --water: var(--accent-2);

  --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: 'Atkinson Hyperlegible', ui-monospace, monospace;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(15,15,17,0.06), 0 1px 2px rgba(15,15,17,0.04);
  --shadow-md: 0 4px 12px rgba(15,15,17,0.06), 0 1px 3px rgba(15,15,17,0.04);
}

html { font-size: 16px; background: var(--paper) !important; }
body {
  font-family: var(--font-sans) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* no italics anywhere */
em, i, cite, var, dfn, address, .report-body em, .report-body .rpt-text em { font-style: normal !important; }

/* strip the dark-era effects */
.card, .header, .controls, .pdf-product-card, .gumroad-config, .gumroad-links,
#view-synastry .syn-person-card { backdrop-filter: none !important; }
.planet-symbol { filter: none !important; }

/* ── Header ── */
.header {
  background: rgba(250,250,247,0.85) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 22px 36px 0 !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px) !important;
}
.brand h1 {
  font-family: var(--font-sans) !important; font-weight: 700 !important;
  font-size: 1.3rem !important; letter-spacing: -0.02em !important;
  text-transform: none !important; color: var(--ink) !important;
}
.brand-sub {
  font-family: var(--font-sans) !important; text-transform: uppercase !important;
  letter-spacing: 0.14em !important; color: var(--ink-3) !important;
  font-size: 0.7rem !important; font-weight: 700 !important;
}

/* ── Nav ── */
.nav { gap: 2px !important; margin-top: 16px !important; }
.nav-btn {
  font-family: var(--font-sans) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 0.82rem !important; font-weight: 700 !important;
  border: none !important; border-radius: 7px 7px 0 0 !important;
  color: var(--ink-3) !important; padding: 9px 16px !important; background: transparent !important;
}
.nav-btn:hover { color: var(--ink) !important; background: var(--paper-2) !important; }
.nav-btn.active { background: transparent !important; color: var(--accent) !important; }
.nav-btn.active::after { background: var(--accent) !important; opacity: 1 !important; height: 2px !important; }
.nav-admin::before { background: var(--accent) !important; }

/* ── Control bar ── */
.controls { background: var(--paper-2) !important; border-bottom: 1px solid var(--line) !important; padding: 12px 36px !important; }
.ctrl-input { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; border-radius: 8px !important; font-family: var(--font-sans) !important; }
.ctrl-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.ctrl-btn {
  background: var(--surface) !important; border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important; border-radius: 8px !important; font-family: var(--font-sans) !important;
  letter-spacing: 0 !important; font-size: 0.76rem !important; font-weight: 700 !important;
}
.ctrl-btn:hover { border-color: var(--accent) !important; color: var(--ink) !important; background: var(--accent-soft) !important; }
.ctrl-btn.today { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; letter-spacing: 0 !important; }
.ctrl-btn.today:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.moon-phase-indicator { font-family: var(--font-sans) !important; color: var(--ink-3) !important; letter-spacing: 0 !important; }

/* hide the now-pointless theme switcher; one look only */
.theme-switcher { display: none !important; }

/* ── Content + cards ── */
.content { padding: 28px 36px !important; max-width: 1280px; margin: 0 auto; }
.card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; padding: 24px !important;
}
.card-title {
  font-family: var(--font-sans) !important; text-transform: uppercase !important;
  letter-spacing: 0.14em !important; font-size: 0.72rem !important; font-weight: 700 !important; color: var(--ink-3) !important;
}

/* ── Rows / tables ── */
.planet-name { font-family: var(--font-sans) !important; font-weight: 700 !important; }
.planet-sign-name, .planet-degree, .planet-category, .planet-speed,
.aspect-name, .aspect-orb, .aspect-applying, .aspect-separating { font-family: var(--font-sans) !important; }
.planet-row:hover, .aspect-row:hover, .eph-table tbody tr:hover { background: var(--paper-2) !important; }
.aspect-row { background: transparent !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
.planet-rx { font-family: var(--font-sans) !important; background: var(--accent-soft) !important; color: var(--accent) !important; }
.eph-table, .aspect-grid-table { font-family: var(--font-sans) !important; }
.eph-table th, .eph-table th:first-child, .eph-table td:first-child { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
.eph-table td { border-bottom: 1px solid var(--line) !important; }
.eph-btn { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; font-family: var(--font-sans) !important; border-radius: 8px !important; }
.eph-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ── Buttons ── */
.pdf-gen-btn, .copy-btn, .rpt-tab, .fmt-tab, .ig-fmt, .copy-link-btn {
  font-family: var(--font-sans) !important; letter-spacing: 0 !important; font-weight: 700 !important;
  background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important;
}
.pdf-gen-btn { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; border-radius: 8px !important; }
.pdf-gen-btn:hover { background: var(--accent-2) !important; transform: none !important; box-shadow: var(--shadow-md) !important; }
.copy-btn:hover, .rpt-tab:hover, .fmt-tab:hover, .ig-fmt:hover, .copy-link-btn:hover { background: var(--accent-soft) !important; color: var(--ink) !important; border-color: var(--accent) !important; }
.rpt-tab.active, .fmt-tab.active, .ig-fmt.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.copy-btn.copied { background: var(--accent-3) !important; border-color: var(--accent-3) !important; color: #fff !important; }

/* ── Report + shop ── */
.report-body, .report-body .rpt-text { font-family: var(--font-sans) !important; color: var(--ink) !important; font-size: 1rem !important; line-height: 1.65 !important; }
.report-body .rpt-heading { font-family: var(--font-sans) !important; color: var(--accent) !important; }
.config-title, .pdf-product-title { font-family: var(--font-sans) !important; color: var(--ink) !important; }
.pdf-product-card { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; }
.pdf-product-card:hover { border-color: var(--line-2) !important; box-shadow: var(--shadow-md) !important; }
.config-row input, .link-url { background: var(--paper-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; font-family: var(--font-sans) !important; }
.wf-num { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── Footer ── */
.footer { border-top: 1px solid var(--line) !important; }
.footer-tech { font-family: var(--font-sans) !important; color: var(--ink-4) !important; letter-spacing: 0 !important; }
.footer-pythia { color: var(--ink-3) !important; font-style: normal !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper) !important; }
::-webkit-scrollbar-thumb { background: var(--line-2) !important; border-radius: 999px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4) !important; }

/* ── Writing prompts / weather ── */
.writing-prompt { background: var(--paper-2) !important; }
.writing-prompt strong { color: var(--accent) !important; }
.weather-theme.high { background: var(--accent-softer) !important; }
.weather-theme.medium { background: var(--paper-2) !important; }
.weather-text { font-family: var(--font-sans) !important; }

/* ═══ SYNASTRY PANEL ═══ */
#view-synastry .syn-intro { color: var(--ink-2) !important; }
#view-synastry .syn-person-card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important;
}
#view-synastry .syn-person-card:first-child,
#view-synastry .syn-person-card:last-child { border-color: var(--line) !important; }
#view-synastry .syn-person-label { color: var(--accent) !important; }
#view-synastry .syn-person-card:last-child .syn-person-label { color: var(--accent-3) !important; }
#view-synastry .syn-field label { color: var(--ink-3) !important; }
#view-synastry .syn-field input,
#view-synastry .syn-field select {
  background: var(--surface) !important; border: 1px solid var(--line-2) !important;
  color: var(--ink) !important; font-family: var(--font-sans) !important; border-radius: 8px !important;
}
#view-synastry .syn-field input:focus,
#view-synastry .syn-field select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
#view-synastry .syn-field input::placeholder { color: var(--ink-4) !important; }
#view-synastry .syn-loc-info { color: var(--ink-3) !important; }
#view-synastry .syn-city-results { background: var(--surface) !important; border: 1px solid var(--line-2) !important; }
#view-synastry .syn-city-option { color: var(--ink-2) !important; }
#view-synastry .syn-city-option:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
#view-synastry .syn-generate-btn {
  background: var(--accent) !important; border: 1px solid var(--accent) !important;
  color: #fff !important; letter-spacing: 0 !important; font-weight: 700 !important;
}
#view-synastry .syn-generate-btn:hover { background: var(--accent-2) !important; box-shadow: var(--shadow-md) !important; }
#view-synastry .syn-status { color: var(--ink-3) !important; }
#view-synastry .syn-results-title, #view-synastry .syn-section-title { color: var(--accent) !important; }
#view-synastry .syn-results-subtitle, #view-synastry .syn-aspect-meta, #view-synastry .syn-aspect-interp { color: var(--ink-2) !important; }
#view-synastry .syn-profile-stat { background: var(--paper-2) !important; border: 1px solid var(--line) !important; }
#view-synastry .syn-profile-stat-value { color: var(--accent) !important; }
#view-synastry .syn-element-card { background: var(--paper-2) !important; border: 1px solid var(--line) !important; }
#view-synastry .syn-tool-btn { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; }
#view-synastry .syn-tool-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
#view-synastry .syn-persp-btn { border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; }
#view-synastry .syn-persp-btn.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }

/* ═══ POWER DYNAMICS PANEL ═══ */
#pdSection .pd-title, #pdSection .pd-metric-head { color: var(--accent) !important; }
#pdSection .pd-sub, #pdSection .pd-line { color: var(--ink-2) !important; }
.pd-lock { background: var(--paper-2) !important; border: 1px solid var(--line-2) !important; }
.pd-lock-icon { color: var(--accent) !important; }
.pd-lock-head { color: var(--ink) !important; }
.pd-lock-body { color: var(--ink-2) !important; }
.pd-buy-btn, .pd-reveal-btn {
  background: var(--accent) !important; border: 1px solid var(--accent) !important; color: #fff !important;
}
.pd-buy-btn:hover, .pd-reveal-btn:hover { background: var(--accent-2) !important; box-shadow: var(--shadow-md) !important; }
.pd-key-row input { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; }
.pd-key-btn { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; }
.pd-key-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.pd-meter-track, .pd-bar { background: var(--paper-3) !important; }
.pd-meter-marker { background: var(--accent) !important; border-color: var(--surface) !important; }
.pd-bar-fill { background: var(--accent) !important; }
.pd-meter-ends .a { color: var(--accent) !important; }
.pd-meter-ends .b { color: var(--accent-3) !important; }
.pd-row .name { color: var(--ink) !important; }
.pd-pdf-btn { background: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; }
.pd-pdf-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ═══ DEPTH PANELS: catch hardcoded inline hexes ═══ */
/* Some depth markup hardcodes greens/teals inline. Pull headings and
   accents back to forest, neutralize stray colors. */
#depthContent [style*="color:#5abf8a"],
#depthContent [style*="color: #5abf8a"],
#depthContent [style*="color:#c4a060"],
#depthContent [style*="color:#8a7060"] { color: var(--accent) !important; }
#depthContent [style*="border-left"] { border-left-color: var(--accent) !important; }
#depthAspects [style*="border-left"] { border-left-color: var(--accent) !important; }
#depthContent [style*="background:rgba(255,255,255,0.03)"],
#depthContent [style*="background: rgba(255,255,255,0.03)"] { background: var(--paper-2) !important; }
.depth-tab { font-family: var(--font-sans) !important; border: 1px solid var(--line-2) !important; color: var(--ink-2) !important; border-radius: 8px !important; }
.depth-tab.active { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
#depthTitle { color: var(--ink-3) !important; }