/* ==========================================================
   Capabilities hub (/capabilities) — interactive capability map,
   aligned to the platform design system. Reuses the shared step-card
   entity rows (.np-xpath-link--workflow / --project from main.css, green
   workflows / gold projects, hover follows the destination entity) and the
   four tier accent tokens. Page-scoped np-capabilities-* chrome only — no
   global card/grid changes. Family map = a tabbed explorer (left selector +
   stable right panel) so switching families never reflows the page.
   ========================================================== */

.np-capabilities-page { padding: 2.5rem 0 4.5rem; color: var(--np-text-primary); }

/* Colour discipline: counts and metadata stay neutral. Hue is reserved for the entity rows
   (.np-xpath-link--workflow green / --project gold from main.css) and their hovers, so colour
   always signals entity type rather than decorating numbers. */

/* ── Hero ─────────────────────────────────────────────── */
.np-capabilities-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.75rem 2.25rem; align-items: center;
    padding: 1.9rem 2rem; margin-bottom: 2.5rem;
    border: 1px solid var(--np-border); border-radius: 20px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(99,91,255,0.16), transparent 60%),
        linear-gradient(180deg, rgba(99,91,255,0.05), var(--np-bg-card));
}
.np-capabilities-hero-main { min-width: 0; }
.np-capabilities-eyebrow { display: inline-block; margin-bottom: 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-accent-light, #7c75ff); }
.np-capabilities-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.np-capabilities-sub { font-size: 1.0rem; line-height: 1.6; color: var(--np-text-secondary); margin: 0 0 0.8rem; }
.np-capabilities-intro { font-size: 0.9rem; line-height: 1.6; color: var(--np-text-muted); margin: 0; }

.np-capabilities-hero-side { min-width: 0; }
.np-capabilities-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.np-capabilities-metric { min-width: 0; padding: 0.8rem 0.9rem; text-align: center; border: 1px solid var(--np-border); border-radius: 13px; background: rgba(255,255,255,0.02); }
.np-capabilities-metric strong { display: block; font-size: 1.4rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.np-capabilities-metric span { display: block; margin-top: 0.3rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--np-text-muted); }
/* All four metrics share the neutral base — these are a summary, not entity cards, so no green/gold tint. */

/* Distribution strip: a soft single-hue helper (purple family share), not entity-split, kept low-contrast. */
.np-capabilities-spectrum { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.np-capabilities-spectrum-seg { display: block; height: 100%; border-radius: 3px; background: var(--np-accent-light, #7c75ff); opacity: 0.5; }
.np-capabilities-spectrum-seg:nth-child(even) { opacity: 0.34; }
.np-capabilities-spectrum-cap { margin: 0.5rem 0 0; font-size: 0.7rem; color: var(--np-text-muted); }

/* ── Section headings ─────────────────────────────────── */
.np-capabilities-section-title { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.015em; margin: 0 0 0.3rem; }
.np-capabilities-section-sub { font-size: 0.86rem; line-height: 1.55; color: var(--np-text-secondary); margin: 0 0 1.1rem; max-width: 70ch; }

/* ── Flow visual: Capabilities → Workflows → Project Paths ──────
   One schematic block (3 nodes + connectors) showing how reusable capabilities compose into workflows and
   guided project paths. Entity accent is limited to each node's title dot + link hover; the capability
   chips are soft purple and are NOT links. */
.np-capflow { margin-bottom: 2.75rem; }
.np-capflow .np-capabilities-section-title { margin-bottom: 0.3rem; }
.np-capflow-track { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.6rem; margin-top: 1.1rem; }
.np-capflow-node {
    min-width: 0; display: flex; flex-direction: column;
    padding: 1.15rem 1.2rem; border: 1px solid var(--np-border); border-radius: var(--np-radius);
    background: var(--np-bg-card);
}
/* Entity identity is carried by the small title dot below (purple / workflow green / project gold); the
   card's border and background stay the neutral standard, matching the Projects cards. */
.np-capflow-node-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0rem; font-weight: 750; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.np-capflow-node-title::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }
.np-capflow-node--cap .np-capflow-node-title::before { background: var(--np-accent-light, #7c75ff); }
.np-capflow-node--wf  .np-capflow-node-title::before { background: var(--np-pb-accent); }
.np-capflow-node--pj  .np-capflow-node-title::before { background: var(--np-bp-accent); }
.np-capflow-node-desc { font-size: 0.83rem; line-height: 1.5; color: var(--np-text-secondary); margin: 0 0 0.9rem; }
.np-capflow-eg { margin: 0 0 0.45rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--np-text-muted); }

/* Capability examples — soft-purple pills, not links (no pointer, no link hover). */
.np-capflow-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; }
.np-capflow-chip { font-size: 0.74rem; font-weight: 600; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid rgba(124,117,255,0.25); background: rgba(124,117,255,0.09); color: var(--np-accent-light, #7c75ff); }

/* Workflow / project examples — real links into the catalogue; entity-coloured hover only. */
.np-capflow-links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; }
.np-capflow-link { display: block; padding: 0.45rem 0.6rem; border-radius: 9px; font-size: 0.83rem; font-weight: 650; color: var(--np-text-secondary); text-decoration: none; border: 1px solid var(--np-border); background: rgba(255,255,255,0.015); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.np-capflow-link:hover { text-decoration: none; }
.np-capflow-node--wf .np-capflow-link:hover { color: var(--np-pb-accent-soft); border-color: var(--np-pb-accent-bd); background: var(--np-pb-accent-dim); }
.np-capflow-node--pj .np-capflow-link:hover { color: var(--np-bp-accent-soft); border-color: var(--np-bp-accent-bd); background: var(--np-bp-accent-dim); }
.np-capflow-link:focus-visible { outline: 2px solid var(--np-border-focus, #635bff); outline-offset: 2px; }

.np-capflow-arrow { display: flex; align-items: center; justify-content: center; color: var(--np-text-muted); }

/* ── Capability map — tabbed family explorer ──────────── */
.np-capabilities-map .np-capabilities-section-title { margin-bottom: 0.3rem; }
.np-capabilities-explorer { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 0.75rem; }

/* Family selector (left) — compact navigation (family name only). Counts live in the detail panel, so
   the list stays short and calm; selected state reads from a purple left stripe, not colour on text. */
.np-capabilities-tablist { display: flex; flex-direction: column; gap: 0.4rem; }
.np-capabilities-tab {
    position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 0.7rem 0.85rem; border: 1px solid var(--np-border); border-radius: var(--np-radius-sm);
    background: var(--np-bg-card); color: inherit; font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.np-capabilities-tab:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.02); }
.np-capabilities-tab:focus-visible { outline: 2px solid var(--np-border-focus, #635bff); outline-offset: 2px; }
/* Selected = neutral standard chrome (slightly brighter border + subtle lift) plus a left accent strip
   that is byte-identical to the project card's (.np-card--featured::before): a full-height ::before pinned
   top:1.5px / bottom:1.5px (the 1.5px just tucks it inside the 1px border — it reads as the card's full
   height, no top/bottom gap) with a 1.5px left radius to follow the corner. NOT an inset box-shadow (which
   bows at the corners), and the card's own border stays neutral. */
.np-capabilities-tab--sel { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); }
.np-capabilities-tab--sel::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-accent, #635bff); pointer-events: none; }
.np-capabilities-tab-name { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.np-capabilities-tab--sel .np-capabilities-tab-name { font-weight: 750; }

/* Detail panel (right) — stays in place; only one is visible. min-height keeps the area stable. */
.np-capabilities-panels { min-width: 0; }
.np-capabilities-panel { min-width: 0; min-height: 320px; padding: 1.2rem 1.3rem; border: 1px solid var(--np-border); border-radius: var(--np-radius); background: var(--np-bg-card); }
.np-capabilities-panel[hidden] { display: none; }
.np-capabilities-panel-head { margin-bottom: 0.5rem; }
.np-capabilities-panel-title { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
/* Family counts surface here (not on the left tabs) as neutral metadata. */
.np-capabilities-panel-counts { font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--np-text-muted); }
/* One soft, single-hue coverage bar (project footprint) — a calm helper, not entity-split. */
.np-capabilities-panel-bar { display: block; max-width: 240px; height: 4px; margin-top: 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.np-capabilities-panel-bar > span { display: block; height: 100%; border-radius: 999px; background: rgba(124,117,255,0.55); }

/* Capability chips inside a panel — NOT links (no pointer cursor, no link-like hover). */
.np-capabilities-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; margin: 0.9rem 0 1.1rem; }
.np-capabilities-chip-card { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem; border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); background: rgba(255,255,255,0.015); }
.np-capabilities-chip-name { font-size: 0.88rem; font-weight: 700; color: var(--np-text-primary); overflow-wrap: anywhere; }
.np-capabilities-chip-desc { font-size: 0.78rem; line-height: 1.45; color: var(--np-text-secondary); }
.np-capabilities-chip-counts { margin-top: auto; font-size: 0.68rem; font-weight: 700; color: var(--np-text-muted); font-variant-numeric: tabular-nums; }

/* ── Project Advisor CTA ──────────────────────────────── */
.np-capabilities-cta {
    margin-top: 3rem; padding: 1.4rem 1.6rem;
    border: 1px solid var(--np-border); border-radius: 16px;
    background: radial-gradient(120% 160% at 0% 0%, rgba(99,91,255,0.12), transparent 60%), var(--np-bg-card);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.np-capabilities-cta-text { margin: 0; font-size: 0.97rem; color: var(--np-text-secondary); }
.np-capabilities-cta-link { font-size: 0.92rem; font-weight: 650; color: var(--np-accent-light, #7c75ff); text-decoration: none; white-space: nowrap; }
.np-capabilities-cta-link:hover { color: var(--np-text-primary); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .np-capabilities-tab, .np-capflow-link { transition: none; } }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 860px) {
    .np-capabilities-hero { grid-template-columns: 1fr; padding: 1.6rem 1.4rem; }
    /* Tablist → horizontal scroll chips above the panel; the panel sits below at natural height. */
    .np-capabilities-explorer { grid-template-columns: 1fr; }
    .np-capabilities-tablist { flex-direction: row; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; }
    .np-capabilities-tab { flex: 0 0 auto; width: auto; min-width: 175px; }
    .np-capabilities-panel { min-height: 0; }
    /* Flow visual stacks vertically; connector arrows rotate to point downward between the nodes. */
    .np-capflow-track { grid-template-columns: 1fr; }
    .np-capflow-arrow svg { transform: rotate(90deg); }
    .np-capflow-chips, .np-capflow-links { margin-top: 0.2rem; }
}
@media (max-width: 639px) {
    .np-capabilities-page { padding: 1.75rem 0 3.5rem; }
    .np-capabilities-hero { padding: 1.4rem 1.15rem; margin-bottom: 2rem; }
    .np-capabilities-metric { padding: 0.7rem 0.55rem; }
    .np-capabilities-metric strong { font-size: 1.2rem; }
    .np-capflow { margin-bottom: 2.25rem; }
    .np-capabilities-chips { grid-template-columns: 1fr; }
    .np-capabilities-cta { margin-top: 2.25rem; }
}