/* Remove background. Before and after side by side, because the only way to
   judge a cut-out is against what it was cut from. */

.bg-stage{margin-top:18px;}
.bg-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.bg-file{
  font-family:var(--f-mono);font-size:.82rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}

.bg-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
}
.bg-pane{min-width:0;}
.bg-pane h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin:0 0 8px;font-family:var(--f-mono);font-weight:500;
}
.bg-frame{
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-2);
  display:grid;place-items:center;min-height:180px;
}
.bg-frame img{display:block;max-width:100%;height:auto;}

/* The transparency check. Without it a cut-out on a white page looks like a
   picture with a white background, which is the one thing it must not be
   confused with. */
.checker{
  background-image:
    linear-gradient(45deg,var(--rule) 25%,transparent 25%),
    linear-gradient(-45deg,var(--rule) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--rule) 75%),
    linear-gradient(-45deg,transparent 75%,var(--rule) 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
}

.bg-opts{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;
}
.bg-colour-wrap{display:flex;align-items:center;gap:8px;}
.bg-colour-wrap input[type="color"]{
  width:38px;height:32px;padding:0;border:1px solid var(--rule-2);
  border-radius:6px;background:none;cursor:pointer;
}

@media (max-width:640px){
  .bg-pair{grid-template-columns:1fr;}
}