/* Public Execution Maps — hub (/execution-maps) + per-project map detail
   (/blueprints/{slug}/execution-map). Scoped np-emap-* only; reuses the global theme tokens and the V3
   card system (cards.css) for the hub, so it adds nothing to the global card/listing systems.

   Detail = a compact, UML-style overview map (phase lanes of small step nodes) above a selected-step
   detail panel that shows the active step's workflow/resource/tool in full. Entity colours live in the
   detail cards: Workflow = green (--np-pb-accent), Resource = purple (--np-res-accent), Tool = orange
   (--np-tool-accent); Project/Stage = gold (--np-bp-accent). No Output node. No horizontal scroll. */

.np-emap-page { padding: 2.5rem 0 4rem; color: var(--np-text-primary); }
.np-emap-page .np-section-inner { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }
/* The map detail page has no breadcrumb (a "Back to project" button in the title row replaces it), so it
   sits closer to the header — tighter top padding without feeling cramped. */
.np-emap-detail-page { padding-top: 1.5rem; }

/* ── Hub hero (mirrors the Blueprints index hero) ───────── */
.np-emap-hero { margin-bottom: 1.75rem; }
.np-emap-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 600;
    color: var(--np-text-secondary); border: 1px solid var(--np-border); background: var(--np-bg-card);
    border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1rem; }
.np-emap-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--np-bp-accent); box-shadow: 0 0 0 4px var(--np-bp-accent-dim); }
.np-emap-hero-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.np-emap-hero-sub { font-size: 1rem; line-height: 1.6; color: var(--np-text-secondary); max-width: 66ch; margin: 0; }
.np-emap-hero-sub a { color: var(--np-accent-light, #8b7dff); }

/* ── Hub sections (mirrors np-bp-section) ───────────────── */
.np-emap-section { margin-top: 2.2rem; }
.np-emap-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.np-emap-section-title { font-size: 1.2rem; font-weight: 720; margin: 0; }
.np-emap-count { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--np-text-muted); margin: 0; }

/* Featured de-dup: the same project kept in the All grid (crawlable) but hidden so it never shows twice. */
.np-card.np-emap-card--in-featured { display: none; }

/* ── Hub legend (used by the hub hero) ──────────────────── */
.np-emap-legend { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.np-emap-lg { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600;
    color: var(--np-text-secondary); padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid var(--np-border); background: var(--np-bg-card); }
.np-emap-lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.np-emap-lg--bp::before   { background: var(--np-bp-accent); }
.np-emap-lg--pb::before   { background: var(--np-pb-accent); }
.np-emap-lg--res::before  { background: var(--np-res-accent); }
.np-emap-lg--tool::before { background: var(--np-tool-accent); }

/* ══════════════════════════════════════════════════════════
   Detail — compact UML-style overview map
   ══════════════════════════════════════════════════════════ */
.np-emap-v2 { border: 1px solid var(--np-border); border-radius: var(--np-radius-lg, 20px);
    background: var(--np-bg-card); padding: 1.05rem 1.2rem 0.3rem; }

/* Head: project identity + title-row actions. */
.np-emap-v2-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.8rem; border-bottom: 1px solid var(--np-border); }
.np-emap-v2-headline { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.np-emap-v2-title { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.np-emap-v2-title-sub { color: var(--np-text-secondary); font-weight: 600; }
.np-emap-v2-meta { font-size: 0.78rem; color: var(--np-bp-accent); font-weight: 600; margin-top: 0.1rem; }
/* Title-row actions (Download map + Back to project) sit at the right end (replace the breadcrumb).
   Reuse .np-emap-btn, so the underline-reset already covers their hover. */
.np-emap-v2-actions { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.np-emap-btn svg { width: 15px; height: 15px; }

/* Lanes (one per non-empty phase) — tightened vertical rhythm so more steps fit at a glance. */
.np-emap-lanes { display: flex; flex-direction: column; }
.np-emap-lane { display: grid; grid-template-columns: 182px minmax(0, 1fr); gap: 0.9rem; align-items: start;
    padding: 1rem 0; border-bottom: 1px solid var(--np-border); }
.np-emap-lane:last-child { border-bottom: 0; }
.np-emap-lane-label { display: flex; align-items: flex-start; gap: 0.55rem; }
.np-emap-lane-ico { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center;
    background: var(--np-bp-accent-dim); border: 1px solid var(--np-bp-accent-bd); color: var(--np-bp-accent); }
.np-emap-lane-ico svg { width: 13px; height: 13px; }
.np-emap-lane-name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--np-bp-accent); }
.np-emap-lane-desc { font-size: 0.75rem; line-height: 1.38; color: var(--np-text-secondary); margin-top: 0.18rem; }

/* Track of compact nodes — wraps within the lane, never a horizontal scroll. */
.np-emap-lane-track { display: flex; flex-wrap: wrap; gap: 20px 24px; align-content: flex-start; }

/* Compact step node (a button — selecting it updates the detail panel below). Small + tight so a phase
   row reads as a schematic; sized so a four-step phase fits one row in the 1140px container, wider phases
   wrap (arrows stay wrap-aware). Just a number badge + a 2-line title. */
.np-emap-node { position: relative; flex: 0 1 158px; min-width: 132px; max-width: 190px; text-align: left;
    display: flex; flex-direction: column; padding: 0.62rem 0.7rem 0.58rem; cursor: pointer;
    background: var(--np-card-surface); border: 1px solid var(--np-card-border); border-radius: var(--np-radius);
    color: var(--np-text-primary); transition: border-color .15s, background .15s, box-shadow .15s; }
.np-emap-node:hover { border-color: var(--np-bp-accent-bd); background: var(--np-bg-hover); }
.np-emap-node.is-active { border-color: var(--np-bp-accent); box-shadow: 0 0 0 1px var(--np-bp-accent), 0 6px 18px rgba(0,0,0,0.26); }
.np-emap-node:focus-visible { outline: 2px solid var(--np-bp-accent); outline-offset: 2px; }
.np-emap-node-num { position: absolute; top: -10px; left: 11px; width: 1.35rem; height: 1.35rem; border-radius: 6px;
    display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--np-bg); background: var(--np-bp-accent); border: 2px solid var(--np-bg-card); }
.np-emap-node-title { font-size: 0.8rem; font-weight: 650; line-height: 1.25; margin-top: 0.3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Flow arrow between two nodes on the SAME visual row. execution-maps.js adds .np-emap-node--arrow only
   when the next node shares this one's offsetTop, so an arrow never lands at a wrap edge or on the last
   node — at any width. Nodes without the class have no ::after, so a wrap edge can't leak a stray arrow. */
.np-emap-node--arrow::after { content: "→"; position: absolute; top: 50%; right: -17px; transform: translateY(-50%);
    color: var(--np-bp-accent); font-size: 0.95rem; font-weight: 700; line-height: 1; pointer-events: none; }

/* ══ Selected step detail panel (server-renders one per step; JS shows the active one) ══ */
.np-emap-step { position: relative; border: 1px solid var(--np-border); border-radius: var(--np-radius-lg, 20px);
    background: var(--np-bg-card); padding: 1.4rem 1.5rem; margin-top: 1.3rem; }
.np-emap-step[hidden] { display: none; }
.np-emap-step-head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.7rem; align-items: start; }
/* Step number = the SAME integrated top-left corner stamp as the project-detail journey badge
   (.np-xpath-num, main.css): gold gradient fill, accent inner right/bottom borders, soft-gold digit, and a
   top-left radius matching the panel's own corner. Absolute (out of flow) so it owns the panel corner; the
   eyebrow clears it on the left and the title sits below it. */
.np-emap-step-num { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center;
    width: 2.65rem; height: 2.2rem; border-radius: var(--np-radius-lg, 20px) 0 12px 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--np-bp-accent) 28%, var(--np-bg-card)), color-mix(in srgb, var(--np-bp-accent) 9%, var(--np-bg-card)));
    border-right: 1px solid color-mix(in srgb, var(--np-bp-accent) 40%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--np-bp-accent) 40%, transparent);
    color: var(--np-bp-accent-soft); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.np-emap-step-eyebrow { display: block; padding-left: 1.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-text-muted); }
.np-emap-step-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.5rem 0 0.7rem; }
.np-emap-step-goal { font-size: 0.92rem; line-height: 1.6; color: var(--np-text-secondary); margin: 0 0 0.9rem; }
.np-emap-step-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.np-emap-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.3rem 0.6rem;
    border: 1px solid var(--np-border); border-radius: 8px; background: var(--np-card-surface); }
.np-emap-chip-k { color: var(--np-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; }
.np-emap-chip-v { color: var(--np-text-primary); font-weight: 600; }
/* The cards column header row also carries the top-right "Download full path PDF" action (a secondary,
   outline control — it must never compete with the primary bottom CTA). Flex so the label sits left and the
   button right; wraps cleanly when narrow. */
.np-emap-step-cards-hdr { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem 1rem;
    flex-wrap: wrap; font-size: 0.85rem; font-weight: 700; color: var(--np-text-secondary); margin-bottom: 0.7rem; }
.np-emap-step-cards-hdr-t { min-width: 0; }
/* Small/secondary export button (reuses .np-emap-btn: no-underline + border/bg hover already covered). */
.np-emap-step-pdf { font-size: 0.76rem; font-weight: 650; padding: 0.33rem 0.68rem; border-radius: 9px;
    color: var(--np-text-secondary); }
.np-emap-step-pdf:hover { color: var(--np-text-primary); }
.np-emap-step-pdf:focus-visible { outline: 2px solid var(--np-brand, #635bff); outline-offset: 2px; }
/* Keep the button optically centred (.np-emap-btn align-items:center is untouched); the small download
   glyph is inset inside its own viewBox, so it reads a touch high — settle just this icon so its visible
   bottom sits level with the text baseline: translateY nudges it down, and margin-bottom trims the
   centred slot from beneath so the glyph lands exactly on the baseline. Scoped to this one button only
   (.np-emap-step-pdf is unique to it — no other button is affected); size/line-height/padding unchanged.
   flex-shrink:0 keeps the icon from squashing when the label wraps. */
.np-emap-step-pdf svg { width: 13px; height: 13px; transform: translateY(1px); margin-bottom: 2px; flex-shrink: 0; }
.np-emap-rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; }
/* Workflow / Resource / Tool support cards — the same component as the global project card (.np-card):
   a NEUTRAL card border plus a left accent STRIPE rendered as a ::before (it follows the card radius —
   it is NOT the card's border, so the corners never look flat-cut). Only --np-rcard-accent + the type
   label colour change per tier; the body, border, radius, and hover are identical across all three. */
.np-emap-rcard { --np-rcard-accent: var(--np-text-muted); position: relative; display: flex; flex-direction: column;
    gap: 0.22rem; padding: 0.85rem 0.95rem; min-width: 0;
    background: var(--np-card-surface); border: 1px solid var(--np-card-border);
    border-radius: var(--np-radius); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.np-emap-rcard::before { content: ""; position: absolute; left: 0; top: 1.5px; bottom: 1.5px; width: 3px;
    border-radius: 1.5px 0 0 1.5px; background: var(--np-rcard-accent); pointer-events: none; }
/* Hover lifts the surface and brightens the neutral border to a soft accent (like the project cards) —
   it never removes the border, never goes borderless, and never weakens the accent stripe. */
.np-emap-rcard:hover { background: var(--np-bg-hover); border-color: color-mix(in srgb, var(--np-rcard-accent) 50%, transparent); }
.np-emap-rcard-type { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.np-emap-rcard-name { font-size: 0.92rem; font-weight: 700; color: var(--np-text-primary); line-height: 1.25; overflow-wrap: anywhere; }
.np-emap-rcard-desc { font-size: 0.78rem; line-height: 1.45; color: var(--np-text-secondary); }
.np-emap-rcard--pb   { --np-rcard-accent: var(--np-pb-accent); }   .np-emap-rcard--pb .np-emap-rcard-type   { color: var(--np-pb-accent); }
.np-emap-rcard--res  { --np-rcard-accent: var(--np-res-accent); }  .np-emap-rcard--res .np-emap-rcard-type  { color: var(--np-res-soft, var(--np-res-accent)); }
.np-emap-rcard--tool { --np-rcard-accent: var(--np-tool-accent); } .np-emap-rcard--tool .np-emap-rcard-type { color: var(--np-tool-accent-light, var(--np-tool-accent)); }
.np-emap-rcards-empty { font-size: 0.85rem; color: var(--np-text-muted); margin: 0; }

/* ── Bottom CTA row ─────────────────────────────────────── */
.np-emap-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0.5rem; }
.np-emap-cta--split { justify-content: space-between; align-items: center; }
.np-emap-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 650;
    padding: 0.6rem 1.1rem; border-radius: 10px; border: 1px solid var(--np-border); color: var(--np-text-primary); background: transparent; }
.np-emap-btn:hover { border-color: rgba(255,255,255,0.2); background: var(--np-bg-hover); }
.np-emap-btn--primary { background: linear-gradient(180deg, var(--np-brand-light), var(--np-brand)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(99,91,255,0.28); }
.np-emap-btn--primary:hover { background: linear-gradient(180deg, var(--np-brand-light), var(--np-brand)); }

/* Permanent component standard: Execution Maps button-/card-/node-style links never underline (their
   hover cue is border/background, not an underline). Any NEW control using these classes inherits this,
   so the underline problem can't reappear. Inline text links in copy keep the global hover underline. */
.np-emap-btn,   .np-emap-btn:hover,   .np-emap-btn:focus,   .np-emap-btn:active,   .np-emap-btn:visited,
.np-emap-rcard, .np-emap-rcard:hover, .np-emap-rcard:focus, .np-emap-rcard:active, .np-emap-rcard:visited,
.np-emap-node,  .np-emap-node:hover,  .np-emap-node:focus { text-decoration: none; }

/* ── Mobile fullscreen map viewer — auto-opened on mobile on load. Opaque, above the header; shows only
      the map + a "rotate" hint + a Close link back to the project. No zoom/fit and no orientation lock. ── */
.np-emap-mapview { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--np-bg); }
.np-emap-mapview[hidden] { display: none; }
.np-emap-mapview-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--np-border); background: rgba(17,19,24,0.92); }
.np-emap-mapview-hint { font-size: 0.8rem; color: var(--np-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-emap-mapview-close { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; height: 34px; padding: 0 0.95rem;
    font-size: 0.82rem; font-weight: 750; border-radius: 9px; cursor: pointer;
    background: var(--np-bp-accent-dim); border: 1px solid var(--np-bp-accent-bd); color: var(--np-bp-accent-soft); }
.np-emap-mapview-close, .np-emap-mapview-close:hover, .np-emap-mapview-close:focus, .np-emap-mapview-close:visited { text-decoration: none; }
.np-emap-mapview-close:hover { background: rgba(245,183,60,0.18); border-color: var(--np-bp-accent); }
.np-emap-mapview-close svg { width: 15px; height: 15px; }
.np-emap-mapview-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.9rem; overflow: auto; }
.np-emap-mapview-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* While the mobile viewer is open, lock scroll AND take the detail page out of view, so the desktop map /
   selected-step panel / actions can never show or scroll behind the overlay (e.g. after a desktop→mobile
   resize). Gated on the JS-set .np-emap-lock class — the viewer needs JS to render its canvas anyway — so
   the no-JS inline page stays as the fallback. The viewer is a sibling of .np-emap-detail-page, not a child,
   so it is unaffected. */
body.np-emap-lock { overflow: hidden; }
body.np-emap-lock .np-emap-detail-page { display: none; }
/* In landscape the map is already readable, so drop the rotate hint. */
@media (orientation: landscape) { .np-emap-mapview-hint { display: none; } }

/* ── Future Workspace teaser (soft, inert) ──────────────── */
.np-emap-ws { display: flex; align-items: center; gap: 0.95rem; margin-top: 1.6rem;
    border: 1px solid var(--np-bp-accent-bd); border-radius: var(--np-radius);
    background: linear-gradient(180deg, rgba(245,183,60,0.06), var(--np-card-surface)); padding: 0.9rem 1.2rem; }
.np-emap-ws-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
    background: var(--np-bp-accent-dim); border: 1px solid var(--np-bp-accent-bd); color: var(--np-bp-accent); }
.np-emap-ws-ico svg { width: 22px; height: 22px; }
.np-emap-ws-t { font-size: 0.96rem; font-weight: 750; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.np-emap-ws-pill { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--np-bp-accent);
    border: 1px solid var(--np-bp-accent-bd); background: var(--np-bp-accent-dim); border-radius: 999px; padding: 0.12rem 0.5rem; }
.np-emap-ws-d { font-size: 0.82rem; color: var(--np-text-secondary); margin-top: 0.1rem; }

/* ── Mobile (inline page = no-JS fallback): phase lanes stack into a vertical list; no horizontal scroll,
      no arrows. The title-row "Download map" is desktop-only (mobile opens the map in the viewer). ── */
@media (max-width: 860px) {
    .np-emap-action-dl { display: none; }
    .np-emap-lane { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.05rem 0; }
    .np-emap-lane-track { gap: 0.95rem; }
    .np-emap-node { flex: 1 1 100%; max-width: none; }
    .np-emap-node--arrow::after { display: none; }
    .np-emap-step-head { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 600px) {
    .np-emap-page { padding: 1.75rem 0 3rem; }
    .np-emap-detail-page { padding-top: 1.25rem; }
    .np-emap-v2 { padding: 1rem 1rem 0.25rem; }
    .np-emap-step { padding: 1.2rem 1.1rem; }
    .np-emap-cta--split { flex-direction: column; align-items: stretch; }
    .np-emap-btn { justify-content: center; }
    /* The full-path PDF export drops to a comfortable full-width tap target under the step heading. */
    .np-emap-step-cards-hdr { align-items: stretch; }
    .np-emap-step-pdf { width: 100%; }
    /* When the title row wraps, the actions drop to their own line — align left, not floated right. */
    .np-emap-v2-actions { margin-left: 0; }
}