* { box-sizing: border-box; }
body.viewshed-page { margin:0; padding:0 24px; --color-accent:#cb2a42; }
:root[data-theme="dark"] body.viewshed-page { --color-accent:#ed7184; }
main, .site-header { max-width:none; margin:auto; }
body.viewshed-page .site-header { max-width:none; padding:0; margin:16px auto 10px; display:flex; justify-content:space-between; align-items:center; }
.site-header>div { display:flex; align-items:center; gap:30px; }
.prototype, .eyebrow { font-size:11px; letter-spacing:.12em; }
body.viewshed-page .intro { max-width:none; }
.intro { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; padding:0 0 16px; }
.intro > .eyebrow { grid-column:1/-1; margin:0 0 5px; }
body.viewshed-page .intro h1 { grid-column:1; grid-row:2; font-size:32px; line-height:1.15; margin:0 0 6px; }
.intro > p:nth-of-type(2) { grid-column:2; grid-row:2/4; align-self:center; margin:0; font-size:14px; line-height:1.6; }
.intro p:last-child { grid-column:1; grid-row:3; margin:0; font-size:12px; line-height:1.6; }
.experience { display:grid; grid-template-columns:var(--map-size,65svh) minmax(0,1fr); width:100%; height:calc(var(--map-size,65svh) + 2px); align-items:stretch; border:1px solid var(--site-line); }
.control-panel { min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; border-left:1px dashed var(--site-line); }
.control-panel > .transport, .control-panel > .readouts, .control-panel > .profile-wrap { flex-shrink:0; }
.control-panel > .route-photos { flex:1; min-height:0; }
#map { position:relative; width:100%; aspect-ratio:1; height:auto; min-width:0; background:#fbfbfb; color:#fafafa; overflow:hidden; }
#map canvas { display:block; width:100%; height:100%; }
.map-heading, .north, .map-legend, .map-source { position:absolute; z-index:1; pointer-events:none; }
.map-heading { top:24px; left:24px; right:24px; display:flex; justify-content:space-between; font-size:12px; letter-spacing:.08em; }
.north { top:65px; right:26px; text-align:center; line-height:1.5; font-size:18px; }
.map-legend { bottom:42px; left:24px; display:flex; gap:18px; font-size:11px; }
.map-legend span { display:flex; gap:7px; align-items:center; }
.map-legend i { width:13px; height:10px; display:inline-block; }
.visible-swatch { background:#8dc98f; border:1px solid #294a34; }
.route-swatch { background:#ed7184; height:3px!important; }
.unknown-swatch { background:repeating-linear-gradient(135deg,#fbfbfb 0 3px,#d9dfdd 3px 4px); border:1px solid #7b858e; }
.map-heading span, .north, .map-legend, .map-source { background:#242728; padding:3px 5px; border-radius:2px; }
.map-source { bottom:12px; left:24px; right:12px; font-size:10px; line-height:1.4; }
#loading { position:absolute; inset:40% 10% auto; text-align:center; z-index:3; padding:18px; background:#242728; }
.transport { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px 14px; padding:14px 18px; border-bottom:1px dashed var(--site-line); }
.transport .scrub { grid-column:1/-1; grid-row:1; }
.transport .speed { grid-column:1/-1; grid-row:3; justify-content:space-between; }
button, select { font:inherit; padding:9px 13px; cursor:pointer; }
button:disabled, select:disabled { cursor:wait; }
.scrub { flex:1; min-width:0; }
.scrub label { font-size:11px; display:flex; justify-content:space-between; margin-bottom:7px; }
input[type=range] { width:100%; accent-color:var(--color-accent); cursor:pointer; }
.speed { font-size:11px; display:flex; align-items:center; gap:10px; }
.readouts { padding:16px 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
.readouts span { display:block; font-size:11px; margin-bottom:4px; color:var(--site-muted); }
.readouts strong { font-size:22px; font-weight:400; }
.profile-wrap { padding:0 18px 14px; }
#profile { width:100%; height:60px; margin-top:6px; overflow:visible; }
#profile-area { fill:var(--site-line); fill-opacity:.18; }
#profile-line { fill:none; stroke:var(--site-muted); stroke-width:2; }
#profile-cursor { stroke:var(--color-accent); stroke-dasharray:3 3; stroke-width:2; }
#profile-dot { fill:var(--color-accent); stroke:var(--site-surface); stroke-width:2; }
.profile-labels { display:flex; justify-content:space-between; font-size:11px; }
.photo-profile-plot { position:relative; margin-top:6px; }
.photo-profile-plot #profile { display:block; margin-top:0; }
.photo-profile-plot + .profile-labels { margin-top:12px; }
.photo-map-markers, .photo-profile-markers { position:absolute; inset:0; pointer-events:none; }
.photo-map-markers { display:contents; }
.photo-map-markers .photo-pin { z-index:2; }
.photo-pin { position:absolute; display:grid; place-items:center; width:32px; height:32px;
  min-width:32px; min-height:32px; padding:4px; border:0; background:transparent;
  box-shadow:none; line-height:1; transform:translate(-50%,-50%); pointer-events:auto;
  touch-action:manipulation; cursor:pointer; }
.photo-pin-badge { display:grid; place-items:center; width:24px; height:24px;
  border:2px solid #34434d; border-radius:50%; background:#fafafa; color:#34434d;
  font:700 11px/1 var(--site-font); box-shadow:0 1px 3px #0003; }
.photo-pin:hover { background:transparent; }
.photo-pin:hover .photo-pin-badge { border-color:#cb2a42; }
.photo-pin[aria-pressed="true"] .photo-pin-badge { background:#cb2a42; color:#fff; border-color:#fff; }
.photo-pin:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:50%; }
.photo-pin[hidden] { display:none; }
.route-photos { padding:12px 18px 14px; border-top:1px dashed var(--site-line); }
.route-photos h2 { margin:0 0 10px; font-weight:400; }
.route-photos figure { margin:0; border:0; }
.route-photos img { display:block; width:100%; height:var(--photo-height,170px); object-fit:contain; background:var(--site-line); }
.route-photos [hidden] { display:none; }
.route-photos figcaption { padding-top:8px; font-size:11px; line-height:1.5; }
.photo-title, .photo-context, .photo-credit { display:block; }
.photo-context, .photo-note, .photo-empty { color:var(--site-muted); }
.photo-note { margin:8px 0 0; font-size:10px; line-height:1.5; }
.photo-empty, .photo-error { font-size:12px; line-height:1.6; }
.notes { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:30px 0; }
.notes h2 { font-size:15px; }
.notes p, .site-footer { font-size:12px; line-height:1.8; }
.site-footer { padding:15px 0 30px; border-top:1px dashed var(--site-line); }
:focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
body.capture { padding:0; background:#fbfbfb; }
body.capture>.site-header, body.capture .intro, body.capture .transport,
body.capture .readouts, body.capture .profile-wrap, body.capture .notes,
body.capture .site-footer, body.capture>.skip-link { display:none; }
body.capture main { max-width:none; }
body.capture .experience { display:block; width:100%; height:auto; margin:0; border:0; }
body.capture .control-panel, body.capture .photo-map-markers { display:none; }
body.capture #map { min-height:0; height:100vh; aspect-ratio:auto; }
@media(min-width:901px) and (max-height:850px) {
  .transport { padding:10px 14px; gap:8px 12px; }
  .transport button, .transport select { padding:6px 10px; font-size:12px; }
  .readouts { padding:10px 14px; gap:8px 16px; }
  .readouts span { font-size:10px; margin-bottom:2px; }
  .readouts strong { font-size:20px; line-height:1.5; }
  .profile-wrap { padding:0 14px 10px; }
  #profile { height:44px; margin-top:4px; }
  .route-photos { padding:8px 14px; }
  .route-photos figure { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; align-items:start; }
  .route-photos img { height:80px; }
  .route-photos h2 { margin-bottom:6px; font-size:10px; line-height:1.3; }
  .route-photos figcaption { padding-top:0; font-size:10px; line-height:1.4; }
  .route-photos .photo-note { display:none; }
}
@media(min-width:901px) and (max-height:650px) {
  .readouts { padding:6px 14px; gap:6px 16px; }
  .readouts span { font-size:9px; }
  .readouts strong { font-size:16px; }
  .profile-wrap .eyebrow { font-size:9px; line-height:1.2; }
  #profile { height:32px; }
  .photo-profile-plot + .profile-labels { margin-top:8px; font-size:10px; }
  .route-photos img { height:64px; }
  .route-photos figcaption { font-size:9px; line-height:1.35; }
}
.control-panel.wide-dashboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); }
.wide-dashboard > .transport { grid-column:1; grid-row:1; }
.wide-dashboard > .readouts { grid-column:2; grid-row:1; border-left:1px dashed var(--site-line); border-bottom:1px dashed var(--site-line); }
.wide-dashboard > .profile-wrap { grid-column:1/-1; grid-row:2; padding-top:10px; }
.wide-dashboard > .route-photos { grid-column:1/-1; grid-row:3; display:flex; flex-direction:column; }
.control-panel.wide-dashboard .route-photos figure { display:flex; flex-direction:column; flex:1; min-height:0; }
.control-panel.wide-dashboard .route-photos img { flex:1; width:100%; height:0; min-height:64px; background:var(--site-hover); }
.control-panel.wide-dashboard .route-photos figcaption { flex-shrink:0; padding-top:8px; font-size:11px; line-height:1.5; }
.control-panel.wide-dashboard .route-photos h2 { flex-shrink:0; }
.control-panel.wide-dashboard .route-photos .photo-note { display:block; flex-shrink:0; }
@media(min-width:901px) and (max-height:650px) {
  .control-panel.wide-dashboard .route-photos figcaption { font-size:9px; line-height:1.35; }
  .control-panel.wide-dashboard .route-photos .photo-note { display:none; }
}
@media(max-width:900px) {
  .intro { display:block; padding-bottom:16px; }
  .intro > p:nth-of-type(2) { margin:8px 0; }
  .experience { width:100%; height:auto; grid-template-columns:minmax(0,1fr); }
  .control-panel { height:auto; border-left:0; border-top:1px dashed var(--site-line); }
  .transport { grid-template-columns:auto minmax(0,1fr) auto auto; }
  .transport .scrub { grid-column:2; grid-row:1; }
  .transport .speed { grid-column:3; grid-row:1; }
  .readouts { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:650px) {
  body.viewshed-page { padding:0 12px; }
  .prototype { display:none; }
  .intro { padding-top:4px; }
  .transport { grid-template-columns:1fr 1fr; gap:14px 12px; padding:18px 12px; }
  .transport .scrub { grid-column:1/-1; grid-row:1; }
  .transport .speed { grid-column:1/-1; grid-row:3; }
  .readouts { grid-template-columns:1fr 1fr; padding:20px 12px; }
  .readouts strong { font-size:21px; }
  .notes { grid-template-columns:1fr; gap:12px; }
  .map-heading { top:16px; left:14px; right:14px; font-size:10px; }
  .map-legend { left:14px; gap:9px; font-size:9px; bottom:54px; }
  .map-source { left:14px; font-size:9px; }
  .north { right:14px; }
  .profile-wrap { padding-left:12px; padding-right:12px; }
  .map-heading span:first-child { max-width:200px; }
}