/* ===========================================================================
   BACKGROUND REMOVER — the tool's own interface.

   Same rules as lmbake-styling.css and bitmap-font-styling.css next door:
   every colour is a site token or derived from one, so the panel follows the
   reader's theme instead of carrying a palette of its own. --br-* below are
   only for values that stay fixed regardless of theme.

   The one deliberate exception is the transparency checkerboard, on the
   preview stage and the backdrop swatch. It is a fixed mid-grey pair in both
   themes on purpose — it is a stand-in for "no pixels here" and needs to read
   as that against any photo, so it does not follow the theme any more than an
   image editor's own transparency grid would.
   =========================================================================== */

.br-app {
    --br-surface: var(--color-primary-a10);
    --br-surface-raised: var(--color-primary-a20);
    --br-border: var(--color-card-border);
    --br-border-strong: var(--color-primary-a20);

    --br-checker-a: #4a4a4a;
    --br-checker-b: #5c5c5c;

    --br-mono: "JetBrains Mono", "Fira Mono", "Consolas", ui-monospace, monospace;
    --br-sans: "Circular Spotify", "Inter", sans-serif;

    /* A base font for the whole tool: the site sets fonts per element rather
       than on body, so anything in here that does not name one would otherwise
       come out in the browser's default serif. */
    font-family: var(--br-sans);
    color: var(--color-text-1);

    display: flex;
    flex-direction: column;
    background: var(--br-surface);
    border: 1px solid var(--br-border);
    border-radius: 16px;
    overflow: hidden;
}

.br-app :is(button, input, select, a):focus-visible {
    outline: 2px solid var(--color-selected-3);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Toolbar
   --------------------------------------------------------------------------- */

.br-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--br-surface-raised);
    border-bottom: 1px solid var(--br-border);
}

.br-toolbar-spacer {
    margin-left: auto;
}

.br-file-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
    max-width: 220px;
    font-family: var(--br-mono);
    font-size: 12px;
    color: var(--color-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.br-sep {
    width: 1px;
    align-self: stretch;
    min-height: 22px;
    background: var(--br-border-strong);
    margin: 0 2px;
}

@media (max-width: 700px) {
    .br-file-name {
        max-width: 100%;
        width: 100%;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Buttons — identical contract to .lm-btn / .bf-btn next door, kept as its
   own copy rather than a shared class so this file does not need either of
   those pages loaded.
   --------------------------------------------------------------------------- */

.br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--br-border-strong);
    background: transparent;
    color: var(--color-text-2);
    font-family: var(--br-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-hover) var(--ease-soft),
        border-color var(--dur-hover) var(--ease-soft),
        color var(--dur-hover) var(--ease-soft),
        transform var(--dur-hover) var(--ease-pop);
}

@media (hover: hover) {
    .br-btn:hover:not(:disabled) {
        background: var(--color-primary-a20);
        border-color: var(--color-primary-a30);
        color: var(--color-text-1);
    }
}

.br-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: var(--dur-press);
}

.br-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.br-btn--primary {
    background: var(--color-selected-2);
    border-color: var(--color-selected-2);
    color: #ffffff;
    padding: 8px 18px;
    font-size: 13px;
}

@media (hover: hover) {
    .br-btn--primary:hover:not(:disabled) {
        background: var(--color-selected-3);
        border-color: var(--color-selected-3);
        color: #06121e;
    }
}

.br-btn--accent {
    color: var(--color-accent-text);
    border-color: var(--color-selected-1);
}

@media (hover: hover) {
    .br-btn--accent:hover:not(:disabled) {
        background: rgba(91, 148, 198, 0.14);
        border-color: var(--color-selected-2);
        color: var(--color-accent-text);
    }
}

.br-btn--wide {
    width: 100%;
}

/* aria-pressed carries the state for the compare button, so the styling
   keys off it rather than a class — there is then no way for the two to
   disagree. */
.br-btn[aria-pressed="true"] {
    background: var(--color-selected-2);
    border-color: var(--color-selected-2);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Quality choice pills — same radio-pill idiom as .bf-choice.
   --------------------------------------------------------------------------- */

.br-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.br-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--br-border-strong);
    font-family: var(--br-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
    cursor: pointer;
    transition:
        border-color var(--dur-hover) var(--ease-soft),
        background-color var(--dur-hover) var(--ease-soft),
        color var(--dur-hover) var(--ease-soft);
}

.br-choice input {
    accent-color: var(--color-selected-2);
    margin: 0;
}

.br-choice-hint {
    color: var(--color-primary-a30);
    font-weight: 400;
    font-size: 11px;
}

.br-choice:has(input:checked) {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.16);
    color: var(--color-text-1);
}

/* :has() is recent enough to be worth a fallback. The script mirrors the
   checked state onto the label as .is-checked, which every browser can
   style — see setupUTFilters's sibling in background-remover.js. */
.br-choice.is-checked {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.16);
    color: var(--color-text-1);
}

.br-app.is-busy .br-choice {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Drop zone
   --------------------------------------------------------------------------- */

.br-drop {
    margin: 12px;
    padding: 28px 20px;
    border: 2px dashed var(--br-border-strong);
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-2);
    font-size: 13px;
    line-height: 1.6;
    transition:
        border-color var(--dur-hover) var(--ease-soft),
        background-color var(--dur-hover) var(--ease-soft);
}

.br-app.is-dragging .br-drop {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.1);
}

.br-drop strong {
    display: block;
    color: var(--color-text-1);
    font-size: 15px;
    margin-bottom: 6px;
}

.br-drop-hint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-primary-a30);
}

/* ---------------------------------------------------------------------------
   Layout — preview on the left, backdrop and download on the right. One
   column below 900px, where the preview would otherwise be squeezed thin.
   --------------------------------------------------------------------------- */

.br-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .br-body {
        grid-template-columns: 1fr;
    }
}

.br-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.br-panel {
    background: var(--color-primary-a0);
    border: 1px solid var(--br-border);
    border-radius: 12px;
    padding: 14px;
}

.br-panel-title {
    display: block;
    margin: 0 0 12px;
    font-family: var(--br-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
}

.br-panel-hint {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-primary-a30);
}

/* ---------------------------------------------------------------------------
   Preview stage

   Canvas (the result) and the original <img> sit stacked in the same box,
   sized off the image's own aspect ratio via --br-stage-ratio (set in JS once
   a photo is decoded) rather than a fixed height, so a tall portrait photo
   and a wide landscape one both get a box that actually fits them. Both
   layers use object-fit: contain so neither one ever crops.
   --------------------------------------------------------------------------- */

.br-stage {
    --br-stage-ratio: 4 / 3;
    position: relative;
    width: 100%;
    aspect-ratio: var(--br-stage-ratio);
    max-height: 70vh;
    border-radius: 8px;
    overflow: hidden;
    background-image:
        linear-gradient(45deg, var(--br-checker-a) 25%, transparent 25%),
        linear-gradient(-45deg, var(--br-checker-a) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--br-checker-a) 75%),
        linear-gradient(-45deg, transparent 75%, var(--br-checker-a) 75%);
    background-color: var(--br-checker-b);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.br-canvas,
.br-original-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.br-canvas {
    /* The canvas backing store is the photo's real pixel size, which is
       almost always larger than the box it is laid out into — this is what
       keeps the CSS size (the layout above) and the bitmap size (the actual
       resolution, set in JS) independent of one another. */
    height: 100%;
}

/* The original photo sits on TOP of the canvas (later in DOM order, same
   stacking context, no z-index needed) and is visible by default — before a
   result exists that is the only thing there is to show. Once a result
   lands, .has-result drops it out of the way so the canvas underneath takes
   over as the default view, and #br-compare's hold interaction brings it
   back only while held. */
.br-original-img {
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur-hover) var(--ease-soft);
}

.br-app.has-result .br-original-img {
    opacity: 0;
}

.br-app.has-result.is-comparing .br-original-img {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Busy overlay — shown while the model downloads and while it runs. A
   download has real progress (see .br-progress); inference does not, since
   there is nothing meaningful to measure it against, so the bar only ever
   appears for the former.
   --------------------------------------------------------------------------- */

.br-stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.br-app.is-busy .br-stage-overlay {
    display: flex;
}

.br-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    animation: br-spin 0.8s linear infinite;
}

@keyframes br-spin {
    to { transform: rotate(360deg); }
}

.br-stage-overlay-text {
    font-family: var(--br-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: #ffffff;
    max-width: 44ch;
}

.br-progress {
    display: none;
    width: min(260px, 100%);
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.br-progress.is-active {
    display: block;
}

.br-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--color-selected-3);
    border-radius: inherit;
    transition: width 0.15s linear;
}

/* ---------------------------------------------------------------------------
   Actions under the stage
   --------------------------------------------------------------------------- */

.br-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Nothing to compare against until a result actually exists. */
.br-app:not(.has-result) #br-compare {
    display: none;
}

/* ---------------------------------------------------------------------------
   Backdrop swatches
   --------------------------------------------------------------------------- */

.br-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.br-swatch-btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 2px solid var(--br-border-strong);
    background: var(--color-primary-a0);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur-hover) var(--ease-soft), transform var(--dur-hover) var(--ease-pop);
}

@media (hover: hover) {
    .br-swatch-btn:hover {
        border-color: var(--color-primary-a30);
    }
}

.br-swatch-btn:active {
    transform: scale(0.94);
    transition-duration: var(--dur-press);
}

.br-swatch-btn.is-active,
.br-swatch-btn[aria-pressed="true"] {
    border-color: var(--color-selected-3);
}

.br-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.br-swatch--checker {
    background-image:
        linear-gradient(45deg, var(--br-checker-a) 25%, transparent 25%),
        linear-gradient(-45deg, var(--br-checker-a) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--br-checker-a) 75%),
        linear-gradient(-45deg, transparent 75%, var(--br-checker-a) 75%);
    background-color: var(--br-checker-b);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.br-swatch-btn--custom {
    display: inline-block;
}

.br-swatch-btn--custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.br-app.is-busy .br-swatches {
    opacity: 0.5;
    pointer-events: none;
}

/* Nothing to recolour until there is a result. */
.br-app:not(.has-result) .br-swatches {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Advanced matte cleanup, a collapsed-by-default disclosure with the same contract
   as video-compressor's .vc-advanced next door. Nothing in here reprocesses
   the photo through the model: every control here adjusts the cached mask
   before compositing, same as the backdrop swatches above, so it stays just
   as "instant" (see computeAdjustedMask() in background-remover.js).
   --------------------------------------------------------------------------- */

.br-advanced {
    background: var(--color-primary-a0);
    border: 1px solid var(--br-border);
    border-radius: 12px;
    overflow: hidden;
}

.br-advanced summary {
    padding: 12px 14px;
    font-family: var(--br-sans);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text-1);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color var(--dur-hover) var(--ease-soft);
}

.br-advanced summary::-webkit-details-marker {
    display: none;
}

.br-advanced summary::before {
    content: "▸";
    display: inline-block;
    font-size: 10px;
    color: var(--color-primary-a30);
    transition: transform var(--dur-hover) var(--ease-soft);
}

.br-advanced[open] summary::before {
    transform: rotate(90deg);
}

@media (hover: hover) {
    .br-advanced summary:hover {
        background: var(--br-surface-raised);
    }
}

.br-adv-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 14px 16px;
}

.br-field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-family: var(--br-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
}

.br-field-value {
    font-family: var(--br-mono);
    color: var(--color-text-1);
    font-weight: 400;
}

.br-range {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--br-border-strong);
    cursor: pointer;
}

.br-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-selected-2);
    border: 2px solid var(--br-surface);
    cursor: pointer;
}

.br-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-selected-2);
    border: 2px solid var(--br-surface);
    cursor: pointer;
}

.br-range:focus-visible {
    outline: 2px solid var(--color-selected-3);
    outline-offset: 2px;
}

/* Bigger grab target on touch. A 16px thumb is sized for a mouse cursor,
   not a fingertip, and a slider is the one control on this page where a
   slightly-off tap can't just be retried like a mis-tapped button can, it
   drags to the wrong value instead. */
@media (pointer: coarse) {
    .br-range {
        height: 8px;
    }

    .br-range::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }

    .br-range::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }
}

.br-hint {
    display: block;
    margin-top: 6px;
    font-family: var(--br-sans);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--color-primary-a30);
}

.br-app.is-busy .br-advanced {
    opacity: 0.5;
    pointer-events: none;
}

/* Nothing to clean up until there is a result. */
.br-app:not(.has-result) .br-advanced {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Status, caution and the status bar — identical contract to .lm-status /
   .lm-caution / .lm-statusbar.
   --------------------------------------------------------------------------- */

.br-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 24px;
    font-size: 11.5px;
    font-weight: 600;
}

.br-status:empty {
    display: none;
}

.br-status[data-tone="ok"] {
    background: rgba(74, 222, 128, 0.14);
    color: #38b869;
}

:root:not([data-theme="light"]) .br-status[data-tone="ok"] {
    color: #4ade80;
}

.br-status[data-tone="error"] {
    background: rgba(231, 140, 140, 0.16);
    color: var(--color-warning-2);
}

:root:not([data-theme="light"]) .br-status[data-tone="error"] {
    color: var(--color-warning-1);
}

.br-status[data-tone="info"] {
    background: rgba(91, 148, 198, 0.16);
    color: var(--color-accent-text);
}

.br-caution {
    margin: 0;
    padding: 9px 11px;
    border-radius: 8px;
    border-left: 3px solid var(--color-warning-2);
    background: rgba(231, 140, 140, 0.1);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text-2);
}

.br-caution strong {
    color: var(--color-text-1);
}

.br-caution[hidden] {
    display: none;
}

.br-statusbar {
    padding: 9px 12px;
    border-top: 1px solid var(--br-border);
    background: var(--br-surface-raised);
    font-size: 12px;
    color: var(--color-text-2);
}

/* ---------------------------------------------------------------------------
   Loaded / busy state gates — same pattern as .lm-app's [data-needs-bake].
   --------------------------------------------------------------------------- */

.br-app:not(.has-image) [data-needs-image] {
    display: none;
}

.br-app.has-image .br-drop {
    display: none;
}

.br-app.is-busy #br-open,
.br-app.is-busy #br-drop-open,
.br-app.is-busy #br-run,
.br-app.is-busy #br-download {
    opacity: 0.5;
    pointer-events: none;
}