/* Hanover 1775 viewer. The village fills the window; the panel (left) holds the year, the sun, views and layers;
   the card (right) describes what was clicked; north arrow and scale bar bottom right; credits along the foot. */
:root {
  --bg: #f4efe2; --panel: rgba(250, 246, 236, 0.94); --ink: #2a2116; --muted: #766a57; --line: #d6c9ae;
  --accent: #5d6b3a; --accent-2: #8a4b2a; --field: #fbf8f0;
  --font: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1813; --panel: rgba(30, 27, 21, 0.94); --ink: #ece4d2; --muted: #b2a68f; --line: #4a4233;
          --accent: #a9b97a; --accent-2: #e09a6a; --field: #26221b; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.4 var(--font); }
#view { position: fixed; inset: 0; }
#view canvas { display: block; }
#view canvas.pointing { cursor: pointer; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 22px; font-style: italic;
           color: var(--ink); background: var(--bg); z-index: 20; transition: opacity 0.6s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading.error { font-style: normal; font-size: 15px; padding: 2em; text-align: center; }

#panel { position: fixed; top: calc(12px + var(--sat)); left: 12px; bottom: calc(12px + var(--sab)); width: 300px; overflow-y: auto;
         padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; z-index: 5; }
h1 { font-size: 24px; margin: 0 0 4px; font-weight: normal; letter-spacing: 0.01em; }
h1 em { color: var(--accent-2); }
h2 { font-size: 15px; margin: 2px 0 6px; font-weight: normal; }
.sub { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
section { border-top: 1px solid var(--line); padding: 8px 0; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.date-row { display: flex; align-items: center; gap: 8px; }
.date-row output { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.muted { color: var(--muted); margin: 2px 0 0; font-size: 12.5px; }
.check { display: flex; align-items: center; gap: 6px; margin: 4px 0; cursor: pointer; }
.check .n { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.field { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 6px 0; }
input[type="checkbox"] { accent-color: var(--accent); }
#planOpacity { margin: 0 0 4px 22px; width: calc(100% - 22px); }
.buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
button { font: 13px var(--font); color: var(--ink); background: transparent; border: 1px solid var(--line);
         border-radius: 4px; padding: 3px 8px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.icon { min-width: 2em; text-align: center; }
button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
select { appearance: none; -webkit-appearance: none; width: 11em; font: 13px/1.3 var(--font); color: var(--ink);
         background-color: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 4px 26px 4px 9px; cursor: pointer;
         background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }

#inspect { position: fixed; top: calc(12px + var(--sat)); right: 12px; width: 340px; max-height: calc(100% - 120px - var(--sat) - var(--sab));
           overflow-y: auto; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; z-index: 5; }
#inspect h2 { margin: 0 24px 2px 0; font-size: 18px; }
#inspect .kind { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; font-style: italic; }
#inspect table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
#inspect th { text-align: left; vertical-align: top; color: var(--muted); font-weight: normal; padding: 2px 8px 2px 0; white-space: nowrap; }
#inspect td { padding: 2px 0; overflow-wrap: anywhere; }
#inspect .note { font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
#inspect .src { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
#closeInspect { position: absolute; top: 8px; right: 8px; border: none; font-size: 18px; min-width: 0; }
.conf-high { color: #3d7a3a; } .conf-medium { color: #9a7a22; } .conf-low { color: #a24a2a; }

#north { position: fixed; right: 18px; bottom: calc(60px + var(--sab)); width: 38px; height: 38px; border-radius: 50%; background: var(--panel);
         border: 1px solid var(--line); text-align: center; font-size: 11px; line-height: 1; padding-top: 4px; z-index: 4;
         transform: rotate(var(--heading, 0rad)); }
#north span { display: block; color: var(--accent-2); font-size: 13px; }
#north b { font-weight: normal; }
#scalebar { position: fixed; right: 18px; bottom: calc(30px + var(--sab)); font-size: 12px; display: flex; align-items: center; gap: 6px; z-index: 4;
            background: var(--panel); padding: 2px 6px; border-radius: 4px; }
#scalebarBar { width: var(--bar, 0); height: 6px; border: 1.5px solid var(--ink); border-top: none; }
#credits { position: fixed; left: 324px; right: 150px; bottom: calc(6px + var(--sab)); font-size: 11px; color: var(--muted);
           background: var(--panel); border-radius: 4px; padding: 2px 8px; z-index: 4; }

/* map labels (CSS2D) */
.lbl { font: 12px var(--font); color: #231a10; background: rgba(250, 246, 236, 0.82); padding: 1px 5px; border-radius: 3px;
       white-space: nowrap; pointer-events: none; transform: translateY(-50%); }
.lbl-bldg { font-weight: bold; }
.lbl-lot { font-style: italic; background: none; color: #3b2a14; text-shadow: 0 0 3px #f5efdf, 0 0 6px #f5efdf; }
.lbl-road { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: none; color: #2a2116;
            text-shadow: 0 0 3px #f2ead8, 0 0 5px #f2ead8; }

@media (max-width: 720px) {
  #panel { top: auto; left: 10px; right: 10px; bottom: calc(10px + var(--sab)); width: auto; max-height: 42%; }
  #inspect { left: 10px; right: 10px; width: auto; max-height: 40%; }
  #credits { display: none; }
  #north { bottom: calc(42% + 50px); }
  #scalebar { bottom: calc(42% + 20px); }
}