/* ===============================================================
   TOOLDUCK — App Screenshot Maker: the studio
   ===============================================================
   The editor surface. It reuses the site's tokens rather than
   inventing a dark theme of its own, so the studio reads as the same
   product as the rest of ToolDuck and follows the theme toggle. What
   it adds is layering: a rail, a stage and a panel, each a step
   apart in tone, which is what makes a page read as an application
   rather than an article.

   Layout is three columns on a desktop and one on a phone. The rail
   turns into a horizontal strip on a tablet rather than a narrow
   vertical one, because a column of 76px thumbnails is unusable on
   touch.
   =============================================================== */

.shot {
    --shot-radius: 12px;
    --shot-line: var(--border);
    --shot-field: var(--bg-soft);
    --shot-chrome: var(--bg-muted);

    border: 1px solid var(--shot-line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* A design tool has to fit on the screen it is being designed on.
       `--shot-fit` is set from the studio's own offset by the script, so
       the workspace fills exactly the space between its heading and the
       bottom of the window instead of guessing at a viewport fraction.
       The fallback covers the moment before the script has measured. */
    height: var(--shot-fit, clamp(620px, calc(100vh - 3rem), 900px));
    color: var(--ink);
}

/* `display` beats the hidden attribute, so every element the script
   hides needs this guard or it stays visible. */
.shot [hidden] { display: none !important; }

/* ---------------------------------------------------------------
   The studio's own page furniture
   ---------------------------------------------------------------
   The studio is a workspace, not an article. Left at the tool page's
   default the hero — eyebrow, h1, lede, four badges and a decorative
   icon tile — took about 230px before any of the editor was visible,
   which is a third of a laptop window spent on a caption. Each piece is
   kept and only the scale changes, so the page still reads as the same
   product. */
.tool-page--screenshot-editor .band--first.band--tight {
    padding-block: .3rem .7rem;
}

.tool-page--screenshot-editor .tool-page__head h1 {
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
    margin-bottom: .35rem;
}

.tool-page--screenshot-editor .tool-page__head .lede {
    margin-bottom: .6rem;
    font-size: .95rem;
    max-width: 82ch;
}

/* Purely decorative, and it cost a 96px column beside a three-line
   heading. The studio's own interface is the thing worth looking at. */
.tool-page--screenshot-editor .tool-page__badge { display: none; }

/* ---------------------------------------------------------------
   Top bar
   -------------------------------------------------------------- */
.shot-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--shot-line);
    background: var(--shot-chrome);
    min-height: 52px;
    flex-wrap: wrap;
}

.shot-bar__group {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.shot-bar__group--name { flex: 1 1 16rem; }
.shot-bar__group--end { margin-left: auto; }

.shot-bar__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    flex: none;
}

.shot-bar__mark svg { width: 17px; height: 17px; }

.shot-bar__name { flex: 1 1 auto; min-width: 0; }

.shot-bar__name input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    padding: .35rem .5rem;
    font: inherit;
    font-weight: 650;
    color: var(--ink);
    min-width: 0;
}

.shot-bar__name input:hover { border-color: var(--shot-line); }
.shot-bar__name input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: var(--focus-ring);
}

.shot-bar__saved {
    font-size: .78rem;
    color: var(--ink-4);
    white-space: nowrap;
    flex: none;
}

.shot-bar__export { flex: none; }

/* ---------------------------------------------------------------
   Buttons
   -------------------------------------------------------------- */
.shot-icon-btn,
.shot-text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 32px;
    padding: .3rem .55rem;
    border: 1px solid var(--shot-line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.shot-icon-btn { width: 32px; padding: 0; }

.shot-icon-btn:hover,
.shot-text-btn:hover { background: var(--bg-soft); color: var(--ink); }

.shot-icon-btn:focus-visible,
.shot-text-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--brand);
}

.shot-text-btn--block { width: 100%; }
.shot-text-btn--danger { color: var(--err); border-color: var(--border); }
.shot-text-btn--danger:hover { background: var(--err-bg); color: var(--err); }
.shot-btn--block { width: 100%; justify-content: center; }

.shot-icon-btn svg.icon--xs { width: 15px; height: 15px; }
.shot-text-btn svg.icon--xs { width: 15px; height: 15px; }
.shot-icon-btn svg.icon--flip { transform: rotate(180deg); }
.shot-icon-btn svg.icon--up { transform: rotate(-90deg); width: 14px; height: 14px; }
.shot-icon-btn svg.icon--down { transform: rotate(90deg); width: 14px; height: 14px; }

.shot-upload { position: relative; cursor: pointer; }

/* The one action a new visitor needs, so it is the only primary button in
   the rail rather than a quiet text button below the list. */
.shot-upload--block {
    width: 100%;
    justify-content: center;
    font-size: .84rem;
    min-height: 38px;
}

.shot-upload--block svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------
   Body
   -------------------------------------------------------------- */
.shot-body {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr) 19rem;
    min-height: 0;
    flex: 1;
}

/* ---------------------------------------------------------------
   Rail
   -------------------------------------------------------------- */
.shot-rail {
    border-right: 1px solid var(--shot-line);
    background: var(--bg-soft);
    padding: .75rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 0;
    overflow-y: auto;
}

.shot-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    order: -2;
}

.shot-rail__title {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.shot-count {
    font-size: .74rem;
    font-weight: 650;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.shot-screens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-content: start;
}

.shot-screen {
    position: relative;
    border: 1px solid var(--shot-line);
    border-radius: var(--shot-radius);
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.shot-screen.is-current {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.shot-screen.is-dragging { opacity: .45; }
.shot-screen.is-over { border-color: var(--brand); border-style: dashed; }

.shot-screen__button {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    width: 100%;
    padding: .4rem;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    border-radius: var(--shot-radius);
}

.shot-screen__button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shot-screen__frame {
    flex: none;
    display: grid;
    place-items: center;
    /* Matches the width the thumbnail is rendered at in the script. At
       44px the canvas was 76px wide and overflow:hidden sliced the right
       third off every phone, which is why the rail thumbnails looked
       like slivers rather than screenshots. */
    width: 52px;
    border-radius: 6px;
    background: var(--bg-muted);
    overflow: hidden;
    border: 1px solid var(--shot-line);
}

.shot-screen__canvas { display: block; max-width: 100%; }

.shot-screen__meta {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    flex: 1;
}

.shot-screen__num {
    font-size: .68rem;
    font-weight: 700;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.shot-screen.is-current .shot-screen__num { color: var(--brand); }

.shot-screen__caption {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-2);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shot-screen__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .12rem;
}

.shot-screen__drag {
    position: absolute;
    top: .3rem;
    right: .3rem;
    font-size: .62rem;
    line-height: .62rem;
    color: var(--ink-4);
    writing-mode: vertical-rl;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.shot-screen:hover .shot-screen__drag,
.shot-screen:focus-within .shot-screen__drag { opacity: 1; }

.shot-badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .1rem .28rem;
    border-radius: 4px;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.shot-badge--ok { background: var(--ok-bg); color: var(--ok); }
.shot-badge--warn { background: var(--warn-bg); color: var(--warn); }
.shot-badge--brand { background: var(--brand-soft); color: var(--brand); }

.shot-rail__actions {
    display: grid;
    gap: .35rem;
    /* Stays put while the sequence scrolls, because adding a screenshot
       is the first thing a visitor needs and it used to sit below a
       scrollable list of empty cards where nobody found it. */
    position: sticky;
    top: 0;
    order: -1;
    padding-bottom: .5rem;
    background: var(--bg-soft);
}

.shot-rail__hint {
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--ink-4);
}

.shot-rail__hint--muted { opacity: .8; }

.shot-rail__hint kbd {
    font-family: var(--mono);
    font-size: .68rem;
    background: var(--bg-muted);
    border: 1px solid var(--shot-line);
    border-radius: 4px;
    padding: 0 .2rem;
}

/* ---------------------------------------------------------------
   Stage
   -------------------------------------------------------------- */
.shot-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    /* One field, deliberately. This was two stacked background layers
       (an opaque padding-box fill over a checkerboard), which was both
       redundant — the first layer hid the second entirely — and read as a
       seam where the two were composited. A design surface should be the
       quietest thing on the screen. */
    background: radial-gradient(115% 90% at 50% 0%, var(--bg-soft) 0%, var(--bg-muted) 100%);
}

.shot-stage__bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .7rem;
    border-bottom: 1px solid var(--shot-line);
    background: var(--bg-soft);
    flex-wrap: wrap;
}

.shot-stage__target {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-3);
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.shot-stage__zoom,
.shot-stage__nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.shot-stage__zoom-value,
.shot-stage__pos {
    font-size: .78rem;
    font-weight: 650;
    color: var(--ink-3);
    min-width: 4.5ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.shot-viewport {
    flex: 1;
    min-height: 380px;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 1.4rem;
}

.shot-viewport.is-dragover { box-shadow: inset 0 0 0 3px var(--brand); }

.shot-canvas-wrap {
    position: relative;
    line-height: 0;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    /* No max-width: capping it would squash a zoomed page while the
       annotations keep their real coordinates. The viewport scrolls. */
}

.shot-canvas { display: block; width: 100%; height: auto; }

.shot-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    line-height: normal;
}

.shot-select {
    position: absolute;
    border: 1.5px solid var(--brand);
    border-radius: 4px;
    background: rgba(37, 99, 235, .07);
}

.shot-select__tag {
    position: absolute;
    top: -1.35rem;
    left: -1.5px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--brand);
    color: #fff;
    border-radius: 4px 4px 0 0;
    padding: .1rem .3rem;
}

.shot-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 26px;
    margin-top: -13px;
    border: 1.5px solid var(--brand);
    border-radius: 4px;
    background: var(--surface);
    padding: 0;
    pointer-events: auto;
    cursor: ew-resize;
}

.shot-handle--w { left: -7px; }
.shot-handle--e { right: -7px; }

.shot-handle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------
   Empty screen — the upload affordance
   ---------------------------------------------------------------
   Sits exactly over the device frame while a screen has no screenshot,
   so the way to fill it is where the visitor is already looking. The box
   itself ignores pointer events: only the button takes them, which keeps
   clicking and dragging the text underneath working normally.
   -------------------------------------------------------------- */
.shot-drop {
    position: absolute;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .5rem;
    padding: 1rem;
    border: 2px dashed var(--brand-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    pointer-events: none;
    text-align: center;
}

.shot-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    pointer-events: auto;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    padding: .5rem .9rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    /* One line. Wrapped inside a phone-shaped box the label broke over
       three lines and the pill became a circle. */
    white-space: nowrap;
}

.shot-drop__btn:hover { background: var(--brand-strong); }
.shot-drop__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shot-drop__btn svg { width: 15px; height: 15px; }

.shot-drop__hint {
    font-size: .74rem;
    color: var(--ink-3);
}

.shot-inline {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: .12em .18em;
    border: 1.5px solid var(--brand);
    border-radius: 4px;
    background: rgba(255, 255, 255, .94);
    color: #111827;
    resize: none;
    overflow: hidden;
    pointer-events: auto;
    box-shadow: 0 10px 30px -12px rgba(2, 6, 23, .5);
}

html[data-theme="dark"] .shot-inline { background: rgba(9, 9, 11, .94); color: #f4f4f5; }

.shot-status {
    padding: .5rem .8rem;
    border-top: 1px solid var(--shot-line);
    background: var(--bg-soft);
    font-size: .8rem;
    color: var(--ink-3);
    min-height: 2.2rem;
}

.shot-status[data-tone="ok"] { color: var(--ok); }
.shot-status[data-tone="warn"] { color: var(--warn); }
.shot-status[data-tone="error"] { color: var(--err); }

/* ---------------------------------------------------------------
   Panel
   -------------------------------------------------------------- */
.shot-panel {
    border-left: 1px solid var(--shot-line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.shot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
    padding: .35rem .35rem 0;
    border-bottom: 1px solid var(--shot-line);
    background: var(--bg-soft);
}

/* Six tabs do not fit across a 19rem panel, and a strip that scrolls
   hides its last two behind a scrollbar the panel does not show. They
   wrap onto a second row instead, so every destination is on screen. */
.shot-tab {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    color: var(--ink-3);
    padding: .45rem .5rem;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.shot-tab:hover { color: var(--ink); background: var(--bg-muted); }

.shot-tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: var(--surface);
}

.shot-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shot-panels { padding: .9rem .85rem 1.4rem; overflow-y: auto; min-height: 0; }

.shot-panel-block { display: grid; gap: .75rem; }

.shot-divider { height: 1px; background: var(--shot-line); }

.shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }

.shot-note {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-3);
}

.shot-note--muted { color: var(--ink-4); font-size: .74rem; }
.shot-note--spec { font-size: .74rem; color: var(--ink-4); }

.shot-warn {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .6rem;
}

.shot-scope { display: grid; gap: .3rem; }

.shot-checks { display: grid; gap: .4rem; }

.shot-checks label,
.shot-scope label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    color: var(--ink-2);
    cursor: pointer;
}

.shot-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.shot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .3rem;
    font-size: .78rem;
    color: var(--ink-3);
}

.shot-list li {
    padding: .35rem .5rem;
    background: var(--bg-soft);
    border: 1px solid var(--shot-line);
    border-radius: 8px;
}

.shot-list__empty { font-style: italic; }

.shot-summary {
    margin: 0;
    display: grid;
    gap: .3rem;
    font-size: .8rem;
}

.shot-summary > div {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding-bottom: .25rem;
    border-bottom: 1px dashed var(--shot-line);
}

.shot-summary dt { color: var(--ink-3); margin: 0; }
.shot-summary dd {
    margin: 0;
    font-weight: 650;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Panel fields sit inside the panel, so they need their own scope to
   avoid the reading-measure typography of the article below. */
.shot .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.shot .field > span,
.shot .field > label {
    font-size: .76rem;
    font-weight: 650;
    color: var(--ink-3);
}

.shot .field input[type="text"],
.shot .field input[type="number"],
.shot .field input[type="search"],
.shot .field textarea,
.shot .field select {
    width: 100%;
    border: 1px solid var(--shot-line);
    border-radius: 8px;
    background: var(--shot-field);
    color: var(--ink);
    font: inherit;
    font-size: .84rem;
    padding: .4rem .5rem;
    min-width: 0;
}

.shot .field textarea { resize: vertical; line-height: 1.4; }

.shot .field input[type="color"] {
    width: 100%;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--shot-line);
    border-radius: 8px;
    background: var(--shot-field);
    cursor: pointer;
}

.shot .field input[type="range"] { width: 100%; accent-color: var(--brand); }

.shot .field input:focus-visible,
.shot .field textarea:focus-visible,
.shot .field select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.shot .field output { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.shot .segmented { display: flex; flex-wrap: wrap; gap: .25rem; }

.shot .segmented button {
    flex: 1 1 auto;
    border: 1px solid var(--shot-line);
    background: var(--shot-field);
    color: var(--ink-2);
    border-radius: 8px;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .5rem;
    cursor: pointer;
    white-space: nowrap;
}

.shot .segmented button:hover { background: var(--bg-muted); color: var(--ink); }

.shot .segmented button[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.shot .segmented button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------
   Preview mode
   -------------------------------------------------------------- */
body.shot-previewing { overflow: hidden; }

/* Preview mode really does take the editor away rather than covering
   it. An overlay would look identical and leave every control in the
   accessibility tree and reachable by Tab, which is not the same thing
   as a preview — and it keeps the studio canvas from being repainted
   behind the result it is meant to be previewing. */
body.shot-previewing .shot { visibility: hidden; }

.shot-preview {
    position: fixed;
    inset: 0;
    /* Above the sticky site header, which sits at 100. At 90 the header
       floated over the preview bar and swallowed clicks on its own
       Previous and Next buttons — the controls were visible and dead. */
    z-index: 400;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.shot-preview[hidden] { display: none !important; }

.shot-preview__bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
}

.shot-preview__left,
.shot-preview__right {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.shot-preview__right { margin-left: auto; }

.shot-preview__tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: .15rem .5rem;
}

.shot-preview__name {
    font-weight: 650;
    font-size: .88rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shot-preview__pos {
    font-size: .8rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.shot-preview__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 1.4rem;
    overflow: auto;
}

.shot-preview__stage[data-mode="none"] { justify-content: center; }

.shot-preview__shot { margin: 0; display: grid; gap: .5rem; }

.shot-preview__frame {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-muted);
}

.shot-preview__frame canvas { display: block; }

.shot-preview__shot figcaption {
    font-size: .78rem;
    color: var(--ink-3);
    max-width: 22ch;
    line-height: 1.35;
}

.shot-preview__hint {
    margin: 0;
    padding: .6rem .9rem;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    color: var(--ink-4);
    background: var(--bg-soft);
}

/* ---------------------------------------------------------------
   Template modal
   -------------------------------------------------------------- */
.shot-modal {
    position: fixed;
    inset: 0;
    /* Above the header for the same reason as the preview layer. */
    z-index: 420;
    background: rgba(2, 6, 23, .55);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.shot-modal[hidden] { display: none !important; }

.shot-modal__sheet {
    width: min(1040px, 100%);
    max-height: min(86vh, 900px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shot-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
}

.shot-modal__head h2 { margin: 0; font-size: 1.05rem; }

.shot-modal__tools {
    display: flex;
    gap: .5rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
    flex-wrap: wrap;
}

.shot-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 14rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    padding: 0 .5rem;
    color: var(--ink-4);
}

.shot-search input {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .86rem;
    padding: .42rem 0;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}

.shot-search input:focus { outline: none; }

.shot-modal__filter select {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .84rem;
    padding: .42rem .5rem;
}

.shot-modal__grid {
    padding: 1rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .9rem;
}

.shot-tpl {
    display: grid;
    gap: .35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: .5rem;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

.shot-tpl:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.shot-tpl.is-current { border-color: var(--brand); box-shadow: var(--focus-ring); }
.shot-tpl:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shot-tpl__poster {
    display: grid;
    place-items: center;
    border-radius: 8px;
    overflow: hidden;
    min-height: 120px;
}

.shot-tpl__poster canvas { display: block; }

.shot-tpl__name { font-size: .86rem; font-weight: 650; color: var(--ink); }

.shot-tpl__meta { font-size: .72rem; color: var(--ink-4); }

.shot-modal__empty {
    margin: 0;
    padding: 1.4rem 1rem 2rem;
    text-align: center;
    color: var(--ink-3);
    font-size: .88rem;
}

/* ---------------------------------------------------------------
   Responsive
   -------------------------------------------------------------- */

/* Tablet: the rail becomes a horizontal strip. A vertical column of
   thumbnails is the first thing to stop working on touch. */
@media (max-width: 1080px) {
    .shot { height: auto; min-height: 640px; }

    /* The rail is a row here, so nothing in it sticks or reorders — the
       actions simply lead the strip. */
    .shot-rail__actions {
        position: static;
        order: 0;
        grid-auto-flow: column;
        padding-bottom: 0;
        background: none;
    }

    .shot-rail__actions .btn,
    .shot-rail__actions .shot-text-btn { width: auto; }

    .shot-body {
        grid-template-columns: minmax(0, 1fr) 17.5rem;
        grid-template-areas:
            "stage panel"
            "rail panel";
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .shot-stage { grid-area: stage; }
    .shot-panel { grid-area: panel; }

    .shot-rail {
        grid-area: rail;
        border-right: 1px solid var(--shot-line);
        border-top: 1px solid var(--shot-line);
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .5rem .6rem;
    }

    .shot-rail__head { flex: none; order: 0; }
    .shot-screens { flex-direction: row; flex: none; }
    .shot-screen { min-width: 9.5rem; }
    .shot-rail__hint { display: none; }
}

@media (max-width: 780px) {
    .shot { height: auto; min-height: 0; }

    .shot-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "stage"
            "rail"
            "panel";
        grid-template-rows: auto auto auto;
    }

    .shot-panel {
        border-left: 0;
        border-top: 1px solid var(--shot-line);
    }

    .shot-viewport { min-height: 300px; padding: .8rem; }
    .shot-stage__target { flex-basis: 100%; }
    .shot-panels { overflow: visible; }
    .shot-btn-grid { grid-template-columns: 1fr; }
    .shot-preview__stage { padding: .8rem; gap: .8rem; }
    .shot-modal__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .shot-screen,
    .shot-screen__drag { transition: none; }
}