/* build:1105e80 */
/* Header styles — extracted from header.js for CSP compliance (S239) */

#eco-header-bar {
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:#080D14; /* Always dark — ECO brand header. S361: was var(--color-bg) which became sage/cream on light themes, making white nav text invisible */
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-accent-c-tint);
  display:flex;align-items:center;
  padding:0 24px;gap:0;
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}
body { padding-top:calc(60px + env(safe-area-inset-top)) !important; }
.eco-hdr-logo {
  display:flex;align-items:center;gap:10px;
  text-decoration:none;flex-shrink:0;margin-right:24px;
}
.eco-hdr-logo img { height:44px;width:auto;border-radius:3px; }
.eco-hdr-wm {
  font-family:'Arial Black',Arial,sans-serif;
  font-weight:900;font-size:26px;letter-spacing:.06em;line-height:1;
}
/* ECO brand logo: E=blue, C=green, O=white — always on dark header, never theme-variable */
.eco-hdr-wm .e{color:#00AAFF !important}.eco-hdr-wm .c{color:#00CC44 !important}.eco-hdr-wm .o{color:#FFFFFF !important}
/* eco-abbr chip inside header logo — replaces eco-hdr-wm */
/* Header bg is #080D14 — black chip invisible without border. Lock to brand hex. */
.eco-hdr-logo .eco-abbr {
  font-size:22px;
  border:1px solid #00AAFF;
}
/* Force brand hex inside header — theme tokens go dark on light themes */
.eco-hdr-logo .eco-abbr .eco-e { color: #00AAFF !important; }
.eco-hdr-logo .eco-abbr .eco-c { color: #00CC44 !important; }
.eco-hdr-logo .eco-abbr .eco-o { color: #FFFFFF !important; }
.eco-hdr-sub {
  font-family:'Arial Black',Arial,sans-serif;
  font-size:12px;font-weight:900;letter-spacing:.13em;line-height:1.4;
  white-space:nowrap;margin-top:3px;display:inline-block;
  background:#000;padding:1px 5px;border-radius:3px;
  border:1px solid rgba(255,255,255,0.18);
}
.eco-hdr-sub .eco-sub-e{color:#00AAFF !important}.eco-hdr-sub .eco-sub-c{color:#00CC44 !important}.eco-hdr-sub .eco-sub-o{color:#FFFFFF !important}
.eco-hdr-links { display:flex;align-items:center;gap:6px;flex:1; }
.eco-hdr-links a {
  color:rgba(255,255,255,0.65);font-size:13px;font-weight:500;
  text-decoration:none;padding:4px 10px;border-radius:6px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.eco-hdr-links a:hover { color:var(--color-text);background:rgba(255,255,255,0.06); }
.eco-hdr-links a.active { color:var(--color-accent-c); }
.eco-hdr-right {
  display:flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0;
}
/* SV quick-launch button — sits between triangle and avatar on user.html */
.eco-hdr-sv-btn {
  background:transparent;border:1px solid rgba(255,255,255,0.40);border-radius:6px;
  padding:3px 9px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.04em;
  line-height:1.4;color:rgba(255,255,255,0.85);font-family:var(--font-body);
  flex-shrink:0;transition:background .15s,color .15s;
}
.eco-hdr-sv-btn:hover { background:rgba(255,255,255,0.12);color:#ffffff; }
[data-theme="grove"] .eco-hdr-sv-btn,
[data-theme="parchment"] .eco-hdr-sv-btn { border-color:rgba(0,0,0,0.25);color:rgba(0,0,0,0.70); }
[data-theme="grove"] .eco-hdr-sv-btn:hover,
[data-theme="parchment"] .eco-hdr-sv-btn:hover { background:rgba(0,0,0,0.08);color:rgba(0,0,0,0.90); }
/* Triangle button — always visible */
.eco-hdr-tri {
  cursor:pointer;padding:6px;display:flex;
  align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  border-radius:6px;transition:background .15s;
}
.eco-hdr-tri:hover { background:rgba(255,255,255,0.06); }
.eco-tri-svg { display:block;width:26px;height:24px;overflow:visible; }
.eco-hdr-tri-menu {
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--color-surface2);border:1px solid rgba(0,170,255,0.18);
  border-radius:10px;overflow:hidden;min-width:190px;
  box-shadow:0 12px 40px rgba(0,0,0,0.8);display:none;z-index:9999;
}
.eco-hdr-tri-menu.open { display:block; }
.eco-hdr-tri-menu a {
  display:block;padding:6px 14px;
  color:rgba(255,255,255,0.85);font-size:13px;font-weight:700;
  text-decoration:none;transition:background .12s;
}
.eco-hdr-tri-menu a:hover { background:rgba(0,170,255,0.1);color:var(--color-text); }
.tri-label {
  display:block;padding:6px 14px 4px;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,0.85);text-transform:uppercase;
}
.eco-hdr-tri-menu hr { border:none;border-top:1px solid rgba(255,255,255,0.07);margin:4px 0; }
/* Accordion sections */
.tri-section { }
.tri-section-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px 3px;cursor:pointer;user-select:none;
  transition:background .15s;position:relative;z-index:100;
}
.tri-section-header:hover { background:rgba(0,170,255,0.08); }
.tri-section-header::before {
  content:attr(data-desc);
  position:absolute;right:100%;top:50%;transform:translateY(-50%) translateX(-12px);
  background:rgba(0,170,255,0.15);border-left:3px solid var(--color-accent-c);
  padding:8px 12px;border-radius:4px;
  font-size:12px;color:rgba(255,255,255,0.7);
  width:200px;white-space:normal;line-height:1.3;
  pointer-events:none;z-index:10000;
  opacity:0;transition:opacity .2s;
  display:none;
  white-space:pre-wrap;
}
.tri-section-header:hover::before {
  display:block;opacity:1;
}
.tri-arrow {
  display:inline-block;font-size:12px;color:var(--color-text-dim);
  transition:transform .2s;margin-left:8px; /* S320 */
}
.tri-section-items { max-height:0;overflow:hidden;transition:max-height .3s ease; }
.tri-section-items.open { max-height:500px; }
.tri-action-btn {
  display:block;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;
  padding:6px 16px;font-size:13px;font-weight:700;
  color:rgba(255,255,255,0.85);
  font-family:Arial,Helvetica,sans-serif;
  transition:background .12s;
}
.tri-action-btn:hover { background:rgba(0,170,255,0.1);color:var(--color-text); }
/* Sign In pill */
.eco-hdr-signin {
  color:var(--color-frame-text);font-size:13px;font-weight:600; /* S449: accent-c dark on grove/parchment header */
  border:1.5px solid var(--color-frame-text);border-radius:20px;
  padding:5px 16px;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s;flex-shrink:0;
}
.eco-hdr-signin:hover { background:var(--color-accent-c);color:var(--color-bg); }
/* Avatar */
/* ── LIGHT THEME OVERRIDES ── */
/* Header bar: ALWAYS dark — ECO three-colour logo requires dark bg to be legible */
/* (Removed light-bg override — header never follows page theme bg) */

/* Dropdown menus on light themes: use theme surface/text colours */
[data-theme="grove"] .eco-hdr-tri-menu,
[data-theme="parchment"] .eco-hdr-tri-menu {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-text) 15%, transparent);
}
[data-theme="grove"] .eco-hdr-tri-menu a,
[data-theme="parchment"] .eco-hdr-tri-menu a { color: var(--color-text); font-weight:700; }
[data-theme="grove"] .eco-hdr-tri-menu a:hover,
[data-theme="parchment"] .eco-hdr-tri-menu a:hover { background: var(--color-border); color: var(--color-text); }
[data-theme="grove"] .tri-label,
[data-theme="parchment"] .tri-label { color: var(--color-text-dim); font-size:13px; }
[data-theme="grove"] .eco-hdr-tri-menu hr,
[data-theme="parchment"] .eco-hdr-tri-menu hr { border-top-color: var(--color-border); }
/* Header bar is always dark (#080D14) — lock adaptive tokens back to light on light themes */
/* S450: per-theme overrides removed — brand logo always uses #00AAFF/#00CC44/#FFFFFF on dark header */
/* Header sub-label boxed wordmark styling consolidated above (single .eco-hdr-sub block). */
[data-theme="grove"] .eco-hdr-links a,
[data-theme="parchment"] .eco-hdr-links a { color: rgba(255,255,255,0.65); }
[data-theme="grove"] .eco-hdr-links a:hover,
[data-theme="parchment"] .eco-hdr-links a:hover { color: #E8F4F0; background: rgba(255,255,255,0.08); }
/* My Circle pill has color:!important in base rule — need !important here to beat it */
[data-theme="grove"] .eco-hdr-home-pill,
[data-theme="parchment"] .eco-hdr-home-pill { color: var(--color-accent-c) !important; }
[data-theme="grove"] .eco-hdr-signin,
[data-theme="parchment"] .eco-hdr-signin { color: var(--color-frame-text) !important /* S449: accent-c dark on header */; border-color: var(--color-frame-text) !important; }
[data-theme="grove"] .eco-hdr-user-menu a,
[data-theme="grove"] .eco-hdr-user-menu button,
[data-theme="parchment"] .eco-hdr-user-menu a,
[data-theme="parchment"] .eco-hdr-user-menu button { color: var(--color-text); }
[data-theme="grove"] .eco-hdr-user-menu .um-name,
[data-theme="parchment"] .eco-hdr-user-menu .um-name { color: var(--color-text-dim); }
[data-theme="grove"] .tri-arrow,
[data-theme="parchment"] .tri-arrow { color: var(--color-text-dim); }
/* ── END LIGHT THEME OVERRIDES ── */

/* ── FOOTER DARK LOCK — mirrors header brand frame ────────────────────────── */
/* Header and footer are ECO's brand frame — ALWAYS dark on EVERY page and theme.
   Targets EVERY <footer> universally (not per-class) so no page can slip through,
   regardless of which footer markup/classes it uses. Content between header and
   footer follows the user's chosen theme; the frame does not. */
footer,
#eco-footer {
  background: #080D14 !important;
  border-top-color: var(--color-accent-c-tint) !important;
  color: rgba(255,255,255,0.85) !important;       /* WCAG AAA on #080D14: ~13:1 */
}
/* Plain text containers inside footers → readable light */
footer .ft,
footer .fc2,
footer p,
footer div,
footer span,
footer .credit { color: rgba(255,255,255,0.85) !important; }
/* Tricolor brand spans → bright void values (override the readable default above) */
footer .fe, footer .eco-sub-e, #eco-footer .eco-sub-e { color: #00AAFF !important; }
footer .fc, footer .eco-sub-c, #eco-footer .eco-sub-c { color: #00CC44 !important; }
footer .eco-sub-o, #eco-footer .eco-sub-o { color: #FFFFFF !important; }
/* eco-brand in footer: override the footer span blanket rule + add border for visibility */
footer .eco-brand, #eco-footer .eco-brand {
  background: #000 !important;
  border: 1px solid #00AAFF !important;
}
footer .eco-brand .eco-brand-eternal, #eco-footer .eco-brand .eco-brand-eternal { color: #00AAFF !important; }
footer .eco-brand .eco-brand-current, #eco-footer .eco-brand .eco-brand-current { color: #00CC44 !important; }
footer .eco-brand .eco-brand-online, #eco-footer .eco-brand .eco-brand-online { color: #FFFFFF !important; }
/* S449 Phase B: theme.css [data-theme=grove] footer a overrides footer .ft
   Restore always-dark footer text with higher specificity for light themes */
[data-theme="grove"] footer .ft,
[data-theme="parchment"] footer .ft,
[data-theme="grove"] footer .fc2,
[data-theme="parchment"] footer .fc2 { color: rgba(255,255,255,0.85) !important; }

/* eco-brand footer colors: see hardcoded block below */
/* eco-wordmark inline inside footer */
footer .eco-wordmark > span:nth-child(1), #eco-footer .eco-wordmark > span:nth-child(1) { color: var(--brand-blue) !important; }
footer .eco-wordmark > span:nth-child(2), #eco-footer .eco-wordmark > span:nth-child(2) { color: var(--brand-green) !important; }
footer .eco-wordmark > span:nth-child(3), #eco-footer .eco-wordmark > span:nth-child(3) { color: var(--brand-white) !important; }
/* Footer links → blue, readable */
footer a,
footer .fl a,
#eco-footer a,
#eco-footer .eco-footer-link { color: rgba(255,255,255,0.75) !important; } /* Footer always dark (#080D14) — use opacity-white for links */
footer a:hover,
#eco-footer a:hover,
#eco-footer .eco-footer-link:hover { color: var(--color-accent-c) !important; }
/* credit span dimmed */
footer .credit { color: rgba(255,255,255,0.45) !important; }
/* ── END FOOTER DARK LOCK ──────────────────────────────────────────────────── */
.eco-hdr-avatar {
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-accent-c),var(--color-accent-g));
  display:flex;align-items:center;justify-content:center;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;
  font-size:12px;color:var(--color-bg);cursor:pointer;
  position:relative;user-select:none;flex-shrink:0;
  overflow:hidden;
}
/* Wrapper needs overflow:visible so absolute-positioned dropdown can extend below.
   Photo stays circular via its own border-radius:50% on .eco-avatar-photo. */
.eco-hdr-avatar.eco-avatar-wrap { overflow:visible; }
.eco-hdr-avatar:hover { opacity:.85; }
.eco-avatar-photo {
  width:100%;height:100%;
  object-fit:cover;border-radius:50%;
  display:block;
}
.eco-hdr-user-menu {
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--color-surface2);border:1px solid rgba(0,170,255,0.18);
  border-radius:10px;overflow:hidden;min-width:160px;
  box-shadow:0 12px 40px rgba(0,0,0,0.8);display:none;z-index:9999;
}
.eco-hdr-user-menu.open { display:block; }
.eco-hdr-user-menu a, .eco-hdr-user-menu button {
  display:block;width:100%;padding:6px 14px;
  color:rgba(255,255,255,0.85);font-size:13px;font-weight:700;
  font-family:Arial,Helvetica,sans-serif;text-align:left;
  background:none;border:none;cursor:pointer;
  box-sizing:border-box;text-decoration:none;transition:background .12s;
}
.eco-hdr-user-menu a:hover,.eco-hdr-user-menu button:hover {
  background:rgba(0,170,255,0.1);color:var(--color-text);
}
.um-name {
  display:block;padding:6px 14px 3px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--color-text-dim);text-transform:uppercase; /* S320 */
}
.eco-hdr-user-menu hr { border:none;border-top:1px solid rgba(255,255,255,0.07);margin:4px 0; }
.eco-hdr-so { color:rgba(255,80,80,0.85) !important; }
.eco-hdr-so:hover { color:var(--color-accent-r) !important;background:rgba(255,60,60,0.08) !important; }
/* Back button */
.eco-hdr-back {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,0.65); /* S449 Phase B: always-dark header—var(--color-text-dim) on grove=1.44:1 FAIL */;
  background:none; border:none; cursor:pointer;
  padding:4px 10px; border-radius:6px;
  letter-spacing:.02em; white-space:nowrap;
  transition:color .15s, background .15s;
  flex-shrink:0;
}
/* S450: header always dark — hover must stay light, never pull theme body colors */
.eco-hdr-back:hover { color:#FFFFFF !important; background:rgba(255,255,255,0.10) !important; }
/* Home pill */
.eco-hdr-home-pill,
.eco-hdr-links .eco-hdr-home-pill {
  background:var(--color-accent-c-tint) !important;
  border:1.5px solid rgba(0,170,255,0.35) !important;
  color:var(--color-accent-c) !important;
  font-family:'Arial Black',Arial,sans-serif;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  padding:5px 16px;
  border-radius:20px !important;
  padding:5px 16px !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center;
  transition:background .15s,border-color .15s;
}
.eco-hdr-home-pill:hover { background:rgba(0,170,255,0.22) !important; border-color:rgba(0,170,255,.6) !important; }
/* EternalCurrent.Online three-color — Eternal=white, Current=green, .Online=white */
.eco-sub-e { color: #00AAFF; }
.eco-sub-c { color: #00CC44; }
.eco-sub-o { color: #FFFFFF; }

/* ── Mobile ≤640px ─────────────────────────────────────────────────── */
@media(max-width:640px){
  #eco-header-bar{padding:0 12px;gap:0;}
  .eco-hdr-logo{margin-right:8px;}
  .eco-hdr-logo img{height:32px;}
  .eco-hdr-wm{font-size:18px;}
  .eco-hdr-logo .eco-abbr{font-size:18px;}
  .eco-hdr-sub{display:none;}
  .eco-hdr-links{display:none;}
  .eco-hdr-right{gap:6px;flex-shrink:0;overflow:visible;display:flex !important;align-items:center;}
  .eco-hdr-signin{padding:5px 10px;font-size:12px;display:inline-flex !important;}
  /* Avatar — always visible on mobile */
  .eco-hdr-avatar{
    width:34px !important;height:34px !important;
    display:flex !important;opacity:1 !important;visibility:visible !important;
    background:linear-gradient(135deg,var(--color-accent-c),var(--color-accent-g)) !important;
    color:var(--color-bg) !important;
  }
  /* Dropdowns — use --color-surface2 (theme-aware) on mobile */
  .eco-hdr-tri-menu{
    position:fixed !important;top:60px !important;right:12px !important;
    left:auto;min-width:200px;max-width:calc(100vw - 24px);
    max-height:calc(100vh - 72px);overflow-y:auto;
    background:var(--color-surface2) !important;border-color:rgba(0,170,255,0.25) !important;
  }
  .eco-hdr-user-menu{
    position:fixed !important;top:60px !important;right:12px !important;
    left:auto;min-width:180px;max-width:calc(100vw - 24px);
    background:var(--color-surface2) !important;border-color:rgba(0,170,255,0.25) !important;
  }
  /* Dropdown text — theme-aware. The mobile dropdown bg is --color-surface2,
     which is LIGHT on grove/parchment, so text must use --color-text (dark on
     light themes, light on dark themes). S365: hardcoded white was invisible
     on the light themes on mobile. */
  .eco-hdr-tri-menu a,
  .eco-hdr-user-menu a,
  .eco-hdr-user-menu button{
    padding:7px 14px !important;font-size:14px !important;
    color:var(--color-text) !important;
  }
  .eco-hdr-tri-menu a:hover,
  .eco-hdr-user-menu a:hover,
  .eco-hdr-user-menu button:hover{
    color:var(--color-text) !important;background:var(--color-accent-c-tint) !important;
  }
  .tri-label,.um-name{color:rgba(255,255,255,0.70);} /* S320: removed !important */
  .eco-hdr-so{color:rgba(255,100,100,0.9) !important;}
}
/* ── Mobile ≤400px ─────────────────────────────────────────────────── */
@media(max-width:400px){
  .eco-hdr-wm{font-size:16px;}
  .eco-hdr-logo .eco-abbr{font-size:16px;}
  .eco-hdr-logo img{height:28px;}
}
.eco-avatar-img { display:block; }
.eco-avatar-img.eco-broken { display:none; }

/* ── Theme Picker FAB ──────────────────────────────────────── */
.eco-theme-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: var(--color-accent-c, var(--color-accent-c));
  color: var(--color-frame-text); /* S449: accent-c-fg=#000 on body #080D14 via bgOf = 1.03:1 fail */
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 8900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.eco-theme-fab:hover  { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.eco-theme-fab:active { transform: scale(0.94); }

.eco-theme-menu {
  position: fixed;
  bottom: 72px;
  left: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 6px;
  z-index: 8901;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
}
.eco-theme-menu--hidden { display: none !important; }
.eco-theme-opt {
  background: none;
  border: none;
  color: #1a1a1a;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s;
}
.eco-theme-opt:hover { background: rgba(0,0,0,0.07); }

/* SV back button — shown on viz pages for elder_mode users */
#eco-sv-back-btn {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9000; height: 44px; padding: 0 24px; border-radius: 22px;
  background: #163373; color: #FFFFFF; border: none;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* S474 eco-brand: consolidated above */
/* Tagline .fe/.fc — solid black background pill for tri-color text */
footer .ft .fe, footer .ft .fc, footer .ft .fo,
#eco-footer .ft .fe, #eco-footer .ft .fc { display: inline; }

/* Belt-and-suspenders: force brand hex for eco-abbr regardless of theme/context */
[data-theme] .eco-abbr .eco-e { color: #00AAFF !important; }
[data-theme] .eco-abbr .eco-c { color: #00CC44 !important; }
[data-theme] .eco-abbr .eco-o { color: #FFFFFF !important; }
[data-theme] .eco-brand .eco-brand-eternal { color: #00AAFF !important; }
[data-theme] .eco-brand .eco-brand-current { color: #00CC44 !important; }
[data-theme] .eco-brand .eco-brand-online  { color: #FFFFFF !important; }