/* ============================================================
   ezpztrader.com — EZPZ ecosystem list (partials/ecosystem.html,
   data in common/ecosystem.py). Used by both shells: the public header,
   drawer, footer and home section, and the app top bar's apps menu, so it
   lives outside the public shell CSS. ECOSYSTEM_REDESIGN.md §4, §8.1-§8.2.
   ============================================================ */

@layer shell {

.eco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* .eco-item sits inside .menu-panel in the header and the app, whose legacy
   link rules (nowrap, fixed min-height) are reset here. */
.eco-item {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-3);
  width: auto; min-height: 0;
  padding: var(--space-2); border-radius: var(--radius-md);
  color: var(--ink); font-size: inherit; text-decoration: none; white-space: normal;
}
.eco-item:hover { background: var(--sunken); color: var(--ink); }
.eco-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eco-icon {
  width: var(--space-8); height: var(--space-8); flex: none; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--sunken);
}
.eco-icon img { width: 100%; height: 100%; object-fit: cover; }
.eco-icon-self { background: var(--brand-soft); border-color: var(--border-brand); padding: 3px; }
.eco-icon-self img { object-fit: contain; }
.eco-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.eco-cat { font-size: var(--text-2xs); color: var(--ink-2); line-height: var(--leading-snug); }
.eco-name { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--ink); line-height: var(--leading-snug); white-space: nowrap; }
.eco-ext { font-weight: var(--weight-normal); color: var(--ink-3); font-size: var(--text-xs); }
.eco-line { font-size: var(--text-xs); color: var(--ink-2); line-height: var(--leading-snug); }
.eco-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: none; margin-left: auto; }
.eco-meta:empty { display: none; }
.eco-here {
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--ink);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); white-space: nowrap;
}
.eco-item.is-current { background: var(--brand-soft); }

/* menu variant (header): 2 columns, filled top to bottom in list order */
.eco-list--menu { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--space-3); }

/* drawer variant */
.eco-drawer .eco-list { padding: 0 0 var(--space-2); }
.eco-drawer .eco-item { align-items: center; min-height: var(--space-12); margin: 0 calc(var(--space-2) * -1); }

/* footer variant: plain links like the other footer columns; name, external
   arrow, then a small coloured dot and the status word in muted text
   (no pill box). Wraps the status under the name in narrow columns. */
.eco-list--footer { gap: var(--space-3); }
.eco-list--footer .eco-item {
  align-items: baseline; flex-wrap: wrap; gap: 2px var(--space-2);
  padding: 0; border-radius: var(--radius-xs);
  color: var(--ink-2); line-height: var(--leading-snug);
}
.eco-list--footer .eco-item:hover { background: transparent; color: var(--ink); }
.eco-list--footer .eco-item.is-current { background: transparent; color: var(--ink); }
.eco-list--footer .eco-text { flex: none; max-width: 100%; }
.eco-list--footer .eco-name { font-size: inherit; font-weight: var(--weight-normal); color: inherit; white-space: normal; }
.eco-list--footer .eco-meta { flex-direction: row; margin-left: 0; }
.eco-list--footer .product-status {
  padding: 0; border: 0;
  color: var(--ink-3);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal);
  letter-spacing: 0; text-transform: none;
}
.eco-list--footer .product-status::before { background: var(--product-status-c); }
@media (forced-colors: active) {
  .eco-list--footer .product-status::before { background: CanvasText; }
}

/* apps variant (in-app top bar switcher); no status pills */
.eco-apps .eco-apps-trigger svg { width: var(--space-4); height: var(--space-4); }
.eco-apps-panel { width: min(360px, calc(100vw - var(--space-6))); padding: var(--space-2); }
.eco-list--apps { grid-template-columns: 1fr 1fr; gap: 2px; }
.eco-apps-panel .eco-item { align-items: center; gap: var(--space-2); min-height: var(--space-12); }
.eco-apps-panel .eco-icon { width: var(--space-7); height: var(--space-7); }
.eco-apps-panel .eco-name { font-size: var(--text-sm); white-space: normal; }
.eco-apps-panel .eco-meta { position: absolute; top: var(--space-1); right: var(--space-1); }
.eco-apps-panel .eco-here { padding: 0 var(--space-1); }
.eco-apps-panel svg { color: inherit; }

/* cards variant (home section): hub + product cards */
.eco-cards-wrap { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: var(--space-10); align-items: center; }
.eco-list--cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.eco-list--cards .eco-item {
  height: 100%; padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
}
.eco-list--cards .eco-item:hover { border-color: var(--border-strong); background: var(--raised); }
.eco-list--cards .eco-icon { width: var(--space-10); height: var(--space-10); border-radius: var(--radius-md); }
.eco-list--cards .eco-name { font-size: var(--text-md); }
.eco-list--cards .eco-line { font-size: var(--text-sm); margin-top: 2px; }
.eco-list--cards .eco-item.is-current { border-color: var(--border-brand); background: var(--brand-soft); }
.eco-list--cards .eco-item.is-plain { background: transparent; border-style: dashed; }

.eco-hub { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto var(--space-9); container-type: inline-size; }
.eco-hub-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed var(--border-strong); }
.eco-hub-ring-2 { inset: 30%; border-style: solid; border-color: var(--border-brand); }
.eco-hub-node {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--surface);
  box-shadow: var(--shadow-1);
  transform: rotate(var(--a)) translateY(-38cqw) rotate(calc(var(--a) * -1));
}
.eco-hub-node img { width: 100%; height: 100%; object-fit: cover; }
.eco-hub-node.is-plain { opacity: .8; }
.eco-hub-center {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-brand);
  box-shadow: 0 0 0 var(--space-2) var(--brand-soft);
}
.eco-hub-center img { width: 56px; height: 56px; object-fit: contain; }
.eco-hub-caption {
  position: absolute; left: 50%; bottom: calc(var(--space-8) * -1); transform: translateX(-50%);
  white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2);
}
@media (max-width: 900px) {
  .eco-cards-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 640px) {
  .eco-hub { max-width: 280px; }
  .eco-hub-node { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .eco-hub-center { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .eco-hub-center img { width: 44px; height: 44px; }
  .eco-list--cards { grid-template-columns: 1fr; }
}

} /* @layer shell */