.glass-win .glass-row>button,.glass-win .glass-upload{border-radius:var(--r-6)}
.glass-recents{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 16px 20px}
.background-scrim{pointer-events:none}.background-scrim .glass-win{pointer-events:auto}.glass-recents.glass-drop{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-6)}
/* Block, not inline: an inline video or picture sits on a text baseline, and the gap under it made the page a few pixels
   taller than the window, so a scrollbar came and went and the shell shifted whenever a video was on the wall. */
.house-wall :is(img,video){display:block}
.house-wall video{width:100%;height:100%;object-fit:cover;filter:brightness(var(--wall-light,1));pointer-events:none}.background-play-mark{position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 1px 4px black}

/* Two rows: the house's backgrounds, then the person's own. Each row has its own Add. The chosen one wears the accent ring. */
.glass-rows-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 16px 6px}
.glass-rows-label{font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glass-add{padding:4px 10px;font-size:var(--t-label)}
.glass-add.busy{opacity:.6;cursor:default}
.glass-row-error{color:var(--danger,#c0392b)}
.glass-factory{margin-bottom:14px}
.glass-transfer{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:12px;border:1px solid var(--edge);border-radius:var(--r-8);background:var(--inset);color:var(--text);font-size:var(--t-small);line-height:1.5}
.glass-transfer-spinner{flex:none;width:20px;height:20px;border:3px solid var(--edge);border-top-color:var(--accent);border-radius:50%;animation:background-loading .8s linear infinite}
@keyframes background-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.glass-transfer-spinner{animation:none;border-style:dotted}}

/* Mark, September 25: wide enough that nothing scrolls on a 1366 by 768 laptop.
   Pictures on the left, this page's settings on the right. Under 760px wide the
   columns stack and the window scrolls, which is fine on a phone. */
.background-scrim{padding:16px}
.glass-win.background-win{width:min(900px, calc(100vw - 32px)); max-height:calc(100vh - 32px); gap:0; padding-bottom:0}
.background-cols{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); min-height:0}
.background-col{display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px 0 14px}
.background-col+.background-col{border-left:var(--bd) solid var(--edge)}
.background-col .glass-recents{margin-bottom:8px}
.background-col .glass-range{max-width:none}
@media(max-width:760px){
  .background-cols{grid-template-columns:minmax(0,1fr)}
  .background-col+.background-col{border-left:0; border-top:var(--bd) solid var(--edge)}
}