/* Funding rates / open interest / funding arbitrage / Hyperliquid pages (templates/markets.html).
   Builds on app.css (variables, .fgroup/.tg/.fsel/.search/.chip/.trade/.faq) and site.css
   (.pagehead/.page/.stat-grid/.panel/.tablescroll/.dtable). Page-specific classes are prefixed mk-. */

.mk { --mk-hi: rgba(255, 255, 255, .025); }
:root[data-theme="light"] .mk { --mk-hi: rgba(16, 24, 40, .028); }

/* ---- view tabs ---- */
.mk-views {
  display: flex; gap: 4px; padding: 6px 20px 0; max-width: 1400px; overflow-x: auto; scrollbar-width: none;
}
.mk-views::-webkit-scrollbar { display: none; }
.mk-views a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--line2); background: var(--panel); color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
}
.mk-views a:hover { color: var(--text); border-color: var(--muted); }
.mk-views a[aria-current="page"] { color: var(--text); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--up); }
/* Hyperliquid sub-nav (partials/hl_views.html), a smaller second row */
.hl-views { padding-top: 4px; }
.hl-views a { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* ---- KPI cards ---- */
.mk .stat-value .fr, .mk .stat-value .up, .mk .stat-value .down { font-weight: 700; }
.mk .stat-value small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.mk .stat-sub a { color: var(--text); text-decoration: none; }
.mk .stat-sub a:hover { text-decoration: underline; }
.mk .stat-value .chip { font-size: 11px; vertical-align: 3px; }

/* ---- filters ---- */
.mk-panel .panel-h h2 { font-size: 14px; }
.mk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px; }
.mk-fmore { display: contents; }
.mk-filters .search { width: 150px; }
.mk-ftoggle { display: none; }
.mk-filters .tg[aria-pressed="true"]:not(.on) { box-shadow: none; }
#f-multi.on { color: var(--text); }

/* ---- table ---- */
.mk-scroll { max-height: calc(100vh - 110px); min-height: 240px; }
.mk-table td { padding-top: 6px; padding-bottom: 6px; }
.mk-table th { white-space: nowrap; }
.mk-table td.f:empty::after { content: "—"; color: var(--dim); }
.mk-table td.z { color: var(--dim); }
.mk-table .c-coin { min-width: 88px; }
.mk-table td.c-coin .tag { margin-left: 4px; font-size: 10px; line-height: 15px; padding: 0 5px; }
.fr.up { color: var(--up); } .fr.down { color: var(--down); }
.fr.x { font-weight: 700; padding: 1px 4px; margin: -1px -4px; border-radius: 4px; }
.fr.x.up { background: var(--up-bg); } .fr.x.down { background: var(--down-bg); }
.sp { color: var(--muted); }
.sp.w { color: var(--warn); font-weight: 600; }
.sp.h { color: var(--warn); font-weight: 700; padding: 1px 4px; margin: -1px -4px; border-radius: 4px; background: rgba(245, 165, 36, .14); }
.mk-table .chip { font-size: 10px; line-height: 15px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; }
.mk-table .chip .m { font-weight: 600; }
.mk-table td.c-lo, .mk-table td.c-hi { text-align: right; }
.mk-table .trade { font-size: 11px; padding: 2px 7px; margin-left: 2px; }
.mk-table td.c-trade { font-family: Inter, sans-serif; }
.mk-table .obar { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line); margin-top: 3px; margin-left: auto; width: 64px; }
.mk-table .obar i { display: block; float: left; height: 100%; background: var(--vc); }

/* Venue columns carry .c-v plus .c-<venue>; markets.js hides the columns of disabled exchanges. */

/* highlighted columns per view (tint drawn as background-image so row hover still shows) */
.mk[data-view="funding"] .mk-table :is(td, th):is(.c-v, .c-spread, .c-avg),
.mk[data-view="oi"] .mk-table :is(td, th):is(.c-oi, .c-oi1h, .c-oi4h, .c-oi24h),
.mk[data-view="arb"] .mk-table :is(td, th):is(.c-spread, .c-apr),
.mk[data-view="hl"] .mk-table :is(td, th):is(.c-hlf, .c-diff, .c-oi) {
  background-image: linear-gradient(var(--mk-hi), var(--mk-hi));
}
.mk[data-view="funding"] .mk-table th:is(.c-v, .c-spread, .c-avg),
.mk[data-view="oi"] .mk-table th:is(.c-oi, .c-oi1h, .c-oi4h, .c-oi24h),
.mk[data-view="arb"] .mk-table th:is(.c-spread, .c-apr),
.mk[data-view="hl"] .mk-table th:is(.c-hlf, .c-diff, .c-oi) { color: var(--text); }

/* two-row header (arbitrage view) */
.mk-table tr.mk-grp th.grp { text-align: center; padding: 8px 8px 3px; border-bottom: 0; }
.mk-table tr.mk-grp th.g-long { color: var(--up); }
.mk-table tr.mk-grp th.g-short { color: var(--down); }
.mk-table tr.mk-sub th { top: 24px; }
.mk-table th.g-long, .mk-table th.g-short { box-shadow: inset 0 -1px 0 var(--line2); }

.mk-more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); }
.mk-notes { display: grid; gap: 2px; }
.mk-notes .note { max-width: 120ch; line-height: 1.5; }
.mk-notes .note .up { color: var(--up); } .mk-notes .note .down { color: var(--down); }
#mk-count .paused { color: var(--warn); }

@media (max-width: 640px) {
  .mk-views { padding: 4px 16px 0; }
  .mk-views a { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .mk-filters { padding: 0 12px 10px; gap: 6px; }
  .mk-filters .search { flex: 1 1 120px; width: auto; }
  .mk-ftoggle { display: inline-flex; }
  .mk-fmore { display: none; }
  .mk-fmore.open { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
  .mk-scroll { max-height: 72vh; }
  .mk-table .c-coin { min-width: 0; }
  .mk:not([data-view="hl"]) .mk-table td.c-coin .tag { display: none; }
  .mk .stat-value .chip { display: none; }
}

/* live value change: a quieter flash than the alert feed's */
@keyframes mk-flash { 0%, 20% { background-color: rgba(179, 148, 255, .13); } 100% { background-color: transparent; } }
.mk-table td.chg { animation: mk-flash 1.4s ease-out; }
/* Funding interval tag next to a rate that is not paid every 8h (T-031). */
.mk-table .iv, .mk-notes .iv { margin-left: 3px; font-size: 10px; font-style: normal; color: var(--muted); vertical-align: 1px; }
/* ==== funding suite 2 (T-032) ==== */
/* /funding-rates/heatmap, /funding-rates/accumulated, /funding-arbitrage/calculator, /funding-arbitrage/hyperliquid
   and the persistence table on /funding-arbitrage. Heat classes from monitor/seo/funding_suite.heat_level():
   p1..p4 positive (longs pay), n1..n4 negative (shorts pay), z near the baseline, na no market. */
.fsuite, .fs-persist { --fh-up: 31, 207, 138; --fh-dn: 242, 73, 90; }
:root[data-theme="light"] .fsuite, :root[data-theme="light"] .fs-persist { --fh-up: 8, 158, 99; --fh-dn: 217, 45, 67; }
.fh-table { font-variant-numeric: tabular-nums; }
.fh-table td.c-v, .fh-table td.c-avg { padding-top: 3px; padding-bottom: 3px; }
.fh-table .c-avg { border-left: 1px solid var(--line2); }
.fh-table tfoot th, .fh-table tfoot td { border-top: 1px solid var(--line2); }
.fh { display: inline-block; min-width: 64px; padding: 2px 6px; border-radius: 5px; text-align: right; color: var(--text);
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.fh.na { color: var(--muted); background: none; }
.fh.z { color: var(--muted); }
.fh.p1 { background: rgba(var(--fh-up), .12); } .fh.n1 { background: rgba(var(--fh-dn), .12); }
.fh.p2 { background: rgba(var(--fh-up), .24); } .fh.n2 { background: rgba(var(--fh-dn), .24); }
.fh.p3 { background: rgba(var(--fh-up), .40); } .fh.n3 { background: rgba(var(--fh-dn), .40); }
.fh.p4 { background: rgba(var(--fh-up), .62); font-weight: 600; }
.fh.n4 { background: rgba(var(--fh-dn), .62); font-weight: 600; }
.fh.est { font-style: italic; }
.fh.part { outline: 1px dashed var(--line2); outline-offset: -1px; }
.fh-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 14px 12px; font-size: 12px; color: var(--muted); }
.fh-legend .fh { min-width: 0; font-family: Inter, sans-serif; font-size: 11.5px; }
.fsuite > .seglinks { justify-self: start; }
.fs-dir { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fs-bar { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: rgba(var(--fh-dn), .35); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.fs-bar > i { display: block; height: 100%; background: rgb(var(--fh-up)); }
.fs-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.fs-calc-legs td, .fs-calc-legs th { white-space: nowrap; }
.arb-calc-l { font-size: 11.5px; margin-left: 6px; }
/* ==== /funding suite 2 ==== */