/*
 * A screenshot under a setup, and its full-screen view (2026-10-05: Bruno's Claude desktop app, set up
 * for Overblast, on /ai-gateway, /gift and /gift/thanks). A page stylesheet (`css: shot`), because the
 * site-wide sheet sits at its budget (test/budget.test.mjs). The markup is scripts/lib/blocks.mjs's
 * setupShot; the dialog is made by /js/gateway.js. The region switch over the setups is at the end.
 */

/* Inside the tabbed code box, after the panes: shown only while its own tab is picked, the same
   `input:checked ~` rule that shows a pane. */
.code.tabbed > .tab-shot { display: none; margin: 0; padding: 2px 18px 18px; font-family: Inter, sans-serif; }
.code.tabbed > .shot-tab:checked ~ .tab-shot { display: block; }
.shot-link { position: relative; display: block; max-width: 720px; border-radius: 10px; overflow: hidden; border: 1px solid #262632; background: #fafafa; cursor: zoom-in; }
.shot-link img { display: block; width: 100%; height: auto; }
.shot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Top right, over the window's Export menu, so it never hides Apply Changes at the bottom. */
.shot-hint { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 Inter, sans-serif; color: #fff; background: rgba(15,15,20,.8); }
.shot-link:hover .shot-hint, .shot-link:focus-visible .shot-hint { background: var(--accent); }
.tab-shot figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: #9a9aa8; }

/* The full-screen view: a modal <dialog>, so Escape closes it and focus returns to the link. A click
   anywhere closes it too. */
.zoom[open] { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; display: grid; place-items: center; cursor: zoom-out; }
.zoom::backdrop { background: rgba(8,8,12,.88); }
.zoom img { display: block; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.zoom-x { position: fixed; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(20,20,26,.85); color: #fff; cursor: pointer; }
.zoom-x:hover { background: #2a2a34; }
.zoom-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * The region switch over the setups (Bruno, 2026-10-05), on the same three pages as the screenshot, so
 * it lives in this page sheet rather than the site-wide one, which sits at its budget. The HTML is
 * scripts/lib/blocks.mjs's aiRegion; /js/gateway.js shows the switch and rewrites the base URLs. It looks
 * like /gift's currency switch: one track, the picked segment raised. The flags are site.css's .rg ones,
 * the same as the model table's region filter.
 */
.gw-region { display: grid; gap: 10px; margin: 0 0 18px; min-width: 0; }
.gw-region-sw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.gw-region-sw[hidden] { display: none; }
.gw-region-lbl { padding: 0 6px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.gw-region-sw label { position: relative; }
.gw-region-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gw-region-sw label > span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.gw-region-sw label > span:hover { background: var(--surface-3); }
.gw-region-sw input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.gw-region-sw input:checked + span .rg-all { color: var(--accent-ink); }
.gw-region-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.gw-region-note, .gw-region-media { margin: 0; max-width: 820px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.gw-region-note code, .gw-region-media code { overflow-wrap: anywhere; }
.gw-region-media { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.gw-region-media > svg { flex-shrink: 0; margin-top: 2px; color: var(--muted); }
/* EU or US picked: the media sentence is the one that can bite, so it stands out. */
.gw-region-media.on { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.gw-region-media.on > svg { color: var(--warn); }