/* SIC NAVY — AI Systems Architecture v2 (board + live process). Inherits theme tokens. */
.sn-ai{
	--ai-line:rgba(74,158,181,.85);
	--ai-dim:rgba(74,158,181,.32);
	--ai-two:rgba(196,144,58,.85);
	--ai-glow:rgba(74,158,181,.45);
	--ai-lit:var(--green,#6ddb9e);
	position:relative; max-width:var(--maxw,1280px); margin:0 auto; font-family:var(--sans,system-ui,sans-serif);
}
.sn-ai-head{ padding:.5rem 0 0; }
.sn-ai-desc{ color:var(--ash,#8fa3c0); max-width:70ch; margin:.4rem 0 .6rem; font-size:.95rem; }
.sn-ai-status{ font-family:var(--mono,monospace); font-size:.58rem; letter-spacing:.16em; color:var(--cyan,#4a9eb5); display:inline-flex; align-items:center; gap:.5rem; }
.sn-ai-live{ width:7px; height:7px; border-radius:50%; background:var(--green,#6ddb9e); box-shadow:0 0 8px var(--green,#6ddb9e); animation:sn-ai-blink 1.6s ease-in-out infinite; }

/* Tabs */
.sn-ai-tabs{ position:relative; display:flex; gap:.5rem; flex-wrap:wrap; border-bottom:1px solid rgba(74,158,181,.2); margin:1.3rem 0 1rem; }
.sn-ai-tab{ appearance:none; background:none; border:none; color:var(--ash,#8fa3c0); font-family:var(--mono,monospace); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.8rem 1.1rem; min-height:44px; cursor:pointer; transition:color .25s; }
.sn-ai-tab:hover{ color:var(--pale,#b8cce0); }
.sn-ai-tab.is-active{ color:var(--white,#eef4f8); }
.sn-ai-tab:focus-visible{ outline:1px solid var(--cyan); outline-offset:2px; }
.sn-ai-tab-ind{ position:absolute; bottom:-1px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--green)); box-shadow:0 0 10px var(--ai-glow); transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1); }

.sn-ai-panel[hidden]{ display:none; }
.sn-ai-ptitle{ font-family:var(--mono,monospace); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-pale,#a0d4e6); margin-bottom:.7rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sn-ai-pcode{ color:var(--smoke,#6b7fa0); border:1px solid rgba(74,158,181,.25); border-radius:4px; padding:.1rem .45rem; font-size:.58rem; }

/* Two-column grid */
.sn-ai-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(218px,1fr); gap:1.2rem; align-items:stretch; }

/* ───────── BOARD ───────── */
.sn-ai-board{
	position:relative; width:100%; aspect-ratio:760/680; border:1px solid rgba(74,158,181,.2); border-radius:8px; overflow:hidden;
	background:
		radial-gradient(ellipse at 22% 47%, rgba(74,158,181,.07), transparent 55%),
		linear-gradient(rgba(74,158,181,.04) 1px,transparent 1px) 0 0/100% 28px,
		linear-gradient(90deg,rgba(74,158,181,.04) 1px,transparent 1px) 0 0/28px 100%,
		linear-gradient(160deg, rgba(8,12,18,.4), rgba(5,7,9,.2));
}
.sn-ai-silk{ position:absolute; bottom:8px; right:12px; font-family:var(--mono,monospace); font-size:.5rem; letter-spacing:.18em; color:rgba(74,158,181,.35); }
.sn-ai-corner{ position:absolute; width:14px; height:14px; border:1px solid rgba(74,158,181,.4); }
.sn-ai-corner--tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.sn-ai-corner--tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.sn-ai-corner--bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.sn-ai-corner--br{ bottom:8px; right:8px; border-left:none; border-top:none; }

/* Traces */
.sn-ai-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sn-ai-lines path{ fill:none; }
.sn-ai-via{ fill:rgba(74,158,181,.22); }
.sn-ai-pad{ fill:var(--cyan,#4a9eb5); opacity:.55; }
.sn-ai-pad--s{ fill:rgba(74,158,181,.4); }
.sn-ai-tr{ stroke:var(--ai-line); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 3px var(--ai-glow)); }
.sn-ai-tr--two{ stroke:var(--ai-two); filter:drop-shadow(0 0 3px rgba(196,144,58,.4)); }
.sn-ai-tw{ stroke:var(--ai-dim); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.sn-ai-pulse{ stroke:var(--cyan-pale,#a0d4e6); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:.10 .90; stroke-dashoffset:1; opacity:0; filter:drop-shadow(0 0 5px var(--cyan-pale,#a0d4e6)); }
.sn-ai-pulse--sub{ stroke-width:1.5; opacity:0; filter:drop-shadow(0 0 3px var(--cyan-pale,#a0d4e6)); }

.sn-ai-panel.draw .sn-ai-tr{ animation:sn-ai-draw var(--dur,.7s) ease forwards; animation-delay:var(--dly,0s); }
.sn-ai-panel.draw .sn-ai-tw{ animation:sn-ai-draw var(--dur,.45s) ease forwards; animation-delay:var(--dly,0s); }
.sn-ai-panel.draw .sn-ai-pulse{ opacity:.9; animation:sn-ai-flow 1.7s linear infinite; animation-delay:var(--pdly,1s); }
.sn-ai-panel.draw .sn-ai-pulse--sub{ opacity:.6; animation:sn-ai-flow 1.9s linear infinite; animation-delay:var(--pdly,1s); }
.sn-ai-panel.draw .sn-ai-pulse--rev{ animation-direction:reverse; }

/* Nodes */
.sn-ai-core,.sn-ai-comp,.sn-ai-sub{ position:absolute; transform:translate(-50%,-50%); border:none; cursor:pointer; font-family:var(--sans); text-align:left; }
.sn-ai-core{ width:128px; height:128px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; text-align:center;
	background:linear-gradient(160deg, rgba(196,144,58,.18), rgba(10,15,26,.95)); border:1.5px solid var(--amber,#c4903a);
	color:var(--amber-pale,#f2cc7a); box-shadow:0 0 42px rgba(196,144,58,.24), inset 0 0 26px rgba(196,144,58,.1); z-index:7; }
.sn-ai-core::after{ content:''; position:absolute; inset:-6px; border-radius:24px; border:1px solid rgba(196,144,58,.25); animation:sn-ai-pulse-ring 3s ease-in-out infinite; }
.sn-ai-core-i svg{ width:30px; height:30px; }
.sn-ai-core-t{ font-family:var(--mono,monospace); font-size:.64rem; letter-spacing:.16em; color:var(--amber-pale); }
.sn-ai-core-c{ font-family:var(--mono,monospace); font-size:.5rem; letter-spacing:.14em; color:var(--amber,#c4903a); opacity:.85; }

.sn-ai-comp{ padding:.5rem .55rem; border-radius:11px; display:flex; align-items:center; gap:.5rem; box-sizing:border-box;
	background:rgba(10,15,26,.88); border:1px solid var(--ai-dim); color:var(--ivory,#dce8f0); z-index:6; backdrop-filter:blur(3px);
	box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .25s,box-shadow .3s; --acc:var(--cyan,#4a9eb5); --acc-glow:rgba(74,158,181,.4); }
.sn-ai-comp::after{ content:''; position:absolute; inset:-4px; border-radius:14px; border:1px solid transparent; pointer-events:none; }
.sn-ai-comp-pins{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.sn-ai-comp-i{ color:var(--acc); flex:0 0 auto; } .sn-ai-comp-i svg{ width:20px; height:20px; }
.sn-ai-comp-x{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.sn-ai-comp-t{ font-family:var(--mono,monospace); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; line-height:1.15; }
.sn-ai-comp-c{ font-family:var(--mono,monospace); font-size:.48rem; letter-spacing:.07em; color:var(--smoke,#6b7fa0); }

/* Form factors — each component a distinct chip type */
.sn-ai-comp--ic{ width:170px; height:64px; }
.sn-ai-comp--ic .sn-ai-comp-pins{ background:
	repeating-linear-gradient(90deg, transparent 0 9px, var(--acc) 9px 11px) top/100% 3px no-repeat,
	repeating-linear-gradient(90deg, transparent 0 9px, var(--acc) 9px 11px) bottom/100% 3px no-repeat; opacity:.5; }
.sn-ai-comp--cpu{ width:130px; height:98px; flex-direction:column; text-align:center; gap:.32rem; border-width:1.5px; border-radius:10px; }
.sn-ai-comp--cpu .sn-ai-comp-x{ align-items:center; } .sn-ai-comp--cpu .sn-ai-comp-i svg{ width:26px; height:26px; }
.sn-ai-comp--cpu .sn-ai-comp-pins{ background:
	repeating-linear-gradient(90deg, transparent 0 10px, var(--acc) 10px 13px) top/100% 3px no-repeat,
	repeating-linear-gradient(90deg, transparent 0 10px, var(--acc) 10px 13px) bottom/100% 3px no-repeat,
	repeating-linear-gradient(0deg, transparent 0 10px, var(--acc) 10px 13px) left/3px 100% no-repeat,
	repeating-linear-gradient(0deg, transparent 0 10px, var(--acc) 10px 13px) right/3px 100% no-repeat; opacity:.42; }
.sn-ai-comp--ram{ width:106px; height:126px; flex-direction:column; justify-content:center; text-align:center; gap:.3rem; border-radius:6px; }
.sn-ai-comp--ram .sn-ai-comp-x{ align-items:center; }
.sn-ai-comp--ram .sn-ai-comp-pins{ background:repeating-linear-gradient(90deg, var(--acc) 0 4px, transparent 4px 9px) bottom/100% 7px no-repeat; opacity:.6; }
.sn-ai-comp--rf{ width:152px; height:58px; }
.sn-ai-comp--rf .sn-ai-comp-pins::before{ content:''; position:absolute; top:-9px; left:20px; width:2px; height:9px; background:var(--acc); box-shadow:7px 0 0 var(--acc); opacity:.6; }
.sn-ai-comp--reg{ width:126px; height:68px; }
.sn-ai-comp--reg .sn-ai-comp-pins{ background:repeating-linear-gradient(90deg, transparent 0 14px, var(--acc) 14px 17px) bottom/100% 3px no-repeat; opacity:.5; }

.sn-ai-sub{ width:140px; padding:.34rem .5rem; border-radius:7px; display:flex; flex-direction:column; gap:0; box-sizing:border-box;
	background:rgba(8,12,18,.8); border:.5px solid rgba(74,158,181,.2); color:var(--ash,#8fa3c0); z-index:5; box-shadow:0 0 0 rgba(0,0,0,0); --acc:var(--cyan); --acc-glow:rgba(74,158,181,.3); }
.sn-ai-sub-t{ font-family:var(--mono,monospace); font-size:.55rem; letter-spacing:.03em; color:var(--pale,#b8cce0); }
.sn-ai-sub-c{ font-family:var(--mono,monospace); font-size:.46rem; letter-spacing:.06em; color:var(--smoke,#6b7fa0); }

/* Arrival glow — border lights in the component's own colour, stays softly lit */
.sn-ai-panel.draw .sn-ai-comp{ animation:sn-ai-lit-comp .7s ease forwards; animation-delay:var(--lit,1s); }
.sn-ai-panel.draw .sn-ai-sub{ animation:sn-ai-lit-sub .6s ease forwards; animation-delay:var(--lit,1s); }

.sn-ai-comp:hover,.sn-ai-comp:focus-visible,.sn-ai-comp.is-open{ outline:none; transform:translate(-50%,-50%) scale(1.05); }
.sn-ai-comp.is-open,.sn-ai-comp:hover{ border-color:var(--acc); box-shadow:0 0 28px var(--acc-glow); }
.sn-ai-sub:hover,.sn-ai-sub:focus-visible,.sn-ai-sub.is-open{ outline:none; border-color:var(--acc); box-shadow:0 0 16px var(--acc-glow); }
.sn-ai-core:hover,.sn-ai-core:focus-visible,.sn-ai-core.is-open{ outline:none; box-shadow:0 0 54px rgba(232,176,80,.42), inset 0 0 26px rgba(196,144,58,.14); }

/* Process-phase sync: pulse the matching component in its own colour */
.sn-ai-comp.is-signal::after{ animation:sn-ai-signal 1.1s ease-out; border-color:var(--acc); }

/* Popup */
.sn-ai-pop{ position:absolute; z-index:20; width:228px; max-width:74%; padding:.85rem 1rem 1rem; transform:translate(-50%,-100%);
	background:rgba(8,12,18,.98); border:.5px solid rgba(74,158,181,.45); border-top:2px solid var(--amber); box-shadow:0 18px 50px -16px rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.sn-ai-pop::after{ content:''; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; transform:translateX(-50%) rotate(45deg); background:rgba(8,12,18,.98); border-right:.5px solid rgba(74,158,181,.45); border-bottom:.5px solid rgba(74,158,181,.45); }
.sn-ai-pop.below{ transform:translate(-50%,0); }
.sn-ai-pop.below::after{ top:-7px; bottom:auto; border:none; border-left:.5px solid rgba(74,158,181,.45); border-top:.5px solid rgba(74,158,181,.45); }
.sn-ai-pop-k{ font-family:var(--mono,monospace); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:.3rem; }
.sn-ai-pop-t{ font-family:var(--serif,serif); font-size:1.12rem; margin:0 0 .35rem; color:var(--white,#eef4f8); }
.sn-ai-pop-d{ font-size:.82rem; line-height:1.55; color:var(--pale,#b8cce0); margin:0; }
.sn-ai-pop-x{ position:absolute; top:.4rem; right:.5rem; background:none; border:none; color:var(--smoke); font-size:1.1rem; line-height:1; cursor:pointer; padding:.1rem .25rem; }
.sn-ai-pop-x:hover{ color:var(--cyan-pale); }

/* ───────── LIVE PROCESS PANEL ───────── */
.sn-ai-proc{ display:flex; flex-direction:column; border:1px solid rgba(74,158,181,.22); border-radius:8px; padding:.9rem .85rem 1rem; background:linear-gradient(160deg, rgba(10,15,26,.5), rgba(8,12,18,.3)); font-family:var(--mono,monospace); }
.sn-ai-proc-h{ font-size:.62rem; letter-spacing:.16em; color:var(--cyan-pale,#a0d4e6); display:flex; align-items:center; gap:.4rem; margin-bottom:.7rem; }
.sn-ai-proc-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); animation:sn-ai-blink 1.6s ease-in-out infinite; }
.sn-ai-proc-sec{ font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke,#6b7fa0); margin:.9rem 0 .4rem; }
.sn-ai-phases{ display:flex; gap:.3rem; flex-wrap:wrap; }
.sn-ai-ph{ flex:1 1 auto; text-align:center; font-size:.5rem; letter-spacing:.08em; color:var(--ash); border:1px solid rgba(74,158,181,.25); border-radius:4px; padding:.45rem .2rem; transition:all .3s; }
.sn-ai-ph.is-active{ color:var(--white); border-color:var(--cyan); background:rgba(74,158,181,.14); box-shadow:0 0 12px rgba(74,158,181,.25); }
.sn-ai-log{ flex:1 1 auto; min-height:118px; overflow:hidden; border:1px solid rgba(74,158,181,.16); border-radius:5px; padding:.5rem .6rem; background:rgba(5,7,9,.5); display:flex; flex-direction:column; justify-content:flex-end; gap:.2rem; }
.sn-ai-logline{ font-size:.55rem; line-height:1.4; color:var(--ash); opacity:0; transform:translateY(4px); animation:sn-ai-logIn .4s ease forwards; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-ai-logline .ts{ color:var(--cyan); }
.sn-ai-gauge{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0; }
.sn-ai-gauge-l{ font-size:.5rem; letter-spacing:.1em; color:var(--ash); width:34px; }
.sn-ai-bar{ flex:1; height:5px; background:rgba(74,158,181,.14); border-radius:3px; overflow:hidden; }
.sn-ai-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--green)); border-radius:3px; transition:width .8s ease; }
.sn-ai-tlm{ display:flex; flex-direction:column; gap:.25rem; }
.sn-ai-read{ display:flex; justify-content:space-between; font-size:.55rem; color:var(--ash); }
.sn-ai-read b{ color:var(--cyan-pale,#a0d4e6); font-weight:400; }
.sn-ai-read b.sn-ai-ok{ color:var(--green,#6ddb9e); }
.sn-ai-proc-up{ margin-left:auto; font-size:.48rem; letter-spacing:.1em; color:var(--smoke,#6b7fa0); }
.sn-ai-uptime{ color:var(--cyan,#4a9eb5); }
.sn-ai-eq{ display:flex; align-items:flex-end; gap:2px; height:26px; padding:2px 0; }
.sn-ai-eq i{ flex:1; min-width:2px; height:30%; border-radius:1px; background:linear-gradient(var(--green,#6ddb9e),var(--cyan,#4a9eb5)); opacity:.85; animation:sn-ai-eq 1s ease-in-out infinite; }
.sn-ai-eq i:nth-child(3n){ animation-duration:.78s; } .sn-ai-eq i:nth-child(3n+1){ animation-duration:1.18s; }
.sn-ai-eq i:nth-child(2){ animation-delay:.12s; } .sn-ai-eq i:nth-child(3){ animation-delay:.28s; } .sn-ai-eq i:nth-child(4){ animation-delay:.05s; }
.sn-ai-eq i:nth-child(5){ animation-delay:.34s; } .sn-ai-eq i:nth-child(6){ animation-delay:.18s; } .sn-ai-eq i:nth-child(7){ animation-delay:.46s; }
.sn-ai-eq i:nth-child(8){ animation-delay:.22s; } .sn-ai-eq i:nth-child(9){ animation-delay:.4s; } .sn-ai-eq i:nth-child(10){ animation-delay:.1s; }
.sn-ai-eq i:nth-child(11){ animation-delay:.52s; } .sn-ai-eq i:nth-child(12){ animation-delay:.3s; } .sn-ai-eq i:nth-child(13){ animation-delay:.16s; }
.sn-ai-eq i:nth-child(14){ animation-delay:.44s; } .sn-ai-eq i:nth-child(15){ animation-delay:.24s; } .sn-ai-eq i:nth-child(16){ animation-delay:.38s; }
.sn-ai-logline.typing::after{ content:'▋'; color:var(--cyan,#4a9eb5); margin-left:1px; animation:sn-ai-caret .7s steps(1) infinite; }

/* Legend / disclaimer */
.sn-ai-hint{ font-family:var(--mono,monospace); font-size:.58rem; letter-spacing:.06em; color:var(--smoke,#6b7fa0); text-align:center; margin-top:1rem; display:flex; gap:.5rem 1rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.sn-ai-key{ display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:.1rem; }
.sn-ai-key--core{ background:var(--amber); } .sn-ai-key--comp{ background:rgba(74,158,181,.55); border:1px solid var(--cyan); }
.sn-ai-key--sub{ background:rgba(74,158,181,.2); } .sn-ai-key--two{ width:16px; height:2px; border-radius:0; background:var(--ai-two); }
.sn-ai-disclaimer{ font-family:var(--mono,monospace); font-size:.54rem; letter-spacing:.14em; color:var(--smoke); text-transform:uppercase; text-align:center; margin:1.4rem 0 .3rem; opacity:.6; }

/* Animations */
@keyframes sn-ai-blink{ 0%,100%{opacity:1;}50%{opacity:.35;} }
@keyframes sn-ai-draw{ to{ stroke-dashoffset:0; } }
@keyframes sn-ai-flow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes sn-ai-pulse-ring{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.05); } }
@keyframes sn-ai-lit-comp{ to{ border-color:var(--acc); box-shadow:0 0 18px var(--acc-glow); } }
@keyframes sn-ai-lit-sub{ to{ border-color:var(--acc); box-shadow:0 0 11px var(--acc-glow); } }
@keyframes sn-ai-signal{ 0%{ inset:-4px; opacity:0; } 30%{ opacity:1; } 100%{ inset:-12px; opacity:0; } }
@keyframes sn-ai-logIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes sn-ai-eq{ 0%,100%{ height:25%; } 50%{ height:92%; } }
@keyframes sn-ai-caret{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* Responsive */
@media (max-width:920px){
	.sn-ai-grid{ grid-template-columns:1fr; }
	.sn-ai-proc{ order:2; }
}
@media (max-width:760px){
	.sn-ai-core{ width:104px; height:104px; }
	.sn-ai-comp--ic{ width:142px; height:58px; } .sn-ai-comp--cpu{ width:110px; height:86px; }
	.sn-ai-comp--ram{ width:92px; height:110px; } .sn-ai-comp--rf{ width:130px; height:52px; } .sn-ai-comp--reg{ width:108px; height:60px; }
	.sn-ai-comp-t{ font-size:.5rem; } .sn-ai-comp-c{ font-size:.42rem; }
	.sn-ai-sub{ width:112px; } .sn-ai-sub-t{ font-size:.48rem; } .sn-ai-sub-c{ font-size:.4rem; }
	.sn-ai-tab{ flex:1 1 auto; text-align:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.sn-ai-live,.sn-ai-core::after,.sn-ai-proc-dot,.sn-ai-eq i{ animation:none; }
	.sn-ai-lines .sn-ai-tr,.sn-ai-lines .sn-ai-tw{ stroke-dashoffset:0; }
	.sn-ai-pulse{ display:none; }
	.sn-ai-eq i{ height:55%; }
	.sn-ai-panel.draw .sn-ai-comp{ animation:none; border-color:var(--acc); box-shadow:0 0 14px var(--acc-glow); }
	.sn-ai-panel.draw .sn-ai-sub{ animation:none; border-color:var(--acc); box-shadow:0 0 10px var(--acc-glow); }
	.sn-ai-logline{ animation:none; opacity:1; transform:none; }
	.sn-ai-logline.typing::after{ animation:none; }
}