/* ── Paintapp Documentation Stylesheet ─────────────────────────── */

:root {
	--bg:        #ffffff;
	--bg2:       #f5f5f5;
	--border:    #ddd;
	--accent:    #2563eb;
	--accent-h:  #1d4ed8;
	--text:      #111;
	--text-dim:  #666;
	--code-bg:   #f0f0f0;
	--sidebar-w: 220px;
}

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

html, body {
	margin: 0; padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: "Segoe UI", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ── page shell ─────────────────────────────── */
.doc-shell {
	display: flex;
	height: 100vh;
}

/* ── sidebar ────────────────────────────────── */
.doc-nav {
	width: var(--sidebar-w);
	min-width: var(--sidebar-w);
	background: var(--bg2);
	border-right: 1px solid var(--border);
	overflow-y: scroll;
	padding: 0 0 2em;
	display: flex;
	flex-direction: column;
}

.doc-splitter {
	width: 0.65em;
	cursor: col-resize;
	background: linear-gradient(to right, transparent 0%, transparent 44%, var(--border) 44%, var(--border) 56%, transparent 56%, transparent 100%);
	flex: 0 0 auto;
	touch-action: none;
	user-select: none;
}

.doc-splitter:hover,
.doc-splitter.dragging,
.doc-splitter:focus-visible {
	background: linear-gradient(to right, transparent 0%, transparent 42%, var(--accent) 42%, var(--accent) 58%, transparent 58%, transparent 100%);
	outline: none;
}

.doc-nav .brand {
	display: block;
	padding: 1em 1.2em;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	letter-spacing: .04em;
}

.doc-nav h3 {
	margin: 0.9em 1.2em 0.2em 0.4em;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.doc-nav h3.nav-section {
	cursor: pointer;
	user-select: none;
	padding-left: 0;
	display: flex;
	align-items: center;
}

.doc-nav h3.nav-section::before {
	content: '▾';
	display: inline-block;
	font-size: 2.2em;
	line-height: 1;
	margin-right: 0.25em;
	transition: transform 0.15s;
}

.doc-nav h3.nav-section.collapsed::before {
	transform: rotate(-90deg);
}

.doc-nav ul.collapsed {
	display: none;
}



.doc-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.doc-nav ul li a {
	display: block;
	padding: 0.22em 1.4em 0.22em 2.4em;
	color: var(--text);
	text-decoration: none;
	font-size: 0.92em;
	border-left: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.doc-nav ul li a:hover {
	color: var(--accent-h);
}

.doc-nav ul li a.active {
	color: var(--accent);
	border-left-color: var(--accent);
	background: rgba(124,124,247,0.07);
}

.doc-nav .nav-note {
	padding: 0.22em 1.4em 0.22em 2.4em;
	font-size: 0.82em;
	color: var(--text-dim);
}

/* Node listed in the nav whose page is still a TODO placeholder. */
.doc-nav .nav-tbd {
	font-size: 0.8em;
	color: var(--text-dim);
	opacity: 0.75;
}

.doc-nav .nav-category {
	margin: 0;
}

.doc-nav .nav-subsection {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: var(--text-dim);
	font-size: 0.76em;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0.4em 1.4em 0.1em 2.1em;
	user-select: none;
}

.doc-nav .nav-subsection::before {
	content: '▾';
	display: inline-block;
	font-size: 2.2em;
	line-height: 1;
	vertical-align: middle;
	margin-right: 0.35em;
	transition: transform 0.15s;
}

.doc-nav .nav-subsection.collapsed::before {
	transform: rotate(-90deg);
}

.doc-nav .nav-sublist.collapsed {
	display: none;
}

.doc-nav .nav-sublist li a {
	padding-left: 3.6em;
	font-size: 0.88em;
}

/* ── content iframe ─────────────────────────── */
.doc-frame {
	flex: 1;
	border: none;
	background: var(--bg);
}

/* ── content pages (loaded inside iframe) ──── */
.page {
	max-width: 57em;
	margin: 0 auto;
	padding: 2em 2.5em;
}

h1 { font-size: 1.9em; font-weight: 700; margin: 0 0 0.4em; color: var(--text); }
h2 { font-size: 1.3em; font-weight: 600; margin: 2em 0 0.5em; color: var(--text);
     border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
h3 { font-size: 1em; font-weight: 600; margin: 1.5em 0 0.4em; color: var(--text); }
h4 { font-size: 0.95em; font-weight: 600; margin: 1.2em 0 0.3em; color: var(--text-dim); }
p  { margin: 0.7em 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.1em 0.4em;
	font-family: "Cascadia Code", "Consolas", monospace;
	font-size: 0.88em;
}

kbd {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0.1em 0.45em;
	font-family: inherit;
	font-size: 0.85em;
	color: var(--text);
}

/* ── in-page table of contents ──────────────────
   For long pages. The sidebar navigates BETWEEN pages; this navigates within one.
   Two levels: h2 sections, with h3 subsections nested under the ones that have them. */
.page-toc {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.9em 1.3em 1em;
	margin: 1.6em 0 2em;
}

.page-toc h2 {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	margin: 0 0 0.5em;
	border-bottom: none;
	padding-bottom: 0;
}

.page-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Sections flow into columns on a wide page and collapse to one when narrow, so the
	   contents stay a glance rather than a scroll. */
	columns: 2;
	column-gap: 2.5em;
}

.page-toc > ul > li { break-inside: avoid; margin: 0.15em 0; }

.page-toc ul ul {
	columns: 1;
	margin: 0.1em 0 0.5em 0.9em;
	padding-left: 0.6em;
	border-left: 1px solid var(--border);
}

.page-toc ul ul li { margin: 0.05em 0; }
.page-toc ul ul a { color: var(--text-dim); font-size: 0.93em; }
.page-toc ul ul a:hover { color: var(--accent); }

@media (max-width: 700px) {
	.page-toc ul { columns: 1; }
}

/* ── screenshots ────────────────────────────── */
.screenshot {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: 6px;
	margin: 1em 0;
	display: block;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.screenshot-caption {
	font-size: 0.82em;
	color: var(--text-dim);
	margin: -0.6em 0 1.2em;
}

/* ── plain tables ───────────────────────────── */
/* Unclassed <table>s (38 of them across the format/feature pages) otherwise fall back to the
   browser defaults: centered headings and middle-aligned cells. That reads badly here, because
   these tables pair a short label column with a multi-line notes column — the label floats in
   the middle of the row while the prose starts at the top. Align both to the top-left, the way
   the classed tables above already do. Scoped with :not([class]) so the styled tables keep
   their own alignment (.compat-table is deliberately centered). */
.page table:not([class]) th {
	text-align: left;
	vertical-align: top;
}
.page table:not([class]) td {
	vertical-align: top;
}
/* A badge that IS the cell's value is a column value, not an inline annotation after a run of
   text, so .badge's inline margin-left doesn't apply — and its own padding would still inset the
   label. Cancel both, so the badge's TEXT starts on the column's left edge and lines up with the
   heading above it (the tinted box bleeds into the cell padding, which is what makes it read as
   aligned). Only when the badge starts the cell; badges used mid-sentence keep their spacing. */
.page table td > .badge:first-child {
	margin-left: calc(-0.55em - 1px);	/* own horizontal padding + border */
}

/* ── browser table ──────────────────────────── */
.browser-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	margin: 1em 0 1.5em;
}
.browser-table th {
	text-align: left;
	padding: 0.5em 0.8em;
	background: var(--bg2);
	color: var(--text-dim);
	font-weight: 600;
	font-size: 0.8em;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border);
}
.browser-table td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.browser-table td:first-child {
	font-weight: 600;
	white-space: nowrap;
	width: 11em;
}
@media (max-width: 600px) {
	.browser-table td:first-child { width: auto; }
}

/* ── badges ─────────────────────────────────── */
.badge {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
	padding: 0.1em 0.55em;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 0.4em;
}
.badge-yes  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-no   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-part { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }

/* ── tool grid ──────────────────────────────── */
.tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.8em;
	margin: 1em 0;
}

.tool-card {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.8em 1em;
}

.tool-card .tool-name { font-weight: 600; margin-bottom: 0.25em; }
.tool-card .tool-key  { font-size: 0.82em; color: var(--text-dim); }

/* ── shortcut table ─────────────────────────── */
table.shortcuts {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

table.shortcuts th {
	text-align: left;
	padding: 0.5em 0.8em;
	background: var(--bg2);
	color: var(--text-dim);
	font-weight: 600;
	font-size: 0.8em;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border);
}

table.shortcuts td {
	padding: 0.45em 0.8em;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

table.shortcuts tr:last-child td { border-bottom: none; }

table.shortcuts tr:hover td { background: rgba(255,255,255,.03); }

/* ── callout boxes ──────────────────────────── */
.note {
	background: #eff6ff;
	border-left: 3px solid var(--accent);
	border-radius: 0 4px 4px 0;
	padding: 0.7em 1em;
	margin: 1em 0;
	font-size: 0.9em;
}

/* ── menu reference ─────────────────────────── */
.menu-item { padding: 0.2em 0; border-bottom: 1px solid var(--border); }
.menu-item:last-child { border-bottom: none; }
.menu-item .mi-name { display: inline-block; min-width: 11em; font-weight: 500; }
.menu-item .mi-key  { color: var(--text-dim); font-size: 0.85em; }
.mi-sep  { height: 0.5em; }


/* -- example figures (image generation gallery) -- */
.example-figure { margin: 1.5em 0; }
.example-row {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.example-row figure {
flex: 1 1 0;
min-width: 180px;
margin: 0;
display: flex;
flex-direction: column;
}.example-row--2x2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}
.example-row--2x2 figure {
	flex: unset;
	min-width: 0;
}.example-row figure img {
width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid var(--border);
display: block;
}
.example-row figure figcaption {
font-size: 0.82em;
color: var(--text-dim);
margin-top: 0.4em;
text-align: center;
}
.example-caption {
font-size: 0.88em;
color: var(--text-dim);
margin-top: 0.8em;
font-style: italic;
}

/* -- Browser compatibility table ------------------------------- */
.compat-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.5em;
}
.compat-table caption {
  text-align: left;
  font-size: 0.85em;
  color: var(--text-dim);
  margin-bottom: 0.4em;
}
.compat-table th,
.compat-table td {
  border: 1px solid var(--border);
  padding: 0.5em 0.75em;
  text-align: center;
  white-space: nowrap;
}
.compat-table th {
  background: var(--bg-alt, #f6f6f6);
  font-weight: 600;
  font-size: 0.88em;
}
.compat-table th img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 0.3em;
}
.compat-yes     { color: #1a7f37; font-weight: 600; background: #d4f5e0; display: block; border-radius: 3px; padding: 0.1em 0.4em; }
.compat-no      { color: #9c1a1a; background: #fde0e0; display: block; border-radius: 3px; padding: 0.1em 0.4em; }
.compat-partial { color: #7a5200; background: #fef3d0; display: block; border-radius: 3px; padding: 0.1em 0.4em; }