:root {
	--bg: #07090c; --panel: #0b0e12; --raised: #111821; --line: #1c242d;
	--ink: #d6e0e6; --bright: #e8f0f4; --body: #c2ccd3; --soft: #9fb0bc; --muted: #7f8d99; --faint: #3d4b57;
	--accent: #00e5ff; --accent-dim: rgba(0, 229, 255, .4); --warn: #ffb000; --add: #7ee787; --del: #ffa198;
	--left: 240px; --right: 280px; --rail: 28px;
	font: 13px/1.5 "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 1px solid var(--line); padding: 2px 10px; cursor: pointer; white-space: nowrap; }
button:hover { color: var(--accent); border-color: var(--accent); }
button.link { border: 0; padding: 0; color: var(--accent); }
button.primary { background: var(--accent); color: var(--bg); font-weight: 600; border-color: var(--accent); }
button.primary:hover { color: var(--bg); background: #7df3ff; }
input, textarea { background: var(--bg); border: 1px solid var(--line); padding: 3px 8px; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); }
mark { background: transparent; color: var(--accent); }
code { background: var(--raised); padding: 1px 5px; color: var(--accent); }
kbd { font: inherit; font-size: 11px; border: 1px solid var(--line); padding: 0 5px; color: var(--muted); }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }
.warn { color: var(--warn); font-size: 12px; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.right { margin-left: auto; }
.vertical { writing-mode: vertical-rl; }

/* --- header --- */
header { display: flex; align-items: center; gap: 20px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.brand img { width: 20px; height: 20px; }
.tabs { display: flex; gap: 18px; }
.tabs a { color: var(--muted); padding: 12px 0 10px; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-color: var(--accent); }
.search { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto; height: 28px; padding: 0 10px; border: 1px solid var(--line); background: var(--bg); }
.search:focus-within { border-color: var(--accent); }
.search .glyph { color: var(--accent); }
.search input { flex: 1; border: 0; padding: 0; background: none; min-width: 0; }
.search input::-webkit-search-cancel-button { display: none; }
.status { display: flex; gap: 14px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status .dot { color: var(--accent); }
.status .dot.ahead { color: var(--warn); }
.status #sync { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 600; }
.status #sync:hover { background: var(--accent); color: var(--bg); }
/* baseline-aligned so the arrow sits on the x-height of "sync"; the ink sits below the box centre, so spin about it */
.status #sync .glyph { font-size: 15px; line-height: 1; transform-origin: 50% 60%; }
.status #sync.busy .glyph { animation: spin 1s linear infinite; }
.status #sync:disabled { opacity: .6; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
.settings select { background: var(--bg); border: 1px solid var(--line); color: var(--ink); padding: 3px 8px; }
.who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-left: 4px; }
.who img { width: 20px; height: 20px; background: var(--raised); }
.who:hover { color: var(--accent); }
.signin { max-width: 360px; margin: 12vh auto; text-align: center; padding: 32px 28px; gap: 12px; align-items: center; }
.signin img { width: 48px; height: 48px; }
.signin h1 { margin: 0; font-size: 18px; letter-spacing: .04em; color: var(--bright); }
.button { display: inline-block; padding: 6px 16px; border: 1px solid var(--line); color: var(--ink); }
.button.primary { background: var(--accent); color: var(--bg); font-weight: 600; border-color: var(--accent); }
.settings { max-width: 720px; margin: 0 auto; padding: 28px 24px; height: 100%; overflow: auto; }
.settings .block h4 { font-size: 13px; color: var(--bright); margin: 0 0 8px; }
.settings .block { margin-bottom: 36px; }
.settings .muted { font-size: 12px; line-height: 1.6; display: block; white-space: normal; }
.settings .row { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.settings .row input { flex: 1; min-width: 0; color: var(--ink); }
.settings pre { background: var(--raised); padding: 10px 14px; overflow-x: auto; font-size: 12px; margin: 0; }
.keybox { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.keybox code { flex: 1; background: var(--raised); padding: 8px 10px; color: var(--soft); font-size: 11px; overflow-wrap: anywhere; white-space: pre-wrap; }
.tokens { border-top: 1px solid var(--line); }
.tokens div { display: flex; gap: 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--soft); }
.tokens div .right { margin-left: auto; }
.state-chip { color: var(--accent); }
.state-chip.bad { color: var(--warn); }
#tokenbar { display: flex; gap: 10px; align-items: center; padding: 8px 16px; background: var(--raised); border-bottom: 1px solid var(--warn); color: var(--warn); flex: none; }

/* --- panes --- */
main { flex: 1; min-height: 0; }
.panes { display: grid; grid-template-columns: var(--left) 5px minmax(0, 1fr) 5px var(--right); }
.panes.two { grid-template-columns: var(--left) minmax(0, 1fr); }
.panes.left-closed { grid-template-columns: var(--rail) 5px minmax(0, 1fr) 5px var(--right); }
.panes.right-closed { grid-template-columns: var(--left) 5px minmax(0, 1fr) 5px var(--rail); }
.panes.left-closed.right-closed { grid-template-columns: var(--rail) 5px minmax(0, 1fr) 5px var(--rail); }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane.left { padding: 12px 0; color: var(--soft); }
.pane.left .pane-head { padding: 0 14px 6px; gap: 10px; }
select.quiet { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 0; cursor: pointer; }
select.quiet:hover { color: var(--accent); }
select.quiet option { background: var(--panel); }
.pane.right { padding: 16px; color: var(--soft); font-size: 12px; }
.pane.right .pane-head { padding: 0 0 8px; border: 0; }
.two .pane.left { border-right: 1px solid var(--line); }
.pane-head { display: flex; align-items: center; gap: 16px; padding: 10px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; flex: none; }
.pane-head .trunc { flex: 1; }
.rail-toggle { padding: 0 6px; line-height: 18px; color: var(--muted); margin-left: auto; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px; color: var(--muted); font-size: 12px; cursor: pointer; }
.rail:hover { color: var(--accent); }
.rail .rail-toggle { margin: 0; border: 0; }
.handle { background: var(--line); cursor: col-resize; }
.handle:hover, .handle.drag { background: var(--accent); }
.scroll { overflow: auto; flex: 1; min-height: 0; }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { border: 0; padding: 3px 10px; color: var(--muted); }
.seg button.on { background: var(--raised); color: var(--ink); }
.empty { padding: 60px 48px; color: var(--muted); }

/* --- tree --- */
#tree { overflow: auto; line-height: 1.9; }
#tree details { padding-left: 0; }
#tree summary { list-style: none; cursor: pointer; padding: 0 14px; white-space: nowrap; }
#tree summary::before { content: "▸ "; }
#tree details[open] > summary::before { content: "▾ "; }
#tree details > div { padding-left: 14px; }
#tree a { display: block; color: var(--soft); padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; }
#tree a:hover { color: var(--ink); }
#tree a.on { background: var(--raised); color: var(--ink); border-color: var(--accent); }
#tree a.draft::after { content: " ●"; color: var(--warn); }
#new-form { display: flex; gap: 8px; align-items: center; padding: 4px 14px 8px; }
#new-form input { flex: 1; min-width: 0; }

/* --- tabs: one per open note --- */
.tabstrip { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); flex: none; scrollbar-width: none; }
.tab { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; border-right: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; user-select: none; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); background: var(--raised); box-shadow: inset 0 -2px var(--accent); }
.tab.dragging { opacity: .4; }
.tab .dot { color: var(--warn); }
.tab .x { border: 0; padding: 0 4px; color: var(--faint); line-height: 1; }
.tab .x:hover { color: var(--accent); }

/* --- note --- */
.note { padding: 28px 48px; max-width: 760px; line-height: 1.7; color: var(--body); }
.note h1 { font-size: 22px; font-weight: 600; margin: 0 0 18px; color: var(--bright); }
.note h2 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; color: var(--bright); }
.note h3, .note h4 { font-size: 13px; font-weight: 600; margin: 18px 0 8px; color: var(--bright); }
.note p, .note ul, .note ol, .note pre, .note table, .note blockquote { margin: 0 0 14px; }
.note a.wikilink { color: inherit; border-bottom: 1px solid var(--accent-dim); }
.note a.wikilink:hover { color: var(--accent); }
.note .missing { color: var(--muted); border-bottom: 1px dashed var(--faint); }
.note pre { background: var(--raised); padding: 10px 14px; overflow-x: auto; }
.note pre code { background: none; padding: 0; color: var(--body); }
.note blockquote { border-left: 2px solid var(--line); padding-left: 14px; color: var(--soft); }
.note table { border-collapse: collapse; }
.note th, .note td { border: 1px solid var(--line); padding: 3px 10px; text-align: left; }
.note img { max-width: 100%; }
.note hr { border: 0; border-top: 1px solid var(--line); }
#back { display: none; }

/* --- editor --- */
.editor { position: relative; display: grid; grid-template-columns: 44px 1fr; height: 100%; padding: 16px 0 0; line-height: 1.75; }
.gutter { color: var(--faint); text-align: right; padding-right: 14px; border-right: 1px solid var(--line); white-space: pre; overflow: hidden; }
#source { border: 0; padding: 0 24px 0 18px; background: none; resize: none; color: var(--body); line-height: inherit; overflow: auto; }
.complete { position: absolute; width: 320px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); z-index: 2; }
.complete div { padding: 6px 10px; color: var(--soft); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complete div.on { background: var(--raised); color: var(--ink); }
.complete .hint { color: var(--muted); border-top: 1px solid var(--line); cursor: default; }
.savebar { display: flex; gap: 16px; align-items: center; padding: 8px 24px; border-top: 1px solid var(--line); font-size: 12px; flex: none; }
.savebar input { flex: 1; color: var(--ink); }
#banner { padding: 8px 24px; background: var(--raised); border-bottom: 1px solid var(--warn); color: var(--warn); font-size: 12px; display: flex; gap: 14px; align-items: center; flex: none; }
#banner.ok { border-color: var(--accent); color: var(--accent); }

/* --- cards: search hits, sessions --- */
.cards { padding: 20px 32px; display: flex; flex-direction: column; gap: 10px; }
.card { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.card.open { border-color: var(--accent); }
.card.hosted { border-left: 2px solid hsl(var(--hue) 60% 55%); }
.card .head { display: flex; gap: 12px; align-items: baseline; cursor: pointer; min-width: 0; }
.card .head .title { color: var(--bright); font-weight: 500; }
.card .head .path { color: var(--bright); font-weight: 500; cursor: pointer; }
.card .head .path:hover { color: var(--accent); }
.card .score { color: var(--accent); font-size: 12px; }
.card .actions { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.card .actions a { color: var(--muted); }
.card .actions a:hover { color: var(--accent); }
.card .snippet, .card .match { color: var(--soft); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.card .match { max-height: 4.8em; overflow: hidden; }
.card .cwd { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.card .more { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; line-height: 1.6; color: var(--body); }
.card .more .note { padding: 6px 0 0; }
.card .prompt { border-top: 1px solid var(--line); padding-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.card .prompt time { display: block; color: var(--muted); font-size: 12px; }
.card .resume { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.card .resume code { color: var(--muted); background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .seg { font-size: 12px; align-self: flex-start; }

/* --- side pane blocks --- */
.block { margin-bottom: 22px; }
.block h4 { margin: 0 0 8px; font-size: 12px; font-weight: 400; color: var(--ink); }
.block a, .block span { display: block; color: var(--soft); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block a:hover { color: var(--accent); }
.history { border-left: 1px solid var(--line); padding-left: 12px; }
.history div { margin-bottom: 10px; white-space: normal; }
.history .rev { color: var(--accent); display: inline; }

/* --- sessions left pane --- */
.list a { display: flex; gap: 8px; align-items: center; padding: 0 14px; line-height: 1.9; color: var(--soft); border-left: 2px solid transparent; }
.list a.on { background: var(--raised); color: var(--ink); border-color: var(--accent); }
.list .swatch { width: 8px; height: 8px; background: hsl(var(--hue) 60% 55%); flex: none; }
.list .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.field { display: block; padding: 14px 14px 0; color: var(--muted); font-size: 12px; }
.field input { display: block; width: 100%; margin-top: 6px; color: var(--ink); }
.field .row { display: flex; gap: 6px; }
.field .row input { min-width: 0; }

/* --- graph --- */
#graph { overflow: hidden; position: relative; }
#graph .graph-opts { position: absolute; top: 12px; left: 16px; padding: 4px 8px; background: var(--panel); border: 1px solid var(--line); }

/* --- activity --- */
.feed { max-width: 880px; margin: 0 auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; height: 100%; overflow: auto; }
.feed .day { color: var(--ink); padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
.feed .day:first-of-type { padding-top: 0; }
.feed .commit { display: grid; grid-template-columns: 80px 110px 1fr 240px; gap: 14px; padding: 8px 0 8px 10px; border-left: 2px solid hsl(var(--hue) 60% 55%); color: var(--soft); }
.feed .commit .rev { color: var(--accent); }
.feed .commit .msg { color: var(--ink); overflow-wrap: anywhere; }
.feed .commit .files { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .commit .files a { color: var(--muted); }
.feed .commit .files a:hover { color: var(--accent); }
.feed .commit { cursor: pointer; }
.feed .commit:hover .msg, .feed .commit.open .msg { color: var(--bright); }
.feed .commit.open { background: var(--panel); }
.feed .patch { margin: 0 0 8px 2px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.patch div { padding: 0 12px; color: var(--soft); }
.patch .file { padding: 6px 12px; color: var(--bright); background: var(--raised); border-top: 1px solid var(--line); }
.patch .file:first-child { border-top: 0; }
.patch .hunk { color: var(--muted); padding-top: 6px; }
.patch .add { color: var(--add); background: rgba(63, 185, 80, .12); }
.patch .del { color: var(--del); background: rgba(248, 81, 73, .12); }

/* --- print (PDF export): the rendered note alone, in ink on paper --- */
@media print {
	:root { --bg: #fff; --panel: #fff; --raised: #f2f4f6; --line: #d0d7de; --ink: #111; --bright: #000; --body: #222; --soft: #444; --muted: #666; --faint: #999; --accent: #0969da; --accent-dim: rgba(9, 105, 218, .4); }
	@page { margin: 18mm; }
	html, body, main, .pane, .scroll { display: block; height: auto; overflow: visible; print-color-adjust: exact; }
	body > :not(#notes), #notes > :not(#centre), #centre > :not(#centre-body), #centre-body > :not(#rendered) { display: none !important; }
	#rendered { display: block !important; padding: 0; max-width: none; }
	.note pre { white-space: pre-wrap; }
}

/* --- phone --- */
.tabs.phone { display: none; }
@media (max-width: 720px) {
	header { gap: 12px; padding: 0 12px; }
	header .tabs, .status .ago, .status .sync, #qhint { display: none; }
	.status #sync { padding: 3px 8px; }
	.search { max-width: none; }
	.panes, .panes.two, .panes.left-closed, .panes.right-closed { grid-template-columns: minmax(0, 1fr); }
	.handle, .rail, .pane.right, .rail-toggle { display: none; }
	.panes.two { grid-template-rows: auto minmax(0, 1fr); }
	.two .pane.left { border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; }
	.two .pane.left .pane-head, .two .pane.left .field { display: none; }
	.two .pane.left .list { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px; }
	.two .pane.left .list a { white-space: nowrap; border: 1px solid var(--line); padding: 0 8px; line-height: 1.7; }
	.two .pane.left .list a.on { border-color: var(--accent); background: none; }
	#notes:not(.phone-note) .centre { display: none; }
	#notes.phone-note .left { display: none; }
	#back { display: inline; color: var(--muted); }
	.note { padding: 16px 20px; }
	.pane-head { padding: 10px 16px; gap: 10px; }
	.cards { padding: 12px 16px; }
	.feed .commit { grid-template-columns: 70px 1fr; }
	.feed .commit .files { grid-column: 1 / -1; }
	.who span { display: none; }
	.tabs.phone { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); padding: 12px 0 22px; text-align: center; flex: none; }
	.tabs.phone a { padding: 0; border: 0; }
	.tabs.phone a.on { color: var(--accent); }
}