/* NodeLens workspace: Settings, then Brands and Plan, and the brand parts on other screens (the chip, the lock, the
   scope cell). Product tokens only: the agency brand never reaches these screens, only the preview frames. Loads
   after ws.css. */

/* the allowed families, each shown in its own face in the Type picker (self-hosted, brand.py FONT_FAMILIES) */
@font-face{font-family:'Sora';font-weight:400;font-display:swap;src:url(/static/fonts/sora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url(/static/fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/static/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-display:swap;src:url(/static/fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-display:swap;src:url(/static/fonts/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-weight:400;font-display:swap;src:url(/static/fonts/work-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Lora';font-weight:400;font-display:swap;src:url(/static/fonts/lora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-display:swap;src:url(/static/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}

/* ---------------------------------------------------------------- shared parts */
.bchip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 3px;border-radius:999px;background:var(--surface-chip);border:1px solid var(--border);color:var(--text-2);font-size:var(--f11);font-weight:500;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.bchip img{width:16px;height:16px;border-radius:4px;flex:none}
.bchip.un{padding-left:8px}
.bchip .bdot{width:8px;height:8px;border-radius:50%;border:1.5px dashed var(--text-3);flex:none}
.bchipw{margin-top:7px}
.lock{display:inline-flex;align-items:center;gap:5px;font-size:var(--f11);font-weight:500;color:var(--text-2);text-decoration:none;padding:2px 9px;border:1px dashed var(--border-strong);border-radius:999px;background:var(--surface-sunken);white-space:nowrap;vertical-align:middle}
a.lock:hover{color:var(--text-1);border-color:var(--text-3)}
a.lock:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lock svg{flex:none;color:var(--text-3)}
.pacts .lock,.btools .lock,.factions .lock{align-self:center}
.tagb.on{background:color-mix(in srgb,var(--primary-fg) 14%,var(--surface-panel));color:var(--primary-fg)}
.bplanline{display:flex;gap:7px;align-items:center;margin-top:18px}
.bplanline a{color:var(--link)}
.berr,.fld small.berr{color:var(--danger);font-size:var(--f11);line-height:1.4}
.berr[hidden]{display:none}
.fld.bad .bcolin input:not([type=color]){border-color:var(--danger)}
.bfoot{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.bcount{font-size:var(--f11);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.bcount.near{color:var(--warning-fg)}
.ws fieldset.fld{border:0;padding:0;margin:0;min-width:0}
.ws fieldset.fld legend{font-size:var(--f12);font-weight:600;color:var(--text-1);margin-bottom:6px;padding:0}

/* ---------------------------------------------------------------- sites list: filter, bulk, chip */
.btools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-8px 0 14px}
.btools select{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:var(--f12);width:auto;min-width:180px;max-width:100%;text-overflow:ellipsis}
.btools .bfilter,.btools .bfilter label{min-width:0;max-width:100%}
.bpick{display:none;position:relative;margin-right:8px;vertical-align:-3px;cursor:pointer}
.bpick input{position:absolute;opacity:0;width:1px;height:1px}
.bpick .box,.bmc .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);display:grid;place-items:center;color:transparent;background:var(--surface-app)}
.bpick input:checked+.box,.bmc input:checked+.box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.bpick input:focus-visible+.box,.bmc input:focus-visible+.box{outline:2px solid var(--focus);outline-offset:2px}
.bsel-on .bpick{display:inline-block}
.bsel-on .who h2{display:inline}
.bbulk{position:fixed;left:80px;right:24px;bottom:16px;max-width:900px;margin:0 auto;z-index:25;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);font-size:var(--f12)}
.bbulk select{width:auto;max-width:100%;min-height:32px;padding-top:4px;padding-bottom:4px;font-size:var(--f12)}
.bbulk [data-bbulk-n]{font-weight:600;margin-right:auto}
.bqsl{flex-wrap:wrap}
.bqsl .btn{margin-left:auto}

/* ---------------------------------------------------------------- brand list */
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.bcard{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 14px;align-items:start;padding:16px 18px;background:var(--surface-panel);border:1px solid var(--border);border-radius:14px}
.bcard.quiet{background:transparent;border-style:dashed}
.bcard.bro{background:var(--surface-sunken)}
.bclogo{width:56px;height:56px;border-radius:12px;background:var(--surface-sunken);border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.bclogo img{max-width:44px;max-height:44px;display:block}
.bcard h2{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap;line-height:1.3}
.bcard h2 a{text-decoration:none;overflow-wrap:anywhere}
.bcard h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.bcmeta{font-size:var(--f11);color:var(--text-3);margin-top:4px;line-height:1.6}
.bcmeta .url{overflow-wrap:anywhere}
.bcmeta .st{font-size:var(--f11)}
.bcacts{grid-column:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bqs{margin-bottom:18px;border-color:var(--border-strong)}
.bqs .bqsh h3{font-size:var(--f18);margin:4px 0 4px}
.bqs .wsform{margin-top:14px}
.bcol .bcolin{display:flex;gap:8px}
.ws .bcolin input[type=color]{width:44px!important;min-width:44px;flex:none;height:40px;padding:3px;border:1px solid var(--border-field);border-radius:9px;background:var(--surface-app);cursor:pointer}
.bcolin input[type=color]:disabled{cursor:not-allowed;opacity:.6}
.bcolin input:not([type=color]){font-family:var(--font-mono);font-size:var(--f12);text-transform:uppercase}

/* ---------------------------------------------------------------- editor */
.bedit{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:20px;align-items:start}
.bedit.wide{grid-template-columns:minmax(0,1fr)}
.bedit.wide .bprev{grid-row:1;position:static;max-height:none}
.bform{gap:14px}
.bform .frow{align-items:flex-start}
.frow .fld.bcol{flex:1 1 210px;max-width:none}
.bsec{display:flex;flex-direction:column;gap:14px;scroll-margin-top:70px}
.bsec h3{margin:0}
.bsec h4,.bch{font-size:var(--f12);font-weight:600;margin:4px 0 0}
.bedit.bro .bsec{opacity:.86}
.blogos{display:flex;flex-direction:column;gap:8px}
.blslot{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-sunken)}
.blpic{width:96px;height:56px;border-radius:8px;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;background:var(--brand-neutral-0);padding:6px}
.blpic.dark{background:var(--brand-neutral-900)}
.blpic.dark .muted{color:var(--brand-neutral-300)}
.blpic img{max-width:100%;max-height:100%;display:block}
.blinfo b{display:block;font-size:var(--f12);font-weight:600}
.blinfo small{display:block;font-size:var(--f11);color:var(--text-3);line-height:1.4;margin-top:1px}
.blwarn{list-style:none;margin:4px 0 0;padding:0}
.blwarn li{display:flex;gap:6px;align-items:flex-start;font-size:var(--f11);color:var(--warning-fg);line-height:1.4;margin-top:3px}
.blwarn svg{flex:none;margin-top:1px}
.blacts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.bup{position:relative;cursor:pointer}
.bup input{position:absolute;opacity:0;width:1px;height:1px}
.bup:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.segs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.segs.bfonts{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.bfonts .segopt b{font-size:16px;font-weight:400}
.segopt.locked>span{background:var(--surface-sunken);border-style:dashed;cursor:not-allowed}
.segopt.locked b,.segopt.locked small{color:var(--text-3)}
.segopt .lock{margin-top:6px;align-self:flex-start;white-space:normal;max-width:100%}
.segopt input:disabled+span{cursor:not-allowed}
.bmodes{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px}
.bmode{border:0;margin:0;padding:10px 12px;border-top:1px solid var(--border);min-width:0}
.bmode:first-child{border-top:0}
.bmode legend{float:left;width:100%;padding:0;margin-bottom:8px}
.bmode legend b{font-size:var(--f12);font-weight:600;margin-right:8px}
.bmode legend small{font-size:var(--f11);color:var(--text-3)}
.bmcs{clear:both;display:flex;flex-wrap:wrap;gap:6px}
.bmc{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:5px 10px 5px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface-app);font-size:var(--f11);font-weight:500}
.bmc input{position:absolute;opacity:0;width:1px;height:1px}
.bmc .box{width:15px;height:15px;border-radius:4px}
.bmc:has(input:disabled){cursor:not-allowed;opacity:.5}
.bsave{position:sticky;bottom:0;z-index:12;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:12px 14px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow)}
.bsave [data-bstate]{margin-right:auto}
.bsave .ferr{flex:1 1 100%;margin:0}
.bsave .btn{height:38px;padding:0 16px}

/* contrast panel */
.bcp{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-sunken)}
.bcline{display:flex;gap:8px;align-items:flex-start;font-size:var(--f12);line-height:1.45;color:var(--text-1)}
.bcline svg{flex:none;margin-top:1px}
.bcline.good svg{color:var(--success)}
.bcline.bad{color:var(--danger)}
.bcline.warn svg{color:var(--warning-fg)}
.bcp .good{color:var(--success)}
.bcp .bad{color:var(--danger)}
.bswlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bswlist li{display:grid;grid-template-columns:minmax(0,1fr) auto 16px auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-panel)}
.bswl{font-size:var(--f12);font-weight:600}
.bswp{display:flex;gap:8px;align-items:center}
.bswp code{display:block;font-family:var(--font-mono);font-size:var(--f11)}
.bswp small{display:block;font-size:var(--f11);font-variant-numeric:tabular-nums}
.bswa{color:var(--text-3);display:grid;place-items:center}
.bsw{display:inline-grid;place-items:center;width:42px;height:28px;border-radius:6px;border:1px solid var(--border-strong);font-weight:700;font-size:13px;flex:none}
.bsw.sm{width:36px;height:22px;font-size:11px}
.bsw i{width:12px;height:12px;border-radius:50%}
.badj{margin:0 0 0 18px;font-size:var(--f12);color:var(--text-2);line-height:1.5;display:flex;flex-direction:column;gap:3px}
details.bcall summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:center;font-size:var(--f12);font-weight:600;width:max-content;border-radius:6px}
details.bcall summary::-webkit-details-marker{display:none}
details.bcall summary svg{transition:transform .15s;color:var(--text-3)}
details.bcall[open] summary svg{transform:rotate(90deg)}
.bctabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:10px}
.bctab{width:100%;border-collapse:collapse;font-size:var(--f11)}
.bctab caption{text-align:left;font-weight:600;font-size:var(--f12);padding-bottom:6px}
.bctab th{text-align:left;font-weight:600;color:var(--text-3);padding:4px 6px}
.bctab td{padding:4px 6px;border-top:1px solid var(--border);vertical-align:middle}

/* preview */
.bprev{position:sticky;top:64px;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--surface-panel);border:1px solid var(--border);border-radius:14px;max-height:calc(100vh - 80px);overflow:auto}
.bptools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bpseg{display:inline-flex;border:1px solid var(--border-strong);border-radius:9px;overflow:hidden}
.bpseg button{all:unset;cursor:pointer;padding:0 12px;height:32px;display:inline-flex;align-items:center;font-size:var(--f12);font-weight:500;color:var(--text-2)}
.bpseg button+button{border-left:1px solid var(--border-strong)}
.bpseg button.on{background:color-mix(in srgb,var(--primary) 12%,var(--surface-panel));color:var(--text-1);font-weight:600}
.bpseg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.bpsel select{width:auto;min-height:32px;padding-top:4px;padding-bottom:4px;font-size:var(--f12)}
.bptools [data-bwide]{margin-left:auto}
.bpframes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.bpframes figure{margin:0;min-width:0}
.bpframes figcaption{font-size:var(--f11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.bpfr{position:relative;overflow:hidden;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-canvas);height:420px}
.bpfr iframe{position:absolute;left:0;top:0;border:0;width:1120px;height:900px;transform-origin:0 0;display:block;background:var(--surface-canvas)}
.bpnote{margin:0}
.bafter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:18px;align-items:start}
.bafter #sec-history{grid-column:1/-1}
.bhost .facts{margin-bottom:12px}
.bsteps{margin:0 0 0 18px;display:flex;flex-direction:column;gap:12px;font-size:var(--f12);line-height:1.5;color:var(--text-2)}
.bsteps b{color:var(--text-1)}
.bsteps code{font-family:var(--font-mono);font-size:var(--f11);overflow-wrap:anywhere;color:var(--text-1)}
.btxt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin-top:8px;padding:10px 12px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:9px}
.btxt span{font-size:var(--f11);color:var(--text-3)}
.bsites{list-style:none;margin:10px 0 0;padding:0;max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.bsites li{padding:7px 12px;border-top:1px solid var(--border)}
.bsites li:first-child{border-top:0}
.bsites .cbx input:disabled+.box{background:var(--primary);border-color:var(--primary);color:var(--on-primary);opacity:.55}
.bhist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bhist li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:7px 0;border-top:1px solid var(--border);font-size:var(--f12);align-items:baseline}
.bhist li:first-child{border-top:0}
.bhist small{font-size:var(--f11);color:var(--text-3)}
.bhist .num{color:var(--text-3)}

/* ---------------------------------------------------------------- plan */
.bpcur{margin-bottom:18px}
.bmeters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.bmeter{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-sunken);min-width:0}
.bmeter span{font-size:var(--f11);color:var(--text-3)}
.bmeter b{font-size:20px;font-weight:500}
.bmeter .pbar{display:block;margin-top:4px}
.bmeter small{font-size:var(--f11);color:var(--text-3)}
.bmeter.over b,.bmeter.over small{color:var(--warning-fg)}
.bmeter.over .pbar i{background:var(--warning)}
.bpcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bpcol{display:flex;flex-direction:column;gap:14px}
.bpcol.cur{border-color:var(--primary-ui);box-shadow:inset 0 0 0 1px var(--primary-ui)}
.bphead h2{font-size:var(--f18);font-weight:600;margin-top:4px}
.bphead p{font-size:var(--f12);color:var(--text-2);line-height:1.5;margin-top:6px;min-height:4.5em}
.bprows{display:flex;flex-direction:column}
.bprow{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--border)}
.bprow span{font-size:var(--f11);color:var(--text-3)}
.bprow b{font-size:var(--f12);font-weight:600}
.bpact{margin-top:auto;display:flex}
.bpact .btn{flex:1}
.bpact .tagb{padding:6px 12px;font-size:var(--f12)}
.bpask{margin-top:18px;border-color:color-mix(in srgb,var(--warning) 45%,var(--border))}
.bpprobs{margin:0 0 10px 18px;font-size:var(--f12);line-height:1.5;display:flex;flex-direction:column;gap:4px}
.bpname{margin-top:18px}

/* ---------------------------------------------------------------- users: brand scope */
.bscope{position:relative;display:inline-block;max-width:100%}
.bscope [data-bscope-open]{max-width:190px;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:26px}
.bscopep{position:fixed;z-index:60;width:290px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface-raised);border-color:var(--border-strong);box-shadow:var(--shadow);text-align:left;white-space:normal}
.bscopep small{line-height:1.4}

/* ---------------------------------------------------------------- narrower */
@media (max-width:1180px){
  .bedit{grid-template-columns:minmax(0,1fr)}
  .bprev{position:static;max-height:none}
  .bpcols{grid-template-columns:minmax(0,1fr)}
  .bmeters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bafter{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .bcards{grid-template-columns:minmax(0,1fr)}
  .bcard{grid-template-columns:48px minmax(0,1fr);padding:14px}
  .bclogo{width:48px;height:48px}
  .segs.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bpframes{grid-template-columns:minmax(0,1fr)}
  .bctabs{grid-template-columns:minmax(0,1fr)}
  .blslot{grid-template-columns:72px minmax(0,1fr)}
  .blpic{width:72px}
  .blacts{grid-column:1/-1;flex-direction:row}
  .bswlist li{grid-template-columns:auto 16px auto;row-gap:6px}
  .bswl{grid-column:1/-1}
  .bptools [data-bwide]{display:none}
  .btxt{grid-template-columns:minmax(0,1fr) auto}
  .btxt span{grid-column:1/-1}
  .bbulk{left:16px;right:16px;bottom:72px}
  .bsave{bottom:68px;padding:10px 12px}
  .bsave [data-bstate]{flex:1 1 100%}
}

.bsel-on .slist{padding-bottom:70px}
@media (max-width:1180px){.bphead p{min-height:0}}
@media (max-width:760px){.tablecard{overflow-x:auto}.utab .bscc{min-width:170px}}
.fld>span.bfoot{font-weight:400}
.bcob .blslot{grid-template-columns:72px minmax(0,1fr)}
.bcob .blpic{width:72px}
.bcob .blacts{grid-column:1/-1;flex-direction:row}