/* Bambu OS — Front-Door access map (os-frontdoor-map.css).
   ───────────────────────────────────────────────────────────────────────────
   A READ-ONLY, security-filtered port of the admin Command Center map styles
   (admin/assets/os-map.css). Ported blocks ONLY: board (dark), lanes, nodes,
   edges, detail panel, legend, toggles. Dropped: lattice / matrix / compare /
   narrative / insights / cell-detail / fund-scope / edit-families / print.

   FULLY SELF-CONTAINED: os-map.css inherits ~23 theme tokens from
   internal/assets/app.css. We redefine every token we use here, scoped under
   #osfd-root, with the exact values from internal/assets/app.css, plus the .osm
   audience seeds. The front door has no external CSS dependency.
   ───────────────────────────────────────────────────────────────────────────*/

/* ── theme tokens (scoped) — values copied from internal/assets/app.css ── */
#osfd-root{
  /* indigo / royal / blue ramp */
  --indigo-900:#0A1133; --indigo-800:#0E1542;
  --royal-600:#1826B0; --royal:#1F2ED6; --royal-400:#4654E6;
  --blue-300:#8A93F0; --blue-200:#C5CAF8;
  /* ink / text / muted */
  --ink:#0E1542; --text:#1A1E2C; --muted:#5A6072; --muted-2:#878D9E;
  --canvas:#F4F5FB;
  --line:#E7E9F3; --line-2:#D6DAEC;
  --gold:#C6A86B;
  /* status */
  --ok:#1F9D5B; --ok-bg:#E7F6EE; --warn:#C6892B; --warn-bg:#FBF1DF;
  --info-bg:#ECEEFD; --danger:#D64550;
  /* type */
  --mont:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --inter:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* audience seeds (the .osm:{} block from os-map.css) */
  --osm-pub:#2BB673; --osm-int:#4654E6; --osm-ext:#C6A86B; --osm-both:#8A93F0; --osm-sys:#C5CAF8;
}

/* ── intro ── */
/* the hero sits on the dark page (outside the white toolbar/detail bars) — use light text */
#osfd-root .osfd-hero{margin-bottom:16px}
#osfd-root .osfd-hero h2{font-family:var(--mont);font-weight:800;font-size:19px;color:#fff;margin:0 0 5px}
#osfd-root .osfd-hero p{font-size:13px;color:var(--blue-200);line-height:1.55;margin:0;max-width:880px;opacity:.85}
#osfd-root .osfd-previewing{margin:9px 0 0;font:600 12px var(--inter);color:var(--gold);opacity:1}
#osfd-root .osfd-previewing b{color:#fff}
#osfd-root .osfd-exit-preview{color:var(--blue-300);font-weight:600;text-decoration:none;margin-left:6px}
#osfd-root .osfd-exit-preview:hover{color:#fff}

/* ── status / loading / errors ── */
#osfd-root .osfd-status{padding:26px 22px;text-align:center;font:600 13px var(--inter);color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:14px}
#osfd-root .osfd-status--err{color:#6b5a2e;background:var(--warn-bg);border-color:#ebd9b0;border-left:3px solid var(--warn);text-align:left}
#osfd-root .osfd-status__retry{margin-left:12px;font:700 12px var(--inter);color:#fff;background:var(--royal);border:0;border-radius:8px;padding:6px 13px;cursor:pointer}
#osfd-root .osfd-status__retry:hover{background:var(--royal-600)}

/* ── toolbar: legend + spine/gov toggles ── */
#osfd-root .osfd-toolbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px;
  padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(14,21,66,.04)}
#osfd-root .osfd-legend{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
#osfd-root .osfd-leg{display:inline-flex;align-items:center;gap:7px;font:600 11.5px var(--inter);color:var(--muted)}
#osfd-root .osfd-leg .sw{width:13px;height:13px;border-radius:4px;flex-shrink:0}
#osfd-root .osfd-leg .ln{width:22px;height:0;flex-shrink:0}
#osfd-root .osfd-leg .ln.flow{border-top:2.5px solid var(--royal-400)}
#osfd-root .osfd-leg__div{width:1px;height:16px;background:var(--line)}
#osfd-root .osfd-tb-sep{flex:1;min-width:8px}
#osfd-root .osfd-toggle{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--inter);color:var(--muted);
  cursor:pointer;user-select:none;border:1px solid var(--line);border-radius:100px;padding:4px 12px;transition:.14s}
#osfd-root .osfd-toggle:hover{border-color:var(--royal);color:var(--royal)}
#osfd-root .osfd-toggle input{width:14px;height:14px;accent-color:var(--royal);cursor:pointer;margin:0}
#osfd-root .osfd-toggle.on{border-color:var(--royal);color:var(--royal);background:rgba(31,46,214,.05)}
/* admin-only "View as" persona dropdown (in the light toolbar bar) */
#osfd-root .osfd-viewas-l{display:inline-flex;align-items:center;gap:7px;font:600 11.5px var(--inter);color:var(--muted);white-space:nowrap}
#osfd-root .osfd-viewas{font:600 11.5px var(--inter);color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;cursor:pointer}
#osfd-root .osfd-viewas:focus{outline:2px solid var(--royal-400);outline-offset:1px}

/* ── diagram board (dark) ── */
#osfd-root .osfd-board{position:relative;border-radius:16px;overflow:hidden;padding:8px 18px 24px;
  background:radial-gradient(1100px 600px at 50% -8%,#1a2a8f 0%,var(--indigo-800) 48%,var(--indigo-900) 100%);
  border:1px solid rgba(138,147,240,.22);margin-bottom:18px}
#osfd-root .osfd-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* edges HIDDEN by default — a portal's connections show only on hover/select (.hl), or as an explicit
   spine/gov overlay via the toggles. No always-on data-flow arrows. */
#osfd-root .osfd-svg path.edge{fill:none;stroke:rgba(138,147,240,.42);stroke-width:1.6;opacity:0;transition:stroke .15s,opacity .15s,stroke-width .15s}
#osfd-root .osfd-svg path.edge.spine{stroke:rgba(168,177,245,.75);stroke-width:1.9;stroke-dasharray:5 4;display:none}
#osfd-root .osfd-svg path.edge.gov{stroke:rgba(214,182,122,.82);stroke-width:1.9;stroke-dasharray:2 5;display:none}
#osfd-root .osfd-board.show-spine .osfd-svg path.edge.spine{display:block;opacity:1}
#osfd-root .osfd-board.show-gov   .osfd-svg path.edge.gov{display:block;opacity:1}
#osfd-root .osfd-svg path.edge.hl{stroke:var(--gold);stroke-width:2.6;opacity:1 !important;display:block}
#osfd-root .osfd-elabel{font:600 9.5px var(--inter);fill:#C5CAF8;opacity:0;transition:opacity .15s}
#osfd-root .osfd-elabel.hl{opacity:.95}

/* lanes (= families) */
#osfd-root .osfd-tier{position:relative;z-index:2;display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px dashed rgba(138,147,240,.14)}
#osfd-root .osfd-tier:last-child{border-bottom:none}
#osfd-root .osfd-tier__label{font-family:var(--mont)}
#osfd-root .osfd-tier__label .t{font:800 12px var(--mont);letter-spacing:.04em;color:#fff;display:block;line-height:1.2}
/* super-portal (lane) colour bar = the family colour */
#osfd-root .osfd-tier__label .bar{width:36px;height:4px;border-radius:3px;margin-top:8px;background:var(--fam,var(--royal-400))}
#osfd-root .osfd-tier__nodes{display:flex;flex-wrap:wrap;gap:12px}

@media(max-width:880px){
  #osfd-root .osfd-tier{grid-template-columns:1fr;gap:8px}
  #osfd-root .osfd-tier__label .bar{display:none}
}

/* node card */
#osfd-root .osfd-node{position:relative;z-index:2;display:flex;flex-direction:column;cursor:pointer;
  width:178px;min-height:104px;padding:13px 14px 12px;border-radius:13px;text-align:left;
  background:rgba(255,255,255,.055);border:1px solid rgba(138,147,240,.22);
  color:#fff;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s,opacity .15s;
  appearance:none;font-family:inherit;overflow:hidden}
#osfd-root .osfd-node::before{content:"";position:absolute;left:0;top:5px;bottom:0;width:3px;background:var(--royal-400)}
/* top bar = portal-family colour; clipped to the rounded top by overflow:hidden */
#osfd-root .osfd-node::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--fam,var(--royal-400))}
#osfd-root .osfd-node[data-aud="public"]::before{background:var(--osm-pub)}
#osfd-root .osfd-node[data-aud="internal"]::before{background:var(--osm-int)}
#osfd-root .osfd-node[data-aud="external"]::before{background:var(--osm-ext)}
#osfd-root .osfd-node[data-aud="both"]::before{background:linear-gradient(180deg,var(--osm-int),var(--osm-ext))}
#osfd-root .osfd-node[data-aud="system"]::before{background:var(--osm-sys)}
#osfd-root .osfd-node:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);
  border-color:rgba(138,147,240,.6);box-shadow:0 24px 44px -26px rgba(0,0,0,.7)}
#osfd-root .osfd-node__top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
#osfd-root .osfd-node__no{font:700 9.5px var(--mont);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#osfd-root .osfd-node__dot{margin-left:auto;width:7px;height:7px;border-radius:50%;flex-shrink:0}
#osfd-root .osfd-node__dot.live{background:#7BE0A8;box-shadow:0 0 6px rgba(123,224,168,.8)}
#osfd-root .osfd-node__dot.proto{background:#F0D69B;box-shadow:0 0 6px rgba(240,214,155,.7)}
#osfd-root .osfd-node__ico{width:26px;height:26px;border-radius:8px;background:rgba(138,147,240,.16);
  border:1px solid rgba(138,147,240,.22);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
#osfd-root .osfd-node__ico svg{width:15px;height:15px;stroke:#fff;opacity:.92;fill:none;stroke-width:1.8}
#osfd-root .osfd-node__name{font:700 13.5px var(--mont);letter-spacing:-.01em;line-height:1.2;margin:0}
#osfd-root .osfd-node__badge{display:inline-block;margin-top:7px;font:700 8.5px var(--mont);letter-spacing:.06em;
  text-transform:uppercase;border-radius:100px;padding:2px 8px;align-self:flex-start}
#osfd-root .osfd-badge-public{color:#9ff0c4;background:rgba(43,182,115,.16);border:1px solid rgba(43,182,115,.4)}
#osfd-root .osfd-badge-internal{color:#bcc3ff;background:rgba(70,84,230,.2);border:1px solid rgba(70,84,230,.45)}
#osfd-root .osfd-badge-external{color:#f0d69b;background:rgba(198,168,107,.16);border:1px solid rgba(198,168,107,.45)}
#osfd-root .osfd-badge-both{color:#d7dcff;background:rgba(138,147,240,.18);border:1px solid rgba(138,147,240,.45)}
#osfd-root .osfd-badge-system{color:#e6e9ff;background:rgba(197,202,248,.16);border:1px solid rgba(197,202,248,.4)}
/* node states */
#osfd-root .osfd-node.is-dim{opacity:.26}
#osfd-root .osfd-node.is-conn{border-color:rgba(198,168,107,.7);background:rgba(255,255,255,.1)}
/* Customize (hide/show) — count badge on the toolbar button, per-card label, dimmed hidden card */
#osfd-root .osfd-cust__n{margin-left:7px;font:700 9.5px var(--mont);letter-spacing:.04em;color:var(--gold);background:rgba(224,169,59,.16);border:1px solid rgba(224,169,59,.45);border-radius:100px;padding:1px 7px}
#osfd-root .osfd-node__hide{position:absolute;top:8px;right:8px;z-index:3;pointer-events:none;font:700 9px var(--mont);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:100px;background:rgba(10,17,51,.9);border:1px solid rgba(138,147,240,.55);color:var(--blue-200)}
#osfd-root .osfd-node.is-cust-hidden{opacity:.4}
#osfd-root .osfd-node.is-cust-hidden .osfd-node__hide{color:#9ff0c4;border-color:rgba(43,182,115,.6)}
#osfd-root .osfd-node.is-sel{border-color:var(--gold);background:rgba(255,255,255,.13);
  box-shadow:0 0 0 1px var(--gold),0 24px 44px -26px rgba(0,0,0,.7)}

/* ── detail panel ── */
#osfd-root .osfd-detail{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:0;margin-bottom:18px;overflow:hidden;box-shadow:0 1px 2px rgba(14,21,66,.04)}
#osfd-root .osfd-detail__hd{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);
  background:var(--canvas)}
#osfd-root .osfd-detail__ico{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(31,46,214,.08);border:1px solid var(--line)}
#osfd-root .osfd-detail__ico svg{width:22px;height:22px;stroke:var(--royal);fill:none;stroke-width:1.8}
#osfd-root .osfd-detail__ttl{flex:1;min-width:0}
#osfd-root .osfd-detail__no{font:700 10px var(--mont);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#osfd-root .osfd-detail__name{font:800 18px var(--mont);color:var(--ink);margin:2px 0 0;letter-spacing:-.01em}
#osfd-root .osfd-detail__what{font-size:13px;color:var(--muted);line-height:1.5;margin:5px 0 0;max-width:760px}
#osfd-root .osfd-detail__open{flex-shrink:0;text-decoration:none;font:700 11px var(--mont);letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--royal);border-radius:9px;padding:9px 15px;transition:.14s;white-space:nowrap}
#osfd-root .osfd-detail__open:hover{background:var(--royal-600);transform:translateY(-1px)}
/* "what you see" external-view block */
#osfd-root .osfd-detail__view{padding:16px 22px;border-bottom:1px solid var(--line)}
#osfd-root .osfd-view__lbl{display:flex;align-items:center;gap:8px;font:700 11px var(--mont);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px;color:#9a7b32}
#osfd-root .osfd-view__lbl .tag{font:700 9px var(--mont);letter-spacing:.05em;border-radius:100px;padding:2px 8px;
  color:#9a7b32;background:var(--warn-bg);border:1px solid #ebd9b0}
#osfd-root .osfd-detail__view p{font-size:13px;color:var(--text);line-height:1.55;margin:0;max-width:760px}
/* connections footer */
#osfd-root .osfd-detail__foot{padding:16px 22px}
#osfd-root .osfd-foot-lbl{font:700 10.5px var(--mont);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
#osfd-root .osfd-conns{display:flex;flex-wrap:wrap;gap:8px}
#osfd-root .osfd-conn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;appearance:none;
  border:1px solid var(--line);background:#fff;border-radius:100px;padding:5px 12px 5px 10px;
  font:600 12px var(--inter);color:var(--ink);transition:.14s}
#osfd-root .osfd-conn:hover{border-color:var(--royal);color:var(--royal);background:rgba(31,46,214,.04)}
#osfd-root .osfd-conn .dir{font:700 11px var(--mont);color:var(--muted-2)}
#osfd-root .osfd-conn .lbl{color:var(--muted);font-weight:500}
#osfd-root .osfd-detail__hint{padding:20px 22px;font-size:13px;color:var(--muted-2);text-align:center;font-style:italic}

/* ── responsive ── */
@media(max-width:760px){
  #osfd-root .osfd-toolbar{gap:8px 10px}
}

/* ── phones: compact everything so as many portals as possible fit on screen ── */
@media(max-width:640px){
  /* trim the chrome */
  #osfd-root .osfd-hero{margin-bottom:9px}
  #osfd-root .osfd-hero h2{font-size:16px;margin:0 0 2px}
  #osfd-root .osfd-hero p:not(.osfd-previewing){display:none}      /* drop the long intro (keep the "previewing as" note) */
  #osfd-root .osfd-previewing{font-size:11.5px;margin-top:4px}
  #osfd-root .osfd-toolbar{padding:8px 11px;gap:6px 10px;margin-bottom:9px}
  #osfd-root .osfd-legend{gap:5px 11px;font-size:10.5px}
  #osfd-root .osfd-board{padding:3px 10px 12px;border-radius:13px}
  #osfd-root .osfd-tier{padding:8px 0;gap:5px}
  #osfd-root .osfd-tier__label .t{font-size:11px}
  /* compact horizontal card: icon + name in a row; eyebrow + badge hidden (audience shown by the colour
     bar + legend, and in full on tap); status dot floats in the corner. ~half the previous height. */
  #osfd-root .osfd-tier__nodes{gap:8px}
  #osfd-root .osfd-node{flex-direction:row;align-items:center;gap:11px;width:100%;min-height:0;padding:9px 13px}
  #osfd-root .osfd-node::before{top:0}
  #osfd-root .osfd-node__top{position:absolute;top:7px;right:9px;margin:0;width:auto}
  #osfd-root .osfd-node__no{display:none}
  #osfd-root .osfd-node__dot{margin-left:0}
  #osfd-root .osfd-node__ico{margin-bottom:0;width:30px;height:30px;flex-shrink:0}
  #osfd-root .osfd-node__ico svg{width:16px;height:16px}
  #osfd-root .osfd-node__name{font-size:13.5px;line-height:1.25;flex:1 1 auto;min-width:0;padding-right:10px}
  #osfd-root .osfd-node__badge{display:none}
  /* on touch there is no hover lift; keep tap feedback subtle */
  #osfd-root .osfd-node:active{background:rgba(255,255,255,.12)}
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
  #osfd-root .osfd-node{transition:none}
}