/* Market page header (Indian market, US market, crypto, commodities) — 2-Nov-2026.
   Compact card under the navbar with title, live status, quick links and six live tiles; the market switch sits
   below it with a clear gap (it used to be pulled 10 px up into the old hero and touched it). */
.mkh{padding:14px 0 0}
.mkh-card{position:relative;border-radius:22px;padding:18px 20px 16px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,15,12,.04),0 14px 34px -22px rgba(20,15,12,.28);overflow:hidden}
.mkh-card::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;
  background:radial-gradient(600px 140px at 0% 0%,color-mix(in srgb,var(--brand,#ff1a2e) 9%,transparent),transparent 70%),
             radial-gradient(500px 140px at 100% 0%,rgba(59,130,246,.07),transparent 70%)}
.mkh-top{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.mkh-copy{min-width:0;flex:1 1 420px}
.mkh-crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-bottom:6px;flex-wrap:wrap}
.mkh-crumbs a{color:var(--ink-3);text-decoration:none}.mkh-crumbs a:hover{color:var(--brand,#ff1a2e)}
.mkh-crumbs b{color:var(--ink-2);font-weight:700}
.mkh-title{margin:0;font:800 clamp(24px,2.5vw,34px)/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mkh-title em{font-style:normal;color:var(--brand,#ff1a2e)}
.mkh-lead{margin:6px 0 0;font-size:clamp(13px,1vw,14.5px);line-height:1.5;color:var(--ink-2);max-width:720px}
.mkh-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 1 auto}
.mkh-status{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-size:12.5px}
.mkh-status small{color:var(--ink-3);font-size:12px}
.mkh-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mkh-links a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);font:700 12.5px var(--font);text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.mkh-links a:hover{border-color:var(--brand,#ff1a2e);color:var(--brand,#ff1a2e);background:color-mix(in srgb,var(--brand,#ff1a2e) 5%,transparent)}
.mkh-links svg{width:14px;height:14px}

/* six live tiles */
.mkh-tiles{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px}
.mkh-t{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l p" "v v" "s s";align-items:center;gap:2px 8px;
  min-width:0;padding:11px 12px 10px;border-radius:14px;background:var(--soft,#f8f6f4);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:transform .15s,box-shadow .15s,border-color .15s;overflow:hidden}
a.mkh-t:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand,#ff1a2e) 35%,var(--line));box-shadow:0 10px 22px -16px rgba(20,15,12,.4)}
.mkh-t::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--line)}
.mkh-t.up::after{background:var(--up)}.mkh-t.down::after{background:var(--down)}
.mkh-t small{grid-area:l;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkh-t em{grid-area:p;font-size:11px;padding:2px 7px;justify-self:end}
.mkh-t b{grid-area:v;font:800 clamp(16px,1.35vw,20px)/1.25 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.mkh-t b i{font-style:normal;font-size:.8em}.mkh-t b i.up{color:var(--up)}.mkh-t b i.down{color:var(--down)}
.mkh-t b .up{color:var(--up)}.mkh-t b .down{color:var(--down)}
.mkh-sub{grid-area:s;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkh-t.up .mkh-sub{color:color-mix(in srgb,var(--up) 75%,var(--ink-3))}.mkh-t.down .mkh-sub{color:color-mix(in srgb,var(--down) 75%,var(--ink-3))}
/* breadth / dominance / mood bar */
.mkh-br{grid-column:1/-1;display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--down) 55%,transparent);overflow:hidden;margin-top:5px}
.mkh-br i{display:block;height:100%;width:var(--w);background:var(--up);border-radius:99px;transition:width .4s ease}
.mkh-br.amber{background:var(--bg-2)}.mkh-br.amber i{background:#f7931a}
.mkh-br.fg{background:linear-gradient(90deg,#dc2626,#f59e0b 45%,#16a34a)}.mkh-br.fg i{background:none;box-shadow:inset -3px 0 0 #111827;border-radius:0}

/* the market switch: a clear gap under the card (fixes the buttons touching it) */
.mkh + .mk-strip2,.mkh + .mk-sent + .mk-strip2{margin-top:12px!important;margin-bottom:8px}

@media (max-width:1180px){
  .mkh-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mkh-side{align-items:flex-start;flex:1 1 100%}
  .mkh-status,.mkh-links{justify-content:flex-start}
}
@media (max-width:640px){
  .mkh{padding-top:10px}
  .mkh-card{border-radius:18px;padding:14px 12px 12px}
  .mkh-lead{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mkh-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
  .mkh-t{padding:9px 10px 8px;border-radius:12px}
  .mkh-t small{font-size:10px}
  .mkh-t em{font-size:10px;padding:1px 5px}
  .mkh-sub{font-size:10.5px}
  .mkh-links{gap:5px;overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
  .mkh-links::-webkit-scrollbar{display:none}
  .mkh-links a{height:30px;padding:0 10px;font-size:12px}
  .mkh + .mk-strip2,.mkh + .mk-sent + .mk-strip2{margin-top:10px!important}
}
html[data-theme="dark"] .mkh-card{box-shadow:0 14px 34px -22px rgba(0,0,0,.7)}
html[data-theme="dark"] .mkh-t{background:color-mix(in srgb,var(--card) 70%,#000)}