/* =========================================================================
   /map/ - THE LIVE MAP'S CHROME IN THE CARD GRAMMAR (map-gc.css, 2026-10-05)

   Loaded last (after map-inline.css, theme-default.css, ge-signature.css and
   ge-cards.css). Chrome only: the frame, the rail, the HUD chips, the zoom
   and tilt controls, the layer rows and the dialog take the register's
   faces, corners and type. The terrain, the tiles, Leaflet, the SVG layers,
   map3d.js and every element the scripts bind are untouched; every state
   class (.on, .sel, .live, .mode-3d, .loading, .show) keeps its meaning.
   ========================================================================= */

/* the frame and the rail: the grammar's surface */
#map-viewport{ border-radius:var(--gc-r); border-color:var(--gc-edge-hi); box-shadow:var(--gc-shadow),inset 0 0 90px rgba(0,0,0,.38); }
/* map-inline.css paints the rail with `background:var(--panel) !important`
   (a muddy grey in the light theme); the rail is the map's instrument, so it
   wears the dark glass in both themes - same weight to win, later in order. */
.legend-rail{
  position:relative; border-radius:var(--gc-r); border-color:var(--gc-edge-hi);
  /* the accent wash sits on a DARK base from the very top: a translucent top
     stop let the light theme's page through and left the white rail title on
     pale lavender (measured 2026-10-05) */
  background:linear-gradient(180deg,rgba(var(--sw-accent-rgb),.16) 0%,rgba(var(--sw-accent-rgb),0) 170px),
             linear-gradient(180deg,rgba(16,12,27,.96),rgba(10,8,18,.97)) !important;
  box-shadow:var(--gc-shadow);
}
.legend-rail::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent);
}
@media (prefers-reduced-transparency:reduce){ .legend-rail{ background:rgba(12,9,21,.98) !important; } }

/* the rail's head */
.rail-head{ display:grid; gap:6px; padding:2px 2px 14px; border-bottom:1px solid var(--gc-edge); }
.rail-eyebrow{
  display:flex; align-items:center; gap:10px; color:var(--gc-accent-hi);
  font:600 var(--gc-t-micro)/1 var(--gc-f-mono); letter-spacing:.24em; text-transform:uppercase;
}
.rail-eyebrow::after{ content:""; flex:0 0 34px; height:1px; background:linear-gradient(90deg,var(--gc-accent),transparent); }
.rail-title{ color:#f1ecff; font:700 30px/1 var(--gc-f-display); letter-spacing:.02em; text-transform:uppercase; }

/* section heads: the register's micro-label */
/* ge-signature.css sets every h2 to the display face with !important; a rail
   section head is a micro-label in the register, so it says so with the same
   weight */
.legend-rail h2{
  font-family:var(--gc-f-mono) !important; font-weight:700 !important; font-size:var(--gc-t-micro);
  line-height:1.3; letter-spacing:.18em; color:rgba(236,229,255,.82);
}
.legend-rail h2::before{ box-shadow:none; }
.legend-rail h2 .right-bit{ font-family:var(--gc-f-mono); letter-spacing:.12em; }
.legend-rail .section{ border-bottom-color:var(--gc-edge); }

/* the layer rows: readable names, the register's control corner */
.lyr{ border-radius:var(--gc-r-s); padding:8px 10px; }
.lyr:hover{ border-color:var(--gc-edge); background:rgba(255,255,255,.035); }
.lyr-nm{ font:600 12.5px/1.25 var(--gc-f-ui); letter-spacing:.01em; text-transform:none; }
.lyr-ct{ font-family:var(--gc-f-num); }
.lyr-bbtn{ border-radius:var(--gc-r-pill); font:700 9.5px/1 var(--gc-f-mono); letter-spacing:.12em; padding:8px 4px; }
.aik{ border-radius:var(--gc-r-s); }
.aik-nm{ font-family:var(--gc-f-ui); text-transform:none; letter-spacing:.01em; }
.aik-bbtn{ border-radius:var(--gc-r-pill); font-family:var(--gc-f-mono); }

/* the "you" card and the pin card */
.you-card, .pin-card{ border-radius:var(--gc-r-s); }
.you-card .who{ font-family:var(--gc-f-display); font-weight:700; letter-spacing:.02em; font-size:18px; }
.you-card .sub, .you-card .coord{ font-family:var(--gc-f-mono); }
.you-card .empty{ font:500 12px/1.55 var(--gc-f-ui); letter-spacing:0; color:rgba(236,229,255,.62); }
.you-card .signin-here{ border-radius:var(--gc-r-pill); font:700 10px/1 var(--gc-f-mono); padding:10px 14px; }
.pin-name{ font-family:var(--gc-f-display); letter-spacing:.02em; }
.pin-row button{ border-radius:var(--gc-r-s); }
.pin-edit input, .pin-edit textarea{ border-radius:var(--gc-r-s); }

/* HUD chips over the terrain: glass plates in the register's corner */
.map-hud-tl .row{ border-radius:var(--gc-r-s); font-family:var(--gc-f-mono); }
.map-tag{ padding:7px 14px; border-radius:var(--gc-r-pill) !important; font:600 11px/1 var(--gc-f-mono); letter-spacing:.22em; }
.vp-corner{ border-radius:0; }
.vp-corner.tl{ border-top-left-radius:var(--gc-r); }
.vp-corner.tr{ border-top-right-radius:var(--gc-r); }
.vp-corner.bl{ border-bottom-left-radius:var(--gc-r); }
.vp-corner.br{ border-bottom-right-radius:var(--gc-r); }

/* zoom + tilt controls */
.zoom-cluster{ border-radius:var(--gc-r-pill); padding:4px 6px; border-color:var(--gc-edge-hi); }
.zoom-cluster button{ border-radius:50%; }
.zoom-cluster .zoom-read{ font-family:var(--gc-f-num); }
#tiltWrap{ border-radius:var(--gc-r-pill) !important; }
#tiltWrap .lab{ font-family:var(--gc-f-mono); font-weight:700; letter-spacing:.14em; border-radius:var(--gc-r-pill); }
#tiltVal{ font-family:var(--gc-f-num); }

/* the editor bar (admins) */
#editorBar{ border-radius:var(--gc-r-pill); }
#editorBar button{ border-radius:var(--gc-r-pill); font-family:var(--gc-f-mono); }

/* the dialog: the framework's dialog shape */
.modal-scrim{ background:rgba(7,5,14,.72); }
/* the map's dialog keeps light ink (--bone) in both themes, so it keeps its
   dark face in both: !important outranks ge-cards.css's site-wide
   html.gc .modal-card pass, which would paint the light face here */
.modal-card{
  border-radius:var(--gc-r); border-color:var(--gc-edge-hi);
  background:linear-gradient(180deg,rgba(var(--sw-accent-rgb),.12) 0%,rgba(20,15,33,.97) 30%,rgba(12,9,21,.98) 100%) !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  color:var(--bone);
}
.modal-card::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent);
}
.modal-corner{ display:none; }
.modal-title{ font:700 22px/1.1 var(--gc-f-display); letter-spacing:.02em; }
.modal-title::before{ box-shadow:none; }
.modal-body input{ border-radius:var(--gc-r-s); }
.modal-btn{ border-radius:var(--gc-r-s); font:700 10.5px/1 var(--gc-f-mono); letter-spacing:.14em; min-height:38px; }
.modal-btn.primary{ color:#fff; border-color:rgba(198,166,255,.75); background:linear-gradient(180deg,#b184ff,#8a4df0); }
.modal-btn.primary:hover{ background:linear-gradient(180deg,#bc95ff,#9459f5); box-shadow:none; }

/* tooltips and toasts */
.tooltip, .map-toast{ border-radius:var(--gc-r-s); }