/* Shell surfaces that float over the map or the whole app: storage modal, centre crosshair,
   Web-Mercator grid labels, MapLibre chrome tint. */

/* ---- Shared application modal (lib/modal.js) --------------------------- */
.app-modal-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(8,12,16,.52);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.app-modal{width:min(560px,100%);padding:32px 34px;text-align:center;color:var(--ink);
  background:color-mix(in srgb,var(--bg-2) 96%,black);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.55);font:16px/1.55 var(--font)}
.app-modal h2{margin:0 0 14px;font-size:27px;line-height:1.25;color:var(--ink)}
.app-modal p{margin:0 0 22px;font-size:19px;line-height:1.6;color:var(--ink-dim)}
.app-modal>a{display:inline-block;margin-bottom:24px;font-size:17px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.app-modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.app-modal-actions button{padding:12px 22px;border:0;border-radius:10px;cursor:pointer;
  color:var(--ink);background:var(--panel);font:600 16px var(--font)}
.app-modal-actions button.is-primary{color:var(--accent-ink);background:var(--accent)}
.app-modal-actions button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- Storage panel — a modal over the loaded app shell (folder-panel.js) ----
   First-run = the .ss-wizard variant: a BIG two-step sell of the local/offline
   experience (James 2026-07-06 — large type, icons, benefit-led; the app is
   optimized for local, every convert stops hitting the CDN). Management / lost /
   stale states keep the compact card. */
#storage-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(7,13,9,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  color:var(--ink);font:15px/1.55 var(--font)}
#storage-overlay[hidden]{display:none}
#storage-card{max-width:420px;width:100%;max-height:92vh;overflow:auto;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:28px 32px;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
#storage-card .ss-icon{font-size:30px;line-height:1;margin-bottom:12px}
#storage-card h2{margin:0 0 10px;font-size:20px;font-weight:650}
#storage-card p{margin:0 0 16px;opacity:.82}
#storage-card .ss-status{margin-bottom:2px;opacity:1;font-weight:600}
#storage-card .ss-size{margin-bottom:18px;opacity:.6;font-size:13px}
#storage-card .ss-note{font-size:13px;opacity:.6;margin:2px 0 18px}
#storage-card .ss-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
#storage-card button{font:inherit;font-weight:600;border:0;border-radius:10px;
  padding:11px 24px;cursor:pointer;transition:filter .15s}
#storage-card .ss-primary{color:var(--accent-ink);background:var(--accent)}
#storage-card .ss-primary:hover{filter:brightness(1.08)}
#storage-card .ss-ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  padding:8px 14px;font-size:13px}
#storage-card .ss-ghost:hover{filter:brightness(1.15)}
#storage-card button:disabled{opacity:.6;cursor:default}
#storage-card .ss-dismiss{display:block;margin:14px auto 0;background:none;color:var(--ink-dim);
  font-weight:400;font-size:14px;padding:4px 8px}
#storage-card .ss-dismiss:hover{color:var(--ink)}
#storage-card .ss-link{display:block;margin:0 auto 6px;background:none;border:0;color:var(--accent);
  font-weight:500;font-size:13px;cursor:pointer;padding:4px}
#storage-card .ss-link:hover{text-decoration:underline}

/* -- First-run wizard variant: bigger everything, benefit rows, compare grid -- */
#storage-card.ss-wizard{max-width:600px;padding:40px 48px 32px;font-size:17px;line-height:1.6;
  border-color:#345a41;
  background:linear-gradient(180deg,#16281d 0%,var(--bg-2) 42%);
  animation:ss-pop .28s ease-out}
@keyframes ss-pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){#storage-card.ss-wizard{animation:none}}
#storage-card.ss-wizard h2{font-size:30px;line-height:1.2;font-weight:700;margin:0 0 18px;
  letter-spacing:.2px}
#storage-card.ss-wizard .ss-hero{margin:0 auto 14px;width:120px}
#storage-card.ss-wizard .ss-hero svg{width:100%;height:auto;display:block}
#storage-card.ss-wizard .ss-eyebrow{font-size:13.5px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--accent-bright);opacity:.9;margin:0 0 6px}
#storage-card.ss-wizard .ss-icon-lg{font-size:52px;margin-bottom:8px}
#storage-card.ss-wizard .ss-benefits{display:flex;flex-direction:column;gap:14px;
  text-align:left;margin:0 auto 20px;max-width:460px}
#storage-card.ss-wizard .ss-benefit{display:flex;gap:14px;align-items:center;font-size:17px}
#storage-card.ss-wizard .ss-benefit strong{color:var(--ink);font-weight:700}
#storage-card.ss-wizard .ss-benefit span:last-child{opacity:.85}
#storage-card.ss-wizard .ss-benefit-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--panel);border:1px solid var(--line)}
#storage-card.ss-wizard .ss-how{font-size:14.5px;opacity:.62;max-width:460px;margin:0 auto 22px}
#storage-card.ss-wizard .ss-cta{display:block;width:100%;max-width:400px;margin:0 auto;
  font-size:19px;font-weight:700;padding:16px 28px;border-radius:12px;
  background:linear-gradient(90deg,var(--accent) 0%,#3a95f0 100%);color:var(--accent-ink);
  box-shadow:0 6px 22px rgba(76,166,255,.28)}
#storage-card.ss-wizard .ss-cta:hover{filter:brightness(1.1)}
/* step 2 comparison grid: dim web-only column vs accented local column */
#storage-card.ss-wizard .ss-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 18px;font-size:15.5px;text-align:left}
#storage-card.ss-wizard .ss-compare>div{padding:12px 16px;background:var(--bg-2)}
#storage-card.ss-wizard .ss-cmp-head{font-weight:700;font-size:16px}
#storage-card.ss-wizard .ss-cmp-web{color:var(--ink-dim)}
#storage-card.ss-wizard .ss-cmp-local{background:#182d20 !important;color:var(--ink)}
@media (max-width:640px){
  #storage-card.ss-wizard{padding:28px 22px 24px;font-size:16px}
  #storage-card.ss-wizard h2{font-size:24px}
  #storage-card.ss-wizard .ss-compare{font-size:14px}
}

/* ---- Centre crosshair — the nav anchor (URL = deepest polygon under centre) ---- */
.center-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(12,26,17,0.72),
    0 1px 7px rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 5;
}
.center-crosshair::before,
.center-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(8, 20, 13, 0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.72);
}
.center-crosshair::before {
  top: -7px;
  bottom: -7px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}
.center-crosshair::after {
  left: -7px;
  right: -7px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}

/* ---- Web Mercator grid overlay: MapLibre draws geometry; this DOM layer carries
   perimeter labels (debug-tile-grid.js). ---- */
.wm-grid-legend {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.wm-grid-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 5px;
  border: 1px solid rgba(34,53,40,.78);
  border-radius: 5px;
  background: rgba(9,17,12,.62);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  box-shadow: 0 1px 5px rgba(0,0,0,.24);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}
.wm-grid-label.is-active {
  color: #fff4dc;
  border-color: color-mix(in srgb, var(--warn) 72%, transparent);
  background: rgba(52,34,16,.72);
}
.wm-grid-label-top { transform: translate(-50%, 0); }
.wm-grid-label-bottom { transform: translate(-50%, -100%); }
.wm-grid-label-left { transform: translate(0, -50%); }
.wm-grid-label-right { transform: translate(-100%, -50%); }
.wm-grid-parent-chip {
  color: #d9edff;
  border-color: color-mix(in srgb, var(--accent) 76%, transparent);
  background: rgba(16,35,52,.74);
}
.wm-grid-child-chip {
  color: #fff2df;
  border-color: color-mix(in srgb, var(--warn) 82%, transparent);
  background: rgba(56,36,17,.78);
}

/* ---- MapLibre control chrome tinted to the dark theme ---- */
.maplibregl-ctrl-attrib { background: rgba(13,22,16,.7) !important; color: var(--ink-dim); }
.maplibregl-ctrl-attrib a { color: var(--ink-dim); }

/* MapLibre popups (any tier that doesn't inject its own skin) — dark themed. */
.maplibregl-popup-content { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.maplibregl-popup-tip { border-top-color: var(--panel); border-bottom-color: var(--panel); }
.maplibregl-popup-close-button { color: var(--ink-dim); }
.photo3d-stage { position: absolute; inset: 0; z-index: 5; background: #101820; }
.photo3d-stage[hidden] { display: none; }
.photo3d-map { display: block; width: 100%; height: 100%; }
.photo3d-status { display: none; position: absolute; inset: 0; z-index: 2;
  place-items: center; padding: 40px; text-align: center;
  color: var(--ink); background: color-mix(in srgb, var(--bg) 92%, transparent);
  font: 600 18px/1.5 var(--font); }
.photo3d-stage.is-loading .photo3d-status,
.photo3d-stage.has-error .photo3d-status { display: grid; }