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

/* Same breadcrumb component as coin.css; markets pages do not load that sheet. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--dim); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.crumbs + .pagehead { padding-top: 8px; }
@media (max-width: 640px) { .crumbs { padding-top: 12px; } }

.mk { --mk-hi: rgba(255, 255, 255, .025); --mk-change-bg: var(--bg); }
.mk #k-tot .stat-label { flex-wrap: wrap; }
.mk #k-tot .stat-label .tag { max-width: 100%; white-space: normal; }
:root[data-theme="light"] .mk { --mk-hi: rgba(16, 24, 40, .028); --mk-change-bg: var(--hover); }

/* ---- view tabs ---- */
.mk-views {
  display: flex; gap: 4px; padding-top: 6px; 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); }
.mk-views[data-contextual] { flex-wrap: wrap; min-width: 0; overflow: visible; }
.mk-views[data-contextual] a { height: auto; min-height: 32px; padding-block: 6px; white-space: normal; }
.mk-views[data-contextual] a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--conf); }
.mk-views a:focus-visible { outline: 2px solid var(--conf); outline-offset: 2px; }
.mk-views .mk-all-tools { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* 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-panel .mk-atr-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-atr-form .fsel { flex: none; }
@media (max-width: 640px), (pointer: coarse) {
  .mk-atr-form .fsel select { min-height: 44px; }
}
.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-compare { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: .8125rem; }
.mk-scroll:focus-visible { outline: 2px solid var(--conf); outline-offset: -2px; }
.mk-table .c-primary { display: none; }
.mk-table .c-primary small { font: inherit; font-weight: 400; color: var(--muted); }
.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); }

#mk-presetnote { padding-bottom: 8px; }
.mk-table td[tabindex]:focus-visible { outline: 2px solid var(--conf); outline-offset: -2px; }
.mk-table td[title] { cursor: help; }
.mk-tip {
  position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 8px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line2); box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  font-size: 12.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere;
}
.mk-tip[hidden] { display: none; }

@media (max-width: 640px) {
  .mk-views { padding-top: 4px; }
  .mk-views a { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .mk-views[data-contextual] a { height: auto; min-height: 44px; padding: 8px 10px; font-size: .8125rem; }
  /* T-1338: on phones the related-tool chips stay one sideways-scrolling row (site.js scrolls the current chip into
     view) instead of wrapping into ~6 rows above the data. Every link stays in the HTML and in the tab order; the
     focus ring is drawn inside the chip because the scrolling strip clips anything outside its padding box. */
  .mk-views[data-contextual] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .mk-views[data-contextual] a { flex: none; white-space: nowrap; }
  .mk-views[data-contextual] a:focus-visible { outline-offset: -2px; }
  .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-compare { padding-inline: 12px; }
  .mk-table .c-primary { display: table-cell; }
  .mk-table td.c-primary { font-size: .875rem; }
  .mk[data-view="funding"] .mk-table .c-avg:not(.c-primary),
  .mk[data-view="oi"] .mk-table .c-oi:not(.c-primary) { display: none; }
  .mk-fmore .fgroup { flex-wrap: wrap; min-width: 0; }
  .mk-fmore .tg { min-height: 44px; height: auto; white-space: normal; }
  .mk-filters > .btn, .mk-filters > .search { min-height: 44px; }
  /* T-1835: a symbol never breaks inside the word ('XYZ10' / '0'); the column grows to the longest visible symbol
     (JELLYJELLY still leaves the primary column on screen at 390px). The HL tag can still wrap below the symbol. */
  .mk-table .c-coin { min-width: 6rem; width: 8rem; white-space: normal; overflow-wrap: normal; }
  .mk-table .c-coin .coinlink { white-space: nowrap; }
  .mk:not([data-view="hl"]) .mk-table td.c-coin .tag { display: none; }
  .mk .stat-value .chip { display: none; }
}

/* Updated is neutral: .chg does not encode a rise/fall. Keep the signed
   value's existing up/down colors and use a neutral theme surface. Dark mode
   darkens the cell so red text stays readable even beneath the column tint. */
@keyframes mk-flash { 0%, 20% { background-color: var(--mk-change-bg); } 100% { background-color: transparent; } }
.mk-table td.chg { animation: mk-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  /* Cells retain .chg until replaced: a static underline marks updated values
     without repeatedly flashing or obscuring their direction/units. */
  .mk-table td.chg { animation: none; box-shadow: inset 0 -2px 0 var(--muted); }
}
/* 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); }
/* Keep small light text above 4.5:1 even over a hovered dark row. */
.fh.p4 { background: rgba(var(--fh-up), .50); font-weight: 600; }
:root[data-theme="light"] .fh.p4 { background: rgba(var(--fh-up), .62); }
.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 ==== */
/* T-666: touch tablets (pointer: coarse, wider than the phone layout above) get the same 44px filter targets. */
@media (pointer: coarse) {
  .mk-filters .tg, .mk-filters > .btn, .mk-filters > .search { min-height: 44px; }
}
/* T-794: "~" beside a 1d/7d/30d average whose window is only partly recorded; the tip shows on hover, focus and tap */
.pwin { cursor: help; color: var(--warn); font-weight: 700; margin-left: 2px; position: relative; outline-offset: 2px; line-height: 0; }
.pwin:hover::after, .pwin:focus::after { position: absolute; right: 0; top: 1.6em; z-index: 5; width: 15em; padding: 6px 8px; border-radius: 6px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line2); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); content: "Partial window: " attr(data-p) " of 720 h recorded (gaps count as missing). Average uses recorded hours only."; }
.c-f1d .pwin:hover::after, .c-f1d .pwin:focus::after { content: "Partial window: " attr(data-p) " of 24 h recorded (gaps count as missing). Average uses recorded hours only."; }
.c-f7d .pwin:hover::after, .c-f7d .pwin:focus::after { content: "Partial window: " attr(data-p) " of 168 h recorded (gaps count as missing). Average uses recorded hours only."; }
.mk-table td.c-f1d, .mk-table td.c-f7d, .mk-table td.c-f30d { white-space: nowrap; }
.pwin:hover::after, .pwin:focus::after { font-family: inherit; }
/* ---- touch hit areas for the hub utility links (T-2442) ----
   Measured at 375px before this: "Show all" 55x18, the "Funding views" / "Open interest views" / "More" links 20px tall at a
   25.5px pitch. Same invisible-hit-area pattern as app.css (T-666, T-720): drawn size unchanged, a transparent
   ::after makes the tappable box 44px tall, centred on the link, 3px wider each side (the 14px column gap keeps neighbours
   in a row apart).
   - "Show all": the row around it (.mk-more) is 12px padded and "Show 150 more" sits 12px away, so the box stays clear of it.
   - .crumbs (every page with a breadcrumb): links in a row meet at the 6px gap; wrapped rows get a 25px gap (19.5 + 25 = 44.5
     of pitch) so their boxes meet too. Breadcrumbs wrap rarely, so the page does not move.
   - .fs-links: wrapped rows get the same 25px gap (was 6px) so their 44px boxes meet instead of overlapping (an overlap left
     interior rows only 25px of their own). Taller rows were accepted for real non-overlapping targets (coordinator,
     2026-10-21): about +19px per wrapped row, the first and last row reach 22px into the space above and below. */
@media (max-width: 640px), (pointer: coarse) {
  .crumbs, .fs-links { row-gap: 25px; }
  .crumbs a, .mk-more .linkbtn, .fs-links a { position: relative; }
  .crumbs a::after, .mk-more .linkbtn::after, .fs-links a::after {
    content: ""; position: absolute; left: -3px; right: -3px; top: calc(50% - 22px); bottom: calc(50% - 22px);
  }
}