/* ================================================================
   Mercato shared components (Frontend Foundation)
   One definition for the blocks the audit found copied inline on
   analyzer.html / entity.html / item-profile.html / collections.html:
   Section, KPI card, Chip, Entity card, Breadcrumbs, Empty/Loading.
   Uses the design tokens from mct.css. Pages may still override
   locally, but new styles belong here.
   ================================================================ */

/* ── Section (header + body) ─────────────────────────────────── */
.sec { background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:14px; margin-bottom:var(--sp-4); overflow:hidden; }
.sec-h { display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--mct-card-border); }
.sec-h i { color:var(--mct-accent); font-size:17px; }
.sec-h h2 { font-size:14px; font-weight:700; margin:0; color:var(--mct-text-1); }
.sec-h .cnt { color:var(--mct-text-3); font-weight:500; font-size:var(--fs-sm); margin-left:2px; }
.sec-b { padding:var(--sp-4) 18px; }

/* ── KPI card ────────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:11px; }
.kpi { background:var(--surface-1); border:1px solid var(--mct-card-border); border-radius:10px; padding:11px 13px; }
.kpi label { display:block; font-size:var(--fs-xs); color:var(--mct-text-3); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.kpi strong { font-size:17px; font-weight:700; color:var(--mct-text-1); }
.kpi.hl strong { color:var(--mct-accent); }

/* ── Chip (knowledge-graph link) ─────────────────────────────── */
.chip, .rel-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm); text-decoration:none; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); color:var(--mct-accent); transition:background var(--t-fast); }
.chip:hover, .rel-chip:hover { background:rgba(59,130,246,.16); }
.chip i, .rel-chip i { font-size:13px; opacity:.8; }
.chips, .rel-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ── Entity/item card (grid tile) ────────────────────────────── */
.egrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-3); }
.ecard { display:block; text-decoration:none; background:rgba(148,163,184,.04); border:1px solid var(--mct-card-border); border-radius:10px; overflow:hidden; transition:border-color var(--t-fast), transform var(--t-fast); }
.ecard:hover { border-color:var(--mct-accent); transform:translateY(-2px); }
.ecard .strip { height:3px; background:rgba(148,163,184,.15); }
.ecard .thumb { height:88px; display:flex; align-items:center; justify-content:center; background:rgba(10,22,45,.5); }
.ecard .thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.ecard .thumb .ph { color:var(--mct-text-3); opacity:.4; font-size:26px; }
.ecard .body { padding:9px 11px; }
.ecard .nm { font-size:var(--fs-sm); color:var(--mct-text-1); line-height:1.3; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:31px; }
.ecard .rr { font-size:10px; color:var(--mct-text-3); }
.ecard .pr { font-size:var(--fs-base); font-weight:700; color:var(--mct-text-1); }
.ecard .pr.na { color:var(--mct-text-3); font-weight:500; font-size:var(--fs-xs); }

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.mct-bc { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--mct-text-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.mct-bc a { color:var(--mct-text-3); text-decoration:none; }
.mct-bc a:hover { color:var(--mct-accent); }
.mct-bc .sep { opacity:.4; }
.mct-bc .cur { color:var(--mct-text-1); }

/* ── Empty / loading states ──────────────────────────────────── */
.mct-empty { color:var(--mct-text-3); font-size:var(--fs-base); padding:24px 0; text-align:center; }
.mct-load { text-align:center; color:var(--mct-text-3); padding:70px 0; }

/* ── Thin SaaS scrollbar utility ─────────────────────────────── */
.thin-scroll { scrollbar-width:thin; scrollbar-color:transparent transparent; }
.thin-scroll:hover { scrollbar-color:rgba(255,255,255,.16) transparent; }
.thin-scroll::-webkit-scrollbar { width:2px; }
.thin-scroll::-webkit-scrollbar-track { background:transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:var(--r-pill); }
.thin-scroll:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); }

/* ── Plan card (Pricing page; reusable for the future Subscription page) ── */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-4); max-width:820px; margin:0 auto; }
.plan-card { display:flex; flex-direction:column; gap:var(--sp-3); background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:var(--r-lg); padding:26px 24px; }
.plan-card--featured { border-color:rgba(59,130,246,.4); box-shadow:0 0 0 1px rgba(59,130,246,.22), var(--sh-card); }
.plan-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.plan-name { font-size:var(--fs-lg); font-weight:800; color:var(--mct-text-1); margin:0; letter-spacing:-.01em; }
.plan-price { display:flex; align-items:baseline; gap:6px; }
.plan-price strong { font-size:34px; font-weight:900; color:var(--mct-text-1); letter-spacing:-.02em; line-height:1; }
.plan-price span { font-size:var(--fs-sm); color:var(--mct-text-3); }
.plan-tagline { font-size:var(--fs-base); color:var(--mct-text-2); line-height:1.55; margin:0; }
.plan-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.plan-features li { display:flex; gap:9px; align-items:flex-start; font-size:var(--fs-base); color:var(--mct-text-2); line-height:1.45; }
.plan-features li i { color:var(--c-success); font-size:15px; margin-top:2px; flex-shrink:0; }
.plan-features li.planned { color:var(--mct-text-3); }
.plan-features li.planned i { color:var(--mct-text-3); }
.plan-cta { margin-top:auto; padding-top:var(--sp-2); }
.plan-cta .mct-btn { width:100%; justify-content:center; }
.plan-cta .mct-btn[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.plan-note { font-size:var(--fs-xs); color:var(--mct-text-3); text-align:center; margin:8px 0 0; }

/* Pricing page: interval toggle, recommended badge, comparison table
   (Roadmap v2.0 Section 3 — cards/table render from the plan registry). */
.plan-toggle { display:flex; justify-content:center; gap:0; margin:0 auto var(--sp-4); border:1px solid var(--mct-card-border); border-radius:var(--r-md); overflow:hidden; width:max-content; }
.plan-toggle-btn { appearance:none; border:0; background:var(--mct-card); color:var(--mct-text-2); font:inherit; font-size:var(--fs-sm); font-weight:600; padding:9px 18px; cursor:pointer; }
.plan-toggle-btn.is-active { background:var(--mct-accent); color:#fff; }
.plan-toggle-note { font-size:var(--fs-xs); opacity:.85; margin-left:4px; }
.plan-badge-reco { background:var(--mct-accent); color:#fff; border-color:transparent; }
.plan-loading { grid-column:1/-1; text-align:center; color:var(--mct-text-3); font-size:var(--fs-base); padding:var(--sp-4) 0; }
.plan-grid--three { max-width:1080px; }
.plan-price em { font-style:normal; font-size:var(--fs-base); font-weight:700; color:var(--mct-text-3); }
/* Elevated card shell around the comparison table: same surface, border,
   radius and elevation tokens as .plan-card / --sh-card, so the table reads
   as a Pricing card. The radius lives on the wrap (not the table) because
   border-collapse ignores border-radius; overflow-x keeps mobile scroll and
   clips the corners. */
.plan-compare-wrap { max-width:900px; margin:0 auto; overflow-x:auto; background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:var(--r-lg); box-shadow:var(--sh-card); }
.plan-compare { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.plan-compare th, .plan-compare td { padding:12px 16px; border-bottom:1px solid var(--mct-card-border); text-align:center; color:var(--mct-text-2); white-space:nowrap; }
.plan-compare thead th { font-weight:800; color:var(--mct-text-1); }
.plan-compare tbody th { text-align:left; font-weight:600; color:var(--mct-text-1); }
.plan-compare tr:last-child th, .plan-compare tr:last-child td { border-bottom:0; }
.plan-compare td i { color:var(--c-success); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Static content pages: About / Documentation / Support / Contact / Legal
   (Roadmap v2.0 Section 3). One shared prose style — no page-local variants. */
.mct-prose { max-width:760px; margin:0 auto; color:var(--mct-text-2); font-size:var(--fs-base); line-height:1.65; }
.mct-prose h3 { font-size:var(--fs-lg); font-weight:800; color:var(--mct-text-1); margin:28px 0 10px; letter-spacing:-.01em; }
.mct-prose h3:first-child { margin-top:0; }
.mct-prose p { margin:0 0 12px; }
.mct-prose ul { margin:0 0 12px; padding-left:22px; }
.mct-prose li { margin-bottom:6px; }
.mct-prose a { color:var(--mct-accent); }
.mct-prose .mct-prose-meta { font-size:var(--fs-xs); color:var(--mct-text-3); margin-bottom:20px; }
.mct-prose .mct-prose-note { background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:var(--r-md); padding:12px 16px; font-size:var(--fs-sm); color:var(--mct-text-3); }

/* ── FAQ (details/summary accordion) ─────────────────────────── */
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item { background:var(--mct-card); border:1px solid var(--mct-card-border); border-radius:var(--r-md); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:15px 18px; cursor:pointer; font-size:14px; font-weight:600; color:var(--mct-text-1); list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary i { color:var(--mct-text-3); font-size:16px; flex-shrink:0; transition:transform var(--t-base); }
.faq-item[open] summary i { transform:rotate(180deg); }
.faq-item p { margin:0; padding:0 18px 16px; font-size:var(--fs-base); color:var(--mct-text-2); line-height:1.6; }

/* ── Canonical data table (Design Standard §11) ──────────────────────
   The single table pattern the bespoke tables converge on: hub-items-tbl
   (Market Hub / Movers), pf-table (Portfolio), wl-table (Watchlist),
   items-tbl/items-table (Inventory) and sys-tbl (System). Introduced in
   Roadmap v2.0 Section 7; migrating those five tables onto it is the
   render-risky work staged for Section 7.2. Token-styled header/rows/cells,
   right-aligned numerics (.num), muted hover. Always wrap a wide table in
   .mct-table-wrap so it scrolls internally on narrow viewports (§24). */
.mct-table-wrap { width:100%; overflow-x:auto; }
.mct-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.mct-table thead th {
  text-align:left; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--mct-text-3); padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--mct-card-border); white-space:nowrap;
}
.mct-table tbody td { padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border-ghost); color:var(--mct-text-2); vertical-align:middle; }
.mct-table tbody tr:last-child td { border-bottom:0; }
.mct-table tbody tr:hover td { background:var(--surface-1); }
/* Numeric columns right-align with tabular figures so digits stack cleanly. */
.mct-table th.num, .mct-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.mct-table td strong, .mct-table td .val { color:var(--mct-text-1); font-weight:600; }