/* ========================================
   RESPONSIVE.CSS — Chat 4 responsive QA fixes. Load it LAST.

   Every rule is a pure addition scoped to a row in docs/qa/REPORT.md
   (the R-numbers match the report). Nothing here changes the look on a
   desktop Mac in light mode with a mouse; the rules bite on phones,
   touch, forced colours, screen readers or inside the lightbox. Written
   against css/site.css and css/glass.css at commit 58e7ebf.
   ======================================== */

/* R1 — Body copy under 16px. Captions, equipment notes and the footer are
   15.2px / 15px. 16px is the plan's floor for body text and the size
   below which iOS Safari zooms a focused control. */
.caption,
.equip-note,
.site-footer {
  font-size: 16px;
}

/* R2 — Nav links have no accessible name. The icon is aria-hidden and the
   label is `visibility: hidden`, which also removes it from the
   accessibility tree, so a screen reader announces "link" twice. Keeping
   the label at opacity 0 hides it visually but leaves the name; the hover
   rule in glass.css still fades it in for pointer users. */
.kw-nav__label {
  visibility: visible;
}

/* R3 — Theme toggle is a 32×32 button: under the 44px touch minimum, and
   pinned 24px from the right edge, which is under the notch in iPhone
   landscape. Extend the hit area without changing the drawing, and keep
   it inside the safe area. */
.kw-theme::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.kw-theme {
  right: calc(24px + env(safe-area-inset-right, 0px));
}
@media (max-width: 500px) {
  .kw-theme {
    right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* R4 — Lightbox prev/next buttons sit 16px from the viewport edge, under
   the notch in landscape. The close button already respects the top inset;
   do the same for the sides. */
.lightbox-close { right: calc(16px + env(safe-area-inset-right, 0px)); }
.lightbox-prev  { left:  calc(16px + env(safe-area-inset-left, 0px)); }
.lightbox-next  { right: calc(16px + env(safe-area-inset-right, 0px)); }

/* R5 — Lightbox on phones: with 12px padding the 44px prev/next buttons
   (at left/right 16px) overlap the first and last 30px of the photograph.
   Drop them below the image, side by side, where the thumb is anyway. */
@media (max-width: 639px) {
  .lightbox-nav {
    top: auto;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .lightbox-prev { left: calc(50% - 60px); }
  .lightbox-next { right: calc(50% - 60px); }
}

/* R6 — Forced colours (Windows High Contrast). Backgrounds are discarded, so
   the white squircle that marks the current page disappears and the two
   icons look identical; the lightbox buttons lose their backdrop too.
   Borders survive forced colours. */
@media (forced-colors: active) {
  .kw-nav__item[aria-current="page"] {
    outline: 2px solid LinkText;
    outline-offset: -3px;
  }
  .kw-nav {
    border-color: CanvasText;
  }
  .lightbox-close,
  .lightbox-nav {
    border: 2px solid ButtonText;
  }
}

/* R7 — Touch targets. The chip under the page title is a 29px-tall link.
   Extend its hit area to 44px without changing how it looks. */
a.chip {
  position: relative;
}
a.chip::before {
  content: '';
  position: absolute;
  inset: -8px 0;
}