/* ===============================================================
   TOOLDUCK — App Screenshot Maker: landing, library, template pages
   ===============================================================
   Shares main.css and tool.css tokens. Nothing here defines a colour
   of its own — every surface is a token, so the whole product follows
   the theme toggle without a single dark-mode override.
   =============================================================== */

/* ---------------------------------------------------------------
   Shared: cards and chips
   -------------------------------------------------------------- */

.shotcard-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1.1rem;
}

/* A row of tall previews scrolls sideways rather than wrapping. A
   wrapped grid turns one template per style into a wall that pushes the
   next section off the screen.

   `min-width: 0` on the row is load-bearing. A grid item's minimum
   width is `auto`, so without it the row refuses to shrink below the
   sum of its columns, the parent column inherits that width, and the
   whole page scrolls sideways instead of the row doing it. */
.shotshow__row { min-width: 0; }

.shotcard-grid--row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 215px);
    grid-template-columns: none;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding-bottom: .7rem;
}

.shotcard-grid--row > * { scroll-snap-align: start; }

.shotcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.shotcard:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-md);
}

.shotcard__poster {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1rem .9rem;
    min-height: 168px;
    /* `align-content: start` is load-bearing: without it the single
       auto row stretches and the preview floats in the middle of a
       tall box with dead space above and below it. */
    align-content: start;
    overflow: hidden;
}

.shotcard__canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 26px -14px rgba(2, 6, 23, .55);
    background: rgba(255, 255, 255, .06);
}

.shotcard__zoom {
    position: absolute;
    inset: auto .6rem .6rem auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(2, 6, 23, .62);
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 650;
    padding: .28rem .6rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
    backdrop-filter: blur(4px);
}

.shotcard:hover .shotcard__zoom,
.shotcard:focus-within .shotcard__zoom { opacity: 1; }

.shotcard__zoom:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

.shotcard__zoom svg { width: 14px; height: 14px; }

.shotcard__body {
    padding: .8rem .85rem .9rem;
    /* A flex column, not a grid. As a grid with `align-content: start`
       the last row was packed to the content, so the action's
       `margin-top: auto` had no free space to push into and the buttons
       sat at different heights across a row. */
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.shotcard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
}

.shotcard__name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.25;
}

.shotcard__name:hover { color: var(--brand); }

.shotcard__desc {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.shotcard__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.shotchip {
    font-size: .68rem;
    font-weight: 650;
    padding: .12rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--ink-3);
    white-space: nowrap;
    /* Backstop: a chip can never escape its card. Its text is clipped
       loudly by the card's own overflow otherwise, which is how the
       device chip ended up reading "iPhone, iPad, Android, Android tabl". */
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* The device chip names up to four devices, so it is the one chip that
   can outgrow a narrow card. It wraps rather than being cut. */
.shotchip--devices { white-space: normal; }

.shotchip--accent {
    border-color: transparent;
    background: color-mix(in srgb, var(--chip-accent, var(--brand)) 16%, transparent);
    color: color-mix(in srgb, var(--chip-accent, var(--brand)) 78%, var(--ink));
}

.shotchip--muted { background: transparent; color: var(--ink-4); }
.shotchip--free {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: transparent;
}

.shotcard__action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .84rem;
    font-weight: 650;
    color: var(--brand);
    text-decoration: none;
}

.shotcard__action:hover { text-decoration: underline; }
.shotcard__action svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------
   Landing
   -------------------------------------------------------------- */

.shotland { padding: 0 1.25rem 1rem; }
.tool-shell--full .shotland,
.tool-shell--full .shotshow,
.tool-shell--full .shottargets {
    max-width: 1200px;
    margin: 0 auto;
}

.shotland__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.6rem;
}

.shotbadges {
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
}

.shotbadges li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .7rem;
}

.shotbadges .icon {
    color: var(--ok);
    flex: none;
    width: 15px;
    height: 15px;
}

/* The category hero reserves a 320px column for category artwork. This
   product has none — and on a phone that column became an empty block
   roughly 300px tall between the lede and the badges. The landing view
   below supplies the real content, so the column is dropped here. */
.category-page--screenshot .category-hero__art { display: none; }
.category-page--screenshot .category-hero__text { flex-basis: auto; }

.shotland__support {
    margin: 0 0 1.1rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 62ch;
}

.shotland .btn--lg {
    font-size: 1rem;
    padding: .72rem 1.2rem;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.shotsteps {
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.shotsteps__item {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}

.shotsteps__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shotsteps__text { display: grid; gap: .15rem; }
.shotsteps__text strong { font-size: .9rem; color: var(--ink); }
.shotsteps__text span { font-size: .82rem; line-height: 1.45; color: var(--ink-3); }

.shotshow {
    padding: 0 1.25rem 1rem;
    display: grid;
    gap: 1.8rem;
}

.shotshow__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}

.shotshow__head h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.shotshow__link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .84rem;
    font-weight: 650;
    color: var(--brand);
    text-decoration: none;
}

.shotshow__link:hover { text-decoration: underline; }
.shotshow__link svg { width: 14px; height: 14px; }

.shotshow__row--related { margin-top: 2rem; }

/* Output sizes */
.shottargets { padding: 0 1.25rem 1.5rem; }

.shottargets__head {
    max-width: 62ch;
    margin-bottom: 1.1rem;
}

.shottargets__head h2 { margin: 0 0 .4rem; font-size: 1.15rem; }

.shottargets__lede {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-3);
}

.shottargets__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.shottargets__card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 1rem;
}

.shottargets__card h3 {
    margin: 0 0 .7rem;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.shottargets__card h3 svg { width: 16px; height: 16px; color: var(--brand); }

.shottargets__card ul {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
    display: grid;
    gap: .45rem;
}

.shottargets__card li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .15rem .6rem;
    align-items: baseline;
    padding-bottom: .35rem;
    border-bottom: 1px dashed var(--border);
    font-size: .84rem;
}

.shottargets__name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ink-2);
    font-weight: 600;
}

.shottargets__req {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: .05rem .35rem;
}

/* Deliberately NOT nowrap. "1320 × 2868 / 2868 × 1320 landscape" fits
   on one line inside a 1200px column and forced a 1400px-wide card at
   every narrower width, which took the whole page sideways with it. */
.shottargets__size {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    min-width: 0;
}

.shottargets__size span { color: var(--ink-4); font-weight: 400; }

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

/* ---------------------------------------------------------------
   Library
   -------------------------------------------------------------- */

/* A gallery is wide, but not window-wide: capping it keeps the cards in
   the same column as the rest of the site. */
.tool-shell--full .shotlib {
    max-width: 1400px;
    margin-inline: auto;
}

.shotlib { display: grid; gap: 1.2rem; }

.shotlib__intro { max-width: 68ch; }

.shotlib__lede {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink-3);
}

.shotlib__empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--ink-3);
    font-size: .9rem;
}

.shotfilter {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    padding: 1rem;
    display: grid;
    gap: .85rem;
}

.shotfilter__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0 .7rem;
    color: var(--ink-4);
    max-width: 42rem;
}

.shotfilter__search input {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    padding: .55rem 0;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}

.shotfilter__search input:focus { outline: none; }

.shotfilter__search:focus-within {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.shotfilter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    align-items: end;
}

.shotfilter__reset button { width: 100%; }

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

.shotfilter__count {
    margin: 0;
    font-size: .82rem;
    font-weight: 650;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------
   Large preview modal
   -------------------------------------------------------------- */

.shotmodal {
    position: fixed;
    inset: 0;
    /* Above the sticky site header (z-index 100): at 95 the header sat
       over the dialog and intercepted its controls. */
    z-index: 420;
    background: rgba(2, 6, 23, .6);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.shotmodal[hidden] { display: none !important; }

.shotmodal__sheet {
    width: min(1100px, 100%);
    max-height: 92vh;
    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;
}

.shotmodal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.shotmodal__head h2 { margin: 0; font-size: 1.1rem; }

.shotmodal__meta {
    margin: .2rem 0 0;
    font-size: .8rem;
    color: var(--ink-4);
}

.shotmodal__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.2rem;
    overflow-x: auto;
    background: var(--bg-soft);
}

.shotmodal__shot {
    margin: 0;
    display: grid;
    gap: .5rem;
    cursor: pointer;
    flex: none;
}

.shotmodal__canvas {
    display: block;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    background: var(--bg-muted);
    opacity: .55;
    transition: opacity .15s ease;
}

.shotmodal__shot.is-current .shotmodal__canvas {
    opacity: 1;
    box-shadow: var(--shadow-lg);
}

.shotmodal__shot figcaption {
    font-size: .74rem;
    color: var(--ink-4);
    max-width: 24ch;
    line-height: 1.35;
}

.shotmodal__shot.is-current figcaption { color: var(--ink-2); font-weight: 600; }

.shotmodal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.shotmodal__nav { display: flex; align-items: center; gap: .4rem; }

.shotmodal__pos {
    font-size: .8rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    min-width: 6ch;
    text-align: center;
}

.shotbtn,
.shoticon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 34px;
    padding: .35rem .7rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .84rem;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
}

.shoticon { width: 34px; padding: 0; }

.shotbtn:hover,
.shoticon:hover { background: var(--bg-soft); color: var(--ink); }

.shotbtn:focus-visible,
.shoticon:focus-visible,
.shotmodal__shot:focus-visible .shotmodal__canvas {
    outline: none;
    box-shadow: var(--focus-ring);
}

.shotbtn svg { width: 14px; height: 14px; }
.shotbtn svg.icon--flip { transform: rotate(180deg); }

/* ---------------------------------------------------------------
   Template page
   -------------------------------------------------------------- */

.shottpl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.6rem;
    align-items: start;
}

.shottpl__stage {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.4rem;
    overflow-x: auto;
    min-height: 420px;
}

.shottpl__shot { margin: 0; display: grid; gap: .55rem; flex: none; }

.shottpl__canvas {
    display: block;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    background: var(--bg-muted);
}

.shottpl__shot figcaption {
    font-size: .76rem;
    color: var(--ink-4);
    max-width: 26ch;
    line-height: 1.35;
}

.shottpl__side {
    display: grid;
    gap: .9rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.shottpl__facts {
    margin: 0;
    display: grid;
    gap: .45rem;
    font-size: .84rem;
}

.shottpl__facts > div {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed var(--border);
}

.shottpl__facts dt { color: var(--ink-3); margin: 0; }

.shottpl__facts dd {
    margin: 0;
    text-align: right;
    font-weight: 650;
    color: var(--ink);
}

.shottpl__palette { display: flex; gap: .35rem; }

.shottpl__swatch {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.shottpl__cta { display: grid; gap: .5rem; }

/* ---------------------------------------------------------------
   SEO landing pages ( /ios/, /android/, … )
   -------------------------------------------------------------- */

.shotseo { display: grid; gap: 2rem; }

.shotseo__lede {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 68ch;
    margin: 0;
}

.shotseo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.shotseo__card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 1.1rem;
}

.shotseo__card h3 { margin: 0 0 .5rem; font-size: .95rem; }

.shotseo__card p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-3);
}

.shotseo__card ul {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-3);
}

.shotseo__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

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

@media (max-width: 1000px) {
    .shottpl { grid-template-columns: minmax(0, 1fr); }
    .shottpl__side { position: static; }
}

@media (max-width: 780px) {
    .shotland,
    .shotshow,
    .shottargets { padding-left: .9rem; padding-right: .9rem; }

    .shotcard-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .shotcard-grid--row { grid-auto-columns: minmax(160px, 175px); }

    .shotland .btn--lg { width: 100%; justify-content: center; }
    .shotsteps { grid-template-columns: 1fr; }
    .shotmodal__stage { align-items: flex-start; }
    .shotmodal__shot figcaption { display: none; }
    .shottpl__stage { min-height: 0; padding: .9rem; }
    .shotcard__zoom { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .shotcard,
    .shotcard__zoom,
    .shotmodal__canvas { transition: none; }
}