/* Strategies tab · scoped port of docs/strategies-tab-mockup.html (generated, then hand-tuned below) */
[hidden]{display:none!important}
:root{--live-tint:color-mix(in srgb,var(--pos) 4%,var(--surface));--rowpad:9px}
/* all tabs share the 1560px page width (.wrap in styles.css) */

/* tabs + page frame live in styles.css */
#view-strategies{gap:16px}

/* mockup base bits that were global there */
#view-strategies button{font:inherit}
#view-strategies .muted{color:var(--muted)} #view-strategies .faint{color:var(--faint)} #view-strategies .warn{color:var(--warn)}
#view-strategies h2{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#view-strategies .dot{width:8px;height:8px;border-radius:50%;background:var(--pos);flex:none;display:inline-block;box-shadow:none}
#view-strategies .dot.off{background:var(--faint)} #view-strategies .dot.warn{background:var(--warn)} #view-strategies .dot.bad{background:var(--neg)}
#view-strategies .btn{font-size:12px;font-weight:600;color:var(--text);background:var(--raised);border:1px solid var(--line-strong);border-radius:6px;padding:5px 10px;cursor:pointer;white-space:nowrap}
#view-strategies .btn:hover{border-color:var(--muted)}
#view-strategies .btn.primary{border-color:color-mix(in srgb,var(--pos) 50%,transparent);color:var(--pos);background:color-mix(in srgb,var(--pos) 7%,var(--raised))}
#view-strategies .btn.danger{border-color:color-mix(in srgb,var(--neg) 50%,transparent);color:var(--neg)}
#view-strategies .btn:disabled{opacity:.4;cursor:default}
#view-strategies :focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* summary */
#view-strategies .summary{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#view-strategies .sum{flex:1 1 170px;background:var(--surface);padding:16px 20px;display:flex;flex-direction:column;gap:5px;text-align:left;border:0;color:inherit;min-width:0}
#view-strategies button.sum{cursor:pointer} #view-strategies button.sum:hover{background:var(--raised)}
#view-strategies .sum .l{font-size:12px;color:var(--muted);font-weight:600}
#view-strategies .sum .v{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
#view-strategies .sum .s{font-size:12px;color:var(--muted)}
#view-strategies .allocbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line-soft);margin-top:3px}
#view-strategies .allocbar span{height:100%}

/* layout */
#view-strategies .shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){#view-strategies .shell{grid-template-columns:1fr}}
#view-strategies .side{position:sticky;top:calc(var(--topbar) + 14px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - var(--topbar) - 28px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 6px}
@media (max-width:980px){#view-strategies .side{position:static;max-height:none}}
#view-strategies .side details{background:none;border:0;border-bottom:1px solid var(--line)} #view-strategies .side details:last-child{border-bottom:0}
#view-strategies .side details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#view-strategies .side details>summary::-webkit-details-marker{display:none}
#view-strategies .side details>summary::after{content:"▾";font-size:10px;color:var(--faint)}
#view-strategies .side details:not([open])>summary::after{content:"▸"}
#view-strategies .facet{padding:0 8px 8px;display:flex;flex-direction:column;gap:1px}
#view-strategies .opt{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;font-size:12.5px;cursor:pointer;color:var(--text)}
#view-strategies .opt:hover{background:var(--raised)}
#view-strategies .opt input{accent-color:var(--accent);margin:0}
#view-strategies .opt .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
#view-strategies .opt.zero{color:var(--muted);opacity:.7}
#view-strategies .views{display:flex;flex-wrap:wrap;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px}
#view-strategies .view{all:unset;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
#view-strategies .view:hover{color:var(--text)}
#view-strategies .view:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#view-strategies .view[aria-current="true"]{background:var(--raised);color:var(--text);box-shadow:0 0 0 1px var(--line-strong)}
#view-strategies .view .c{font-family:var(--mono);font-size:11px;color:var(--muted)}
#view-strategies .view .c.hot{color:var(--neg)}
#view-strategies input[type=search]{width:220px;max-width:100%}
#view-strategies .tb-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:0}
#view-strategies .tb-sub:empty{display:none}
#view-strategies .mini{font-size:11.5px;color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 6px;text-align:left}
#view-strategies .shell.nofilters{grid-template-columns:minmax(0,1fr)}#view-strategies .shell.nofilters .side{display:none}
@media (max-width:980px){#view-strategies .side.collapsed{display:none}}

/* toolbar */
#view-strategies .main{display:flex;flex-direction:column;gap:10px;min-width:0}
#view-strategies .toolbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
#view-strategies .tb-left,#view-strategies .tb-right{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#view-strategies .active{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 4px 3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
#view-strategies .active b{font-weight:500;color:var(--muted)}
#view-strategies .active button{all:unset;cursor:pointer;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
#view-strategies .active button:hover{background:var(--surface-3);color:var(--text)}
#view-strategies .resultcount{font-size:12.5px;color:var(--muted)}
#view-strategies .chip{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
#view-strategies .chip[aria-pressed="true"]{color:var(--text);background:var(--raised);border-color:var(--line-strong)}
#view-strategies .lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-left:6px}
#view-strategies select,#view-strategies input[type=search]{font:inherit;font-size:12.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;padding:6px 9px}
#view-strategies .bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-radius:8px;font-size:12.5px}
#view-strategies .bulk b{font-family:var(--mono)}

/* table */
#view-strategies .tablewrap{overflow:auto;max-height:calc(100vh - var(--topbar) - 110px);min-height:360px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overscroll-behavior:contain}
#view-strategies table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
#view-strategies th,#view-strategies td{padding:var(--rowpad) 10px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
#view-strategies thead th{position:sticky;background:var(--raised);font-weight:600;color:var(--muted);font-size:11px;z-index:4}
#view-strategies thead tr.groups th{top:0;height:30px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line-strong)}
#view-strategies thead tr.cols th{top:30px}
#view-strategies thead tr.groups th.g-live{color:var(--pos);background:color-mix(in srgb,var(--pos) 8%,var(--raised))}
#view-strategies td.live{background:var(--live-tint)}
#view-strategies thead tr.cols th.live{background:color-mix(in srgb,var(--pos) 6%,var(--raised))}
#view-strategies .split{border-left:2px solid color-mix(in srgb,var(--pos) 45%,var(--line))!important}
#view-strategies th button.s{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
#view-strategies th .arr{color:var(--faint);font-size:10px} #view-strategies th[aria-sort] .arr{color:var(--accent)}
#view-strategies .r{text-align:right!important}
#view-strategies .stick{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--line)}
#view-strategies thead th.stick{z-index:6;background:var(--raised)}
#view-strategies tbody tr.row:hover td{background:var(--raised)}
#view-strategies tbody tr.row.sel td{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
#view-strategies tbody tr.row.dim td>*{opacity:.55}
#view-strategies tr.grp td{position:sticky;top:var(--hdr,62px);z-index:3;background:var(--raised);padding-block:7px;border-bottom:1px solid var(--line);cursor:pointer}
#view-strategies tr.grp td .g{display:flex;align-items:center;gap:10px;font-size:12.5px;position:sticky;left:10px;width:max-content}
#view-strategies tr.grp .gname{font-weight:600}
#view-strategies tr.grp .gmeta{color:var(--muted);font-size:12px}
#view-strategies .namecell{display:flex;align-items:center;gap:8px;min-width:220px;max-width:280px}
#view-strategies .namecell input{accent-color:var(--accent);margin:0}
#view-strategies .namecell i{width:8px;height:8px;border-radius:2px;flex:none}
#view-strategies .namecell .t{min-width:0}
#view-strategies .namecell b{font-weight:700;font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis}
#view-strategies .namecell .id{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
#view-strategies .star{color:var(--warn);font-size:11px;margin-left:4px}
#view-strategies .exp{all:unset;cursor:pointer;width:18px;height:18px;display:grid;place-items:center;border-radius:4px;color:var(--muted);flex:none}
#view-strategies .exp:hover{background:var(--surface-3);color:var(--text)}
#view-strategies .exp svg{transition:transform .15s}
#view-strategies tr.open .exp svg{transform:rotate(90deg)}
#view-strategies .pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap;display:inline-block;border:1px solid transparent}
#view-strategies .pill.live{color:#0A0D12;background:var(--pos)}
#view-strategies .pill.dry{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
#view-strategies .pill.paused{color:var(--muted);border:1px dashed var(--line-strong)}
#view-strategies .pill.candidate{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#view-strategies .pill.alerts{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent)}
#view-strategies .pill.retired{color:var(--muted);background:var(--raised)}
#view-strategies .health{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
#view-strategies .coins{display:flex;gap:3px}
#view-strategies .coin{font-family:var(--mono);font-size:10.5px;padding:1px 5px;border-radius:3px;background:var(--raised);border:1px solid var(--line-strong)}
#view-strategies .fam{font-size:12px;color:var(--muted)}
#view-strategies .rule{white-space:normal;min-width:220px;max-width:300px;font-size:12px;color:var(--muted)}
#view-strategies .vs{display:flex;align-items:center;gap:6px;justify-content:flex-end}
#view-strategies .vs .track{width:44px;height:5px;background:var(--raised);border-radius:3px;position:relative;overflow:hidden}
#view-strategies .vs .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
#view-strategies .vs .tick{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--muted)}
#view-strategies .flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--warn)}
#view-strategies .acts{display:flex;gap:5px}

#view-strategies tr.detail td{padding:0;background:var(--ground)}
#view-strategies .detail-inner{position:sticky;left:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
#view-strategies .detail-inner>div{background:var(--surface);padding:16px 20px;display:flex;flex-direction:column;gap:10px;white-space:normal}
#view-strategies .detail-inner>div.lv{background:var(--live-tint)}
#view-strategies dl{margin:0;display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:12.5px}
#view-strategies dt{color:var(--muted)} #view-strategies dd{margin:0}
#view-strategies .confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:6px;font-size:12.5px;background:color-mix(in srgb,var(--warn) 7%,transparent)}
@media (max-width:760px){#view-strategies .detail-inner{grid-template-columns:1fr}}

#view-strategies .pager{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted)}
#view-strategies .pager .pg{display:flex;gap:6px;align-items:center}
#view-strategies .note{font-size:12px;color:var(--muted);margin:0}
#view-strategies .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--line);padding:8px 14px;border-radius:6px;font-size:12.5px;z-index:20}
#view-strategies .panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;color:var(--muted);font-size:13px}
/* Compact is the default: one line per strategy (~34px). body.comfy (Row size: Comfortable) brings the second lines back. */
#view-strategies{--rowpad:5px}
#view-strategies tbody tr.row{height:34px}
#view-strategies .namecell .id{display:none}
#view-strategies .namecell b{white-space:nowrap}
#view-strategies .hwhy{display:none}
#view-strategies .hinfo{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-strong);font-size:10px;font-weight:700;color:var(--muted);cursor:help;margin-left:2px}
body.comfy #view-strategies{--rowpad:9px}
body.comfy #view-strategies tbody tr.row{height:auto}
body.comfy #view-strategies .namecell .id{display:block}
body.comfy #view-strategies .hwhy{display:block;font-size:10.5px;color:var(--muted);max-width:170px;overflow:hidden;text-overflow:ellipsis}
body.comfy #view-strategies .hinfo{display:none}
#view-strategies .sseg{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px}
#view-strategies .sseg button{background:none;border:0;border-radius:6px;color:var(--muted);font-weight:600;font-size:12px;padding:3px 9px;cursor:pointer}
#view-strategies .sseg button[aria-pressed="true"]{background:var(--raised);color:var(--text);box-shadow:0 0 0 1px var(--accent)}
/* slimmer summary strip: label, value and note on one line */
#view-strategies .sum{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 16px}
#view-strategies .sum .v{font-size:19px}
#view-strategies .sum .s{margin-left:auto}
#view-strategies .sum .allocbar{width:56px;align-self:center;margin-top:0}
@media (max-width:520px){#view-strategies .wrap{padding-inline:16px}}
@media (prefers-reduced-motion:reduce){#view-strategies .exp svg{transition:none}}


/* ---- additions beyond the mockup ---- */
#view-strategies table{min-width:0}
#view-strategies .acts{flex-wrap:wrap}
.modal{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,#000 55%,transparent);display:grid;place-items:center;padding:16px}
.modal-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal-card h3{margin:0;font-size:15px;font-weight:600}
.modal-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.modal-acts{display:flex;justify-content:flex-end;gap:8px}
.pinrow{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.pinrow input{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
/* the global .side (LONG/SHORT label) must not leak into the sidebar */
#view-strategies .side{font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:normal}
#view-strategies th{top:auto}
#view-strategies tbody tr:hover{background:none}

.modal .btn.primary{border-color:color-mix(in srgb,var(--pos) 50%,transparent);color:var(--pos)}
.modal .btn.danger{border-color:color-mix(in srgb,var(--neg) 50%,transparent);color:var(--neg)}

/* Open-in-Supabase links */
#view-strategies .sbicon{margin-left:auto;flex:none;color:var(--faint);text-decoration:none;font-size:12px;padding:2px 5px;border-radius:4px}
#view-strategies .sbicon:hover{color:var(--accent);background:var(--surface-3)}
#view-strategies .sblink{color:var(--accent);text-decoration:none;font-size:12.5px;margin-left:6px}
#view-strategies .sblink:hover{text-decoration:underline}
#view-strategies .coins{flex-wrap:nowrap}
#view-strategies .acctpick{font:inherit;font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
#view-strategies .acctpick:disabled{opacity:.55}
#view-strategies .allocrow{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
#view-strategies .allocin{width:72px;font:inherit;font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-family:var(--mono)}
#view-strategies .acctbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:3px 6px;margin:-3px -6px;border-radius:5px;border:1px dashed transparent}
#view-strategies .acctbtn:hover,#view-strategies .acctbtn:focus-visible{border-color:var(--line);background:var(--surface-3)}
#view-strategies .acctbtn .pen{font-size:11px;color:var(--faint)}
#view-strategies .acctbtn:hover .pen{color:var(--accent)}
#view-strategies .btn.pending{opacity:.75;border-style:dashed}

#view-strategies .snum{font-family:var(--mono);font-weight:600;color:var(--faint);margin-right:6px;font-size:.92em}
#view-strategies #sToggleSide[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

/* paused: what it was running before · dry-run buttons in amber (colour rule: amber = dry run) */
#view-strategies .pill .was{font-weight:700}
#view-strategies .pill .was.live{color:var(--pos)}
#view-strategies .pill .was.dry{color:var(--warn)}
#view-strategies .btn.warnb{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
/* compact rows: slimmer in-row buttons and pills so a row stays ~34px */
body:not(.comfy) #view-strategies tbody tr.row .btn{padding:2px 8px;font-size:11.5px;border-radius:5px}
body:not(.comfy) #view-strategies tbody tr.row .pill{padding:1px 7px}
/* compact: every row stays one line, even with two action buttons (All strategies view) */
body:not(.comfy) #view-strategies tbody tr.row td{white-space:nowrap}
body:not(.comfy) #view-strategies .acts{flex-wrap:nowrap}
#view-strategies .lshort{display:none}
body:not(.comfy) #view-strategies tbody tr.row .lfull{display:none}
body:not(.comfy) #view-strategies tbody tr.row .lshort{display:inline}
body:not(.comfy) #view-strategies tbody tr.row td,body:not(.comfy) #view-strategies thead th{padding-left:7px;padding-right:7px}