/* 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 ==== */

/* ==== /rsi-heatmap ==== */
.rsih { --rsi-ob: #f2495a; --rsi-ob-bg: rgba(242, 73, 90, .30); --rsi-st-bg: rgba(242, 73, 90, .12);
        --rsi-os: #1fcf8a; --rsi-os-bg: rgba(31, 207, 138, .30); --rsi-wk-bg: rgba(31, 207, 138, .12); }
:root[data-theme="light"] .rsih { --rsi-ob: #d92d43; --rsi-ob-bg: rgba(217, 45, 67, .22); --rsi-st-bg: rgba(217, 45, 67, .08);
        --rsi-os: #089e63; --rsi-os-bg: rgba(8, 158, 99, .22); --rsi-wk-bg: rgba(8, 158, 99, .08); }
@media (min-width: 760px) { .rsih-stats.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .rsih-stats.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rsi-t-ob { color: var(--rsi-ob); } .rsi-t-os { color: var(--rsi-os); }
.rsih-avgs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 20px; }
.rsih-avgs small { margin-left: 0; }
.rsih .panel-h { gap: 8px; flex-wrap: wrap; }
.rsih-chart { padding: 0 14px; }
.rsih-chart img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.rsih-share { margin: 0; padding: 8px 14px 12px; font-size: 12.5px; color: var(--muted); }
.rsih-share a, .rsih .panel-h .muted a { color: var(--text); }
.rsih-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.rsi-cell { display: inline-block; min-width: 46px; padding: 2px 6px; border-radius: 5px; text-align: right;
            font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12px; }
.rsih-legend .rsi-cell { min-width: 0; font-family: Inter, sans-serif; }
.rsi-ob { background: var(--rsi-ob-bg); color: var(--text); font-weight: 600; }
.rsi-strong { background: var(--rsi-st-bg); }
.rsi-neutral { color: var(--muted); }
.rsi-weak { background: var(--rsi-wk-bg); }
.rsi-os { background: var(--rsi-os-bg); color: var(--text); font-weight: 600; }
.rsih-table th.rsih-tf a, .rsih-table th.c-coin a { color: inherit; text-decoration: none; white-space: nowrap; }
.rsih-table th.rsih-tf a:hover, .rsih-table th.c-coin a:hover { color: var(--text); text-decoration: underline; }
.rsih-table td.rsih-c { padding-top: 3px; padding-bottom: 3px; }

/* ==== crypto-heatmap (T-038) ==== */
/* /crypto-heatmap (templates/crypto_heatmap.html, main.tmap). Tile boxes come from monitor/seo/treemap.py as
   custom properties: --x/--y/--w/--h (desktop, 16:10 box) and --px/--py/--pw/--ph (phone, 3:4 box). */
.tmap { --tm-mix: var(--panel2); }
.tm-box { position: relative; aspect-ratio: 16 / 10; margin: 0 14px 10px; border-radius: 8px; overflow: hidden; background: var(--panel2); }
.tm-tile {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden;
  border: 1px solid var(--bg); color: var(--text); text-decoration: none; text-align: center; line-height: 1.15;
  background: var(--panel2);
}
a.tm-tile:hover, a.tm-tile:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; z-index: 1; }
.tm-b { font: 700 11px/1.15 Inter, sans-serif; white-space: nowrap; }
.tm-v { font: 500 10px/1.15 "JetBrains Mono", ui-monospace, Consolas, monospace; white-space: nowrap; opacity: .9; }
.tmap .tp1 { background: color-mix(in srgb, var(--up) 18%, var(--tm-mix)); }
.tmap .tp2 { background: color-mix(in srgb, var(--up) 34%, var(--tm-mix)); }
.tmap .tp3 { background: color-mix(in srgb, var(--up) 52%, var(--tm-mix)); }
.tmap .tp4 { background: color-mix(in srgb, var(--up) 70%, var(--tm-mix)); }
.tmap .tp5 { background: color-mix(in srgb, var(--up) 88%, var(--tm-mix)); }
.tmap .tm1 { background: color-mix(in srgb, var(--down) 18%, var(--tm-mix)); }
.tmap .tm2 { background: color-mix(in srgb, var(--down) 34%, var(--tm-mix)); }
.tmap .tm3 { background: color-mix(in srgb, var(--down) 52%, var(--tm-mix)); }
.tmap .tm4 { background: color-mix(in srgb, var(--down) 70%, var(--tm-mix)); }
.tmap .tm5 { background: color-mix(in srgb, var(--down) 88%, var(--tm-mix)); }
.tmap .ts1 { background: color-mix(in srgb, var(--conf) 10%, var(--tm-mix)); }
.tmap .ts2 { background: color-mix(in srgb, var(--conf) 26%, var(--tm-mix)); }
.tmap .ts3 { background: color-mix(in srgb, var(--conf) 44%, var(--tm-mix)); }
.tmap .ts4 { background: color-mix(in srgb, var(--conf) 64%, var(--tm-mix)); }
.tmap .ts5 { background: color-mix(in srgb, var(--conf) 84%, var(--tm-mix)); }
.tmap .tn { background: var(--panel2); }
.tm-tile.tp4, .tm-tile.tp5, .tm-tile.tm4, .tm-tile.tm5, .tm-tile.ts4, .tm-tile.ts5 { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
@media (min-width: 641px) {
  .tm-tile.ld0 > span, .tm-tile.ld1 > .tm-v { display: none; }
  .tm-tile.ld2 .tm-b { font-size: 13px; }
  .tm-tile.ld3 .tm-b { font-size: 20px; } .tm-tile.ld3 .tm-v { font-size: 13px; }
}
@media (max-width: 640px) {
  .tm-box { aspect-ratio: 3 / 4; margin: 0 8px 10px; }
  .tm-tile { left: var(--px); top: var(--py); width: var(--pw); height: var(--ph); }
  .tm-tile.lp0 > span, .tm-tile.lp1 > .tm-v { display: none; }
  .tm-tile.lp3 .tm-b { font-size: 16px; } .tm-tile.lp3 .tm-v { font-size: 12px; }
}
.tm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 0 14px 10px; font-size: 11.5px; }
.tm-legend i { display: inline-block; width: 16px; height: 10px; border-radius: 2px; border: 1px solid var(--line); }
.tm-legend .muted:first-child { margin-right: 4px; } .tm-legend i + .muted { margin-left: 4px; }
.tm-legend-note { flex-basis: 100%; }
.tm-empty { margin: 0; padding: 18px 14px; color: var(--muted); }
.tm-ends { display: grid; gap: 4px; padding: 0 14px 12px; font-size: 12.5px; }
.tm-ends .oisc-lbl { display: inline-block; min-width: 58px; }
.tm-end { margin-right: 10px; color: var(--text); text-decoration: none; white-space: nowrap; font-weight: 600; }
.tm-end span { font: 500 12px "JetBrains Mono", ui-monospace, Consolas, monospace; }
a.tm-end:hover { text-decoration: underline; }
.tm-movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 18px; padding: 0 14px 12px; }
.tm-mv { min-width: 0; }
.tm-mv h3 { margin: 6px 0 4px; font-size: 13.5px; }
.tm-mv-table { width: 100%; margin-bottom: 10px; }
.tm-mv-table caption { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.tm-mv-table td, .tm-mv-table th { white-space: nowrap; }
/* ==== /developers ==== */
.dev-endpoints { display: grid; gap: 22px; padding: 14px; }
.dev-endpoint { border-top: 1px solid var(--line); padding-top: 16px; }
.dev-endpoint:first-child { border-top: 0; padding-top: 0; }
.dev-endpoint h3 { margin: 0 0 6px; font-size: 14.5px; }
.dev-endpoint h3 code { font-size: 13.5px; color: var(--text); }
.dev-endpoint .tablescroll { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.dev-endpoint details { margin-top: 8px; }
.dev-endpoint summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
pre.code {
  margin: 8px 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel2); font: 500 12.5px/1.5 "JetBrains Mono", ui-monospace, Consolas, monospace;
  color: var(--text); white-space: pre; max-width: 100%;
}
/* ==== /crypto-heatmap ==== */

/* ==== gainers-losers (T-103) ==== */
/* /gainers-losers (templates/gainers_losers.html, main.gl): window switch reuses .oisc-controls/.oisc-lbl. */
.gl-table td .muted { font-size: 11.5px; }
.gl-table td .q { font-size: 10.5px; }
/* ==== /gainers-losers ==== */