/* ==========================================================================
   strategies-ui.css — organised, patterned layout for the Strategies tab.
   Pairs with strategies-ui.js. Nothing is removed from the page: sections are
   re-presented as family tabs + collapsible desk cards. Remove the <link> and
   <script> to get the old layout back.
   ========================================================================== */

/* ---------- family colours ---------- */
#view-strategies [data-stab="overview"]{--fam:#b8892b}
#view-strategies [data-stab="ema"]{--fam:#b8892b}
#view-strategies [data-stab="rsi"]{--fam:#b8892b}
#view-strategies [data-stab="sma"]{--fam:#b8892b}
#view-strategies [data-stab="supertrend"]{--fam:#b8892b}
#view-strategies [data-stab="options"]{--fam:#b8892b}
#view-strategies [data-stab="breakout"]{--fam:#b8892b}
#view-strategies [data-stab="journal"]{--fam:#b8892b}
#view-strategies [data-stab="parked"]{--fam:#b8892b}
.stab-off{display:none!important}

#view-strategies{padding:0 22px 40px}

/* ---------- hero ---------- */
.sui-hero{
  position:relative;overflow:hidden;max-width:1400px;margin:var(--space-5) auto 0;
  border-radius:20px;padding:30px 34px 28px;color:#eaf1fb;
  background:
    radial-gradient(900px 300px at 85% -20%,rgba(99,152,255,.45),transparent 60%),
    linear-gradient(135deg,#0b1f3a 0%,#12305f 55%,#1a3f7a 100%);
  box-shadow:var(--sh-2);
}
.sui-hero::before{ /* dot grid */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 1.5px) 0 0/18px 18px;
  -webkit-mask-image:linear-gradient(100deg,transparent 10%,#000 70%);mask-image:linear-gradient(100deg,transparent 10%,#000 70%);
}
.sui-hero-art{position:absolute;right:0;top:0;height:100%;width:min(52%,620px);pointer-events:none;opacity:.9}
.sui-hero-art svg{width:100%;height:100%}
.sui-hero-in{position:relative;max-width:640px}
.sui-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#9cc0ff;text-transform:uppercase}
.sui-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,#63b3ed,transparent)}
.sui-hero h1{margin:10px 0 8px;font-size:34px;line-height:1.1;letter-spacing:-.025em;color:#fff;font-weight:750}
.sui-hero p{margin:0;font-size:14px;line-height:1.6;color:#b9cbe6;max-width:56ch}
.sui-kpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sui-kpi{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:104px}
.sui-kpi b{display:block;font-size:22px;font-weight:750;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.sui-kpi span{display:block;margin-top:3px;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#9cc0ff}

/* ---------- tab bar ---------- */
.sui-tabs-wrap{
  position:sticky;top:calc(var(--topbar-h,57px) + var(--ticker-h,0px));z-index:4;max-width:1400px;margin:14px auto 6px;padding:8px 0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
}
.sui-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.sui-tabs::-webkit-scrollbar{display:none}
.sui-tab{
  --fam:#b8892b;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,transform .12s;
}
.sui-tab i{width:8px;height:8px;border-radius:50%;background:var(--fam);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--fam) 22%,transparent)}
.sui-tab em{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--muted);font-variant-numeric:tabular-nums}
.sui-tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--fam) 55%,var(--line));transform:translateY(-1px)}
.sui-tab.on{
  color:var(--ink);border-color:var(--fam);
  background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 14%,var(--panel)),var(--panel));
  box-shadow:0 0 0 1px var(--fam),0 6px 16px color-mix(in srgb,var(--fam) 22%,transparent);
}
.sui-tab.on em{background:var(--fam);color:#fff}
.sui-tools{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;padding-left:14px;position:sticky;right:0;background:linear-gradient(90deg,transparent,var(--bg) 14px)}
.sui-tools button{padding:6px 11px;font-size:12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:600}
.sui-tools button:hover{color:var(--ink);border-color:var(--line-strong)}

/* ---------- flatten the old family accordion (tabs replace it) ---------- */
#view-strategies .strat-topgroup{border:0;background:transparent;overflow:visible;margin:0 auto}
#view-strategies .strat-topgroup-head{display:none}
#view-strategies .strat-topgroup-body,
#view-strategies .strat-topgroup-body[hidden]{display:block!important;padding:0}
#view-strategies .strat-topgroup-body>*:first-child{margin-top:0}

/* ---------- desk cards ---------- */
#view-strategies .sdesk{
  max-width:1400px;margin:0 auto 14px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);box-shadow:var(--sh-1);overflow:hidden;
  border-top:3px solid var(--fam,var(--teal));
  transition:box-shadow .2s var(--ease),border-color .2s;
}
#view-strategies .sdesk:hover{box-shadow:var(--sh-2)}
#view-strategies .sdesk.desk-collapsed{border-top-width:3px}

#view-strategies .sdesk-head{
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:flex-start;gap:14px;
  padding:18px 22px;background:var(--panel);
  border-bottom:1px solid var(--line);
  transition:background-color .15s;
}
#view-strategies .sdesk.desk-collapsed .sdesk-head{border-bottom:0}
#view-strategies .sdesk-head:hover{background:color-mix(in srgb,var(--fam) 5%,var(--panel))}
#view-strategies .sdesk-head::after{ /* dot-grid pattern fading in from the right */
  content:"";position:absolute;inset:0;pointer-events:none;
  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 48%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 48%);
  opacity:.55;
}
#view-strategies .sdesk-head>*{position:relative;z-index:1}
#view-strategies .sdesk-head::before{ /* chevron */
  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);position:relative;z-index:1;
}
#view-strategies .sdesk.desk-collapsed .sdesk-head::before{transform:rotate(-45deg)}
#view-strategies .sdesk-head .desk-toggle{display:none}
#view-strategies .sdesk-head .desk-titlewrap{flex:1 1 auto;cursor:inherit;min-width:0}
#view-strategies .sdesk-head>div:not(.desk-titlewrap){flex:1 1 auto;min-width:0}
#view-strategies .sdesk-head>button,#view-strategies .sdesk-head>a{margin-left:auto;flex:0 0 auto}

#view-strategies .sdesk-head span{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
  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);
  max-width:100%;white-space:normal;
}
#view-strategies .sdesk-head h1,#view-strategies .sdesk-head h2{
  font-size:21px;line-height:1.25;margin:8px 0 4px;font-weight:750;letter-spacing:-.02em;color:var(--ink);
}
#view-strategies .sdesk-head p{
  margin:0;font-size:13px;line-height:1.55;color:var(--muted);max-width:92ch;
}
#view-strategies .sdesk.desk-collapsed .sdesk-head p{
  display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* a second heading row inside a desk (e.g. forward-test sync bar) stays hidden while collapsed */
#view-strategies .sdesk.desk-collapsed>.sdesk-head~[class*="-heading"]{display:none!important}
#view-strategies .sdesk>[class*="-heading"]:not(.sdesk-head){background:transparent;padding:10px 22px}

/* inner rhythm */
#view-strategies .sdesk>:not(.sdesk-head):not(details):not(.hidden){margin-left:22px;margin-right:22px}
#view-strategies .sdesk>.sma200-table,#view-strategies .sdesk>.ema5-table,#view-strategies .sdesk>.sma200-controls,
#view-strategies .sdesk>.ema5-controls,#view-strategies .sdesk>.ema5-pages,#view-strategies .sdesk>.sma200-pages{margin-left:0;margin-right:0}
#view-strategies .sdesk>:not(.sdesk-head):nth-child(2){margin-top:18px}
#view-strategies .sdesk>:last-child{margin-bottom:20px}
#view-strategies .sdesk>p,#view-strategies .sdesk>.calc-sub{padding:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
#view-strategies .sdesk .sma200-live,#view-strategies .sdesk .ema5-live,
#view-strategies .sdesk .sma200-stats,#view-strategies .sdesk .ema5-stats{padding-left:0;padding-right:0}

/* sub-headings inside desks → small accent labels */
#view-strategies .orb-h3,#view-strategies .emaconj-scan-h,#view-strategies .emaconj-perf-h,#view-strategies .w52f-h{
  display:flex;align-items:center;gap:10px;margin:22px 0 10px;padding:0;border:0;
  font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
#view-strategies .orb-h3::before,#view-strategies .emaconj-scan-h::before,#view-strategies .emaconj-perf-h::before,#view-strategies .w52f-h::before{
  content:"";width:4px;height:14px;border-radius:2px;background:var(--fam,var(--teal));flex:0 0 auto
}
#view-strategies .orb-h3::after,#view-strategies .emaconj-scan-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- KPI tiles ---------- */
#view-strategies .n52-tiles{gap:12px;margin-bottom:16px}
#view-strategies .n52-tile,
#view-strategies .sma200-stats>div,#view-strategies .ema5-stats>div{
  position:relative;text-align:left;padding:14px 16px 13px;border:1px solid var(--line);
  border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 6%,var(--panel)),var(--panel));
  box-shadow:var(--sh-1);overflow:hidden;
}
#view-strategies .n52-tile::before,#view-strategies .sma200-stats>div::before,#view-strategies .ema5-stats>div::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fam,var(--teal));opacity:.85
}
#view-strategies .n52-tile::after{ /* faint corner pattern */
  content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;
  background:repeating-radial-gradient(circle,color-mix(in srgb,var(--fam) 22%,transparent) 0 1px,transparent 1px 7px);opacity:.5;pointer-events:none
}
#view-strategies .n52-tile span,#view-strategies .sma200-stats span,#view-strategies .ema5-stats span{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#view-strategies .n52-tile b,#view-strategies .sma200-stats strong,#view-strategies .ema5-stats strong{
  font-size:24px;font-weight:750;letter-spacing:-.02em;margin:6px 0 3px;color:var(--ink)}
#view-strategies .n52-tile.good b{color:var(--up)}
#view-strategies .n52-tile.bad b{color:var(--down)}
#view-strategies .n52-tile small{font-size:11.5px;color:var(--muted);line-height:1.4}

/* ---------- controls: segmented buttons ---------- */
#view-strategies .sdesk .sma200-controls>div,#view-strategies .sdesk .ema5-controls>div,#view-strategies .orb-tabs{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
#view-strategies .sdesk .sma200-controls button,#view-strategies .sdesk .ema5-controls button,#view-strategies .orb-tabs button{
  border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 14px;font-weight:650;font-size:12.5px}
#view-strategies .sdesk button[aria-pressed=true],#view-strategies .orb-tabs button.on,#view-strategies .orb-tabs button.active{
  background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(15,27,45,.18),0 0 0 1px var(--line)}
:root[data-theme="dark"] #view-strategies .sdesk button[aria-pressed=true]{background:var(--blue-soft);color:var(--teal)}

/* ---------- tables ---------- */
#view-strategies .sdesk table{border-collapse:separate;border-spacing:0;font-size:12.5px}
#view-strategies .sdesk th{
  background:var(--panel2);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
#view-strategies .sdesk th.r,#view-strategies .sdesk td.r{text-align:right}
#view-strategies .sdesk td{padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-variant-numeric:tabular-nums}
#view-strategies .sdesk tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 55%,transparent)}
#view-strategies .sdesk tbody tr:hover td{background:color-mix(in srgb,var(--fam) 8%,var(--panel))}
#view-strategies .sdesk tbody tr:last-child td{border-bottom:0}
#view-strategies .sdesk td.pos,#view-strategies .sdesk .pos{color:var(--up);font-weight:650}
#view-strategies .sdesk td.neg,#view-strategies .sdesk .neg{color:var(--down);font-weight:650}
#view-strategies .sdesk .sma200-table,#view-strategies .sdesk .ema5-table{border-top:1px solid var(--line)}

/* year / month heat-map cells (intensity set by strategies-ui.js as --heat) */
#view-strategies td.allstrat-year{border-radius:0;font-weight:650;text-align:center}
#view-strategies td.allstrat-year.up{
  color:color-mix(in srgb,var(--up) 85%,var(--ink));
  background:color-mix(in srgb,var(--up) calc(8% + var(--heat,.2)*34%),transparent)!important}
#view-strategies td.allstrat-year.down{
  color:color-mix(in srgb,var(--down) 85%,var(--ink));
  background:color-mix(in srgb,var(--down) calc(8% + var(--heat,.2)*34%),transparent)!important}
#view-strategies td.allstrat-year.na{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--line) 70%,transparent) 5px 6px)!important;color:var(--muted)}
#view-strategies .allstrat-table td:nth-child(1),#view-strategies .allstrat-table td:nth-child(2){background:var(--panel)!important}
#view-strategies .pnlcal-total td{background:var(--panel2)!important;border-top:1.5px solid var(--line-strong)}

/* ---------- misc blocks ---------- */
#view-strategies .sdesk details{
  margin:14px 22px 0;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
#view-strategies .sdesk details[open]{background:color-mix(in srgb,var(--fam) 4%,var(--panel2))}
#view-strategies .sdesk summary{color:var(--ink);font-weight:650;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px}
#view-strategies .sdesk summary::-webkit-details-marker{display:none}
#view-strategies .sdesk summary::before{content:"＋";color:var(--fam);font-weight:800;width:14px}
#view-strategies .sdesk details[open] summary::before{content:"−"}
#view-strategies .orb-callout,#view-strategies .e920-now{border-radius:12px}
#view-strategies .chatgpt-backtest-cards{margin-top:0}
#view-strategies .chatgpt-backtest-card{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--fam) 6%,var(--panel)),var(--panel))}
#view-strategies .chatgpt-backtest-card::after{
  content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%;
  background:repeating-radial-gradient(circle,color-mix(in srgb,var(--fam) 24%,transparent) 0 1px,transparent 1px 8px);opacity:.5}
#view-strategies .chatgpt-backtest-kpis div{border:1px solid var(--line);background:var(--panel);border-radius:12px}
#view-strategies .chatgpt-backtest-kpis strong{color:var(--up)}
#view-strategies .chatgpt-backtest-kpis strong.negative{color:var(--down)}
#view-strategies .chatgpt-backtest-heading{border-bottom:1px solid var(--line)}
#view-strategies .chatgpt-backtest-table{margin-top:16px}

/* non-desk panels (journal, graveyard) match the card language */
#view-strategies>.panel,#view-strategies .strat-topgroup-body>.panel{
  max-width:1400px;margin:0 auto 14px;border-radius:16px;border-top:3px solid var(--fam,var(--line));box-shadow:var(--sh-1)}
#view-strategies #rejected-panel{margin-top:0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  #view-strategies{padding:0 12px 32px}
  .sui-hero{padding:22px 20px;border-radius:16px}
  .sui-hero h1{font-size:26px}
  .sui-hero-art{opacity:.35;width:80%}
  .sui-tools{display:none}
  #view-strategies .sdesk{border-radius:14px}
  #view-strategies .sdesk-head{padding:14px 16px}
  #view-strategies .sdesk-head h1,#view-strategies .sdesk-head h2{font-size:18px}
  #view-strategies .sdesk>:not(.sdesk-head):not(details):not(.hidden){margin-left:14px;margin-right:14px}
}

/* ---------- headline numbers in desk headers ---------- */
:is(#view-strategies,#view-screeners) .sdesk-kpis{display:flex;align-items:stretch;gap:0;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)}
:is(#view-strategies,#view-screeners) .sdesk-kpis.empty{display:none}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk{display:flex;flex-direction:column;justify-content:center;padding:8px 14px;min-width:78px;
  border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk:first-child{border-left:0}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk b{display:block;margin-top:2px;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk.up b{color:var(--up)}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk.down b{color:var(--down)}
:is(#view-strategies,#view-screeners) .sdesk-kpis ~ button,:is(#view-strategies,#view-screeners) .sdesk-kpis ~ a{margin-left:0!important}
:is(#view-strategies,#view-screeners) .sdesk-head>.sdesk-kpis{position:relative;z-index:1}
@media(max-width:1100px){
  #view-strategies .sdesk-head{flex-wrap:wrap}
  :is(#view-strategies,#view-screeners) .sdesk-kpis{flex-basis:100%;margin-left:0;order:9}
  :is(#view-strategies,#view-screeners) .sdesk-kpis .sk{flex:1 1 0;min-width:0;padding:7px 10px}
}

/* ---------- alignment pass (2026-10-03) ----------
   Headline chips sit on a fixed 4-column grid so every card's chips start at the same x and line up
   row to row; header content aligns to the title row; stray empty badges are hidden. */
:is(#view-strategies,#view-screeners) .sdesk-kpis{
  display:grid;grid-template-columns:repeat(4,128px);gap:8px;align-items:stretch;align-self:center;justify-content:end;
  border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;margin-left:auto;flex:0 0 auto}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk{
  min-width:0;padding:8px 12px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:12px;
  background:var(--panel);box-shadow:var(--sh-1);overflow:hidden}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk:first-child{border-left:1px solid var(--line)}
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk small,
:is(#view-strategies,#view-screeners) .sdesk-kpis .sk b{overflow:hidden;text-overflow:ellipsis}
#view-strategies .sdesk-head{align-items:flex-start}
#view-strategies .sdesk-head::before{margin-top:36px}                 /* chevron sits on the title line, not mid-block */
#view-strategies .sdesk-head>.desk-titlewrap,#view-strategies .sdesk-head>div:not(.desk-titlewrap):not(.sdesk-kpis){align-self:stretch}
#view-strategies .sdesk-head span:empty{display:none}
#view-strategies .sdesk-head>button,#view-strategies .sdesk-head>a{align-self:center}
#view-screeners .scr-card>.panel-head{align-items:center}
@media(max-width:1100px){
  :is(#view-strategies,#view-screeners) .sdesk-kpis{grid-template-columns:repeat(4,minmax(0,1fr));flex-basis:100%;width:100%;margin-left:0;justify-content:stretch}
  #view-strategies .sdesk-head::before{margin-top:6px}
}