/* Preview-only chrome shared by the five homepage options: the top preview bar and the
   image-cycling control. Deliberately neutral so it reads as tooling, not as part of any design. */
.pv-bar {
  position: relative; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 9px clamp(16px, 3vw, 32px);
  background: #15181c; color: #e9ecef;
  font: 500 13.5px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pv-bar strong { font-weight: 650; color: #fff; }
.pv-bar-note { color: #aeb6bf; margin-right: auto; }
.pv-bar a, .pv-bar button {
  font: inherit; color: #fff; background: none; border: 1px solid #454c55; border-radius: 999px;
  padding: 5px 13px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.pv-bar a:hover, .pv-bar button:hover { border-color: #aeb6bf; }
.pv-bar a:focus-visible, .pv-bar button:focus-visible, .pv-cycle-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.pv-bar [data-copy-picks] { background: #fff; color: #15181c; border-color: #fff; }

.pv-cycle-host { position: relative; }
.pv-cycle {
  position: absolute; z-index: 5; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: rgba(21, 24, 28, .86); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 12.5px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: calc(100% - 24px);
}
.pv-cycle-status { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-cycle-btn {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.pv-cycle-btn:hover { background: rgba(255, 255, 255, .28); }
.pv-cycle[data-place="top-right"], .pv-cycle-host[data-control-place="top-right"] > .pv-cycle { left: auto; bottom: auto; right: 12px; top: 12px; }
.pv-cycle-host[data-control-place="bottom-right"] > .pv-cycle { left: auto; right: 12px; }
.pv-cycle-host[data-control-place="below"] > .pv-cycle { position: static; margin-top: 10px; }
@media (max-width: 700px) { .pv-bar-note { display: none; } .pv-bar strong { flex-basis: 100%; } }
@media print { .pv-bar, .pv-cycle { display: none; } }