/* =========================================================================
   AdScoop side panel — styles.
   Lifted from "save mockups/panel.html" (the spec) with the mockup's page
   furniture removed and the panel made fluid. Tokens are the ones in
   extenstion/toolbar/toolbar_ui.css. Rules for features deferred past v1
   (boards, sheets, detail, select) are kept so v2 lifts the same file.
   ========================================================================= */
:root{
  --ink:#37352f; --dim:#6b6a65; --faint:#87867f; --mute:#a5a49f;
  --surface:#f7f7f5; --block:#e9e9e7; --line:#e6e5e2; --hover:#f2f1ef;
  --brand:#e8552d; --tint:#fdf0eb; --edge:#e9c3b0; --green:#2e9e5b;
  --lift:0 3px 6px rgba(15,15,15,.06),0 9px 24px rgba(15,15,15,.10);
  --lift-sm:0 1px 2px rgba(15,15,15,.05),0 4px 12px rgba(15,15,15,.07);
  --sel:inset 0 0 0 1px #d5d3ce, 0 1px 2px rgba(15,15,15,.07), 0 3px 7px rgba(15,15,15,.04);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{font-family:var(--font);font-weight:450;background:#fff;color:var(--ink);
     -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;appearance:none}
input{font:inherit;color:inherit;border:none;background:none;outline:none;width:100%}
input::placeholder{color:var(--faint);font-weight:450}
.icn{width:15px;height:15px;flex:none;display:block}
.icn-sm{width:13px;height:13px}

/* ---------------- shell ---------------- */
.panel{width:100%;height:100%;background:#fff;border-radius:0;overflow:hidden;
       box-shadow:none;display:flex;flex-direction:column;font-size:13px;position:relative}
.hd-act{margin-left:auto;display:flex;align-items:center;gap:4px}
.ico-btn{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--dim);
         transition:background .12s,color .12s}
.ico-btn:hover{background:var(--hover);color:var(--ink)}

.tabs{display:flex;align-items:center;gap:6px;margin:0;padding:12px 12px 10px}
.tab{height:30px;padding:0 12px;border-radius:7px;font-size:13.5px;font-weight:550;color:var(--dim);
     background:transparent;display:inline-flex;align-items:center;gap:7px;
     transition:background .12s,color .12s,box-shadow .12s}
.tab:hover{background:var(--hover);color:var(--ink)}
.tab.on{background:#fff;box-shadow:var(--sel);color:var(--ink);font-weight:650}
.tab .n{font-size:11px;color:var(--mute);font-weight:400}
.tab .icn{color:var(--mute)}
.tab:hover .icn{color:var(--faint)}
.tab.on .icn{color:var(--faint)}

.view{flex:1;display:flex;flex-direction:column;min-height:0}
.view[hidden]{display:none}

/* ---------------- find ---------------- */
.find-wrap{padding:14px 10px 0}
.field{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:7px;
       font-size:13px;
       background:var(--surface);box-shadow:none;transition:box-shadow .14s,background .14s}
.field:focus-within{background:#fff;box-shadow:inset 0 0 0 1px var(--edge)}
.field .icn{color:var(--faint)}
.kbd{font-size:10px;color:var(--mute);background:var(--surface);border-radius:4px;padding:2px 5px}
.orline{display:flex;align-items:center;gap:10px;margin:12px 2px;color:var(--mute);font-size:11px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.wide{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:34px;
      border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink);
      transition:background .12s}
.wide:hover{background:var(--hover)}
.wide .icn{color:var(--dim)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
     color:var(--faint);padding:20px 14px 6px}
.row-item{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 14px;
          font-size:13px;font-weight:450;color:var(--ink);text-align:left}
.row-item:hover{background:var(--hover)}
.row-item .icn{color:var(--dim)}
.row-item .go{margin-left:auto;color:var(--faint);font-size:11.5px;display:flex;align-items:center}
.fieldgo{width:24px;height:24px;border-radius:5px;display:grid;place-items:center;color:var(--faint);
         flex:none;transition:background .12s,color .12s}
.fieldgo:hover{background:var(--hover);color:var(--ink)}
.hintrow{font-size:11.5px;color:var(--mute);padding:8px 12px 0}

/* ---------------- saved ---------------- */
.seg{display:inline-flex;gap:6px}
.seg button{height:28px;padding:0 11px;border-radius:6px;font-size:12.5px;font-weight:550;
            color:var(--dim);background:transparent;display:inline-flex;align-items:center;gap:6px;
            transition:background .12s,color .12s,box-shadow .12s}
.seg button:hover{background:var(--hover);color:var(--ink)}
.seg button.on{background:#fff;box-shadow:var(--sel);color:var(--ink);font-weight:650}
.seg .k{font-size:11px;font-weight:450;color:var(--mute);font-variant-numeric:tabular-nums}
.segrow{display:flex;align-items:center;gap:6px;padding:0 10px 10px}
.tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.tsep{width:1px;height:16px;background:var(--line);margin:0 4px;flex:none}
.tools.minimal .tool,.tools.minimal .tsep{display:none}
.tool{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
      border-radius:6px;color:var(--dim);transition:background .12s,color .12s}
.tool.off{opacity:.35;pointer-events:none}
#selbar .n{margin-left:2px}
/* the marker is brand orange: this button's menu is not the one it usually opens */
.tool.marked::before{content:"";position:absolute;top:1px;right:1px;width:7px;height:7px;border-radius:50%;
      background:var(--brand);box-shadow:0 0 0 2px #fff;z-index:1}
.tool:hover{background:var(--hover);color:var(--ink)}
.tool.on{background:#fff;box-shadow:var(--sel);color:var(--ink)}
.tool .icn{color:currentColor}
.fchips{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 10px}
.fchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 7px 0 11px;border-radius:6px;
       background:#fff;box-shadow:var(--sel);font-size:12.5px;font-weight:550;color:var(--ink)}
.fchip .x{width:14px;height:14px;border-radius:3px;display:grid;place-items:center;color:var(--dim)}
.fchip .x:hover{background:rgba(0,0,0,.07);color:var(--ink)}
.fclear{height:28px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:550;color:var(--dim)}
.fclear:hover{background:var(--hover);color:var(--ink)}
/* Notion's create affordance: a quiet text row, not a floating + */
.newbtn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:6px;
        margin-left:auto;font-size:12.5px;font-weight:550;color:var(--dim);background:transparent;
        white-space:nowrap;transition:background .12s,color .12s}
.newbtn:hover{background:var(--hover);color:var(--ink)}
.newbtn .icn{color:currentColor}
.drill{display:flex;align-items:center;gap:7px;padding:0 10px 10px}
.drill .tools{margin-left:auto}
#boardTools{display:flex;gap:1px;margin-left:0}
.drill h2{font-size:14px;font-weight:600;margin:0}
.drill .c{font-size:11.5px;color:var(--mute)}
.drill .back{width:24px;height:24px;border-radius:5px;display:grid;place-items:center;color:var(--faint)}
.drill .back:hover{background:var(--hover);color:var(--ink)}
.srow{display:flex;align-items:center;gap:6px;padding:10px 10px 8px}
.srow .field{flex:1}
.add{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--dim);
     box-shadow:inset 0 0 0 1px var(--line);flex:none;transition:background .12s,color .12s}
.add:hover{background:var(--hover);color:var(--ink)}
.add.on{background:var(--ink);color:#fff;box-shadow:none}

.chips{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 9px;border-radius:6px;
      box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:450;color:var(--dim);
      white-space:nowrap;flex:none;max-width:118px;overflow:hidden;transition:background .12s,color .12s}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip.on{background:var(--block);color:var(--ink);box-shadow:none;font-weight:550}
.chip .icn{color:var(--mute)}
.chip.more{box-shadow:none;color:var(--faint)}
.chip.more:hover{background:var(--hover)}
.chip .lb{overflow:hidden;text-overflow:ellipsis}

/* masonry — Pinterest's shape. No captions: the creative is the content. */
.grid{padding:0 10px 14px;overflow-y:auto;flex:1 1 auto;min-height:0}
.mas{columns:2;column-gap:8px}
.mas.compact{columns:3;column-gap:6px}
.mas.compact .tile{margin-bottom:6px;border-radius:8px}
.tile{break-inside:avoid;margin:0 0 8px;border-radius:10px;overflow:hidden;position:relative;
      cursor:pointer;background:#fff;transition:transform .14s}
.tile:hover{transform:translateY(-1px)}
.tmedia{position:relative;display:grid;place-items:center;border-radius:10px;overflow:hidden}
.vplay{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;
       background:rgba(20,18,16,.45);display:grid;place-items:center;color:#fff;pointer-events:none}
.vplay svg{width:9px;height:9px;display:block}
.tile:hover .vplay{opacity:0}
.selecting .vplay{opacity:0}
.tfmt{position:absolute;top:6px;left:6px;height:16px;padding:0 5px;border-radius:4px;
      background:rgba(20,18,16,.5);color:#fff;font-size:9px;font-weight:500;
      display:inline-flex;align-items:center;gap:3px;opacity:0;transition:opacity .14s}
.tile:hover .tfmt{opacity:1}
.thov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.34),rgba(20,18,16,.06) 42%,rgba(20,18,16,.62));
      opacity:0;transition:opacity .14s}
.tile:hover .thov{opacity:1}
.tacts{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .14s}
.tile:hover .tacts{opacity:1}
.tacts .ico-btn{background:transparent;color:#fff;width:24px;height:24px;border-radius:6px;
                filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tacts .ico-btn:hover{background:rgba(255,255,255,.22);color:#fff}
.tmeta{position:absolute;left:8px;right:8px;bottom:7px;color:#fff;opacity:0;transition:opacity .14s;
       text-shadow:0 1px 3px rgba(0,0,0,.4)}
.tile:hover .tmeta{opacity:1}
.tbrand{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsub{display:flex;align-items:center;gap:5px;margin-top:1px;font-size:10px;opacity:.85}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* board covers */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:0 10px 14px;
       overflow-y:auto;flex:1 1 auto;min-height:0;align-content:start}
.bcard{cursor:pointer}
.bcov{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:104px;
      border-radius:10px;overflow:hidden;background:var(--block);transition:transform .14s}
.bcard:hover .bcov{transform:translateY(-1px)}
.bcov i{display:block}
.bcov i:first-child{grid-row:1/3}
.bname{font-size:13px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmeta{font-size:11px;color:var(--faint);margin-top:2px}
.bcov--empty{box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;display:grid;place-items:center;
             color:var(--mute)}
.bcov--new{display:flex;align-items:center;justify-content:center;grid-template-columns:none;
           grid-template-rows:none;background:var(--surface);
           box-shadow:inset 0 0 0 1px var(--line);transition:background .12s}
.bcard:hover .bcov--new{background:var(--hover)}
.newpill{height:28px;padding:0 12px;border-radius:6px;background:#fff;box-shadow:var(--sel);
         display:inline-flex;align-items:center;font-size:12.5px;font-weight:550;color:var(--dim);
         transition:color .12s}
.bcard:hover .newpill{color:var(--ink)}
.dropzone{margin:4px 2px 0;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--line);
          padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.dropzone .mark{width:34px;height:34px;border-radius:9px;background:var(--surface);display:grid;
                place-items:center;color:var(--dim)}
.dropzone p{margin:0;font-size:13px;font-weight:550}
.dropzone small{font-size:12px;color:var(--dim);line-height:1.5;max-width:230px}
.bnew{height:104px;border-radius:10px;display:grid;place-items:center;color:var(--faint);
      box-shadow:inset 0 0 0 1px var(--line);gap:5px;font-size:12px;transition:background .12s}
.bnew:hover{background:var(--hover);color:var(--ink)}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
       gap:13px;padding:0 32px;text-align:center}
.empty .mark{width:40px;height:40px;border-radius:10px;background:var(--tint);display:grid;
             place-items:center;color:var(--brand)}
.empty h3{font-size:14.5px;font-weight:650;margin:0}
.empty p{font-size:13px;color:var(--dim);line-height:1.55;margin:-4px 0 2px}
.empty .fine{font-size:11px;color:var(--faint)}

/* ---------------- footer ---------------- */
.ft{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:#fff}
.gbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;
      border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--dim);
      transition:background .12s,color .12s}
.gbtn:hover{background:var(--hover);color:var(--ink)}
.gbtn .icn{color:var(--dim)}
.cnt{color:var(--mute);font-size:11.5px;font-variant-numeric:tabular-nums}
.ink{background:var(--ink);color:#fff;box-shadow:none;height:30px;padding:0 13px;border-radius:6px;
     display:inline-flex;align-items:center;font-size:13px}
.ink:hover{background:#2b2a26}
.ghost{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:6px;
       box-shadow:inset 0 0 0 1px var(--line);background:#fff;font-size:12.5px;font-weight:550;color:var(--dim)}
.ghost:hover{background:var(--hover);color:var(--ink)}

/* ---------------- popover / detail / toast ---------------- */
.pop{position:absolute;z-index:20;background:#fff;border-radius:8px;padding:5px;width:230px;
     box-shadow:0 0 0 1px var(--line),var(--lift)}
.pop[hidden]{display:none}
.pop .field{height:28px;border-radius:5px;font-size:12.5px;margin-bottom:4px}
.plist{max-height:196px;overflow-y:auto}
.pitem{display:flex;align-items:center;gap:9px;width:100%;height:28px;padding:0 9px;border-radius:5px;
       font-size:12.5px;text-align:left}
.pitem:hover{background:var(--hover)}
.pitem.is-on{background:var(--hover);font-weight:550}
.pitem.is-on:hover{background:var(--hover)}
.pitem .icn{color:var(--mute)}
.pitem .c{margin-left:auto;color:var(--mute);font-size:11px;font-variant-numeric:tabular-nums}
.pitem .val{margin-left:auto;display:flex;align-items:center;gap:3px;color:var(--mute);font-size:12px}
.pitem .val .icn{color:var(--mute)}
#pop2{width:168px}
.pdiv{height:1px;background:var(--line);margin:5px 4px}
.pnew{color:var(--dim)}
.pitem.ph{height:22px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
          color:var(--faint);cursor:default;margin-top:2px}
.pitem.ph:hover{background:none}
.pitem.ph .icn{display:none}
.pitem .c .icn{color:var(--ink)}

.detail{position:absolute;inset:0;background:#fff;z-index:15;display:flex;flex-direction:column;
        transform:translateX(100%);transition:transform .22s cubic-bezier(.32,.72,0,1)}
.detail.open{transform:none}
.dbody{flex:1;overflow-y:auto;padding:0 10px 14px}
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:4px;
       background:var(--block);color:var(--dim);font-size:10.5px;font-weight:500;white-space:nowrap}
.badge svg{width:10px;height:10px;flex:none;display:block}
.badge.live{background:rgba(46,158,91,.10);color:var(--green)}
.dh{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
     margin:16px 2px 6px}
.dmedia{border-radius:8px 8px 0 0;display:grid;place-items:center;height:190px;position:relative}
.dcard{box-shadow:0 0 0 1px var(--line);border-radius:9px;overflow:hidden}
.dcard.single{box-shadow:none;border-radius:8px}
.dcard.single .dmedia{border-radius:8px}
.dcap{display:flex;align-items:center;gap:10px;padding:9px 10px;background:#fff}
.dcap .t{min-width:0;flex:1}
.dcap .h{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcap .d{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis}
.dcap .c{flex:none;height:26px;padding:0 10px;border-radius:6px;background:var(--block);
         font-size:12px;font-weight:550;display:inline-flex;align-items:center}
.pgbtn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
       background:rgba(255,255,255,.94);box-shadow:var(--lift-sm);display:grid;place-items:center;
       color:var(--ink);z-index:2;transition:opacity .12s}
.pgbtn[disabled]{opacity:.35;pointer-events:none}
.pgL{left:8px} .pgR{right:8px}
.pgcount{position:absolute;top:8px;right:8px;height:19px;padding:0 7px;border-radius:5px;
         background:rgba(20,18,16,.55);color:#fff;font-size:10px;font-weight:600;
         display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.pgdots{display:flex;justify-content:center;gap:4px;padding:8px 0 2px}
.pgdots i{width:5px;height:5px;border-radius:50%;background:var(--block);display:block}
.pgdots i.on{background:var(--dim)}
.dacts{display:flex;gap:6px;margin:10px 0 4px}
.dacts .abtn{flex:1;justify-content:center}
.drow{display:flex;align-items:flex-start;gap:10px;min-height:28px;padding:3px 2px}
.dkey{width:88px;flex:none;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:6px;
      padding-top:2px}
.dkey .icn{color:var(--mute)}
.dval{flex:1;font-size:12.5px;font-weight:500;color:var(--ink);display:flex;flex-wrap:wrap;
      align-items:center;gap:5px;min-width:0;padding-top:2px}
.dval a,.dlink{color:var(--brand);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dval .mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dsep{height:1px;background:var(--line);margin:14px 0 2px}
.dtext{font-size:12.5px;line-height:1.6;margin:0;color:var(--ink)}
.dtext.muted{color:var(--dim)}
.addchip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:4px;
         font-size:10.5px;font-weight:550;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line)}
.addchip:hover{background:var(--hover);color:var(--ink)}
.addchip svg{width:9px;height:9px}

.toast{position:absolute;left:12px;right:12px;bottom:56px;z-index:30;background:var(--ink);color:#fff;
       border-radius:7px;padding:9px 11px;font-size:12.5px;line-height:1.45;box-shadow:var(--lift);
       opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast b{font-weight:600}
.toast{display:flex;align-items:center;gap:10px}
.tmsg{flex:1;min-width:0}
.tundo{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;
       font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);flex:none}
.tundo:hover{background:rgba(255,255,255,.24)}
.tundo .icn{color:#fff}

/* tooltips — dark, delayed, below the control; native title= is too slow and too ugly */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-2px);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;
  padding:6px 8px;border-radius:5px;box-shadow:var(--lift-sm);opacity:0;pointer-events:none;z-index:40;
  transition:opacity .12s,transform .12s}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:.35s}
[data-tip].tip-r::after{left:auto;right:0;transform:translateX(0) translateY(-2px)}
[data-tip].tip-r:hover::after{transform:translateX(0) translateY(0)}

/* ---------------- top action row + select mode ---------------- */
.actions{display:flex;align-items:center;gap:5px;padding:0 10px 10px}
.selacts{margin-left:auto;display:flex;align-items:center;gap:1px}
.selacts .tool{width:28px;height:28px}
.selacts .tsep{margin:0 4px}
#selbar .n{font-size:12.5px;font-weight:550;color:var(--ink);white-space:nowrap;margin-left:2px}
.actbar{display:flex;align-items:center;gap:2px;padding:0 8px 10px}
.actbar .tool{width:30px;height:28px}
.actbar .tsep{margin:0 5px}
.actions .n{font-size:12.5px;color:var(--dim);font-weight:500;padding:0 2px}
.abtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;
      white-space:nowrap;flex:none;
      font-size:12.5px;font-weight:550;color:var(--dim);background:transparent;
      transition:background .12s,color .12s,box-shadow .12s}
.abtn:hover{background:var(--hover);color:var(--ink)}
.abtn.out{box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.abtn.out:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--mute)}
.abtn .icn{color:var(--dim)}
.abtn .cnt{color:var(--mute);font-size:11.5px;font-variant-numeric:tabular-nums}
.abtn.ink{background:var(--ink);color:#fff;box-shadow:none}
.abtn.ink .icn,.abtn.ink .cnt{color:rgba(255,255,255,.7)}
.abtn.ink:hover{background:#2b2a26;color:#fff}
.tick{position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:50%;
      background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1.5px var(--mute);display:grid;
      place-items:center;color:var(--dim);z-index:3;cursor:pointer;transition:opacity .12s,background .12s}
.tick.onhover{opacity:0}
.tile:hover .tick.onhover{opacity:1}
.tick:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile.picked .tick,.lrow.picked .tick{background:var(--ink);box-shadow:none;color:#fff}
.tile.picked{outline:2px solid var(--ink);outline-offset:-2px;border-radius:10px}
.lend{display:flex;align-items:center;gap:2px;flex:none}
.lrow .tick{position:static;flex:none;width:19px;height:19px}
.lrow .tick svg{width:11px;height:11px}
.lrow:hover .tick.onhover{opacity:1}
.suggest .tick{display:none}
.lrow.picked{background:var(--hover)}
.selecting .tile .tacts,.selecting .tile .tmeta{display:none}
.loadmore{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0 8px;
          font-size:12px;color:var(--faint)}
.spin{width:14px;height:14px;border-radius:50%;border:1.8px solid var(--block);
      border-top-color:var(--dim);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.suggest{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.suggest .lrow{min-height:40px;gap:9px}
.suggest .lthumb{width:30px;height:30px;border-radius:5px}
.suggest .lname{font-size:12.5px;font-weight:550}
.suggest .badd{width:22px;height:22px}

/* ---------------- list view (Spotify's row, Notion's weight) ---------------- */
.list{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 4px;border-radius:7px;
      cursor:pointer;transition:background .12s}
.lrow:hover{background:var(--hover)}
.lthumb{width:42px;height:42px;border-radius:6px;flex:none;position:relative;overflow:hidden;display:block}
.lthumb .p{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.92}
.ltxt{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.lname{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbadge{height:17px;padding:0 6px;border-radius:5px;background:var(--block);color:var(--dim);
        font-size:10.5px;font-weight:550;display:inline-flex;align-items:center;flex:none}
.lbadge.live{background:rgba(46,158,91,.12);color:var(--green)}
.lid{display:block;font-size:11px;color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.lrow .ico-btn{opacity:0;flex:none}
.lrow:hover .ico-btn{opacity:1}

/* ---------------- sheets (Spotify's bottom sheets, in-panel) ---------------- */
.scrim{position:absolute;inset:0;z-index:17;background:rgba(24,22,20,.26);opacity:0;
       pointer-events:none;transition:opacity .26s cubic-bezier(.32,.72,0,1)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;inset:0;background:#fff;z-index:18;
       display:flex;flex-direction:column;border-radius:12px 12px 0 0;
       box-shadow:0 -10px 34px rgba(15,15,15,.18);
       transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.sheet.open{transform:none}

.grab{width:32px;height:3.5px;border-radius:2px;background:var(--block);margin:8px auto 0;flex:none}
.sheet .sheet-body{max-height:none}
.sheet-hd{display:flex;align-items:center;gap:8px;padding:12px 12px 10px}
.sheet-hd .t{font-size:15px;font-weight:650}

.sheet-hd .cancel{font-size:13px;font-weight:500;color:var(--dim);padding:4px 6px;border-radius:5px}
.sheet-hd .cancel:hover{background:var(--hover);color:var(--ink)}
.sheet-body{flex:1;overflow-y:auto;overflow-x:visible;padding:0 8px 8px}
.sheet-ft{padding:10px 12px;border-top:1px solid var(--line);display:flex;justify-content:center}
.pinned{margin:0 8px 8px;padding:8px;border-radius:8px;background:var(--surface);display:flex;
        align-items:center;gap:10px}
.brow{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 8px;border-radius:7px;
      text-align:left;transition:background .12s}
.brow:hover{background:var(--hover)}
.bthumb{width:34px;height:34px;border-radius:6px;flex:none;display:grid;place-items:center;
        background:var(--block);color:var(--faint);overflow:hidden}
.bthumb.mini{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--line);
             place-items:stretch}
.bthumb.mini i{display:block;width:100%;height:100%}
.btxt{min-width:0;flex:1;display:flex;flex-direction:column}
.bttl{font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsub{font-size:11px;color:var(--faint);margin-top:1px}
.badd{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
      box-shadow:inset 0 0 0 1.5px var(--mute);color:var(--dim);transition:all .12s}
.badd:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.badd.on{background:var(--ink);box-shadow:none;color:#fff}
.pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 4px 8px}
.pick{border-radius:9px;cursor:pointer}
.pickmedia{height:118px;border-radius:9px;position:relative;overflow:hidden;transition:box-shadow .12s}
.pick:hover .pickmedia{box-shadow:0 0 0 2px var(--mute)}
.pick.on .pickmedia{box-shadow:0 0 0 2px var(--ink)}
.pickbtn{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;
         background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1.5px var(--mute);display:grid;
         place-items:center;color:var(--dim);opacity:0;
         transition:opacity .12s,background .12s,color .12s,box-shadow .12s}
.pick:hover .pickbtn{opacity:1;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
/* once it's in the board the check is the state, not an affordance — always shown */
.pick.on .pickbtn{opacity:1;background:var(--ink);box-shadow:none;color:#fff}
.pickft{display:flex;align-items:baseline;gap:6px;padding:6px 2px 0}
.pickbrand{font-size:12px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickmeta{font-size:10.5px;color:var(--faint);flex:none}
.tagwrap{display:flex;flex-wrap:wrap;gap:5px;padding:0 6px}
.tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:6px;
     font-size:12.5px;font-weight:500;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);
     background:#fff;transition:background .12s,color .12s,box-shadow .12s}
.tag:hover{background:var(--hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--mute)}
.tag.on{background:var(--block);color:var(--ink);box-shadow:none;font-weight:550}
.tag .icn{color:var(--mute)}
.tag.on .icn{color:var(--dim)}
.mtrow{display:flex;align-items:center;gap:9px;height:40px;padding:0 6px;border-radius:7px}
.mtrow:hover{background:var(--hover)}
.mticn{color:var(--mute);display:flex}
.mtname{flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtn{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.mtrow .ico-btn{opacity:0}
.mtrow:hover .ico-btn{opacity:1}
.mtinput{flex:1;height:28px;padding:0 8px;border-radius:6px;font-size:13px;
         box-shadow:inset 0 0 0 1px var(--edge);background:#fff}
.namewrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:16px;padding:0 30px 40px}
.namewrap .q{font-size:14.5px;font-weight:650}
.nameinput{width:100%;text-align:center;font-size:19px;font-weight:650;padding:4px 0 10px;
           border-bottom:1.5px solid var(--line);transition:border-color .14s}
.nameinput:focus{border-color:var(--edge)}
.addrow{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 4px;border-radius:7px;
        font-size:13px;font-weight:550;color:var(--ink);margin-bottom:2px;transition:background .12s}
.addrow:hover{background:var(--hover)}
.addrow .sq{width:42px;height:42px;border-radius:6px;background:var(--surface);display:grid;
            place-items:center;color:var(--dim);flex:none}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;padding:0 16px;
      border-radius:6px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.btn-primary:hover{background:#2b2a26}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:6px;
      font-size:12.5px;font-weight:550;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.pill:hover{background:var(--hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--mute)}
.pill .icn{color:var(--dim)}
.lrow.is-added .lid{color:var(--dim)}

/* find-ads options — Meta's own URL params, worn as quiet ghost controls */
.opts{display:flex;gap:5px;padding:9px 0 0;flex-wrap:nowrap;overflow:hidden}
.opt{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 11px;border-radius:6px;
     font-size:12.5px;font-weight:550;color:var(--ink);background:var(--surface);
     white-space:nowrap;flex:none;transition:background .12s}
.opt:hover{background:var(--block)}
.opt .icn{color:var(--dim)}

/* =========================================================================
   v1 additions — real media instead of placeholder gradients, and the panel
   without the mockup's footer. Nothing above this line is redesigned.
   ========================================================================= */
.tmedia{background:var(--block);min-height:48px;width:100%}
.timg{display:block;width:100%;height:auto}
.mas.compact .tmedia{height:96px}
.mas.compact .timg{height:100%;object-fit:cover}
.tph{display:none;color:var(--mute)}
.tph svg{width:18px;height:18px;display:block}
.tmedia.noimg{height:120px}
.mas.compact .tmedia.noimg{height:96px}
.noimg .tph{display:grid;place-items:center}
.lthumb{background:var(--block);display:grid;place-items:center;color:var(--mute)}
.lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lthumb .tph svg{width:13px;height:13px}
.nomatch{padding:26px 8px;text-align:center;color:var(--faint);font-size:12.5px}
.row-item .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast{bottom:14px}
/* The four chips total ~321px; a side panel can be as narrow as 320. Wrapping
   beats clipping the last one (the mockup's nowrap row was drawn at 400). */
.opts{flex-wrap:wrap;overflow:visible}

/* One left edge. Chrome draws the panel header (icon + short_name) itself and
   its icon sits ~8px in from the panel edge. The mockup's rows used 10, 12 and
   14px insets, which each read as a different edge under it. Every row now
   starts and ends at --gutter, so the tab pill, the fields, the chips, the
   hint, the Recent label and rows, and the saved grid share one line with
   Chrome's icon; the pills keep their own inset, as pills do. */
:root{--gutter:8px}
.tabs{padding-left:var(--gutter);padding-right:var(--gutter)}
.find-wrap,.hintrow,.lbl,.row-item,.srow,.segrow,.fchips,.grid{
  padding-left:var(--gutter);padding-right:var(--gutter)}

/* Divider under Chrome's own header. Chrome draws the icon + name row above this
   document with nothing separating it from us, so the panel carries the
   hairline on its top edge. */
.panel{border-top:1px solid var(--line)}
/* and a little more air between that hairline and the tab row (was 12px) */
.tabs{padding-top:16px}

/* In-field Search button (replaces the trailing ↗). The one solid control on
   the Find screen (§2c); Enter still submits. An empty query opens the
   library as it stands, which is what the arrow used to do. */
.field .searchbtn{margin-left:auto;flex:none;height:26px;padding:0 10px;border-radius:5px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:550;line-height:1;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background .12s,opacity .12s}
.field .searchbtn:hover{background:#2b2a26}
.field .searchbtn:active{opacity:.85}
.find-wrap .field{padding-right:4px}

/* Footer bar: account + expand moved out of the tab row to the bottom edge,
   Notion's quiet sidebar footer — a --surface strip under a hairline, a small
   avatar circle, --dim text, and a muted glyph at the right. Nothing here
   competes with Chrome's pin/close at the top. */
.ftbar{display:flex;align-items:center;gap:6px;height:44px;flex:none;
       padding:0 var(--gutter);border-top:1px solid var(--line);background:#fff}
.ftbar .acct{display:flex;align-items:center;gap:9px;flex:1;min-width:0;height:32px;
             padding:0 6px 0 3px;border-radius:6px;color:var(--dim);font-size:12.5px;font-weight:500;
             text-align:left;transition:background .12s,color .12s}
.ftbar .acct:hover{background:var(--hover);color:var(--ink)}
.ftbar .avatar{width:26px;height:26px;border-radius:50%;background:var(--block);display:grid;
               place-items:center;color:var(--dim);flex:none}
.ftbar .avatar .icn{width:13px;height:13px}
.ftbar .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftbar .ico-btn{color:var(--mute)}
.ftbar .ico-btn:hover{background:var(--block);color:var(--dim)}
.ftbar .ico-btn .icn{width:14px;height:14px}
.toast{bottom:52px}

/* tooltips at the bottom edge open upward, or the panel clips them */
[data-tip].tip-up::after{top:auto;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(2px)}
[data-tip].tip-up:hover::after{transform:translateX(-50%) translateY(0)}
[data-tip].tip-up.tip-r::after{left:auto;right:0;transform:translateX(0) translateY(2px)}
[data-tip].tip-up.tip-r:hover::after{transform:translateX(0) translateY(0)}

/* Filter-chip close: the mockup's 13px glyph at stroke 1.75 came out heavier
   than the chip's own text. Smaller, lighter and closer to the label, with a
   real 18px hit area that only shows itself on hover. */
.fchip{gap:2px;padding:0 4px 0 10px}
.fchip .x{width:18px;height:18px;border-radius:4px;color:var(--mute);transition:background .12s,color .12s}
.fchip .x svg{width:10px;height:10px;display:block}
.fchip .x:hover{background:var(--hover);color:var(--ink)}

/* Find chips + More filters sheet — lifted verbatim from panel.html (plan §7) */
.opt.set{background:#fff;box-shadow:var(--sel)}
.optmore{height:28px;padding:0 10px;border-radius:6px;color:var(--dim);font-size:12.5px;
        font-weight:550;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
        transition:background .12s,color .12s}
.optmore:hover{background:var(--hover);color:var(--ink)}
.cnt2{background:var(--ink);color:#fff;border-radius:99px;min-width:16px;height:16px;padding:0 4px;
      font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.mrow{display:flex;align-items:flex-start;gap:10px;min-height:34px;padding:5px 2px;font-size:13px}
.mkey{width:96px;flex:none;color:var(--faint);padding-top:6px}
.mval{flex:1;display:flex;flex-wrap:wrap;gap:5px}
.mopt{height:28px;padding:0 10px;border-radius:6px;background:var(--surface);font-size:12.5px;
      font-weight:550;color:var(--ink);display:inline-flex;align-items:center;transition:background .12s}
.mopt:hover{background:var(--block)}
.mopt.on{background:#fff;box-shadow:var(--sel)}
.note2{font-size:11.5px;color:var(--mute);line-height:1.5;margin:10px 2px 4px}

/* Country picker: the search field stays put, the grouped list scrolls under it */
.plist--countries{max-height:360px;margin:0 -1px}
.pop .field .icn{color:var(--faint)}

/* =========================================================================
   v2 — boards, select mode, detail view, tags. The rules for these surfaces
   were lifted with the rest of panel.html; below is only what real data and
   the v1 chrome decisions need on top.
   ========================================================================= */
/* detail header (the wordmark row's rules were removed with it in v1) */
.hd{display:flex;align-items:center;gap:8px;padding:13px var(--gutter) 12px}
.hd-name{font-size:14px;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drill,.bgrid{padding-left:var(--gutter);padding-right:var(--gutter)}
.drill h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* expired or missing media is a plain grey card — no glyph, no message */
.tph{display:none !important}
.tmedia.noimg,.lthumb.noimg,.pickmedia.noimg,.dmedia.noimg{background:var(--block)}
.dmedia{height:auto;min-height:150px;max-height:380px;background:var(--block);overflow:hidden}
.dmedia.noimg{height:180px}
.dmedia img,.dmedia video{display:block;width:100%;max-height:380px;object-fit:contain}
.dmedia video{background:#141210}
.dcard.single .dmedia{border-radius:8px}
.pickmedia img{width:100%;height:100%;object-fit:cover;display:block}
.bcov i,.bthumb.mini i{background:var(--block) center/cover no-repeat}

/* tag badges in the detail carry their own remove glyph */
.badge.tagbadge{padding-right:2px}
.badge .bx{width:16px;height:16px;border-radius:3px;display:grid;place-items:center;color:var(--dim);margin-left:1px}
.badge .bx:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.badge .bx svg{width:9px;height:9px}

/* transcription is present but not wired: visible, quiet, tooltip says so */
.pitem.off,.pitem.off .icn{color:var(--mute);cursor:default}
.pitem.off:hover{background:none}
.abtn.off{opacity:.5;cursor:default}
.abtn.off:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}

/* empty states */
.bempty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 0 6px;text-align:center}
.bempty .mark{width:38px;height:38px;border-radius:10px;background:var(--surface);display:grid;place-items:center;color:var(--dim)}
.bempty .t{font-size:13px;color:var(--dim)}
.bempty2{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 30px;text-align:center}
.bempty2 .mark{width:40px;height:40px;border-radius:10px;background:var(--surface);display:grid;place-items:center;color:var(--dim)}
.bempty2 .t{font-size:14.5px;font-weight:650}
.bempty2 .s{font-size:13px;color:var(--dim);line-height:1.55;margin-top:4px}
.sheetnote{padding:16px;text-align:center;color:var(--faint);font-size:12.5px}

/* library menu (footer ⋯): opens upward, above the footer */
.pop.up{top:auto}
.pitem.note{height:auto;min-height:22px;padding:6px 9px;font-size:11.5px;line-height:1.45;color:var(--faint);cursor:default;white-space:normal;text-align:left}
.pitem.note:hover{background:none}

/* --- 2026-09-02 tweaks after the first v2 look --- */
/* the picker's add circle at rest is quiet: mute ring, dim glyph, no ink until
   the circle itself is under the pointer */
.pick:hover .pickmedia{box-shadow:0 0 0 1.5px var(--mute)}
.pick:hover .pickbtn{opacity:1;box-shadow:inset 0 0 0 1.5px var(--mute);color:var(--dim);background:rgba(255,255,255,.92)}
.pick .pickbtn:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
/* an empty board is an empty box */
.bcov--empty{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.bthumb{background:var(--block)}

/* detail: more air around the hairlines and the section labels */
.dbody .dsep{margin:18px 0 6px}
.dbody .dh{margin:18px 2px 8px}
.dbody .dacts{margin:12px 0 6px}
/* once added, the check is the state: it stays ink under the pointer too */
.pick.on:hover .pickbtn,.pick.on .pickbtn:hover{opacity:1;background:var(--ink);box-shadow:none;color:#fff}
.pick.on:hover .pickmedia{box-shadow:0 0 0 2px var(--ink)}

/* =========================================================================
   Motion — Notion/Linear weight. Short, eased, nothing bounces. A tile lifts
   1px on hover and that is the personality budget (DESIGN_PATTERNS §12).
   ========================================================================= */
/* the ad detail: a short fade-slide, not a full-width sweep */
.detail{transform:translateX(14px);opacity:0;pointer-events:none;
        transition:opacity .16s ease-out,transform .2s cubic-bezier(.2,.7,.3,1)}
.detail.open{transform:none;opacity:1;pointer-events:auto}
/* grids: stay-tiles slide (FLIP), new tiles fade up, removed tiles fade first */
.tile.flip,.lrow.flip,.bcard.flip{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tile.leave,.lrow.leave,.bcard.leave{opacity:0;transform:scale(.97);pointer-events:none;
        transition:opacity .14s ease,transform .14s ease}
@keyframes sfIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tile.enter,.lrow.enter,.bcard.enter{animation:sfIn .2s cubic-bezier(.2,.7,.3,1) both}
/* popovers and views arrive, they do not appear */
@keyframes popIn{from{opacity:0;transform:translateY(-3px) scale(.985)}to{opacity:1;transform:none}}
@keyframes popInUp{from{opacity:0;transform:translateY(3px) scale(.985)}to{opacity:1;transform:none}}
.pop:not([hidden]){animation:popIn .12s cubic-bezier(.2,.7,.3,1)}
.pop.up:not([hidden]){animation-name:popInUp}
@keyframes viewIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.view:not([hidden]){animation:viewIn .14s ease-out}
.fchip{animation:sfIn .14s ease-out}
/* detail media: a card that pages in fades in; video mounts on play */
@keyframes mediaIn{from{opacity:0}to{opacity:1}}
.dcard.enter .dmedia>img,.dcard.enter .dmedia>video{animation:mediaIn .16s ease-out}
.dmedia{position:relative}
.dplay{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
       background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
       box-shadow:var(--lift-sm);transition:transform .12s,background .12s;z-index:2}
.dplay:hover{background:#fff;transform:scale(1.04)}
.dplay svg{width:16px;height:16px;margin-left:2px;display:block}
.dmedia>video{display:block;width:100%;object-fit:contain;background:#141210}
@media (prefers-reduced-motion: reduce){
  .detail,.tile,.lrow,.bcard,.pop,.view,.fchip,.sheet,.scrim,.toast,.dcard .dmedia>*{transition:none !important;animation:none !important}
}

/* footer, option C: two icons at opposite ends on white under a hairline.
   Profile left (it also holds the library menu), expand right. */
.ftbar{justify-content:space-between;background:#fff;height:44px}
.ftbar .ico-btn{width:28px;height:28px;color:var(--dim)}
.ftbar .ico-btn:hover{background:var(--hover);color:var(--ink)}
.ftbar .ico-btn .icn{width:15px;height:15px}
/* a tooltip on the leftmost control grows to the right, or the panel clips it */
[data-tip].tip-l::after{left:0;transform:translateX(0) translateY(-2px)}
[data-tip].tip-l:hover::after{transform:translateX(0) translateY(0)}
[data-tip].tip-up.tip-l::after{transform:translateX(0) translateY(2px)}
[data-tip].tip-up.tip-l:hover::after{transform:translateX(0) translateY(0)}

/* detail: brand avatar in the header, copy chips beside text, section label rows */
.davatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;background:var(--block)}
.dh-row{display:flex;align-items:center;justify-content:space-between}
.dh-row .addchip{text-transform:none;letter-spacing:0;font-size:10.5px}
.dval .addchip{margin-left:2px}
.dval{line-height:1.5}

/* tile hover: a small brand avatar ahead of the name */
.tbrand{display:flex;align-items:center;gap:6px}
.tav{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:rgba(255,255,255,.2);
     box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* tile hover meta: room between avatar, name and the days line; the days line
   aligns with the name, not the avatar */
.tmeta{bottom:9px}
.tbrand{gap:8px}
.tsub{margin-top:3px}
.tmeta.has-av .tsub{padding-left:26px}

/* tile hover meta, Instagram's shape: avatar on the left, centred against the
   two lines beside it — brand on top, days under it */
.tmeta{display:flex;align-items:center;gap:9px}
.tav{width:26px;height:26px}
.ttxt{display:flex;flex-direction:column;min-width:0;justify-content:center}
.tbrand{display:block;line-height:1.25}
.tsub{margin-top:2px;line-height:1.2}
.tmeta.has-av .tsub{padding-left:0}

/* the feed's status dot means something: green while the ad runs, grey once it ended */
.tsub .dot{width:5px;height:5px;flex:none}
.tsub .dot.live{background:var(--green)}
.tsub .dot.ended{background:rgba(255,255,255,.45)}

/* detail navigation: previous / next ad in the header (Notion's peek arrows),
   with the position between them; the body fade-slides on a change */
.dnav{display:inline-flex;align-items:center;gap:0;margin-right:2px}
.dnav .ico-btn{width:24px;height:24px;color:var(--dim)}
.dnav .ico-btn[disabled]{opacity:.3;pointer-events:none}
.dpos{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;padding:0 3px;white-space:nowrap}
.dbody{transition:opacity .16s ease-out,transform .18s cubic-bezier(.2,.7,.3,1)}
.dbody.swap{transition:none;opacity:0}
.dbody.swap.fwd{transform:translateX(8px)}
.dbody.swap.back{transform:translateX(-8px)}
.dmedia{touch-action:pan-y;user-select:none}

/* detail rhythm: hairlines sit evenly between blocks, a heading right after a
   hairline hugs it, rows keep a steady 30px beat */
.dbody .dsep{margin:14px 0 10px}
.dbody .dsep + .dh{margin-top:6px}
.dbody .dh{margin:16px 2px 6px}
.dbody .drow{min-height:30px;padding:2px 2px}
.dbody .dkey,.dbody .dval{padding-top:3px}
.dbody .dacts{margin:12px 0 2px}

/* =========================================================================
   Detail arrows, option A: the ad arrows are white discs straddling the
   card's outer edge at the media's mid-height; the card arrows are small,
   dark and low inside the media. Two pairs, two heights, two colours.
   ========================================================================= */
.dbody{padding-left:14px;padding-right:14px}      /* room for the discs to overhang */
.dcard{position:relative;overflow:visible}
.dcard .dmedia{border-radius:8px 8px 0 0;overflow:hidden}
.dcard.single .dmedia{border-radius:8px}
.dcard .dcap{border-radius:0 0 8px 8px}
.edge{position:absolute;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:#fff;
      box-shadow:0 0 0 1px var(--line),var(--lift-sm);display:grid;place-items:center;color:var(--dim);z-index:4;
      transition:color .12s,box-shadow .12s,transform .12s,opacity .12s}
.edgeL{left:-12px}.edgeR{right:-12px}
.edge:hover{color:var(--ink);box-shadow:0 0 0 1px var(--mute),var(--lift-sm)}
.edge:active{transform:scale(.96)}
.edge[disabled]{opacity:.35;pointer-events:none}
.pgbtn{top:auto;bottom:10px;transform:none;width:24px;height:24px;background:rgba(20,18,16,.42);color:#fff;
       box-shadow:none;transition:background .12s,opacity .12s}
.pgbtn:hover{background:rgba(20,18,16,.6)}
.pgL{left:10px}.pgR{right:10px}
.pgbtn[disabled]{opacity:.3}
.pgbtn .icn,.edge .icn{width:12px;height:12px}
#detPrev,#detNext{display:none}                    /* the header keeps only the position */
/* switching ads: the page settles in from the side it came from */
.dbody{transition:opacity .2s ease-out,transform .24s cubic-bezier(.2,.7,.3,1)}
.dbody.swap.fwd{transform:translateX(18px)}
.dbody.swap.back{transform:translateX(-18px)}

/* 2. section rhythm: a label sits the same 6px above a row's text as it does
   above the primary text */
.dbody .dh{margin:16px 2px 1px}
.dbody .dh-row{margin-bottom:6px}
.dbody .dh + .dtext{margin-top:5px}
.dbody .dh + .abtn{margin-top:6px}

/* picker: no ring on hover — the plus appearing is enough; the ink ring stays
   as the added state only */
.pick:hover .pickmedia{box-shadow:none}
.pick.on .pickmedia,.pick.on:hover .pickmedia{box-shadow:0 0 0 2px var(--ink)}
/* [data-tip] sets position:relative later in the cascade; the media's card
   arrows carry tooltips and must stay absolutely placed */
.dmedia .pgbtn{position:absolute}
/* the edge discs overhang into the body's padding; never let that become a
   horizontal scroll range */
.dbody{overflow-x:hidden}

/* =========================================================================
   Arrows, final: ads move from the header (‹ n / N ›, plus ← →); cards page
   with Instagram's discs — white, mid-height on the media, black chevrons.
   ========================================================================= */
#detPrev,#detNext{display:grid}
.dnav{gap:1px}
.dnav .ico-btn{width:26px;height:26px;color:var(--dim)}
.dnav .ico-btn:hover{color:var(--ink);background:var(--hover)}
.dbody{padding-left:10px;padding-right:10px}
.edge{display:none}
.dmedia .pgbtn{top:50%;bottom:auto;transform:translateY(-50%);width:28px;height:28px;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--lift-sm);
  transition:background .12s,opacity .12s,transform .12s}
.dmedia .pgbtn:hover{background:#fff}
.dmedia .pgbtn:active{transform:translateY(-50%) scale(.96)}
.dmedia .pgL{left:8px}.dmedia .pgR{right:8px}
.dmedia .pgbtn[disabled]{opacity:.35}
.dmedia .pgbtn .icn{width:13px;height:13px}

/* header pager, quiet: bare mute chevrons either side of "2 of 12" */
.dnav{gap:0;margin-right:4px}
.dnav .ico-btn{width:22px;height:24px;color:var(--mute);border-radius:4px}
.dnav .ico-btn:hover{color:var(--dim);background:none}
.dnav .ico-btn .icn{width:13px;height:13px}
.dnav .ico-btn[disabled]{opacity:.35}
.dpos{font-size:12.5px;font-weight:550;color:var(--ink);padding:0 5px}

/* transport disc, Spotify's proportions: 52px white disc, 24px black glyph.
   While playing it hides and comes back as pause on hover. */
.dplay{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(255,255,255,.94);
       transition:transform .12s,background .12s,opacity .15s}
.dplay svg{width:24px;height:24px;margin:0;display:block}
.dplay[aria-label="Play"] svg{margin-left:3px}      /* a triangle sits optically left of centre */
.dplay:hover{background:#fff;transform:scale(1.04)}
.dplay.is-playing{opacity:0;pointer-events:none}
.dmedia:hover .dplay.is-playing{opacity:1;pointer-events:auto}

/* footer is opaque white and paints above the grid and toast layers */
.ftbar{background:#fff;position:relative;z-index:12}

/* play disc: smaller disc, bigger glyph — the triangle takes ~half the disc */
.dplay{width:40px;height:40px;margin:-20px 0 0 -20px}
.dplay svg{width:22px;height:22px}
.dplay[aria-label="Play"] svg{margin-left:3px}
/* every section label gets the same air below it as PRIMARY TEXT has */
.dbody .dh{margin:16px 2px 8px}
.dbody .dh-row{margin-bottom:8px}
.dbody .dh + .dtext{margin-top:0}
.dbody .dh + .abtn{margin-top:0}

/* =========================================================================
   Ad detail, Notion pass (detail-proposal.html). Zero outlines: ghost actions
   at their natural width with Download carrying the weight, one row shape
   with a hover slot in the same column, editable properties above the facts,
   no section labels except Primary text, no transcription.
   ========================================================================= */
.dbody .acts{display:flex;gap:2px;margin:10px -6px 2px}
.dbody .acts button{height:30px;padding:0 9px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
.dbody .acts button:hover{background:var(--hover);color:var(--ink)}
.dbody .acts .icn{color:var(--mute)}
.dbody .acts .lead{color:var(--ink);font-weight:600}
.dbody .acts .lead .icn{color:var(--dim)}
.dbody .sep{height:1px;background:var(--line);margin:10px 0 8px}
.dbody .sep + .sep{display:none}
.pr{display:flex;align-items:center;gap:10px;min-height:32px;padding:3px 6px;margin:0 -6px;
    border-radius:6px;font-size:12.5px;transition:background .12s}
.pr:hover{background:var(--hover)}
.pr .k{width:92px;flex:none;color:var(--faint);display:flex;align-items:center;gap:7px}
.pr .k .icn{color:var(--mute);width:13px;height:13px}
.pr .v{flex:1;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;line-height:1.45}
.pr .v .mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pr .lnk{color:var(--brand);cursor:pointer}
.pr .lnk:hover{text-decoration:underline}
.pr .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.pr .dot.ended{background:var(--mute)}
.pr .slot,.blockhead .slot{width:22px;height:22px;flex:none;border-radius:5px;display:grid;place-items:center;
    color:var(--mute);opacity:0;transition:opacity .12s,background .12s;cursor:default}
.pr:hover .slot,.blk:hover .blockhead .slot{opacity:1}
.pr .slot[data-copy],.blockhead .slot[data-copy],.pr.edit .slot{cursor:pointer}
.pr .slot[data-copy]:hover,.blockhead .slot[data-copy]:hover,.pr.edit .slot:hover{background:var(--block);color:var(--ink)}
.pr .slot .icn,.blockhead .slot .icn{width:13px;height:13px}
.pr.edit{cursor:pointer}
.pr .vph,.dtext .vph{color:var(--mute);font-weight:450}
.pchip{height:21px;padding:0 8px;border-radius:5px;background:var(--block);color:var(--ink);
      font-size:11.5px;font-weight:550;display:inline-flex;align-items:center;gap:5px;box-shadow:none}
.pchip .x{width:14px;height:14px;border-radius:3px;display:grid;place-items:center;color:var(--dim);margin-right:-3px;padding:0}
.pchip .x:hover{background:rgba(0,0,0,.08);color:var(--ink)}
.pchip .x svg{width:9px;height:9px;display:block}
.blockhead{display:flex;align-items:center;margin:8px 2px 7px}
.blockhead .dh{margin:0}
.blockhead .slot{margin-left:auto}
.dbody .blk .dtext{margin:0 2px}

/* transcription, video ads only: a disabled ghost action and a ghost row */
.dbody .acts button[disabled]{opacity:.4;cursor:default}
.dbody .acts button[disabled]:hover{background:none;color:var(--dim)}
.dbody .ghostbtn{height:28px;padding:0 9px;margin:0 0 0 -7px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--dim);opacity:.5;cursor:default}
.dbody .ghostbtn .icn{color:var(--mute)}
.dbody .dh{margin:14px 2px 6px}
.dbody .dtext.muted{color:var(--dim)}

/* toast: a compact pill, bottom-centre, above the footer — not a banner */
.toast{left:50%;right:auto;width:max-content;max-width:calc(100% - 24px);bottom:56px;
       padding:8px 12px;border-radius:8px;transform:translate(-50%,6px)}
.toast.show{transform:translate(-50%,0)}
/* the + slots sit at the right edge too: tooltips grow leftward */
.pr.edit .slot::after{left:auto;right:0;transform:translateX(0) translateY(-2px)}
.pr.edit .slot:hover::after{transform:translateX(0) translateY(0)}
/* the closed sheet parks just below the panel; its upward shadow must not
   bleed over the footer. It also must not catch clicks while hidden. */
.sheet:not(.open){box-shadow:none;visibility:hidden;transition:transform .3s cubic-bezier(.32,.72,0,1),visibility 0s .3s}
.sheet.open{visibility:visible}

/* More filters popover: value + chevron rows, a Reset, a quiet note */
.pitem .val{font-weight:450}

/* footer: avatar + a quiet "Signed in" tag beside it */
.ftleft{display:inline-flex;align-items:center;gap:6px}
.ftag{height:20px;padding:0 7px;border-radius:5px;background:var(--block);color:var(--dim);
      font-size:11px;font-weight:550;display:inline-flex;align-items:center;gap:5px}
.ftag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}

/* play disc: 40px disc, the triangle at roughly half its height, nudged just
   enough right that its centroid sits on the disc's centre */
.dplay{width:40px;height:40px;margin:-20px 0 0 -20px}
.dplay svg{width:26px;height:26px;margin:0}
.dplay[aria-label="Play"] svg{margin-left:2px}

/* Find = two ways in (Notion-quiet). A ghost "Go to Meta Ad Library" row with
   a link glyph and a muted external-link mark at the right, an "or" hairline,
   then the search field whose solid button now reads "Search Ad Library".
   Fresh class names: .row-item/.orline are the mockup's and carry insets. */
.golib{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 6px;
       border-radius:7px;font-size:13px;font-weight:550;color:var(--ink);text-align:left;
       transition:background .12s}
.golib:hover{background:var(--hover)}
.golib .icn{color:var(--faint)}
.golib-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.golib-ext{color:var(--mute)}
.golib:hover .golib-ext{color:var(--dim)}
.orsep{display:flex;align-items:center;gap:8px;margin:10px 0;color:var(--mute);font-size:11px}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}
/* Meta's infinity mark beside "Go to Meta Ad Library", in ink so it reads as
   a logo rather than a glyph; the hint row moved under the search section. */
.golib-meta{width:16px;height:16px;color:var(--ink)}
.golib:hover .golib-meta{color:var(--ink)}
.hintrow{padding-top:8px}
/* Recents as type-ahead suggestions: a short list right under the chips, no
   label, keyboard-focusable rows with the same quiet hover as everything. */
#recents{padding-top:6px}
.sugg:focus-visible{outline:none;background:var(--hover)}
/* Search first, then "or", then the Go-to row; recents gone for now. */
.hintrow{padding-top:6px}
.find-wrap + .hintrow + .find-wrap{padding-top:4px}
.find-wrap + .hintrow + .find-wrap .orsep{margin:8px 0 6px}

.pr .v .dim{color:var(--faint);font-weight:450;margin-left:2px}

/* Bottom of the detail: Notion's quiet destructive rows. Ghost, --dim, and
   only the hover says what they do. */
.dbody .rmrow{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 6px;margin:0 -6px;
  border-radius:6px;font-size:13px;font-weight:500;color:var(--dim);text-align:left;transition:background .12s,color .12s}
.dbody .rmrow .icn{color:var(--mute);width:14px;height:14px}
.dbody .rmrow:hover{background:var(--hover);color:#c0392b}
.dbody .rmrow:hover .icn{color:#c0392b}

/* Brands segment: a list, not a grid. Avatar, name, count, chevron. */
#bgrid.list{display:flex;flex-direction:column;gap:0;padding-top:4px}
.brandrow{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 6px;margin:0;
  border-radius:6px;font-size:13px;font-weight:500;color:var(--ink);text-align:left;transition:background .12s}
.brandrow:hover{background:var(--hover)}
.brandrow .bav{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;background:var(--block)}
.brandrow .bav--blank{display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--dim)}
.brandrow .bn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandrow .bc{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.brandrow .icn{color:var(--mute)}
/* Foreplay's longer labels ("Time running", "Landing page", "Link description")
   need a wider key column than the 92px the one-word labels used. */
.pr .k{width:108px}

/* Header badge, Foreplay-quiet: a green dot and the day count in ink, no
   tinted pill. Ended = grey dot, dim text. */
.badge.live,.badge{background:none;padding:0 2px;color:var(--dim);font-weight:500}
.badge.live{color:var(--ink)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--mute);flex:none}
.badge.live .dot{background:var(--green)}

/* Media card footer, Meta's shape: DOMAIN in small caps, headline, subline, CTA. */
.dcap .dom{display:block;font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--faint);margin-bottom:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Detail footer: the one home for every action on the ad. Ghost verbs on the
   left, the ⋯ at the right; it replaces the panel's account footer while the
   page is open. The popover flips upward from here on its own. */
.dft{display:flex;align-items:center;gap:2px;height:44px;flex:none;padding:0 var(--gutter);
     border-top:1px solid var(--line);background:#fff}
.dft button{height:30px;padding:0 9px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;
     font-size:13px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
.dft button:hover{background:var(--hover);color:var(--ink)}
.dft button .icn{width:14px;height:14px;color:var(--mute)}
.dft button:hover .icn{color:var(--dim)}
.dft .more{margin-left:auto;width:30px;padding:0;justify-content:center}

/* Selected tile, Notion-quiet: no heavy ink outline. A light wash over the
   image lifts dark photos so the ink tick reads, and the tick gets a white
   halo. Light photos still show the filled tick. */
.tile.picked{outline:none}
.tile.picked .tmedia{position:relative}
.tile.picked .tmedia::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(255,255,255,.32);animation:washIn .15s ease-out}
.tile.picked .tick{box-shadow:0 0 0 2px rgba(255,255,255,.95);z-index:1}
@keyframes washIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tile.picked .tmedia::after{animation:none}}

/* Board picker: the ink check is the whole "added" state — no ink ring round
   the card. Same wash + halo as a selected tile so it reads on dark photos. */
.pick.on .pickmedia,.pick.on:hover .pickmedia{box-shadow:none}
.pick.on .pickmedia::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.32)}
.pick.on .pickbtn,.pick.on:hover .pickbtn,.pick.on .pickbtn:hover{box-shadow:0 0 0 2px rgba(255,255,255,.95);z-index:1}

/* Board picker uses the grid's own select control: an empty circle, top-left,
   always visible in a picking context, that fills with the ink check. */
.pickbtn{top:7px;left:7px;right:auto;width:20px;height:20px}
.pick .pickbtn,.pick:hover .pickbtn{opacity:1;background:rgba(255,255,255,.92);color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--mute)}
.pick:hover .pickbtn,.pick .pickbtn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pick.on .pickbtn,.pick.on:hover .pickbtn,.pick.on .pickbtn:hover{background:var(--ink);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.95)}
.pickbtn svg{width:11px;height:11px}

/* Tabs = Notion's database views: text with a 2px ink bar under the active
   one, sitting on a single full-width hairline. That hairline is now the
   panel's one divider, so the line under Chrome's header goes: the header
   and the tab row read as one block, the way Foreplay's do. */
.panel{border-top:none}
.tabs{display:flex;align-items:stretch;gap:2px;height:40px;margin:0;padding:0 var(--gutter);
      border-bottom:1px solid var(--line)}
.tab{position:relative;z-index:0;height:auto;padding:0 8px;border-radius:0;background:none;box-shadow:none;
     font-size:13.5px;font-weight:500;color:var(--dim);display:inline-flex;align-items:center;gap:6px;
     transition:color .12s}
.tab::before{content:"";position:absolute;inset:7px 0;border-radius:5px;background:var(--hover);opacity:0;
     z-index:-1;transition:opacity .12s}
.tab:hover{background:none;color:var(--ink)}
.tab:hover::before,.tab:focus-visible::before{opacity:1}
.tab:focus-visible{outline:none}
.tab.on{background:none;box-shadow:none;color:var(--ink);font-weight:600}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:1px;background:var(--ink)}
.tab .icn,.tab:hover .icn{color:var(--mute)}
.tab.on .icn{color:var(--ink)}
/* two equal halves: the ink bar runs the full width of the active side */
.tab{flex:1;justify-content:center}
.tabs{gap:0;padding:0}
.tab::before{inset:7px 6px}

/* Tabs, take three: Notion's segmented control. A --surface track the full
   width of the row, two equal segments, the active one white on a soft
   shadow. The divider under Chrome's header comes back; the underline
   tabs read heavier than the small title above them. */
.panel{border-top:1px solid var(--line)}
.tabs{position:relative;display:flex;align-items:stretch;gap:2px;height:auto;margin:0;
      padding:12px calc(var(--gutter) + 2px) 4px;border-bottom:none}
.tabs::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:10px;bottom:2px;
      border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(15,15,15,.04)}
.tab{position:relative;z-index:1;flex:1;justify-content:center;height:30px;padding:0 10px;border-radius:6px;
     font-size:13px;font-weight:500;color:var(--dim);background:none;box-shadow:none;transition:color .12s,background .12s}
.tab::before,.tab.on::after{display:none}
.tab:hover{background:none;color:var(--ink)}
.tab.on,.tab.on:hover{background:#fff;color:var(--ink);font-weight:600;
     box-shadow:0 1px 2px rgba(15,15,15,.08),0 0 0 1px rgba(15,15,15,.05)}
.tab .icn,.tab:hover .icn{color:var(--mute)}
.tab.on .icn{color:var(--ink)}
/* the track is a control, the field below is a field: different greys, more air between */
.tabs::before{background:var(--block);box-shadow:none}
.tabs{padding-bottom:8px}
.tabs::before{bottom:6px}
/* no hairline under Chrome's header: the segmented track is enough structure */
.panel{border-top:none}

/* Find, simplified: one ghost Filters button (count when anything is set) and
   chips only for filters off their default. The Search button carries the
   "opens on Meta" note as a tooltip; a plain hairline sits before the link row. */
.optbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 7px;border-radius:6px;
  font-size:12.5px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
.optbtn .icn{width:14px;height:14px;color:var(--mute)}
.optbtn:hover{background:var(--hover);color:var(--ink)}
.optbtn.set{color:var(--ink)}
.optbtn.set .icn{color:var(--dim)}
.opts{align-items:center;gap:4px;padding-top:8px}
.opts .fchip{height:26px;font-size:12.5px}
.findsep{height:1px;background:var(--line);margin:16px 0 4px}

/* Filter icon inside the field, beside Search. A 6px ink dot marks "something
   is set"; chips for the changed filters sit below, only when there are any. */
.field .fieldtool{margin-left:auto;flex:none;width:26px;height:26px;border-radius:5px;display:grid;place-items:center;
  color:var(--faint);position:relative;transition:background .12s,color .12s}
.field .fieldtool .icn{width:14px;height:14px}
.field .fieldtool:hover{background:var(--block);color:var(--ink)}
.field .fieldtool.set{color:var(--ink)}
.field .fieldtool.set::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 1.5px var(--surface)}
.field:focus-within .fieldtool.set::after{box-shadow:0 0 0 1.5px #fff}
.field .searchbtn{margin-left:4px}
.opts{padding-top:8px}
/* zero outlines (DESIGN_PATTERNS): hover and the popover say what has focus */
.panel button:focus-visible,.panel button:focus{outline:none}

/* Find mirrors Saved: the field alone in .srow, then a .segrow with the
   solid Search Ad Library at the left and the filter tool at the right,
   chips beneath only when a filter is set. The Go-to row is gone. */
.findrow{padding-top:0}
.findgo{height:28px;padding:0 12px;border-radius:6px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:550;
  display:inline-flex;align-items:center;white-space:nowrap;transition:background .12s,opacity .12s}
.findgo:hover{background:#2b2a26}
.findgo:active{opacity:.85}
.tool#findFilters{position:relative}
.tool#findFilters.set{color:var(--ink)}
.tool#findFilters.set::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 1.5px #fff}
.opts{padding:0 var(--gutter) 8px}
/* Search button = the Saved tab's active segment: white on the soft --sel
   ring and shadow, ink text, a small glyph. Quiet like Notion; the field
   above is where the eye goes. */
.findgo{background:#fff;color:var(--ink);box-shadow:var(--sel);font-weight:600;gap:6px;padding:0 11px 0 9px}
.findgo .icn{color:var(--faint)}
.findgo:hover{background:var(--hover)}
.findgo:active{opacity:1;background:var(--block)}

/* Pinterest rule: columns are added, not stretched. A column is at least
   140px (96 compact); the panel shows as many as fit and shares the rest.
   320px panel → 2 columns; ~460 → 3; ~610 → 4; ~760 → 5. Same for boards
   and the board picker. */
.mas{column-count:auto;column-width:140px}
.mas.compact{column-count:auto;column-width:96px}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#bgrid.list{display:flex}
.pickgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

/* Pinterest-sized columns: 148px minimum, which is exactly two columns at
   the panel's 320px floor and then 2 of 182 at 380, 2 of 226 at 460, 3 of 163
   at 520, 4 at 700, 5 at 860 — Pinterest's phone sizes. Compact stays dense. */
.mas{column-width:148px}
.mas.compact{column-width:96px}
/* the empty board's one button: the same white pill as Search */
.bempty .pill{background:#fff;box-shadow:var(--sel);color:var(--ink);font-weight:600;padding:0 12px 0 10px}
.bempty .pill:hover{background:var(--hover);box-shadow:var(--sel)}

/* Masonry: N flex columns, tiles placed by JS into the shortest one. Compact
   tiles are all one height, so a plain auto-fill grid packs them with no
   empty columns. Tiles carry no column margins any more. */
.mas{column-count:auto;column-width:auto;display:flex;gap:8px;align-items:flex-start}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.mas .tile{margin:0;break-inside:auto}
.mas.compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;column-width:auto}
.mas.compact .tile{margin:0}
/* a frozen grid mid-drag may be wider than the panel for a moment */
.grid{overflow-x:hidden}
/* menu rows that leave the panel carry a quiet external-link mark at the right */
.pitem .ext{margin-left:auto;display:flex;color:var(--mute)}
.pitem .ext .icn{width:12px;height:12px}
.pitem:hover .ext{color:var(--dim)}
/* the toast must not catch clicks while hidden, and must catch them while shown */
.toast{pointer-events:none}
.toast.show{pointer-events:auto}
.toast .tundo{cursor:pointer;position:relative}

/* ============================ Full page (#full) ============================
   The panel opened in a tab. A --surface left nav (Notion's sidebar), the
   library filling the width, and the detail as a 460px right pane that
   slides open beside the grid instead of over it. Every token, row and
   control is the panel's; only the frame changes. */
.side{display:none}
html.full,html.full body{height:100%}
html.full .panel{display:grid;grid-template-columns:232px minmax(420px,1fr) auto;grid-template-rows:100%;height:100vh}
html.full .tabs{display:none}
html.full .side{display:flex;flex-direction:column;grid-column:1;grid-row:1;min-height:0;
  background:var(--surface);border-right:1px solid var(--line);padding:14px 10px 10px}
html.full .view{grid-column:2;grid-row:1;min-width:0;min-height:0}
html.full .view[hidden]{display:none}
html.full .detail{grid-column:3;grid-row:1;position:relative;inset:auto;transform:none;width:0;min-width:0;
  overflow:hidden;opacity:1;pointer-events:auto;border-left:1px solid var(--line);
  transition:width .22s cubic-bezier(.32,.72,0,1)}
html.full .detail.open{width:460px}
html.full .detail .hd,html.full .detail .dbody,html.full .detail .dft{width:460px}
html.full .detail .dbody{padding:0 16px 14px}
/* nav */
.side-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 14px;font-size:14px;font-weight:650;color:var(--ink)}
.side-brand img{width:22px;height:22px;border-radius:6px;display:block}
.side-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:16px 8px 4px}
.sitem{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 8px;border-radius:6px;
  font-size:13.5px;font-weight:500;color:var(--dim);text-align:left;transition:background .12s,color .12s}
.sitem .icn{color:var(--mute);width:15px;height:15px;flex:none}
.sitem .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitem .k{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.sitem:hover{background:var(--hover);color:var(--ink)}
.sitem.on{background:var(--block);color:var(--ink);font-weight:600}
.sitem.on .icn{color:var(--ink)}
.sitem.sub{padding-left:28px;height:28px;font-size:13px}
.side-boards{overflow-y:auto;min-height:0;margin-top:2px}
.side-foot{margin-top:auto}
html.full .ftbar{border-top:1px solid var(--line);background:none;padding:10px 0 0;height:auto;margin-top:8px}
/* content column */
html.full .srow,html.full .segrow,html.full .fchips,html.full .grid,html.full .bgrid,html.full .drill,html.full .opts{
  padding-left:28px;padding-right:28px}
html.full .srow{padding-top:20px}
html.full .segrow .seg{display:none}
.pagetitle{display:none;align-items:baseline;gap:8px;font-size:15px;font-weight:650;color:var(--ink)}
.pagetitle .k{font-size:12px;font-weight:450;color:var(--mute);font-variant-numeric:tabular-nums}
html.full .pagetitle{display:inline-flex}
html.full .pagetitle[hidden]{display:none}
html.full .grid{padding-bottom:32px}
html.full .mas{gap:12px}
html.full .mcol{gap:12px}
html.full #bgrid.list{max-width:760px}
html.full #viewFind .srow,html.full #viewFind .findrow,html.full #viewFind .opts{max-width:720px}
html.full #viewFind .srow{padding-top:44px}
/* sheets become centred dialogs; the toast sits at the content's bottom-left */
html.full .sheet{inset:auto;left:50%;top:50%;width:540px;max-height:82vh;border-radius:12px;
  transform:translate(-50%,-50%) scale(.985);opacity:0;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),opacity .2s,visibility 0s .2s}
html.full .sheet.open{transform:translate(-50%,-50%);opacity:1;transition:transform .2s cubic-bezier(.2,.7,.3,1),opacity .2s}
html.full .toast{left:256px;right:auto;bottom:20px;width:max-content;max-width:460px}

/* Full page, round two: white nav, full-width pages, and the detail as a
   centred dialog (Foreplay's) — the ad on the left, the Notion page of rows
   on the right — instead of a side pane. */
html.full .panel{grid-template-columns:232px minmax(0,1fr)}
html.full .side{background:#fff}
html.full #viewFind .srow,html.full #viewFind .findrow,html.full #viewFind .opts{max-width:none}
html.full #bgrid.list{max-width:none}
.dwin{display:contents}
html.full .detail{grid-column:auto;grid-row:auto;position:fixed;inset:0;width:auto;min-width:0;overflow:visible;
  border-left:none;display:grid;place-items:center;padding:28px;background:rgba(24,22,20,.38);
  opacity:0;pointer-events:none;transition:opacity .16s}
html.full .detail.open{width:auto;opacity:1;pointer-events:auto}
html.full .detail .hd,html.full .detail .dbody,html.full .detail .dft{width:auto}
html.full .dwin{display:flex;flex-direction:column;width:min(1080px,100%);max-height:min(92vh,960px);
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 24px 80px rgba(15,15,15,.28),0 0 0 1px rgba(15,15,15,.06);
  transform:scale(.985);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
html.full .detail.open .dwin{transform:none}
html.full .detail .hd{padding:12px 16px 10px;border-bottom:1px solid var(--line)}
html.full .detail .dbody{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 36px;
  padding:20px 24px 24px;overflow:auto;align-items:start}
html.full .dmain{position:sticky;top:0;align-self:start}
html.full .dside{min-width:0}
html.full .dside > .sep:first-child{display:none}
html.full .dmedia img,html.full .dmedia video{max-height:calc(92vh - 220px);object-fit:contain}
html.full .detail .dft{border-top:1px solid var(--line);padding:0 16px}
html.full .toast{z-index:31}

/* Full page, round three: the dialog fills the screen and the ad is shown
   as large as the viewport allows at its own shape — no crop, no letterbox.
   The nav gets Notion's grey back, one shade lighter than --surface. */
html.full .side{background:#fafaf9}
html.full .detail{padding:16px}
html.full .dwin{width:100%;height:100%;max-width:none;max-height:none}
html.full .detail .dbody{grid-template-columns:minmax(0,1fr) 440px;gap:0 40px;padding:24px 28px 28px;height:100%}
html.full .dmain{display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:sticky;top:0;min-height:100%}
html.full .dmain .dcard{width:fit-content;max-width:100%}
html.full .dmedia{height:auto;min-height:0;max-height:none;background:transparent}
html.full .dmedia img,html.full .dmedia video,html.full .dmedia>video{display:block;width:auto;height:auto;
  max-width:100%;max-height:calc(100vh - 250px);object-fit:contain}
html.full .dmedia.noimg{height:240px;width:360px;background:var(--block)}
/* a phone-sheet handle has no meaning on a centred dialog */
html.full .sheet .grab{display:none}
/* full page: the toast sits bottom-centre of the content column (the show
   animation owns transform, so centring is done with auto margins) */
html.full .toast{left:232px;right:0;bottom:24px;margin:0 auto;width:max-content;max-width:480px}

/* Full page, round four: the dialog fits its content instead of the screen.
   The ad shows whole at its own shape (capped by the viewport height and a
   sane width), the rows column beside it; the page stays visible around. */
html.full .detail{padding:48px;background:rgba(24,22,20,.3)}
html.full .dwin{width:auto;height:auto;max-width:calc(100vw - 96px);max-height:calc(100vh - 96px)}
html.full .detail .dbody{grid-template-columns:auto 420px;height:auto;padding:24px 28px 28px;gap:0 36px}
html.full .dmain{min-width:360px;max-width:min(640px,52vw);min-height:0}
html.full .dmain .dcard{width:fit-content;max-width:100%}
html.full .dmedia img,html.full .dmedia video,html.full .dmedia>video{max-height:calc(100vh - 340px)}

/* Full page, round five: one dialog size for every ad (Swipekit's). The
   media box is fixed and shows the whole ad contained on a quiet ground;
   the rows scroll in their own column; nothing resizes between ads. */
html.full .dwin{width:min(1160px,calc(100vw - 96px));height:min(840px,calc(100vh - 96px));max-width:none;max-height:none}
html.full .detail .dbody{grid-template-columns:minmax(0,1fr) 420px;align-items:stretch;height:auto;min-height:0;
  overflow:hidden;padding:20px 24px 22px;gap:0 32px}
html.full .dmain{position:static;display:flex;flex-direction:column;min-width:0;max-width:none;min-height:0;height:100%}
html.full .dmain .dcard{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;max-width:none}
html.full .dmedia{flex:1 1 auto;min-height:0;height:auto;max-height:none;display:grid;place-items:center;
  background:var(--surface);border-radius:8px 8px 0 0}
html.full .dcard.single .dmedia{border-radius:8px}
html.full .dmedia img,html.full .dmedia video,html.full .dmedia>video{width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain}
html.full .dmedia.noimg{width:auto;height:auto}
html.full .dmain .pgdots{flex:none}
html.full .dside{min-height:0;height:100%;overflow:auto;padding-right:4px}
/* the media fills its fixed box without ever driving the box's size */
html.full .dmedia{position:relative}
html.full .dmedia img,html.full .dmedia video,html.full .dmedia>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ===== Full page, the wide views earn their width ===== */
/* List = a table. The panel keeps its compact row; these cells only exist on
   the full page, with a header row and one grid template for both. */
:root{--lcols:42px minmax(220px,1.4fr) 150px 96px 210px minmax(150px,1fr) minmax(130px,1fr) 88px 64px}
.lc,.lhead{display:none}
html.full .lhead{display:grid;grid-template-columns:var(--lcols);gap:16px;align-items:center;height:34px;padding:0 4px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);margin-bottom:4px}
html.full .lrow{display:grid;grid-template-columns:var(--lcols);gap:16px;min-height:56px}
html.full .lname .lbadge{display:none}
html.full .lc{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;font-weight:450;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.full .lc.dim,html.full .lc .dim{color:var(--faint)}
html.full .lc .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
html.full .lc .dot.ended{background:var(--mute)}
.lchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:var(--block);
  font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;margin-right:4px}
html.full .lend{justify-content:flex-end}
/* Brands: a meta line and the brand's newest posters */
.bmeta2,.bstrip{display:none}
html.full .brandrow{height:66px;padding:0 10px}
html.full .brandrow .bav{width:34px;height:34px}
html.full .brandrow .bn{display:flex;flex-direction:column;gap:2px;white-space:normal}
html.full .brandrow .bnm{font-weight:600}
html.full .bmeta2{display:block;font-size:12px;font-weight:450;color:var(--faint)}
html.full .bstrip{display:flex;gap:4px;margin:0 20px 0 16px}
html.full .bstrip i{width:44px;height:44px;border-radius:6px;background:var(--block) center/cover no-repeat;display:block}
/* Boards: bigger covers */
html.full .bgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px 18px}
html.full .bcov{height:156px}
/* Detail footer: the promoted actions, Remove at the far right */
.dft .dftw,.dft .dftgap{display:none}
html.full .dft .dftw{display:inline-flex}
html.full .dft .dftgap{display:block;flex:1}
html.full .dft .more{margin-left:0}
html.full .dft .danger:hover,html.full .dft .danger:hover .icn{color:#c0392b}
html.full .dft{flex-wrap:nowrap;overflow:hidden}
html.full .dft button{white-space:nowrap;flex:none}

/* List table: columns that fit a 1300px window with the select column in
   view, tighter gaps, "+N" overflow chips with a tooltip for the rest, and
   the select circle at the right on hover (always while selecting). */
:root{--lcols:42px minmax(170px,1.3fr) 128px 72px minmax(150px,1fr) minmax(130px,1fr) minmax(130px,1fr) 64px 60px}
html.full .lhead,html.full .lrow{gap:12px}
html.full .lc{overflow:visible}
html.full .lc .lchip{flex:none;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.lchip.more{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);cursor:default;position:relative}
.lchip.more:hover{background:var(--hover);color:var(--ink)}
html.full .lend{gap:6px}
html.full .lrow .tick{width:20px;height:20px}
html.full .lrow:hover .tick.onhover,html.full .grid.selecting .lrow .tick{opacity:1}
/* fits a 1300px window with the sidebar open: 962px of minimums */
:root{--lcols:42px minmax(150px,1.3fr) 118px 64px minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) 56px 56px}
/* cells clip; chips and text shrink with an ellipsis instead of spilling
   into the next column; a hovered cell releases its overflow for the tooltip */
html.full .lc{overflow:hidden}
html.full .lc:hover{overflow:visible;position:relative;z-index:2}
html.full .lc .lchip{flex:0 1 auto;min-width:0;max-width:140px;overflow:hidden;text-overflow:ellipsis}
html.full .lc .lchip.more{flex:none}
html.full .lc .lt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "+N" as quiet text, not a ringed chip */
.lchip.more{background:none;box-shadow:none;color:var(--faint);padding:0 4px;font-weight:500}
.lchip.more:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Search button: text only */
.findgo{padding:0 12px;gap:0}

/* Detail pager. In the panel the list runs up/down, so its chevrons do too:
   "‹" alone means back, "▲ 1 of 8 ▼" means move through the list (J/K).
   On the full page there is no back arrow — click outside or Escape — so
   the pager can point left/right again. */
#detPrev .icn{transform:rotate(180deg)}
#detNext .icn{transform:none}
html.full #detPrev .icn{transform:rotate(90deg)}
html.full #detNext .icn{transform:rotate(-90deg)}
html.full #detBack{display:none}
html.full .detail .hd{padding-left:20px}
/* no Format column: it is in the detail, and the table breathes better */
:root{--lcols:42px minmax(150px,1.3fr) 118px minmax(150px,1fr) minmax(130px,1fr) minmax(130px,1fr) 56px 56px}

/* Full page select bar: labelled ghost tools, Notion's toolbar weight */
html.full .tool.lab{width:auto;height:30px;padding:0 10px 0 8px;gap:7px;font-size:13px;font-weight:500;color:var(--dim)}
html.full .tool.lab .icn{color:var(--mute);width:14px;height:14px}
html.full .tool.lab:hover{background:var(--hover);color:var(--ink)}
html.full .tool.lab:hover .icn{color:var(--dim)}
html.full .tool.lab.danger:hover,html.full .tool.lab.danger:hover .icn{color:#c0392b}
html.full #selbar .tsep{margin:0 6px}
html.full #selN{font-weight:600}

/* Full-page detail bar: four groups behind hairlines — get it out · share ·
   the brand · remove — and no ⋯, since nothing is left for one. */
.dftsep{display:none}
html.full .dft .dftsep{display:block;width:1px;height:16px;background:var(--line);margin:0 6px;flex:none}
html.full #detMore{display:none}
html.full .dft button[disabled]{opacity:.45;cursor:default}
html.full .dft button[disabled]:hover{background:none;color:var(--dim)}

/* Full page: a caption under every card — brand, and the day count behind
   its dot — so the hover overlay is not needed there. */
.tcap{display:none}
html.full .tcap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 2px 2px;min-width:0}
html.full .tcb{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.full .tca{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--faint);flex:none}
html.full .tca .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
html.full .tca .dot.ended{background:var(--mute)}
html.full .tmeta{display:none}
html.full .tile{overflow:visible}
html.full .tmedia{border-radius:10px}

/* Detail: the brand name is a link into the library's own brand view */
.pr .brandlnk{cursor:pointer;color:var(--ink);text-decoration-line:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .12s}
.pr .brandlnk:hover{text-decoration-color:var(--mute)}

/* List rows: a small select box, always visible, at the left (both surfaces) */
:root{--lcols:20px 42px minmax(150px,1.3fr) 118px minmax(150px,1fr) minmax(130px,1fr) minmax(130px,1fr) 56px 56px}
.lrow .tick,.lrow .tick.onhover,html.full .lrow .tick,html.full .lrow .tick.onhover{position:static;opacity:1;width:16px;height:16px;
  border-radius:4px;flex:none;box-shadow:inset 0 0 0 1.5px var(--mute);background:#fff}
.lrow .tick:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lrow .tick svg{width:10px;height:10px}
.lrow.picked .tick{background:var(--ink);box-shadow:none}
.lrow{gap:12px}

/* "+" on the Boards heading: beside the segment in the panel (Boards scope
   only), at the right of the nav row on the full page (on hover). */
#segNew{width:24px;height:24px;margin-left:2px;color:var(--mute)}
#segNew .icn{width:13px;height:13px}
#segNew:hover{color:var(--ink)}
html.full #segNew{display:none}
.sitem-wrap{position:relative}
.sideplus{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:5px;
  display:grid;place-items:center;color:var(--mute);opacity:0;transition:opacity .12s,background .12s,color .12s}
.sideplus .icn{width:12px;height:12px}
.sitem-wrap:hover .sideplus{opacity:1}
.sideplus:hover{background:var(--block);color:var(--ink)}
.sitem-wrap:hover .sitem .k{opacity:0}

/* picked list rows: the box fills ink with a white check, on both surfaces
   (the always-visible box rule above outranked this on the full page) */
.lrow.picked .tick,html.full .lrow.picked .tick,html.full .lrow.picked .tick.onhover{background:var(--ink);box-shadow:none;color:#fff}
.lrow.picked .tick svg{color:#fff}

/* footer: "Open app ↗" as a small ghost button, not a lone glyph */
.openapp{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:5px;
  font-size:12.5px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
.openapp .icn{width:12px;height:12px;color:var(--mute)}
.openapp:hover{background:var(--hover);color:var(--ink)}
.openapp:hover .icn{color:var(--dim)}
html.full .openapp{display:none}

/* The panel must never scroll, not even programmatically: a focus() during
   Chrome's open animation used to scroll it and leave everything shifted.
   `clip` forbids that; `hidden` only hides the bars. */
.panel{overflow:clip}

/* "No saved ads yet" wears the empty board's clothes: a grey mark, one quiet
   line, and the white pill — not a tinted badge and a solid button. */
#savedEmpty{gap:12px;padding-bottom:40px}
#savedEmpty .mark{width:38px;height:38px;border-radius:10px;background:var(--surface);color:var(--dim)}
#savedEmpty .mark svg{width:16px;height:16px}
#savedEmpty h3{font-size:13px;font-weight:500;color:var(--dim);margin:0}
#savedEmpty p{display:none}
#savedEmpty .ink{background:#fff;color:var(--ink);box-shadow:var(--sel);height:28px;padding:0 12px;border-radius:6px;
  font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
#savedEmpty .ink:hover{background:var(--hover);box-shadow:var(--sel)}

/* full page: the brand's logo beside its name under every card */
html.full .tcb{display:flex;align-items:center;gap:7px;min-width:0}
html.full .tcn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.full .tcav{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none;background:var(--block)}
html.full .tcav--blank{display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--dim)}
html.full .mas.compact .tcav{width:16px;height:16px}

/* Captions (brand logo · name · day count) under every standard-view card on
   both surfaces; compact keeps the hover overlay instead, on both surfaces. */
.tcap{display:none}
.mas:not(.compact) .tcap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 2px;min-width:0}
.mas:not(.compact) .tcb{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:600;color:var(--ink)}
.mas:not(.compact) .tcn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mas:not(.compact) .tca{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--faint);flex:none}
.mas:not(.compact) .tca .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.mas:not(.compact) .tca .dot.ended{background:var(--mute)}
.mas:not(.compact) .tcav{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;background:var(--block)}
.mas:not(.compact) .tcav--blank{display:grid;place-items:center;font-size:9px;font-weight:600;color:var(--dim)}
.mas:not(.compact) .tmeta{display:none}
.mas:not(.compact) .tile{overflow:visible}
.mas:not(.compact) .tmedia{border-radius:10px}
html.full .mas:not(.compact) .tcb{font-size:12.5px}
html.full .mas:not(.compact) .tcav{width:18px;height:18px}
html.full .mas.compact .tcap{display:none}
html.full .mas.compact .tmeta{display:flex}
html.full .mas.compact .tile{overflow:hidden}
#grid.selecting .tile .tmeta{display:none}

/* Play marks (2026-09-08). Tile badge: same 18px disc, the triangle grown to
   Spotify's share of it. Detail: a translucent dark disc with a white triangle
   instead of the solid white one — it should read, not shout. */
.vplay svg{width:12px;height:12px;margin-left:1px}
.dplay{width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(20,18,16,.5);color:#fff;
       box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dplay svg{width:24px;height:24px;margin:0}
.dplay[aria-label="Play"] svg{margin-left:2px}
.dplay:hover{background:rgba(20,18,16,.68);transform:scale(1.04)}

/* Full-page detail bar = the panel's: Download · Open on Meta · ⋯ (everything
   else in the menu). The labelled row of every action is retired. */
html.full .dft .dftw,html.full .dft .dftsep,html.full .dft .dftgap{display:none}
html.full #detMore{display:inline-flex;margin-left:auto}

/* Sheets: Done sits top right in the header, beside Cancel — the one primary
   action, where the eye lands first. The bottom bar is gone from these sheets. */
.sheet-hd .done{margin-left:auto;height:26px;padding:0 12px;border-radius:6px;background:var(--ink);color:#fff;
                font-size:12.5px;font-weight:600;display:inline-flex;align-items:center}
.sheet-hd .done:hover{background:#2b2a26}

/* Full page: the actions are the first section of the right column —
   Download · Open on Meta · ⋯ above DESCRIPTION — not a bar under the dialog.
   Pulled 7px left so the first icon lines up with the section labels. */
html.full .dside .dft{height:auto;padding:0 0 12px;margin:0 0 2px -5px;border-top:none;border-bottom:1px solid var(--line)}
html.full .dside .dft + .sep{display:none}

/* Footer, signed in with a known name: a small initial disc + first name
   (the web app hands the extension the profile at sign-in). Without a name
   the "Signed in" chip stays. */
.who-btn{height:30px;padding:0 9px 0 3px;border-radius:7px;display:inline-flex;align-items:center;gap:7px;
         color:var(--ink);font-weight:550;font-size:13px;max-width:180px}
.who-btn:hover{background:var(--hover)}
.who-btn .wav{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;
              display:grid;place-items:center;flex:none;letter-spacing:.02em}
.who-btn .wname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* app.adscoop.app — what the panel's CSS does not cover: /login and /account.
   Same tokens as sidepanel.css (loaded first). */
body.is-login #panel{display:none}
#login{position:fixed;inset:0;background:#fff;overflow:auto;z-index:40;font-size:13px}
.lg-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:28px 20px 40px}
.lg-brand{align-self:flex-start;display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px}
.lg-brand img{width:24px;height:24px;border-radius:6px}
.lg-card{width:min(420px,100%);margin-top:clamp(24px,10vh,96px);padding:30px 28px 22px;background:#fff;border-radius:14px;
         box-shadow:0 1px 2px rgba(15,15,15,.05),0 10px 30px rgba(15,15,15,.09),0 0 0 1px rgba(15,15,15,.05)}
.lg-card h1{font-size:19px;font-weight:650;margin:0 0 4px}
.lg-sub{color:var(--dim);font-size:13.5px;line-height:1.45;margin:0 0 20px}
.lg-step{display:flex;flex-direction:column;gap:10px}
.lg-btn{height:42px;border-radius:9px;box-shadow:var(--sel);background:#fff;font-size:14px;font-weight:550;color:var(--ink);
        display:flex;align-items:center;justify-content:center;gap:10px;position:relative;width:100%}
.lg-btn svg{width:18px;height:18px;position:absolute;left:14px}
.lg-btn:hover{background:var(--hover)}
.lg-btn.primary{background:var(--ink);color:#fff;box-shadow:none}
.lg-btn.primary:hover{background:#2b2a26}
.lg-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:550;color:var(--dim)}
.lg-field input{height:40px;padding:0 12px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:450;color:var(--ink)}
.lg-field input:focus{box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff}
.lg-link{align-self:center;color:var(--dim);font-size:12.5px;font-weight:500;padding:4px 8px;border-radius:5px}
.lg-link:hover{background:var(--hover);color:var(--ink)}
.lg-note{margin:0;color:var(--dim);font-size:13px;line-height:1.45}
.lg-status{margin:12px 0 0;font-size:12.5px;color:var(--dim);text-align:center}
.lg-status.err{color:#c0392b}
.lg-status.busy::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 8px -2px 0;
  border:1.5px solid var(--line);border-top-color:var(--ink);animation:lgspin .7s linear infinite}
@keyframes lgspin{to{transform:rotate(360deg)}}
.lg-sep{height:1px;background:var(--line);margin:20px 0 14px}
.lg-legal,.lg-help{margin:0;font-size:12px;color:var(--faint);text-align:center;line-height:1.5}
.lg-legal a{color:var(--dim)}
.lg-help{margin-top:10px;padding:10px;border-radius:8px;background:var(--surface)}
.lg-help a{color:var(--ink);font-weight:550;text-decoration:none}

/* ---- account dialog: Notion's settings shape in the panel's clothes */
#account{position:fixed;inset:0;z-index:30;font-size:13px;display:grid;place-items:center;padding:28px;opacity:0;transition:opacity .16s}
#account.open{opacity:1}
.ac-scrim{position:absolute;inset:0;background:rgba(24,22,20,.38)}
.ac-dlg{position:relative;width:min(940px,100%);height:min(620px,100%);background:#fff;border-radius:12px;overflow:hidden;
        box-shadow:var(--lift),0 0 0 1px rgba(15,15,15,.06);display:grid;grid-template-columns:232px 1fr;
        transform:scale(.985);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
#account.open .ac-dlg{transform:none}
.ac-nav{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;min-width:0}
.ac-who{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;min-width:0}
.ac-av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;object-fit:cover}
.ac-t{min-width:0;display:flex;flex-direction:column}
.ac-n{font-weight:600;font-size:13px;line-height:1.2}
.ac-e{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-lbl{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:6px 8px 4px}
.ac-it{height:30px;display:flex;align-items:center;gap:9px;padding:0 8px;border-radius:6px;color:var(--dim);font-weight:500;font-size:13.5px;width:100%;text-align:left}
.ac-it .icn{color:var(--mute)}
.ac-it:hover{background:var(--hover);color:var(--ink)}
.ac-it.on{background:var(--block);color:var(--ink)}
.ac-it.on .icn{color:var(--ink)}
.ac-foot{margin-top:auto;padding:0 8px 4px;color:var(--mute);font-size:11.5px;display:flex;align-items:center;gap:8px}
.ac-beta{font-size:10.5px;font-weight:600;color:var(--dim);background:var(--block);border-radius:4px;padding:2px 6px}
.ac-pane{position:relative;padding:22px 32px 26px;overflow:auto}
.ac-pane h1{font-size:15px;font-weight:650;margin:0 0 18px}
.ac-sub{color:var(--dim);font-size:12.5px;margin:0 0 20px}
.ac-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--dim)}
.ac-x:hover{background:var(--hover);color:var(--ink)}
.ac-sec{padding:14px 0 18px;border-top:1px solid var(--line)}
.ac-sec:first-of-type{border-top:none;padding-top:0}
.ac-h{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.ac-row{display:flex;align-items:center;gap:12px;min-height:34px;padding:4px 0}
.ac-l{flex:1;min-width:0}
.ac-l b{display:block;font-weight:550;font-size:13.5px}
.ac-l > span{display:block;color:var(--dim);font-size:12.5px;margin-top:2px;line-height:1.45}
.ac-chip{font-size:11px;font-weight:600;color:var(--dim);background:var(--block);border-radius:5px;padding:2px 7px}
.ac-chip.pro{color:#fff;background:var(--ink)}
.ac-btn{height:30px;padding:0 12px;border-radius:7px;background:#fff;box-shadow:var(--sel);font-weight:550;font-size:13px;display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.ac-btn:hover{background:var(--hover)}
.ac-btn .icn{width:14px;height:14px}
.ac-btn.danger:hover{color:#c0392b;box-shadow:inset 0 0 0 1px #e9c3b0,0 1px 2px rgba(15,15,15,.07),0 3px 7px rgba(15,15,15,.04);background:#fdf0eb}
.ac-ghost{height:30px;padding:0 9px;margin-left:-9px;border-radius:6px;color:var(--dim);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.ac-ghost:hover{background:var(--hover);color:var(--ink)}
.ac-ghost .icn{width:14px;height:14px;color:var(--mute)}
.ac-ghost.danger:hover,.ac-ghost.danger:hover .icn{color:#c0392b}
.ac-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
@media (max-width:720px){.ac-dlg{grid-template-columns:1fr;height:min(720px,100%)}.ac-nav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:10px}.ac-who{display:none}.ac-lbl{display:none}.ac-it{width:auto}.ac-foot{display:none}}