/* =========================================================
   BACKGROUND REMOVER (/tools/background-remover)
   Built on the shared tool patterns in styles.css (.pt-tool, .pt-drop,
   .pt-split, .pt-row, .pt-more, .pt-actions). Only what this tool adds
   lives here, under .bgr-. The image is the colour; controls are glass
   through the --lg-* tokens; nothing sits on top of the picture except
   the compare handle and the brush outline, which are the controls.
   ========================================================= */

/* The trust line in the chooser: quiet, one line on wide screens. */
.bgr-private{
  display:inline-flex;align-items:flex-start;gap:7px;margin-top:12px;max-width:44ch;
  font-size:12.5px;line-height:1.45;color:var(--dim);text-align:left;
}
.bgr-private svg{flex:0 0 auto;margin-top:2px;color:var(--dim);}
.bgr-private-title{color:var(--white);font-weight:500;}
.pt-drop.is-loaded .bgr-private{display:none;}
.bgr-tool.is-over{outline:2px solid var(--accent);outline-offset:-2px;}

/* ---------- the picture ---------- */
.bgr-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px;}
.bgr-frame{
  --pos:50%;
  position:relative;display:inline-block;max-width:100%;line-height:0;
  border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  background-color:#e9e9eb;
}
/* Preview backgrounds. Preview only: the PNG never contains them. */
.bgr-frame[data-bg="checker"]{
  background-color:#ececee;
  background-image:
    linear-gradient(45deg,#cfcfd3 25%,transparent 25%,transparent 75%,#cfcfd3 75%),
    linear-gradient(45deg,#cfcfd3 25%,transparent 25%,transparent 75%,#cfcfd3 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
.bgr-frame[data-bg="white"]{background:#fff;}
.bgr-frame[data-bg="black"]{background:#000;}
.bgr-frame[data-bg="custom"]{background:var(--bgr-custom,#3b82f6);}
/* Until the result arrives the picture is the original, on the stage's own dark ground. */
.bgr-frame:not([data-state="done"]){background:var(--black-2);}

.bgr-frame canvas{
  display:block;max-width:100%;max-height:min(70vh,640px);width:auto;height:auto;
  min-width:min(240px,100%);
}
.bgr-after{transition:opacity .45s var(--ease);}
.bgr-frame.is-busy .bgr-after{opacity:.5;}
.bgr-before{
  position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  /* The original sits on the stage's dark ground, so "before" never
     borrows the preview background. */
  background:var(--black-2);
}
.bgr-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28);pointer-events:none;
}
.bgr-handle::after{
  content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.45);
  /* Two chevrons, drawn rather than typed, so they stay centred. */
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308080a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  background-size:20px 20px;background-repeat:no-repeat;background-position:center;
}
/* An invisible range over the picture: drag anywhere, or use the arrow
   keys once it has focus. pan-y keeps vertical scrolling on phones. */
.bgr-compare{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;touch-action:pan-y;
}
.bgr-frame:has(.bgr-compare:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}
.bgr-frame:not([data-view="compare"]) .bgr-before,
.bgr-frame:not([data-view="compare"]) .bgr-handle,
.bgr-frame:not([data-view="compare"]) .bgr-compare,
.bgr-frame:not([data-state="done"]) .bgr-before,
.bgr-frame:not([data-state="done"]) .bgr-handle,
.bgr-frame:not([data-state="done"]) .bgr-compare{display:none;}

/* Painting: the brush outline replaces the pointer, and touch paints
   instead of scrolling. */
.bgr-frame[data-tool="erase"],.bgr-frame[data-tool="restore"]{cursor:none;touch-action:none;}
.bgr-cursor{
  position:absolute;left:0;top:0;width:40px;height:40px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35);
}
.bgr-frame[data-tool="restore"] .bgr-cursor{border-style:dashed;}

/* ---------- under the picture ---------- */
.bgr-busy{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--dim);text-align:center;}
.bgr-busy-text{max-width:46ch;line-height:1.45;}
.bgr-busy-text:empty{display:none;}
.bgr-spinner{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--white);
  animation:bgr-spin .8s linear infinite;
}
.bgr-tool[data-phase="error"] .bgr-spinner{display:none;}
@keyframes bgr-spin{to{transform:rotate(360deg);}}

.bgr-stage-bar{margin-top:0;gap:10px 14px;}
.bgr-swatches{display:inline-flex;align-items:center;gap:8px;}
/* Swatches are colours, not buttons made of glass. */
.bgr-swatch{
  position:relative;display:inline-block;width:30px;height:30px;padding:0;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:50%;cursor:pointer;
}
.bgr-swatch::before{content:'';position:absolute;inset:-7px;}
.bgr-swatch.is-checker{
  background-color:#ececee;
  background-image:linear-gradient(45deg,#c4c4c8 25%,transparent 25%,transparent 75%,#c4c4c8 75%),linear-gradient(45deg,#c4c4c8 25%,transparent 25%,transparent 75%,#c4c4c8 75%);
  background-size:10px 10px;background-position:0 0,5px 5px;
}
.bgr-swatch.is-white{background:#fff;}
.bgr-swatch.is-black{background:#000;}
/* The custom swatch shows the colour it will use, with a "+" so it reads
   as "pick a colour" rather than a fourth fixed choice. */
.bgr-swatch.is-custom{background:var(--bgr-custom,#3b82f6);overflow:hidden;}
.bgr-swatch.is-custom::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/16px no-repeat;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.7));
}
.bgr-swatch.is-custom input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;}
.bgr-swatch[aria-pressed="true"],.bgr-swatch.is-on{box-shadow:0 0 0 2px var(--black-2),0 0 0 4px var(--white);}
.bgr-swatch:focus-visible,.bgr-swatch.is-custom:focus-within{outline:2px solid var(--accent);outline-offset:4px;}
.bgr-hint{max-width:52ch;}

/* ---------- the panel ---------- */
.bgr-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);
}
.bgr-tool-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;
  border:1px solid var(--lg-edge);border-radius:999px;color:var(--white);
  background:var(--lg-fill);box-shadow:var(--lg-shadow);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  font:inherit;font-size:13.5px;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .5s var(--lg-spring);
}
.bgr-tool-btn:hover{background-color:var(--lg-fill-hover);border-color:var(--lg-edge-hover);}
.bgr-tool-btn:active{transform:var(--lg-press);transition-duration:.25s,.25s,.25s,.12s;}
.bgr-tool-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Chosen: white glass, like every other "on" state in the tools. */
.bgr-tool-btn[aria-pressed="true"]{
  background:color-mix(in srgb,var(--white) var(--lg-white-tint),transparent);
  color:var(--lg-on-tint);border-color:rgba(255,255,255,.5);box-shadow:var(--lg-shadow-tint);
}
.bgr-history{display:inline-flex;gap:6px;margin-left:auto;}
.bgr-history .pt-mini:disabled{opacity:.4;cursor:default;}
.bgr-reset-row{justify-content:flex-end;}
.bgr-reset-row .pt-mini:disabled{opacity:.4;cursor:default;}
.bgr-engine{display:flex;align-items:center;padding-top:2px;}
.bgr-actions .pt-action-note:empty{display:none;}
.bgr-more-actions{padding-top:0;}
.bgr-more-actions .btn{flex:0 0 auto;}

@media (max-width:640px){
  .bgr-stage{padding:14px 12px;}
  .bgr-frame canvas{max-height:56vh;}
  .bgr-actions .btn.solid{flex:1 1 100%;justify-content:center;}
  .bgr-more-actions{padding-top:4px;}
  .bgr-history{margin-left:0;}
}
@media (max-width:999px){
  .bgr-frame canvas{max-height:52vh;}
}

@media (prefers-reduced-motion:reduce){
  .bgr-after{transition:none;}
  .bgr-spinner{animation-duration:2.4s;}
  .bgr-tool-btn,.bgr-tool-btn:active{transition:none;transform:none;}
}

/* The model choice is three short words; on a phone the row wraps so the
   segments keep their size. */
.bgr-model-row{flex-wrap:wrap;}
.bgr-model-row .pt-row-control{flex:1 1 auto;}