/**
 * The photo bench (docs/SPEC-hook-photo-bench.md; Direction C of
 * mockups/hook-image-layout/): a zoomable photographic record for a hook page
 * on the evidence layout.
 *
 * Loaded only on a page that shows the bench (Hook_Photo_Bench::enabled), after
 * gw-hook-evidence.css, whose tokens it reuses. Everything is scoped to
 * `.gw-bench`. The `html body` prefix matches the dossier and evidence sheets,
 * which carry it to outrank the theme's own heading, list and button rules; the
 * evidence layout also styles `h2`, `h3` and `p` inside `.gw-ev-section`, which is
 * where the bench sits, so every element rule below names enough classes to win
 * on specificity and not on the order the sheets load.
 *
 * ── The layout follows the bench's own width, not the window's ─────────────
 *
 * The bench lives in the evidence layout's main column, beside a 300px rail
 * (`minmax(0, 1fr) 300px`): at most ~936px wide, ~706px on a laptop. So the
 * tiers are container queries on `.gw-bench`:
 *
 *   wide    1000px and up   rail on the left, stage, Details column (open)
 *   compact  700 to 999px   stage (+ Details column when open), caption bar and
 *                           a rail strip under it. THE COLUMN'S OWN LAYOUT.
 *   narrow   under 700px    one column: stage, caption, rail, Details under them
 *
 * Browsers without container queries (before Chrome 105, Safari 16, Firefox 110)
 * get the compact tier, which is the right one for the column.
 *
 * ── theme: fixed-sheet ─────────────────────────────────────────────────────
 *
 * The bench is a dark viewing box in BOTH themes, which is why the owner chose it over the
 * lighter layouts (a photograph is judged against dark), so its own palette (`--gwb-*` and the
 * literals below) is not themed and the sheet is exempt from the colour ratchet whole. Two things
 * about it DO follow the theme, and use tokens: its outer edge (`--gwd-bench-edge`, because a
 * dark box on a dark card needs a visible edge it does not need on a white one) and its pressed
 * states, which are white writing on `--gwd-orange-fill`, the orange that is the same in both
 * themes (`--gwd-orange-deep` goes pale on dark, and white on pale orange is 2.1:1).
 */

html body .gw-bench {
  --gwb-bg: #0f1613;
  --gwb-panel: #141c18;
  --gwb-deep: #0a0f0d;
  --gwb-edge: #26332d;
  --gwb-txt: #e6ebe8;
  --gwb-dim: #97a69e;
  --gwb-cap: #c9d4ce;
  container-type: inline-size;
  container-name: bench;
  margin: 8px 0 26px;
  color: var(--gwb-txt);
  background: var(--gwb-bg);
  border: 1px solid var(--gwd-bench-edge);
  font-family: var(--gwd-sans);
}
html body .gw-bench *,
html body .gw-bench *::before,
html body .gw-bench *::after { box-sizing: border-box; }
html body .gw-bench [hidden] { display: none !important; }
html body .gw-bench :focus-visible { outline: 3px solid var(--gwd-orange); outline-offset: 2px; }
html body .gw-bench .gw-bench-vp:focus-visible { outline-offset: -3px; }

/* Visually hidden, still read by a screen reader and a crawler. */
html body .gw-bench .gw-bench-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Header and tools ─────────────────────────────────────────────────── */
html body .gw-bench .gw-bench-top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gwb-edge); }
html body .gw-bench .gw-bench-top h2.gw-bench-h,
html body .gw-bench .gw-bench-top h2 { margin: 0; color: var(--gwb-txt); font: 500 21px/1.2 var(--gwd-serif); letter-spacing: 0; }
html body .gw-bench .gw-bench-top .gw-bench-sub { max-width: none; margin: 3px 0 0; color: var(--gwb-dim); font: 13px/1.4 var(--gwd-sans); }
html body .gw-bench .gw-bench-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html body .gw-bench .gw-bench-tools button,
html body .gw-bench .gw-bench-seg button {
  height: 36px; margin: 0; padding: 0 13px; color: var(--gwb-txt); background: #1b2621; border: 1px solid #36453e; border-radius: 3px;
  cursor: pointer; font: 600 13px/1 var(--gwd-sans); text-transform: none; letter-spacing: 0;
}
html body .gw-bench .gw-bench-tools button:hover,
html body .gw-bench .gw-bench-seg button:hover { background: #26332d; }
html body .gw-bench .gw-bench-tools button[aria-pressed="true"],
html body .gw-bench .gw-bench-seg button[aria-pressed="true"] { color: #fff; background: var(--gwd-orange-fill); border-color: var(--gwd-orange-fill); }
html body .gw-bench .gw-bench-tools button[aria-expanded="true"] { background: #2a3832; }
html body .gw-bench .gw-bench-seg { display: inline-flex; }
html body .gw-bench .gw-bench-seg button { margin-left: -1px; border-radius: 0; }
html body .gw-bench .gw-bench-seg button:first-child { margin-left: 0; border-radius: 3px 0 0 3px; }
html body .gw-bench .gw-bench-seg button:last-child { border-radius: 0 3px 3px 0; }
html body .gw-bench .gw-bench-details-btn::before {
  content: ""; display: inline-block; width: 12px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 1.5px solid currentColor; border-right-width: 5px; border-radius: 1px;
}

/* ── The body grid: compact (the column) by default ───────────────────── */
html body .gw-bench .gw-bench-body {
  --gwb-pw: 300px;
  --gwb-stage-h: clamp(320px, 58cqi, 580px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gwb-pw);
  grid-template-rows: var(--gwb-stage-h) auto auto;
  grid-template-areas: "panes side" "cap side" "rail side";
}
html body .gw-bench .gw-bench-panes { grid-area: panes; }
html body .gw-bench .gw-bench-cap { grid-area: cap; }
html body .gw-bench .gw-bench-railbox { grid-area: rail; }
html body .gw-bench .gw-bench-side { grid-area: side; }
/* Closed is what the server prints (M10): nothing opens after load in the column. */
html body .gw-bench[data-panel="closed"] .gw-bench-body { --gwb-pw: 0px; }
html body .gw-bench[data-panel="closed"] .gw-bench-side { display: none; }
html body .gw-bench[data-panel="open"] .gw-bench-cap { display: none; }

/* ── Stage ────────────────────────────────────────────────────────────── */
html body .gw-bench .gw-bench-panes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--gwb-deep); }
html body .gw-bench .gw-bench-pane { position: relative; min-width: 0; min-height: 0; background: var(--gwb-deep); }
html body .gw-bench .gw-bench-vp { position: absolute; inset: 0; overflow: hidden; user-select: none; }
/* Before the script runs, and with it off: the photograph fitted in its box. */
html body .gw-bench .gw-bench-vp img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
/* Once the script owns it: the element is the original's pixel size, moved and
   scaled by transform, so one number (the scale) means "percent of the original". */
html body .gw-bench .gw-bench-vp.is-live { touch-action: pan-y; cursor: zoom-in; }
html body .gw-bench .gw-bench-vp.is-live.zp-zoomed { touch-action: none; cursor: grab; }
html body .gw-bench .gw-bench-vp.is-live.zp-panning { cursor: grabbing; }
/* will-change: the original can be 2560px; without a compositor layer of its own every
   pan and every page scroll repaints it, and a plain wheel over it stalls the page. */
html body .gw-bench .gw-bench-vp.is-live img { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; object-fit: fill; transform-origin: 0 0; -webkit-user-drag: none; will-change: transform; }
html body .gw-bench .gw-bench-tag {
  position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: center; max-width: calc(100% - 20px);
  padding: 4px 10px 4px 5px; color: #fff; background: rgba(10, 15, 13, .78); border-radius: 3px; font: 600 13px/1.3 var(--gwd-sans); pointer-events: none;
}
html body .gw-bench .gw-bench-tag b { overflow: hidden; font: 600 13px/1.3 var(--gwd-sans); text-overflow: ellipsis; white-space: nowrap; }
html body .gw-bench .gw-bench-hud { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; align-items: center; padding: 4px; background: rgba(10, 15, 13, .82); border-radius: 3px; }
html body .gw-bench .gw-bench-hud button { width: 32px; height: 32px; margin: 0; padding: 0; color: #fff; background: #26332d; border: 0; border-radius: 2px; cursor: pointer; font: 600 17px/1 var(--gwd-sans); }
html body .gw-bench .gw-bench-hud button:disabled { opacity: .35; cursor: default; }
html body .gw-bench .gw-bench-hud output { min-width: 74px; text-align: center; color: #cdd8d2; font: 600 12px/1 var(--gwd-mono, ui-monospace, Menlo, Consolas, monospace); }
html body .gw-bench .gw-bench-toast {
  position: absolute; left: 50%; top: 14px; margin: 0; padding: 7px 14px; transform: translateX(-50%); color: #fff;
  background: rgba(10, 15, 13, .9); border: 1px solid #4b5b53; border-radius: 999px; font: 600 13px/1.3 var(--gwd-sans); opacity: 0; pointer-events: none; transition: opacity .25s;
}
html body .gw-bench .gw-bench-toast.is-on { opacity: 1; }
html body .gw-bench .gw-bench-loading {
  position: absolute; right: 10px; top: 10px; margin: 0; padding: 4px 10px; color: #fff; background: rgba(10, 15, 13, .82); border-radius: 3px; font: 600 12px/1.3 var(--gwd-sans); pointer-events: none;
}
/* The minimap: where the zoomed view sits in the photograph. Its size is set by the
   script from the photograph's proportions; a press or drag on it moves the view. */
html body .gw-bench .gw-bench-mini {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; overflow: hidden; background: #000;
  border: 1px solid #4b5b53; border-radius: 2px; cursor: crosshair; touch-action: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
html body .gw-bench .gw-bench-mini img { display: block; width: 100%; height: 100%; margin: 0; max-width: none; object-fit: fill; opacity: .55; }
html body .gw-bench .gw-bench-mini i { position: absolute; border: 2px solid var(--gwd-orange); background: rgba(223, 94, 49, .14); pointer-events: none; }
/* Which pane is which, over the photograph (Compare only). A letter and an outline,
   never colour alone (A6). */
html body .gw-bench .gw-bench-tag .gw-bench-ab {
  display: grid; flex: none; width: 20px; height: 20px; place-items: center; color: #fff; background: #4b5b53; border-radius: 2px; font: 700 12px/1 var(--gwd-sans);
}
html body .gw-bench .gw-bench-pane.is-active .gw-bench-tag .gw-bench-ab { background: var(--gwd-orange-fill); }
html body .gw-bench .gw-bench-tag .gw-bench-eid { color: #fff; background: #26332d; border-color: #3b4a43; }

/* ── Identification chip, shared by the caption bar, rail and panel ───── */
html body .gw-bench .gw-bench-eid {
  display: inline-block; flex: none; margin: 0; padding: 1px 8px; color: var(--gwb-txt); background: #1b2621; border: 1px solid #3b4a43; border-radius: 3px;
  font: 600 11.5px/1.6 var(--gwd-mono, ui-monospace, Menlo, Consolas, monospace);
}

/* ── Caption bar: what the photograph is, in view while Details is closed ── */
html body .gw-bench .gw-bench-cap { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; padding: 10px 14px; background: var(--gwb-panel); border-top: 1px solid var(--gwb-edge); }
html body .gw-bench .gw-bench-cap .gw-bench-cap-text { min-width: 0; flex: 1; color: var(--gwb-cap); font: 14px/1.45 var(--gwd-sans); }
html body .gw-bench .gw-bench-cap .gw-bench-cap-text strong { margin-right: 4px; color: #fff; font: 600 15px/1.45 var(--gwd-serif); }
html body .gw-bench .gw-bench-cap button { flex: none; height: 30px; margin: 0; padding: 0 11px; color: var(--gwb-txt); background: transparent; border: 1px solid #4b5b53; border-radius: 3px; cursor: pointer; font: 600 12.5px/1 var(--gwd-sans); }
html body .gw-bench .gw-bench-cap button:hover { background: #26332d; }

/* ── Rail: a strip under the stage; vertical beside it in the wide tier ── */
html body .gw-bench .gw-bench-railbox { position: relative; min-width: 0; background: #121a16; border-top: 1px solid var(--gwb-edge); }
html body .gw-bench .gw-bench-rail { display: flex; flex-direction: row; gap: 8px; padding: 8px 10px; overflow-x: auto; scrollbar-width: thin; }
html body .gw-bench .gw-bench-th {
  position: relative; display: block; flex: none; width: 118px; height: 80px; margin: 0; padding: 0; overflow: hidden; background: #1b2621;
  border: 2px solid transparent; opacity: .74; text-decoration: none;
}
html body .gw-bench .gw-bench-th:hover,
html body .gw-bench .gw-bench-th:focus-visible { opacity: 1; }
html body .gw-bench .gw-bench-th.is-active { opacity: 1; border-color: var(--gwd-orange); }
html body .gw-bench .gw-bench-th img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
html body .gw-bench .gw-bench-th .gw-bench-eid { position: absolute; left: 4px; bottom: 4px; padding: 0 6px; color: #fff; background: rgba(10, 15, 13, .85); border-color: transparent; font-size: 10.5px; }
/* In Compare each thumbnail a pane is showing wears that pane's letter. */
html body .gw-bench .gw-bench-th .gw-bench-mark {
  position: absolute; right: 4px; top: 4px; display: none; min-width: 18px; height: 18px; padding: 0 3px; color: #fff; background: var(--gwd-orange-fill);
  border-radius: 2px; font: 700 11px/18px var(--gwd-sans); text-align: center;
}
html body .gw-bench.is-compare .gw-bench-th.is-active .gw-bench-mark { display: block; }
html body .gw-bench .gw-bench-rail .gw-bench-nomatch { flex: 1 0 200px; max-width: none; margin: 0; padding: 22px 8px; color: var(--gwb-dim); font: 13.5px/1.5 var(--gwd-sans); }

/* ── Filters: subject chips and a size select, above six photographs ───── */
html body .gw-bench .gw-bench-top .gw-bench-filters { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0; }
html body .gw-bench .gw-bench-filters .gw-bench-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body .gw-bench .gw-bench-filters .gw-bench-chips button {
  height: 32px; margin: 0; padding: 0 14px; color: var(--gwb-txt); background: transparent; border: 1px solid #4b5b53; border-radius: 999px;
  cursor: pointer; font: 600 13px/1 var(--gwd-sans); text-transform: none; letter-spacing: 0;
}
html body .gw-bench .gw-bench-filters .gw-bench-chips button:hover { background: #26332d; }
html body .gw-bench .gw-bench-filters .gw-bench-chips button[aria-pressed="true"] { color: #fff; background: var(--gwd-orange-fill); border-color: var(--gwd-orange-fill); }
html body .gw-bench .gw-bench-filters .gw-bench-size { display: inline-flex; gap: 8px; align-items: center; margin: 0; color: var(--gwb-dim); font: 600 13px/1 var(--gwd-sans); }
html body .gw-bench .gw-bench-filters .gw-bench-size select {
  height: 32px; width: auto; margin: 0; padding: 0 10px; color: var(--gwb-txt); background-color: #1b2621; color-scheme: dark;
  border: 1px solid #36453e; border-radius: 3px; font: 600 13px/1 var(--gwd-sans);
}

/* ── Details panel ────────────────────────────────────────────────────── */
html body .gw-bench .gw-bench-side { position: relative; min-height: 0; background: var(--gwb-panel); border-left: 1px solid var(--gwb-edge); }
html body .gw-bench .gw-bench-side-in { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; }
html body .gw-bench .gw-bench-side-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 18px;
  background: var(--gwb-panel); border-bottom: 1px solid var(--gwb-edge); color: var(--gwb-dim); font: 700 11.5px/1.3 var(--gwd-sans); letter-spacing: .08em; text-transform: uppercase;
}
html body .gw-bench .gw-bench-side-head button { height: 30px; margin: 0; padding: 0 11px; color: var(--gwb-txt); background: #1b2621; border: 1px solid #36453e; border-radius: 3px; cursor: pointer; font: 600 12.5px/1 var(--gwd-sans); letter-spacing: 0; text-transform: none; }
html body .gw-bench .gw-bench-side-head button:hover { background: #26332d; }
html body .gw-bench .gw-bench-side .gw-bench-side-body { padding: 14px 18px 22px; }
html body .gw-bench .gw-bench-side .gw-bench-side-body .gw-bench-sid { display: flex; gap: 8px; align-items: center; color: var(--gwb-dim); font: 600 12px/1.3 var(--gwd-sans); letter-spacing: .06em; text-transform: uppercase; }
html body .gw-bench .gw-bench-side .gw-bench-side-body h3 { margin: 10px 0 8px; color: var(--gwb-txt); font: 500 21px/1.25 var(--gwd-serif); letter-spacing: 0; }
html body .gw-bench .gw-bench-side .gw-bench-side-body h4 {
  margin: 20px 0 8px; padding: 14px 0 0; color: var(--gwb-dim); border-top: 1px solid var(--gwb-edge);
  font: 700 11.5px/1.3 var(--gwd-sans); letter-spacing: .08em; text-transform: uppercase;
}
html body .gw-bench .gw-bench-side .gw-bench-side-body p { max-width: none; margin: 0 0 14px; }
html body .gw-bench .gw-bench-side .gw-bench-side-body .gw-bench-desc { margin-bottom: 18px; color: var(--gwb-cap); font: 15px/1.6 var(--gwd-serif); }
html body .gw-bench .gw-bench-side .gw-bench-side-body .gw-bench-credit { color: var(--gwb-dim); font: 13px/1.5 var(--gwd-sans); }
html body .gw-bench .gw-bench-side .gw-bench-read { margin: 0; padding: 0; list-style: none; }
html body .gw-bench .gw-bench-side .gw-bench-read li { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; padding: 0; font: 13.5px/1.45 var(--gwd-sans); }
html body .gw-bench .gw-bench-side .gw-bench-read li .gw-bench-eid { grid-row: span 2; align-self: start; margin-top: 2px; }
html body .gw-bench .gw-bench-side .gw-bench-read em { color: var(--gwb-dim); font-style: normal; font-size: 12.5px; }
html body .gw-bench .gw-bench-side .gw-bench-read q { quotes: none; color: #f0f4f1; font: 15px/1.4 var(--gwd-serif); }
html body .gw-bench .gw-bench-side .gw-bench-read .gw-bench-v { color: #f0f4f1; }
html body .gw-bench .gw-bench-side .gw-bench-side-body .gw-bench-note { margin: 4px 0 0; color: var(--gwb-dim); font: 12.5px/1.5 var(--gwd-sans); }
html body .gw-bench .gw-bench-side .gw-bench-cited { display: flex; flex-wrap: wrap; gap: 6px; }
html body .gw-bench .gw-bench-side .gw-bench-cited a { padding: 5px 12px; color: var(--gwb-txt); border: 1px solid #4b5b53; border-radius: 999px; font: 600 13px/1.3 var(--gwd-sans); text-decoration: none; }
html body .gw-bench .gw-bench-side .gw-bench-cited a:hover { background: #26332d; }
html body .gw-bench .gw-bench-side .gw-bench-side-body .gw-bench-empty { margin: 0; color: var(--gwb-dim); font: 13.5px/1.5 var(--gwd-sans); }
html body .gw-bench .gw-bench-side .gw-bench-file { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; color: var(--gwb-dim); font: 13px/1.4 var(--gwd-sans); }
html body .gw-bench .gw-bench-side .gw-bench-file a { color: #8fc3dd; font-weight: 600; text-decoration: none; }
html body .gw-bench .gw-bench-side .gw-bench-file a:hover { text-decoration: underline; }

/* ── Compare: two panes, side by side (stacked in the narrow tier) ──────── */
html body .gw-bench.is-compare .gw-bench-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
html body .gw-bench.is-compare .gw-bench-pane.is-active::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid var(--gwd-orange); pointer-events: none;
}
/* The tag takes the top left; the hint that the wheel needs Ctrl moves below it. */
html body .gw-bench.is-compare .gw-bench-toast { top: 52px; }

/* ── Wide tier: the rail stands on the left, Details opens by default ──── */
@container bench (min-width: 1000px) {
  html body .gw-bench .gw-bench-body {
    --gwb-stage-h: clamp(520px, 74vh, 760px);
    grid-template-columns: 132px minmax(0, 1fr) var(--gwb-pw);
    grid-template-rows: var(--gwb-stage-h) auto;
    grid-template-areas: "rail panes side" "rail cap side";
  }
  html body .gw-bench .gw-bench-railbox { border-top: 0; border-right: 1px solid var(--gwb-edge); }
  html body .gw-bench .gw-bench-rail { position: absolute; inset: 0; flex-direction: column; padding: 10px; overflow-x: hidden; overflow-y: auto; }
  html body .gw-bench .gw-bench-th { width: 100%; height: 84px; }
}

/* ── Narrow tier: one column, the panel under the rest ─────────────────── */
@container bench (max-width: 699px) {
  html body .gw-bench .gw-bench-body {
    --gwb-stage-h: clamp(260px, 72cqi, 460px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--gwb-stage-h) auto auto auto;
    grid-template-areas: "panes" "cap" "rail" "side";
  }
  html body .gw-bench[data-panel="open"] .gw-bench-cap { display: flex; }
  html body .gw-bench .gw-bench-side { border-left: 0; border-top: 1px solid var(--gwb-edge); }
  html body .gw-bench .gw-bench-side-in { position: static; }
  html body .gw-bench .gw-bench-th { width: 104px; height: 72px; }
  /* Two photographs stack, each as tall as one would be alone. */
  html body .gw-bench.is-compare .gw-bench-body { --gwb-stage-h: clamp(520px, 150cqi, 760px); }
  html body .gw-bench.is-compare .gw-bench-panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  html body .gw-bench .gw-bench-hud output { min-width: 56px; }
  html body .gw-bench .gw-bench-sub .gw-bench-hint { display: none; }
  html body .gw-bench .gw-bench-cap button { display: none; }
}

/* ── Full screen: the same viewer, made large ─────────────────────────── */
html body .gw-bench.is-max { position: fixed; inset: 0; z-index: 100000; overflow: auto; margin: 0; border: 0; }
/* --gwb-top is the header's real height, measured by the script: a header that wraps
   (a phone, or the filter row) is taller than the 66px it is on a wide screen. */
html body .gw-bench.is-max .gw-bench-body { --gwb-stage-h: calc(100vh - var(--gwb-top, 66px) - 56px); --gwb-stage-h: calc(100dvh - var(--gwb-top, 66px) - 56px); }
html body .gw-bench.is-max[data-panel="open"] .gw-bench-body { --gwb-stage-h: calc(100vh - var(--gwb-top, 66px)); --gwb-stage-h: calc(100dvh - var(--gwb-top, 66px)); }

/* ── Touch: bigger targets (WCAG 2.2 target size) ─────────────────────── */
@media (pointer: coarse) {
  html body .gw-bench .gw-bench-tools button,
  html body .gw-bench .gw-bench-seg button { min-height: 44px; }
  html body .gw-bench .gw-bench-hud button { width: 44px; height: 44px; }
  html body .gw-bench .gw-bench-cap button,
  html body .gw-bench .gw-bench-side-head button,
  html body .gw-bench .gw-bench-filters .gw-bench-chips button,
  html body .gw-bench .gw-bench-filters .gw-bench-size select { min-height: 44px; }
}

/* A feature row the Details panel linked to, marked for a moment. It lives in the
   page's table, outside .gw-bench, hence the evidence layout's own scope here. */
@keyframes gwBenchFlash { 0% { background: #f9d9c8; } 100% { background: transparent; } }
html body .gw-ev .gw-ev-table tr.gw-bench-flash > th,
html body .gw-ev .gw-ev-table tr.gw-bench-flash > td { animation: gwBenchFlash 1.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html body .gw-bench .gw-bench-toast { transition: none; }
  html body .gw-ev .gw-ev-table tr.gw-bench-flash > th,
  html body .gw-ev .gw-ev-table tr.gw-bench-flash > td { animation: none; background: #f9d9c8; }
}

/* ── Print: every photograph as a thumbnail with its words ─────────────── */
@media print {
  html body .gw-bench { color: #000; background: #fff; border: 0; }
  html body .gw-bench .gw-bench-top h2 { color: #000; }
  html body .gw-bench .gw-bench-tools,
  html body .gw-bench .gw-bench-panes,
  html body .gw-bench .gw-bench-cap,
  html body .gw-bench .gw-bench-side,
  html body .gw-bench .gw-bench-filters,
  html body .gw-bench .gw-bench-hint { display: none !important; }
  html body .gw-bench .gw-bench-body { display: block; }
  /* A filter someone chose narrows the screen, not the printout: every photograph prints. */
  html body .gw-bench .gw-bench-th[hidden] { display: block !important; }
  html body .gw-bench .gw-bench-nomatch { display: none !important; }
  html body .gw-bench .gw-bench-railbox { background: #fff; border: 0; }
  html body .gw-bench .gw-bench-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; }
  html body .gw-bench .gw-bench-th { width: auto; height: auto; opacity: 1; background: #fff; border: 1px solid #bbb; color: #000; }
  html body .gw-bench .gw-bench-th img { height: auto; }
  html body .gw-bench .gw-bench-th .gw-bench-eid { color: #000; background: #fff; border-color: #888; }
  html body .gw-bench .gw-bench-th .gw-bench-sr { position: static; display: block; width: auto; height: auto; margin: 0; padding: 4px 6px 6px; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: #000; font: 11px/1.35 var(--gwd-sans); }
}