/* DMS Reader Portal — Variant B: Daylight Office */

/* ── Theme variables ── */
:root {
	--bg: #ffffff;
	--bg-elev: #f6f8fa;
	--bg-elev-2: #eef0f3;
	--line: #d0d7de;
	--line-soft: #e8ecf0;
	--ink: #24292f;
	--ink-mute: #57606a;
	--ink-dim: #8c959f;
	--accent: #7c3aed;
	--accent-soft: #9061f9;
	--accent-dim: color-mix(in srgb, var(--accent) 60%, var(--ink-dim));
	--accent-bg: color-mix(in srgb, var(--accent) 8%, var(--bg));
	--on-accent: #ffffff;
	--teal: #0969da;
	--red: #cf222e;
	--red-bg: color-mix(in srgb, var(--red) 8%, var(--bg));
	--green: #1a7f37;
	--green-bg: color-mix(in srgb, var(--green) 8%, var(--bg));
	--gold: #9a6700;
	--grid: transparent;
	--overlay-bg: rgba(0, 0, 0, 0.35);
	--topbar-bg: rgba(255, 255, 255, 0.92);
	--sidebar-bg: #f3f4f6;
	--sidebar-width: 240px;
	--footer-h: 44px;
	/* Layout scale. Two widths, picked by what the page is for rather than
	   per-page one-offs: anything with a work surface — a table, a queue, a
	   document beside its action rail — gets the room, and pure forms keep a
	   short measure so lines stay readable. */
	--w-wide: 1600px;
	--w-form: 820px;
	--w-upload: 1240px;
	--gutter: clamp(16px, 3.2vw, 44px);
	--rail-w: clamp(310px, 25vw, 400px);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html[data-theme="dark"] {
	--bg: #0d1117;
	--bg-elev: #161b22;
	--bg-elev-2: #1c2128;
	--line: #30363d;
	--line-soft: #21262d;
	--ink: #e6edf3;
	--ink-mute: #8b949e;
	--ink-dim: #6e7681;
	--accent: #8b5cf6;
	--accent-soft: #a78bfa;
	--accent-dim: color-mix(in srgb, var(--accent) 60%, var(--ink-dim));
	--accent-bg: color-mix(in srgb, var(--accent) 12%, var(--bg));
	--on-accent: #ffffff;
	--teal: #58a6ff;
	--red: #f85149;
	--red-bg: color-mix(in srgb, var(--red) 10%, var(--bg));
	--green: #3fb950;
	--green-bg: color-mix(in srgb, var(--green) 10%, var(--bg));
	--gold: #e3b341;
	--grid: rgba(255, 255, 255, 0.025);
	--overlay-bg: rgba(0, 0, 0, 0.7);
	--topbar-bg: rgba(13, 17, 23, 0.92);
	--sidebar-bg: #0f1117;
}

@media (prefers-reduced-motion: reduce) {
	.sidebar { transition: none; }
	.chev { transition: none; }
	.update-toast { animation: none; }
	.folder-row:hover .farrow { transform: none; }
}

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

html, body {
	background: var(--bg);
	color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

html[data-theme="dark"] body {
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 48px 48px, 48px 48px;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Sidebar layout ── */
.sidebar {
	position: fixed;
	left: 0; top: 0; bottom: 0;
	width: var(--sidebar-width);
	background: var(--sidebar-bg);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	z-index: 60;
	overflow-y: auto;
	transition: transform 250ms var(--ease-out);
}

.sidebar-brand {
	padding: 18px 14px 14px;
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}
.sidebar-brand a { color: inherit; text-decoration: none; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
a.brand { text-decoration: none; color: inherit; }

.brand-mark {
	width: 32px; height: 32px;
	background: var(--accent);
	display: grid; place-items: center;
	color: var(--on-accent);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	border-radius: 6px;
}

.brand-logo-img {
	height: 32px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.brand-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.brand-sub {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--ink-dim);
	letter-spacing: 0.1em; text-transform: uppercase;
	margin-top: 2px;
}

/* Legacy brand-text for manage pages */
.brand-text { min-width: 0; }
.brand-text h1 { font-size: 14px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-text span {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--ink-dim);
	letter-spacing: 0.14em; text-transform: uppercase;
	display: block;
}

.sidebar-nav {
	padding: 10px 8px;
	flex: 1;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	color: var(--ink-mute);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	background: transparent;
	width: 100%;
	transition: background 0.15s, color 0.15s, transform 160ms var(--ease-out);
	min-height: 44px;
	text-align: left;
}
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item:active { transform: scale(0.97); }
.nav-item.active { background: var(--accent-bg); color: var(--accent); }
.nav-item svg { flex-shrink: 0; }

/* Search button inside sidebar nav */
.sidebar-nav .search-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--ink-mute);
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	height: auto;
	min-height: 44px;
	text-align: left;
	transition: background 0.15s, color 0.15s, transform 160ms var(--ease-out);
}
.sidebar-nav .search-btn:hover { background: var(--line-soft); color: var(--ink); }
.sidebar-nav .search-btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }

.sidebar-bottom {
	padding: 10px 8px 16px;
	border-top: 1px solid var(--line);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sidebar-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--line-soft);
	margin-bottom: 2px;
}
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-email { font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

.sidebar-actions { display: flex; gap: 4px; align-items: center; padding: 0 2px; }

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--ink-mute);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, transform 160ms var(--ease-out);
	flex-shrink: 0;
}
.theme-toggle:hover { background: var(--line-soft); color: var(--ink); }
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.sidebar-logout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 6px;
	color: var(--ink-mute);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, transform 160ms var(--ease-out);
	flex-shrink: 0;
}
.sidebar-logout:hover { background: var(--red-bg); color: var(--red); }
.sidebar-logout:active { transform: scale(0.97); }

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--overlay-bg);
	z-index: 55;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: none;
	cursor: pointer;
}
.sidebar-overlay.open { display: block; }

/* ── Page wrap ── */
.page-wrap {
	margin-left: var(--sidebar-width);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── Mobile header ── */
.mobile-header {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	height: 56px;
	background: var(--topbar-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
	flex-shrink: 0;
}

.hamburger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: none;
	background: transparent;
	color: var(--ink-mute);
	cursor: pointer;
	border-radius: 6px;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s, transform 160ms var(--ease-out);
}
.hamburger-btn:hover { background: var(--line-soft); color: var(--ink); }
.hamburger-btn:active { transform: scale(0.97); }

.mobile-brand {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	min-width: 0;
}

/* ── Topbar (kept for manage pages) ── */
.topbar {
	border-bottom: 1px solid var(--line);
	background: var(--topbar-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: sticky;
	top: 0;
	z-index: 50;
}
.topbar-inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 16px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
/* The brand gives up room first; the actions on the right keep their size so
   they stay tappable. Without this the manage topbar simply overflowed the
   viewport on a phone and took the whole page into horizontal scroll. */
.topbar-inner > .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.topbar-inner > :last-child { flex: 0 0 auto; }
.topbar a { color: var(--ink-mute); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; }
.topbar a:hover { color: var(--accent); }
.topbar a.avatar, .topbar a.avatar:hover { color: var(--on-accent); }
.role-tag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--gold);
	border: 1px solid var(--gold);
	padding: 6px 11px;
	letter-spacing: 0.1em; text-transform: uppercase;
	border-radius: 4px;
}

/* ── Avatar ── */
.avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--accent);
	display: grid; place-items: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; font-weight: 600;
	color: var(--on-accent);
	text-decoration: none;
	flex-shrink: 0;
}

/* ── Content layout ── */
main { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 32px var(--gutter) calc(var(--footer-h) + 32px); flex: 1; min-width: 0; }
.container { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 32px var(--gutter) calc(var(--footer-h) + 40px); }
/* Opt a page back down to a reading measure (forms, prose, sign-in). */
main.main-form, .container.container-form { max-width: var(--w-form); }

/* ── Fixed footer ── */
.site-footer {
	position: fixed;
	bottom: 0;
	left: var(--sidebar-width);
	right: 0;
	height: var(--footer-h);
	background: var(--bg);
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	z-index: 40;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
}
.footer-logo { height: 20px; width: auto; object-fit: contain; flex-shrink: 0; }
.footer-copyright {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim);
	letter-spacing: 0.04em;
}
.footer-right {
	white-space: nowrap; flex-shrink: 0;
	font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim);
	letter-spacing: 0.04em;
}
.footer-right a { color: var(--accent); text-decoration: none; }
.footer-right a:hover { text-decoration: underline; }

/* ── Breadcrumb ── */
.crumb {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--accent-dim);
	letter-spacing: 0.08em;
	margin-bottom: 28px;
}
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { margin: 0 8px; color: var(--line); }
.crumb .here { color: var(--ink); }

/* ── Buttons ── */
.btn {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 14px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-mute);
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s, transform 160ms var(--ease-out);
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 8px;
	border-radius: 6px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn.secondary { background: var(--bg-elev); }
.btn.ghost { border-color: transparent; }
.btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Pills, badges, status ── */
.rev-pill {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	padding: 4px 9px;
	border: 1px solid var(--line);
	color: var(--ink);
	letter-spacing: 0.05em;
	border-radius: 4px;
}
.colh {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--accent-dim);
	letter-spacing: 0.12em; text-transform: uppercase;
	margin-bottom: 5px;
}
.colv { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-mute); }

.status {
	display: flex; align-items: center; gap: 7px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.05em;
	text-transform: uppercase;
}
.sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.s-acknowledged .sdot { background: var(--green); }     .s-acknowledged { color: var(--green); }
.s-action_required .sdot { background: var(--accent); } .s-action_required { color: var(--accent-soft); }
.s-not_in_profile .sdot { background: var(--line); }    .s-not_in_profile { color: var(--ink-dim); }
.s-restricted .sdot { background: var(--red); }         .s-restricted { color: var(--red); }
.s-open .sdot { background: var(--teal); }              .s-open { color: var(--teal); }

.tag-chip {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--ink-mute);
	border: 1px solid var(--line);
	padding: 3px 8px; margin-right: 5px;
	letter-spacing: 0.04em;
	border-radius: 3px;
}

/* ── Folder header ── */
.fhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 8px;
}
.fhead-left { display: flex; gap: 22px; flex: 1; min-width: 0; }
.fhead-icon { width: 54px; height: 46px; flex-shrink: 0; }
.fhead-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--accent);
	letter-spacing: 0.2em; text-transform: uppercase;
	margin-bottom: 8px;
}
.fhead h2 { font-size: 36px; font-weight: 700; line-height: 1.1; margin-bottom: 12px; }
.fhead p { color: var(--ink-mute); font-size: 14px; max-width: 520px; line-height: 1.6; }

.compliance {
	border: 1px solid var(--line);
	background: var(--bg-elev);
	padding: 20px 24px;
	min-width: 248px;
	flex-shrink: 0;
	border-radius: 8px;
}
.compliance .ttl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.18em; text-transform: uppercase;
	margin-bottom: 14px;
}
.bar { height: 6px; background: var(--bg-elev-2); display: flex; margin-bottom: 14px; gap: 2px; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; }
.bar .done       { background: var(--green); }
.bar .due        { background: var(--accent); }
.bar .na         { background: var(--line); }
.bar .restricted { background: var(--red); }
.clegend { display: flex; flex-direction: column; gap: 8px; }
.clegend div { display: flex; justify-content: space-between; font-size: 12px; }
.clegend .k { color: var(--ink-mute); display: flex; align-items: center; gap: 7px; }
.dotc { width: 7px; height: 7px; border-radius: 50%; }
.clegend .v { font-family: 'JetBrains Mono', monospace; }

/* ── Toolbar / tabs ── */
.toolbar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 22px 0; flex-wrap: wrap; gap: 14px;
}
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink-mute);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 14px;
	cursor: pointer;
	transition: color .2s, border-color .2s, background .2s, transform 160ms var(--ease-out);
	border-radius: 6px;
}
.tabs button:hover { color: var(--ink); }
.tabs button:active { transform: scale(0.97); }
.tabs button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.sort { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-dim); display: flex; align-items: center; gap: 8px; }
.sort select {
	background: var(--bg-elev);
	color: var(--ink-mute);
	border: 1px solid var(--line);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; padding: 6px 10px;
	border-radius: 6px;
}

/* ── Doc list ── */
.doclist { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.doc { border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.doc:last-child { border-bottom: none; }
.doc-row {
	display: grid;
	grid-template-columns: 40px 1fr 150px 130px 170px 160px;
	gap: 18px; align-items: center;
	padding: 20px 24px;
	cursor: pointer;
	transition: background .2s;
}
.doc-row:hover { background: var(--bg-elev-2); }
.doc-ico { width: 26px; height: 30px; }
.doc-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.doc-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); margin-top: 5px; letter-spacing: 0.04em; }
.doc.locked .doc-title { color: var(--ink-mute); }
.doc.locked .rev-pill  { color: var(--ink-dim); }
.act { text-align: right; }

.chev {
	display: inline-block;
	transition: transform 200ms var(--ease-in-out);
	color: var(--accent-dim);
	margin-left: 8px;
	font-size: 13px;
}
.doc.open .chev { transform: rotate(90deg); }

.revs {
	display: none;
	padding: 4px 24px 24px 82px;
	background: var(--bg-elev-2);
	border-top: 1px dashed var(--line);
}
.doc.open .revs { display: block; }
.revs-ttl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.15em; text-transform: uppercase;
	padding: 18px 0 12px;
}
/* Revision history is an audit record, so it is laid out as one: every fact sits
   in the same column on every row, under a single header, so the list can be
   read down a column rather than re-parsed row by row. A fact that does not
   exist leaves its cell empty — an em dash is not evidence of anything, and a
   column of them is pure noise. */
.rev-head,
.rev-top {
	display: grid;
	grid-template-columns:
		minmax(72px, 0.8fr)   /* revision label */
		minmax(92px, 0.9fr)   /* state */
		minmax(84px, 0.9fr)   /* effective */
		minmax(84px, 0.9fr)   /* expires */
		minmax(88px, 0.9fr)   /* acknowledged */
		minmax(150px, 1.4fr)  /* access */
		minmax(84px, 0.9fr);  /* integrity */
	gap: 6px 16px;
	align-items: center;
}
.rev-head {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-dim);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.rev {
	display: flex; flex-direction: column; gap: 6px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line-soft);
}
.rev:last-child { border-bottom: none; }
.rev-people {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px 16px;
	align-items: baseline;
}
.rev .rid    { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.rev .rmeta  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-dim); }
.rev .rchg   { color: var(--ink-mute); font-size: 12px; line-height: 1.5; }
.rev .rval {
	font-size: 12px; color: var(--ink-mute);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rev .rval .ok { color: var(--green); }

/* One fact per chip: a mono micro-label followed by its value. The label is
   rendered only when there is a value behind it. */
.rfact {
	display: inline-flex; align-items: baseline; gap: 6px;
	font-size: 12px; color: var(--ink-mute);
	white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}
.rfact i {
	font-style: normal;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-dim);
	flex: none;
}
.rfact.ok { color: var(--green); }
.rfact.muted { color: var(--ink-dim); }
.rstate {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid;
	display: inline-block;
	border-radius: 3px;
}
.rev-top > .rstate { justify-self: start; }
.rstate.cur { color: var(--green); border-color: var(--green); }
.rstate.sup { color: var(--ink-dim); border-color: var(--line); }
.archived-note {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	margin-top: 14px;
	padding: 10px 12px;
	border-left: 2px solid var(--red);
	background: var(--red-bg);
	line-height: 1.7;
}

/* ── Card primitives ── */
.card-frame {
	border: 1px solid var(--line);
	background: var(--bg-elev);
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}
.card-frame::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

.doc-band {
	padding: 24px 28px;
	border-bottom: 1px solid var(--line);
	display: flex; gap: 18px;
	align-items: flex-start;
}
.doc-band .doc-ico { width: 34px; height: 40px; flex-shrink: 0; }
.doc-band h3 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.doc-band .dref {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.06em; margin-top: 7px;
}
.rev-chip {
	margin-left: auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent);
	border: 1px solid var(--accent);
	padding: 6px 10px;
	white-space: nowrap;
	border-radius: 4px;
}

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; }
.meta-cell {
	padding: 16px 28px;
	border-bottom: 1px solid var(--line-soft);
	border-right: 1px solid var(--line-soft);
}
.meta-cell:nth-child(even) { border-right: none; }
.meta-cell .mk {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--accent-dim);
	letter-spacing: 0.12em; text-transform: uppercase;
	margin-bottom: 6px;
}
.meta-cell .mv { font-size: 14px; color: var(--ink); }
.meta-cell .mv.hl { color: var(--accent-soft); }

.section { padding: 24px 28px; border-bottom: 1px solid var(--line); }
.section-l {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.14em; text-transform: uppercase;
	margin-bottom: 14px;
}

.whatsnew {
	background: var(--bg-elev-2);
	border-left: 3px solid var(--teal);
	padding: 14px 16px;
	font-size: 13px; line-height: 1.6;
	color: var(--ink-mute);
	white-space: pre-wrap;
}
.whatsnew b { color: var(--ink); font-weight: 600; }

.statement {
	background: var(--bg-elev-2);
	border: 1px solid var(--line);
	padding: 18px 20px;
	font-size: 14px; line-height: 1.65;
	color: var(--ink-mute);
	border-radius: 6px;
}
.statement b { color: var(--ink); font-weight: 600; }

.receipt-btn {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform 160ms var(--ease-out);
}
.receipt-btn:hover:not(:disabled) { border-color: var(--accent); }
.receipt-btn:active:not(:disabled) { transform: scale(0.97); }
.receipt-btn:disabled,
.receipt-btn.done {
	cursor: default;
	border-color: var(--green);
	background: var(--accent-bg);
	color: var(--green);
	font-weight: 600;
}

.record { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rec-cell { background: var(--bg-elev); padding: 13px 16px; }
.rec-cell .rk {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--accent-dim);
	letter-spacing: 0.1em; text-transform: uppercase;
	margin-bottom: 5px;
}
.rec-cell .rv { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); }

/* ── Acknowledge form ── */
.pretitle {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--accent);
	letter-spacing: 0.2em; text-transform: uppercase;
	text-align: center;
	margin-bottom: 14px;
	display: flex; align-items: center; gap: 12px;
	justify-content: center;
}
.pretitle::before, .pretitle::after { content: ''; width: 30px; height: 1px; background: var(--accent); }
h2.title { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.1; margin-bottom: 38px; }

.confirm-check {
	display: flex; gap: 13px;
	align-items: flex-start;
	padding: 18px;
	border: 1px solid var(--line);
	background: var(--bg-elev-2);
	cursor: pointer;
	transition: border-color .15s, transform 160ms var(--ease-out);
	margin-bottom: 18px;
	border-radius: 6px;
}
.confirm-check:hover { border-color: var(--ink-dim); }
.confirm-check:active { transform: scale(0.98); }
.confirm-check.on { border-color: var(--accent); background: var(--accent-bg); }
.confirm-check.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.confirm-check .box {
	width: 20px; height: 20px;
	border: 1.5px solid var(--line);
	flex-shrink: 0;
	display: grid; place-items: center;
	margin-top: 1px;
	transition: background .15s, border-color .15s;
	border-radius: 4px;
}
.confirm-check.on .box { background: var(--accent); border-color: var(--accent); }
.confirm-check .box svg { opacity: 0; }
.confirm-check.on .box svg { opacity: 1; }
.confirm-check .ct { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); }
.confirm-check.on .ct { color: var(--ink); }

.btn-confirm {
	width: 100%;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 17px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent); font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform 160ms var(--ease-out);
	border-radius: 6px;
}
.btn-confirm:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-confirm:active:not(:disabled) { transform: scale(0.97); }
.btn-confirm:disabled { background: var(--bg-elev-2); border-color: var(--line); color: var(--ink-dim); cursor: not-allowed; }
.gatenote { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); text-align: center; margin-top: 12px; }
.gatenote.ready { color: var(--green); }

/* ── Success receipt ── */
.success-mark {
	width: 64px; height: 64px;
	border: 1.5px solid var(--green);
	border-radius: 50%;
	display: grid; place-items: center;
	margin: 0 auto 22px;
}
.success-mark svg { stroke: var(--green); }
.receipt-card {
	border: 1px solid var(--green);
	background: var(--bg-elev);
	padding: 34px 30px;
	text-align: center;
	border-radius: 8px;
}
.receipt-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.receipt-card p { color: var(--ink-mute); font-size: 14px; line-height: 1.6; max-width: 420px; margin: 0 auto 26px; }
.receipt-id {
	display: inline-flex; flex-direction: column; gap: 5px;
	border: 1px dashed var(--line);
	padding: 14px 26px;
	border-radius: 6px;
}
.receipt-id .ril { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--accent-dim); letter-spacing: 0.14em; text-transform: uppercase; }
.receipt-id .riv { font-family: 'JetBrains Mono', monospace; font-size: 17px; color: var(--green); letter-spacing: 0.05em; }
.receipt-foot { margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); line-height: 1.7; }

/* ── Approval workflow ── */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; flex-wrap: wrap; gap: 16px; }
.page-head .label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--accent);
	letter-spacing: 0.2em; text-transform: uppercase;
	margin-bottom: 10px;
}
.page-head h2 { font-size: 36px; line-height: 1.05; font-weight: 700; }
.page-head h2 em { color: var(--accent); font-style: italic; }
.await-badge {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent);
	border: 1px solid var(--accent);
	padding: 8px 13px;
	letter-spacing: 0.1em; text-transform: uppercase;
	display: flex; align-items: center; gap: 8px;
	border-radius: 6px;
}
.await-badge .pd { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.stepper {
	display: flex;
	border: 1px solid var(--line);
	background: var(--bg-elev);
	margin-bottom: 32px;
	border-radius: 8px;
	overflow: hidden;
}
.step { flex: 1; padding: 18px 22px; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: none; }
.step .sn {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	display: flex; align-items: center; gap: 8px;
}
.step .sname { font-size: 14px; font-weight: 500; }
.step .smeta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); margin-top: 5px; }
.step .tick { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; }
.step.done    .tick { background: var(--green); color: var(--bg); }
.step.done    .sname { color: var(--ink-mute); }
.step.current { background: var(--bg-elev-2); }
.step.current .tick { background: var(--accent); color: var(--bg); }
.step.current .sname { color: var(--accent-soft); }
.step.current::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
.step.todo    .tick { border: 1px solid var(--line); color: var(--ink-dim); }
.step.todo    .sname { color: var(--ink-dim); }

.grid-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 28px; align-items: start; }
/* Which side sticks matters. The rail used to be the sticky one, which bought
   nothing: it stacks four tall cards (details, checklist, distribution impact,
   decision) and is far taller than the viewport, so it scrolled anyway — and
   the reviewer had to ping-pong up to the document and back down to the
   checklist for every item. Stick the *document* instead: it stays in view for
   the whole length of the rail, which is the thing being worked down. */
@media (min-width: 1081px) {
	.grid-split > :first-child {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.grid-split > :first-child iframe.pdf-frame {
		min-height: 0;
		height: calc(100vh - 210px);
	}
}
/* Ultra-wide: give the checklist and decision cards room to breathe rather than
   spending every extra pixel on the preview. */
@media (min-width: 1500px) {
	.grid-split { --rail-w: clamp(400px, 27vw, 480px); }
}

.panel { border: 1px solid var(--line); background: var(--bg-elev); border-radius: 8px; overflow: hidden; }
.panel-h {
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
	display: flex; justify-content: space-between; align-items: center;
}
.panel-h .pt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--ink-mute);
	letter-spacing: 0.14em; text-transform: uppercase;
}

.rcard { border: 1px solid var(--line); background: var(--bg-elev); margin-bottom: 24px; border-radius: 8px; overflow: hidden; }
.rcard-h {
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--ink-mute);
	letter-spacing: 0.14em; text-transform: uppercase;
}
.rcard-b { padding: 20px; }

.meta-row {
	display: flex; justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}
.meta-row:last-child { border-bottom: none; }
.meta-row .mk { color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.meta-row .mv { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); }
.meta-row .mv.hl { color: var(--accent-soft); }

.check {
	display: flex; gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft);
	cursor: pointer;
	transition: transform 160ms var(--ease-out);
}
.check:last-child { border-bottom: none; }
.check:active { transform: scale(0.98); }
.check .box {
	width: 18px; height: 18px;
	border: 1.5px solid var(--line);
	flex-shrink: 0;
	display: grid; place-items: center;
	transition: background .15s, border-color .15s;
	margin-top: 1px;
	border-radius: 3px;
}
.check.on .box { background: var(--green); border-color: var(--green); }
.check .box svg { opacity: 0; }
.check.on .box svg { opacity: 1; }
.check .ctext { font-size: 13px; line-height: 1.45; color: var(--ink-mute); }
.check.on .ctext { color: var(--ink); }

.dist { background: var(--bg-elev-2); border: 1px solid var(--line); padding: 16px 18px; border-radius: 6px; }
.dist .dnum { font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1; }
.dist .dlabel { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.dist .dprofiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.dchip { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-mute); border: 1px solid var(--line); padding: 3px 8px; border-radius: 3px; }
.dist .supersede {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-soft);
	line-height: 1.6;
	padding-top: 12px;
	border-top: 1px dashed var(--line);
	margin-top: 6px;
}

.decision { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.decision-row { flex-direction: row; }
.decision-row .opt { flex: 1; }
.opt {
	display: flex; gap: 11px; align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--line);
	cursor: pointer; transition: border-color .15s, background .15s, transform 160ms var(--ease-out);
	border-radius: 6px;
}
.opt:hover { border-color: var(--ink-dim); }
.opt:active { transform: scale(0.98); }
.opt.sel { border-color: var(--accent); background: var(--accent-bg); }
.opt .radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; display: grid; place-items: center; }
.opt.sel .radio { border-color: var(--accent); }
.opt.sel .radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.opt .ot { font-size: 13px; font-weight: 500; }
.opt .od { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); margin-top: 2px; }

textarea, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"] {
	width: 100%;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	padding: 11px 13px;
	border-radius: 6px;
	transition: border-color .15s, box-shadow .15s;
}
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"] { color-scheme: dark; }
textarea { resize: vertical; min-height: 72px; }
input[type="date"] { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 9px 12px; }
input[type="number"] { -moz-appearance: textfield; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea::placeholder, input::placeholder { color: var(--ink-dim); }
textarea:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.field-l {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--gold);
	letter-spacing: 0.1em; text-transform: uppercase;
	margin: 16px 0 8px;
}

.signoff { background: var(--bg-elev-2); border: 1px solid var(--line); padding: 16px; margin: 18px 0; border-radius: 6px; }
.signoff .stext { font-size: 12px; line-height: 1.6; color: var(--ink-mute); font-style: italic; }
.signoff .stext b { color: var(--ink); font-style: normal; }
.sign-check { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px; cursor: pointer; transition: transform 160ms var(--ease-out); }
.sign-check:active { transform: scale(0.98); }
.sign-check .box { width: 18px; height: 18px; border: 1.5px solid var(--line); flex-shrink: 0; display: grid; place-items: center; border-radius: 3px; }
.sign-check.on .box { background: var(--accent); border-color: var(--accent); }
.sign-check .box svg { opacity: 0; }
.sign-check.on .box svg { opacity: 1; }
.sign-check span { font-size: 12px; color: var(--ink-mute); line-height: 1.4; }
.sign-check.on span { color: var(--ink); }

.actions { display: flex; gap: 10px; }

/* ── Branded error page (templates/pages/dms_error.html) ── */
.portal-error {
	min-height: 100vh;
	display: grid; place-items: center;
	padding: 32px var(--gutter);
	background: var(--bg);
}
.portal-error-card {
	max-width: 520px; text-align: center;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 40px 36px;
}
.portal-error-code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; letter-spacing: 0.22em;
	color: var(--accent); margin-bottom: 14px;
}
.portal-error-card h1 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.portal-error-card p {
	margin-top: 12px;
	font-size: 14px; line-height: 1.65; color: var(--ink-mute);
}
.portal-error-actions { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Upload progress ── */
.upload-status { margin-top: 12px; }
.upload-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upload-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; color: var(--ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-state {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--ink-mute); flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.upload-state.is-done  { color: var(--green); }
.upload-state.is-error { color: var(--red); }
.upload-bar {
	height: 4px; margin-top: 8px; border-radius: 2px;
	background: var(--bg-elev-2); overflow: hidden;
}
.upload-bar > i {
	display: block; height: 100%;
	background: var(--accent);
	transition: width 140ms linear;
}
.upload-bar.is-indeterminate > i { animation: upload-sweep 1.1s ease-in-out infinite; }
@keyframes upload-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}
.upload-note {
	margin-top: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--ink-dim);
}
.upload-note.is-error { color: var(--red); }
.linkish {
	background: none; border: none; padding: 0;
	font: inherit; color: var(--accent); cursor: pointer;
	text-decoration: underline;
}
.linkish:hover { color: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
	.upload-bar > i { transition: none; }
	.upload-bar.is-indeterminate > i { animation: none; }
}

/* ── Filter toolbar ── */
.toolbar-filter-only { justify-content: flex-end; }
.toolbar-filter-only .report-filter-input { max-width: 320px; }
@media (max-width: 720px) {
	.toolbar-filter-only .report-filter-input { max-width: none; }
}
.checklist-note {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; line-height: 1.6;
	color: var(--ink-dim);
	margin-bottom: 12px;
}

/* ── Reader document page ──
   The document is the point of the page, so on a wide screen it takes the main
   column and everything you do *about* it — identity, the acknowledgement
   action, who else has signed — moves into a rail that stays put while you
   read. Below 1080px the rail unsticks and drops underneath. */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 28px; align-items: start; }
.doc-grid > * { min-width: 0; }
.doc-rail > .card-frame:first-child { margin-top: 0; }
@media (min-width: 1081px) {
	.doc-rail {
		position: sticky; top: 24px;
		max-height: calc(100vh - var(--footer-h) - 48px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}
@media (max-width: 1080px) {
	.doc-grid { grid-template-columns: 1fr; gap: 20px; }
	/* Stacked, the rail leads: what the document is and what you have to do
	   about it come first, rather than making you scroll a full page of PDF to
	   reach the acknowledgement button. */
	.doc-rail { order: -1; }
}

/* ── Shared document-preview panel (templates/includes/document_preview.html) ── */
.preview-panel { margin-bottom: 24px; }
.preview-body { padding: 20px; }
.preview-unavailable { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.preview-unavailable-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); }
.preview-locked { font-style: italic; }
/* A wide screen is usually a tall one too — let the document claim that height
   instead of sitting in a fixed 540px letterbox. */
iframe.pdf-frame {
	width: 100%; display: block;
	min-height: clamp(460px, 74vh, 940px);
	background: var(--bg-elev-2);
	border: 1px solid var(--line);
	border-radius: 6px;
}
@media (max-width: 720px) {
	iframe.pdf-frame { min-height: 62vh; }
	.preview-body { padding: 14px; }
}

/* ── Index list (smaller card variant) ── */
.section-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.14em; text-transform: uppercase;
	margin: 28px 0 14px;
}
.card {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	padding: 18px 22px;
	margin-bottom: 12px;
	display: flex; align-items: flex-start;
	gap: 14px;
	border-radius: 8px;
	transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card-body { flex: 1; min-width: 0; }
.card-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.card .doc-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.card .doc-meta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	margin-top: 5px; letter-spacing: 0.04em;
}
.badge {
	display: inline-flex; align-items: center;
	padding: 4px 9px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid;
	border-radius: 4px;
}
.badge-pending { color: var(--accent); border-color: var(--accent); }
.badge-new     { color: var(--teal);   border-color: var(--teal); }
.badge-done    { color: var(--green);  border-color: var(--green); }

.empty {
	text-align: center;
	color: var(--ink-dim);
	padding: 40px 16px;
	font-size: 13px;
	border: 1px dashed var(--line);
	border-radius: 8px;
}
.empty.empty-quiet {
	padding: 18px 16px;
	border: 1px solid var(--line-soft);
	background: var(--bg-elev);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--ink-dim);
	text-align: left;
	display: flex; align-items: center; gap: 12px;
	border-radius: 6px;
}
.empty.empty-quiet::before { content: '✓'; color: var(--green); font-size: 14px; flex-shrink: 0; }

/* ── Alerts ── */
.alert { padding: 12px 16px; border: 1px solid var(--line); font-size: 13px; margin-bottom: 14px; border-radius: 6px; }
.alert-error   { color: var(--red);   border-color: var(--red);   background: var(--red-bg); }
.alert-success { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.alert-info    { color: var(--teal);  border-color: var(--teal);  background: var(--accent-bg); display: flex; align-items: center; }

.divider { border: none; border-top: 1px solid var(--line); margin: 24px 0; }

.spinner {
	display: inline-block; width: 14px; height: 14px;
	border: 2px solid var(--line);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Offline banner ── */
.offline-banner {
	display: none;
	background: var(--accent-bg);
	color: var(--accent);
	text-align: center;
	padding: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; letter-spacing: 0.06em;
	border-bottom: 1px solid var(--accent);
}
body.offline .offline-banner { display: block; }

/* ── Update toast ── */
.update-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--footer-h) + 12px);
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 32px);
	padding: 12px 14px 12px 18px;
	background: var(--bg-elev);
	border: 1px solid var(--accent);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	animation: toast-rise .25s var(--ease-out);
}
html[data-theme="dark"] .update-toast { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.update-toast-text { font-size: 13px; color: var(--ink); line-height: 1.4; }
.update-toast .btn { white-space: nowrap; }
.update-toast .update-toast-dismiss { padding: 9px 10px; }
@keyframes toast-rise {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Login ── */
.login-wrap {
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem;
	flex-direction: column; gap: 16px;
}
.login-card {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	padding: 36px 30px;
	width: 100%; max-width: 420px;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .login-card { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); }
.login-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 22px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); letter-spacing: 0.1em; text-transform: uppercase; margin: 14px 0 6px; }

.login-theme-row {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 12px; color: var(--ink-dim);
}

/* ── Home page: hero ── */
.home-hero {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0 28px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 8px;
}
.home-hero-left { flex: 1; min-width: 0; }
.hero-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px; color: var(--accent);
	letter-spacing: 0.2em; text-transform: uppercase;
	margin-bottom: 8px;
}
.hero-name { font-size: 32px; font-weight: 700; line-height: 1.1; margin-bottom: 10px; }
.hero-sub { color: var(--ink-mute); font-size: 14px; line-height: 1.6; max-width: 560px; }
.home-hero-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(88px, 1fr));
	gap: 10px;
	flex-shrink: 0;
	min-width: 370px;
}
.hstat {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	padding: 14px 16px;
	text-align: center;
	border-radius: 8px;
	transition: border-color .15s;
}
.hstat:hover { border-color: var(--accent); }
.hstat-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink); margin-bottom: 4px; }
.hstat-lbl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--ink-dim);
	letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── Home: section headers ── */
.home-section { margin: 28px 0 0; }
.home-section-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.home-section-l { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.home-section-count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent);
	background: var(--accent-bg);
	border: 1px solid var(--line);
	padding: 2px 8px;
	letter-spacing: 0.06em;
	border-radius: 10px;
}

/* ── Home: pending rows ── */
.pending-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pending-row {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 140px 130px 150px auto auto;
	gap: 18px; align-items: center;
	padding: 14px 22px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	text-decoration: none;
	transition: background .2s;
	color: inherit;
}
.pending-row:last-child { border-bottom: none; }
.pending-row:hover { background: var(--bg-elev-2); }
.pending-row.is-urgent { border-left: 3px solid var(--accent); }
.pending-ico { width: 24px; height: 28px; }
.pending-body { min-width: 0; }
.pending-title {
	font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pending-sub {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; color: var(--accent-dim);
	letter-spacing: 0.04em; margin-top: 4px;
	display: none;
}
.urgent-pill {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--accent);
	border: 1px solid var(--accent);
	padding: 2px 7px; margin-left: 10px;
	letter-spacing: 0.1em; text-transform: uppercase;
	vertical-align: middle; border-radius: 3px;
}
.pmeta {
	font-family: 'JetBrains Mono', monospace; font-size: 10px;
	letter-spacing: 0.04em; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmeta-code {
	color: var(--ink-mute); border: 1px solid var(--line); padding: 4px 8px;
	text-transform: uppercase; justify-self: start; max-width: 100%; border-radius: 4px;
}
.pmeta-code.empty { border-color: transparent; color: var(--ink-dim); }
.pmeta-type { color: var(--ink-mute); text-transform: uppercase; }
.pmeta-date { color: var(--accent-dim); display: flex; flex-direction: column; gap: 2px; }
.pmeta-date .pmeta-by { font-size: 9px; color: var(--ink-dim); opacity: 0.75; }
.pending-pill { text-align: left; }
.pending-cta { text-align: right; }
.pending-cta .btn.primary { padding: 9px 14px; font-size: 9.5px; }
.pending-cta .farrow { font-family: 'JetBrains Mono', monospace; font-size: 18px; color: var(--ink-dim); }
.pending-row:hover .pending-cta .farrow { color: var(--accent); }

/* Positive empty state */
.ack-empty {
	border: 1px solid var(--green);
	background: var(--green-bg);
	padding: 22px 26px;
	display: flex; gap: 22px; align-items: center;
	border-radius: 8px;
}
.ack-empty-mark {
	width: 48px; height: 48px;
	border: 1.5px solid var(--green); border-radius: 50%;
	display: grid; place-items: center; flex-shrink: 0;
}
.ack-empty-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ack-empty-sub { color: var(--ink-mute); font-size: 13px; line-height: 1.5; }

/* ── Home: folders list ── */
.folder-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-elev); }
.folder-row {
	display: grid;
	grid-template-columns: 42px 1.4fr 90px 1fr 130px 30px;
	gap: 18px; align-items: center;
	padding: 12px 22px;
	border-bottom: 1px solid var(--line);
	text-decoration: none; color: inherit;
	transition: background .2s;
}
.folder-row:last-child { border-bottom: none; }
.folder-row:hover { background: var(--bg-elev-2); }
.folder-row.folder-row-head {
	cursor: default; background: var(--bg-elev-2);
	border-bottom: 1px solid var(--line); padding: 10px 22px;
}
.folder-row.folder-row-head:hover { background: var(--bg-elev-2); }
.folder-row.folder-row-head > div {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px; color: var(--ink-dim);
	letter-spacing: 0.12em; text-transform: uppercase;
}
.fcol-icon { width: 32px; height: 26px; }
.fcol-name { min-width: 0; }
.fname { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.fdesc {
	font-size: 12px; color: var(--ink-mute); margin-top: 3px;
	overflow: hidden; display: -webkit-box;
	-webkit-line-clamp: 1; -webkit-box-orient: vertical;
	line-height: 1.4; white-space: nowrap; text-overflow: ellipsis;
}
.fcol-total .fnum { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 600; color: var(--ink); }
.fcol-total .flbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); margin-left: 4px; }
.fcol-statuses { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute); }
.fdot { display: inline-block; font-size: 13px; line-height: 1; }
.fdot-green  { color: var(--green); }
.fdot-accent { color: var(--accent); }
.fdot-red    { color: var(--red); }
.fcount { margin-right: 4px; }
.fcol-upload { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute); }
.farrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 20px; color: var(--ink-dim);
	transition: color .15s, transform .15s;
}
.folder-row:hover .farrow { color: var(--accent); transform: translateX(2px); }

/* ── Search button ── */
.search-btn {
	width: 36px; height: 36px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--line);
	display: grid; place-items: center;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s, transform 160ms var(--ease-out);
	color: var(--ink-mute);
	padding: 0; flex-shrink: 0;
}
.search-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.search-btn:active { transform: scale(0.97); }
.search-btn svg { width: 14px; height: 14px; pointer-events: none; }

/* ── Search modal ── */
.search-modal { position: fixed; inset: 0; display: none; z-index: 100; }
.search-modal.open { display: block; }
.search-modal-backdrop {
	position: absolute; inset: 0;
	background: var(--overlay-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.search-modal-inner {
	position: absolute;
	left: 50%; top: 10vh;
	transform: translateX(-50%);
	width: 92%; max-width: 640px;
	max-height: 80vh;
	display: flex; flex-direction: column;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	box-shadow: 0 16px 64px rgba(0, 0, 0, 0.12);
	border-radius: 12px; overflow: hidden;
}
html[data-theme="dark"] .search-modal-inner { box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5); border-color: var(--accent); }

.search-modal-bar {
	position: relative;
	display: flex; align-items: center;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.search-modal-bar .dms-search-icon {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: var(--ink-dim); pointer-events: none;
}
.dms-search-input {
	flex: 1; background: transparent; border: none; color: var(--ink);
	font-family: 'Inter', sans-serif; font-size: 16px;
	padding: 18px 18px 18px 48px;
}
.dms-search-input::placeholder {
	color: var(--ink-dim);
	font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em;
}
.dms-search-input:focus { outline: none; box-shadow: none; border-color: transparent; }
.search-close {
	background: transparent; border: none; color: var(--ink-dim);
	font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
	cursor: pointer; padding: 0 18px;
	display: flex; align-items: center; gap: 6px; transition: color .15s;
}
.search-close:hover { color: var(--accent); }
.search-close .esc-pill { border: 1px solid var(--line); padding: 2px 6px; font-size: 9px; border-radius: 3px; }

.search-results { flex: 1; min-height: 0; overflow-y: auto; }
.sr-row {
	display: block; padding: 14px 18px;
	border-bottom: 1px solid var(--line-soft);
	text-decoration: none; color: inherit; transition: background .12s;
}
.sr-row:last-child { border-bottom: none; }
.sr-row:hover, .sr-row.active { background: var(--bg-elev-2); }
.sr-title { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
.sr-meta {
	display: flex; flex-wrap: wrap; gap: 6px;
	font-family: 'JetBrains Mono', monospace; font-size: 9px;
	color: var(--accent-dim); letter-spacing: 0.04em;
}
.sr-meta .sr-code   { color: var(--ink-mute); border: 1px solid var(--line); padding: 2px 6px; text-transform: uppercase; border-radius: 3px; }
.sr-meta .sr-type   { color: var(--accent-dim); }
.sr-meta .sr-rev    { color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; border-radius: 3px; }
.sr-meta .sr-tag    { color: var(--teal); border: 1px solid var(--teal); padding: 2px 6px; text-transform: lowercase; border-radius: 3px; }
.sr-empty, .sr-hint {
	padding: 22px 18px;
	font-family: 'JetBrains Mono', monospace; font-size: 11px;
	color: var(--ink-dim); letter-spacing: 0.04em; text-align: center;
}

/* ── Manage workspace ── */
.topbar-pill {
	font-family: 'JetBrains Mono', monospace; font-size: 10px;
	color: var(--accent); border: 1px solid var(--accent);
	padding: 6px 11px; letter-spacing: 0.12em; text-transform: uppercase;
	text-decoration: none; transition: background .15s, color .15s, transform 160ms var(--ease-out);
	white-space: nowrap; border-radius: 6px;
}
.topbar-pill:hover { background: var(--accent); color: var(--on-accent); }
.topbar-pill:active { transform: scale(0.97); }
.topbar-link {
	font-family: 'JetBrains Mono', monospace; font-size: 10px;
	color: var(--ink-mute); text-decoration: none;
	letter-spacing: 0.06em; transition: color .15s;
}
.topbar-link:hover { color: var(--accent); }

.hstat-link { text-decoration: none; color: inherit; display: block; border-radius: 8px; }

/* Queue tabs */
.queue-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.qtab {
	font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-mute);
	padding: 12px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
	text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase;
	display: flex; align-items: center; gap: 8px; transition: color .15s, border-color .15s, transform 160ms var(--ease-out);
}
.qtab:hover { color: var(--ink); }
.qtab:active { transform: scale(0.97); }
.qtab.on { color: var(--accent); border-bottom-color: var(--accent); }
.qcount { font-size: 9px; border: 1px solid var(--line); padding: 2px 6px; letter-spacing: 0.04em; border-radius: 10px; }
.qtab.on .qcount { border-color: var(--accent); color: var(--accent); }

/* Upload form */
/* The upload form is a wide-screen form, not a reading measure: on a large
   monitor it used to run ~1900px tall as one narrow column, which meant the
   file dropzone was two screens below the folder picker. Two columns above
   1000px; below that it is exactly the single column it always was. */
.upload-form { display: flex; flex-direction: column; gap: 8px; }
.upload-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
/* The chips used to carry an inline display:flex that lost to .decision's
   flex-direction: column, so all twelve stacked full width. */
.group-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 8px;
}
@media (min-width: 1000px) {
	main.main-upload { max-width: var(--w-upload); }
	.upload-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 8px 16px;
	}
	/* Sections toggle display:none with the mode radios; each column is its own
	   flex stack, so a hidden section closes up rather than leaving a hole. */
	.upload-foot { grid-column: 1 / -1; }
}
.upload-section { background: var(--bg-elev); border: 1px solid var(--line); padding: 20px 24px; border-radius: 8px; }
.upload-section > .field-l:first-child { margin-top: 0; }
.upload-section select {
	width: 100%; background: var(--bg-elev); border: 1px solid var(--line);
	color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13px;
	padding: 11px 13px; border-radius: 6px;
}
.upload-section select:focus { outline: none; border-color: var(--accent); }
.dropzone {
	display: block; border: 1.5px dashed var(--line); background: var(--bg-elev-2);
	padding: 36px 20px; text-align: center; cursor: pointer;
	transition: border-color .15s, background .15s; border-radius: 8px;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-bg); }
.dropzone .dz-title { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.dropzone .dz-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-dim); letter-spacing: 0.06em; }

/* ── Responsive — sidebar breakpoint ── */
@media (max-width: 768px) {
	.sidebar { transform: translateX(-100%); z-index: 65; width: 280px; }
	.sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); }
	html[data-theme="dark"] .sidebar.open { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); }
	.sidebar-overlay.open { display: block; }
	.page-wrap { margin-left: 0; }
	.site-footer { left: 0; }
	.mobile-header { display: flex; }
	main { padding: 22px var(--gutter) calc(var(--footer-h) + 22px); }
	.container { padding: 22px var(--gutter) calc(var(--footer-h) + 32px); }
	.toolbar { flex-direction: column; align-items: stretch; }
	.toolbar > * { min-width: 0; }
}

@media (min-width: 769px) {
	.hamburger-btn { display: none; }
	.mobile-header { display: none; }
}

/* ── Responsive — content ── */
@media (max-width: 980px) {
	main { padding-left: 24px; padding-right: 24px; }
	.fhead { flex-direction: column; gap: 24px; }
	.doc-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
	.doc-row .colh { display: inline-block; margin-right: 8px; }
	.revs { padding: 4px 20px 20px; }
	/* Below 980px the seven-column audit grid cannot stay honest, so the record
	   falls back to a wrapping list. The header row goes with it — its labels
	   would no longer sit above anything. */
	.rev-head { display: none; }
	.rev-top, .rev-people {
		display: flex; flex-wrap: wrap; align-items: center;
		gap: 4px 12px;
	}
	.rfact { white-space: normal; }
	.rev .rval { white-space: normal; overflow: visible; }
	.rev .rval:empty { display: none; }
	.rfact:empty { display: none; }
	.grid-split { grid-template-columns: 1fr; }
	.stepper { flex-direction: column; }
	.step { border-right: none; border-bottom: 1px solid var(--line); }
	.fhead h2 { font-size: 28px; }
	.page-head h2 { font-size: 28px; }
	.home-hero { flex-direction: column; gap: 18px; }
	.home-hero-stats { min-width: 0; grid-template-columns: repeat(4, 1fr); }
	.hero-name { font-size: 26px; }
	.pending-row { grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 18px; }
	.pending-row .pmeta { display: none; }
	.pending-sub { display: block; }
	.pending-title { white-space: normal; }
	.pending-pill, .pending-cta { grid-column: 1 / -1; text-align: left; padding-left: 44px; }
	.folder-row { grid-template-columns: 36px 1fr 30px; gap: 12px; padding: 14px 18px; }
	.folder-row-head { display: none; }
	.fcol-total, .fcol-statuses, .fcol-upload { grid-column: 2 / 3; padding-left: 0; }
	.fcol-total { margin-top: 4px; }
	.fdesc { white-space: normal; -webkit-line-clamp: 2; }
	.search-modal-inner { top: 6vh; max-height: 88vh; width: 96%; }
	.dms-search-input { font-size: 15px; padding: 16px 14px 16px 44px; }
	.search-close { padding: 0 12px; }
	.search-close .esc-pill { display: none; }
}

@media (max-width: 720px) {
	/* The workspace sub-line and holder tag are both repeated in the page body,
	   so they are the first things to go when the bar runs out of room. */
	.topbar .brand-text span { display: none; }
	.topbar .role-tag { display: none; }
}
@media (max-width: 520px) {
	/* "Reader portal" is still reachable from the LIBRARY breadcrumb below. */
	.topbar .topbar-link { display: none; }
	.topbar-inner { padding-top: 12px; padding-bottom: 12px; }
	.brand-text h1 { font-size: 13px; }
}

@media (max-width: 560px) {
	.home-hero-stats { grid-template-columns: repeat(2, 1fr); }
	h2.title { font-size: 26px; }
	.fhead h2 { font-size: 24px; }
	.meta-grid, .record { grid-template-columns: 1fr; }
	.meta-cell { border-right: none; }
	.doc-band { flex-wrap: wrap; }
	.rev-chip { margin-left: 0; }
	.decision-row { flex-direction: column; }
	.update-toast { left: 16px; right: 16px; bottom: calc(var(--footer-h) + 8px); transform: none; max-width: none; }
	@keyframes toast-rise {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ── Acknowledgement report ─────────────────────────────────────────────── */
.ack-report { padding: 20px; }
.ack-report-loading, .ack-report-empty {
	font-size: 13px; color: var(--ink-dim); padding: 12px 0;
}
.ack-report-summary {
	font-size: 15px; font-weight: 600; margin-bottom: 12px;
}
.ack-report-chart { max-width: 320px; margin: 0 auto 16px; }
.ack-report-pending { margin-top: 12px; }
.ack-report-pending-list {
	list-style: none; margin: 8px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px;
}
.ack-report-pending-list li {
	font-size: 13px; padding: 6px 10px;
	border: 1px solid var(--line); border-radius: 6px;
	background: var(--bg-elev);
}


/* ── Group acknowledgement report ── */
.report-filter-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.report-filter-input {
	font-family: inherit;
	font-size: 13px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--bg);
	color: var(--ink);
	min-width: 240px;
}
.report-filter-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ink-mute);
	cursor: pointer;
}
.report-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.report-table th {
	text-align: left;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-dim);
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}
.report-table th.sort-asc::after { content: ' \25B2'; }
.report-table th.sort-desc::after { content: ' \25BC'; }
.report-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink);
}
.report-row { cursor: pointer; }
.report-row:hover { background: var(--bg-elev-2); }
.report-loading, .report-empty {
	padding: 20px 16px;
	color: var(--ink-dim);
	font-size: 13px;
	text-align: center;
}
.pct-cell {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pct-bar-track {
	flex: 1;
	max-width: 120px;
	height: 6px;
	border-radius: 3px;
	background: var(--line-soft);
	overflow: hidden;
}
.pct-bar-fill {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms var(--ease-out);
}
.pct-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--ink-mute);
	white-space: nowrap;
}
.detail-panel {
	padding: 16px;
	background: var(--bg-elev);
}
.detail-filter-bar {
	margin-bottom: 10px;
}
.detail-summary {
	font-size: 12px;
	color: var(--ink-mute);
}
.detail-table th, .detail-table td {
	padding: 8px 12px;
}

/* Per-member rollup inside an expanded group */
.user-row { cursor: pointer; }
.user-row .chev { display: inline-block; transition: transform 0.15s ease; }
.user-row.expanded .chev { transform: rotate(90deg); }
.user-detail-row > td { padding: 0 12px 12px 32px; background: var(--bg-elev-2); }
.user-doc-table { width: 100%; }
.user-doc-table th, .user-doc-table td { padding: 6px 10px; }
.ustatus {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.06em;
	white-space: nowrap;
}
.ustatus.done   { color: var(--green); }
.ustatus.behind { color: var(--accent); }
.ustatus.none   { color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) {
	.user-row .chev { transition: none; }
}

/* ── Folder document table (sub-project B) ── */
.doc-title-cell { font-size: 15px; font-weight: 600; line-height: 1.3; }
.report-row.locked .doc-title-cell { color: var(--ink-mute); }
.report-row.locked .rev-pill { color: var(--ink-dim); }
.report-row.expanded .chev { transform: rotate(90deg); }
.urgent-badge {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.08em;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 2px 6px;
	margin-left: 8px;
	border-radius: 3px;
	vertical-align: middle;
}
.revs-panel {
	padding: 4px 24px 24px;
	background: var(--bg-elev-2);
}