.viewer-layout { height: calc(100dvh - 66px); display: grid; grid-template-columns: 330px 1fr 330px; }
.left-panel, .right-panel { z-index: 2; padding: var(--space-4); overflow: auto; background: var(--surface); border-right: 1px solid var(--line); }
.right-panel { border-right: 0; border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.panel-heading.compact { align-items: center; } .panel-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.045em; } .panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.comment-filter { margin-bottom: var(--space-3); }.comment-list { display: grid; gap: var(--space-2); }.comment-card { display: flex; gap: 10px; padding: var(--space-3); background: var(--surface-soft); border: 1px solid transparent; border-radius: var(--radius-row); }.comment-card:hover { border-color: #c9d8ef; }.comment-card strong { font-size: 14px; }.comment-card p { margin: 5px 0 7px; color: var(--muted); font-size: 13px; line-height: 1.45; }.comment-card small { color: var(--muted); font-size: 11px; }.comment-pin, .map-marker { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; color: #fff; background: var(--danger); border-radius: 50% 50% 50% 4px; font-size: 12px; font-weight: 800; transform: rotate(-45deg); }.comment-pin { transform: rotate(45deg); }.comment-pin + div { min-width: 0; }
.map-stage { min-width: 0; background: #e6edf1; }.map-surface { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(37deg, transparent 0 46%, rgb(255 255 255 / 36%) 46% 47%, transparent 47% 100%), linear-gradient(117deg, transparent 0 49%, rgb(255 255 255 / 44%) 49% 50%, transparent 50% 100%), #dce8df; background-size: 170px 170px, 230px 230px; transition: opacity .18s, background .18s; }.map-surface.osm { background-color: #e8e5dc; }.map-surface.satellite { background: radial-gradient(circle at 30% 40%, #627954 0 8%, transparent 8% 14%), radial-gradient(circle at 70% 60%, #6f7a4f 0 7%, transparent 7% 13%), #506347; background-size: 160px 150px, 210px 200px; }.network { position: absolute; height: 8px; border-radius: 999px; box-shadow: 0 0 0 2px rgb(255 255 255 / 60%); transform-origin: left center; }.network-a { top: 41%; left: -6%; width: 118%; background: #2377db; transform: rotate(-11deg); }.network-b { top: 62%; left: 12%; width: 81%; background: #ee8c29; transform: rotate(23deg); }.network-c { top: 16%; left: 35%; width: 91%; background: #8466db; transform: rotate(61deg); }.network-d { top: 57%; left: 0; width: 93%; background: #6daf75; transform: rotate(-47deg); }.road-label { position: absolute; padding: 3px 6px; color: #4f5c6d; background: rgb(255 255 255 / 86%); border-radius: 4px; font-size: 11px; font-weight: 800; }.label-a { top: 40%; left: 49%; }.label-b { top: 64%; left: 30%; }.map-marker { position: absolute; top: 47%; left: 55%; transform: rotate(-45deg); box-shadow: var(--shadow-float); }.map-marker::first-letter { transform: rotate(45deg); }.map-controls { position: absolute; top: var(--space-4); left: var(--space-4); display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-float); }.map-controls .button { border-radius: 0; }.map-note { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); padding: 8px 12px; color: var(--muted); background: rgb(255 255 255 / 92%); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.layer-section { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }.layer-parent, .layer-row { display: flex; align-items: center; gap: 9px; min-height: 36px; }.layer-parent strong { font-size: 14px; }.chevron { width: 20px; padding: 0; color: var(--muted); background: transparent; }.layer-row { padding-left: 29px; color: var(--muted); font-size: 14px; }.swatch { width: 10px; height: 10px; border-radius: 99px; }.blue { background: #2377db; }.orange { background: #ee8c29; }.violet { background: #8466db; }.red { background: var(--danger); }.basemap { display: grid; gap: var(--space-3); padding-top: var(--space-4); }.basemap .eyebrow { margin: 0; }.base-buttons { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; background: #edf1f6; border-radius: var(--radius-tight); }.base-option { min-height: 32px; color: var(--muted); background: transparent; border-radius: 6px; font-size: 12px; font-weight: 750; }.base-option.active { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgb(31 47 70 / 12%); }.field + .field { margin-top: var(--space-3); } input[type="range"] { accent-color: var(--accent); }
dialog { width: min(440px, calc(100vw - 32px)); padding: 0; background: transparent; border: 0; } dialog::backdrop { background: rgb(29 37 48 / 34%); backdrop-filter: blur(3px); }.profile-form { display: grid; gap: var(--space-4); padding: var(--space-5); }.profile-form h2 { margin: -10px 0 0; letter-spacing: -.04em; }.profile-form p { margin: -8px 0 0; line-height: 1.5; }.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); }
@media (max-width: 980px) { .viewer-layout { grid-template-columns: 280px 1fr; }.right-panel { position: absolute; right: 0; top: 66px; bottom: 0; width: 310px; box-shadow: var(--shadow-float); }.right-panel.is-hidden { display: none; } }.viewer-name { color: var(--muted); font-size: 13px; font-weight: 700; } @media (max-width: 700px) { .viewer-layout { grid-template-columns: 1fr; }.left-panel { position: absolute; bottom: 0; left: 0; right: 0; height: 222px; border-top: 1px solid var(--line); border-right: 0; box-shadow: var(--shadow-float); }.left-panel .panel-heading { margin-bottom: 8px; }.left-panel .panel-heading h1 { font-size: 18px; }.comment-filter { display: none; }.right-panel { width: min(340px, calc(100vw - 16px)); top: 74px; right: 8px; bottom: auto; max-height: 70dvh; border: 1px solid var(--line); border-radius: var(--radius-card); }.map-note { display: none; }.viewer-name { display: none; } }