/* DA Blueprint mini-app — design-elevation system:
   cool ink neutrals with DA blue as the accent. The signature element is the
   dark radial ink hero holding the vertical constellation (the tab's single
   dark panel); everything below is white cards on the #F6F9FB canvas. */

:root{
  --primary:#1B9ED9;
  --primary-light:#53B6E2;
  --ink:#07202E;
  --ink2:#0B3A52;
  --ink-deep:#04121B;
  --link:#146D97;
  --accent:#EAF4FA;
  --bg:#F6F9FB;
  --bg2:#EDF3F6;
  --card-bg:#fff;
  --text:#10222B;
  --text2:#5C7481;
  --muted2:#7B919C;
  --micro:#7E96A3;
  --border:#D9E3E9;
  --hairline:#E9F0F4;
  --shadow:0 1px 2px rgba(7,32,46,.05);
  --amber:#6E5A1E;--amber-bg:#F3EEDC;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;overflow-y:auto;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
/* Full-width like the host report (user call 2026-08-19: no dead side margins). */
.bp-page{margin:0 auto;padding:26px 30px 40px}

/* ── Dark radial hero (copy left, constellation right) ── */
.bp-hero{position:relative;overflow:hidden;border-radius:20px;color:#EAF6FC;
  background:radial-gradient(1100px 520px at 50% 38%, var(--ink2) 0%, var(--ink) 55%, var(--ink-deep) 100%);
  box-shadow:0 10px 34px rgba(4,18,27,.45);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,46%);align-items:center;gap:24px;padding:34px 38px;margin-bottom:26px}
.bp-eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FD0F2}
.bp-live-dot{width:7px;height:7px;border-radius:50%;background:var(--primary-light);animation:bpBlink 2.4s infinite}
.bp-hero h1{font-size:32px;font-weight:800;letter-spacing:-.022em;color:#fff;line-height:1.05;margin:10px 0 10px}
.bp-tagline{font-size:13px;line-height:1.7;color:#9FC3DC;max-width:470px;margin:0}
.bp-hero-meta{display:flex;align-items:center;gap:22px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.bp-hm-l{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#7A96A6}
.bp-hm-v{font-size:15px;font-weight:700;color:#fff;margin-top:3px}
.bp-hm-sep{width:1px;height:32px;background:rgba(255,255,255,.14)}

/* ── Constellation (fixed 440x330 stage inside the hero) ── */
.bp-map-wrap{position:relative}
.bp-map{position:absolute;top:0;left:0;width:480px;height:360px;transform-origin:top left}
.bp-map svg{position:absolute;inset:0}
/* DIRECT CHILD ONLY. This styles the spoke connectors, which live in the one
   svg that is a direct child of .bp-map. As a descendant selector it also hit
   the <path> inside each locked node's padlock and repainted the shackle as a
   faint dashed 1.5px spoke, invisible at node size, while the <rect> body was
   never matched -- so the glyph rendered as a bare rounded rectangle. CSS beats
   the element's own stroke="currentColor" attribute, which is what made it so
   hard to see. */
.bp-map > svg path{stroke:rgba(127,208,242,.28);stroke-width:1.5;fill:none;stroke-dasharray:2 10;stroke-linecap:round;animation:bpDash 2.6s linear infinite}
.bp-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.bp-ring-a{width:340px;height:340px;border:1px dashed rgba(127,208,242,.16);animation:bpSpin 140s linear infinite}
.bp-ring-b{width:260px;height:260px;border:1px dashed rgba(127,208,242,.22);animation:bpSpinBack 96s linear infinite}
.bp-hub{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:50%;background:radial-gradient(circle at 38% 32%, #7FD0F2 0%, var(--primary) 58%, #0B4A66 100%);
  box-shadow:0 0 52px rgba(27,158,217,.45);animation:bpGlow 4.2s ease-in-out infinite;color:#fff}
.bp-hub-n{font-size:13px;font-weight:800;letter-spacing:-.008em;line-height:1.25;max-width:104px}
.bp-hub-l{font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:5px}
.bp-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;padding:0;font-family:inherit;cursor:pointer;animation:bpDrift 6.4s ease-in-out infinite}
.bp-node-c{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.bp-node-c::after{content:'';width:34%;height:34%;border-radius:50%;background:rgba(207,235,248,.75)}
.bp-node:hover .bp-node-c{border-color:rgba(127,208,242,.85)}
.bp-node.sel .bp-node-c{background:rgba(27,158,217,.30);border-color:rgba(127,208,242,.85);box-shadow:0 0 0 8px rgba(83,182,226,.16)}
.bp-node.sel .bp-node-c::after{width:44%;height:44%;background:#fff}
.bp-node-pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(127,208,242,.75);animation:bpPulse 2.8s ease-out infinite}
.bp-node-l{font-size:10.5px;font-weight:600;color:#9FC3DC;white-space:nowrap;line-height:1.2}
.bp-node.sel .bp-node-l{color:#fff;font-weight:700}
.bp-node.dim{opacity:.55}
.bp-node.dim:hover{opacity:.85}
.bp-node:focus-visible .bp-node-c{outline:2px solid var(--primary-light);outline-offset:3px}

/* ── Selected vertical ── */
.bp-vert{margin-top:22px}
.bp-vert-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 2px 5px}
.bp-vert-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--micro)}
.bp-vert-title{font-size:20px;font-weight:800;letter-spacing:-.018em;color:var(--ink);margin:5px 0 0}
.bp-vert-meta{font-size:12px;color:var(--muted2)}
.bp-vert-sum{font-size:12.5px;color:var(--text2);line-height:1.6;margin:2px 2px 12px;max-width:860px}
.bp-cats{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto;scrollbar-width:thin}
.bp-cat{padding:9px 16px;font-size:12.5px;font-weight:500;font-family:inherit;color:#6C838F;background:none;border:none;
  border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;white-space:nowrap}
.bp-cat:hover{color:var(--text)}
.bp-cat.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.bp-cat-blurb{font-size:12.5px;color:var(--text2);margin:-4px 2px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bp-cat-count{font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--micro);white-space:nowrap}

.bp-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));gap:14px;align-items:stretch}
.bp-ins{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  padding:0 0 16px;overflow:hidden;display:flex;flex-direction:column;gap:12px;transition:box-shadow .18s ease,border-color .18s ease}
/* Numbered header band, matching the OS tab's Forward Strategy card tops. */
.bp-ins-h{background:linear-gradient(120deg,#000000,#0B5E8C);color:#fff;padding:11px 18px;display:flex;align-items:center;gap:12px}
.bp-ins-n{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.bp-ins-hl{font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bp-ins-t,.bp-ins-meta{padding-left:18px;padding-right:18px}
.bp-ins:hover{border-color:#BBD2DF;box-shadow:0 10px 26px -14px rgba(7,32,46,.35)}
.bp-ins-t{font-size:12.5px;line-height:1.65;color:var(--text)}
.bp-ins-t b{color:var(--ink);font-weight:700}
.bp-ins-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:11px;border-top:1px solid var(--hairline)}
.bp-chip{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.bp-chip-when{color:var(--text2);background:var(--bg2);border:1px solid var(--border)}
.bp-chip-brands{color:var(--text2);background:var(--bg2);border:1px solid var(--border)}
.bp-conf-confirmed{color:var(--link);background:rgba(27,158,217,.10)}
.bp-conf-estimate{color:var(--text2);background:var(--bg2);border:1px solid var(--border)}
.bp-conf-inference{color:var(--link);background:transparent;border:1px solid rgba(27,158,217,.4)}
.bp-conf-open-question{color:var(--amber);background:var(--amber-bg)}

/* Non-featured vertical state */
.bp-building{background:var(--card-bg);border:1px dashed var(--border);border-radius:12px;padding:28px;
  grid-column:1/-1;text-align:center;color:var(--text2);font-size:13px;line-height:1.7}
.bp-building b{color:var(--text)}

/* ── Trust strip ── */
.bp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.bp-trust-step{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px}
.bp-trust-e{font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--micro);margin-bottom:7px}
.bp-trust-t{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.bp-trust-b{font-size:12px;line-height:1.65;color:var(--text2)}

.bp-foot{font-size:11px;color:var(--muted2);line-height:1.6;margin:20px 2px 0;max-width:900px}
.bp-foot b{color:var(--text2)}

@keyframes bpDash{to{stroke-dashoffset:-36}}
@keyframes bpBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes bpPulse{0%{transform:scale(.9);opacity:.75}70%,100%{transform:scale(2);opacity:0}}
@keyframes bpSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bpSpinBack{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes bpDrift{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-4px)}}
@keyframes bpGlow{0%,100%{box-shadow:0 0 55px rgba(27,158,217,.45)}50%{box-shadow:0 0 95px rgba(83,182,226,.8)}}

@media (max-width:1100px){
  .bp-hero{grid-template-columns:1fr;padding:24px 22px}
  .bp-trust{grid-template-columns:1fr}
  .bp-hero h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .bp-ins,.bp-ins:hover{transform:none}
}

/* Locked verticals: visible as the scale behind this account's intelligence,
   not openable. They are other clients' playbooks. A padlock sits in the circle
   in place of the centre dot, so the state reads at a glance rather than
   looking like a node that failed to load. */
.bp-node.locked{cursor:default}
.bp-node.locked .bp-node-c{background:rgba(207,235,248,.05);border-color:rgba(168,200,222,.5);box-shadow:none;color:#A8C6DC}
.bp-node.locked .bp-node-c::after{display:none}      /* the padlock replaces the dot */
.bp-node.locked:hover .bp-node-c{border-color:rgba(168,200,222,.5)}
.bp-node.locked .bp-node-l{color:#8FAEC4}
.bp-node-lock{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
/* SINGLE SOURCE OF TRUTH for the glyph's weight. 1.6 in a 26-unit viewBox
   renders ~2.1px in a 34px node: crisp without looking bulky. This rule also
   pins stroke and dasharray so no map-wide svg rule can repaint it again. */
.bp-node-lock path,.bp-node-lock rect{stroke:currentColor;stroke-width:1.6;fill:none;stroke-dasharray:none;animation:none}