:root { --new-picture-opacity: .7; }
/* By night a picture's well, and the stand-in for one that will not load, is the dark board's own surface, never a cream slab. */
body.night { --picture-well: var(--surface, #22342a); }
#panel-content { min-width: 0; }
.panel-results, .panel-preview { padding: 0 1rem 1rem; }
.panel-preview { padding-top: .75rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line, #d4cdbf); background: var(--panel-preview, rgb(168 143 93 / 7%)); }
.panel-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .75rem 0; }
.panel-results-heading h2 { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-size: 1.15rem; font-weight: 500; line-height: 1.25; margin: 0; }
.panel-selection-close { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line, #d4cdbf); border-radius: 50%; background: transparent; color: inherit; font-size: 1.3rem; cursor: pointer; }
.panel-picture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .65rem; }
.panel-picture { min-width: 0; margin: 0; }
.panel-picture-open { display: block; position: relative; width: 100%; aspect-ratio: 16 / 11; padding: 0; border: 0; border-radius: .25rem; overflow: hidden; color: inherit; background: var(--picture-well, #d5d5c7); cursor: zoom-in; }
.panel-picture-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 160ms ease; }
.panel-picture-open img[data-new-picture] { opacity: var(--new-picture-opacity); }
.panel-picture-open:hover img { transform: scale(1.025); }
.panel-picture-open:focus-visible, .panel-selection-close:focus-visible, .picture-dialog button:focus-visible, .panel-place-page:focus-visible { outline: 3px solid var(--focus, #886739); outline-offset: 3px; }
.panel-picture-place { margin: .4rem 0 .12rem; font: 500 .93rem/1.25 var(--font-display, 'Fraunces', Georgia, serif); overflow-wrap: anywhere; }
.panel-picture-date, .panel-picture-credit { display: block; margin: .12rem 0; color: var(--muted, #646458); font: .72rem/1.35 var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); overflow-wrap: anywhere; }
.panel-estimate, .panel-weather, .panel-new-picture, .panel-mark-words { margin: .35rem 0 .65rem; font: .75rem/1.4 var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); color: var(--muted, #646458); }
.panel-estimate { letter-spacing: .05em; text-transform: uppercase; }
.panel-weather::before { content: '◦'; margin-right: .3em; }
.panel-picture .panel-weather { margin-bottom: 0; }
.panel-empty { font-size: .88rem; line-height: 1.5; color: var(--muted, #646458); }
.panel-place-page { display: inline-block; margin-top: 1rem; color: inherit; text-underline-offset: .2em; font-size: .9rem; }
.picture-unavailable { display: grid; place-content: center; height: 100%; padding: .7rem; margin: 0; font: .8rem/1.4 var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); }
#photo-dialog.picture-dialog { width: min(1100px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 2.75rem 1rem 1rem; border: 1px solid var(--line, #d4cdbf); border-radius: .4rem; color: var(--ink, #242820); background: var(--paper, #f5f2e9); overflow: auto; }
.picture-dialog::backdrop { background: rgb(13 20 18 / 84%); }
.picture-dialog-close { position: absolute; right: .75rem; top: .6rem; background: transparent; border: 0; padding: .35rem .5rem; color: inherit; font: .85rem var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); cursor: pointer; }
.picture-dialog-figure { margin: 0; }
#photo-dialog.picture-dialog #dialog-image { display: block; width: 100%; height: auto; max-height: calc(100dvh - 14rem); object-fit: contain; margin: 0 auto; }
#photo-dialog.picture-dialog #dialog-image[hidden], .panel-picture-open img[hidden] { display: none; }
.picture-dialog-caption { display: flex; justify-content: center; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: .8rem 0; font: .85rem/1.45 var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); text-align: center; }
.picture-dialog-caption strong { font: 500 1.1rem/1.3 var(--font-display, 'Fraunces', Georgia, serif); }
.picture-dialog-caption a { color: inherit; text-underline-offset: .2em; }
.picture-dialog-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.picture-dialog-navigation button { padding: .5rem .75rem; color: inherit; background: transparent; border: 1px solid var(--line, #d4cdbf); border-radius: .25rem; font: .8rem var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); cursor: pointer; }
.picture-dialog-navigation button:disabled { opacity: .4; cursor: default; }
.picture-position { font: .75rem var(--font-ui, 'IBM Plex Sans', Arial, sans-serif); white-space: nowrap; }
@media (max-width: 640px) {
  .panel-results, .panel-preview { padding-right: .8rem; padding-left: .8rem; }
  .panel-picture-grid { gap: .9rem .75rem; }
  #photo-dialog.picture-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); padding-right: .6rem; padding-left: .6rem; }
  .picture-dialog-navigation { gap: .4rem; }
  .picture-dialog-navigation button { padding: .6rem .4rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .panel-picture-open img { transition: none; } }

.panel-camera{margin:1rem 0;padding-top:1rem;border-top:1px solid var(--line)}.panel-camera-note{font-size:.75rem;color:var(--muted)}.panel-camera button,.panel-camera a{display:inline-block;margin:.5rem .5rem .5rem 0;font-size:.8rem}.panel-camera iframe{width:100%;aspect-ratio:16/10;border:0}

.panel-total{font-size:.75rem;color:var(--muted);margin-bottom:.5rem}.panel-picture-pages{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem}.panel-picture-pages button{font-size:.8rem;text-decoration:underline;text-underline-offset:3px}