/* ── Commune Documentation ───────────────────────────────────────── */

:root {
	--linen: #f4f0e3;
	--linen-dark: #e8e2d0;
	--sage: #9aa583;
	--sage-dark: #7d8c6e;
	--forest: #3d5b47;
	--forest-dark: #2c3e33;
	--desert: #c8856a;
	--stone: #6b7d8a;
	--ink: #263029;
	--border: #e4e1d7;
	--surface: #ffffff;
	--surface-alt: #faf8f1;
	--muted: #6b7269;
	--danger: #b04a3c;
	--header-h: 60px;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--linen);
	color: var(--ink);
	overflow: hidden;
}

h1, h2, h3, h4, .dc-serif {
	font-family: 'Libre Baskerville', Georgia, serif;
}

.commune-header { flex-shrink: 0; }

.btn-forest {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--linen);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
}
.btn-forest:hover, .btn-forest:focus { background: var(--forest-dark); border-color: var(--forest-dark); color: #fff; }
.btn-forest:disabled { opacity: .5; }

.dc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }

/* ── Boot + auth ─────────────────────────────────────────────────── */

.dc-boot {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dc-auth {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--linen) 0%, var(--linen-dark) 100%);
	overflow: auto;
}

.dc-auth-card {
	background: var(--surface);
	border-radius: 16px;
	padding: 2.5rem;
	max-width: 420px;
	width: calc(100% - 2rem);
	text-align: center;
	box-shadow: 0 4px 24px rgba(44, 53, 48, .12);
}
.dc-auth-logo { height: 48px; margin-bottom: 1rem; }
.dc-auth-card h2 { margin-bottom: .5rem; }
.dc-auth-note { font-size: .8rem; color: var(--muted); margin: .6rem 0 0; }

/* ── Layout ──────────────────────────────────────────────────────── */

.dc-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	height: calc(100vh - var(--header-h));
}
.dc-layout.d-none { display: none; }

.dc-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--surface);
	overflow: hidden;
}
.dc-pane-left { border-right: 1px solid var(--border); background: var(--surface-alt); }

.dc-pane-header {
	padding: .6rem .75rem .5rem;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.dc-toolbar { display: flex; gap: .35rem; align-items: center; margin-bottom: .5rem; }
.dc-spacer { flex: 1; }

.dc-filter { position: relative; }
.dc-filter .bi { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
.dc-filter input { padding-left: 1.8rem; }

.dc-pane-footer {
	padding: .4rem .75rem;
	border-top: 1px solid var(--border);
	font-size: .75rem;
	color: var(--muted);
	flex-shrink: 0;
}

/* ── Tree ────────────────────────────────────────────────────────── */

.dc-tree {
	flex: 1;
	overflow: auto;
	padding: .5rem 0;
	font-size: .9rem;
}

.dc-tree ul { list-style: none; margin: 0; padding: 0; }
.dc-tree ul ul { padding-left: 1rem; }

.dc-node {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .75rem .3rem .5rem;
	cursor: pointer;
	border-radius: 6px;
	margin: 0 .35rem;
	color: var(--ink);
	user-select: none;
	min-width: 0;
}
.dc-node:hover { background: rgba(61, 91, 71, .08); }
.dc-node.active { background: var(--forest); color: var(--linen); }
.dc-node.active .dc-node-sub, .dc-node.active .dc-node-icon { color: rgba(244, 240, 227, .75); }

.dc-node-icon { color: var(--sage-dark); flex-shrink: 0; width: 1.1rem; text-align: center; }
.dc-node.dc-doc .dc-node-icon { color: var(--stone); }
.dc-node.dc-doc.restricted .dc-node-icon { color: var(--desert); }
.dc-node-chevron { width: .9rem; flex-shrink: 0; color: var(--muted); font-size: .7rem; transition: transform .15s; }
.dc-dir.collapsed > .dc-node .dc-node-chevron { transform: rotate(-90deg); }
.dc-dir.collapsed > ul { display: none; }

.dc-node-label { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dc-node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-node-sub { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-dir > .dc-node .dc-node-title { font-weight: 600; }

.dc-node-action {
	opacity: 0;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 0 .2rem;
	font-size: .8rem;
	line-height: 1;
}
.dc-node:hover .dc-node-action { opacity: .7; }
.dc-node-action:hover { opacity: 1 !important; }

.dc-tree-empty { padding: 1rem .9rem; color: var(--muted); font-size: .85rem; }
.dc-hidden { display: none !important; }

/* ── Reader ──────────────────────────────────────────────────────── */

.dc-reader-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-alt);
	flex-shrink: 0;
	flex-wrap: wrap;
}
.dc-reader-heading { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dc-reader-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-reader-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.dc-reader-meta strong { font-weight: 600; color: var(--ink); }
.dc-reader-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── History modal ───────────────────────────────────────────────── */

.dc-history { display: flex; flex-direction: column; gap: .5rem; }
.dc-history-entry {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .6rem .8rem;
	background: var(--surface);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .25rem .8rem;
	align-items: center;
}
.dc-history-entry.current { border-color: var(--sage); background: var(--surface-alt); }
.dc-history-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.dc-history-author { font-weight: 600; }
.dc-history-date { font-size: .8rem; color: var(--muted); }
.dc-history-msg { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; color: var(--ink); overflow-wrap: anywhere; }
.dc-history-body { font-size: .78rem; color: var(--muted); white-space: pre-wrap; grid-column: 1 / -1; }
.dc-history-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sage-dark); }
.dc-history-actions { grid-row: 1 / span 2; grid-column: 2; }
.dc-history-empty { color: var(--muted); font-size: .9rem; padding: .5rem 0; }

.dc-badge {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: rgba(154, 165, 131, .25);
	color: var(--forest);
	white-space: nowrap;
}
.dc-badge.restricted { background: rgba(200, 133, 106, .2); color: #8f4d33; }

.dc-reader {
	flex: 1;
	overflow: auto;
	padding: 2rem 3rem 4rem;
	max-width: 100%;
}
.dc-reader[hidden] { display: none; }

.dc-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	gap: .5rem;
}
.dc-empty .bi { font-size: 2.6rem; color: var(--sage); }
.dc-empty[hidden] { display: none; }

/* ── Markdown body ───────────────────────────────────────────────── */

.md-body { line-height: 1.65; font-size: 1rem; max-width: 900px; margin: 0 auto; }
.md-body > :first-child { margin-top: 0; }
.md-body h1 { font-size: 2rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.md-body h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.md-body h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.md-body h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.md-body p { margin: 0 0 1rem; }
.md-body a { color: var(--forest); }
.md-body ul, .md-body ol { padding-left: 1.6rem; margin-bottom: 1rem; }
.md-body li + li { margin-top: .2rem; }
.md-body blockquote {
	margin: 0 0 1rem;
	padding: .5rem 1rem;
	border-left: 4px solid var(--sage);
	background: var(--surface-alt);
	color: #4b5249;
}
.md-body blockquote > :last-child { margin-bottom: 0; }
.md-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .86em;
	background: rgba(107, 125, 138, .12);
	padding: .1em .35em;
	border-radius: 4px;
}
.md-body pre {
	background: #263029;
	color: #e8e2d0;
	padding: 1rem 1.15rem;
	border-radius: 8px;
	overflow-x: auto;
	margin: 0 0 1.25rem;
	font-size: .85rem;
	line-height: 1.5;
}
.md-body pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.md-body table { border-collapse: collapse; margin: 0 0 1.25rem; width: auto; max-width: 100%; display: block; overflow-x: auto; font-size: .92rem; }
.md-body th, .md-body td { border: 1px solid var(--border); padding: .45rem .7rem; vertical-align: top; }
.md-body th { background: var(--surface-alt); text-align: left; }
.md-body tr:nth-child(even) td { background: #fcfbf7; }
.md-body img { max-width: 100%; }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.md-body input[type="checkbox"] { margin-right: .4rem; }

/* ── Toasts ──────────────────────────────────────────────────────── */

.dc-toasts {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	z-index: 1080;
}
.dc-toast {
	background: var(--forest-dark);
	color: var(--linen);
	padding: .6rem .9rem;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	font-size: .9rem;
	max-width: 380px;
	animation: dc-toast-in .2s ease-out;
}
.dc-toast.error { background: var(--danger); color: #fff; }
@keyframes dc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 800px) {
	html, body { overflow: auto; height: auto; }
	.dc-layout { grid-template-columns: 1fr; height: auto; }
	.dc-pane-left { border-right: 0; border-bottom: 1px solid var(--border); max-height: 45vh; }
	.dc-reader { padding: 1.25rem; }
}

/* ── Reader dark mode ────────────────────────────────────────────────
   Scoped to the reading pane (.dc-pane-main) on purpose: the folder tree,
   the shared header and the modals keep the light Commune palette, and the
   rest of the tools site is untouched. The choice persists in localStorage
   (commune.documentation.theme); with no saved choice the pane is dark. Every element the light .md-body rules style has a
   dark counterpart here so nothing bright leaks through. */

.dc-pane-main.dc-dark {
	--dk-bg: #1b221e;
	--dk-bg-alt: #232c27;
	--dk-bg-raised: #2b352f;
	--dk-border: #3a463f;
	--dk-text: #e6e1d3;
	--dk-text-soft: #c9cfc2;
	--dk-muted: #9aa596;
	--dk-link: #b7c9a6;
	--dk-code-bg: rgba(230, 225, 211, .12);
	--dk-pre-bg: #10150f;
	--dk-pre-text: #e6e1d3;
	color-scheme: dark;
	background: var(--dk-bg);
	color: var(--dk-text);
}

.dc-dark .dc-reader-toolbar { background: var(--dk-bg-alt); border-bottom-color: var(--dk-border); }
.dc-dark .dc-reader-path { color: var(--dk-muted); }
.dc-dark .dc-reader-meta { color: var(--dk-muted); }
.dc-dark .dc-reader-meta strong { color: var(--dk-text); }
.dc-dark .btn-outline-danger { color: #e8a598; border-color: #7a4a42; }
.dc-dark .btn-outline-danger:hover, .dc-dark .btn-outline-danger:focus { background: var(--danger); border-color: var(--danger); color: #fff; }
.dc-dark .dc-badge { background: rgba(154, 165, 131, .22); color: var(--dk-link); }
.dc-dark .dc-badge.restricted { background: rgba(200, 133, 106, .22); color: #e0a98f; }
.dc-dark .btn-outline-secondary { color: var(--dk-text-soft); border-color: var(--dk-border); }
.dc-dark .btn-outline-secondary:hover,
.dc-dark .btn-outline-secondary:focus { background: var(--dk-bg-raised); border-color: #55645b; color: #fff; }
.dc-dark .dc-empty { color: var(--dk-muted); }
.dc-dark .dc-empty .bi { color: var(--sage-dark); }

.dc-dark .md-body { color: var(--dk-text); }
.dc-dark .md-body h1, .dc-dark .md-body h2, .dc-dark .md-body h3, .dc-dark .md-body h4 { color: #f4f0e3; }
.dc-dark .md-body h1, .dc-dark .md-body h2 { border-bottom-color: var(--dk-border); }
.dc-dark .md-body a { color: var(--dk-link); }
.dc-dark .md-body blockquote { background: var(--dk-bg-alt); border-left-color: var(--sage-dark); color: var(--dk-text-soft); }
.dc-dark .md-body code { background: var(--dk-code-bg); color: #f0e9d8; }
.dc-dark .md-body pre { background: var(--dk-pre-bg); color: var(--dk-pre-text); border: 1px solid var(--dk-border); }
.dc-dark .md-body pre code { background: transparent; color: inherit; }
.dc-dark .md-body th, .dc-dark .md-body td { border-color: var(--dk-border); }
.dc-dark .md-body th { background: var(--dk-bg-raised); color: #f4f0e3; }
.dc-dark .md-body tr:nth-child(even) td { background: var(--dk-bg-alt); }
.dc-dark .md-body hr { border-top-color: var(--dk-border); }
.dc-dark .md-body img { opacity: .92; }

/* ── Non-markdown documents ─────────────────────────────────────────────── */
/* .yaml / .yml / .txt: one <pre> filled via textContent — shown as-is, never
   markdown-parsed. Inherits the fenced-code look from .md-body pre. */
.md-body pre.dc-plain {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 4;
	min-height: 6rem;
}

/* .rtf: nothing is rendered; the reader shows a download card instead. */
.dc-binary {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .6rem;
	padding: 3rem 1.5rem;
	margin: 1rem auto;
	max-width: 32rem;
	border: 1px dashed var(--border);
	border-radius: 12px;
	background: var(--surface-alt);
	color: var(--muted);
}
.dc-binary .bi { font-size: 3rem; color: var(--sage); }
.dc-binary h2 { border: 0; margin: 0; padding: 0; font-size: 1.35rem; color: var(--ink); }
.dc-binary p { margin: 0; }
.dc-binary-meta { font-size: .8rem; }
.dc-binary .btn { margin-top: .5rem; }
.dc-dark .dc-binary { background: var(--dk-bg-alt); border-color: var(--dk-border); color: var(--dk-muted); }
.dc-dark .dc-binary h2 { color: #f4f0e3; }
.dc-dark .dc-binary .bi { color: var(--sage-dark); }

/* .docx: server-converted, sanitized HTML (p, h1–h6, lists, tables, links,
   inline images, emphasis) rendered with the markdown reader's own rules.
   Word paragraphs carry no classes or styles by the time they get here, so
   only what the allowlist can produce is styled. */
.dc-docx img { max-width: 100%; height: auto; display: block; margin: .5rem 0 1rem; }
.dc-docx table { display: table; width: auto; }
.dc-docx p:empty { min-height: 1em; }
.dc-docx u { text-decoration: underline; }
.dc-docx s { text-decoration: line-through; }
.dc-docx pre { white-space: pre-wrap; overflow-wrap: anywhere; }