/* Dark glass UI theme — shared utilities & components */
:root{
	--bg: #07101a; /* page background */
	--panel: rgba(255,255,255,0.04); /* glass surface */
	--border: rgba(255,255,255,0.06);
	--text: #e6f0fb;
	--muted: rgba(230,240,252,0.55);
	--accent: #38bdf8; /* cyan */
	--accent-2: #a78bfa; /* purple */
	--glass-strong: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color:var(--text);
	background: radial-gradient(900px 600px at 10% 10%, rgba(56,189,248,0.06), transparent 25%),
							radial-gradient(800px 500px at 90% 30%, rgba(167,139,250,0.04), transparent 30%),
							var(--bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
main{padding-bottom:24px}

/* Layout utilities */
.wrap{width:min(1120px,94vw);margin:0 auto;padding:20px}
.row{display:flex;gap:12px}
.space-between{display:flex;justify-content:space-between;align-items:center}
.center-y{display:flex;align-items:center}

/* Topbar / nav */
.topbar{
	position:sticky;top:0;z-index:300;
	backdrop-filter: blur(8px);
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-bottom: 1px solid var(--border);
	padding:10px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#06121b;
	background: linear-gradient(135deg,var(--accent),var(--accent-2));
	box-shadow: 0 8px 28px rgba(56,189,248,0.08);
}
.nav{display:flex;align-items:center;gap:8px}
.navBtns{display:flex;gap:8px;align-items:center}
.navLink{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:700;transition:background 140ms,transform 120ms}
.navLink:focus{outline:2px solid rgba(56,189,248,0.18);outline-offset:3px}
.linkBtn{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-strong);padding:8px 12px}
.linkBtn:hover{transform:translateY(-2px);background: rgba(255,255,255,0.03)}
.skipLink{
	position:absolute;left:-999px;top:12px;
	background:#0d1c2a;color:var(--text);padding:10px 14px;border-radius:10px;border:1px solid var(--border);
}
.skipLink:focus{left:12px;z-index:200}

/* Panels / hero / cards */
.panel{
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius:12px;padding:18px;border:1px solid var(--border);
	backdrop-filter: blur(6px);
	position:relative;
	z-index:0;
}
.panel:hover,
.panel:focus-within{z-index:90}
.hero{min-height:56vh;display:grid;place-items:center;border-radius:14px;padding:30px}
.card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid var(--border)}
.heroInner{display:grid;gap:18px}
.heroQuick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.quickCard{
	background:rgba(255,255,255,0.02);border-radius:12px;padding:14px;border:1px solid var(--glass-strong);
}
.quickTitle{font-weight:800;margin-bottom:6px}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:800;color:var(--accent);background:rgba(56,189,248,0.06);border:1px solid rgba(56,189,248,0.08)}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none;color:#06121b;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 14px 36px rgba(56,189,248,0.08)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--glass-strong)}
.btn:hover{transform:translateY(-2px)}

.btnRow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}

.subtle{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);font-weight:700}
.eyebrow{text-transform:uppercase;letter-spacing:0.2em;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:700}
.sectionHeader{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between}
.sectionMeta{display:flex;gap:8px;flex-wrap:wrap}
.toolCard{display:grid;gap:10px}
.toolHeader{display:flex;align-items:center;justify-content:space-between;gap:12px}
.toolMeta{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:4px 10px;border-radius:999px;font-size:12px;background:rgba(255,255,255,0.04);border:1px solid var(--glass-strong)}
.statusDot{width:10px;height:10px;border-radius:999px;background:rgba(34,197,94,0.9);box-shadow:0 0 10px rgba(34,197,94,0.6)}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}
.chipRow{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(56,189,248,0.08);color:var(--text);border:1px solid rgba(56,189,248,0.2);padding:6px 10px;border-radius:999px;text-decoration:none;font-weight:700;font-size:12px}

/* NORS contextual help */
.help-anchor{display:inline-flex;align-items:center;gap:6px;position:relative}
.help-button{
	display:inline-grid;place-items:center;
	width:20px;height:20px;border-radius:999px;
	border:1px solid rgba(56,189,248,0.28);
	background:rgba(56,189,248,0.08);
	color:var(--text);
	font-size:12px;font-weight:800;
	cursor:pointer;
	padding:0;
	position:relative;
	z-index:2;
}
.help-button:focus{outline:2px solid rgba(56,189,248,0.35);outline-offset:2px}
.help-popover{
	display:none;
	position:absolute;
	z-index:1000;
	left:0;
	top:26px;
	width:min(340px,82vw);
	padding:12px;
	border-radius:10px;
	border:1px solid rgba(56,189,248,0.22);
	background:#0d1c2a;
	color:var(--text);
	box-shadow:0 16px 40px rgba(0,0,0,0.28);
	font-size:13px;
	line-height:1.45;
	text-align:left;
}
.help-popover span{display:block;margin-top:6px;font-weight:500;color:var(--text)}
.help-popover .help-source{color:var(--muted);font-size:12px}
.help-button:hover .help-popover,
.help-button:focus .help-popover,
.help-button[aria-expanded="true"] .help-popover{display:block}
.help-inline{
	margin-top:8px;
	padding:9px 11px;
	border-radius:10px;
	border:1px solid rgba(56,189,248,0.14);
	background:rgba(56,189,248,0.06);
	color:var(--muted);
	font-size:13px;
	line-height:1.45;
}
.help-inline strong{color:var(--text)}
.help-inline span{display:block;margin-top:4px}

/* Footer */
footer{margin-top:18px;color:var(--muted);font-size:13px}

/* Bread section */
.breadSection .breadPanel{
	background: radial-gradient(600px 300px at 0% 0%, rgba(255,182,72,0.08), transparent 45%),
							radial-gradient(500px 260px at 90% 10%, rgba(244,114,182,0.08), transparent 45%),
							linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.08);
}
.breadIntro{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.breadFeature{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,0.02);padding:14px;border-radius:12px;border:1px solid var(--glass-strong)}
.iconBadge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,0.06);font-size:20px}
.breadCard{border:1px solid rgba(255,255,255,0.1)}
.breadTools{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.breadToolkit{background:rgba(255,255,255,0.02);padding:16px;border-radius:12px;border:1px solid var(--glass-strong)}
.breadToolkit ul{margin:10px 0 0 18px;color:var(--muted)}

/* Buddy video game section */
.buddySection .buddyPanel{
	background: radial-gradient(640px 320px at 5% 5%, rgba(59,130,246,0.08), transparent 45%),
							radial-gradient(520px 260px at 90% 10%, rgba(16,185,129,0.08), transparent 45%),
							linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.08);
}
.buddyIntro{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.buddyFeature{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,0.02);padding:14px;border-radius:12px;border:1px solid var(--glass-strong)}
.buddyCard{border:1px solid rgba(255,255,255,0.1)}
.buddyTools{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.buddyToolkit{background:rgba(255,255,255,0.02);padding:16px;border-radius:12px;border:1px solid var(--glass-strong)}
.buddyToolkit ul{margin:10px 0 0 18px;color:var(--muted)}

/* Accessibility & responsiveness */
@media (max-width:720px){
	.wrap{padding:14px}
	.logo{width:36px;height:36px}
	.hero{padding:20px;min-height:48vh}
	.nav{gap:6px}
	.sectionHeader{flex-direction:column}
}

@media (max-width:420px){
	.navBtns{flex-wrap:wrap}
	.pill{padding:5px 8px;font-size:13px}
}

/* Utility focus state */
.focusable:focus{outline:2px solid rgba(167,139,250,0.18);outline-offset:4px}