/* The engine map, on the admin's design system: everything colour, type and shape comes from its
   tokens, so light and dark follow the rest of the admin. Glass and hairlines, no glow. */

:root {
  --flow-tick: #4f7cff;
  --flow-dec: #d9a441;
  --flow-live: #34d399;
  --flow-cust: #a78bfa;
  --flow-rep: #2dd4bf;
  --flow-ctl: #f87171;
}
:root[data-theme="light"] {
  --flow-tick: #3461e0;
  --flow-dec: #b27f07;
  --flow-live: #0f9d6b;
  --flow-cust: #7c5cdb;
  --flow-rep: #0f9488;
  --flow-ctl: #dc4a4a;
}

.em-spacer { flex: 1; }
.em-actions { align-items: center; }
.em-search { position: relative; }
.em-search .input { width: 220px; }
.em-btn.on { background: var(--brand-tint); border-color: var(--brand-border-soft); color: var(--text-primary); }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.em-chips .status b { color: var(--text-primary); font-weight: 600; }

.em-results { position: absolute; top: 42px; right: 0; z-index: 8; display: none; width: 360px; max-height: 60vh; overflow: auto; }
.em-results div { padding: 9px 12px; border-bottom: 1px solid var(--line-faint); font-size: var(--fs-sm); cursor: pointer; }
.em-results div:last-child { border-bottom: 0; }
.em-results div:hover { background: var(--hover); }
.em-results small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* The map */
.em-stage { padding: 12px 14px 12px; gap: 8px; }
.em-scroll { overflow-x: auto; }
#map { display: block; width: 100%; min-width: 1080px; height: auto; font-family: var(--font-sans); }
#map .band rect { fill: var(--hover); stroke: var(--line); }
#map .band text { fill: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
#map .edge { fill: none; stroke: color-mix(in srgb, var(--text-muted) 55%, transparent); stroke-width: 1.8; transition: opacity 0.15s; }
#map .edge.hl { stroke-width: 2.6; }
#map .edge.dim { opacity: 0.25; }
#map .edge.dashed { stroke-dasharray: 6 6; }
.em-arrow { fill: var(--text-muted); }
#map .node { cursor: pointer; outline: none; transition: opacity 0.15s; }
#map .node .card-bg { fill: var(--glass-strong); stroke: var(--line-strong); stroke-width: 1.2; transition: stroke 0.15s, fill 0.15s; }
#map .node:hover .card-bg, #map .node:focus-visible .card-bg, #map .node.tourmark .card-bg { stroke: var(--brand-400); }
#map .node.tourmark .card-bg { stroke-width: 2; }
#map .node.dim { opacity: 0.3; }
#map .node.planned .card-bg { stroke-dasharray: 6 5; }
#map .node .t { fill: var(--text-primary); font-size: 17px; font-weight: 600; }
#map .node .s { fill: var(--text-muted); font-size: 13.5px; }
#map .node .ic { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#map .node .st-built { fill: var(--positive); }
#map .node .st-partial { fill: var(--warn); }
#map .node .st-planned { fill: var(--brand-400); }
#map .node .st-off { fill: var(--text-muted); }
#map .node .bdg-bg { fill: var(--neg-soft); }
#map .node .bdg { fill: var(--negative); font-size: 11px; font-weight: 600; }
#map .node .bdg-plan { fill: var(--brand-400); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.dot-green { fill: var(--positive); } .dot-amber { fill: var(--warn); } .dot-red { fill: var(--negative); } .dot-unchecked { fill: var(--text-muted); }

.em-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 4px 2px; border-top: 1px solid var(--line-faint); font-size: var(--fs-xs); color: var(--text-muted); }
.em-lg { display: inline-flex; align-items: center; gap: 6px; }
.em-sw { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.em-box { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--c); }

.em-tip { position: fixed; z-index: 210; max-width: 300px; padding: 9px 12px; font-size: var(--fs-xs); color: var(--text-secondary); pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.em-tip b { display: block; font-size: var(--fs-sm); color: var(--text-primary); }
.em-tip small { display: block; margin-bottom: 4px; color: var(--text-muted); }

.em-tour { position: fixed; left: 50%; bottom: 20px; z-index: 150; display: none; width: min(780px, calc(100% - 32px)); padding: 12px 16px; transform: translateX(-50%); }
.em-tour__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.em-tour__text { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }

/* The detail drawer */
.em-overlay { position: fixed; inset: 0; z-index: 200; display: none; background: rgb(0 0 0 / 0.35); }
.em-overlay.open { display: block; animation: em-fade 0.16s ease-out; }
.em-sheet { position: absolute; top: 12px; right: 12px; bottom: 12px; display: flex; width: min(960px, calc(100% - 24px)); flex-direction: column; overflow: hidden; animation: em-in 0.2s var(--ease-expo); }
.em-sheet__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.em-close { margin-left: auto; }
.em-crumbs { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.em-crumbs a { color: var(--text-muted); cursor: pointer; }
.em-crumbs a:hover { color: var(--text-primary); }
.em-crumbs .cur { color: var(--text-primary); font-weight: 600; }
.em-sheet__body { flex: 1; overflow: auto; padding: 20px 22px 32px; font-size: var(--fs-md); color: var(--text-secondary); }

.em-hero { display: flex; align-items: flex-start; gap: 14px; }
.em-hero__icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: var(--r-md); background: var(--hover); border: 1px solid var(--line); }
.em-hero__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.em-hero h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-page); font-family: var(--font-serif); font-weight: 400; line-height: 1.1; color: var(--text-primary); }
.em-hero__sum { max-width: 76ch; margin-top: 6px; }
.em-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.em-stat { padding: 10px 12px; }
.em-stat__v { font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); }
.em-stat__k { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.em-sheet__body h3.sec { margin: 24px 0 10px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.em-flow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.em-step { flex: 0 0 auto; min-width: 140px; max-width: 220px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.em-step:hover, .em-step.act { border-color: var(--brand-border-soft); }
.em-step.act { background: var(--brand-tint); }
.em-step__i { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); }
.em-step__t { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.em-step__d { display: none; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-secondary); }
.em-step.act .em-step__d { display: block; }

.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.em-card { padding: 11px 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.em-card:hover { border-color: var(--brand-border-soft); background: var(--press); }
.em-card__t { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.em-card__s { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

/* Text from the map's data */
.em-text { max-width: 1000px; }
.em-text p { margin: 8px 0; }
.em-text ul { margin: 6px 0 10px 18px; list-style: disc; }
.em-text li { margin: 3px 0; }
.em-text b { color: var(--text-primary); font-weight: 600; }
.em-sheet__body code { padding: 0 5px; border-radius: var(--r-xs); background: var(--hover); border: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }
.em-text table { width: 100%; margin: 8px 0 14px; border-collapse: collapse; font-size: var(--fs-sm); }
.em-text th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.em-text td { padding: 8px 10px; border-bottom: 1px solid var(--line-faint); vertical-align: top; }
.em-text .meter { margin: 6px 0; max-width: 520px; }
.note, .good, .plan { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-sm); color: var(--text-secondary); }
.note { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.good { background: var(--pos-soft); border-color: color-mix(in srgb, var(--positive) 32%, transparent); }
.plan { background: var(--brand-tint); border-color: var(--brand-border-soft); }
.defs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.def { padding: 3px 9px; border-radius: var(--r-pill); background: var(--neg-soft); font-size: var(--fs-xs); font-weight: 600; color: var(--negative); cursor: pointer; }

/* Code, checklist, facts, health, findings */
.mf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mf > div { padding: 12px 14px; }
.mf--wide > div { grid-column: 1 / -1; }
.mf h4 { margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.mf a { display: block; margin: 3px 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.mf a:hover { color: var(--brand-400); }
.ck { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; font-size: var(--fs-sm); }
.ck small { color: var(--text-muted); font-size: var(--fs-xs); }
.fact { display: flex; justify-content: space-between; gap: 10px; margin: 5px 0; font-size: var(--fs-sm); }
.fact > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fact b { overflow-wrap: anywhere; text-align: right; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mf-off { margin-bottom: 10px; font-size: var(--fs-xs); color: var(--text-muted); }
.em-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--text-muted); }
.fact .em-dot { margin-top: 0; }
.em-dot--ok { background: var(--positive); }
.em-dot--warn { background: var(--warn); }
.em-dot--bad { background: var(--negative); }
.em-dot--wait { background: transparent; border: 1.5px solid var(--text-muted); }
.em-err { padding: 80px 24px; text-align: center; color: var(--text-muted); }

@keyframes em-fade { from { opacity: 0; } }
@keyframes em-in { from { transform: translateX(18px); opacity: 0; } }
@media (max-width: 720px) {
  .em-search, .em-search .input { width: 100%; }
  .em-results { width: 100%; }
  .em-sheet { top: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; }
  .em-sheet__body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .em-overlay.open, .em-sheet { animation: none; }
}

.em-btn { border: 1px solid var(--line-strong); }