/* eco-nav.css — the ecosystem-nav component, lab edition.
   Lifted from /mission's component (fleet-dash-backend dash.css) and
   re-skinned onto the lab tokens: same glass recipe (fill + tint +
   blur + shine), same spacing scale, same settle. Everything is
   eco-prefixed so it can land on any page without touching the
   page's own classes.
   The drawer and services list are built by js/eco-nav.js; services
   and their three-state dots render at runtime from
   https://mara.quest/status.json — the one probe source every
   surface reads. Nothing about the ecosystem is hardcoded here. */

/* section anchors land below the sticky header, not under it */
section[id] { scroll-margin-top: 68px; }

body.eco-nav-open { overflow: hidden; }

/* ---------- burger (lives in the page header, or the eco topbar) --- */
.eco-burger {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: var(--dim);
  background: none; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: color var(--dur-tap) var(--ease-swift), border-color var(--dur-tap) var(--ease-swift), transform var(--dur-tap) var(--ease-snap);
}
.eco-burger:hover { color: var(--white); border-color: var(--gold-dim); }
.eco-burger:active { transform: scale(.94); }

/* ---------- standalone topbar (pages with no header of their own) -- */
.eco-topbar {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--glass-fill);
  background-image: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.eco-topbar-inner {
  max-width: 1060px; margin: 0 auto; min-height: 56px;
  padding: var(--space-2) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.eco-wordmark { font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--white); white-space: nowrap; }

/* ---------- anchor strip (page sections, in the header) ------------ */
.eco-anchor-strip {
  flex: 1; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.eco-anchor-strip::-webkit-scrollbar { display: none; }
.eco-anchor-strip a {
  font-family: var(--mono); font-size: 11px; color: var(--dim); text-decoration: none;
  padding: var(--space-1) var(--space-2); border-radius: 6px; white-space: nowrap;
  transition: color var(--dur-tap) var(--ease-swift), background var(--dur-tap) var(--ease-swift);
}
.eco-anchor-strip a:hover { color: var(--white); background: color-mix(in srgb, var(--gold) 8%, transparent); }
@media (max-width: 900px) { .eco-anchor-strip { display: none; } }

/* ---------- scrim + drawer ------------------------------------------ */
.eco-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 4, .45);
  transition: opacity var(--dur-quick) var(--ease-soft);
}
.eco-scrim[hidden] { display: none; }
.eco-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
  width: min(320px, 88vw); overflow-y: auto;
  padding: var(--space-4);
  background-color: var(--glass-fill-strong);
  background-image: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), 0 12px 48px rgba(0, 0, 0, 0.6);
  border-right: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  transform: translateX(-106%);
  transition: transform var(--dur-standard) var(--ease-snap);
}
.eco-drawer.open { transform: translateX(0); }
.eco-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.eco-drawer-title { font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--white); }
.eco-drawer-group {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); margin: var(--space-4) 0 var(--space-2);
}
.eco-drawer-list { display: flex; flex-direction: column; }
.eco-drawer-link, .eco-svc {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--white); text-decoration: none; font-size: 13px;
  padding: var(--space-2); border-radius: var(--radius-sm);
  transition: background var(--dur-tap) var(--ease-swift);
}
.eco-drawer-link:hover, .eco-svc:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }

/* the way back: mission control is the hub every surface routes to */
.eco-mission {
  display: flex; align-items: baseline; gap: var(--space-2);
  color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: var(--radius-sm); margin-top: var(--space-2);
  transition: background var(--dur-tap) var(--ease-swift), border-color var(--dur-tap) var(--ease-swift);
}
.eco-mission:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); border-color: var(--gold); }
.eco-mission-note { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--dim); margin-left: auto; white-space: nowrap; }

/* ---------- service rows + three-state dots ------------------------- */
.eco-sdot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--dim); flex: none; }
.eco-sdot.up { background: var(--green); }
.eco-sdot.down { background: var(--red); }
.eco-sdot.disabled { background: transparent; border: 1px solid var(--dim); }
.eco-svc-name { font-weight: 600; white-space: nowrap; }
.eco-svc-host { font-family: var(--mono); font-size: 10px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-svc-here { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--gold); border: 1px solid var(--gold); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.eco-svc-state { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-left: auto; white-space: nowrap; }
.eco-loading { font-family: var(--mono); font-size: 11px; color: var(--dim); padding: var(--space-2); }
.eco-drawer-foot { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: var(--space-4); }

/* ---------- motion off: the drawer still comes when called, it just
     arrives — no slide, no settle. same rule as the command bar. ----- */
html.eco-no-motion .eco-drawer, html.eco-no-motion .eco-scrim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .eco-drawer, .eco-scrim { transition: none; }
}