/* 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; }