/* Shared Mobile Directory infographic styles — used by mobiledirectory.html
   (display) and login.html (editor). Editing-tool styles live in mdir-editor.js. */

.mdir-stage {
  position: relative;
  width: 1320px; height: 820px;
  overflow: hidden;
  background: #f4f2ed;
  color: #1a1a1a;
  user-select: none;
  font-family: "Poppins", "Montserrat", "Segoe UI", Arial, sans-serif;
}
.mdir-bg {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 18% 12%, #ffffff 0%, #f5f3ee 42%, #efece4 100%);
  border: 1px solid #e9e5db;
}
.mdir-map-svg { position: absolute; inset: 0; width: 1320px; height: 820px; pointer-events: none; }

/* World map (Leaflet): OSM-derived land polygons filled as beige landmasses on
   a transparent ocean — no tiles, no background, no border. Sized wide across
   the upper-right of the design. */
.mdir-map {
  position: absolute;
  left: 486px; top: 30px; width: 834px; height: 360px;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  /* horizontal edge fade (left + right) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* vertical edge fade (top + bottom) — nested so the two masks compound and all
   four edges melt into the page (mask-composite is unreliable across engines) */
.mdir-map .leaflet-container {
  background: transparent; font: inherit;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
}

.mdir-layer { position: absolute; inset: 0; z-index: 3; }

.mdir-el { position: absolute; }
.mdir-el-text { white-space: pre-wrap; }
.mdir-el-image img { display: block; }

.mdir-accent {
  position: absolute; left: 54px; top: 229px;
  width: 96px; height: 5px; border-radius: 3px; background: #b8892f; z-index: 3;
}

.mdir-el-card { z-index: 4; }
.mdir-card { position: absolute; box-shadow: 0 10px 30px rgba(40,32,10,.08); }
.mdir-card-dark { box-shadow: 0 14px 34px rgba(10,16,30,.30); }
.mdir-cols { display: flex; width: 100%; height: 100%; align-items: stretch; }
.mdir-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 4px 6px;
}
.mdir-col + .mdir-col { border-left: 1px solid rgba(0,0,0,.10); }
.mdir-card-dark .mdir-col + .mdir-col { border-left: 1px solid rgba(255,255,255,.14); }
.mdir-item-text { white-space: pre-line; }
.mdir-item-icon svg { width: 100%; height: 100%; display: block; }
.mdir-item-image img { display: block; }

/* Footer: size each column to its content and spread them evenly so the
   dividers hug the icon/text instead of leaving wide empty gaps. */
.mdir-card[data-card="footer"] .mdir-cols { align-items: center; }
.mdir-card[data-card="footer"] .mdir-col { flex: 1 1 auto; padding: 4px 10px; gap: 3px; }