/* 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".

   A frame's size is data on the .win-view, not a class per page:
     style="--view-h: 720px; --view-h-phone: 560px"   fixed height (phone defaults to --view-h)
     class="ratio" style="--ar: 1536 / 932"           height from the picture's shape
   Variants: tall, auto, shot, scroll, ratio, contain, scaled (+ phone-own), live, panes,
   portrait, source, zoom. See DESIGN.md, "How a lesson page is put together". */
.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: var(--view-h, 560px); background: var(--surface); }
.win-view.tall { --view-h: 640px; --view-h-phone: 520px; }
.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 { height: var(--view-h-phone, var(--view-h, 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); }
/* wrap: a long switch wraps onto a second line instead of scrolling */
.tabs.wrap { flex-wrap: wrap; justify-content: center; border-radius: 18px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05); overflow-x: visible; }
.tabs.wrap button { padding: 3px 12px; }
.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; }
/* scroll: a long screenshot at full width in a normal-height frame; scroll inside it to see the rest */
.win-view.scroll { overflow-y: auto; overscroll-behavior: contain; background: var(--gray-100); }
.win-view.scroll img { height: auto; }

/* ratio: every panel the same shape, pictures fill it. --ar is the shape */
.win-view.ratio { height: auto; aspect-ratio: var(--ar, 16 / 10); }
.win-view.ratio img { height: 100%; object-fit: cover; }
.win-view.contain img { object-fit: contain; }
.win-view video { display: block; width: 100%; height: auto; background: var(--gray-100); }
.win-view.auto img { height: auto; }

/* live: a real site (components/live.js); the saved picture sits under it until it loads */
.win-view.live { position: relative; overflow: hidden; }
.win-view.live > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* scaled: a site shown at its own width (data-w, data-h; default 1280 x 800), shrunk to fit.
   phone-own: when the frame is narrower than 480px, show the site's own phone layout instead */
.win-view.scaled { position: relative; overflow: hidden; height: auto; aspect-ratio: var(--ar, 16 / 10); background: var(--gray-100); }
.win-view.scaled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.win-view.scaled iframe { position: absolute; top: 0; left: 0; max-width: none; width: var(--w, 1280px); height: var(--h, 800px); transform: scale(var(--s, 0.5)); transform-origin: 0 0; }
.win-view.scaled.phone-own:not(.is-scaled) { aspect-ratio: auto; height: var(--view-h-phone, 520px); }
.win-view.scaled.phone-own:not(.is-scaled) iframe { width: 100%; height: 100%; transform: none; }
.win-view.scaled.phone-own:not(.is-scaled) img { object-position: top; }

/* panes: switchable panes, every pane the same fixed size */
.win-view.panes { position: relative; background: var(--gray-100); }
.win-view.panes .pane { position: absolute; inset: 0; overflow: auto; }
.win-view.panes .pane[hidden] { display: none; }
.win-view.panes img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pane-text { margin: 0; min-height: 100%; padding: 20px 24px; background: var(--surface); color: var(--gray-1200); font-family: var(--mono); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pane-text { padding: 16px; font-size: 13px; } }

/* portrait: a phone video, centred on grey */
.win-view.portrait { display: flex; justify-content: center; background: var(--gray-100); }
.win-view.portrait video { width: auto; height: 100%; max-width: 100%; }

/* source: a text file shown in the frame (markdown, code) */
.win-view.source > pre { margin: 0; height: 100%; box-sizing: border-box; padding: 22px 26px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 21px; white-space: pre-wrap; color: var(--gray-1200); background: var(--surface); }
.win-view.source > pre .h { font-weight: 600; }
.win-view.source > pre .m, .win-view.source > pre .u { color: var(--gray-1000); }
.win-view.source > img { object-fit: contain; object-position: top center; background: #fbfcfc; padding: 12px 0; box-sizing: border-box; }
@media (max-width: 640px) { .win-view.source > pre { padding: 16px; font-size: 12px; line-height: 20px; } }

/* zoom: a big picture at full width that opens on its own when tapped */
.win-view.zoom { height: auto; background: #fff; }
.win-view.zoom a { display: block; cursor: zoom-in; }
.win-view.zoom img { width: 100%; height: auto; object-fit: contain; background: #fff; }

/* a switch hides panels with the hidden attribute */
[data-switch] [hidden] { display: none; }

/* a wider demo on big screens */
@media (min-width: 1280px) { figure.demo.wide { margin-left: calc(50% - 460px); margin-right: calc(50% - 460px); } }

/* bare: a picture, a video or a canvas file, not a web page, so no browser bar
   (build.py picks it from the frame's kind or file name). The picture fills the
   frame on one background, so a transparent or letterboxed picture shows no box */
.win-bare .win-view { background: var(--surface); }
.win-bare .win-view img { background: transparent; }
.win-bare .win-view.ratio { width: 100%; }
/* a phone video: just the video, its own shape, no grey box around it */
.win.win-bare:has(> .win-view.portrait) { background: none; box-shadow: none; border-radius: 0; }
.win-bare .win-view.portrait { background: none; }
.win-bare .win-view.portrait video { border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); background: var(--gray-100); }