/* ==========================================================================
   home-ui.css — organised, patterned Home tab (pairs with home-ui.js).
   Reuses .sui-tabs / .sui-tab / .sui-tools from strategies-ui.css. Remove the <link>/<script> to revert.
   ========================================================================== */
.stab-off{display:none!important}
#view-live{padding-bottom:40px}
.hm-tabs{margin-left:22px;margin-right:22px;max-width:none}
@media(min-width:1444px){.hm-tabs{margin-left:auto;margin-right:auto;max-width:1400px}}

/* ---------- market strip: index / commodity cards ---------- */
#view-live .idx-label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:750;letter-spacing:.09em;color:var(--muted)}
#view-live .idx-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
#view-live .indices .icard{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--sh-1);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s}
#view-live .indices .icard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-strong)}
#view-live .indices .icard:has(.c.up)::before{background:var(--up)}
#view-live .indices .icard:has(.c.down)::before{background:var(--down)}
#view-live .indices .icard:has(.c.up){background:linear-gradient(135deg,color-mix(in srgb,var(--up) 7%,var(--panel)),var(--panel) 65%)}
#view-live .indices .icard:has(.c.down){background:linear-gradient(135deg,color-mix(in srgb,var(--down) 7%,var(--panel)),var(--panel) 65%)}
#view-live .indices .icard::after{content:"";position:absolute;right:-16px;bottom:-16px;width:62px;height:62px;border-radius:50%;pointer-events:none;opacity:.45;
  background:repeating-radial-gradient(circle,color-mix(in srgb,var(--line-strong) 80%,transparent) 0 1px,transparent 1px 7px)}
#view-live .indices .icard:has(.c.up)::after{background:repeating-radial-gradient(circle,color-mix(in srgb,var(--up) 30%,transparent) 0 1px,transparent 1px 7px)}
#view-live .indices .icard:has(.c.down)::after{background:repeating-radial-gradient(circle,color-mix(in srgb,var(--down) 30%,transparent) 0 1px,transparent 1px 7px)}
#view-live .indices .icard.chartable:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
#view-live .icard .n{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---------- panel cards ---------- */
#view-live .hcard{--fam:#b8892b;border:1px solid var(--line);border-top:3px solid var(--fam);border-radius:16px;
  background:var(--panel);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .2s var(--ease)}
#view-live .hcard:hover{box-shadow:var(--sh-2)}
#view-live .hcard-head{
  position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px 14px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--panel);transition:background-color .15s}
#view-live .hcard.collapsed .hcard-head{border-bottom:0}
#view-live .hcard-head:hover{background:color-mix(in srgb,var(--fam) 5%,var(--panel))}
#view-live .hcard-head::before{
  content:"";flex:0 0 auto;width:8px;height:8px;margin:0 6px 0 2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
#view-live .hcard.collapsed .hcard-head::before{transform:rotate(-45deg)}
#view-live .hcard-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fam) 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 42%)}
#view-live .hcard-head>*{position:relative;z-index:1}
#view-live .hcard-head h2{font-size:18px;font-weight:750;letter-spacing:-.018em;flex:0 1 auto;cursor:pointer}
#view-live .hcard-head .ph-meta{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--fam) 13%,transparent);color:color-mix(in srgb,var(--fam) 68%,var(--ink));
  border:1px solid color-mix(in srgb,var(--fam) 28%,transparent);white-space:nowrap}
#view-live .hcard-head .ph-meta:empty{display:none}
/* these three already carry their own headline chips — keep them visible whether open or closed */
#view-live .home-live-panel.hcard .ph-mini{display:inline-flex!important;margin-left:auto;align-items:center;gap:8px;flex-wrap:wrap}
#view-live .home-live-panel.hcard .ph-mini .brd-mini{display:inline-flex;gap:6px;align-items:baseline;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
#view-live .home-live-panel.hcard .ph-mini:empty{display:none!important}
#view-live .hcard .search{margin-left:auto}
#view-live .hcard-head .ghost{margin-left:auto;border-radius:999px;padding:5px 12px;font-size:12px}

/* generated chips */
#view-live .hcard-kpis{display:flex;align-items:stretch;margin-left:auto;flex:0 0 auto;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;box-shadow:var(--sh-1)}
#view-live .hcard-kpis.empty{display:none}
#view-live .hcard-kpis .sk{display:flex;flex-direction:column;justify-content:center;padding:7px 14px;min-width:78px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
#view-live .hcard-kpis .sk:first-child{border-left:0}
#view-live .hcard-kpis .sk small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#view-live .hcard-kpis .sk b{display:block;margin-top:2px;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
#view-live .hcard-kpis .sk.up b{color:var(--up)}
#view-live .hcard-kpis .sk.down b{color:var(--down)}
#view-live .hcard-kpis .sk.warn b{color:#b45309}
:root[data-theme="dark"] #view-live .hcard-kpis .sk.warn b{color:#fbbf24}
#view-live .hcard-head .search ~ .hcard-kpis,#view-live .hcard-head .ghost ~ .hcard-kpis{margin-left:0}

/* inside the cards */
#view-live .hcard .dash-body{padding:14px 22px 18px}
#view-live .hcard .dash-tiles{padding:14px 22px}
#view-live .hcard .dash-tile{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--sh-1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 6%,var(--panel)),var(--panel))}
#view-live .hcard .dash-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fam)}
#view-live .hcard .dt-val{font-size:22px;font-weight:750;letter-spacing:-.02em}
#view-live .hcard .dt-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#view-live .hcard table.quotes th{background:var(--panel2);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:10px 16px;position:static}
#view-live .hcard table.quotes td{padding:11px 16px}
#view-live .hcard table.quotes tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 50%,transparent)}
#view-live .hcard .act-day{border-radius:14px;box-shadow:var(--sh-1)}
#view-live .hcard .act-day-h{background:color-mix(in srgb,var(--fam) 9%,var(--panel2));border-bottom:1px solid var(--line)}
#view-live .hcard .act-total{display:inline-block;padding:3px 12px;border-radius:999px;opacity:1;font-weight:650;
  background:color-mix(in srgb,var(--fam) 12%,transparent);color:color-mix(in srgb,var(--fam) 70%,var(--ink))}
#view-live .hcard .empty{padding:26px 16px;text-align:center;color:var(--muted);border-radius:12px;
  background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 40%,transparent) 10px 11px)}
#view-live .hcard .act-filters button.on,#view-live .hcard .act-group button.on{background:color-mix(in srgb,var(--fam) 14%,var(--panel));border-color:var(--fam);color:var(--ink)}

/* admin Dhan panel + any non-tabbed panel: same card shell */
#view-live>.panel:not(.hcard){border-radius:16px;box-shadow:var(--sh-1);border-top:3px solid #ef4444}

@media(max-width:900px){
  .hm-tabs{margin-left:12px;margin-right:12px}
  #view-live .hcard-head{padding:14px 16px}
  #view-live .hcard-kpis{flex-basis:100%;margin-left:0;order:9}
  #view-live .hcard-kpis .sk{flex:1 1 0;min-width:0;padding:7px 10px}
  #view-live .hcard .dash-body{padding:12px 14px 16px}
}

/* intro text / filters sitting directly inside a card get the card's gutter */
#view-live .hcard>p,#view-live .hcard>.act-filters,#view-live .hcard>.calc-sub{margin-left:22px;margin-right:22px}
#view-live .hcard>p:first-of-type{margin-top:14px}
@media(max-width:900px){#view-live .hcard>p,#view-live .hcard>.act-filters,#view-live .hcard>.calc-sub{margin-left:14px;margin-right:14px}}