/* ==========================================================================
   INDOHILL ATLAS — dot-matrix world map, pixel iconography, schematics, long-form prose.
   Loaded after styles.css (see partials/head-tail.php).
   Map markup: partials/worldmap.php · engine: assets/js/worldmap.js
   ========================================================================== */

/* ---------- Map frame ---------- */
.ihmap {
  position: relative;
  width: 100%;
  border: 1px solid rgba(212, 175, 55, 0.14);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(30, 58, 138, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.72), rgba(10, 14, 23, 0.9));
  overflow: hidden;
  isolation: isolate;
}
.ihmap__svg { display: block; width: 100%; height: auto; aspect-ratio: 180 / 71; --k: 1; }

/* registration ticks */
.ihmap__tick { position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none; border: 0 solid rgba(212, 175, 55, 0.55); }
.ihmap__tick--tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.ihmap__tick--tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.ihmap__tick--bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.ihmap__tick--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.ihmap__graticule line { stroke: rgba(148, 163, 184, 0.09); stroke-width: 0.12; }
.ihmap__graticule line.is-equator { stroke: rgba(212, 175, 55, 0.2); stroke-dasharray: 0.6 0.6; }
.ihmap__gratlabels text { font: 500 1.5px "Plus Jakarta Sans", sans-serif; fill: rgba(148, 163, 184, 0.45); letter-spacing: 0.04em; }
.ihmap.is-zoomed .ihmap__gratlabels { opacity: 0; }

/* land cells + the gold radar sweep that lights them as it passes */
.ihmap__land { stroke: rgba(226, 232, 240, 0.17); }
.ihmap__land--lit { stroke: #E6C687; opacity: 0.95; }
.ihmap__sweep { animation: ihmap-sweep 11s linear infinite; }
@keyframes ihmap-sweep { from { transform: translateX(0); } to { transform: translateX(290px); } }

/* arcs: stroke widths are screen pixels so they stay crisp at any zoom */
.ihmap__spoke, .ihmap__route, .ihmap__route-glow { fill: none; vector-effect: non-scaling-stroke; }
.ihmap__spoke-base { fill: none; vector-effect: non-scaling-stroke; stroke: rgba(212, 175, 55, 0.13); stroke-width: 1px; }
.ihmap__spoke { stroke: rgba(230, 198, 135, 0.75); stroke-width: 1.2px; stroke-dasharray: 2 9; stroke-linecap: round; animation: ihmap-flow 3s linear infinite; }
.ihmap__spoke.is-lit { stroke: #E6C687; }
.ihmap__route-glow { stroke: rgba(14, 165, 233, 0.22); stroke-width: 6px; stroke-linecap: round; }
.ihmap__route { stroke: #7dd3fc; stroke-width: 1.6px; stroke-dasharray: 6 5; animation: ihmap-flow 1.1s linear infinite; }
@keyframes ihmap-flow { to { stroke-dashoffset: -22; } }
.ihmap.has-selection .ihmap__spoke:not(.is-lit) { opacity: 0.4; }

.ihmap__packet { fill: #fff; r: calc(0.5px * var(--k)); filter: drop-shadow(0 0 2px rgba(230, 198, 135, 0.9)); }
.ihmap__packet--hot { fill: #e0f2fe; filter: drop-shadow(0 0 3px rgba(14, 165, 233, 1)); }

/* markers (drawn at the origin, positioned + scaled by JS so they stay a constant screen size) */
.ihmap__marker { outline: none; }
.ihmap__hit { fill: transparent; }
.ihmap--explorer .ihmap__marker, .ihmap--offices .ihmap__marker { cursor: pointer; }

.ihmap__prog-dot { stroke: #0A0E17; stroke-width: 0.3; transition: opacity 0.3s; }
.ihmap__prog-halo { fill: none; stroke-width: 0.25; opacity: 0; transition: opacity 0.25s; }
.ihmap__prog--cit .ihmap__prog-dot { fill: #D4AF37; } .ihmap__prog--cit .ihmap__prog-halo { stroke: #D4AF37; }
.ihmap__prog--prm .ihmap__prog-dot { fill: #38bdf8; } .ihmap__prog--prm .ihmap__prog-halo { stroke: #38bdf8; }
.ihmap__prog--ltr .ihmap__prog-dot { fill: #e2e8f0; } .ihmap__prog--ltr .ihmap__prog-halo { stroke: #e2e8f0; }
.ihmap--ambient .ihmap__prog-dot { opacity: 0.55; }
.ihmap__prog:hover .ihmap__prog-halo, .ihmap__prog:focus-visible .ihmap__prog-halo, .ihmap__prog.is-selected .ihmap__prog-halo { opacity: 0.9; }
.ihmap__prog:hover .ihmap__prog-dot, .ihmap__prog.is-selected .ihmap__prog-dot { stroke: #fff; stroke-width: 0.35; }
.ihmap__prog { transition: opacity 0.3s; }
.ihmap__prog.is-off { opacity: 0.07; pointer-events: none; }
.ihmap.has-selection .ihmap__prog:not(.is-selected):not(.is-off) .ihmap__prog-dot { opacity: 0.5; }

.ihmap__office-core { fill: #0A0E17; stroke: #E6C687; stroke-width: 0.5; }
.ihmap__office.is-hq .ihmap__office-core { fill: #D4AF37; stroke: #FBF6E7; }
.ihmap__office-ring { fill: none; stroke: rgba(230, 198, 135, 0.55); stroke-width: 0.25; stroke-dasharray: 0.8 0.8; transform-box: fill-box; transform-origin: center; animation: ihmap-spin 24s linear infinite; }
@keyframes ihmap-spin { to { transform: rotate(360deg); } }
.ihmap__office:hover .ihmap__office-core, .ihmap__office:focus-visible .ihmap__office-core, .ihmap__office.is-selected .ihmap__office-core { fill: #E6C687; }
.ihmap__label { font: 600 2.1px "Plus Jakarta Sans", sans-serif; fill: #F8FAFC; letter-spacing: 0.06em; text-transform: uppercase; paint-order: stroke; stroke: #0A0E17; stroke-width: 0.6px; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.ihmap.has-labels .ihmap__office.is-hq .ihmap__label,
.ihmap.is-zoomed.has-labels .ihmap__label,
.ihmap--offices .ihmap__label,
.ihmap--locator .ihmap__office.is-selected .ihmap__label { opacity: 1; }

.ihmap__ping { fill: none; stroke: rgba(230, 198, 135, 0.8); stroke-width: 0.25; transform-box: fill-box; transform-origin: center; animation: ihmap-ping 2.4s ease-out forwards; }
@keyframes ihmap-ping { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

.ihmap__hud { position: absolute; left: 22px; bottom: 14px; z-index: 3; font: 500 10px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.75); pointer-events: none; }

.ihmap__tip { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 12px)); min-width: 150px; max-width: 230px; padding: 9px 12px 10px; background: rgba(10, 14, 23, 0.96); border: 1px solid rgba(212, 175, 55, 0.4); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.8); pointer-events: none; font-size: 12px; line-height: 1.35; color: #94A3B8; }
.ihmap__tip[hidden] { display: none; }
.ihmap__tip b { display: block; font-family: "Playfair Display", serif; font-weight: 500; font-size: 14px; color: #F8FAFC; }
.ihmap__tip span { display: block; }
.ihmap__tip .ihmap__tip-meta { margin-top: 5px; font: 500 10px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #D4AF37; }

/* ambient variant: the hero backdrop. No frame, edge-faded, purely decorative. */
.ihmap--ambient { border: 0; background: none; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 38%, transparent 100%); mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 38%, transparent 100%); }
.ihmap--ambient .ihmap__tick, .ihmap--ambient .ihmap__hud { display: none; }
.ihmap--ambient .ihmap__land { stroke: rgba(226, 232, 240, 0.13); }

/* ---------- Controls ---------- */
.ihchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(148, 163, 184, 0.28); background: transparent; color: #cbd5e1; font: 600 11.5px "Plus Jakarta Sans", sans-serif; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s; }
.ihchip:hover { border-color: rgba(212, 175, 55, 0.6); color: #fff; }
.ihchip[aria-pressed="true"] { border-color: rgba(212, 175, 55, 0.7); background: rgba(212, 175, 55, 0.1); color: #F8FAFC; }
.ihchip[aria-pressed="false"] { opacity: 0.5; }
.ihchip--region[aria-pressed="true"] { background: #D4AF37; border-color: #D4AF37; color: #0A0E17; opacity: 1; }
.ihchip--region[aria-pressed="false"] { opacity: 1; }
.ihdot { display: inline-block; width: 8px; height: 8px; flex: none; }
.ihdot--cit { background: #D4AF37; } .ihdot--prm { background: #38bdf8; } .ihdot--ltr { background: #e2e8f0; }
.ihdot--hq { background: #E6C687; transform: rotate(45deg) scale(0.85); }

/* ---------- Selection panel ---------- */
.ihpanel { border: 1px solid rgba(212, 175, 55, 0.22); background: rgba(10, 14, 23, 0.72); padding: 22px 22px 20px; height: 100%; }
.ihpanel__kicker { display: flex; align-items: center; gap: 9px; font: 600 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #D4AF37; }
.ihpanel__title { margin-top: 12px; font-family: "Playfair Display", serif; font-size: 26px; line-height: 1.15; color: #F8FAFC; }
.ihpanel__sub { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #94A3B8; }
.ihpanel__addr { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #cbd5e1; }
.ihpanel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.14); }
.ihpanel__stats div { background: rgba(10, 14, 23, 0.95); padding: 10px 10px 11px; }
.ihpanel__stats dt { font: 600 9px "Plus Jakarta Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.ihpanel__stats dd { margin-top: 4px; font: 500 14px "Playfair Display", serif; color: #F8FAFC; }
.ihpanel__near { margin-top: 16px; font: 500 12px ui-monospace, Menlo, Consolas, monospace; color: #cbd5e1; }
.ihpanel__near span { display: block; margin-bottom: 3px; font: 600 9px "Plus Jakarta Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.ihpanel__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #D4AF37; font-size: 13px; font-weight: 600; transition: gap 0.2s; }
.ihpanel__cta:hover { gap: 12px; }
.ihpanel__cta svg { width: 15px; height: 15px; }
.ihpanel__idle { font-size: 13px; line-height: 1.65; color: #94A3B8; }

/* ---------- Generated programme list ---------- */
.ihlist { max-height: 360px; overflow-y: auto; border: 1px solid rgba(148, 163, 184, 0.14); background: rgba(10, 14, 23, 0.6); }
.ihlist__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.08); transition: background 0.15s; }
.ihlist__item[hidden] { display: none; }
.ihlist__item:hover, .ihlist__item.is-selected { background: rgba(212, 175, 55, 0.08); }
.ihlist__main { flex: 1; min-width: 0; }
.ihlist__main b { display: block; font-size: 13px; font-weight: 600; color: #F8FAFC; }
.ihlist__main i { display: block; font-style: normal; font-size: 11.5px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ihlist__min { font: 500 12px ui-monospace, Menlo, Consolas, monospace; color: #E6C687; }

/* ---------- Pixel iconography (partials/pixel.php) ---------- */
.pxi { display: inline-block; shape-rendering: crispEdges; }
.pxi .px-a { fill: currentColor; }
.pxi .px-b { fill: currentColor; opacity: 0.3; }
.pxi .px-c { fill: #38bdf8; }
.pxi-tile { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex: none; border: 1px solid rgba(212, 175, 55, 0.3); background: linear-gradient(135deg, rgba(212, 175, 55, 0.09), rgba(10, 14, 23, 0.6)); color: #D4AF37; position: relative; }
.pxi-tile::before, .pxi-tile::after { content: ""; position: absolute; width: 7px; height: 7px; border: 0 solid rgba(212, 175, 55, 0.8); }
.pxi-tile::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.pxi-tile::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.pxi-tile--cyan { color: #38bdf8; border-color: rgba(14, 165, 233, 0.4); background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(10, 14, 23, 0.6)); }
.pxi-tile--cyan::before, .pxi-tile--cyan::after { border-color: rgba(56, 189, 248, 0.85); }
.pxi-tile--sm { width: 52px; height: 52px; }
.pxi-tile .pxi { transition: transform 0.25s steps(3); }
.group:hover .pxi-tile .pxi { transform: translateY(-2px); }

.px-rule { height: 4px; background-image: linear-gradient(90deg, rgba(212, 175, 55, 0.7) 50%, transparent 50%); background-size: 8px 4px; opacity: 0.28; }
.idx { font: 600 11px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.16em; color: rgba(212, 175, 55, 0.8); }

/* ---------- Schematic frame ---------- */
.schematic { position: relative; border: 1px solid rgba(212, 175, 55, 0.16); background-color: rgba(10, 14, 23, 0.85); background-image: linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px); background-size: 24px 24px; }
.schematic__cap { font: 600 10px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(148, 163, 184, 0.7); }
.sch-line { fill: none; stroke: rgba(212, 175, 55, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sch-flow { fill: none; stroke: #E6C687; stroke-width: 1.4; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: ihmap-flow 1.2s linear infinite; }
.sch-node { fill: rgba(10, 14, 23, 0.95); stroke: rgba(212, 175, 55, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sch-text { font: 600 11px "Plus Jakarta Sans", sans-serif; fill: #F8FAFC; letter-spacing: 0.02em; }
.sch-sub { font: 500 9.5px "Plus Jakarta Sans", sans-serif; fill: #94A3B8; }
.sch-mono { font: 600 9px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.14em; fill: #D4AF37; text-transform: uppercase; }

/* ---------- Long-form prose (insights) ---------- */
.prose-ih p { margin-top: 1.15em; line-height: 1.85; color: #a8b4c6; font-size: 1.02rem; }
.prose-ih h2 { margin-top: 2.6em; font-family: "Playfair Display", serif; font-size: 1.75rem; line-height: 1.2; color: #F8FAFC; }
.prose-ih h3 { margin-top: 1.9em; font-family: "Playfair Display", serif; font-size: 1.2rem; color: #F8FAFC; }
.prose-ih ul, .prose-ih ol { margin-top: 1em; padding-left: 1.25em; color: #a8b4c6; line-height: 1.8; }
.prose-ih ul { list-style: square; } .prose-ih ul li::marker { color: #D4AF37; }
.prose-ih ol { list-style: decimal; } .prose-ih ol li::marker { color: #D4AF37; font-weight: 600; }
.prose-ih li + li { margin-top: 0.5em; }
.prose-ih strong { color: #F8FAFC; font-weight: 600; }
.prose-ih a { color: #E6C687; text-decoration: underline; text-decoration-color: rgba(212, 175, 55, 0.4); text-underline-offset: 3px; }
.prose-ih a:hover { text-decoration-color: #E6C687; }
.prose-ih .lede { font-size: 1.22rem; line-height: 1.7; color: #cbd5e1; font-family: "Playfair Display", serif; margin-top: 0; }
.prose-ih .callout { margin-top: 2em; padding: 20px 24px; border-left: 2px solid #D4AF37; background: rgba(212, 175, 55, 0.06); color: #cbd5e1; line-height: 1.75; }
.prose-ih .tablewrap { overflow-x: auto; margin-top: 1.6em; }
.prose-ih table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.prose-ih th { text-align: left; font: 600 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #D4AF37; padding: 10px 12px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); }
.prose-ih td { padding: 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); color: #a8b4c6; vertical-align: top; line-height: 1.55; }
.prose-ih td:first-child { color: #F8FAFC; font-weight: 600; }

@media (max-width: 640px) {
  .ihmap__tick, .ihmap__hud { display: none; }
  .ihpanel__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ihmap__sweep, .ihmap__spoke, .ihmap__route, .ihmap__office-ring, .sch-flow { animation: none; }
  .ihmap__land--lit { display: none; }
}

/* Let grid children shrink below their content width so wide tables/maps scroll inside their own wrapper instead of widening the page on phones. */
.grid > * { min-width: 0; }