/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
   Genre: editorial tool · Tone: field annotation · Anchor: terracotta
   Macrostructure: Workbench · theme: Almanac · nav: N9 · footer: Ft2 */
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; background: var(--color-ink); color: var(--color-paper); }
body { min-height: 100dvh; font-family: var(--font-body); }
button, a, label { font: inherit; }
button, .file-button { min-height: 2.75rem; border: 1px solid var(--color-paper-deep); border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; }
button:hover, .file-button:hover { border-color: var(--color-route); color: var(--color-route-ink); }
button:focus-visible, a:focus-visible, .file-button:focus-within { outline: .2rem solid var(--color-route); outline-offset: .2rem; }
button:active:not(:disabled), .file-button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
a { color: inherit; text-underline-offset: .2em; }

.label-header { position: sticky; z-index: 300; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: max(var(--space-xs), env(safe-area-inset-top)) var(--space-sm) var(--space-xs); background: var(--color-ink); border-bottom: 1px solid var(--color-muted); }
.progress-copy { min-width: 0; }
.progress-copy strong, .progress-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-copy span { margin-top: var(--space-3xs); color: var(--color-paper-deep); font-size: .7rem; }
.label-header button { padding-inline: var(--space-xs); white-space: nowrap; }
.progress-track { grid-column: 1 / -1; height: .2rem; overflow: hidden; background: var(--color-muted); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--color-route); }

.label-app { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); min-height: calc(100dvh - 9rem); }
.photo-panel { display: grid; align-content: center; min-width: 0; min-height: calc(100dvh - 9rem); padding: var(--space-sm); background: var(--color-ink); }
.label-stage { display: grid; place-items: center; min-width: 0; margin: 0; }
.label-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 13rem); width: auto; height: auto; box-shadow: var(--shadow-lift); touch-action: pan-y; }
.swipe-note { margin: var(--space-xs) 0 0; color: var(--color-paper-deep); font-size: .72rem; text-align: center; }

.picker { min-width: 0; padding: var(--space-lg) var(--space-sm); background: var(--color-paper); color: var(--color-ink); }
.picker-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-ink); }
.picker-head h1 { max-width: 10ch; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: .98; overflow-wrap: anywhere; }
.image-ref { margin: 0 0 var(--space-2xs); color: var(--color-route); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.picker button, .picker .file-button { border-color: var(--color-ink); }
#album-mode[aria-pressed="true"] { background: var(--color-route); color: var(--color-route-ink); border-color: var(--color-route); }
.quick-row, .review-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin-top: var(--space-sm); }
.review-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-row button, .review-row button { padding: var(--space-2xs); white-space: nowrap; }
.location-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin-top: var(--space-sm); }
.location-option { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; min-height: 3.5rem; padding: var(--space-2xs); text-align: left; }
.location-option span:first-child { color: var(--color-route); font-family: var(--font-display); font-size: 1.35rem; text-align: center; }
.location-option.is-current { background: var(--color-ink); color: var(--color-paper); }
.location-option.is-current span:first-child { color: var(--color-route-ink); }
.location-option[data-location="unknown"], .location-option[data-location="off-route"] { grid-template-columns: 1fr; text-align: center; }

.label-footer { position: sticky; z-index: 300; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm) max(var(--space-xs), env(safe-area-inset-bottom)); background: var(--color-ink); border-top: 1px solid var(--color-muted); }
.label-footer button, .file-button { display: grid; place-items: center; padding-inline: var(--space-xs); white-space: nowrap; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.export-button { background: var(--color-route); color: var(--color-route-ink); border-color: var(--color-route); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 48rem) {
  .label-header { grid-template-columns: auto minmax(0, 1fr); }
  .label-header > button { grid-column: 1 / -1; width: 100%; }
  .label-app { display: block; }
  .photo-panel { min-height: auto; height: 58dvh; padding: var(--space-xs); }
  .label-stage img { max-height: calc(58dvh - 3rem); }
  .picker { padding-block: var(--space-md); }
  .picker-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .picker-head h1 { font-size: 2.2rem; }
  .label-footer { grid-template-columns: minmax(0, 1fr); position: static; }
}
@media (max-width: 23rem) {
  .location-options { grid-template-columns: minmax(0, 1fr); }
  .review-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}