/* Hallmark · component: screenshot gallery · genre: editorial · theme: Hourline Almanac
 * states: default · hover · focus · active · disabled · loading · error · success
 * Hallmark · pre-emit critique: P4 H5 E5 S5 R5 V4
 * contrast: 16 computed light/dark text pairs pass; minimum 4.72:1.
 * responsive: EN and zh at 320 / 375 / 414 / 768 / 1280px; controls stay on one line.
 */
.gallery .gallery-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); }
.gallery .gallery-heading { min-width: 0; max-width: 48rem; }
.gallery .gallery-head h2 { font-size: var(--text-gallery-title); line-height: 1.2; letter-spacing: -0.045em; }
.gallery .gallery-head p { max-width: 40rem; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-body); line-height: 1.7; }
.gallery .gallery-language-count { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; flex-shrink: 0; color: var(--color-muted); font-size: var(--text-small); white-space: nowrap; }
.gallery-icon { width: 20px; height: 20px; flex-shrink: 0; }
.gallery .gallery-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); padding: 0; border: 0; }
.gallery-device-tabs { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-gallery-control); max-width: 100%; }
.gallery-device-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); font-size: 0.875rem; line-height: 1.4; font-weight: 500; white-space: nowrap; flex: 1 1 auto; transition: transform var(--duration-fast) var(--ease-out); }
.gallery-device-tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.gallery-device-tab:active:not(:disabled), .gallery-language-button:active:not(:disabled), .gallery-language-button.is-active { transform: scale(0.97); opacity: 1; }
.gallery-device-tab:focus-visible, .gallery-language-button:focus-visible { outline-offset: 3px; }
.gallery-device-tab.is-focus, .gallery-language-button.is-focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.gallery-device-short { display: none; }
.gallery-language-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-gallery-stroke); border-radius: var(--radius-pill); background: var(--color-surface); font-size: 0.875rem; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.gallery-language-button .gallery-chevron { width: 16px; height: 16px; color: var(--color-muted); transition: transform var(--duration-fast) var(--ease-out); }
.gallery-language-button[aria-expanded="true"] .gallery-chevron { transform: rotate(180deg); }
.gallery-language-button[aria-expanded="true"] { border-color: var(--color-control-stroke); }
.gallery-controls[data-state="error"] .gallery-language-button { border-color: var(--color-accent-ink); }
.gallery-language-menu { position: fixed; inset: auto; top: var(--menu-y); left: var(--menu-x); margin: 0; padding: var(--space-md); width: min(340px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid var(--color-gallery-stroke); border-radius: var(--radius-gallery); background: var(--color-surface); color: var(--color-ink); overflow: auto; overscroll-behavior: contain; }
.gallery-language-menu h3 { font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0; font-weight: 600; margin-bottom: var(--space-sm); }
.gallery-language-search { display: flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-sm); border: 1px solid var(--color-control-stroke); border-radius: var(--radius-control); background: var(--color-paper); }
.gallery-language-search input { border: 0; background: var(--color-transparent); padding: var(--space-sm) 0; min-height: 44px; min-width: 0; width: 100%; font-size: 0.875rem; }
.gallery-language-search input::placeholder { color: var(--color-muted); }
.gallery-language-search:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.gallery-language-search input:focus-visible { outline: none; }
.gallery-language-list { margin-top: var(--space-sm); max-height: min(280px, 43dvh, var(--language-list-height, 280px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.gallery-language-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); min-height: 44px; width: 100%; text-align: start; font-size: 0.875rem; border-radius: var(--radius-control); }
.gallery-language-option[aria-selected="true"] { background: var(--color-accent-wash); color: var(--color-accent-ink); font-weight: 600; }
.gallery-language-option.is-highlighted { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.gallery-language-option .language-check { width: 18px; height: 18px; visibility: hidden; }
.gallery-language-option[aria-selected="true"] .language-check { visibility: visible; }
.gallery-language-menu .language-empty { padding: var(--space-md) var(--space-xs); color: var(--color-muted); font-size: 0.875rem; }
.gallery-language-menu .language-note { border-top: 1px solid var(--color-gallery-stroke); padding-top: var(--space-sm); margin-top: var(--space-sm); font-size: 0.75rem; color: var(--color-muted); }
.gallery .gallery-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); min-height: 56px; margin-top: var(--space-lg); padding-block: var(--space-sm); border-top: 1px solid var(--color-gallery-stroke); color: var(--color-muted); font-size: var(--text-small); }
.gallery .gallery-result { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; }
.gallery .gallery-context { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.gallery .gallery-context::after { content: "·"; }
.gallery .gallery-status { flex: initial; padding: 0; font-size: var(--text-small); }
.gallery .gallery-status[data-state="loading"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: var(--space-xs); border: 1.5px solid var(--color-gallery-stroke); border-top-color: var(--color-accent-ink); border-radius: var(--radius-pill); animation: gallery-spin 800ms linear infinite; }
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery .gallery-status[data-state="error"] { color: var(--color-accent-ink); }
.gallery .gallery-retry { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs); color: var(--color-accent-ink); white-space: nowrap; border-radius: var(--radius-control); }
.gallery .gallery-hint { white-space: nowrap; }
.gallery .gallery-grid { margin-top: var(--space-md); gap: var(--space-xl) var(--space-lg); }
.gallery .gallery-grid[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.gallery .gallery-image { border: 1px solid var(--color-gallery-stroke); border-radius: var(--radius-gallery); background: var(--color-art-paper); }
.gallery .gallery-image img { border-radius: inherit; }
.gallery .gallery-item figcaption { font-size: 0.875rem; margin-top: var(--space-sm); padding-inline: var(--space-2xs); line-height: 1.6; }
.gallery .gallery-item figcaption .expand { color: var(--color-muted); }
.gallery .gallery-empty { grid-column: 1 / -1; display: grid; justify-items: center; align-content: center; text-align: center; min-height: 240px; padding: var(--space-xl); border: 1px dashed var(--color-gallery-stroke); border-radius: var(--radius-gallery); background: var(--color-surface); }
.gallery .gallery-empty > .gallery-icon { width: 32px; height: 32px; color: var(--color-muted); margin-bottom: var(--space-md); }
.gallery .gallery-empty h3 { font-size: 1.125rem; }
.gallery .gallery-empty p { font-size: 0.875rem; color: var(--color-muted); max-width: 36ch; margin-top: var(--space-xs); }
@media (hover: hover) {
  .gallery-device-tab:hover:not(:disabled):not([aria-selected="true"]), .gallery-device-tab.is-hover { background: var(--color-surface); }
  .gallery-language-button:hover:not(:disabled), .gallery-language-button.is-hover { background: var(--color-gallery-control); }
  .gallery-language-option:hover { background: var(--color-gallery-control); }
  .gallery .gallery-image:hover { transform: translateY(-4px); }
}
@media (max-width: 768px) {
  .gallery .gallery-head { display: block; }
  .gallery .gallery-head p { max-width: 35rem; }
  .gallery .gallery-language-count { margin-top: var(--space-xs); }
  .gallery .gallery-filters { align-items: center; gap: var(--space-md); }
  .gallery .gallery-grid { gap: var(--space-xl) var(--space-md); }
}
@media (max-width: 600px) {
  .gallery .gallery-filters { align-items: stretch; }
  .gallery-device-tabs { width: 100%; }
  .gallery-device-tab { padding-inline: var(--space-md); font-size: 0.8125rem; }
  .gallery-device-long { display: none; }
  .gallery-device-short { display: inline; }
  .gallery-language-button { justify-content: start; padding-inline: var(--space-md); }
  .gallery-language-button .gallery-chevron { margin-inline-start: auto; }
  .gallery .gallery-hint { display: none; }
  .gallery .gallery-grid { gap: var(--space-lg) var(--space-sm); }
  .gallery .gallery-item figcaption { font-size: 0.75rem; gap: var(--space-xs); }
  .gallery .gallery-meta { margin-top: var(--space-md); }
}
@media (max-width: 359px) {
  .gallery-device-tab { padding-inline: var(--space-sm); }
  .gallery-device-tab .gallery-icon { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-language-button .gallery-chevron { transition: none; }
  .gallery .gallery-status[data-state="loading"]::before { animation: none; }
}