:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #162b29; background: #f1f5f3; }
* { box-sizing: border-box; }
main { max-width: 1320px; margin: auto; padding: 22px clamp(14px, 3vw, 38px) 48px; }
header, section { padding: 18px; border: 1px solid #d5e1db; border-radius: 12px; background: white; }
section { margin-top: 16px; }
h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
p { margin: 8px 0 14px; color: #47615a; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[hidden] { display: none !important; }
.section-title { justify-content: space-between; }
button, select { font: inherit; color: inherit; background: #fff; border: 1px solid #9cb5aa; border-radius: 6px; padding: 5px 10px; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button[aria-pressed=true] { background: #14604d; color: white; border-color: #14604d; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 12px; }
.landsat { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.landsat.paired { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.reference-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reference-pair > .card { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.paired-modis .meta { flex-basis: 100%; }
.paired-modis .empty-pair { padding: 12px; }
.delete-image { color: #a02e27; border-color: #d1a39b; }
.review-actions { margin: 8px 0 14px; font-size: .9rem; }
#action-status { color: #47615a; }
.card { margin: 0; overflow: hidden; border: 1px solid #d5e1db; border-radius: 8px; }
.card.active { outline: 2px solid #14604d; outline-offset: -2px; }
figcaption { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.meta { color: #47615a; font-size: .84rem; }
.photo { display: grid; place-items: center; aspect-ratio: var(--ratio, 1); width: 100%; background: #282828; color: #fff; border: 0; border-radius: 0; padding: 0; }
.photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo.failed { cursor: pointer; padding: 10px; }
dialog { max-width: min(96vw, 1050px); max-height: 95vh; border: 1px solid #9cb5aa; border-radius: 10px; padding: 12px; }
dialog::backdrop { background: #101a19ca; }
dialog img { display: block; max-width: 100%; max-height: 82vh; margin: 8px auto 0; }
@media (max-width: 550px) { .landsat { grid-template-columns: 1fr; } }
@media (max-width: 550px) { .reference-pair { grid-template-columns: 1fr; } }

header, section { border-radius: 0; border-left: 0; border-right: 0; }
.photo.unavailable { opacity: 1; color: #e0e0e0; padding: 12px; }
.pages-records { margin-top: 12px; font-size: 14px; }
.pages-records [role="status"] { flex-basis: 100%; }
select { max-width: 100%; } label { min-width: 0; }

.source-link { color: #14604d; font-size: 14px; text-underline-offset: 3px; padding: 4px 0; }
.source-link:focus-visible { outline: 2px solid #14604d; outline-offset: 3px; }