:root { --ink:#172127; --muted:#58666d; --paper:#f6f5f1; --panel:#fff; --line:#d9ddd9; --accent:#006a61; --accent-dark:#004d46; --danger:#9e2f22; --shadow:0 10px 26px rgba(20,35,32,.08); }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; line-height:1.45; }
body { margin:0; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:#005d88; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #e89d00; outline-offset:3px; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:#fff; padding:.7rem; z-index:50; }
.skip-link:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem max(1.25rem,calc((100vw - 1440px)/2)); background:#172127; color:#fff; border-bottom:5px solid #00a18f; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(1.45rem,3vw,2rem); margin-bottom:.05rem; } h2 { font-size:1.25rem; margin-bottom:.6rem; } h3 { font-size:1.05rem; margin-bottom:.55rem; }
.site-label,.eyebrow,.muted,.help-text,.character-count,.map-detail { color:var(--muted); }
.site-header .site-label,.site-header .eyebrow { color:#dce5e3; }
.eyebrow { margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.09em; font-size:.72rem; font-weight:bold; }
.header-actions,.map-actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; }
.button { border:1px solid var(--accent); border-radius:3px; background:var(--accent); color:#fff; padding:.58rem .85rem; cursor:pointer; font-weight:bold; text-decoration:none; text-align:center; }
.button:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.button:disabled { cursor:not-allowed; opacity:.55; }
.button-secondary { color:var(--ink); background:#fff; border-color:#aab6b4; } .button-secondary:hover { color:#fff; }
.button-danger { background:var(--danger); border-color:var(--danger); }
.app-status,.app-error { max-width:1440px; margin:0 auto; padding:.7rem 1.25rem; font-size:.92rem; }
.app-status:empty { display:none; }.app-error { background:#fff1ed; border-bottom:1px solid #f0c4bc; color:#752117; }
.layout { max-width:1440px; margin:0 auto; padding:1.5rem 1.25rem 3rem; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1.5rem; }
.map-section,.gallery-section { grid-column:1/-1; }.notes-section { grid-column:2; grid-row:2; align-self:start; }.gallery-section { grid-column:1; grid-row:2; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }.section-heading h2 { margin:0; }
.panel,.google-unavailable { background:var(--panel); border:1px solid var(--line); border-radius:5px; box-shadow:var(--shadow); padding:1rem; }
.google-unavailable { border-left:5px solid var(--accent); }.google-unavailable h3 { margin-top:0; }
.key-row { display:grid; grid-template-columns:auto minmax(13rem,1fr) auto; align-items:center; gap:.65rem; max-width:800px; }.key-row label { font-weight:bold; }.key-row input { min-width:0; }
input,textarea { width:100%; border:1px solid #9eaaa8; border-radius:3px; padding:.55rem; background:#fff; color:var(--ink); } textarea { resize:vertical; }
.remember-key { display:flex; align-items:center; gap:.55rem; margin-top:.8rem; font-size:.88rem; }.remember-key input { width:auto; flex:none; }
.help-text,.character-count,.map-detail { font-size:.84rem; margin:.55rem 0 0; }.character-count { text-align:right; }
.google-canvas { position:relative; min-height:520px; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:#e9eeec; }.map-pane,.streetview-pane { width:100%; height:520px; }.map-pane gmp-map-3d { display:block; width:100%; height:100%; }.streetview-pane { border-top:1px solid var(--line); }
.gallery-layout { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:1rem; }.photo-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.65rem; align-content:start; }
.photo-card { width:100%; border:2px solid transparent; background:#fff; padding:0; border-radius:4px; overflow:hidden; cursor:pointer; text-align:left; }.photo-card[aria-current="true"] { border-color:var(--accent); }.photo-card img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:#dde3df; }.photo-card span { display:block; padding:.35rem; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-detail { min-width:0; padding:0; overflow:hidden; }.selected-photo { display:block; width:100%; max-height:430px; object-fit:contain; background:#202827; }.photo-detail-content { padding:1rem; }.photo-detail-content h3 { overflow-wrap:anywhere; }.metadata { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1rem; margin:1rem 0; }.metadata div { min-width:0; }.metadata dt { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }.metadata dd { margin:0; overflow-wrap:anywhere; }.photo-description { white-space:pre-line; }.photo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:1rem 0; }
.recovery-panel { margin-top:1rem; padding:1rem; background:#fff7df; border-left:4px solid #b66d00; }.recovery-panel p { margin:.35rem 0 .8rem; }
dialog { width:min(96vw,1100px); max-height:94vh; padding:1rem; border:0; border-radius:5px; box-shadow:0 20px 70px rgba(0,0,0,.45); }dialog::backdrop { background:rgba(0,0,0,.65); }.dialog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }.dialog-toolbar h2 { margin:0; }dialog img { display:block; max-width:100%; max-height:74vh; margin:auto; }dialog p { margin:.7rem 0 0; }
@media (max-width:900px) { .layout { display:block; }.map-section,.notes-section,.gallery-section { margin-bottom:1.5rem; }.gallery-layout { grid-template-columns:1fr; }.notes-section { order:0; }.photo-gallery { grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); }.map-pane { min-height:400px; height:400px; }.streetview-pane { height:400px; } }
@media (max-width:620px) { .site-header { display:block; }.header-actions,.map-actions { justify-content:flex-start; margin-top:1rem; }.key-row { grid-template-columns:1fr; }.map-pane { min-height:320px; height:320px; }.streetview-pane { height:320px; }.section-heading { align-items:start; flex-direction:column; }.metadata { grid-template-columns:1fr; }.header-actions .button,.map-actions .button { font-size:.88rem; } }
.hosted-viewer .key-row,.hosted-viewer .remember-key,.hosted-viewer #google-key-status,.hosted-viewer #forget-google-key { display:none; }