/* ============================================================
   ezpztrader.com — public coverage pages (ECOSYSTEM_REDESIGN.md §8.4)
   /brokers/ and broker detail, /assets/ and asset detail,
   /funded-accounts/ (templates/marketing/connections.html,
   connection_detail.html, assets.html, asset_detail.html, prop_firms.html;
   /journaling/ has its own pages/journaling.css). Built on the shared components (hero, sec-head,
   card, table, empty-state, cta-band, disclaimer, pagehead); this file only
   lays them out.
   ============================================================ */

@layer page {

/* ---------- sections ---------- */
.cov-section { padding-block: var(--space-12); }
.cov-section + .cov-section { padding-top: 0; }
.cov-detail { padding-block: var(--space-12) var(--space-14); }

/* ---------- card grids ---------- */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cov-grid > li { display: flex; min-width: 0; }
.cov-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
a.cov-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cov-card-top,
.cov-broker-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.cov-card-top .cov-card-title,
.cov-broker-top .cov-card-title { flex: 1 1 auto; min-width: 0; }
.cov-card-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cov-card-text {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.cov-card-link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand);
}
.cov-card-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.cov-card.is-soon .cov-card-title { color: var(--ink-2); }
.cov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

/* ---------- broker logos ---------- */
.cov-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  overflow: hidden;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cov-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cov-logo--lg { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-lg); }
.cov-logo-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-2);
}
.cov-trademark {
  margin: 0 auto var(--space-4);
  max-width: 72ch;
  text-align: center;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--ink-3);
}

/* ---------- /brokers/ directory: stats, sticky search + market pills, cards ----------
   Filtering and the count: static/js/marketplace.js. The spotlight follows a
   fine pointer through --mx/--my; without JS the cards still lift on hover. */
.cov-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 44rem;
  margin: 0 auto var(--space-10);
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}
.cov-stats > li {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}
.cov-stats > li + li { border-left: 1px solid var(--border); }
.cov-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-none);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cov-stat-label { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-3); }

.cov-dir-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-inline: calc(var(--space-3) * -1);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cov-dir-search { flex: 1 1 18rem; max-width: 24rem; }
.cov-pill-count {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.filter-pill.is-active .cov-pill-count { color: var(--action-ink); }
.cov-dir-count {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.cov-dir-grid > li[hidden] { display: none; }
.cov-dir-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cov-dir-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), var(--brand-soft), transparent 60%);
  opacity: 0;
  pointer-events: none;
}
.cov-dir-card:hover,
.cov-dir-card:focus-visible {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-2);
}
.cov-dir-card:hover::before,
.cov-dir-card:focus-visible::before { opacity: 1; }
.cov-dir-card .cov-card-title { font-size: var(--text-lg); }
.cov-dir-arrow {
  flex: none;
  align-self: flex-start;
  color: var(--ink-3);
  opacity: .5;
}
.cov-dir-card:hover .cov-dir-arrow,
.cov-dir-card:focus-visible .cov-dir-arrow { color: var(--action-ink); opacity: 1; }
.cov-dir-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .cov-dir-card { transition: transform var(--dur-panel) var(--ease-out), border-color var(--dur-panel) var(--ease-out), box-shadow var(--dur-panel) var(--ease-out); }
  .cov-dir-card::before { transition: opacity var(--dur-panel) var(--ease-out); }
  .cov-dir-arrow { transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out), color var(--dur-panel) var(--ease-out); }
  .cov-dir-card:hover { transform: translateY(-3px); }
  .cov-dir-card:hover .cov-dir-arrow { transform: translate(2px, -2px); }
}

@media (max-width: 640px) {
  .cov-stats > li { padding: var(--space-4) var(--space-2); }
  .cov-stat-num { font-size: var(--text-2xl); }
  .cov-dir-bar { position: static; margin-inline: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cov-dir-search { max-width: none; }
  /* pills scroll sideways instead of wrapping into several rows */
  .cov-dir-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
  .cov-dir-pills .filter-pill { flex: none; }
}

/* ---------- matrices ---------- */
.cov-matrix .table { min-width: 34rem; }
.cov-matrix .cov-col { text-align: center; }
.cov-row-name { font-weight: var(--weight-semi); color: var(--ink); }
.cov-yes { font-weight: var(--weight-semi); color: var(--ok); }
.cov-no { color: var(--ink-3); }

/* ---------- funded accounts teaser ---------- */
.cov-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6);
}
.cov-teaser > div { flex: 1 1 24rem; min-width: 0; }
.cov-teaser-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--ink);
}

/* ---------- funded firms table (marketing/_funded_firms.html) ---------- */
.firms-table .firm-name { font-weight: var(--weight-semi); color: var(--ink); }
.cov-warning { max-width: 52rem; margin: var(--space-6) auto 0; }

/* ---------- detail pages ---------- */
.cov-detail .pagehead { margin-bottom: var(--space-8); }
.cov-detail .detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.cov-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--space-10);
  align-items: start;
}
.cov-detail-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.cov-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  max-width: 72ch;
}
.cov-lede {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.cov-website { margin: 0; font-size: var(--text-sm); }
.cov-website a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--brand);
}
.cov-website a:hover { text-decoration: underline; text-underline-offset: .2em; }
.cov-prose p:last-child { margin-bottom: 0; }
.cov-h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--ink);
}
.cov-h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--ink);
}
.cov-steps-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cov-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.cov-step > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cov-step .cov-card-title { font-size: var(--text-lg); }
.cov-step-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--brand);
}

.cov-facts { position: sticky; top: var(--space-18); }
.cov-facts-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cov-fact { display: flex; flex-direction: column; gap: var(--space-2); }
.cov-fact-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cov-fact-value {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.cov-fact .cov-tags { margin-top: 0; }
.cov-fact-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.cov-fact-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.cov-fact-list svg { flex: none; margin-top: 2px; }
.cov-fact-list .is-yes { color: var(--ink); }
.cov-fact-list .is-yes svg { color: var(--ok); }
.cov-fact-list .is-no { color: var(--ink-3); }
.cov-facts-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cov-detail .cov-trademark { margin: var(--space-10) 0 0; text-align: start; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cov-detail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .cov-facts { position: static; }
}
@media (max-width: 640px) {
  .cov-section { padding-block: var(--space-10); }
  .cov-detail { padding-block: var(--space-8) var(--space-10); }
  .cov-teaser { padding: var(--space-5); }
  .cov-facts-cta .btn { flex: 1 1 auto; }
}

}