/* Imperium OS — website graphics design system, rebranded to brand-v5 (2026-07-29)
   Type: Switzer body + Emilio Light display. Colour: greens only per BRAND-BOOK.md.
   Var names kept from the original so per-file styles keep working; values are v5. */
@font-face {
	font-family: 'Switzer';
	src: url('fonts/Switzer-Regular.woff2') format('woff2');
	font-weight: 100 449;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Switzer';
	src: url('fonts/Switzer-Medium.woff2') format('woff2');
	font-weight: 450 549;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Switzer';
	src: url('fonts/Switzer-Semibold.woff2') format('woff2');
	font-weight: 550 900;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Emilio';
	src: url('fonts/Emilio-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: block;
}

:root {
	--bone: #F4F1EA;            /* v5 Bone */
	--ink: #15130E;             /* v5 Ink */
	--green: #11462C;           /* Racing Green */
	--ember: #E23A28;           /* v5 Ember — the ONE alert accent */
	--mint: #4CB782;       /* v5 Mint (replaces retired champagne) */
	--hair: rgba(21, 19, 14, 0.08);
	--hair-strong: rgba(21, 19, 14, 0.12);
	--ink-45: rgba(21, 19, 14, 0.45);
	--ink-55: rgba(21, 19, 14, 0.55);
	--ink-66: rgba(21, 19, 14, 0.66);
	--ink-80: rgba(21, 19, 14, 0.80);
	--panel: rgba(255, 255, 255, 0.72);
	--panel-solid: #F9F8F3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	font-family: 'Switzer', sans-serif;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'tnum' 1, 'calt' 1;
	overflow: hidden;
}

/* ---------- window chrome (shared by both products — the "attached" signal) ---------- */
.window {
	background: var(--panel-solid);
	border: 1px solid rgba(21, 19, 14, 0.10);
	border-radius: 12px;
	box-shadow: 0 24px 80px rgba(21, 19, 14, 0.10);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.titlebar {
	height: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--hair);
	background: rgba(255, 255, 255, 0.55);
	position: relative;
}
.title-pill {
	font-size: 12px;
	font-weight: 480;
	color: var(--ink-55);
	letter-spacing: 0.005em;
	padding: 5px 16px;
	border: 1px solid var(--hair);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}
.win-body { flex: 1; display: flex; min-height: 0; }

/* ---------- typography ---------- */
.eyebrow {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(17, 70, 44, 0.62);
}
.h1 {
	font-family: 'Emilio', serif;
	font-size: 36px;
	font-weight: 300;
	letter-spacing: -0.005em;
	color: var(--ink);
}
.big-num {
	font-size: 42px;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-feature-settings: 'tnum' 1;
}

/* ---------- sidebar (cockpit) ---------- */
.side {
	width: 212px;
	flex: none;
	border-right: 1px solid var(--hair);
	background: rgba(255, 255, 255, 0.5);
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
}
.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 2px 10px 18px;
}
.brand img { width: 20px; height: 20px; object-fit: contain; }
.brand span { font-size: 13px; font-weight: 560; letter-spacing: 0.01em; }
.nav-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 470;
	color: var(--ink-66);
	margin-bottom: 2px;
}
.nav-row svg { width: 15px; height: 15px; stroke: rgba(21, 19, 14, 0.55); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-row svg.codicon { fill: rgba(21, 19, 14, 0.55); stroke: none; }
.nav-row.active {
	background: rgba(17, 70, 44, 0.07);
	color: var(--green);
	font-weight: 530;
}
.nav-row.active svg { stroke: var(--green); }
.nav-row.active svg.codicon { fill: var(--green); stroke: none; }
.side-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	border-top: 1px solid var(--hair);
}
.avatar {
	width: 24px; height: 24px;
	border-radius: 50%;
	background: rgba(21, 19, 14, 0.08);
	border: 1.5px solid var(--mint);
	display: flex; align-items: center; justify-content: center;
	font-size: 10.5px; font-weight: 560; color: var(--ink-66);
}
.side-foot .who { font-size: 12px; font-weight: 500; color: var(--ink-80); line-height: 1.25; }
.side-foot .who small { display: block; font-size: 10.5px; font-weight: 440; color: var(--ink-45); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tile {
	background: var(--panel);
	border: 1px solid var(--hair);
	border-radius: 12px;
	padding: 18px 20px 16px;
	position: relative;
	overflow: hidden;
}
.tile .lab { margin-bottom: 10px; }
.tile .sub { font-size: 12px; font-weight: 440; color: var(--ink-45); margin-top: 4px; }
.tile svg.area { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; display: block; }

/* ---------- decision cards (G-G anatomy) ---------- */
.dcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dcard {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--hair);
	border-radius: 12px;
	padding: 16px 18px 14px;
}
.dcard .eyebrow { font-size: 10px; margin-bottom: 8px; }
.dcard .dtitle { font-size: 14.5px; font-weight: 550; letter-spacing: -0.005em; line-height: 1.35; margin-bottom: 6px; }
.dcard .dwhy { font-size: 12.5px; font-weight: 440; color: rgba(21, 19, 14, 0.6); line-height: 1.5; margin-bottom: 12px; }
.dmeta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.chip {
	font-size: 11.5px; font-weight: 520;
	color: var(--ink-80);
	border: 1px solid var(--hair-strong);
	border-radius: 999px;
	padding: 3px 10px;
	font-feature-settings: 'tnum' 1;
	white-space: nowrap;
}
.conf { flex: 1; display: flex; align-items: center; gap: 8px; }
.conf .bar { flex: 1; height: 2px; background: rgba(21, 19, 14, 0.08); border-radius: 2px; overflow: hidden; }
.conf .bar i { display: block; height: 100%; background: rgba(17, 70, 44, 0.45); border-radius: 2px; }
.conf .pct { font-size: 11.5px; font-weight: 500; color: var(--ink-55); font-feature-settings: 'tnum' 1; }
.dacts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.btn-ghost {
	font-size: 12px; font-weight: 490; color: var(--ink-55);
	padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
}
.btn-line {
	font-size: 12px; font-weight: 510; color: var(--ink-80);
	padding: 6px 14px; border-radius: 8px; border: 1px solid var(--hair-strong);
	background: rgba(255, 255, 255, 0.6);
}
.btn-green {
	font-size: 12px; font-weight: 540; color: #F4F1EA;
	padding: 6px 14px; border-radius: 8px;
	background: var(--green);
	border: 1px solid var(--green);
	display: inline-flex; align-items: center; gap: 6px;
}
.btn-green svg { width: 11px; height: 11px; stroke: #F4F1EA; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- premium finish layer (v4, 2026-07-30) ----------
   Drop <div class="glint"></div><div class="grain"></div> inside any
   overflow:hidden card. Set --card-r on the card if its radius isn't 22px. */
.glint {
	position: absolute; right: 0; top: 0; width: 42%; height: 36%;
	pointer-events: none; z-index: 6;
	border-top: 3px solid rgba(255, 255, 255, 0.85);
	border-right: 3px solid rgba(255, 255, 255, 0.55);
	border-top-right-radius: var(--card-r, 22px);
	filter: blur(1.6px);
	-webkit-mask: radial-gradient(130% 130% at 100% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 74%);
	        mask: radial-gradient(130% 130% at 100% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 74%);
}
.grain {
	position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}