/* ===== MARKDOWN & CODE =====
   Rendered markdown, the syntax-highlighting palette, and the editor's
   textarea-over-<pre> stack. */

/* ===== RENDERED MARKDOWN ===== */
.markdown {
	max-width: 74ch;
	color: var(--text);
	font-size: var(--fs-md);
	line-height: 1.7;
	overflow-wrap: break-word;
}

.markdown > :first-child { margin-top: 0; }
.markdown > * + * { margin-top: 1em; }

.markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 {
	margin-top: 1.7em;
	line-height: 1.3;
}
.markdown h1 { font-size: 1.7em; letter-spacing: -.022em; }
.markdown h2 {
	font-size: 1.32em;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--border);
	letter-spacing: -.018em;
}
.markdown h3 { font-size: 1.12em; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 1em; }
.markdown h6 { color: var(--text-2); }

.markdown ul, .markdown ol { padding-left: 1.5em; }
.markdown ul { list-style: disc; }
.markdown ol { list-style: decimal; }
.markdown li::marker { color: var(--text-3); }
.markdown li + li { margin-top: .3em; }
.markdown li > ul, .markdown li > ol { margin-top: .3em; }

.markdown ul.md-tasklist { list-style: none; padding-left: .2em; }
.markdown li.md-task { display: flex; align-items: baseline; gap: .55em; }
.markdown li.md-task input {
	appearance: none;
	width: 15px; height: 15px;
	flex: none;
	transform: translateY(2px);
	border: 1.5px solid var(--border-strong);
	border-radius: 4px;
	background: var(--surface);
}
.markdown li.md-task input:checked {
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
	border-color: var(--accent);
}
.markdown li.md-task:has(input:checked) { color: var(--text-3); text-decoration: line-through; }

.markdown blockquote {
	padding-left: 1em;
	border-left: 3px solid var(--border-strong);
	color: var(--text-2);
}
.markdown blockquote > * + * { margin-top: .7em; }

.markdown hr { margin: 2em 0; }

.markdown img { border-radius: var(--r-md); }

.markdown a { color: var(--accent-text); }

.markdown mark {
	padding: 0 .2em;
	border-radius: 3px;
	background: color-mix(in srgb, var(--warning) 28%, transparent);
	color: inherit;
}

.markdown kbd { vertical-align: baseline; }

.markdown code {
	padding: .15em .4em;
	border-radius: 5px;
	background: var(--surface-2);
	font-size: .875em;
}

/* ===== TABLES IN MARKDOWN =====
   The wrapper scrolls, not the page: a wide table on a phone must not push the
   whole layout sideways. */
.md-table-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}

.md-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-base);
}
.md-table th, .md-table td {
	padding: 7px var(--s-3);
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}
.md-table th:last-child, .md-table td:last-child { border-right: 0; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table th {
	background: var(--surface-2);
	font-weight: 600;
	white-space: nowrap;
}
.md-table td[align="right"], .md-table th[align="right"] { text-align: right; }
.md-table td[align="center"], .md-table th[align="center"] { text-align: center; }
.md-table tbody tr:hover { background: var(--surface-2); }

/* ===== CODE BLOCKS IN MARKDOWN ===== */
.md-code {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface-2);
	overflow: hidden;
}

.md-code-bar {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	padding: 3px 5px 3px var(--s-3);
	border-bottom: 1px solid var(--border);
}
.md-code-lang {
	color: var(--text-3);
	font-family: var(--mono);
	font-size: var(--fs-xs);
	text-transform: lowercase;
}

.md-code-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--r-sm);
	color: var(--text-3);
	font-size: var(--fs-xs);
	transition: background var(--t-fast), color var(--t-fast);
}
.md-code-btn svg { width: 13px; height: 13px; }
.md-code-btn:hover { background: var(--surface-3); color: var(--text); }
.md-code-btn.is-done { color: var(--success); }

.md-code pre {
	margin: 0;
	padding: var(--s-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	line-height: 1.6;
}
.md-code code { padding: 0; background: none; font-size: var(--fs-sm); }

/* ===== SYNTAX PALETTE =====
   Deliberately restrained: four hues doing real work (strings, keywords,
   numbers, comments) rather than a different colour for every token type.
   Both themes are tuned against their own surface for contrast. */
.tok-comment  { color: #8b8b98; font-style: italic; }
.tok-string   { color: #0a7c52; }
.tok-regex    { color: #0a7c52; }
.tok-number   { color: #b45309; }
.tok-literal  { color: #b45309; }
.tok-keyword  { color: #7c3aed; font-weight: 500; }
.tok-function { color: #2563eb; }
.tok-class    { color: #0369a1; }
.tok-tag      { color: #be185d; }
.tok-property { color: #2563eb; }
.tok-selector { color: #be185d; }
.tok-variable { color: #b45309; }
.tok-operator { color: #64748b; }
.tok-punct    { color: #8b8b98; }
.tok-strong   { font-weight: 600; }
.tok-em       { font-style: italic; }
.tok-link     { color: #2563eb; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--tok-comment: #6b7280;
	}
	:root:not([data-theme="light"]) .tok-comment  { color: #6b7280; }
	:root:not([data-theme="light"]) .tok-string,
	:root:not([data-theme="light"]) .tok-regex    { color: #4ade80; }
	:root:not([data-theme="light"]) .tok-number,
	:root:not([data-theme="light"]) .tok-literal,
	:root:not([data-theme="light"]) .tok-variable { color: #fbbf24; }
	:root:not([data-theme="light"]) .tok-keyword  { color: #c4b5fd; }
	:root:not([data-theme="light"]) .tok-function { color: #7dd3fc; }
	:root:not([data-theme="light"]) .tok-class    { color: #67e8f9; }
	:root:not([data-theme="light"]) .tok-tag,
	:root:not([data-theme="light"]) .tok-selector { color: #f9a8d4; }
	:root:not([data-theme="light"]) .tok-property { color: #93c5fd; }
	:root:not([data-theme="light"]) .tok-operator { color: #94a3b8; }
	:root:not([data-theme="light"]) .tok-punct    { color: #6b7280; }
	:root:not([data-theme="light"]) .tok-link     { color: #7dd3fc; }
}

:root[data-theme="dark"] .tok-comment  { color: #6b7280; }
:root[data-theme="dark"] .tok-string,
:root[data-theme="dark"] .tok-regex    { color: #4ade80; }
:root[data-theme="dark"] .tok-number,
:root[data-theme="dark"] .tok-literal,
:root[data-theme="dark"] .tok-variable { color: #fbbf24; }
:root[data-theme="dark"] .tok-keyword  { color: #c4b5fd; }
:root[data-theme="dark"] .tok-function { color: #7dd3fc; }
:root[data-theme="dark"] .tok-class    { color: #67e8f9; }
:root[data-theme="dark"] .tok-tag,
:root[data-theme="dark"] .tok-selector { color: #f9a8d4; }
:root[data-theme="dark"] .tok-property { color: #93c5fd; }
:root[data-theme="dark"] .tok-operator { color: #94a3b8; }
:root[data-theme="dark"] .tok-punct    { color: #6b7280; }
:root[data-theme="dark"] .tok-link     { color: #7dd3fc; }

/* ===== EDITOR =====
   A transparent textarea sits exactly on top of a highlighted <pre>. Every
   property that affects glyph position — font, size, line-height, padding,
   letter-spacing, tab-size, white-space — MUST be identical on both, or the
   caret drifts away from the text it's editing. */
.ed {
	--ed-pad: var(--s-3);
	--ed-line: 1.65;
	--ed-size: var(--fs-sm);

	display: flex;
	flex: 1;
	min-height: 0;
	background: var(--surface);
	font-family: var(--mono);
	font-size: var(--ed-size);
	line-height: var(--ed-line);
	tab-size: 2;
}
.ed.is-modal { height: min(52vh, 460px); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

.ed-gutter {
	flex: none;
	padding: var(--ed-pad) 0 60vh;
	overflow: hidden;
	border-right: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
	text-align: right;
	user-select: none;
}
.ed-gutter span { display: block; padding: 0 8px 0 var(--s-3); }

/* The scroller does the clipping, because the paint underneath is as tall as
   the whole document and slides up through this box as the textarea scrolls. */
.ed-scroll { position: relative; flex: 1; min-width: 0; overflow: hidden; }

.ed-highlight, .ed-input {
	margin: 0;
	padding: var(--ed-pad);
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	tab-size: inherit;
	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;
}

.ed-highlight {
	position: absolute;
	top: 0;
	left: 0;
	/* Anchored at the top and free to grow: the paint has to be as tall as the
	   document, not as tall as the visible box. Sizing it to the box (inset: 0)
	   and clipping it there hides every line past the first screenful, so the
	   note reads as blank the moment it's scrolled. Width comes from JS, which
	   matches it to the textarea's client width so wrapped lines break in the
	   same places. */
	min-width: 100%;
	min-height: 100%;
	pointer-events: none;
	color: var(--text);
	will-change: transform;
}

.ed-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	resize: none;
	outline: none;
	overflow: auto;
	background: transparent;
	/* The text itself is drawn by the <pre> underneath; only the caret and the
	   selection come from the textarea. */
	color: transparent;
	caret-color: var(--accent);
	-webkit-text-fill-color: transparent;
}
.ed-input::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.ed-input::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); }

.ed.is-wrapped .ed-highlight,
.ed.is-wrapped .ed-input { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.ed.is-wrapped .ed-gutter { display: none; }

/* Markdown gets prose sizing — a note is written, not just edited. */
.note-editor .ed { --ed-size: var(--fs-md); --ed-line: 1.7; --ed-pad: var(--s-5); }

/* On a phone 16px is not a preference. Anything smaller and iOS Safari zooms
   the page the instant the caret lands in the textarea, leaving the writing
   half off the screen and no way back except pinching. The size is set on the
   variable both layers read, so the highlighted text underneath stays exactly
   where the caret thinks it is. */
@media (max-width: 700px) {
	.ed, .note-editor .ed { --ed-size: 16px; }
	.note-editor .ed { --ed-pad: var(--s-4); }
	.markdown { font-size: var(--fs-lg); }
	.note-preview { padding: var(--s-4) var(--s-4) var(--s-12); }
}