/* frame: the browser window every live site, local file and screenshot sits in,
   and the pill switch (.tabs) under frames that flick between versions.
   Address bar rules: LESSON-RULES.md, "How components behave". */
.win { border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.win-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--gray-200); border-bottom: 1px solid var(--gray-300); }
.win-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.win-dot-r { background: #ff5f57; } .win-dot-y { background: #febc2e; } .win-dot-g { background: #28c840; }
.win-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--text-sm); color: var(--gray-1100); background: var(--surface); border: 1px solid var(--gray-300); border-radius: 7px; padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-open { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--gray-1000); }
.win-open:hover { background: rgb(0 0 0 / 0.06); color: var(--gray-1200); }
.win-view { height: 560px; background: var(--surface); }
.win-view.tall { height: 640px; }
.win-view.auto { height: auto; }
.win-view iframe { display: block; width: 100%; height: 100%; border: 0; }
.win-view img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; background: var(--gray-100); }
@media (max-width: 640px) { .win-view, .win-view.tall { height: 520px; } }
.tabs { display: flex; gap: 3px; width: fit-content; max-width: 100%; margin: var(--s-4) auto 0; padding: 3px; border-radius: 999px; background: var(--gray-200); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 8px -2px rgb(0 0 0 / 0.08); overflow-x: auto; }
.tabs button { font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; background: transparent; color: var(--gray-1100); border: 0; border-radius: 999px; min-height: 26px; padding: 1px 14px; }
.tabs button.is-on { background: var(--gray-1200); color: var(--gray-100); }
.win-view[hidden] { display: none; }
/* an image preview, not a web page: file name centred, no open link */
.win-image .win-url { background: none; border: 0; text-align: center; margin-right: 52px; color: var(--gray-1000); }
.win-view.shot { height: auto; }
.win-view.shot img { height: auto; }