/* The banner library sheet (banner-library.js). Above the profile editor and the settings screens. */

.bl-sheet { max-width: 800px; height: min(720px, calc(100vh - 32px)); height: min(720px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.bl-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 10px 24px !important; }
.bl-head h2 { margin: 0 !important; }
.bl-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 24px; }
.bl-sec h3 { margin: 14px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bl-sec h3 small { margin-left: 6px; font-weight: 600; letter-spacing: 0; color: var(--faint); }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 12px; }

.bl-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; border-radius: var(--r-md); padding: 5px 5px 7px; border: 1px solid transparent; }
.bl-tile:hover { background: var(--raised); }
.bl-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.bl-tile:focus-visible { outline: 2px solid var(--accent-2, var(--accent)); outline-offset: 1px; }

/* Each tile shows its still picture. The moving banner is layered on top only while the tile is hovered, focused or chosen,
   with the still picture left underneath so nothing flashes while the file loads. */
.bl-pic { display: block; aspect-ratio: 900 / 273; border-radius: 8px; background: #0a0f1e var(--still) center / cover no-repeat; }
.bl-tile.on .bl-pic, .bl-tile:focus-visible .bl-pic { background-image: var(--live), var(--still); }
@media (hover: hover) { .bl-tile:hover .bl-pic { background-image: var(--live), var(--still); } }

.bl-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 3px; font-size: 13px; font-weight: 600; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-name i { display: grid; place-items: center; flex: none; color: var(--accent-2, var(--accent)); }

/* phones: full height, two columns */
@media (max-width: 760px) {
  .scrim.bl-scrim { padding: 0; }
  .bl-sheet { max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .bl-head { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)) !important; }
  .bl-body { padding: 0 max(14px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
}

/* ---------- controls on a banner preview (banner-actions.js) ---------- */
.bn-edit { position: relative; width: 100%; border-radius: 10px; }
.pe-imgcol .bn-edit { max-width: 250px; }
.banner-field .bn-edit { max-width: 315px; border-radius: 8px; }
/* Hidden until the banner is hovered, a control has keyboard focus, or a tap opened it. The buttons stay in the tab order while hidden. */
.bn-split {
  position: absolute; inset: 0; display: flex; border-radius: inherit; overflow: hidden;
  background: rgba(6, 10, 22, .55); backdrop-filter: brightness(.45) blur(1.5px); opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.bn-half {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px;
  color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2; transition: background .15s ease;
}
.bn-half + .bn-half { border-left: 1px solid rgba(255, 255, 255, .3); }
.bn-half:hover { background: rgba(255, 255, 255, .12); }
.bn-half:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.bn-x {
  position: absolute; top: 6px; right: 6px; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: rgba(6, 10, 22, .82); border: 1px solid rgba(255, 255, 255, .35);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, background .15s ease;
}
.bn-x[hidden] { display: none; }
.bn-x:hover { background: var(--danger); border-color: transparent; }
.bn-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.bn-edit.open .bn-split, .bn-edit:has(:focus-visible) .bn-split,
.bn-edit.open .bn-x, .bn-edit:has(:focus-visible) .bn-x { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .bn-edit:hover .bn-split, .bn-edit:hover .bn-x { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-split, .bn-x, .bn-half { transition: none; }
}