/* ═══════════════════════════════════════════════════════════════════════════
   BEFORE/AFTER PREVIEW — slice 1 (2026-09-09): pairing, four views, the slider.
   Everything is scoped under [data-tool="before-after"] and prefixed .ba- —
   tool sheets are global in this studio, and an unprefixed .pair or .slider
   would restyle another tool's controls.
   Labels sit ON images, so their chip is a solid dark fill (not a translucent
   one): translucent chips over a bright photo were measured at 2.9:1 elsewhere.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-tool="before-after"] .ba-drop{border:2px dashed var(--line,#d7dbe2);border-radius:14px;padding:38px 20px;text-align:center;
  color:var(--ink-3,#6b7280);background:var(--paper-2,#f6f7f9);cursor:pointer;transition:border-color .15s,background .15s}
[data-tool="before-after"] .ba-drop.is-over,[data-tool="before-after"] .ba-drop:hover{border-color:var(--blue,#0952dd);background:var(--paper,#fff)}
[data-tool="before-after"] .ba-drop b{display:block;color:var(--ink,#111);font-size:1rem;margin-bottom:4px}
[data-tool="before-after"] .ba-drop small{display:block;font-size:.74rem;margin-top:8px}
/* the folder link sits INSIDE the drop button; it inherits the text colour so it is
   readable on either theme, and only the underline says "this is its own control" */
[data-tool="before-after"] .ba-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
[data-tool="before-after"] .ba-link:focus-visible{outline:2px solid var(--blue,#0952dd);outline-offset:2px;border-radius:3px}
[data-tool="before-after"] .ba-pairops{display:inline-flex;gap:4px;margin-left:4px}

/* the board that holds every view */
[data-tool="before-after"] .ba-board{margin-top:14px}
[data-tool="before-after"] .ba-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;font-size:.8rem;color:var(--ink-3,#6b7280)}
[data-tool="before-after"] .ba-toolbar .ba-count{font-weight:600;color:var(--ink,#111)}
[data-tool="before-after"] .ba-nav{display:inline-flex;gap:6px;margin-left:auto}
[data-tool="before-after"] .ba-nav .dl-btn{min-width:38px}
[data-tool="before-after"] .ba-name{font-weight:600;color:var(--ink,#111);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* a pair: two panes, or one pane with a slider */
[data-tool="before-after"] .ba-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
[data-tool="before-after"] .ba-pane{position:relative;background:var(--paper-2,#f6f7f9);border:1px solid var(--line,#e6e8ec);border-radius:12px;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:center}
[data-tool="before-after"] .ba-pane img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
[data-tool="before-after"] .ba-tag{position:absolute;top:10px;left:10px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(17,17,17,.86);padding:4px 9px;border-radius:20px;pointer-events:none;z-index:5}
/* ⚠ NOT var(--blue): the studio's token resolves to a lighter blue than the site's,
   and white on it measured 3.68:1 in the harness. #0b3fa8 is 9.17:1 — computed, not eyeballed. */
[data-tool="before-after"] .ba-tag.is-after{left:auto;right:10px;background:#0b3fa8}
[data-tool="before-after"] .ba-empty{color:var(--ink-3,#6b7280);font-size:.78rem;padding:30px 12px;text-align:center}
[data-tool="before-after"] .ba-pane.is-slot{cursor:pointer;border-style:dashed}
[data-tool="before-after"] .ba-pane.is-slot.is-over{border-color:var(--blue,#0952dd)}

/* one by one */
[data-tool="before-after"] .ba-single{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
[data-tool="before-after"] .ba-ab{display:inline-flex;border:1px solid var(--line,#e6e8ec);border-radius:20px;overflow:hidden}
[data-tool="before-after"] .ba-ab button{border:0;background:var(--paper,#fff);color:var(--ink-2,#444);font:inherit;font-size:.76rem;font-weight:600;padding:6px 14px;cursor:pointer}
[data-tool="before-after"] .ba-ab button[aria-pressed="true"]{background:var(--ink,#111);color:#fff}
[data-tool="before-after"] .ba-peek{font-size:.72rem;color:var(--ink-3,#6b7280)}

/* all, in a scroll */
[data-tool="before-after"] .ba-all{display:grid;gap:22px}
[data-tool="before-after"] .ba-all .ba-row-h{margin:0 0 8px}   /* layout + type come from the shared .ba-row-h rule below */

/* the slider */
[data-tool="before-after"] .ba-slide{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line,#e6e8ec);background:var(--paper-2,#f6f7f9);touch-action:none;user-select:none;display:inline-block;max-width:100%}
[data-tool="before-after"] .ba-slide img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;-webkit-user-drag:none;pointer-events:none}
[data-tool="before-after"] .ba-slide .ba-top{position:absolute;inset:0;overflow:hidden}
[data-tool="before-after"] .ba-slide .ba-top img{position:absolute;top:0;left:0;max-width:none;width:100%;height:100%;object-fit:contain}
[data-tool="before-after"] .ba-handle{position:absolute;top:0;bottom:0;width:0;border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:ew-resize;transform:translateX(-1px)}
[data-tool="before-after"] .ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#111;
  font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
[data-tool="before-after"] .ba-handle:focus-visible{outline:none}
[data-tool="before-after"] .ba-handle:focus-visible::after{box-shadow:0 0 0 3px var(--blue,#0952dd),0 2px 8px rgba(0,0,0,.35)}
[data-tool="before-after"] .ba-slide-pct{font-size:.72rem;color:var(--ink-3,#6b7280);margin-top:6px}

/* the unpaired tray */
[data-tool="before-after"] .ba-tray{margin-top:16px;padding:10px 12px;border:1px solid var(--line,#e6e8ec);border-radius:12px;background:var(--paper,#fff)}
[data-tool="before-after"] .ba-tray-h{font-size:.74rem;font-weight:600;color:var(--ink-2,#444);margin:0 0 8px}
[data-tool="before-after"] .ba-tray-h small{font-weight:400;color:var(--ink-3,#6b7280)}
[data-tool="before-after"] .ba-chips{display:flex;flex-wrap:wrap;gap:8px}
[data-tool="before-after"] .ba-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border:1px solid var(--line,#e6e8ec);border-radius:20px;background:var(--paper-2,#f6f7f9);font-size:.74rem;cursor:grab}
[data-tool="before-after"] .ba-chip img{width:26px;height:26px;object-fit:cover;border-radius:6px}
[data-tool="before-after"] .ba-chip.is-picked{outline:2px solid var(--blue,#0952dd)}
[data-tool="before-after"] .ba-chip button{border:0;background:none;color:var(--ink-3,#6b7280);cursor:pointer;font-size:.8rem;padding:0 2px}

[data-tool="before-after"] .ba-head-acts{display:flex;gap:8px;align-items:center}
@container dlpage (max-width:760px){
  [data-tool="before-after"] .ba-pair{grid-template-columns:minmax(0,1fr)}
}

/* ── SHARE (slice 2) ──────────────────────────────────────────────────────
   The share dialog in the tool, and the share PAGE (p.php) which draws the
   same views into #apvRoot with the same renderer. On the share page there is
   no studio shell, so the few tokens the views rely on get fallbacks here. */
/* ═══ THE SHARE PAGE — its own theme (2026-09-09). p.php also loads the banner
   board's viewer sheet, which paints the body #0e1424 for ad previews; a compare
   page is LIGHT by default (a retouch is judged on a light ground) and dark only
   when the viewer asks, remembered per browser (ba-theme). Every colour is a
   token so each theme resolves as a set; the after-tag blue is a measured fill
   (white on it ≥ 5.4:1 in both). */
body.ba-share-body{--ba-bg:#f3f5f9;--ba-paper:#fff;--ba-paper-2:#eef1f6;--ba-line:#e0e5ee;--ba-ink:#111827;--ba-ink-2:#4b5563;--ba-ink-3:#616b7a;--ba-blue:#0b3fa8;--ba-tag:#111827;--ba-ok:#166534;--ba-ok-bg:#dcfce7;
  --ba-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 28px -14px rgba(16,24,40,.22);
  margin:0;background:var(--ba-bg);color:var(--ba-ink);font:400 14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
html[data-theme="dark"] body.ba-share-body{--ba-bg:#0f1216;--ba-paper:#171b22;--ba-paper-2:#1f242d;--ba-line:#2a303b;--ba-ink:#eef1f6;--ba-ink-2:#b7bfcc;--ba-ink-3:#8f98a8;--ba-blue:#2b64d6;--ba-tag:#0b0d11;--ba-ok:#86efac;--ba-ok-bg:#14532d;
  --ba-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.7)}
html[data-theme="dark"]{color-scheme:dark}
#apvRoot.ba-share-page{max-width:1240px;margin:0 auto;padding:0 20px 56px;color:var(--ba-ink)}
/* the sticky header: title · count · tabs · theme switch */
#apvRoot.ba-share-page .ba-share-top{position:sticky;top:0;z-index:20;margin:0 -20px 22px;padding:16px 20px 12px;background:var(--ba-bg);border-bottom:1px solid var(--ba-line)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){#apvRoot.ba-share-page .ba-share-top{background:color-mix(in srgb,var(--ba-bg) 84%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
#apvRoot.ba-share-page .ba-share-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#apvRoot.ba-share-page .ba-share-h h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ba-ink);text-wrap:balance}
#apvRoot.ba-share-page .ba-share-h small{color:var(--ba-ink-3);font-size:12.5px;font-weight:600;padding:3px 9px;border:1px solid var(--ba-line);border-radius:999px;background:var(--ba-paper)}
#apvRoot.ba-share-page .ba-theme{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ba-line);background:var(--ba-paper);color:var(--ba-ink-2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;cursor:pointer}
#apvRoot.ba-share-page .ba-theme:hover{color:var(--ba-ink)}
#apvRoot.ba-share-page .ba-theme:focus-visible,#apvRoot.ba-share-page .dl-tabs button:focus-visible{outline:2px solid var(--ba-blue);outline-offset:2px}
#apvRoot.ba-share-page .ba-share-tabs{margin-top:12px}
/* the view tabs as a segmented control; the active one is a raised paper chip */
#apvRoot.ba-share-page .dl-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--ba-paper-2);border:1px solid var(--ba-line);border-radius:12px;margin:0}
#apvRoot.ba-share-page .dl-tabs button{border:0;background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--ba-ink-2);padding:7px 13px;border-radius:9px;cursor:pointer}
#apvRoot.ba-share-page .dl-tabs button.is-on{background:var(--ba-paper);color:var(--ba-ink);box-shadow:var(--ba-shadow)}
#apvRoot.ba-share-page .dl-tabs button i{display:none}   /* no icon font on the share page; the words carry it */
#apvRoot.ba-share-page .dl-btn{border:1px solid var(--ba-line);background:var(--ba-paper);color:var(--ba-ink);border-radius:8px;padding:6px 10px;font:inherit;font-size:.78rem;cursor:pointer}
#apvRoot.ba-share-page .ba-share-hint{margin:26px 0 0;text-align:center;font-size:12px;color:var(--ba-ink-3)}
/* the view classes are written for [data-tool="before-after"]; on the share
   page the same rules are needed on #apvRoot — one selector list, no copies */
.ba-share-page .ba-pair,[data-tool="before-after"] .ba-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ba-share-page .ba-pane{position:relative;background:var(--ba-paper);border:1px solid var(--ba-line);border-radius:14px;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:center;box-shadow:var(--ba-shadow)}
.ba-share-page .ba-pane img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;user-select:none}
.ba-share-page .ba-tag{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ba-tag);padding:4px 9px;border-radius:20px;pointer-events:none;z-index:5}
.ba-share-page .ba-tag.is-after{left:auto;right:12px;background:var(--ba-blue)}
.ba-share-page .ba-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;font-size:.8rem;color:var(--ba-ink-3)}
.ba-share-page .ba-count{font-weight:700;color:var(--ba-ink);font-variant-numeric:tabular-nums}
.ba-share-page .ba-name{font-weight:600;color:var(--ba-ink);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-share-page .ba-nav{display:inline-flex;gap:6px;margin-left:auto}
.ba-share-page .ba-single{display:grid;gap:10px}
.ba-share-page .ba-ab{display:inline-flex;border:1px solid var(--ba-line);border-radius:20px;overflow:hidden;background:var(--ba-paper)}
.ba-share-page .ba-ab button{border:0;background:none;color:var(--ba-ink-2);font:inherit;font-size:.76rem;font-weight:600;padding:6px 14px;cursor:pointer}
.ba-share-page .ba-ab button[aria-pressed="true"]{background:var(--ba-ink);color:var(--ba-bg)}
.ba-share-page .ba-peek{font-size:.72rem;color:var(--ba-ink-3)}
/* ALL — the default on the share page: one numbered row per pair; with a side
   filter on, a gallery of that side alone */
.ba-share-page .ba-all{display:grid;gap:30px}
.ba-share-page .ba-all-bar{margin:0 0 16px}
.ba-share-page .ba-all.is-only,[data-tool="before-after"] .ba-all.is-only{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px 16px;align-items:start}
.ba-share-page .ba-pair.is-one,[data-tool="before-after"] .ba-pair.is-one{grid-template-columns:minmax(0,1fr)}
[data-tool="before-after"] .ba-all-bar{margin:0 0 12px}
.ba-share-page .ba-row-h,[data-tool="before-after"] .ba-row-h{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:700;color:var(--ba-ink,var(--ink,#111));margin:0 0 8px}   /* 11p: in the TOOL --ba-ink is undefined — #111 on the dark surface hid every pair name in All (measured rgb(17,17,17) on rgb(24,28,34)); --ink is the tool's own ink */
.ba-share-page .ba-row-n,[data-tool="before-after"] .ba-row-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--ba-paper-2,var(--paper-2,#eef1f6));color:var(--ba-ink-2,var(--ink-2,#4b5563));font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.ba-share-page .ba-slide{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--ba-line);background:var(--ba-paper);box-shadow:var(--ba-shadow);touch-action:none;user-select:none;display:block;width:fit-content;max-width:100%;margin:0 auto}
.ba-share-page .ba-slide-pct{text-align:center}
.ba-share-page .ba-nav .dl-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:999px}
.ba-share-page .ba-slide img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;pointer-events:none}
.ba-share-page .ba-slide .ba-top{position:absolute;inset:0;overflow:hidden}
.ba-share-page .ba-slide .ba-top img{position:absolute;top:0;left:0;max-width:none;width:100%;height:100%;object-fit:contain}
.ba-share-page .ba-handle{position:absolute;top:0;bottom:0;width:0;border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:ew-resize;transform:translateX(-1px)}
.ba-share-page .ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#111;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ba-share-page .ba-slide-pct{font-size:.72rem;color:var(--ba-ink-3);margin-top:8px}
.ba-share-page .ba-empty{color:var(--ba-ink-3);font-size:.78rem;padding:30px 12px;text-align:center}
@media (max-width:760px){ .ba-share-page .ba-pair{grid-template-columns:minmax(0,1fr)} #apvRoot.ba-share-page{padding:0 14px 40px} #apvRoot.ba-share-page .ba-share-top{margin:0 -14px 18px;padding:12px 14px 10px} }
@media (prefers-reduced-motion:no-preference){ #apvRoot.ba-share-page .dl-tabs button{transition:background .15s,color .15s} }

/* the share dialog inside the tool */
[data-tool="before-after"] .ba-share-row{display:flex;gap:8px;align-items:center;margin-top:10px}
[data-tool="before-after"] .ba-share-row input{flex:1 1 auto;min-width:0;font:inherit;font-size:.8rem;padding:7px 9px;border:1px solid var(--line,#e6e8ec);border-radius:8px}
/* the progress card: the studio loader, plus a bar and a result slot */
[data-tool="before-after"] .ba-prog-track{margin:14px 6px 2px;height:6px;border-radius:20px;background:var(--line,#e8ebf3);overflow:hidden}
[data-tool="before-after"] .ba-prog-track span{display:block;height:100%;width:0;border-radius:20px;background:#0b3fa8;transition:width .25s ease}
[data-tool="before-after"] .ba-prog-track[hidden]{display:none}
[data-tool="before-after"] .ba-prog-result{margin-top:6px;font-size:13px;color:var(--ink-2,#3f4756);text-align:left}
[data-tool="before-after"] .ba-prog-result p{margin:0 0 10px}
[data-tool="before-after"] .ba-prog-result .ba-share-row{margin-top:0}
[data-tool="before-after"] .ba-prog-actions{margin-top:12px;display:flex;justify-content:flex-end}
[data-tool="before-after"] .ba-prog.is-error .st-load-title{color:#b42318}
/* the same-name question */
[data-tool="before-after"] .ba-ask-card{text-align:left}
[data-tool="before-after"] .ba-ask-card p{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2,#3f4756)}
[data-tool="before-after"] .ba-ask-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
[data-tool="before-after"] .ba-ctx{margin:12px 0 0}
[data-tool="before-after"] .ba-share-out{margin-top:10px;padding:10px 12px;border:1px solid var(--line,#e6e8ec);border-radius:10px;background:var(--paper-2,#f6f7f9);font-size:.78rem}
[data-tool="before-after"] .ba-share-out[hidden]{display:none}
[data-tool="before-after"] .ba-hist{margin-top:16px}


/* ═══ EDITING A LINK — the tool's bar (2026-09-09, Preview Generator's grammar) ═══ */
[data-tool="before-after"] .ba-linkbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 14px;border:1px solid rgba(11,63,168,.28);border-radius:12px;background:rgba(11,63,168,.06)}
[data-tool="before-after"] .ba-linkbar[hidden]{display:none}
[data-tool="before-after"] .ba-linkbar.is-dirty{border-color:rgba(217,119,6,.5);background:rgba(245,158,11,.09)}
[data-tool="before-after"] .ba-lb-info{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2,#3f4756);min-width:0}
[data-tool="before-after"] .ba-lb-info>i{color:#0b3fa8}
[data-tool="before-after"] .ba-lb-info b{color:var(--ink,#232a36);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
[data-tool="before-after"] .ba-lb-open{color:#0b3fa8;font-weight:700;text-decoration:underline;font-size:12px}
[data-tool="before-after"] .ba-lb-hint{font-size:11.5px;color:var(--ink-3,#6b7280);display:inline-flex;align-items:center;gap:5px}
[data-tool="before-after"] .ba-lb-hint i{color:#15803d}
[data-tool="before-after"] .ba-lb-flag{font-size:12px;font-weight:700;color:#9a3412;display:inline-flex;align-items:center;gap:6px;flex-basis:100%}
[data-tool="before-after"] .ba-lb-act{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* icon beside a two-line label — the button is a ROW; only the label stacks */
[data-tool="before-after"] .ba-lb-btn{display:inline-flex;flex-direction:row;align-items:center;gap:9px;height:auto;padding:8px 14px;text-align:left;white-space:nowrap}
[data-tool="before-after"] .ba-lb-btn>i{flex:0 0 auto;font-size:13px}
[data-tool="before-after"] .ba-lb-l{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
[data-tool="before-after"] .ba-lb-l small{font-weight:500;font-size:10.5px;opacity:.8;margin-top:2px}
[data-tool="before-after"] .ba-lb-x{border:0;background:none;font-size:20px;line-height:1;color:var(--ink-3,#6b7280);cursor:pointer;padding:2px 6px}
[data-tool="before-after"] .ba-lb-x:hover{color:var(--ink,#111)}

/* ═══ APPROVAL CHIPS + VERSIONS + COMMENTS — the share page ═══ */
.ba-share-page .ba-appr{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:var(--ba-ok);background:var(--ba-ok-bg);border-radius:999px;padding:3px 9px;white-space:nowrap}
.ba-share-page .ba-row-h .ba-appr{margin-left:auto}
#apvRoot.ba-share-page .ba-ver{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ba-ink-3)}
#apvRoot.ba-share-page .ba-ver select{font:inherit;font-size:12.5px;font-weight:600;color:var(--ba-ink);background:var(--ba-paper);border:1px solid var(--ba-line);border-radius:999px;padding:5px 10px}
#apvRoot.ba-share-page .ba-fbbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ba-line);background:var(--ba-paper);color:var(--ba-ink-2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;cursor:pointer}
#apvRoot.ba-share-page .ba-fbbtn[aria-expanded="true"],#apvRoot.ba-share-page .ba-fbbtn:hover{color:var(--ba-ink)}
#apvRoot.ba-share-page .ba-fbbtn b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ba-blue);color:#fff;font-size:.68rem;display:inline-flex;align-items:center;justify-content:center}
#apvRoot.ba-share-page .ba-fbbtn b[hidden]{display:none}
#apvRoot.ba-share-page .ba-fb{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);box-sizing:border-box;z-index:30;background:var(--ba-paper);border-left:1px solid var(--ba-line);box-shadow:-12px 0 40px -20px rgba(0,0,0,.35);padding:16px 18px 24px;overflow:auto;color:var(--ba-ink);font-size:13px}
#apvRoot.ba-share-page .ba-fb[hidden]{display:none}
#apvRoot.ba-share-page .ba-fb-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px}
#apvRoot.ba-share-page .ba-fb-on{font-size:12px;color:var(--ba-ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#apvRoot.ba-share-page .ba-fb-on em{font-style:normal;color:var(--ba-ink)}
#apvRoot.ba-share-page .ba-fb-x{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;color:var(--ba-ink-3);cursor:pointer}
#apvRoot.ba-share-page .ba-fb-note,#apvRoot.ba-share-page .ba-fb-err{margin:0 0 12px;padding:9px 11px;border-radius:9px;font-size:12.5px;background:var(--ba-paper-2);color:var(--ba-ink-2)}
#apvRoot.ba-share-page .ba-fb-err{color:#b42318;background:#fee4e2}
html[data-theme="dark"] #apvRoot.ba-share-page .ba-fb-err{color:#fda29b;background:#55160c}
#apvRoot.ba-share-page .ba-fb-id{display:grid;gap:10px;margin:0 0 14px;padding:12px;border:1px solid var(--ba-line);border-radius:12px;background:var(--ba-paper-2)}
#apvRoot.ba-share-page .ba-fb-id label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--ba-ink-2)}
#apvRoot.ba-share-page .ba-fb-id small{font-weight:500;color:var(--ba-ink-3)}
#apvRoot.ba-share-page .ba-fb input,#apvRoot.ba-share-page .ba-fb textarea{font:inherit;font-size:13px;color:var(--ba-ink);background:var(--ba-paper);border:1px solid var(--ba-line);border-radius:9px;padding:8px 10px;width:100%;box-sizing:border-box}
#apvRoot.ba-share-page .ba-fb textarea{resize:vertical;min-height:72px}
#apvRoot.ba-share-page .ba-fb .dl-btn{border:1px solid var(--ba-line);background:var(--ba-paper);color:var(--ba-ink);border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
#apvRoot.ba-share-page .ba-fb .dl-btn-primary{background:var(--ba-blue);border-color:var(--ba-blue);color:#fff}
#apvRoot.ba-share-page .ba-fb .dl-btn[disabled]{opacity:.55;cursor:default}
#apvRoot.ba-share-page .ba-fb-appr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
#apvRoot.ba-share-page .ba-fb-link{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--ba-blue);text-decoration:underline;cursor:pointer}
#apvRoot.ba-share-page .ba-fb-form{display:grid;gap:8px;margin:0 0 14px}
#apvRoot.ba-share-page .ba-fb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ba-ink-3)}
#apvRoot.ba-share-page .ba-fb-filter{display:inline-flex;gap:2px;padding:3px;background:var(--ba-paper-2);border:1px solid var(--ba-line);border-radius:10px;margin:0 0 10px}
#apvRoot.ba-share-page .ba-fb-filter button{border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--ba-ink-2);padding:5px 10px;border-radius:8px;cursor:pointer}
#apvRoot.ba-share-page .ba-fb-filter button[aria-pressed="true"]{background:var(--ba-paper);color:var(--ba-ink);box-shadow:var(--ba-shadow)}
#apvRoot.ba-share-page .ba-fb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#apvRoot.ba-share-page .ba-fb-list li{padding:10px 12px;border:1px solid var(--ba-line);border-radius:12px;background:var(--ba-paper-2)}
#apvRoot.ba-share-page .ba-fb-list li.is-done{opacity:.6}
#apvRoot.ba-share-page .ba-fb-list li p{margin:6px 0 0;white-space:pre-wrap;word-break:break-word}
#apvRoot.ba-share-page .ba-fb-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ba-ink-3)}
#apvRoot.ba-share-page .ba-fb-meta b{color:var(--ba-ink)}
#apvRoot.ba-share-page .ba-fb-meta em{font-style:normal;margin-left:auto;color:var(--ba-ink-2)}
#apvRoot.ba-share-page .ba-fb-empty{color:var(--ba-ink-3);text-align:center;padding:18px 8px;border-style:dashed}
@media (max-width:760px){ #apvRoot.ba-share-page .ba-fb{width:100vw} }


/* ═══ PINNED NOTES + ROOM FOR THE DRAWER (2026-09-09) ═══ */
.ba-imgwrap{position:relative;display:inline-block;max-width:100%;line-height:0;vertical-align:top}
.ba-share-page .ba-pins{position:absolute;inset:0;pointer-events:none;z-index:3}   /* under the corner tags (5), under the composer (6) */
.ba-share-page .ba-slide .ba-pins{z-index:3}
.ba-share-page .ba-handle{z-index:4}
.ba-share-page .ba-pin{pointer-events:auto;position:absolute;transform:translate(-50%,-100%);min-width:24px;height:24px;padding:0 6px;border-radius:12px 12px 12px 2px;border:2px solid #fff;background:var(--ba-tag);color:#fff;font:700 11px/20px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer}
.ba-share-page .ba-pin.is-after{background:var(--ba-blue)}
.ba-share-page .ba-pin.is-hi{outline:3px solid #f59e0b;outline-offset:1px}
.ba-share-page.is-arming .ba-imgwrap img,.ba-share-page.is-arming .ba-slide{cursor:crosshair}
.ba-share-page .ba-pinform{position:absolute;z-index:6;pointer-events:auto;transform:translate(-50%,10px);width:min(260px,80vw);background:var(--ba-paper);border:1px solid var(--ba-line);border-radius:12px;padding:8px;box-shadow:var(--ba-shadow);line-height:1.4;display:grid;gap:6px}
.ba-share-page .ba-pinform::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:var(--ba-paper);border-left:1px solid var(--ba-line);border-top:1px solid var(--ba-line)}
.ba-share-page .ba-pinform textarea{font:inherit;font-size:13px;color:var(--ba-ink);background:var(--ba-paper-2);border:1px solid var(--ba-line);border-radius:9px;padding:7px 9px;width:100%;box-sizing:border-box;resize:vertical}
.ba-share-page .ba-pinform-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ba-share-page .ba-pinform .dl-btn{border:1px solid var(--ba-blue);background:var(--ba-blue);color:#fff;border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ba-share-page .ba-pinform .ba-fb-link{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--ba-ink-2);text-decoration:underline;cursor:pointer}
#apvRoot.ba-share-page .ba-fbbtn[aria-pressed="true"]{background:var(--ba-blue);border-color:var(--ba-blue);color:#fff}
#apvRoot.ba-share-page .ba-fb-tip{margin:0 0 8px;font-size:12px;color:var(--ba-ink-3)}
#apvRoot.ba-share-page .ba-fb-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px 10px 10px 2px;background:var(--ba-tag);color:#fff;font-style:normal;font-size:11px;font-weight:700}
#apvRoot.ba-share-page .ba-fb-n.is-after{background:var(--ba-blue)}
#apvRoot.ba-share-page .ba-fb-list li{cursor:pointer}
#apvRoot.ba-share-page .ba-fb-list li.is-hi{outline:2px solid #f59e0b;outline-offset:1px}
/* the open drawer takes its column from the page — nothing sits under it */
@media (min-width:900px){
  body.ba-fb-open #apvRoot.ba-share-page{max-width:none;padding-right:calc(20px + 380px)}
  body.ba-fb-open #apvRoot.ba-share-page .ba-share-top{margin-right:-20px}
}

/* ── 11m: ZOOM + PAN, synced across the pair. The image keeps its fitted box and is transformed inside it;
   the box clips only while zoomed (at Fit the share page's pins may overhang the top edge). ── */
[data-tool="before-after"] .ba-zoomctl,.ba-share-page .ba-zoomctl{display:inline-flex;align-items:center;border:1px solid var(--line,var(--ba-line,#e6e8ec));border-radius:20px;overflow:hidden;background:var(--paper,var(--ba-paper,#fff))}
[data-tool="before-after"] .ba-zoomctl button,.ba-share-page .ba-zoomctl button{border:0;background:none;color:var(--ink-2,var(--ba-ink-2,#444));font:inherit;font-size:.74rem;font-weight:600;padding:6px 10px;cursor:pointer;line-height:1}
[data-tool="before-after"] .ba-zoomctl button[aria-pressed="true"],.ba-share-page .ba-zoomctl button[aria-pressed="true"]{background:var(--ink,var(--ba-ink,#111));color:var(--bg,var(--ba-bg,#fff))}
[data-tool="before-after"] .ba-zoomctl b,.ba-share-page .ba-zoomctl b{font-size:.72rem;font-weight:700;padding:0 10px;min-width:44px;text-align:center;color:var(--ink,var(--ba-ink,#111));font-variant-numeric:tabular-nums}
[data-tool="before-after"] .ba-zoom-hint,.ba-share-page .ba-zoom-hint{font-size:.72rem;color:var(--ink-3,var(--ba-ink-3,#6b7280))}
.is-zoomed .ba-imgwrap{overflow:hidden}
.is-zoomed .ba-imgwrap img,.is-zoomed .ba-slide{cursor:grab}
.is-zoomed .ba-imgwrap.is-panning,.is-zoomed .ba-imgwrap.is-panning img,.is-zoomed .ba-slide.is-panning{cursor:grabbing}
.is-zoomed .ba-imgwrap img,.is-zoomed .ba-slide img,.is-zoomed .ba-pins{will-change:transform}
/* the pins ride the picture's transform; each marker is counter-scaled so it keeps its size and its tip stays on the point */
.ba-share-page .ba-pin{transform-origin:50% 100%}
.ba-share-page .ba-pins[style*="--ba-zi"] .ba-pin{transform:translate(-50%,-100%) scale(var(--ba-zi,1))}
/* ── 11p: NOTES per pair + the order (the tool edits, the share page reads) ── */
[data-tool="before-after"] .ba-cap-row{margin:-4px 0 10px}
[data-tool="before-after"] .ba-cap{width:100%;max-width:640px;font:inherit;font-size:.8rem;padding:6px 10px;border:1px dashed var(--line,#e6e8ec);border-radius:8px;background:var(--paper,#fff);color:var(--ink,#111)}
[data-tool="before-after"] .ba-cap::placeholder{color:var(--ink-3,#6b7280)}
[data-tool="before-after"] .ba-cap:focus{border-style:solid;outline:2px solid #0b3fa8;outline-offset:1px}
[data-tool="before-after"] .ba-cap-inline{display:block;margin:-2px 0 8px}
[data-tool="before-after"] .ba-row-tools{margin-left:auto;display:inline-flex;gap:4px;align-items:center}
[data-tool="before-after"] .ba-grip{cursor:grab;border:1px solid var(--line,#e6e8ec);background:var(--paper,#fff);border-radius:7px;width:26px;height:26px;font:inherit;font-size:13px;line-height:1;color:var(--ink-3,#6b7280);letter-spacing:-3px;padding:0 0 0 1px}
[data-tool="before-after"] .ba-grip:active{cursor:grabbing}
[data-tool="before-after"] .ba-row-tools .ba-mv{width:26px;height:26px;min-height:0;padding:0;font-size:12px;border-radius:7px}
[data-tool="before-after"] .ba-row.is-dragging{opacity:.5}
[data-tool="before-after"] .ba-row.is-dragover{outline:2px dashed #0b3fa8;outline-offset:4px;border-radius:12px}
.ba-share-page .ba-cap-ro,[data-tool="before-after"] .ba-cap-ro{margin:-4px 0 10px;font-size:.82rem;line-height:1.45;color:var(--ba-ink-2,var(--ink-2,#444))}
/* ── 11s: the share page's Download menu ── */
#apvRoot.ba-share-page .ba-dl{position:relative;display:inline-flex}
#apvRoot.ba-share-page .ba-dl-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:250px;display:grid;gap:2px;padding:6px;background:var(--ba-paper);border:1px solid var(--ba-line);border-radius:12px;box-shadow:var(--ba-shadow);z-index:7}
#apvRoot.ba-share-page .ba-dl-menu[hidden]{display:none}
#apvRoot.ba-share-page .ba-dl-menu button{text-align:left;padding:8px 10px;border:0;background:none;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--ba-ink);cursor:pointer}
#apvRoot.ba-share-page .ba-dl-menu button:hover,#apvRoot.ba-share-page .ba-dl-menu button:focus-visible{background:var(--ba-paper-2);outline:none}
#apvRoot.ba-share-page .ba-fbbtn:disabled{opacity:.7;cursor:progress}