/* SIC NAVY — Autonomous Systems Architecture
   Customise colours/timing here. Inherits theme tokens (--void/--cyan/--green/…). */
.sn-as{
	--as-line:rgba(74,158,181,.22);
	--as-line-soft:rgba(74,158,181,.12);
	--as-glow:rgba(74,158,181,.35);
	--as-green:var(--green,#6ddb9e);
	--as-amber:var(--amber,#c4903a);
	--as-panel:rgba(10,15,26,.72);
	--as-panel-soft:rgba(12,22,38,.5);
	--as-speed:4200ms;
	position:relative;max-width:var(--maxw,1280px);margin:0 auto;padding:1rem 0 0;
	background:
		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%;
	font-family:var(--sans,system-ui,sans-serif);
}
.sn-as-head{padding:1.5rem 0 0;}
.sn-as-desc{color:var(--pale,#b8cce0);font-size:1.05rem;margin:.4rem 0 .4rem;}
.sn-as-desc2{color:var(--ash,#8fa3c0);max-width:70ch;font-size:.92rem;margin:0 0 1rem;}
.sn-as-status,.sn-as-pstatus{font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.18em;color:var(--cyan,#4a9eb5);display:inline-flex;align-items:center;gap:.5rem;}
.sn-as-live{width:7px;height:7px;border-radius:50%;background:var(--as-green);box-shadow:0 0 8px var(--as-green);animation:sn-as-blink 1.6s ease-in-out infinite;}

/* Tabs */
.sn-as-tabs{position:relative;display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--as-line);margin:1.4rem 0 1.6rem;}
.sn-as-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:.85rem 1.1rem;min-height:44px;cursor:pointer;transition:color .25s;position:relative;}
.sn-as-tab:hover{color:var(--pale,#b8cce0);}
.sn-as-tab.is-active{color:var(--white,#eef4f8);}
.sn-as-tab:focus-visible{outline:1px solid var(--cyan);outline-offset:2px;}
.sn-as-tab-ind{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--as-green));box-shadow:0 0 10px var(--as-glow);transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);}

/* Panel */
.sn-as-panel[hidden]{display:none;}
.sn-as-phead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.sn-as-ptitle{font-family:var(--serif,serif);font-size:clamp(1.4rem,3vw,2rem);margin:0;color:var(--white);}
.sn-as-psub{color:var(--ash);margin:.2rem 0 0;font-size:.9rem;}

.sn-as-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.5rem;align-items:start;}

/* Diagram */
.sn-as-diagram{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:.4rem 0;}
.sn-as-spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.sn-as-spine-line{stroke:var(--as-line);stroke-width:1.5;}
.sn-as-spine-flow{stroke:var(--cyan);stroke-width:1.5;stroke-dasharray:4 10;opacity:.5;}
.sn-as.is-live .sn-as-spine-flow{animation:sn-as-flow 1.4s linear infinite;}
.sn-as-layer,.sn-as-fleet{position:relative;z-index:1;background:var(--as-panel);border:1px solid var(--as-line);border-radius:12px;padding:.85rem 1rem;backdrop-filter:blur(4px);transition:border-color .4s,box-shadow .4s,background .4s;}
.sn-as-layer-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem;}
.sn-as-cat{font-family:var(--mono,monospace);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);opacity:.85;}
.sn-as-dot{width:7px;height:7px;border-radius:50%;background:var(--fog,#3d5269);transition:background .4s,box-shadow .4s;margin-left:auto;}
.sn-as-state{font-family:var(--mono,monospace);font-size:.52rem;letter-spacing:.16em;color:var(--smoke,#6b7fa0);transition:color .4s;}
.sn-as-layer-title{font-family:var(--serif,serif);font-size:1.12rem;margin:0 0 .5rem;color:var(--ivory,#dce8f0);}
.sn-as-subs{display:flex;flex-wrap:wrap;gap:.35rem;}
.sn-as-chip{font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.04em;color:var(--ash,#8fa3c0);background:rgba(74,158,181,.06);border:1px solid var(--as-line-soft);border-radius:5px;padding:.2rem .45rem;transition:color .3s,border-color .3s;}
.sn-as-layer--core{border-color:rgba(196,144,58,.4);background:linear-gradient(160deg,rgba(196,144,58,.1),var(--as-panel));}
.sn-as-layer--core .sn-as-cat,.sn-as-layer--core .sn-as-layer-title{color:var(--amber-pale,#f2cc7a);}

/* Lit state (active phase) */
.sn-as-layer.lit,.sn-as-fleet.lit{border-color:var(--cyan);box-shadow:0 0 22px var(--as-glow);background:linear-gradient(160deg,rgba(74,158,181,.12),var(--as-panel));}
.sn-as-layer.lit .sn-as-dot{background:var(--as-green);box-shadow:0 0 10px var(--as-green);}
.sn-as-layer.lit .sn-as-state{color:var(--cyan-pale,#a0d4e6);}
.sn-as-layer.lit .sn-as-chip{color:var(--pale,#b8cce0);border-color:var(--as-line);}
.sn-as-layer--core.lit{border-color:var(--amber-glow,#e8b050);box-shadow:0 0 26px rgba(232,176,80,.3);}
.sn-as-layer--core.lit .sn-as-dot{background:var(--amber-glow);box-shadow:0 0 10px var(--amber-glow);}

/* Fleet */
.sn-as-fleet{margin-top:.2rem;}
.sn-as-units{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;}
.sn-as-unit{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.08em;color:var(--smoke,#6b7fa0);border:1px solid var(--as-line-soft);border-radius:6px;padding:.35rem .6rem;transition:color .4s,border-color .4s;}
.sn-as-unit-dot{width:6px;height:6px;border-radius:50%;background:var(--fog);transition:background .4s,box-shadow .4s;}
.sn-as-fleet.lit .sn-as-unit{color:var(--cyan-pale);border-color:var(--cyan);}
.sn-as-fleet.lit .sn-as-unit-dot{background:var(--as-green);box-shadow:0 0 8px var(--as-green);}

/* Cycle panel */
.sn-as-cycle{background:var(--as-panel-soft);border:1px solid var(--as-line);border-radius:14px;padding:1.1rem 1.2rem;position:sticky;top:96px;}
.sn-as-cycle-head{font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);border-bottom:1px solid var(--as-line);padding-bottom:.7rem;margin-bottom:.9rem;}
.sn-as-phases{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.1rem;}
.sn-as-phase{display:flex;align-items:center;gap:.7rem;padding:.5rem .2rem;border-left:2px solid transparent;padding-left:.7rem;transition:border-color .3s,opacity .3s;opacity:.5;}
.sn-as-phase-n{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid var(--as-line);display:flex;align-items:center;justify-content:center;font-family:var(--mono,monospace);font-size:.66rem;color:var(--ash);transition:all .3s;}
.sn-as-phase-t{font-size:.82rem;color:var(--ash);}
.sn-as-phase.is-active{opacity:1;border-left-color:var(--cyan);}
.sn-as-phase.is-active .sn-as-phase-n{border-color:var(--cyan);color:var(--void);background:var(--cyan);box-shadow:0 0 12px var(--as-glow);}
.sn-as-phase.is-active .sn-as-phase-t{color:var(--white);}
.sn-as-phase.is-done{opacity:.8;}
.sn-as-phase.is-done .sn-as-phase-n{border-color:var(--as-green);color:var(--as-green);}
.sn-as-current{margin-bottom:.8rem;}
.sn-as-current-k{display:block;font-family:var(--mono,monospace);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:.25rem;}
.sn-as-current-v{font-family:var(--mono,monospace);font-size:.78rem;color:var(--cyan-pale,#a0d4e6);}
.sn-as-log-wrap{margin-bottom:.9rem;}
.sn-as-log{list-style:none;margin:0;padding:0;height:96px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.18rem;}
.sn-as-log li{font-family:var(--mono,monospace);font-size:.62rem;color:var(--ash);opacity:0;transform:translateY(4px);animation:sn-as-logline .4s ease forwards;}
.sn-as-log li::before{content:'› ';color:var(--cyan);}
.sn-as-inds{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.sn-as-ind{display:flex;justify-content:space-between;align-items:center;gap:.4rem;border:1px solid var(--as-line-soft);border-radius:7px;padding:.4rem .55rem;}
.sn-as-ind-k{font-family:var(--mono,monospace);font-size:.5rem;letter-spacing:.1em;color:var(--smoke);}
.sn-as-ind-v{font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.08em;color:var(--cyan-pale);transition:color .3s;}
.sn-as-ind.upd .sn-as-ind-v{color:var(--as-green);}
.sn-as-demo{font-family:var(--mono,monospace);font-size:.5rem;letter-spacing:.12em;color:var(--smoke);text-transform:uppercase;margin:.8rem 0 0;opacity:.7;}

/* Ground strip */
.sn-as-ground{margin-top:1.4rem;border:1px solid var(--as-line);border-radius:12px;padding:.9rem 1.1rem;background:var(--as-panel-soft);transition:border-color .4s,box-shadow .4s;}
.sn-as-ground.lit{border-color:var(--cyan);box-shadow:0 0 22px var(--as-glow);}
.sn-as-ground-items{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;}
.sn-as-ground-item{font-family:var(--mono,monospace);font-size:.6rem;color:var(--ash);border:1px solid var(--as-line-soft);border-radius:5px;padding:.25rem .5rem;}
.sn-as-ground-gw{color:var(--amber-pale,#f2cc7a);border-color:rgba(196,144,58,.3);}

/* Status strip */
.sn-as-strip{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-top:1rem;padding:.7rem 0;border-top:1px solid var(--as-line);border-bottom:1px solid var(--as-line);font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.06em;color:var(--ash);}
.sn-as-strip b{color:var(--smoke);font-weight:400;}
.sn-as-strip i{color:var(--cyan-pale);font-style:normal;}
.sn-as-strip-arch{color:var(--smoke);}
.sn-as-disclaimer{font-family:var(--mono,monospace);font-size:.54rem;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;text-align:center;margin:1.6rem 0 .4rem;opacity:.6;}

/* Animations */
@keyframes sn-as-blink{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes sn-as-flow{to{stroke-dashoffset:-28;}}
@keyframes sn-as-logline{to{opacity:1;transform:none;}}

/* Responsive */
@media(max-width:980px){
	.sn-as-grid{grid-template-columns:1fr;}
	.sn-as-cycle{position:static;}
}
@media(max-width:560px){
	.sn-as-inds{grid-template-columns:1fr;}
	.sn-as-tab{flex:1 1 auto;text-align:center;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.sn-as-live,.sn-as.is-live .sn-as-spine-flow,.sn-as-log li{animation:none;}
	.sn-as-log li{opacity:1;transform:none;}
}