/*
 * Desktop Material — screenshot documentation pages.
 *
 * Generated by script/generate-screenshot-docs.mjs. Layout only: every colour,
 * radius, font and elevation is a Material Design 3 token owned by
 * docs-hub.css, so the shared preference controls restyle these pages without
 * this file knowing anything about theming.
 */

/* ------------------------------------------------------ mobile-first guards */

/*
 * These pages are made of file paths: the footer names the generator and its
 * four sources, the fact tables name every asset, and the regeneration lists
 * quote whole commands. An inline `code` run offers a line breaker no break
 * opportunity, so `.codex/verification/gallery_capture_plan.js` measured
 * 363 px and pushed the document 59 px sideways at a 320 px viewport — the
 * whole page scrolled horizontally, not just the code. Scoped to this page
 * type by its body attribute, so the hub's own code spans are untouched.
 */
[data-page='screenshot-docs'] code {
  overflow-wrap: anywhere;
}

/*
 * The hub's dock and app-bar controls are 36 px (`.btn--small`) and 40 px
 * (`.btn--icon`, the search field) tall, which is below the 44 px minimum
 * touch target. Restored here rather than in the shared stylesheet, because
 * only these pages are being held to it.
 */
[data-page='screenshot-docs'] .btn--icon,
[data-page='screenshot-docs'] .btn--small,
[data-page='screenshot-docs'] .search-bar__field input {
  min-height: 44px;
}

[data-page='screenshot-docs'] .btn--icon {
  min-width: 44px;
}

/*
 * The hub's tab strip is one document with panels, so its JavaScript marks the
 * current tab `aria-selected`. These are separate documents whose strip is a
 * plain link list, so the index marks its own tab `aria-current="page"` — and
 * needs the matching visual state, because the hub's rule only ever looks at
 * `aria-selected`.
 */
[data-page='screenshot-docs'] .tab[aria-current='page'] {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}

@media (forced-colors: active) {
  [data-page='screenshot-docs'] .tab[aria-current='page'] {
    border: 2px solid Highlight;
  }
}

.shot-page {
  max-width: 74rem;
}

/* --------------------------------------------------------- the frame itself */

.shot-figure {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-lowest);
}

.shot-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
}

.shot-figure figcaption {
  margin: 0.75rem 0 0;
  color: var(--md-on-surface-variant);
}

/* -------------------------------------------------------------- fact tables */

.shot-panel + .shot-panel,
.shot-panel + .shot-nav {
  margin-top: 1rem;
}

.shot-panel > h2 {
  margin: 0 0 0.75rem;
}

.shot-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

.shot-facts__key {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}

.shot-facts__value {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.shot-facts__value--unavailable,
.shot-unavailable {
  color: var(--md-on-surface-variant);
  font-style: italic;
}

/* A missing datum is information, so it is marked, not hidden. */
.shot-facts__value--unavailable::before,
.shot-unavailable::before {
  content: '⚠ ';
  font-style: normal;
}

@media (min-width: 48rem) {
  .shot-facts {
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    align-items: baseline;
  }

  .shot-facts__key {
    text-align: end;
  }
}

/* ------------------------------------------------------------ command lists */

.shot-commands {
  margin: 0;
  padding-left: 1.25rem;
}

.shot-commands > li + li {
  margin-top: 0.75rem;
}

.shot-commands code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* -------------------------------------------------------------------- links */

.shot-links {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.shot-links li {
  margin: 0;
}

.shot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
  color: var(--md-primary);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .shot-links--columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0 1rem;
  }
}

/* ------------------------------------------------------------- index groups */

.shot-group {
  margin-top: 2rem;
}

.shot-group > h3 {
  margin: 0 0 0.35rem;
  overflow-wrap: anywhere;
}

.shot-grid {
  margin-top: 1rem;
}

.shot-card {
  display: flex;
}

.shot-card__link {
  width: 100%;
  padding-top: 0.75rem;
}

.shot-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
}

/* ---------------------------------------------------------------- prev/next */

.shot-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.shot-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 44px;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-low);
  color: inherit;
  text-decoration: none;
}

a.shot-nav__link:hover {
  background: var(--md-surface-container);
}

.shot-nav__link--none {
  color: var(--md-on-surface-variant);
  font-style: italic;
}

.shot-nav__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.shot-nav__title {
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .shot-nav {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }

  .shot-nav__link--next {
    text-align: end;
  }
}

/* ------------------------------------------------------------ environments */

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

@media (forced-colors: active) {
  .shot-figure,
  .shot-card__thumb,
  .shot-nav__link {
    border: 1px solid CanvasText;
  }

  .shot-facts__value--unavailable,
  .shot-unavailable {
    color: CanvasText;
  }
}