/* The YouTube banner checker (/youtube-banner-size), on the previewers' tool.css and the safe zone checker's editor
   (safezone.css: the drop tile, the checks): the well holds the banner as a TV, a computer or a phone shows it, or the
   template over it (banner.js). */
.yb .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.yb .editor.drop { background: var(--muted); box-shadow: 0 0 0 12px var(--muted); }
.yb .switches { flex-wrap: wrap; }
.yb .stage { flex-direction: column; padding: 40px 24px; }
.yb .actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; }
.yb .actions [hidden] { display: none; }

.yb-screen { width: 100%; max-width: 720px; }
.yb-win { position: relative; width: 100%; overflow: hidden; border-radius: 6px; background: #0f0f0f; }
.yb-img { position: absolute; max-width: none; object-fit: cover; user-select: none; }
.yb-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* A computer's channel page: the band with rounded corners across the column, then the picture and the name. */
.yb-screen.yb-computer, .yb-screen.yb-phone { padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-family: Roboto, Arial, sans-serif; color: #0f0f0f; }
.yb-screen.yb-computer .yb-win.band { border-radius: 12px; }
.yb-screen.yb-phone { max-width: 390px; padding: 16px 16px 20px; }
.yb-screen.yb-phone .yb-win.band { border-radius: 8px; }
.yb-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.yb-pic { flex: none; width: 96px; height: 96px; border-radius: 50%; background: #d9d4cf; }
.yb-head.yb-phone .yb-pic { width: 72px; height: 72px; }
.yb-ids { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yb-ids b { font-size: 24px; font-weight: 700; }
.yb-head.yb-phone .yb-ids b { font-size: 20px; }
.yb-ids span { font-size: 14px; color: #606060; }
.yb-ids i { display: block; width: 160px; height: 10px; margin-top: 6px; border-radius: 5px; background: #e5e5e5; }
.yb-screen.yb-tv { max-width: 720px; padding: 14px 14px 26px; border-radius: 10px; background: #111; }
.yb .stage > .said { max-width: 720px; margin-top: 14px; font-size: 14px; color: var(--muted-foreground); text-align: center; }

.zones { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.zones div { padding: 14px 0; border-top: 1px solid var(--border); }
.zones dt { font-weight: 600; }
.zones dd { margin: 4px 0 0; color: var(--foreground-soft); line-height: 1.5; }

@media (max-width: 759px) {
  .yb .stage { padding: 20px 16px; }
  .yb .stage > .said { padding: 0 4px; }
}