/* Background Remover — page stylesheet (ships as assets/css/bg-remover.css,
   loaded after the shared style.css; nothing here edits the shared stylesheet).
   REDESIGN v3 (user-approved mockup v3): slim title row, then a workbench
   row of three equal panels — 1 · Add a photo / 2 · Original /
   3 · Background removed — with the consent gate and progress inside the
   result panel; controls (model, download, background) in row 2; About,
   Downloaded models, How it works, Guide, FAQ, Related in row 3.
   Slightly smaller font on this page so the mosaic reads dense, not massive.
   No capsule pills: interactive elements keep the site's ~8px radius. */

/* ---- slim page head: title + one-line promise on one row ---- */
.bg-page .page-head{grid-column:1/-1;display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;padding:2px 2px 0}
.bg-page .page-head h1{font-size:1.3rem;margin:0;letter-spacing:-.02em}
.bg-page .page-head .standfirst{font-size:.88rem;line-height:1.45;margin:0}

/* ---- grid + tile spans on this page (three columns) ---- */
.bg-page{grid-template-columns:repeat(3,1fr);gap:12px}
.bg-page .t-drop{grid-column:span 1;grid-row:auto}
.bg-page .t-original{grid-column:span 1}
.bg-page .t-result{grid-column:span 1}
.bg-page .t-picker{grid-column:span 1}
.bg-page .t-actions{grid-column:span 1}
.bg-page .t-bg{grid-column:span 1}
.bg-page .t-about{grid-column:span 2}
.bg-page .t-downloads{grid-column:span 1}
.bg-page .t-how{grid-column:span 2}
.bg-page .t-guide{grid-column:span 1}
.bg-page .t-faq{grid-column:span 3}
.bg-page .t-related{grid-column:span 3}

/* ---- density: slightly smaller type on this page ---- */
.bg-page .tile{padding:13px}
.bg-page .tile h2{font-size:1.06rem}
.bg-page .tile p{font-size:.92rem;line-height:1.5}
.bg-page .tile li{font-size:.92rem;line-height:1.5}
.bg-page .t-label{font-size:.68rem;letter-spacing:.1em;margin-bottom:8px}
.bg-page .note{font-size:.79rem}
.bg-page .fld label{font-size:.82rem}
.bg-page .btn,.bg-page .btn-ghost{font-size:.9rem;padding:10px 16px}
.bg-page .dropzone .big{font-size:.98rem}
.bg-page .dropzone p{font-size:.86rem}

/* ---- workbench panels: flex columns, frames flex so the three
        panels size together in their shared grid row ---- */
.bg-page .panel{display:flex;flex-direction:column}
.bg-page .panel .preview-frame{flex:1}
.bg-page .t-drop .dropzone{flex:1;padding:12px}
.bg-page .dropzone .dz-ic{width:40px;height:40px;margin-bottom:6px}
.bg-page .dropzone .dz-ic svg{width:19px;height:19px}

/* original / result preview frames (panel 2 and panel 3) */
.preview-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;min-height:170px}
.preview-frame img{display:block;max-width:100%;max-height:320px;object-fit:contain}
.preview-frame .note{padding:14px;text-align:center}
/* checkerboard that shows through transparent parts of the result */
.checker{background-color:#fff;background-image:linear-gradient(45deg,#cfd4dc 25%,transparent 25%),linear-gradient(-45deg,#cfd4dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd4dc 75%),linear-gradient(-45deg,transparent 75%,#cfd4dc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
[data-theme="dark"] .checker{background-color:#2a2f38;background-image:linear-gradient(45deg,#454c58 25%,transparent 25%),linear-gradient(-45deg,#454c58 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#454c58 75%),linear-gradient(-45deg,transparent 75%,#454c58 75%)}

/* result summary + status line (inside panel 3, under the frame) */
.bg-page .t-result .summary{font-size:.92rem;font-weight:800;line-height:1.45;margin-top:10px}
.bg-page .t-result .placeholder{color:var(--muted);font-size:.88rem;margin:8px 0 0}
.bg-page .t-result .summary:not([hidden])~.placeholder{display:none}

/* consent gate panel (inside panel 3, above the result frame) */
.gate{border:1px solid var(--accent-border);background:var(--accent);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.gate-title{font-size:.98rem;margin:0 0 4px;letter-spacing:-.01em}
.gate p{margin:.3em 0 .7em}
.gate .bar-track{max-width:none;margin:10px 0 4px}
.gate-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.gate-btns .btn,.gate-btns .btn-ghost{width:auto}

/* ---- model selector: one line per model; the quality note shows
        only on the selected model's row ---- */
.engine-list{display:flex;flex-direction:column;gap:7px}
.engine-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .12s,background .12s}
.engine-row:hover{border-color:var(--accent-border)}
.engine-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.engine-row::before{content:"";flex:none;width:12px;height:12px;border:2px solid var(--muted);border-radius:50%;background:transparent}
.engine-row.active{border-color:var(--brand);background:var(--accent)}
.engine-row.active::before{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 2px var(--surface)}
.engine-main{flex:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.engine-name{font-weight:700;font-size:.9rem;white-space:nowrap}
.engine-note{display:none;color:var(--muted);font-size:.8rem;line-height:1.32}
.engine-row.active .engine-note{display:block;flex-basis:100%}
.engine-size{flex:none;font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap}
.engine-row.active .engine-size{color:var(--ink)}

/* Download tile: buttons side by side instead of the shared full-width stack */
.bg-page .t-actions{display:block}
.bg-page .t-actions .btn,.bg-page .t-actions .btn-ghost{width:auto;margin:0 8px 0 0;text-align:center}

/* ---- "About this model" tile: WIDE tile, smaller type (~12px),
        term-left rows to use the width ---- */
.about-model{padding:0}
.about-list{margin:0;display:flex;flex-direction:column;gap:7px}
.about-list>div{display:grid;grid-template-columns:118px 1fr;gap:2px 12px}
.about-list dt{font-weight:700;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.about-list dd{margin:0;font-size:.78rem;line-height:1.45}
.about-list a{color:var(--brand)}

/* AGPL source offer block (Hair detail model only) */
.source-offer{margin-top:11px;border:1px solid var(--accent-border);border-left:4px solid var(--brand);border-radius:8px;background:var(--accent);padding:10px 12px}
.source-offer h3{font-size:.85rem;margin:0 0 4px}
.source-offer p{margin:.3em 0 .6em;font-size:.78rem;line-height:1.48}
.source-offer ul{margin:.2em 0 .2em 1.1em;padding:0;font-size:.78rem;line-height:1.5}
.source-offer a{color:var(--brand);font-weight:600}

/* downloaded models rows (inside the Downloaded models tile) */
.model-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.model-row .model-name{font-weight:700;font-size:.9rem;min-width:82px}
.model-row .model-status{flex:1;color:var(--muted);font-size:.85rem}
.model-row .mini-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---- responsive: two columns on tablets ---- */
@media(max-width:900px){
  .bg-page{grid-template-columns:repeat(2,1fr)}
  .bg-page .t-drop{grid-column:span 2}
  .bg-page .t-drop .dropzone{flex:none;height:150px}
  .bg-page .t-picker{grid-column:span 2}
  .bg-page .t-about,.bg-page .t-downloads,.bg-page .t-faq,.bg-page .t-related{grid-column:span 2}
}
/* ---- phones: every tile full width; the workbench panels stack
        in order Add → Original → Result (DOM order) ---- */
@media(max-width:640px){
  .bg-page>.tile{grid-column:1/-1}
  .bg-page .t-about .about-list>div{grid-template-columns:1fr}
}

/* ---- sleek pass: chip hover + custom RGB picker + download options ---- */
.bg-page .tchip{transition:border-color .12s,background .12s,color .12s}
.bg-page .tchip:hover{background:var(--accent)}
.bg-custom{margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg-soft)}
.bg-custom.active{border-color:var(--brand)}
.bg-custom-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bg-custom-head label{font-size:.85rem;font-weight:700}
.bg-custom input[type="color"]{width:46px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.bg-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.bg-custom input[type="color"]::-webkit-color-swatch{border:0;border-radius:6px}
.bg-custom input[type="color"]::-moz-color-swatch{border:0;border-radius:6px}
.rgb-row{display:flex;align-items:center;gap:9px;margin-top:6px}
.rgb-name{flex:none;width:12px;font-size:.8rem;font-weight:700;color:var(--muted)}
.rgb-row input[type="range"]{flex:1;accent-color:var(--brand);height:20px;cursor:pointer}
.rgb-row output{flex:none;width:30px;text-align:right;font-size:.83rem;font-weight:700;font-variant-numeric:tabular-nums}
.dl-summary{font-size:.84rem;font-weight:700;color:var(--ink);margin:0 0 10px}
#qualityRow input[type="range"]{cursor:pointer}