/* giving-map.css — page chrome for the Giving Map: theme tokens, the plate
 * frame, zoom controls, tooltip/pinned-card/notes chrome.
 * Extracted VERBATIM from map.html's inline style block (quiet split,
 * phase 3). Mark-vocabulary rules live in giving-map-marks.css, which must
 * load AFTER this file — the two files concatenate to the original block,
 * and rule ORDER within and across them is load-bearing. */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root, [data-theme="dark"] {
  --page: #0a0f18;
  --ink: #d7e3ec;
  --ink-2: #8fa5b5;
  --sea: #0e1c2b;
  --sea-line: rgba(140, 190, 220, 0.07);
  --coast-ring: rgba(125, 180, 215, 0.12);
  --land: #2e3138;
  --land-fed: #223341;
  --land-daf: #223243;
  --condo-private: #6f5a35;
  --terrain: rgba(118, 152, 124, 0.34);
  --coast: #5d8299;
  --river: #1d3850;
  --mtn: #7d8fa0;
  --mtn-snow: #d8e5ee;
  --mtn-shade-op: 0.16;
  --label-ink: #d3dfe8;
  --label-halo: rgba(10, 18, 28, 0.85);
  --value-ink: #92a9ba;
  --sea-ink: #6d90a6;
  --region-ink: rgba(160, 195, 215, 0.30);
  --route: #d08a5e;
  --route-closed: #d06455;
  --lane-daf: #d9b04f;
  --lane-ind: #49c2a0;
  --lane-fdn: #3d6fb2;
  --lane-corp: #9d7fd6;
  --lane-beq: #bf537c;
  --lane-fed: #8fa3b5;
  --lane-remit: #d9c9a3;
  --land-remit: #3a372f;
  --land-c4: #2e3542;
  --gold: #e3bd57;
  --gold-stroke: #6e5716;
  --city-fill: #101720;
  --city-stroke: #cfe0ec;
  --cartouche-bg: #131d2a;
  --cartouche-edge: #4d6c82;
  --tip-bg: #101b28;
  --tip-edge: #37506a;
  --grain-opacity: 0.05;
  --tree-fill: rgba(110, 154, 120, 0.44);
  --tree-line: rgba(160, 200, 170, 0.75);
  --struct-line: #a4b8c8;
  --struct-fill: rgba(12, 20, 30, 0.62);
  --land-ea: #414654;
  --sector-fed: #1f3d38;
  --sector-private: #4d4636;
  --lagoon: #1b3d4e;
  --platform-wall: #7c98ab;
  --deck-grid: rgba(150, 185, 205, 0.11);
}
[data-theme="light"] {
  --page: #eef0e9;
  --ink: #2c3a44;
  --ink-2: #5c707d;
  --sea: #bcd9e6;
  --sea-line: rgba(60, 110, 140, 0.10);
  --coast-ring: rgba(255, 255, 255, 0.45);
  --land: #ece4c8;
  --land-fed: #d9e2d6;
  --land-daf: #e3e6d8;
  --condo-private: #ddbe89;
  --terrain: rgba(150, 165, 115, 0.34);
  --coast: #74929f;
  --river: #9dc3d4;
  --mtn: #6a7263;
  --mtn-snow: #fbfaf2;
  --mtn-shade-op: 0.30;
  --label-ink: #33414a;
  --label-halo: rgba(238, 236, 218, 0.85);
  --value-ink: #5a6f7c;
  --sea-ink: #517689;
  --region-ink: rgba(60, 90, 110, 0.32);
  --route: #a3543a;
  --route-closed: #b3403a;
  --lane-daf: #9c7d1e;
  --lane-ind: #0f8a72;
  --lane-fdn: #255e9f;
  --lane-corp: #8465d2;
  --lane-beq: #d15e94;
  --lane-fed: #5a6e7e;
  --lane-remit: #6b5b40;
  --land-remit: #ecddb6;
  --land-c4: #d3d8e2;
  --gold: #e0ac2e;
  --gold-stroke: #5c4610;
  --city-fill: #fffdf4;
  --city-stroke: #3c4a52;
  --cartouche-bg: #f2eeda;
  --cartouche-edge: #97867a;
  --tip-bg: #fbf8ec;
  --tip-edge: #a9998b;
  --grain-opacity: 0.075;
  --tree-fill: rgba(148, 168, 106, 0.38);
  --tree-line: rgba(92, 112, 68, 0.65);
  --struct-line: #4f5a52;
  --struct-fill: rgba(105, 115, 95, 0.42);
  --land-ea: #f6efd7;
  --sector-fed: #cbe0d0;
  --sector-private: #e5d1a9;
  --lagoon: #cde9e0;
  --platform-wall: #67858f;
  --deck-grid: rgba(55, 95, 115, 0.13);
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  padding: 90px 0 60px;
}

/* the frame takes the full viewport width and the shorter of the plate's
   natural height (from width × 1640/2400) or the viewport-capped height.
   On standard monitors the plate ratio wins and the frame looks exactly as
   before; on wide or ultrawide monitors the viewport-height cap bites
   first, so the frame stretches wider than the plate — the JS camera
   crops the world to the element's rendered aspect (same behavior as
   short laptop windows) and the south shore stays reachable by drag. */
.map-frame { position: relative; margin: 0; width: 100%; height: min(calc(100vw * 1640 / 2400), calc(100vh - 150px)); height: min(calc(100vw * 1640 / 2400), calc(100dvh - 150px)); overflow: hidden; user-select: none; -webkit-user-select: none; }
.map-frame:fullscreen { width: 100vw; height: 100vh; background: var(--sea); }
.map-frame:-webkit-full-screen { width: 100vw; height: 100vh; background: var(--sea); }
svg#map { display: block; width: 100%; height: 100%; background: var(--sea); cursor: grab; user-select: none; -webkit-user-select: none; }
svg#map:active { cursor: grabbing; }

.zoom-ctl { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 5px; z-index: 5; }
.zoom-ctl button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--cartouche-edge); background: var(--cartouche-bg); color: var(--ink); font-size: 18px; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.zoom-ctl button:hover { border-color: var(--ink-2); }
#zfull { display: flex; align-items: center; justify-content: center; }
.zfull-icon { display: block; }
.zfull-exit { display: none; }
:fullscreen .zfull-icon { display: none; }
:fullscreen .zfull-exit { display: block; }
:-webkit-full-screen .zfull-icon { display: none; }
:-webkit-full-screen .zfull-exit { display: block; }