/* ═══════════════════════════════════════════════════════════════════
   WATCHLISTS — styles for watchlist.js. Scoped to #pane-watchlist (and
   the .wl-sheet dialogs it opens on <body>) so the shared component
   sheets that load after this one can't restyle it by accident.
   ═══════════════════════════════════════════════════════════════════ */

#pane-watchlist{--wl-cols:24px minmax(0,1fr) 108px 96px 96px 128px 108px;}

/* ── List tabs ─────────────────────────────────────────────────────── */
#pane-watchlist .wl-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 14px;margin-bottom:2px;}
#pane-watchlist .wl-tabs::-webkit-scrollbar{display:none;}
#pane-watchlist .wl-tab{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 14px;
  border-radius:999px;border:1px solid var(--bl);background:var(--bg2);color:var(--tx2);font:500 13px var(--f);cursor:pointer;
  transition:background var(--dur),color var(--dur),border-color var(--dur);white-space:nowrap;}
#pane-watchlist .wl-tab:hover{color:var(--tx);background:var(--bg3);border-color:var(--bm);}
#pane-watchlist .wl-tab.active{background:color-mix(in srgb,var(--acc) 15%,var(--bg));color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 42%,transparent);font-weight:600;}
#pane-watchlist .wl-tab-n{font:500 11px var(--fm);color:var(--tx3);background:var(--bg3);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;}
#pane-watchlist .wl-tab.active .wl-tab-n{color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);}
#pane-watchlist .wl-tab-new{border-style:dashed;background:transparent;}
#pane-watchlist .wl-tab-dot{width:8px;height:8px;border-radius:50%;background:var(--lc);flex-shrink:0;margin-left:-2px;}
#pane-watchlist .wl-tab-new .ui-i{width:14px;height:14px;}

/* ── Toolbar ───────────────────────────────────────────────────────── */
#pane-watchlist .wl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;}
#pane-watchlist .wl-add{display:flex;gap:6px;flex:2 1 300px;min-width:0;margin:0;}
#pane-watchlist .wl-inp{height:38px;padding:0 12px;font:400 14px var(--f);color:var(--tx);background:var(--bg2);
  border:1px solid var(--bm);border-radius:var(--r);outline:none;min-width:0;
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);}
#pane-watchlist .wl-inp:focus{border-color:color-mix(in srgb,var(--acc) 65%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);background:var(--bg);}
#pane-watchlist .wl-add .wl-inp{flex:1;text-transform:uppercase;}
#pane-watchlist .wl-add .wl-inp::placeholder{text-transform:none;}
#pane-watchlist .wl-add-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;flex-shrink:0;}
#pane-watchlist .wl-add-btn .ui-i{width:15px;height:15px;}
#pane-watchlist .wl-search{position:relative;flex:1 1 200px;min-width:0;display:flex;}
#pane-watchlist .wl-search .ui-i{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--tx3);pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
#pane-watchlist .wl-search .wl-inp{flex:1;padding-left:33px;}
#pane-watchlist .wl-sort{flex:0 1 auto;cursor:pointer;padding-right:8px;}
#pane-watchlist .wl-bar .btn-secondary{height:38px;min-height:38px;}
#pane-watchlist .wl-icon-btn{width:38px;padding:0;}
#pane-watchlist .wl-icon-btn .ui-i,#pane-watchlist .wl-ab .ui-i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ── Summary line ──────────────────────────────────────────────────── */
#pane-watchlist .wl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:12.5px;color:var(--tx2);margin:0 2px 10px;}
#pane-watchlist .wl-meta b{font-weight:600;font-family:var(--fm);}
#pane-watchlist .wl-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--tx3);margin:0 10px;}
#pane-watchlist .wl-meta-warn{color:var(--warn);}

/* ── Rows ──────────────────────────────────────────────────────────── */
#pane-watchlist .wl-rows{background:var(--bg);border:1px solid var(--bl);border-radius:var(--rl);box-shadow:var(--card-shadow);overflow:hidden;}
#pane-watchlist .wl-head,#pane-watchlist .wl-row{display:grid;grid-template-columns:var(--wl-cols);align-items:center;column-gap:10px;padding:0 12px 0 6px;}
#pane-watchlist .wl-head{min-height:36px;font-size:11.5px;font-weight:500;color:var(--tx3);border-bottom:1px solid var(--bl);background:var(--bg2);}
#pane-watchlist .r{text-align:right;justify-self:end;}
#pane-watchlist .wl-row{position:relative;min-height:56px;border-bottom:1px solid var(--bl);background:var(--bg);transition:background var(--dur);}
#pane-watchlist .wl-row:last-child{border-bottom:none;}
#pane-watchlist .wl-row:hover{background:var(--bg2);}
#pane-watchlist .wl-grip{display:flex;align-items:center;justify-content:center;align-self:stretch;color:var(--tx3);}
#pane-watchlist .can-drag .wl-grip{cursor:grab;touch-action:none;}
#pane-watchlist .can-drag .wl-grip:hover{color:var(--tx);}
#pane-watchlist .wl-grip .ui-i{width:16px;height:16px;fill:currentColor;stroke:none;}
#pane-watchlist .wl-sym{min-width:0;padding:9px 0;display:flex;align-items:center;gap:11px;}
#pane-watchlist .wl-sym-txt{min-width:0;flex:1;}
/* Logo tile — white behind the image so dark logos read on the dark theme;
   the lettered badge sits underneath and shows when there's no image. */
#pane-watchlist .wl-logo{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--bl);}
#pane-watchlist .wl-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:3px;box-sizing:border-box;}
#pane-watchlist .wl-logo-b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font:700 12px var(--f);letter-spacing:-.3px;color:hsl(var(--h) 70% 72%);background:hsl(var(--h) 40% 22%);}
html[data-theme="light"] #pane-watchlist .wl-logo-b{color:hsl(var(--h) 55% 32%);background:hsl(var(--h) 60% 90%);}
#pane-watchlist .wl-logo.sm{width:20px;height:20px;border-radius:5px;}
#pane-watchlist .wl-logo.sm img{padding:1.5px;}
#pane-watchlist .wl-logo.sm .wl-logo-b{font-size:9px;}
#pane-watchlist .wl-tk{display:flex;align-items:center;gap:7px;font-weight:650;font-size:14.5px;letter-spacing:-.1px;}
#pane-watchlist .wl-own{font:600 10px var(--f);letter-spacing:.2px;color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent);border-radius:5px;padding:2px 6px;}
#pane-watchlist .wl-sub{display:flex;align-items:center;gap:8px;margin-top:3px;min-width:0;font-size:12px;color:var(--tx2);}
#pane-watchlist .wl-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
#pane-watchlist .wl-lists-of{display:flex;gap:4px;flex-shrink:0;}
#pane-watchlist .wl-lists-of span{font-size:10.5px;color:var(--tx2);background:var(--bg3);border-radius:5px;padding:1px 6px;white-space:nowrap;}
#pane-watchlist .wl-px,#pane-watchlist .wl-chg{font:500 14px var(--fm);letter-spacing:-.03em;white-space:nowrap;}
#pane-watchlist .wl-chg{font-size:13px;}
#pane-watchlist .wl-chg:not(.pos):not(.neg){color:var(--tx3);}
#pane-watchlist .wl-na{color:var(--tx3);}
#pane-watchlist .wl-pill{display:inline-block;min-width:72px;text-align:center;font:600 12.5px var(--fm);letter-spacing:-.03em;
  padding:4px 8px;border-radius:7px;background:var(--bg3);color:var(--tx3);}
#pane-watchlist .wl-pill.pos{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos);}
#pane-watchlist .wl-pill.neg{background:color-mix(in srgb,var(--neg) 15%,transparent);color:var(--neg);}
#pane-watchlist .wl-er{min-width:0;}
#pane-watchlist .wl-earn-tag{display:inline-block;font:500 11.5px var(--f);white-space:nowrap;color:var(--info);
  background:color-mix(in srgb,var(--info) 13%,transparent);border-radius:6px;padding:3px 7px;}
#pane-watchlist .wl-earn-tag.soon{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);}
#pane-watchlist .wl-earn-far{font-size:12px;color:var(--tx3);white-space:nowrap;}
#pane-watchlist .wl-act{display:flex;justify-content:flex-end;gap:2px;}
#pane-watchlist .wl-ab{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;
  border-radius:8px;color:var(--tx3);cursor:pointer;transition:background var(--dur),color var(--dur);}
#pane-watchlist .wl-ab .ui-i{width:15px;height:15px;}
#pane-watchlist .wl-ab:hover{background:var(--bg3);color:var(--tx);}
#pane-watchlist .wl-ab-del:hover{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);}
#pane-watchlist .wl-ab-more{display:none;}
@media(hover:hover){
  #pane-watchlist .wl-row .wl-ab{opacity:.55;}
  #pane-watchlist .wl-row:hover .wl-ab,#pane-watchlist .wl-ab:focus-visible{opacity:1;}
}

/* Dragging — rows move by transform only (see wlDragStart) */
#pane-watchlist .wl-rows.is-dragging{user-select:none;-webkit-user-select:none;}
#pane-watchlist .wl-rows.is-dragging .wl-row{transition:transform .16s var(--ease);}
#pane-watchlist .wl-rows.is-dragging .wl-row.dragging{transition:none;z-index:3;background:var(--bg2);
  box-shadow:var(--shadow-2);border-radius:10px;cursor:grabbing;}
#pane-watchlist .wl-row.dragging .wl-grip{cursor:grabbing;color:var(--acc);}

#pane-watchlist .wl-empty{padding:44px 20px;text-align:center;}
#pane-watchlist .wl-empty-t{font-size:15px;font-weight:600;margin-bottom:6px;}
#pane-watchlist .wl-empty-s{font-size:13px;color:var(--tx2);max-width:380px;margin:0 auto;line-height:1.5;}

/* ── All lists board ───────────────────────────────────────────────── */
/* One column per list, tinted with the list's colour (--lc, set inline). */
#pane-watchlist .wl-board{display:grid;gap:14px;align-items:start;}
#pane-watchlist .wl-board.n1{grid-template-columns:minmax(0,1fr);}
#pane-watchlist .wl-board.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
#pane-watchlist .wl-board.n3{grid-template-columns:repeat(3,minmax(0,1fr));}
#pane-watchlist .wl-col{border-radius:var(--rl);overflow:hidden;box-shadow:var(--card-shadow);
  background:color-mix(in srgb,var(--lc) 11%,var(--bg));border:1px solid color-mix(in srgb,var(--lc) 34%,transparent);}
#pane-watchlist .wl-col-h{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 14px;
  background:color-mix(in srgb,var(--lc) 24%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--lc) 30%,transparent);}
#pane-watchlist .wl-col-name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:750 14px var(--f);letter-spacing:.6px;text-transform:uppercase;color:color-mix(in srgb,var(--lc) 55%,var(--tx));
  background:none;border:none;padding:4px 0;cursor:pointer;text-align:left;}
#pane-watchlist .wl-col-name:hover{text-decoration:underline;text-underline-offset:3px;}
#pane-watchlist .wl-col-ib{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border:none;border-radius:7px;
  background:none;color:color-mix(in srgb,var(--lc) 45%,var(--tx2));cursor:pointer;}
#pane-watchlist .wl-col-ib:hover{background:color-mix(in srgb,var(--lc) 22%,transparent);color:var(--tx);}
#pane-watchlist .wl-col-ib .ui-i{width:14px;height:14px;}
#pane-watchlist .wl-col-n{font:500 11px var(--fm);color:var(--tx2);margin-right:auto;}
#pane-watchlist .wl-col-sort{flex-shrink:0;height:30px;max-width:46%;padding:0 6px;font:500 12px var(--f);color:var(--tx);cursor:pointer;
  background:color-mix(in srgb,var(--lc) 10%,var(--bg2));border:1px solid color-mix(in srgb,var(--lc) 38%,transparent);border-radius:8px;outline:none;}
#pane-watchlist .wl-col-sort:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 25%,transparent);}
#pane-watchlist .wl-col-rows{padding:4px 0;}
#pane-watchlist .wl-col-empty{padding:18px 14px;font-size:12.5px;color:var(--tx2);}
#pane-watchlist .wl-cell{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid color-mix(in srgb,var(--lc) 14%,transparent);}
#pane-watchlist .wl-cell:first-child{border-top:none;}
#pane-watchlist .wl-cell .wl-logo{width:32px;height:32px;border-radius:8px;}
#pane-watchlist .wl-cell-main{flex:1;min-width:0;}
#pane-watchlist .wl-cell-top{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:13px;}
#pane-watchlist .wl-cell-top b{font-weight:700;letter-spacing:-.1px;flex-shrink:0;}
#pane-watchlist .wl-cell-name{color:var(--tx2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
#pane-watchlist .wl-cell-earn{flex-shrink:0;margin-left:auto;font:500 10.5px var(--f);color:var(--info);
  background:color-mix(in srgb,var(--info) 14%,transparent);border-radius:5px;padding:1px 6px;}
#pane-watchlist .wl-cell-earn.soon{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);}
#pane-watchlist .wl-cell-bot{display:flex;align-items:baseline;gap:10px;margin-top:2px;font:500 12.5px var(--fm);letter-spacing:-.03em;white-space:nowrap;}
#pane-watchlist .wl-cell-px{color:var(--tx);margin-right:auto;}
#pane-watchlist .wl-cell-chg,#pane-watchlist .wl-cell-pct{color:var(--tx3);}
#pane-watchlist .wl-cell-chg.pos,#pane-watchlist .wl-cell-pct.pos{color:var(--pos);}
#pane-watchlist .wl-cell-chg.neg,#pane-watchlist .wl-cell-pct.neg{color:var(--neg);}

/* ── Upcoming earnings ─────────────────────────────────────────────── */
#pane-watchlist .wl-earn{margin-top:22px;background:var(--bg);border:1px solid var(--bl);border-radius:var(--rl);box-shadow:var(--card-shadow);padding:16px 18px 6px;}
#pane-watchlist .wl-earn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
#pane-watchlist .wl-earn-title{font-size:15px;font-weight:650;letter-spacing:-.15px;}
#pane-watchlist .wl-earn-sub{font-size:12px;color:var(--tx2);margin-top:2px;}
#pane-watchlist .wl-earn-head .wl-icon-btn{height:34px;min-height:34px;width:34px;flex-shrink:0;}
#pane-watchlist .wl-ed{display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--bl);}
#pane-watchlist .wl-ed-date b{display:block;font-size:13px;font-weight:600;}
#pane-watchlist .wl-ed-date span{font-size:12px;color:var(--tx3);}
#pane-watchlist .wl-ed-list{display:flex;flex-wrap:wrap;gap:6px;}
#pane-watchlist .wl-ec{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--bl);border-radius:9px;padding:6px 10px;font-size:12px;}
#pane-watchlist .wl-ec-t{font-weight:650;font-size:13px;}
#pane-watchlist .wl-ec-h{color:var(--tx2);}
#pane-watchlist .wl-ec-x{color:var(--tx3);font-family:var(--fm);font-size:11.5px;letter-spacing:-.03em;}
#pane-watchlist .wl-earn-empty{font-size:13px;color:var(--tx2);padding:12px 0 14px;border-top:1px solid var(--bl);}

/* ── Sheets (row menu, list menu, list membership) — live on <body> ── */
.wl-sheet-box{width:380px;max-width:95vw;}
.wl-sheet-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.wl-sheet-btn{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border-radius:var(--r);border:1px solid var(--bl);
  background:var(--bg2);color:var(--tx);font:500 14px var(--f);cursor:pointer;text-align:left;transition:background var(--dur),border-color var(--dur);}
.wl-sheet-btn:hover{background:var(--bg3);border-color:var(--bm);}
.wl-sheet-btn.danger{color:var(--neg);}
.wl-sheet-btn.btn-save-proj{width:auto;justify-content:center;}
.wl-sheet-p{font-size:13.5px;color:var(--tx2);line-height:1.5;margin:0 0 12px;}
.wl-sheet-checks{display:flex;flex-direction:column;gap:4px;margin:6px 0 14px;max-height:50vh;overflow-y:auto;}
.wl-check{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:var(--r);background:var(--bg2);cursor:pointer;font-size:14px;}
.wl-check input{width:17px;height:17px;accent-color:var(--acc);margin:0;}
.wl-check span:first-of-type{flex:1;}
.wl-check-n{font:500 11.5px var(--fm);color:var(--tx3);}
.wl-sw-dot{width:12px;height:12px;border-radius:50%;background:var(--lc);margin-right:10px;flex-shrink:0;}
.wl-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;}
.wl-sw{aspect-ratio:1;border-radius:12px;border:2px solid transparent;background:var(--lc);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .12s;}
.wl-sw:hover{transform:scale(1.05);}
.wl-sw.on{border-color:var(--tx);box-shadow:inset 0 0 0 3px var(--bg);}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media(max-width:1099px){
  #pane-watchlist{--wl-cols:24px minmax(0,1fr) 96px 84px 90px 108px 104px;}
  #pane-watchlist .wl-board.n3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media(max-width:767px){
  #pane-watchlist .wl-add{flex-basis:100%;}
  #pane-watchlist .wl-search{flex-basis:100%;}
  #pane-watchlist .wl-sort{flex:1 1 0;}
  #pane-watchlist .wl-bar .refresh-all-btn{flex:1 1 0;}
  #pane-watchlist .wl-inp{font-size:16px;}   /* iOS zooms into inputs under 16px */
  #pane-watchlist .wl-head{display:none;}
  #pane-watchlist .wl-row{grid-template-columns:22px minmax(0,1fr) auto 34px;grid-template-areas:"grip sym px act" "grip er pct act";
    column-gap:8px;row-gap:0;padding:8px 6px 8px 2px;min-height:62px;}
  #pane-watchlist .wl-grip{grid-area:grip;}
  #pane-watchlist .wl-sym{grid-area:sym;padding:0;align-self:end;gap:10px;}
  #pane-watchlist .wl-sym .wl-logo{width:30px;height:30px;border-radius:8px;}
  #pane-watchlist .wl-er{padding-left:40px;}
  #pane-watchlist .wl-er{grid-area:er;align-self:start;padding-top:4px;}
  #pane-watchlist .wl-er:empty{display:none;}
  #pane-watchlist .wl-px{grid-area:px;align-self:end;}
  #pane-watchlist .wl-pct{grid-area:pct;align-self:start;padding-top:4px;}
  #pane-watchlist .wl-chg{display:none;}
  #pane-watchlist .wl-act{grid-area:act;}
  #pane-watchlist .wl-ab{display:none;}
  #pane-watchlist .wl-ab.wl-ab-more{display:inline-flex;opacity:1;}
  #pane-watchlist .wl-pill{min-width:66px;font-size:12px;padding:3px 6px;}
  #pane-watchlist .wl-board.n2,#pane-watchlist .wl-board.n3{grid-template-columns:minmax(0,1fr);}
  #pane-watchlist .wl-earn{padding:14px 14px 4px;}
  #pane-watchlist .wl-ed{grid-template-columns:1fr;gap:6px;}
  #pane-watchlist .wl-ed-date{display:flex;align-items:baseline;gap:8px;}
  #pane-watchlist .wl-ed-date b{display:inline;}
}