/* SEO data pages (templates using partials/seo_*.html). Loaded after coin.css and markets.css via
   partials/seo_css.html, so it builds on app.css/site.css variables and classes.
   Shared rules first; each page area adds rules ONLY inside its own delimited section below. */

/* ---- page header: space the static intro from the data-driven summary ---- */
.pagehead .lede + .lede { margin-top: 8px; }

/* ---- market open / closed badge ---- */
.badge-mkt {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; height: 20px; border-radius: 999px; white-space: nowrap;
  font: 600 11px/1 Inter, sans-serif; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted);
}
.badge-mkt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.badge-mkt.open { color: var(--up); border-color: var(--up-bg); }
.badge-mkt.open::before { background: var(--up); }
.badge-mkt.closed { color: var(--warn); border-color: rgba(245, 165, 36, .35); }
.badge-mkt.closed::before { background: var(--warn); }

/* ---- OI quadrant labels (seo.common.QUADRANTS cls) ---- */
.q { display: inline-block; padding: 1px 7px; border-radius: 6px; font: 600 11px/16px Inter, sans-serif; white-space: nowrap; }
.q.nl { color: var(--up); background: var(--up-bg); }
.q.ns { color: var(--down); background: var(--down-bg); }
.q.sc { color: var(--conf); background: var(--conf-bg); }
.q.lu { color: var(--warn); background: rgba(245, 165, 36, .12); }

/* ---- OI cap usage bar: <span class="capbar"><i style="width:NN%"></i></span> ---- */
.capbar { display: inline-block; width: 48px; height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden; vertical-align: middle; margin-left: 6px; }
.capbar > i { display: block; height: 100%; background: var(--muted); }
.capbar.hi > i { background: var(--warn); }
.capbar.full > i { background: var(--down); }

/* ---- segmented link groups (window / venue switches as plain links) ---- */
.seglinks { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seglinks a { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; font-size: 12.5px; color: var(--muted); text-decoration: none; border-right: 1px solid var(--line); }
.seglinks a:last-child { border-right: 0; }
.seglinks a:hover { color: var(--text); }
.seglinks a[aria-current="page"] { color: var(--text); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--up); }

/* ---- misc ---- */
.asof { color: var(--muted); font-variant-numeric: tabular-nums; }
.dexchip {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 5px; font: 600 10.5px/16px Inter, sans-serif;
  color: var(--hyperliquid); background: var(--panel2); border: 1px solid var(--line2); vertical-align: 1px; white-space: nowrap;
}

/* ==== hip3 (agent a) ==== */
.hip3 .hip3-jump { justify-self: start; }
.hip3 .hip3-jump .muted { margin-left: 5px; font-size: 11px; }
.hip3-table td.sticky { white-space: nowrap; }
.hip3-table td .badge-mkt { font-size: 10.5px; height: 18px; }
.hip3-table .tag { margin-left: 5px; font-size: 10px; line-height: 15px; padding: 0 5px; }
.hip3-kpis .stat-value .badge-mkt { font-size: 14px; height: 28px; padding: 0 12px; }
.hip3-kpis .stat-sub .capbar { margin-left: 6px; }
.hip3 .grid2 > .panel { min-width: 0; }
.hip3-spikestats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); padding: 10px 14px; }
.hip3-spikestats b { color: var(--text); font-variant-numeric: tabular-nums; }
.hip3-spikestats b.up { color: var(--up); } .hip3-spikestats b.down { color: var(--down); }
@media (max-width: 640px) {
  .hip3-table .dexchip { display: block; margin: 3px 0 0; width: max-content; }
  .hip3-kpis .stat-value .badge-mkt { font-size: 12px; height: 24px; }
}

/* ==== /hip3 ==== */

/* ==== hl (agent b) ==== */
/* /hyperliquid/funding-rate and /hyperliquid/open-interest (templates/hl_funding.html, hl_oi.html) */
.hl-grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hl-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .hl-stats.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .hl-stats.stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hl-page .stat-value.warn { color: var(--warn); }
.hl-page .stat-value.up { color: var(--up); }
.hl-page .stat-value.down { color: var(--down); }
.hl-page .dtable .up { color: var(--up); }
.hl-page .dtable .down { color: var(--down); }
.hl-note { padding: 0 14px 12px; }

/* ==== /hl ==== */

/* ==== extremes-oiscreen (agent c) ==== */
/* /funding-rates/highest|negative (templates/funding_extremes.html, main.fx) and
   /open-interest-screener (templates/oi_screener.html, main.oisc) */
.fx-sides { justify-self: start; }
.fx-table td.fx-mkt .muted, .oisc-table td .muted { font-size: 11.5px; }
.fx-others { font-family: Inter, sans-serif; }
.fx-o { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.fx-o:last-child { margin-right: 0; }
.fx-lede { margin: -4px 14px 10px; }
.mk-table td .rank { margin-right: 4px; }
.oisc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.oisc-lbl { font-size: 12px; color: var(--muted); font-weight: 500; }
.oisc-lbl + .seglinks { margin-right: 8px; }
.oisc-q { justify-content: flex-start; gap: 4px; }
.oisc-q .q { font-size: 10.5px; line-height: 15px; padding: 0 5px; }
.oisc-table td .q { font-size: 10.5px; }
@media (max-width: 640px) {
  .oisc-lbl { width: 100%; margin-bottom: -4px; }
  .fx-o { margin-right: 6px; }
}
/* ==== /extremes-oiscreen ==== */

/* ==== pumps (agent d) ==== */
/* /pump-scanner/<venue>: exchange switch, KPI grid, feed heading, locked venue control (partials/spike_feed.html) */
.pump-venues { padding: 8px 20px 0; max-width: 1400px; }
@media (min-width: 760px) { .pump-stats.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pump-stats.stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pump-stats .stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pump-stats .stat-value .up { color: var(--up); }
.pump-stats .stat-value .down { color: var(--down); }
.pump-stats .stat-value .z { color: var(--dim); }
.pump-stats .split:empty { background: var(--line); }
.pump-feed-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 20px 6px; max-width: 1400px; }
.pump-feed-h h2 { font-size: 15px; font-weight: 600; margin: 0; }
.fgroup.locked { align-items: center; }
.fgroup.locked .tg { cursor: default; border-right: 1px solid var(--line); }
.fgroup.locked .tg:hover { color: var(--text); }
.fgroup.locked .linkbtn { padding: 0 10px; white-space: nowrap; }
.fgroup.locked .linkbtn:hover { color: var(--text); }
.pump-top .dexchip { margin-left: 4px; }

/* ==== /pumps ==== */

/* ==== coinglass (agent e) ==== */
/* /coinglass-alternative: prose panels, text comparison table, bullet lists */
.cg-news .panel-b p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 900px; }
.cg-news .panel-b p:last-child { margin-bottom: 0; }
.cg-page .panel-b a, .cg-page .stat-sub a { color: var(--text); }
.cg-table tbody th {
  position: sticky; left: 0; top: auto; z-index: 1; min-width: 150px; white-space: normal; color: var(--text);
  font: 500 12.5px/1.35 Inter, sans-serif; text-transform: none; letter-spacing: 0; background: var(--panel); padding: 7px 8px 7px 14px;
}
.cg-table tbody tr:last-child th { border-bottom: 0; }
.cg-table td { font-family: Inter, sans-serif; white-space: normal; min-width: 140px; }
.cg-table td a { color: var(--text); }
.cg-notes { padding-top: 8px; }
.cg-notes .note { margin: 2px 2px 0; }
.cg-list { margin: 0; padding: 0 14px 14px 32px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.cg-list li { margin: 0 0 7px; }
.cg-list li:last-child { margin-bottom: 0; }
.cg-list b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .cg-table td { min-width: 120px; } }

/* ==== /coinglass ==== */

/* ==== cot (T-043) ==== */
/* /cme-cot, /cme-cot/bitcoin, /cme-cot/ethereum (templates/cme_cot*.html): stats, inline-SVG chart, tables */
.cot-page { --cot-lev: var(--conf); --cot-am: var(--hyperliquid); --cot-dealer: var(--warn); }
.cot-page > .seglinks { justify-self: start; }
@media (min-width: 760px) { .cot-stats.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cot-stats.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cot-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.cot-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.cot-legend .cot-lev i { color: var(--cot-lev); } .cot-legend .cot-am i { color: var(--cot-am); } .cot-legend .cot-dealer i { color: var(--cot-dealer); }
.cot-chart { display: block; width: 100%; height: auto; max-height: 360px; }
.cot-chart .grid { stroke: var(--line); stroke-width: 1; }
.cot-chart .grid.zero { stroke: var(--line2); stroke-width: 1.5; }
.cot-chart .tick { stroke: var(--line2); }
.cot-chart text { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cot-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cot-line.cot-lev { stroke: var(--cot-lev); } .cot-line.cot-am { stroke: var(--cot-am); } .cot-line.cot-dealer { stroke: var(--cot-dealer); }
.cot-table td.sticky { white-space: nowrap; font-family: Inter, sans-serif; }
.cot-table td.sticky .small { white-space: normal; min-width: 170px; max-width: 260px; font-size: 11.5px; line-height: 1.35; }
.cot-page .panel > .note { margin: 0; padding: 8px 14px 12px; }
.cot-page .note a { color: var(--text); }

/* ==== /cot ==== */