/* =========================================================================
   MARKETS LAYER: masthead dropdowns, market tables, extension states.
   ========================================================================= */

/* --- Masthead dropdowns --------------------------------------------------- */
.nav-menu { position: relative; display: flex; align-items: stretch; }
.nav-menu-btn { cursor: pointer; background: none; font: inherit; font-size: 13.5px; font-weight: 500; }
.nav-menu-list {
  position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 220px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--bg-panel); border: 1px solid var(--line-strong); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.nav-menu-list[hidden] { display: none; }
.nav-menu-list ul { margin: 0; padding: 0; list-style: none; }
.nav-menu-list a {
  display: block; padding: 7px 14px;
  color: var(--fg); font-size: 13.5px; text-decoration: none;
}
.nav-menu-list a:hover, .nav-menu-list a:focus-visible { background: var(--bg-card-hover); color: var(--fg); text-decoration: none; }
.nav-menu-list a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.nav-menu-list a.nav-buy[aria-current="page"] { color: var(--buy); }
.nav-menu-list a.nav-sell[aria-current="page"] { color: var(--sell); }
.nav-mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 12px; min-width: 540px; padding: 10px 0 6px; }
.nav-mega-head {
  display: block; padding: 4px 14px; color: var(--fg-muted);
  font-size: 12.5px; font-weight: 600;
}
.nav-menu-list a.nav-mega-foot {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line-subtle);
  color: var(--fg-muted); font-size: 12.5px;
}

@media (max-width: 860px) {
  /* The nav row would clip the dropdowns if it scrolled. */
  .topbar-nav { overflow: visible; }
  .nav-menu { flex: 1 1 0; position: static; }
  .nav-menu-btn { width: 100%; justify-content: center; }
  .nav-menu-list { left: 12px; right: 12px; top: auto; min-width: 0; border-top: 1px solid var(--line-strong); }
}

/* --- Market tables -------------------------------------------------------- */
.mkt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 10px; }
.mkt-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-panel); }
.mkt-tabs button, .mkt-refresh, .sort-btn { font: inherit; cursor: pointer; }
.mkt-tabs button, .mkt-tabs a {
  padding: 5px 12px; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--fg-muted); font-size: 13px; text-decoration: none;
}
.mkt-tabs > :last-child { border-right: 0; }
.mkt-tabs button:hover, .mkt-tabs a:hover { color: var(--fg); background: var(--bg-card-hover); }
.mkt-tabs button[aria-pressed="true"], .mkt-tabs a[aria-current="page"] { color: var(--bg-panel); background: var(--fg); font-weight: 600; }
.mkt-refresh {
  padding: 5px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--bg-panel); color: var(--fg); font-size: 13px;
}
.mkt-refresh:hover:not(:disabled) { background: var(--bg-card-hover); }
.mkt-refresh:disabled { opacity: 0.55; cursor: progress; }
.mkt-status { margin: 0; font-size: 13px; color: var(--fg-muted); }
.mkt-status[data-kind="error"] { color: var(--sell); }
.sort-btn {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0;
  color: inherit; font-weight: inherit;
}
.sort-icon { opacity: 0; }
.sort-btn:hover .sort-icon, .sort-btn:focus-visible .sort-icon { opacity: 0.5; }
th[aria-sort="descending"] .sort-icon { opacity: 1; }
th[aria-sort="ascending"] .sort-icon { opacity: 1; transform: rotate(180deg); }
.mkt-grid td.up { color: var(--buy); }
.mkt-grid td.down { color: var(--sell); }
.mkt-grid td.num { font-variant-numeric: tabular-nums; }
.mkt-sym { font-weight: 700; white-space: nowrap; }
.mkt-grid td[data-col="time"] { white-space: nowrap; }
.mkt-state { display: block; font-size: 12px; color: var(--fg-dim); }
.mkt-grid tr[hidden] { display: none; }
.mkt-grid tr.row-link { cursor: pointer; }
.mkt-grid td a:not(.mkt-badge) { color: inherit; }
.mkt-grid td.mkt-sym a { color: var(--accent-text); }
.mkt-note { margin-top: 10px; font-size: 12.5px; color: var(--fg-muted); }

.skel { display: inline-block; width: 56px; height: 10px; background: var(--line); }
.is-locked .skel { opacity: 0.5; }

.rng {
  display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.rng-bar { position: relative; height: 2px; background: var(--line-strong); }
.rng-dot { position: absolute; top: 50%; width: 6px; height: 10px; background: var(--fg); transform: translate(-50%, -50%); }

.spark { width: 80px; height: 24px; display: block; }
.mkt-grid th, .mkt-grid td { padding-left: 10px; padding-right: 10px; }
.spark path { fill: none; stroke-width: 1.5; stroke: var(--fg-muted); }
.spark.up path { stroke: var(--buy); }
.spark.down path { stroke: var(--sell); }
.spark-base { stroke: var(--line-strong); stroke-dasharray: 2 2; stroke-width: 1; }

.install-panel {
  margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-card-subtle);
}
.install-panel h2 { margin: 0 0 6px; font-size: 16px; }
.install-panel p { margin: 6px 0; color: var(--fg-muted); max-width: 70ch; }
.mkt-cta {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-sm);
  background: var(--fg); color: var(--bg-panel); font-weight: 600; text-decoration: none;
}
.mkt-cta:hover { background: var(--fg-muted); color: var(--bg-panel); text-decoration: none; }

.prose-card { max-width: 75ch; padding: 4px 0; line-height: 1.65; }
.prose-card h2 { font-size: 16px; margin: 22px 0 6px; }
.prose-card h2:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  /* Columns: 1 symbol, 2 name, 3 price, 4 change, 5 change %, 6 volume, 7 day, 8 52w, 9 1D, 10 last */
  #markets-table th:nth-child(7), #markets-table td[data-col="day"] { display: none; }
}
@media (max-width: 760px) {
  /* Phones keep what a glance needs: which index (by name), its level, today's move. */
  #markets-table th:nth-child(1), #markets-table td:nth-child(1),
  #markets-table th:nth-child(4), #markets-table td[data-col="change"],
  #markets-table th:nth-child(6), #markets-table td[data-col="volume"],
  #markets-table th:nth-child(8), #markets-table td[data-col="w52"],
  #markets-table th:nth-child(9), #markets-table td[data-col="spark"],
  #markets-table th:nth-child(10), #markets-table td[data-col="time"] { display: none; }
  #markets-table td:nth-child(2) { white-space: normal; font-size: 13px; }
  .mkt-grid th, .mkt-grid td { padding-left: 8px; padding-right: 8px; }
}

/* --- Badge, sector pages --------------------------------------------------- */
.mkt-badge {
  display: inline-block; white-space: nowrap;
  padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--buy-border);
  background: var(--buy-subtle); color: var(--buy); font-size: 12px; font-weight: 600; text-decoration: none;
}
.mkt-badge:hover, .mkt-badge:focus-visible { border-color: var(--buy); text-decoration: none; }
.mkt-h2 { margin: 26px 0 10px; font-size: 16px; }
.sector-desc { max-width: 72ch; color: var(--fg-muted); line-height: 1.6; margin: 14px 0 4px; }
.sector-back { margin: 0 0 8px; font-size: 13px; }
.kpi-val.up { color: var(--buy); }
.kpi-val.down { color: var(--sell); }
@media (max-width: 760px) {
  .mkt-grid .mkt-opt { display: none; }
}

/* --- Single-instrument quote page ----------------------------------------------------- */
#quote-page .up, #quote-page td.up, #quote-page dd.up { color: var(--buy); }
#quote-page .down, #quote-page td.down, #quote-page dd.down { color: var(--sell); }

.q-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; padding-bottom: 14px; }
.q-title { flex: 1 1 320px; min-width: 0; }
.q-title h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.q-sub { margin: 4px 0 0; font-size: 13px; color: var(--fg-muted); }
.q-quote { flex: 0 1 auto; }
.q-price { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.q-change { font-size: 16px; font-weight: 600; margin-left: 6px; }
.q-state { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-muted); }
.q-ext { margin: 2px 0 0; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.q-ext:empty { display: none; }
.q-ext strong { color: var(--fg); }

.q-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--line-strong); margin: 4px 0 18px; }
.q-tabs a {
  padding: 8px 12px; margin-bottom: -1px; color: var(--fg-muted); font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent; text-decoration: none;
}
.q-tabs a:hover { color: var(--fg); background: var(--bg-card-hover); text-decoration: none; }
.q-tabs a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); }
.q-tabs a[hidden] { display: none; }

.q-chart-panel { margin-bottom: 8px; }
.q-chart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 6px; }
.q-range-move { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: auto; }
.q-legend { margin: 0 0 4px; min-height: 18px; font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: pre; overflow: hidden; }
.q-chart { width: 100%; height: 400px; }

.q-section { margin: 0 0 26px; }
.q-h2 { margin: 0 0 8px; padding-top: 10px; border-top: 2px solid var(--fg); font-size: 16px; }
.q-pairs { margin: 0; }
.q-pairs > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line-subtle); }
.q-pairs dt { color: var(--fg-muted); font-size: 13.5px; }
.q-pairs dd { margin: 0; font-weight: 600; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.q-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px; border-top: 2px solid var(--fg); padding-top: 4px; }
.q-stat-groups { column-width: 360px; column-gap: 40px; }
.q-stat-groups .q-section { break-inside: avoid; }
.q-stats-grid.q-single { grid-template-columns: minmax(0, 720px); }
.q-profile-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.q-address { max-width: 40ch; }
.q-summary { max-width: 75ch; line-height: 1.65; margin: 0 0 10px; }
.q-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.q-table td, .q-table th { padding-left: 10px; padding-right: 10px; }

@media (max-width: 760px) {
  .q-stats-grid, .q-profile-top { grid-template-columns: 1fr; }
  .q-chart { height: 300px; }
  .q-price { font-size: 28px; }
  .q-legend { white-space: normal; }
}