/* ═══════════════════════════════════════════════════════════════════════════
   BILDDEMOT — formatmallen

   Samma fönster som de andra tre, ur css/systemskal.css. Eget här är den
   tonade förbättringsrutan, rutnätet med kryssrutor och paret original mot
   resultat.

   BILDERNA BYTS ALDRIG MED filter(). Före-bilden är en egen fil, tagen ur
   originalet med Pillow, och det är skälet till att listan över vad som
   gjordes kan vara sann. En CSS-filtrerad bild hade sett likadan ut och
   påstått något annat.
   ═══════════════════════════════════════════════════════════════════════ */

.bdd{position:relative;display:flex;flex-direction:column;margin-top:.85rem;
  min-height:650px;border-radius:16px}
.bdd:empty{border:1px solid var(--line);background:
  radial-gradient(300px 200px at 15% 110%, rgba(79,195,255,.2), transparent 60%),
  radial-gradient(300px 200px at 85% -10%, rgba(127,176,255,.15), transparent 60%),
  #eaeff9}

.bd{position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#e9eef9;
  box-shadow:0 22px 50px -44px rgba(10,24,84,.6)}
.bd-panel{background:#fff;border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.65rem,1.4vw,.85rem)}

.bd-fotorub{font-family:var(--display);font-size:.96rem;font-weight:600;
  color:var(--text);margin:0 0 .45rem}
.bd-antal{margin-left:.45rem;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:600;color:var(--faint)}

/* ── Förbättringsrutan ─────────────────────────────────────────────────────
   Tonad, som produktens AI-rutor: ytan säger att det som står i den är ett
   verktyg som arbetar på bilderna under, inte en av dem. */
.bd-ruta{background:rgba(92,141,255,.07);border:1px solid rgba(92,141,255,.22);
  border-radius:10px;padding:.55rem .65rem;margin-bottom:.55rem}
.bd-rub{font-size:.86rem;font-weight:700;color:var(--g2);margin:0 0 .25rem}
.bd-ing{font-size:.71rem;line-height:1.5;color:var(--muted)}
.bd-kryssa{font-size:.76rem;font-weight:650;color:var(--g2)}
.bd-regel{margin-top:.3rem;font-size:.7rem;line-height:1.5;color:var(--faint)}

/* ── Rutnätet ──────────────────────────────────────────────────────────── */
.bd-rutnat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
/* MINIATYRERNA HAR EN HÖJD, inte ett förhållande. Med 3/2 blev varje ruta
   trehundra pixlar hög i en halv panelbredd, alltså två tredjedelar av hela
   skärmen till två bilder ingen ännu bett om något. object-fit klipper, som
   ett rutnät av miniatyrer i vilket bildbibliotek som helst. */
.bd-kort{position:relative;overflow:hidden;border-radius:10px;background:#dfe6f3;
  height:132px}
@media(min-width:760px){ .bd-kort{height:152px} }
.bd-foto{display:block;width:100%;height:100%;object-fit:cover}
.bd-kryss{position:absolute;top:.4rem;right:.4rem;display:grid;place-items:center;
  width:24px;height:24px;border-radius:7px;cursor:pointer;color:transparent;
  background:rgba(255,255,255,.9);border:1px solid rgba(10,24,84,.2);
  transition:background .2s,color .2s,border-color .2s}
.bd-kryss:hover{border-color:var(--g3)}
.bd-kryss.pa{background:var(--g3);border-color:var(--g3);color:#fff}
.bd-kryss:focus-visible{outline:2px solid var(--g3);outline-offset:2px}
.bd-flagga{position:absolute;left:.4rem;top:.4rem;font-size:.6rem;font-weight:700;
  color:#1f6a41;background:rgba(255,255,255,.92);border-radius:999px;padding:.18rem .5rem}
/* Arbetsläget ligger över bilden och inte i stället för den: man ska se
   VILKEN bild som arbetas på. */
.bd-jobbar{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;gap:.45rem;font-size:.72rem;font-weight:650;color:#fff;
  background:rgba(10,24,84,.55)}
.bd-ring{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:bd-snurr .8s linear infinite}
@keyframes bd-snurr{to{transform:rotate(360deg)}}

.bd-kn{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.55rem}
.bd-kor{position:relative;font-size:.8rem;font-weight:700;color:#fff;
  background:#1c3f9e;border:1px solid #1c3f9e;border-radius:9px;
  padding:.5rem 1.1rem;cursor:pointer;transition:background .2s,transform .15s}
.bd-kor:hover:not([aria-disabled="true"]){background:var(--g2)}
.bd-kor:active:not([aria-disabled="true"]){transform:translateY(1px)}
.bd-kor[aria-disabled="true"]{opacity:.65;cursor:default}
.bd-kor:focus-visible,.bd-anvand:focus-visible,.bd-behall:focus-visible{
  outline:2px solid var(--g3);outline-offset:2px}
.bd-varning{font-size:.74rem;font-weight:650;color:#8a3f30}

/* ── Paret ─────────────────────────────────────────────────────────────── */
.bd-resultat{margin-top:.8rem;padding-top:.75rem;border-top:1px solid var(--line2);
  display:grid;gap:.8rem;animation:bd-in .34s var(--ease-solutra,ease) both}
@keyframes bd-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bd-par{display:grid;gap:.5rem}
.bd-halva{display:grid;gap:.25rem}
.bd-halvt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.bd-halvt--ny{color:#1f6a41}
.bd-halva .bd-foto{border-radius:9px;aspect-ratio:3/2}
.bd-gjort b{display:block;font-size:.76rem;font-weight:700;color:var(--text);
  margin-bottom:.3rem}
.bd-gjort ul{margin:0;padding-left:1.05rem}
.bd-gjort li{font-size:.75rem;line-height:1.55;color:var(--muted)}
/* Raden om vad som INTE gjordes står i mässing, som kvarraden i objektdemot:
   den säger vad verktyget avstår från, och det är en annan sorts upplysning. */
.bd-inget{margin-top:.4rem;font-size:.72rem;color:var(--massing)}
.bd-val{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.bd-anvand{font-size:.78rem;font-weight:700;color:#fff;background:#1c3f9e;
  border:1px solid #1c3f9e;border-radius:9px;padding:.42rem .9rem;cursor:pointer}
.bd-anvand:hover{background:var(--g2)}
.bd-behall{font-size:.78rem;font-weight:600;color:var(--muted);background:none;
  border:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.bd-behall:hover{color:var(--g2)}

.bd-not{flex:none;margin:.6rem 0 0;padding-top:.55rem;border-top:1px dashed var(--line);
  font-size:.74rem;line-height:1.55;color:var(--muted)}
.bd-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.bd-pulsar::before,.bd-pulsar::after{content:"";position:absolute;inset:-3px;
  border-radius:inherit;border:2px solid var(--g3);opacity:0;pointer-events:none;
  animation:bd-puls 1.9s var(--ease-solutra,ease) infinite}
.bd-pulsar::after{animation-delay:1.05s}
@keyframes bd-puls{
  0%{opacity:.85;transform:scale(1)}
  65%{opacity:0;transform:scale(1.11)}
  100%{opacity:0;transform:scale(1.11)}}

/* Uppmätt viloläge i den bredd panelen faktiskt får: 761 px vid 338, 742 px
   vid 1005. Paret original mot resultat kommer först efter ett tryck, och en
   förändring inom en halv sekund efter ett tryck räknas inte som en
   förskjutning, så reserven är vilolägets och inte det högsta lägets. */
@media(min-width:760px){
  .bdd{min-height:535px}
  .bd-par{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.1fr);align-items:start}
}
@media(min-width:1000px){ .bdd{min-height:510px} }

@media(prefers-reduced-motion:reduce){
  .bd-pulsar::before,.bd-pulsar::after{display:none}
  .bd-resultat{animation:none}
  .bd-ring{animation:none;border-top-color:rgba(255,255,255,.35)}
}