/* atlas.css — the Atlas tab: hub-and-spoke system board (v3 design, suMMa light theme).
   Everything namespaced .at- (design-bridge overrides un-namespaced styles). */

#view-atlas { position:relative; }
/* Full-height board: CSS owns the height (JS only measures the top offset into
   --at-top), so the board fills the viewport regardless of init/layout order. */
.at-shell { display:flex; flex-direction:column; height:calc(100vh - var(--at-top, 96px)); min-height:520px; }

/* ── page header row ── */
.at-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px 22px 10px; }
.at-head .at-title { font-family:'Plus Jakarta Sans',ui-sans-serif,sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink,#2a2418); }
.at-head .at-sub { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3,#8a7e66); }
.at-back { cursor:pointer; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; border:1px solid var(--line-strong,#d6c9a8); background:var(--panel,#fff); color:var(--ink-2,#5b5142); }
.at-back:hover { border-color:var(--green,#3e7a3a); color:var(--ink,#2a2418); }
.at-filters { margin-left:auto; display:flex; gap:6px; }
.at-fpill { cursor:pointer; padding:5px 13px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; border:1px solid var(--line-strong,#d6c9a8); background:var(--panel,#fff); color:var(--ink-2,#5b5142); user-select:none; }
.at-fpill:hover { border-color:var(--green,#3e7a3a); }
.at-fpill.on { background:var(--green,#3e7a3a); border-color:var(--green,#3e7a3a); color:var(--bg,#fbf6ec); }

/* ── the board (Miro-style canvas) ── */
#at-vp { position:relative; flex:1; overflow:hidden; cursor:grab; border-top:1px solid var(--line,#ebe0c4);
  background:radial-gradient(ellipse at 50% 45%, rgba(62,122,58,.06) 0%, transparent 65%), var(--bg,#fbf6ec); }
#at-vp.at-dragging { cursor:grabbing; }
#at-stage { position:absolute; top:0; left:0; width:1580px; height:940px; transform-origin:0 0; }
.at-ring { position:absolute; left:790px; top:430px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }

.at-spokelbl { position:absolute; left:0; top:0; z-index:2; pointer-events:none; white-space:nowrap; padding:3px 10px; border-radius:999px;
  background:var(--panel,#fff); border:1px solid; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; transition:opacity .18s; }

.at-hub { position:absolute; left:0; top:0; cursor:pointer; border-radius:14px; border:1px solid var(--line-strong,#d6c9a8);
  background:var(--panel,#fff); padding:16px 18px; transition:opacity .18s, border-color .18s; box-shadow:0 1px 3px rgba(42,36,24,.06); }
.at-hub.at-dim { opacity:.55; }
.at-hub.at-filtered { opacity:.35; }
.at-step { position:absolute; top:-12px; left:-12px; width:26px; height:26px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; box-shadow:0 2px 8px rgba(42,36,24,.25); }
.at-tile { border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.at-kicker { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.at-hubtitle { font-family:'Plus Jakarta Sans',ui-sans-serif,sans-serif; font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink,#2a2418); }
.at-hubwhat { font-size:12.5px; color:var(--ink-2,#5b5142); margin-top:8px; line-height:1.5; }
.at-chip { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; padding:3px 8px; border-radius:6px;
  background:var(--bg-2,#f4ecd6); color:var(--ink-2,#5b5142); border:1px solid var(--line,#ebe0c4); }
.at-hubfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.at-count { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; color:var(--ink-3,#8a7e66); }

#at-summa { position:absolute; left:566px; top:296px; width:448px; cursor:pointer; border-radius:16px; border:1.5px solid var(--green,#3e7a3a);
  background:linear-gradient(180deg, #ffffff 0%, #f3f7ef 100%); padding:20px 22px; box-shadow:0 4px 14px rgba(42,36,24,.10); transition:box-shadow .18s; }
#at-summa:hover { box-shadow:0 0 0 2px var(--green-bg,#e7f0e3), 0 4px 14px rgba(42,36,24,.14); }
.at-summachip { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; padding:4px 9px; border-radius:7px;
  background:var(--green-bg,#e7f0e3); color:var(--green-2,#2f5f2c); border:1px solid rgba(62,122,58,.25); }

#at-legend { position:absolute; left:18px; bottom:14px; z-index:10; display:flex; gap:14px; align-items:center; padding:8px 14px; border-radius:10px;
  background:rgba(255,255,255,.92); border:1px solid var(--line-strong,#d6c9a8); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; color:var(--ink-3,#8a7e66); }
.at-lg { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.at-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.at-minibadge { width:16px; height:16px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; font-weight:700; }

/* zoom controls */
#at-zoom { position:absolute; right:18px; bottom:14px; z-index:10; display:flex; align-items:center; gap:4px; padding:4px;
  background:rgba(255,255,255,.94); border:1px solid var(--line-strong,#d6c9a8); border-radius:10px; box-shadow:0 1px 3px rgba(42,36,24,.08); }
.at-zbtn { cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:7px;
  font-size:15px; font-weight:700; color:var(--ink-2,#5b5142); user-select:none; }
.at-zbtn:hover { background:var(--bg-2,#f4ecd6); color:var(--ink,#2a2418); }
.at-zpct { cursor:pointer; min-width:46px; text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--ink-2,#5b5142); user-select:none; border-radius:7px; padding:5px 4px; }
.at-zpct:hover { background:var(--bg-2,#f4ecd6); }

/* ── hub drill-in ── */
#at-hubview { flex:1; overflow:auto; padding:16px 22px 40px; border-top:1px solid var(--line,#ebe0c4); background:var(--bg,#fbf6ec); }
.at-hv-head { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:16px; }
.at-iface { display:flex; gap:8px; align-items:baseline; padding:7px 11px; border-radius:10px; border:1px solid var(--line,#ebe0c4); background:var(--panel,#fff); max-width:330px; }
.at-iface .at-dir { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700; color:var(--green-2,#2f5f2c); flex:none; }
.at-iface .at-tx { font-size:11.5px; color:var(--ink-2,#5b5142); line-height:1.4; }
.at-stagerow { display:flex; gap:16px; align-items:stretch; overflow-x:auto; padding-bottom:12px; }
.at-stage-card { width:322px; flex:none; border:1px solid var(--line-strong,#d6c9a8); border-radius:14px; background:var(--panel,#fff); padding:15px; display:flex; flex-direction:column; gap:11px; align-self:stretch; box-shadow:0 1px 3px rgba(42,36,24,.06); }
.at-stagenum { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.16em; color:var(--ink-3,#8a7e66); }
.at-stagelabel { font-family:'Plus Jakarta Sans',ui-sans-serif,sans-serif; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink,#2a2418); }
.at-stagesub { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; color:var(--ink-3,#8a7e66); text-align:right; }
.at-stagearrow { font-size:18px; color:var(--line-strong,#d6c9a8); flex:none; align-self:center; }
.at-item { cursor:pointer; border-radius:10px; border:1px solid var(--line,#ebe0c4); background:var(--panel-2,#faf3df); padding:9px 12px; transition:border-color .15s, background .15s, opacity .15s; }
.at-item:hover { border-color:var(--line-strong,#d6c9a8); background:var(--bg-2,#f4ecd6); }
.at-item.at-sel { border-color:var(--green,#3e7a3a); background:var(--green-bg,#e7f0e3); }
.at-item.at-filtered { opacity:.3; }
.at-item .at-t1 { display:flex; align-items:center; gap:8px; }
.at-item .at-ttl { font-size:13px; font-weight:600; color:var(--ink,#2a2418); flex:1; }
.at-item .at-tag { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; color:var(--ink-3,#8a7e66); }
.at-item .at-teaser { font-size:11.5px; color:var(--ink-2,#5b5142); margin-top:4px; padding-left:14px; line-height:1.45; }
.at-idot { width:6px; height:6px; border-radius:50%; flex:none; }
.at-nexthub { cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:11px; background:var(--panel,#fff); border:1px solid var(--line-strong,#d6c9a8); margin-top:20px; }
.at-nexthub:hover { border-color:var(--green,#3e7a3a); }
.at-nexthub .at-nh-k { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3,#8a7e66); }
.at-nexthub .at-nh-t { font-size:13px; font-weight:600; color:var(--ink,#2a2418); }

/* ── drawer ── */
#at-drawer { position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:var(--panel,#fff);
  border-left:1px solid var(--line-strong,#d6c9a8); box-shadow:-18px 0 50px rgba(42,36,24,.18); z-index:60; display:flex; flex-direction:column; }
.at-dr-head { padding:18px 22px 14px; border-bottom:1px solid var(--line,#ebe0c4); display:flex; flex-direction:column; gap:8px; }
.at-dr-crumb { cursor:pointer; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3,#8a7e66); }
.at-dr-crumb:hover { color:var(--green,#3e7a3a); }
.at-dr-x { cursor:pointer; font-size:15px; line-height:1; color:var(--ink-3,#8a7e66); padding:3px 7px; border-radius:6px; }
.at-dr-x:hover { color:var(--ink,#2a2418); background:var(--bg-2,#f4ecd6); }
.at-dr-title { font-family:'Plus Jakarta Sans',ui-sans-serif,sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink,#2a2418); }
.at-dr-body { padding:18px 22px 40px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }
.at-dr-what { font-size:14px; line-height:1.55; color:var(--ink,#2a2418); }
.at-dr-label { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3,#8a7e66); }
.at-dr-fact { display:flex; gap:9px; font-size:12.5px; color:var(--ink-2,#5b5142); line-height:1.5; }
.at-dr-sib { cursor:pointer; display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:9px; background:var(--panel-2,#faf3df); border:1px solid var(--line,#ebe0c4); }
.at-dr-sib:hover { border-color:var(--line-strong,#d6c9a8); background:var(--bg-2,#f4ecd6); }

@keyframes atflow { to { stroke-dashoffset:-36; } }
@keyframes atpop { from { opacity:0; } }
.at-pop { animation:atpop .22s ease; }
@media (prefers-reduced-motion: reduce) { .at-flowline { animation:none !important; } }