/* Under Toronto: layout only. Controls, type and colour come from the kit (kit/, a pinned
   release, never edited). */
:root {
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: #000; color: var(--e-ink); font-family: var(--e-font);
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
#map { position: absolute; inset: 0; }
body:not(.lg) .e-pane[data-glass] { background: var(--e-pane); -webkit-backdrop-filter: var(--e-pane-blur); backdrop-filter: var(--e-pane-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 30px rgba(0, 0, 0, 0.35); }
.maplibregl-ctrl-attrib { background: rgba(0,0,0,0.42) !important; font-size: 8px !important; }
.maplibregl-ctrl-top-right { margin-top: var(--safe-top); margin-right: var(--safe-right); z-index: 1 !important; }
.maplibregl-ctrl-attrib a { color: rgba(255,255,255,0.5) !important; }
#status { position: absolute; inset: 0; display: grid; place-items: center; z-index: 40; padding: 24px; text-align: center;
  font: 400 var(--e-t-label)/1.3 var(--e-font); color: var(--e-ink-3); background: #000; transition: opacity 0.6s ease; }
#status.gone { opacity: 0; pointer-events: none; }
#ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.6s ease 0.1s; }
#ui.ready { opacity: 1; }
#ui > * { pointer-events: auto; }
[hidden] { display: none !important; }

/* The top-left stack: the title pane, then (only when the app has one) the way back to the
   site under it. The back button always goes below what is already there (Blair, 2026-10-12). */
#topleft { position: absolute; top: calc(var(--safe-top) + 12px); left: calc(var(--safe-left) + 12px); display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px; pointer-events: none; }
#topleft > * { pointer-events: auto; }
#top { max-width: min(22rem, calc(100vw - 84px)); }
#top h1 { margin: 0; font: 800 22px/1.15 var(--e-font); letter-spacing: -0.01em; }
#top p { margin: 4px 0 0; font: 400 14px/1.35 var(--e-font); color: var(--e-ink-2); min-height: 2.7em; }

#bottom { position: absolute; left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 12px);
  max-width: 560px; margin: 0 auto; display: grid; row-gap: 12px; }
/* Four independent switches. One that is on is stained the colour of what it shows (the
   kit's stained glass, data-tint, set in js/app.js); without the shader it is a lit well. */
#layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
#layers button { padding: 0 2px; font-size: 14px; min-width: 0; }
body:not(.lg) #layers button[aria-pressed="true"], #layers button[aria-pressed="true"][data-glass-off] { background: rgba(255, 255, 255, 0.28); }
#key { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 13px/1.3 var(--e-font); color: var(--e-ink-2); min-height: 1.3em; }
#key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#key i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
#key i.dot { width: 8px; height: 8px; border-radius: 50%; }
#key i.ramp { width: 44px; }

#sheet { position: absolute; left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); bottom: calc(var(--safe-bottom) + 12px);
  max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
#close svg { width: 18px; height: 18px; }
#sheet-body h2 { margin: 6px 0 8px; font: 700 18px/1.25 var(--e-font); }
#sheet-body p { margin: 0 0 12px; font: 400 15px/1.4 var(--e-font); color: var(--e-ink-2); }
#sheet-body a.e-btn { text-decoration: none; }