/* The centers network (atlas-network.js): every city a hub on its real coordinates, its centers orbiting it, a search,
 * zoom into a city. Used by the home page's own copy and by any page that includes website/partials/_centers_network.html.
 * Its colours come from the visitor's palette (atlas-palette.css). */
.atl-net-host { --xp-ink: rgb(var(--xp-c-ink)); --xp-muted: rgba(var(--xp-c-ink), .64); --xp-line: rgba(var(--xp-c-ink), .12); --xp-red: rgb(var(--xp-c-a));
  color: rgb(var(--xp-c-ink)); font-family: Tajawal, Inter, system-ui, sans-serif; }
.atl-net-host *, .atl-net-host *::before, .atl-net-host *::after { box-sizing: border-box; }
.atl-net-host .xp-n { font-family: Inter, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .16em; color: rgb(var(--xp-c-a)) !important; }
.atl-net-host h2 { color: rgb(var(--xp-c-ink)) !important; }
.atl-net-host .xp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atl-net-host .xp-net-cities span, .atl-net-host .xp-net-cities button, .atl-net-host .xp-net-back, .atl-net-host .xp-net-count { color: rgb(var(--xp-c-ink)) !important; }
.atl-net-host .xp-net-tabs button { color: rgba(var(--xp-c-ink), .64) !important; }
.atl-net-host .xp-net-tabs button.on { color: rgb(var(--xp-c-on-a)) !important; }
.atl-net-host .xp-net-cities b, .atl-net-host .xp-net-count em { color: rgb(var(--xp-c-a)) !important; }
.atl-net-host :is(.xp-net-search input) { background: transparent !important; border: 0 !important; color: rgb(var(--xp-c-ink)) !important; }
.atl-net-host.xp-net { position: relative; padding-block: 120px 90px; }
.atl-net-host.xp-net { max-width: 1680px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.atl-net-host .xp-net-head h2 { margin: 8px 0 26px; font-size: clamp(32px, 5vw, 72px); line-height: 1.02; font-weight: 900; text-wrap: balance; }
.atl-net-host .xp-net-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: stretch; }
.atl-net-host .xp-net-stage { position: relative; min-width: 0; height: min(90svh, 960px); border-radius: 28px; border: 1px solid var(--xp-line); overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--xp-c-a), .1), transparent 62%), rgb(var(--xp-c-bg2)); touch-action: pan-y; }
#xpNetCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atl-net-host .xp-net-back { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 99px;
  border: 1px solid var(--xp-line); background: rgba(var(--xp-c-bg), .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--xp-ink) !important;
  font: 800 13px Tajawal, Inter, sans-serif; cursor: pointer; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s, transform .3s; }
.atl-net-host .xp-net-back.on { opacity: 1; transform: none; pointer-events: auto; }
.atl-net-host .xp-net-hint { position: absolute; bottom: 14px; inset-inline-start: 16px; z-index: 2; color: var(--xp-muted); font-size: 12px; font-weight: 700; pointer-events: none; }
.atl-net-host .xp-net-tip { position: absolute; z-index: 3; left: 0; top: 0; width: 250px; padding: 14px 16px; border-radius: 16px; background: rgba(var(--xp-c-card), .96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 18px)) scale(.92); transform-origin: 50% 100%;
  transition: opacity .18s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.atl-net-host .xp-net-tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.atl-net-host .xp-net-tip.pinned { pointer-events: auto; }
.atl-net-host .xp-net-tip strong { display: block; color: rgb(var(--xp-c-on-card)) !important; font-size: 16px; line-height: 1.3; }
.atl-net-host .xp-net-tip small { display: block; margin-top: 3px; color: rgb(var(--xp-c-a2)) !important; font-weight: 800; font-size: 12px; }
.atl-net-host .xp-net-tip em { display: block; margin-top: 8px; font-style: normal; color: rgba(var(--xp-c-on-card), .65) !important; font-size: 12px; }
.atl-net-host .xp-net-tip a { display: inline-block; margin-top: 10px; color: rgb(var(--xp-c-a)) !important; font-weight: 900; font-size: 13px; text-decoration: none !important; }
.atl-net-host .xp-net-side { position: relative; min-width: 0; margin: 0; float: none; display: grid; align-content: start; gap: 16px; padding: 24px; border-radius: 28px; border: 1px solid var(--xp-line); background: linear-gradient(180deg, rgba(var(--xp-c-ink), .04), rgba(var(--xp-c-ink), .01)); }
.atl-net-host .xp-net-count { font: 900 clamp(56px, 6vw, 92px)/1 Inter, sans-serif; direction: ltr; text-align: start; }
.atl-net-host .xp-net-count em { font-style: normal; color: var(--xp-red-2); }
.atl-net-host .xp-net-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 99px; background: rgba(var(--xp-c-ink), .05); border: 1px solid var(--xp-line); }
.atl-net-host .xp-net-tabs button { flex: 1; padding: 9px 10px; border: 0; border-radius: 99px; background: transparent; color: var(--xp-muted) !important; font: 800 14px Tajawal, Inter, sans-serif; cursor: pointer; transition: background .25s, color .25s; }
.atl-net-host .xp-net-tabs button.on { background: var(--xp-red); color: rgb(var(--xp-c-on-a)) !important; }
.atl-net-host .xp-net-cities { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.atl-net-host .xp-net-cities button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--xp-ink) !important; font: 700 14px Tajawal, Inter, sans-serif; text-align: start; cursor: pointer; transition: background .2s, border-color .2s; }
.atl-net-host .xp-net-cities button:hover, .xp-net-cities button.on { background: rgba(var(--xp-c-a), .1); border-color: rgba(var(--xp-c-a), .35); }
.atl-net-host .xp-net-cities b { font-family: Inter, sans-serif; color: var(--xp-red-2) !important; }
.atl-net-host .xp-net-cities i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--xp-red-2), transparent); width: var(--w, 0%); transition: width 1.2s cubic-bezier(.16, 1, .3, 1); }
[dir="rtl"] .xp-net-cities i { background: linear-gradient(270deg, var(--xp-red-2), transparent); }
.atl-net-host .xp-net-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; border: 1px solid var(--xp-line); background: rgba(var(--xp-c-ink), .05);
  transition: border-color .2s, background .2s; }
.atl-net-host .xp-net-search:focus-within { border-color: rgba(var(--xp-c-a), .6); background: rgba(var(--xp-c-a), .06); }
.atl-net-host .xp-net-search i { color: var(--xp-muted); font-size: 14px; }
.atl-net-host .xp-net-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: rgb(var(--xp-c-ink)); font: 700 15px Tajawal, Inter, sans-serif; }
.atl-net-host .xp-net-search input::placeholder { color: var(--xp-muted); }
.atl-net-host .xp-net-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.atl-net-host .xp-net-listhead { margin: 2px 0 -6px; color: var(--xp-muted); font-size: 13px; font-weight: 800; }
.atl-net-host .xp-net-listhead:empty { display: none; }
.atl-net-host .xp-net-cities { max-height: min(440px, 46svh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 4px; }
.atl-net-host .xp-net-cities button.c { grid-template-columns: 1fr auto; align-items: center; }
.atl-net-host .xp-net-cities button.c small { grid-column: 1 / -1; color: var(--xp-muted); font-size: 12px; font-weight: 700; }
.atl-net-host .xp-net-cities button.c .go { color: rgb(var(--xp-c-a)); font-size: 12px; }
.atl-net-host .xp-net-cities .none { padding: 10px 12px; color: var(--xp-muted); font-size: 14px; }
.atl-net-host .xp-net-cities button.c small { color: var(--xp-muted) !important; }
.atl-net-host .xp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.atl-net-host .xp-net-cities button, .atl-net-host .xp-net-back { color: rgb(var(--xp-c-ink)) !important; }
.atl-net-host .xp-net-tabs button { color: var(--xp-muted) !important; }
.atl-net-host .xp-net-tabs button.on { color: rgb(var(--xp-c-on-a)) !important; }
.atl-net-host .xp-net-cities b, .atl-net-host .xp-net-count em, .atl-net-host .xp-n { color: rgb(var(--xp-c-a)) !important; }
.atl-net-host .xp-net-tip strong { display: block; color: rgb(var(--xp-c-on-card)) !important; font-size: 16px; line-height: 1.3; }
.atl-net-host .xp-net-tip small { display: block; margin-top: 3px; color: rgb(var(--xp-c-a2)) !important; font-weight: 800; font-size: 12px; }
.atl-net-host .xp-net-tip em { display: block; margin-top: 8px; font-style: normal; color: rgba(var(--xp-c-on-card), .65) !important; font-size: 12px; }
.atl-net-host .xp-net-tip a { display: inline-block; margin-top: 10px; color: rgb(var(--xp-c-a)) !important; font-weight: 900; font-size: 13px; text-decoration: none !important; }
.atl-net-host .xp-net-cities button.c small { color: var(--xp-muted) !important; }

/* phones: the map above, the list below (after the rules it overrides) */
@media (max-width: 900px) {
  .atl-net-host.xp-net { padding-block: 80px 60px; }
  .atl-net-host .xp-net-grid { grid-template-columns: 1fr; }
  .atl-net-host .xp-net-stage { height: auto; aspect-ratio: 1 / 1.02; }
  .atl-net-host .xp-net-hint { display: none; }
}