/* assets/captures.css — Software screenshots, on the pages that contain them.
   Loaded only by the relevant pages: nothing here applies to the rest of the site.
   The colors come from the design system variables; none are hard-coded — they are
   including in dark mode: --border, --white, --slate and --navy switch on their own
   in (assets/style.css, block [data-theme="dark"]), so nothing needs redeclaring here. */

.cap-figure{margin:0 0 clamp(2.5rem,5vw,3.5rem);max-width:var(--measure);margin-inline:auto}
.cap-shot{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--white)}
.cap-shot img{display:block;width:100%;height:auto}
.cap-figure figcaption{margin-top:0.9rem;font-size:0.92rem;line-height:1.65;color:var(--slate)}
.cap-figure figcaption strong{display:block;color:var(--navy);font-weight:700;font-size:1.02rem;margin-bottom:0.3rem}

/* The screenshot marker: the date, and nothing else. A screenshot without a date always
   ends up showing a screen that no longer exists. */
.cap-date{display:block;width:fit-content;margin-top:0.85rem;font-size:0.8rem;font-weight:600;
  letter-spacing:0.02em;text-transform:uppercase;color:var(--accent-ink,var(--accent));
  background:var(--accent-soft);border-radius:var(--r-pill);padding:0.28rem 0.8rem}

/* Text in a computer screenshot becomes unreadable when reduced to the width of a
   phone. On a small screen, the image keeps its size and scrolls WITHIN its frame —
   the page itself does not move a single pixel horizontally. The note explaining this
   only makes sense there: it exists only at that width. */
.cap-aide{display:none}
@media(max-width:700px){
  .cap-shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cap-shot img{width:auto;max-width:none;min-width:760px}
  .cap-aide{display:block;margin-top:0.6rem;font-size:0.82rem;color:var(--slate);font-style:italic}
}

@media print{.cap-shot{box-shadow:none}}