/* errata — app interface prototype styles (mock only, not shipped).
   Reuses the brand system: DM Mono + Source Sans 3, warm neutrals, purple accent.
   Light "working tool" theme (the marketing site stays dark). */

:root {
	--bg: #faf8f5;
	--surface: #ffffff;
	--rail: #f6f3ee;
	--ink: #2d2a35;
	--ink-2: #45414f;
	--muted: #8a879a;
	--faint: #a09dad;
	--line: #e5e2dc;
	--line-soft: #efece6;
	--accent: #6a3dbc;
	--accent-ink: #5a2fa6;
	--accent-wash: #f3effb;
	--accent-line: #e4dbf6;
	--green: #5d8a6c;
	--amber: #b07d24;
	--amber-wash: #f7efdd;
	--red: #b9534f;
	--red-wash: #f7e7e6;
	--panel: #1a1a1e;
	--mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;
	--sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html,
body {
	height: 100%;
}

body {
	font-family: var(--sans);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ---------- shell ---------- */
.app {
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
}

.topbar {
	height: 54px;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 18px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mono);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.brand svg {
	width: 22px;
	height: 22px;
	display: block;
}

.matter {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	padding-left: 18px;
	border-left: 1px solid var(--line);
}
.matter .name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.matter .no {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
}

.tabs {
	display: flex;
	gap: 2px;
	margin-left: 8px;
}
.tabs a {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	padding: 7px 14px;
	border-radius: 7px;
}
.tabs a:hover {
	background: var(--bg);
	color: var(--ink);
}
.tabs a.active {
	background: var(--accent-wash);
	color: var(--accent-ink);
}

.top-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}
.demo-badge {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--amber);
	background: var(--amber-wash);
	border: 1px solid #ecdcb8;
	border-radius: 999px;
	padding: 3px 10px;
}
/* shown only on mobile (see breakpoint) — hints the demo is built for desktop */
.desktop-hint {
	display: none;
}
.avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: var(--mono);
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- body split ---------- */
.body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

/* left rail: ingested files */
.rail {
	width: 304px;
	flex: 0 0 304px;
	border-right: 1px solid var(--line);
	background: var(--rail);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.rail-head {
	padding: 14px 16px 10px;
	position: sticky;
	top: 0;
	background: var(--rail);
}
.rail-head .title {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.rail-search {
	width: 100%;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 7px 10px;
}
.rail-search::placeholder {
	color: var(--faint);
}

.group {
	padding: 6px 8px;
}
.group .glabel {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
	padding: 8px 8px 4px;
}
.file {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px;
	border-radius: 7px;
	cursor: pointer;
}
.file:hover {
	background: #efe9e0;
}
.file.active {
	background: var(--accent-wash);
}
.file .ic {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	color: #fff;
	margin-top: 1px;
}
.ic.pdf {
	background: #b0584f;
}
.ic.vid {
	background: #4f6fb0;
}
.ic.img {
	background: #5d8a6c;
}
.file .meta {
	min-width: 0;
	flex: 1;
}
.file .fname {
	font-size: 13px;
	color: var(--ink);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.file .fsub {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.dot.ok {
	background: var(--green);
}
.dot.work {
	background: var(--amber);
}
.status-ok {
	color: var(--green);
}
.status-work {
	color: var(--amber);
}

.rail-foot {
	margin-top: auto;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
}
.btn-add {
	width: 100%;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent-ink);
	background: var(--surface);
	border: 1px dashed var(--accent-line);
	border-radius: 7px;
	padding: 9px;
	cursor: pointer;
}

/* right main */
.main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.main-head {
	padding: 18px 28px 16px;
	border-bottom: 1px solid var(--line-soft);
}
.main-head h1 {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 18px;
	color: var(--ink);
}
.main-head .sub {
	font-size: 13px;
	color: var(--muted);
	margin-top: 3px;
}
.main-head .sub b {
	color: var(--ink-2);
	font-weight: 600;
}

/* citation chip — the "grounded in fact" link */
.cite {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--accent-ink);
	background: var(--accent-wash);
	border: 1px solid var(--accent-line);
	border-radius: 5px;
	padding: 1px 6px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: baseline;
}
.cite:hover {
	background: #eadffb;
}
.cite::before {
	content: '↳ ';
	opacity: 0.6;
}

/* small disclaimer line reused across modes */
.ai-note {
	font-size: 12px;
	color: var(--faint);
	font-style: italic;
}

@media (max-width: 820px) {
	.rail {
		display: none;
	}
	.matter,
	.demo-badge {
		display: none;
	}
	/* topbar wraps so the tabs stay reachable as a full-width scrollable row */
	.topbar {
		height: auto;
		flex-wrap: wrap;
		gap: 8px 14px;
		padding: 8px 14px;
	}
	.tabs {
		order: 3;
		width: 100%;
		margin-left: 0;
		gap: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tabs::-webkit-scrollbar {
		display: none;
	}
	.tabs a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.desktop-hint {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-family: var(--mono);
		font-size: 11px;
		color: var(--amber);
		background: var(--amber-wash);
		border: 1px solid #ecdcb8;
		border-radius: 999px;
		padding: 3px 10px;
		white-space: nowrap;
	}
	.main-head {
		padding: 14px 18px 12px;
	}
}

/* conversion strip — sits above the topbar, normal flow (not fixed → no overlap) */
.promo-strip {
	flex: 0 0 auto;
	display: block;
	background: #2d2a35;
	color: #faf8f5;
	text-align: center;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.4;
	padding: 7px 16px;
}
.promo-strip:hover {
	background: #383544;
}
.promo-strip b {
	color: #fff;
	font-weight: 500;
}
.promo-strip .promo-short {
	display: none;
}
.contact-cta {
	color: var(--accent-ink);
}
.contact-cta:hover {
	text-decoration: underline;
}

/* non-functional controls in this static render read as clearly inert */
button:disabled,
input:disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}
@media (max-width: 700px) {
	.promo-strip .promo-full {
		display: none;
	}
	.promo-strip .promo-short {
		display: inline;
	}
}