/* =========================================================================
   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)}

.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)}
/* the first pull on an empty device: the mark becomes a quiet ring, no button */
.empty.loading .mark svg{display:none}
.empty.loading .mark::after{content:'';width:16px;height:16px;border-radius:50%;border:1.8px solid var(--block);
                            border-top-color:var(--brand);animation:spin .45s linear infinite}

/* ---------------- 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;pointer-events:auto}
.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)}
a.tundo{text-decoration:none}                      /* a link in the action slot (Open sheet) looks like Undo */
.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)}
[data-tip].tip-l::after{left:0;right:auto;transform:translateX(0) translateY(-2px)}
[data-tip].tip-l: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 .45s 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)}
.brow--new .bthumb{box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);color:var(--dim)}
.brow--new .bttl{color:var(--dim)}
.brow--new:hover .bthumb,.brow--new:hover .bttl{color:var(--ink)}
.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}
/* the Add-to-board rows: a quiet glyph, no ring — it reads on hover, and a
   soft tinted check once the ads are in that board */
.brow .badd{width:22px;height:22px;border-radius:5px;box-shadow:none;color:var(--faint)}
.brow .badd .icn-sm{width:12px;height:12px}
.brow:hover .badd{color:var(--dim)}
.brow .badd:hover{background:rgba(0,0,0,.06);box-shadow:none;color:var(--ink)}
.brow .badd.on{background:var(--ink);box-shadow:none;color:#fff}
.brow .badd.on:hover{background:var(--ink);color:#fff}
.pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 4px 8px}
/* the board picker (Add to board): cards on the ad picker's grid. A cover is
   the Boards tab's 2+1 mosaic; an empty board a quiet block with the glyph;
   the create card mirrors the boards grid's. */
.bpick .pickmedia.bmos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--line)}
.bpick .bmos i{display:block;background:var(--block) center/cover no-repeat}
.bpick .bmos i:first-child{grid-row:1/3}
.bpick .bempty-cov{display:grid;place-items:center;color:var(--mute)}
.bpick .pickmedia--new{display:flex;align-items:center;justify-content:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.bpick .pick--new:hover .pickmedia--new{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line)}
.bpick .pick--new:hover .newpill{color:var(--ink)}
.bpick .pick.some .pickbtn{opacity:1;background:#fff;box-shadow:inset 0 0 0 1.5px var(--mute);color:var(--dim)}
/* the circle shows by default, like the ad picker's (an empty one is the white
   ring; in the board = the ink check; some of the ads = a dash) */
.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}
/* A media box whose poster shape is remembered (poster_ar) is sized before the
   poster arrives, so a loading grid does not grow tile by tile and push the
   rest down. The poster fills the box; a shape off by a hair is cropped, and
   a real difference resizes the box when it loads. */
.tmedia.sized{width:100%}
.tmedia.sized .timg{height:100%;object-fit:cover}
.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 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}
.find-wrap,.hintrow,.lbl,.row-item,.srow,.segrow,.fchips,.grid{
  padding-left:var(--gutter);padding-right:var(--gutter)}

/* 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}}
/* an arrival, in two steps like a removal: the tiles slide to make room (the
   removal's own slide), then the new tile fades into the gap — one motion at
   a time, one speed */
@keyframes sfFade{from{opacity:0}to{opacity:1}}
.arriving .tile.enter,.arriving .lrow.enter{animation:sfFade .2s ease-out both}
.tile.enter,.lrow.enter,.bcard.enter{animation:sfIn .2s cubic-bezier(.2,.7,.3,1) both}
/* the boot paint: the whole grid fades in once, no tile moves */
.grid.appear,.bgrid.appear{animation:sfFade .18s ease-out}
/* 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}

.dbody .acts button[disabled]{opacity:.4;cursor:default}
.dbody .acts button[disabled]:hover{background:none;color:var(--dim)}

/* Transcript — its own section under Description (phase 8; mockup
   transcript-section.html). One quiet row to start; the ring + a percentage
   while the worker runs, the × in the slot column every row uses for Copy /
   Add; then the text, clamped, with Copy / Copy with timestamps. */
/* the start row is shaped like the Boards / Tags rows: full width, the same
   hover wash, the glyph in the rows' icon column */
.trans .tr-btn{display:flex;align-items:center;gap:7px;width:calc(100% + 12px);min-height:32px;padding:3px 6px;margin:0 -6px;
  border-radius:6px;text-align:left;font-size:12.5px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
.trans .tr-btn .icn{color:var(--mute);width:13px;height:13px}
.trans .tr-btn:hover{background:var(--hover);color:var(--ink)}
.trans .tr-btn:hover .icn{color:var(--dim)}
.trans .blockhead .slot.on{opacity:1;cursor:pointer}
.trans .blockhead .slot.on:hover{background:var(--block);color:var(--ink)}
.trans .tr-row{display:flex;align-items:center;gap:8px;min-height:28px;margin:0 2px;font-size:12.5px;color:var(--dim)}
.trans .tr-row .spin{flex:none}
.trans .tr-pct{margin-left:auto;color:var(--faint);font-variant-numeric:tabular-nums}
.trans .tr-row .lnk{color:var(--brand);cursor:pointer;font-weight:500}
.trans .tr-row .lnk:hover{text-decoration:underline}
.trans .tr-meta{font-size:11.5px;color:var(--faint);margin:4px 2px 0;line-height:1.5}
.trans .tr-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}   /* three lines, then Show more */
.trans .tr-more{display:inline-block;margin:3px 2px 0;font-size:11.5px;color:var(--faint);cursor:pointer}
.trans .tr-more:hover{color:var(--ink)}
.trans .tr-acts{display:flex;gap:2px;margin:8px -6px 0}
.trans .tr-acts button{height:28px;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}
.trans .tr-acts button .icn{width:13px;height:13px;color:var(--mute)}
.trans .tr-acts button:hover{background:var(--hover);color:var(--ink)}
.trans .tr-acts button:hover .icn{color:var(--dim)}
.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}

/* One row, two surfaces: the way into the Ad Library. The button "Open
   Facebook Ad Library" (Meta's mark, an external-link glyph) and, beside it,
   the search, which turns the row into the field, the filter tool and a
   close, with the chips of any set filter beneath.
   Side panel (no tabs): #viewFind is the panel's first row, always there. The
   button takes the row, the search is a square; a hairline, then the saved
   library.
   Full page: #viewFind is the Find page. The same two sit top left at their
   own width, and the search carries its word. */
#viewFind{flex:none}
#viewFind::after{content:"";flex:none;height:1px;background:var(--line);margin:12px var(--gutter) 2px}
.orlib{display:flex;gap:6px;padding:12px var(--gutter) 0}
.libgo{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;height:32px;
       border-radius:7px;background:#fff;box-shadow:var(--sel);font-size:13px;font-weight:550;color:var(--ink);
       white-space:nowrap;transition:background .12s}
.libgo:hover{background:var(--hover)}
.libgo:active{background:var(--block)}
.libgo .icn.lead{color:var(--dim)}
.libgo .icn.ext{width:12px;height:12px;color:var(--mute);margin-left:-1px}
.libsq{width:32px;height:32px;flex:none;border-radius:7px;background:#fff;box-shadow:var(--sel);display:grid;
       place-items:center;color:var(--dim);transition:background .12s,color .12s}
.libsq:hover{background:var(--hover);color:var(--ink)}
.libsq:active{background:var(--block)}
.libsq .sqt{display:none}
#viewFind .srow,#viewFind .opts{display:none}
#viewFind.searching .orlib{display:none}
#viewFind.searching .srow{display:flex;gap:2px;padding-top:12px;padding-bottom:0}
#viewFind.searching .findbox{margin-right:4px}
#viewFind.searching .field{height:32px}
#viewFind.searching .opts{display:flex;padding:8px var(--gutter) 0}
html.full #viewFind{flex:1}
html.full #viewFind::after{display:none}
html.full .orlib{gap:8px;padding:44px 28px 0}
html.full .libgo{flex:none;padding:0 14px 0 12px}
html.full .libsq{display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 14px 0 11px;
       font-size:13px;font-weight:550;color:var(--ink);white-space:nowrap}
html.full .libsq .icn{color:var(--dim)}
html.full .libsq .sqt{display:inline}
html.full #viewFind.searching .field{height:34px}
html.full #viewFind.searching .opts{padding:8px 28px 0}
.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)}
.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}}

/* The select circle on hover, made plain (feedback: it showed up and went
   unseen). It arrives with a small pop instead of a fade, and it is solid
   white on a soft shadow, so it holds on a light photo as well as a dark one.
   It stays empty until it is picked; over the circle itself the ring turns
   ink. Picked is as it was: ink fill, white check, white halo. */
.tile .tick{top:6px;left:6px;width:22px;height:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(15,15,15,.12),0 1px 4px rgba(15,15,15,.3);
  transition:opacity .12s,background .12s,box-shadow .12s}
.tile:not(.picked) .tick:hover{box-shadow:0 0 0 1.5px var(--ink),0 1px 4px rgba(15,15,15,.3)}
.tile:hover .tick.onhover{animation:tickIn .22s cubic-bezier(.2,.9,.3,1.4)}
@keyframes tickIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tile:hover .tick.onhover{animation:none}}
/* A fresh pick, Notion's way: the disc takes its ink fill with a small settle
   and the check draws itself, short leg first. Only on what was just picked
   (.fresh, set in paintPicks), tiles and list rows alike. The dashes live in
   the keyframes alone, so with no animation the check is simply there. (They
   are set on the <svg>: stroke dashes inherit into the <use>.) 12.5 = the
   check's length in its own 16-unit box. */
.tick.fresh{animation:tickSet .15s cubic-bezier(.2,.8,.3,1)}
.tick.fresh svg{animation:tickDraw .14s cubic-bezier(.3,.7,.2,1) .03s both}
@keyframes tickSet{0%{transform:scale(.84)}60%{transform:scale(1.05)}100%{transform:none}}
@keyframes tickDraw{from{stroke-dasharray:12.5;stroke-dashoffset:12.5}to{stroke-dasharray:12.5;stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tick.fresh,.tick.fresh svg{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}

/* No hairline under Chrome's own header: the panel's first row (the way into
   the Ad Library) sits straight under it and carries its own rule beneath. */
.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: the filter tool beside the field, chips beneath only when a filter
   is set. (The Search button and its row are gone: Enter, or the list's first
   row, runs the search.) */
.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}

/* 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 .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 .opts,html.full #viewFind .orlib{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 .opts,html.full #viewFind .orlib{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:0 6px}   /* room for the rows' 6px hover bleed on BOTH sides (it scrolls, so it clips) */
/* 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}

/* 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. */
/* ‹ n of N ›: left and right on every surface (the panel used up/down) */
#detPrev .icn{transform:rotate(90deg)}
#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}
/* the select bar: labels on one line only — never wrapped. When they would not
   fit, fitSelbar() makes the bar compact: icons with the panel's tooltips. */
html.full #selbar{flex:none;min-height:46px;flex-wrap:nowrap;overflow-x:clip;overflow-y:visible;position:relative;z-index:10}   /* above the tiles' ticks (4), below popovers (20) and sheets (18) */
/* clip sideways only (clip, not hidden: it is no scroll container, so the column
   cannot shrink it and the tooltips below the buttons stay visible); z-index so
   those tooltips paint over the grid. 46px = the scope row's height. */
html.full #selbar .n,html.full #selbar .tool{flex:none;white-space:nowrap}
html.full #selbar:not(.compact) [data-tip]::after{display:none}
html.full #selbar.compact .tool.lab{width:30px;padding:0;justify-content:center;gap:0}
html.full #selbar.compact .tool.lab span{display:none}
html.full #selbar.compact .tool.lab .icn{color:var(--dim)}
html.full #selbar.compact .tsep{margin:0 4px}
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}
/* An empty library has nothing to search, so "Search saved ads" bows out, and
   comes back with the first saved ad: a short fade and fold on both surfaces,
   never a jump. (72px clears the row on the full page, where it is taller;
   flex:none because a clipped row would otherwise be squeezed by the grid.) */
#savedSearchRow{flex:none;max-height:72px;overflow:hidden;
  transition:max-height .26s cubic-bezier(.2,.7,.3,1),padding .26s cubic-bezier(.2,.7,.3,1),opacity .2s ease .04s,visibility 0s}
#savedSearchRow.away{max-height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:max-height .26s cubic-bezier(.2,.7,.3,1),padding .26s cubic-bezier(.2,.7,.3,1),opacity .14s ease,visibility 0s .26s}
@media (prefers-reduced-motion:reduce){#savedSearchRow,#savedSearchRow.away{transition: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)}

/* ---------------- signed out ----------------
   The empty state sells nothing; this one has to. Notion's grammar — one
   promise, one black button, one quiet line under it, and nothing else on the
   page to look at. */
.signin{flex:1;min-height:0;position:relative;overflow:hidden;display:block;padding:0;text-align:center}
/* The library behind the ask — the search, the scopes and a grid of saved ads
   filling the panel, exactly as signed-in looks — with the sign-in card on
   top. Inert: it takes no clicks, no focus. */
.si-back{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;
         filter:blur(3px);transform:scale(1.015)}     /* a light blur: the ads read, the card reads first */
.si-back .segrow{display:flex;align-items:center}
.si-back .segrow .tools{margin-left:auto}
.si-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;padding:4px var(--gutter) 0}
.si-col{display:flex;flex-direction:column;gap:8px}
.si-col3{display:none}
html.full .si-col3{display:flex}
.si-tile{border-radius:10px;overflow:hidden;background:#fff}
.si-tile img{display:block;width:100%;height:auto;border-radius:10px;background:var(--block)}
.si-cap{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 2px;
        font-size:12.5px;font-weight:550;color:var(--ink);text-align:left}
.si-cap .b{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.si-cap .b i{width:16px;height:16px;border-radius:50%;background:var(--block);flex:none}
.si-cap .a{font-size:11.5px;color:var(--faint);font-weight:450;display:flex;align-items:center;gap:5px;white-space:nowrap}
.si-cap .a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.si-over{position:absolute;inset:0;display:flex;align-items:center;
         justify-content:center;padding:26px 16px;overflow-y:auto}
/* The card is the panel's popover, grown: the same 8px corners, the same
   hairline edge and lift shadow (.pop), the same type as the old sign-in
   page, and the app's black button. Nothing on it is new to the app. */
.si-card{background:#fff;border-radius:8px;padding:22px 18px 22px;max-width:300px;width:100%;
         display:flex;flex-direction:column;align-items:center;
         box-shadow:0 0 0 1px var(--line),var(--lift)}
/* AdScoop's mark leads the card, the size of the account menu's */
.si-logo{width:32px;height:32px;border-radius:8px;display:block;margin:0 0 12px}
/* the card speaks at the panel's own size: its title a step above the buttons'
   13px, the two lines under it (one sentence each) and the button a step below */
.signin h3{font-size:13.5px;font-weight:650;letter-spacing:-.005em;margin:0;max-width:250px;line-height:1.35;text-wrap:balance}
.signin p{font-size:12px;color:var(--dim);line-height:1.55;margin:5px 0 0;text-wrap:balance}

/* the button: Notion's solid black — 500 weight, a 4px radius, one hairline
   shadow, and a hover that only warms the fill. Nothing moves. */
.si-cta{margin-top:16px;height:28px;padding:0 12px;border-radius:4px;background:var(--ink);color:#fff;
        font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;
        box-shadow:0 1px 2px rgba(15,15,15,.1);transition:background .12s}
.si-cta:hover{background:#4a4740}
.si-cta:active{background:#2b2a26}

/* full page: the same block, held at reading width in the middle */
html.full .signin{padding:0}
html.full .si-grid{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px;max-width:760px}
html.full .si-back .srow,html.full .si-back .segrow{max-width:760px;box-sizing:border-box}
html.full .si-back .srow,html.full .si-back .segrow{padding-left:28px;padding-right:28px}
html.full .si-back .srow{padding-top:20px}

/* 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)}
/* the disc: a quiet grey with a dark initial, on both surfaces (the account dialog's .ac-av in app/web.css is the same) */
.who-btn .wav{width:24px;height:24px;border-radius:50%;background:#e2e2e2;color:#565450;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}

/* Share (phase 6, entry points only for now): an icon beside the ⋯ in the
   detail footer, on both surfaces. It takes the gap; the ⋯ sits beside it. */
.dft .share{margin-left:auto;width:30px;padding:0;justify-content:center}
.dft .share + .more{margin-left:0}
html.full .dft .share{margin-left:auto;display:inline-flex}
html.full #detMore{margin-left:0}

/* ---- Sharable links (phase 6). A shared ad / board shows no mark on its
   chain-link button; the tooltip and the menus ("Turn off link") carry it. */

/* ---- Share pages (web app only, html.share on top of html.full): someone
   else's board or ad, read-only. The wide layout without the nav; a slim bar
   on top says who shared it; a footer points at the extension. Nothing here
   reaches the extension — #shareBar / #shareFoot stay hidden there. */
.sharebar,.sharefoot{display:none}
html.share .panel{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr)}
html.share .side{display:none}
html.share .view{grid-column:1;grid-row:2}
html.share .sharebar{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;grid-column:1;grid-row:1;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--line);font-size:13px;font-weight:450}
html.share .sharebar>.logo{width:20px;height:20px;border-radius:5px;display:block;flex:none}
html.share .sharebar .who b{font-weight:600}
html.share .sharebar .cta{margin-left:auto;height:28px;padding:0 11px;border-radius:7px;font-weight:550;font-size:12.5px;
  color:var(--ink);background:#fff;text-decoration:none;box-shadow:var(--sel);display:inline-flex;align-items:center;gap:7px;
  transition:background .12s}
html.share .sharebar .cta:hover{background:var(--hover)}
html.share .sharebar .cta .icn{color:var(--dim)}
html.share .sharebar .cta .icn{width:13px;height:13px}
html.share .sharefoot{display:flex;align-items:center;gap:6px;flex:none;padding:12px 28px;border-top:1px solid var(--line);
  color:var(--faint);font-size:12px}
html.share .sharefoot .logo{width:16px;height:16px;border-radius:4px;display:block;flex:none;margin-right:2px}
html.share .sharefoot a{color:var(--ink);font-weight:600;text-decoration:none}
html.share .sharefoot a:hover{text-decoration:underline;text-underline-offset:2px}
/* a single ad: no search row and no filter — there is one tile */
html.share.single .srow,html.share.single #tools{display:none}
html.share.single .segrow{padding-top:22px}
html.share .toast{left:0;right:0}
html.share #segNew,html.share #selbar,html.share .tick{display:none}
html.share .empty .ink{margin-top:4px}
/* the detail: nothing that writes to a library the viewer does not have */
html.full.share .dft [data-d="rm"],html.full.share .dft #dftUnboard,html.full.share .dft #dftTranscribe,
html.full.share .dft .dftsep{display:none}
/* a dead link (or an empty board): no search row; the one line of explanation shows */
html.share.off .srow{display:none}
html.share #savedEmpty p{display:block;max-width:340px;text-align:center}

/* ---------------- find: brand suggestions (phase 7) ---------------- */
/* One popover under the field, its width: the keyword row first (Enter), a
   hairline, then the advertisers Meta knows — picture, name, the network glyph
   and followers. The wide screen has room for the page category too. */
.findbox{flex:1;min-width:0;position:relative}
.findbox .field{width:100%}
.sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:21;background:#fff;border-radius:8px;padding:5px;
     box-shadow:0 0 0 1px var(--line),var(--lift);animation:popIn .12s cubic-bezier(.2,.7,.3,1)}
.sug[hidden]{display:none}
.sug .sit{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 8px;border-radius:5px;text-align:left;
          font-size:13px;color:var(--ink);transition:background .12s}
.sug .sit:hover,.sug .sit.is-on{background:var(--hover)}
.sug .sav{width:22px;height:22px;border-radius:50%;flex:none;background:var(--block);object-fit:cover;display:block}
.sug .sit.kw .sav{border-radius:5px;background:var(--surface);display:grid;place-items:center;color:var(--dim)}
.sug .sn{font-weight:550;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug .sn b{font-weight:650}
.sug .sn .sub{color:var(--faint);font-weight:450;margin-left:7px}
.sug .sm{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--faint);font-size:11.5px;white-space:nowrap;
         flex:none;font-variant-numeric:tabular-nums}
.sug .sm .cat{display:none}
.sug .soc{width:12px;height:12px;color:var(--mute);flex:none;margin-left:1px}
.sug kbd{margin-left:auto;font-family:inherit;font-size:10px;color:var(--mute);background:var(--surface);border-radius:4px;
         padding:1px 5px;flex:none}
.sug .sdiv{height:1px;background:var(--line);margin:5px 4px}
/* side panel only: a loading row while Meta is asked, and the recent list on an empty field */
.sug .sit.ld{pointer-events:none;height:30px}
.sug .sit.ld .sav{background:transparent;display:grid;place-items:center}
.sug .sit.ld .spin{width:11px;height:11px;border:1.5px solid var(--block);border-top-color:var(--mute)}
.sug .sph{height:24px;padding:6px 8px 0;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sug .sit.rc .sav{color:var(--mute);display:grid;place-items:center}
.sug .sav svg{display:block}
.sug .sit.rc .sm{font-size:11px}
.sug .sx{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:var(--mute);opacity:0;flex:none;margin-right:-4px;
         transition:opacity .12s,background .12s}
.sug .sx svg{display:block;width:12px;height:12px}
.sug .sit.rc:hover .sx,.sug .sit.rc.is-on .sx{opacity:1}
.sug .sx:hover{background:var(--block);color:var(--ink)}
/* no Ad Library tab open: one row offers to open it (both surfaces) */
.sug .sit.open .sav{border-radius:5px;background:var(--surface);display:grid;place-items:center;color:var(--dim)}
.sug .sit.open .sn{font-weight:500}
.sug .sit.open .ext{margin-left:auto;color:var(--mute);flex:none}
html.full .sug{padding:6px;top:calc(100% + 8px)}
html.full .sug .sit{height:38px;padding:0 10px}
html.full .sug .sav{width:24px;height:24px}
html.full .sug .sn{font-size:14px}
html.full .sug .sm{font-size:12.5px}
html.full .sug .sm .cat{display:inline}

/* 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,body.is-connected #panel{display:none}
#login,#connected{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:#e2e2e2;color:#565450;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}}

/* Google Sheets (phase 9): the Settings row while Google's tab is open, a toast
   when it lands, and the landing card at /sheets/connected */
.ac-spin{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 7px -1px 0;
  border:1.5px solid var(--line);border-top-color:var(--ink);animation:lgspin .7s linear infinite}
.ac-btn[disabled]{opacity:.5;cursor:default}
.ac-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,8px);background:var(--ink);color:#fff;font-size:12.5px;font-weight:550;
  padding:8px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;box-shadow:var(--lift-sm)}
.ac-toast.show{opacity:1;transform:translate(-50%,0)}
.gs-card{text-align:center;padding:34px 28px 26px}
.gs-mark{width:46px;height:46px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#f1f1ef}
.gs-mark svg{display:block}
.gs-mark.ok{background:rgba(240,107,68,.14);box-shadow:0 0 0 9px rgba(240,107,68,.055)}
.gs-mark.ok path{stroke-dasharray:30;stroke-dashoffset:30;animation:gsdraw .38s cubic-bezier(.65,0,.35,1) .25s forwards}
.gs-mark.busy{background:transparent}
.gs-mark.busy .ac-spin{width:22px;height:22px;margin:0;border-width:2px}
.gs-card h1{margin-bottom:6px}
.gs-card .lg-sub{margin:0 0 20px}
.gs-card .lg-btn{text-decoration:none}
@keyframes gsdraw{to{stroke-dashoffset:0}}

/* ---- the card after sign-in (web.js showLanding): the logo alone, a title,
   one sentence, the app's quiet white button and a plain-text second one */
.land{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .18s}
.land.open{opacity:1}
.land-scrim{position:absolute;inset:0;background:rgba(55,53,47,.16)}
.land-card{position:relative;width:min(420px,100%);background:#fff;border-radius:14px;padding:30px 32px 22px;box-shadow:0 20px 60px rgba(0,0,0,.16);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transform:translateY(6px) scale(.985);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.land.open .land-card{transform:none}
.land-logo{width:40px;height:40px;border-radius:10px;margin-bottom:6px}
.land-card h3{font-size:19px;font-weight:650;margin:0;color:var(--ink)}
.land-card p{margin:0;color:var(--dim);font-size:14px;line-height:1.5;max-width:38ch}
.land-row{display:flex;align-items:center;gap:4px;margin:10px 0 4px}
/* the empty state's own button (#savedEmpty .ink): white, the selection
   hairline, 28px, 13px — and a plain-text second action beside it */
.land-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:6px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;
  color:var(--ink);background:#fff;box-shadow:var(--sel);border:0;cursor:pointer;white-space:nowrap;transition:background .12s}
.land-btn:hover{background:var(--hover);box-shadow:var(--sel)}
.land-btn.quiet{box-shadow:none;background:transparent;color:var(--dim);font-weight:500}
.land-btn.quiet:hover{background:var(--hover);color:var(--ink)}
.land-btn:focus-visible{outline:2px solid #2F6FED;outline-offset:2px}
.land-fine{font-size:12px;color:var(--faint)}