:root {
	--bg: #FBFAF7;
	--ink: #24211D;
	--ink-soft: #6B665C;
	--rule: #DEDACE;
	--orig-bg: #F7E4CE;
	--orig-ink: #8A5320;
	--rev-bg: #DDE6F2;
	--rev-ink: #274C77;
	--aside-bg: #F7EFB0;
	--aside-ink: #7A6A00;
	--notes-bg: #EAEFE7;
	--notes-ink: #3F5443;
	--accent: #5B6B4F;
	--panel: #FFFFFF;
	--mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body {
	height: 100%;
	margin: 0;
}
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--serif);
	overflow: hidden; /* the sidebar and main pane scroll internally instead */
}
h1 {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 10px;
	font-weight: 600;
}
/* Puts the Guide link on the same line as the sidebar's "Column Editor"
   heading rather than in the main toolbar -- it's about the app as a whole,
   not the week currently open, so it belongs with the app's own name. */
.sidebar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
}
.sidebar-head h1 { margin: 0; }
.guide-link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
}
.guide-link:hover { color: var(--accent); }
.sub {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 14px;
	font-family: var(--mono);
}

/* App shell: fixed-width sidebar, flexible main pane, both full height */
.shell {
	display: flex;
	height: 100vh;
}

/* Sidebar */
.sidebar {
	flex: 0 0 260px;
	width: 260px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 10px 16px 22px;
	border-right: 1px solid var(--rule);
	background: var(--panel);
}
.filter-row {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.sidebar input[type="search"] {
	width: 100%;
	margin-bottom: 0;
}
.weeks {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--panel);
}
.week-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	padding: 7px 10px;
	border-top: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
}
.week-row:first-child { border-top: none; }
.week-row:hover { background: var(--bg); }
.week-row.active { background: var(--rev-bg); }
.week-name {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	white-space: nowrap;
}
.week-state {
	font-family: var(--mono);
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 2px;
	white-space: nowrap;
}
.sidebar-sub {
	font-family: var(--mono);
	font-size: 10px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 10px 2px 0;
}
.state-open { background: var(--orig-bg); color: var(--orig-ink); }
.state-final { background: #E1E8D9; color: var(--accent); }
.state-stale { background: #F3DCE3; color: #8A2E4A; }
.state-bad { color: var(--ink-soft); }
/* Plain file count on files.html's sidebar -- no status to colour-code, so
   just muted text rather than one of the resolution-status badge colours. */
.state-count { color: var(--ink-soft); }
.empty {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-soft);
	padding: 18px 14px;
	margin: 0;
}

/* Main pane */
.main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 10px 24px 16px;
}
.main > * { flex: 0 0 auto; }

/* Toolbar */
.bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	flex-wrap: wrap;
}
button {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 7px 12px;
	cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: 0.45; cursor: default; border-color: var(--rule); color: var(--ink); }
button .key {
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	margin-left: 2px;
}
.filename {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-soft);
}
.group {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Styled to match <button> (an <a> so it's a real link -- ctrl/middle-click,
   "open in new tab", etc. all work) -- links to files.html for the week
   currently open in the editor. */
.files-link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 7px 12px;
	text-decoration: none;
}
.files-link:hover { border-color: var(--accent); color: var(--accent); }
/* Bulk-resolve buttons wear the colour of the side they keep. */
.swatch-orig, .swatch-rev { border-color: transparent; }
.swatch-orig { background: var(--orig-bg); color: var(--orig-ink); }
.swatch-rev { background: var(--rev-bg); color: var(--rev-ink); }
.swatch-orig:hover { border-color: var(--orig-ink); color: var(--orig-ink); }
.swatch-rev:hover { border-color: var(--rev-ink); color: var(--rev-ink); }

input[type="search"] {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 7px 10px;
}
input[type="search"]:focus { outline: none; border-color: var(--accent); }

/* Panes: equal height, each scrolling internally, filling the space left in
   the main pane after the toolbar/legend/notes are laid out. */
.cols {
	flex: 1 1 auto;
	min-height: 120px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.field {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* Mirrors .cols's own two-column grid, so the tab bar's left edge lines up
   with the right pane's left edge below it, rather than floating at the far
   right of the whole row. */
.filename-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 18px;
	margin: 0 0 14px;
}
.filename-row .filename { margin: 0; }
/* The tab bar that switches the right-hand field between the diff and the
   notes -- both panels occupy the same slot in .cols, one hidden at a time. */
.panel-tabs {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}
.panel-tabs button {
	padding: 4px 10px;
	font-size: 10px;
}
.panel-tabs button.active { border-color: transparent; }
/* Each tab's active colour matches its panel's own tint below, so which
   view you're on reads at a glance without having to read the label. */
#tab-diff.active { background: var(--rev-bg); color: var(--rev-ink); }
#tab-notes.active { background: var(--notes-bg); color: var(--notes-ink); }
textarea, #output, #notes {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}
/* `.notes` (below) sets its own `display`, which would otherwise fight the
   `hidden` attribute -- an ID selector is specific enough to always win. */
#output[hidden], #notes[hidden] {
	display: none;
}
textarea {
	width: 100%;
	resize: none; /* resizing one pane by hand would desync it from the other */
	border: 1px solid var(--rule);
	background: var(--panel);
	border-radius: 3px;
	padding: 14px 16px;
	font-family: var(--mono);
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ink);
}
textarea:focus { outline: none; border-color: var(--accent); }
body.dragging textarea { border-color: var(--accent); background: #FDFCF8; }
#output {
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 14px 16px;
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.75;
	white-space: pre-wrap;
}

@media (max-width: 820px) {
	/* Stacked: each pane keeps its own scroll rather than sharing one. */
	.cols { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

@media (max-width: 680px) {
	/* Sidebar above main instead of beside it, each with its own scroll --
	   a fixed-width row here would push the main pane off-screen. */
	.shell { flex-direction: column; }
	.sidebar {
		width: auto;
		flex: 0 0 auto;
		max-height: 38vh;
		border-right: none;
		border-bottom: 1px solid var(--rule);
	}
	.main { padding: 16px 16px 12px; }
}

/* The two readings of a chunk are equals, not a correction: no strikethrough
   on either, and an underline style so they stay distinct without colour. */
#output .orig, #output .rev {
	padding: 1px 2px;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
}
#output .orig {
	background: var(--orig-bg);
	color: var(--orig-ink);
	border-bottom: 1px dotted var(--orig-ink);
}
#output .rev {
	background: var(--rev-bg);
	color: var(--rev-ink);
	border-bottom: 1px solid var(--rev-ink);
}
#output .orig:hover, #output .rev:hover, #output .aside:hover { filter: brightness(0.95); }
/* A bracketed aside both sources agree on -- nothing to accept/reject, so no
   ctrl+click, but a plain click still selects it in the textarea like a
   chunk does, hence the same pointer/hover affordance. */
#output .aside {
	background: var(--aside-bg);
	color: var(--aside-ink);
	padding: 1px 2px;
	border-radius: 2px;
	cursor: pointer;
}
#output .empty { color: var(--ink-soft); }
/* Marks a bare space/tab/newline inside a whitespace-only chunk (see
   render()'s renderWhitespace()) -- a plain space and a real line break
   otherwise look identical (or nearly so) once laid out as wrapped prose.
   Inherits the chunk's own ink colour via currentColor; just dialed back a
   little so the glyph reads as a marker, not more text. */
#output .ws-glyph {
	font-family: var(--mono);
	opacity: 0.7;
}

.legend {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	flex-wrap: wrap;
}
/* Doubles as a counter and a "jump to next" button: clicking steps forward
   through that kind's chunks/asides relative to the textarea cursor. */
.legend .orig, .legend .rev, .legend .aside { padding: 2px 6px; border-radius: 2px; cursor: pointer; }
.legend .orig:hover, .legend .rev:hover, .legend .aside:hover { filter: brightness(0.95); }
.legend .orig { background: var(--orig-bg); color: var(--orig-ink); }
.legend .rev { background: var(--rev-bg); color: var(--rev-ink); }
.legend .aside { background: var(--aside-bg); color: var(--aside-ink); }
.legend .resolved { color: var(--accent); font-weight: 600; }

/* Notes panel: shares the right-hand field with #output, one shown at a
   time via the .panel-tabs toggle above them both. */
#notes {
	display: flex;
	flex-direction: column;
}
#notes-text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	margin: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: var(--serif);
	font-size: 13.5px;
	line-height: 1.6;
	/* Tinted (rather than the diff pane's plain --panel white) so which view
	   is showing is obvious even at a glance, not just from the active tab. */
	background: var(--notes-bg);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 12px 14px;
}